fix(subscription): sidebar layout, responsive cards, feature labels

- Drop leaking mobile tab strip; settings sidebar is now desktop-only (hidden
  lg:block) and pinned right via grid lg:grid-cols-[280px_minmax(0,1fr)],
  matching the SettingsLayout pattern
- Make plan cards responsive (flex 1 1 280px, min 250 / max 340) instead of
  fixed 300px width
- Fix secretaries pill bidi rendering (rtl, single label)
- Add Persian label for the 'insurance' plan feature

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

assets/admin/pages/SubscriptionPage.tsx

@@ -21,6 +21,7 @@ export const PLAN_FEATURE_LABELS: Record<string, string> = {
   patient_records: 'پرونده بیمار',
   services:        'مدیریت سرویس‌ها',
   sms_panel:       'پنل پیامک',
+  insurance:       'مدیریت بیمه',
 };
 
 /** Feature labels used on the plan cards — wording copied from clinic-pro-tauri. */
@@ -28,6 +29,7 @@ const CARD_FEATURE_LABELS: Record<string, string> = {
   patient_records: 'مدیریت پرونده بیمار',
   services:        'مدیریت سرویس ها',
   sms_panel:       'پنل پیامک',
+  insurance:       'مدیریت بیمه',
 };
 
 /** The plan highlighted as "most popular" in the UI (no backend flag exists). */
@@ -114,12 +116,12 @@ export default function SubscriptionPage() {
 
   return (
     <div className="fade-in" dir="rtl" style={{ maxWidth: 1180, margin: '0 auto' }}>
-      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'stretch', gap: 0 }} className="flex-col md:flex-row">
+      <div className="grid grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)] gap-5">
         <PurchaseSubscriptionSidebar active="subscription" />
 
         <div
-          style={{ flex: 1, background: 'var(--surface)', minWidth: 0 }}
-          className="px-4 py-4 md:px-8 md:py-6 md:mr-2 rounded-[var(--r-lg)]"
+          style={{ background: 'var(--surface)', minWidth: 0 }}
+          className="px-4 py-4 md:px-6 md:py-6 rounded-[var(--r-lg)]"
         >
           <div dir="ltr" style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 32, paddingTop: 8 }}>
             {/* ── Header: current plan (left) + title (right) ── */}
@@ -137,7 +139,7 @@ export default function SubscriptionPage() {
             {plansLoading ? (
               <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, justifyContent: 'flex-end', width: '100%' }}>
                 {[1, 2, 3].map((i) => (
-                  <div key={i} className="skeleton" style={{ width: 300, height: 522, borderRadius: 10 }} />
+                  <div key={i} className="skeleton" style={{ flex: '1 1 280px', minWidth: 250, maxWidth: 340, height: 522, borderRadius: 10 }} />
                 ))}
               </div>
             ) : plans.length === 0 ? (
@@ -362,7 +364,7 @@ function PlanCard({
     <div
       data-testid={`plan-card-${plan.name}`}
       style={{
-        width: 300, maxWidth: '100%', height: 522, borderRadius: 10,
+        flex: '1 1 280px', minWidth: 250, maxWidth: 340, height: 522, borderRadius: 10,
         border: isSelected ? '2px solid #494cb3' : '2px solid var(--border)',
         background: 'var(--surface)', display: 'flex', flexDirection: 'column',
         padding: 16, position: 'relative', overflow: 'hidden',
@@ -398,15 +400,14 @@ function PlanCard({
 
           {/* Secretaries pill */}
           <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
-            <div style={{
+            <div dir="rtl" style={{
               minWidth: 86, height: 32, borderRadius: 29, background: 'var(--surface-3)',
-              color: 'var(--text)', display: 'flex', gap: 5, alignItems: 'center', justifyContent: 'center',
-              padding: '0 8px',
+              color: 'var(--text)', display: 'flex', gap: 6, alignItems: 'center', justifyContent: 'center',
+              padding: '0 12px',
             }}>
-              <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-                <span style={{ fontSize: 14 }}>منشی</span>
-                <span style={{ fontSize: 14, fontWeight: 500 }}>{formatNumber(plan.max_secretaries)}</span>
-              </div>
+              <span style={{ fontSize: 14, fontWeight: 500, whiteSpace: 'nowrap' }}>
+                {formatNumber(plan.max_secretaries)} منشی
+              </span>
               <PlanCardPerson size={18} />
             </div>
           </div>