/* =========================================================================
   نظام تصميم "Soft Ledger" — فينتك ناعم بألوان النعناع-الفيروزي، مبني خصيصًا
   لتطبيق تتبّع ديون بلغة عربية/RTL. طبّقناه هنا بتغيير نقطة مركزية وحدة
   (متغيرات :root) بدل إعادة كتابة آلاف الأسطر — كل بطاقة وزر وتنبيه بالتطبيق
   يقرأ من نفس المتغيرات أصلاً، فالتغيير ينعكس بكل مكان تلقائيًا وبأمان.
   ========================================================================= */
:root{
  /* =========================================================================
     نظام تصميم "Enterprise Ledger" — هوية SaaS احترافية حديثة: خلفيات
     Slate/Zinc محايدة + أزرق-نيلي (Indigo) كبصمة أساسية للعلامة + زمردي
     (Emerald) لحالة "نشط/مسدد" + وردي-أحمر (Rose) للديون/المتأخر + كهرماني
     (Amber) لحالة "دين معلّق". يدعم وضعين فاتح/داكن عبر html[data-theme].
     كل شيء بالتطبيق يقرأ من هذي المتغيرات فقط، فالهوية تنعكس بكل مكان دفعة
     وحدة — أسماء المتغيرات (teal/red/green) بقيت كما هي تفاديًا لإعادة كتابة
     مئات الاستخدامات، لكن قيمها الفعلية صارت إندگو/زمردي/وردي كما هو مطلوب.
     ========================================================================= */
  --bg:#F8FAFC;
  --sidebar:#0F172A;
  --sidebar2:#1E293B;
  --sidebar-hover:rgba(255,255,255,.08);
  --sidebar-active:#4F46E5;
  --text:#0F172A;
  --muted:#5F6E85; /* أغمق شوي من سليت العادي (#64748B) لتجاوز حد تباين WCAG AA (4.5:1) فوق الخلفية الفاتحة */
  --border:#E2E8F0;
  --card:#FFFFFF;
  --field-bg:#FFFFFF;
  --topbar-bg:rgba(255,255,255,.82);
  --teal:#4F46E5;
  --teal-dark:#4338CA;
  --teal-deep:#4338CA; /* نسخة "غامقة تبقى غامقة" للخلفيات المصحوبة بنص أبيض (بادجات/تدرّجات) — بعكس --teal-dark اللي معناها ينعكس بالوضع الداكن ليصير فاتح (نص واضح على خلفية داكنة) */
  --teal-bg:#EEF2FF;
  --gold:#C9A227;
  --gold-dark:#9C7A16;
  --gold-bg:#FBF2D9;
  --amber:#F59E0B;
  --amber-bg:#FFFBEB;
  --red:#F43F5E;
  --red-bg:#FFF1F2;
  --green:#10B981;
  --green-bg:#ECFDF5;
  --radius:16px;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 14px 32px -16px rgba(15,23,42,.20);
  --mint-gradient:linear-gradient(135deg, #818CF8 0%, #4F46E5 50%, #4338CA 100%);
  --navy-gradient:linear-gradient(150deg, #1E293B 0%, #0F172A 100%);
  --gold-gradient:linear-gradient(135deg, #F3D989 0%, #C9A227 55%, #8F6B12 100%);
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
  color-scheme:light;
}
/* ---------- وضع داكن (اختياري، يُفعَّل عبر زر التبديل بالقائمة الجانبية) ---------- */
html[data-theme="dark"]{
  --bg:#111827;
  --sidebar:#080B12;
  --sidebar2:#141A24;
  --sidebar-hover:rgba(255,255,255,.06);
  --sidebar-active:#3B82F6;
  --text:#F1F5F9;
  --muted:#94A3B8;
  --border:rgba(148,163,184,.16);
  --card:#1E293B;
  --field-bg:#263449;
  --topbar-bg:rgba(17,24,39,.82);
  --teal:#3B82F6;
  --teal-dark:#60A5FA; /* بالوضع الداكن هذا يُستخدم كنص/أيقونات فوق خلفيات داكنة — لازم يكون أفتح من --teal (بعكس الوضع النهاري)، تحقّقت من التباين (~5.8:1 فوق الكارد) */
  --teal-deep:#2563EB; /* نسخة غامقة تبقى غامقة للخلفيات المصحوبة بنص أبيض */
  --teal-bg:rgba(59,130,246,.16);
  --gold-bg:rgba(201,162,39,.16);
  --amber-bg:rgba(245,158,11,.14);
  --red-bg:rgba(244,63,94,.14);
  --green-bg:rgba(16,185,129,.14);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 40px -18px rgba(0,0,0,.6);
  --mint-gradient:linear-gradient(135deg, #3B82F6 0%, #2563EB 60%, #1D4ED8 100%); /* أضيق مدى من --teal-dark الفاتح (يبقى للنص بس) — يضمن تباين كافٍ مع النص الأبيض حتى بأفتح نقطة بالتدرّج */
  color-scheme:dark;
}
html[data-theme="dark"] .auth-msg.ok{background:var(--teal-bg);}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#334155;}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Tajawal',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  min-height:100dvh; /* يتجاهلها المتصفح القديم فيبقى 100vh — بالمتصفح الحديث تمنع "قفزة"
    المحتوى لحظة ظهور/اختفاء شريط عنوان سفاري/كروم بالموبايل (100vh التقليدي يحسب
    ارتفاع الشاشة كاملة حتى خلف الشريط، فيصير المحتوى أطول من الظاهر فعليًا). */
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  /* لمسة "تطبيق حقيقي" على الهاتف: يمنع الإطار الأزرق/الرمادي اللي يظهر لحظة الضغط
     على أي زر بسفاري/كروم موبايل (خاصية ويب صرفة، ما فيها بتطبيقات حقيقية)، ويمنع
     ارتداد الصفحة كلها (rubber-band) عند السحب فوق الحد بوضع standalone — بدون أي
     تكلفة أداء (خصائص CSS بحتة، صفر جافاسكربت إضافي). */
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}
h1,h2,h3,.num,.brand-name{font-family:'Cairo',sans-serif;letter-spacing:-.01em;}
.num,.sb-num,.stat-card .num{font-variant-numeric:tabular-nums;} /* أرقام الدين/الأسعار تتراصف بعرض ثابت بدل ما "ترقص" لما ترجع تتحدّث حيًا */
/* خط أحادي المسافة (Monospace) للمبالغ المالية وعناوين IP والتواريخ داخل الجداول
   والبطاقات — تصنيف مستخدَم أصلاً بأماكن عدة بالكود (IP، حجم التنزيل/الرفع) لكنه
   ما كان مُعرَّفًا بالـCSS إطلاقًا (كان بلا أي تأثير) — عرّفناه هنا وفعّلناه. */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;direction:ltr;unicode-bidi:isolate;}
.hidden{display:none !important;}
button{font-family:inherit;cursor:pointer;border:none;}
/* touch-action:manipulation يلغي تأخير الـ300ms اللي يفرضه المتصفح على أي لمسة
   عادة (لانتظار تأكد المستخدم ما يسوي "زوم بالنقر المزدوج") — بدونه كل ضغطة زر
   بالموبايل تحس فيها تأخير خفيف قبل الاستجابة، وهذا بالضبط الفرق اللي يخلي
   الموقع يحس "متصفح" مو "تطبيق" فوري الاستجابة. */
button,.btn,.nav-item,.bnav-item,a{touch-action:manipulation;}
input,select,textarea{font-family:inherit;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#C7CBDA;border-radius:8px;}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

/* ---------- Auth screens ---------- */
#screen-login{
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(99,102,241,.20), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(201,162,39,.10), transparent 40%),
    #081226 url('login-bg.svg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:24px;
}
.auth-box{
  position:relative; z-index:1;
  width:100%;max-width:420px;background:var(--card);border-radius:24px;
  box-shadow:0 24px 60px -14px rgba(11,18,32,.55);overflow:hidden;
}
.auth-head{padding:32px 32px 0;text-align:center;}
.auth-head .mark{
  width:56px;height:56px;border-radius:50%;margin:0 auto 14px;
  background:var(--mint-gradient);box-shadow:0 8px 20px -6px rgba(79,70,229,.55);
  display:flex;align-items:center;justify-content:center;
}
.auth-head h1{margin:0 0 4px;font-size:22px;}
.auth-head p{margin:0 0 20px;color:var(--muted);font-size:13.5px;}
.tabs{display:flex;border-bottom:1px solid var(--border);}
.tab{flex:1;padding:14px;text-align:center;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;background:none;}
.tab.active{color:var(--teal-dark);border-color:var(--teal);}
.auth-form{padding:22px 28px 28px;display:flex;flex-direction:column;gap:12px;}
/* شاشة الدخول بالهاتف: الروبوت + الحشوات الكبيرة كانت تدفع زر "تسجيل/إنشاء حساب بواسطة
   جوجل" تحت حافة الشاشة على أغلب الهواتف (تحسب تقريبي: ~830px ارتفاع محتوى مقابل
   ~600-700px ارتفاع فعلي بعد شريط المتصفح) — المستخدم يظن الزر مو موجود أصلًا لأنه ما
   يخطر بباله يسحب/يمرر بشاشة تسجيل دخول. نقلّص الروبوت والحشوات بدل الاعتماد على
   التمرير، حتى يصير كل شي ظاهر بأول شاشة مباشرة. */
@media (max-width:480px), (max-height:800px){
  #screen-login{ padding:14px; }
  .mascot-wrap{ margin-bottom:6px; }
  .mascot-bubble{ font-size:11.5px; padding:6px 12px; margin-bottom:6px; max-width:220px; }
  .mascot{ width:44px; height:44px; }
  .mascot-head{ width:44px; height:44px; border-radius:16px; }
  .mascot-eye{ top:17px; width:7px; height:7px; }
  .mascot-eye.left{ right:11px; } .mascot-eye.right{ right:26px; }
  .mascot-hand{ width:13px; height:13px; bottom:-20px; }
  .mascot-hand.left{ right:4px; } .mascot-hand.right{ right:27px; }
  .mascot.covering .mascot-hand{ bottom:15px; }
  .mascot-antenna{ top:-9px; height:9px; }
  .auth-head{ padding:16px 24px 0; }
  .auth-head .mark{ width:42px; height:42px; margin-bottom:8px; }
  .auth-head .mark svg{ width:22px; height:22px; }
  .auth-head h1{ font-size:18px; }
  .auth-head p{ margin-bottom:10px; font-size:12.5px; }
  .tab{ padding:10px; font-size:13px; }
  .auth-form{ padding:16px 24px 20px; gap:9px; }
  .auth-form > div[style*="margin:14px"]{ margin:6px 0 !important; }
}

/* ===== فولت — الروبوت الحارس لصفحة الدخول =====
   نفس فكرة الروبوت اللطيف اللي بالمرجع (فقاعة كلام + يدين تغطّي العين لما
   تكتب كلمة المرور) — بألوان "Soft Ledger" النعناعية بدل الألوان الأصلية،
   ومبني بـCSS خالص (بدون صور خارجية) حتى يشتغل فوراً بدون تحميل إضافي. */
.mascot-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:14px;position:relative;z-index:1;}
.mascot-bubble{
  background:#fff;color:var(--text);font-size:13px;font-weight:700;padding:9px 16px;
  border-radius:16px;box-shadow:0 6px 16px rgba(79,70,229,.20);margin-bottom:10px;
  max-width:260px;text-align:center;position:relative;transition:.2s;
}
.mascot-bubble::after{
  content:'';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;background:#fff;border-radius:3px;rotate:45deg;
}
.mascot{width:76px;height:76px;position:relative;animation:mascotBob 2.6s ease-in-out infinite;}
@keyframes mascotBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.mascot-antenna{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:3px;height:14px;background:var(--teal-dark);}
.mascot-antenna span{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:var(--gold-gradient);box-shadow:0 0 8px rgba(201,162,39,.7);}
.mascot-head{
  width:76px;height:76px;border-radius:26px;background:var(--mint-gradient);
  box-shadow:0 12px 24px -8px rgba(79,70,229,.55);position:relative;overflow:hidden;
}
.mascot-eye{position:absolute;top:30px;width:11px;height:11px;border-radius:50%;background:#101828;transition:transform .25s ease;}
.mascot-eye.left{right:20px;} .mascot-eye.right{right:44px;}
.mascot-hand{
  position:absolute;bottom:-34px;width:22px;height:22px;border-radius:50%;background:#F2FBF9;
  box-shadow:0 3px 8px rgba(0,0,0,.15);transition:bottom .28s cubic-bezier(.34,1.4,.64,1);
}
.mascot-hand.left{right:8px;} .mascot-hand.right{right:46px;}
.mascot.covering .mascot-hand{bottom:26px;}
.mascot.covering .mascot-eye{transform:scaleY(.15);}

.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;font-weight:700;color:var(--muted);}
.field input,.field select,.field textarea{
  padding:11px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:14.5px;
  background:var(--field-bg);transition:border-color .15s, box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);background:var(--card);box-shadow:0 0 0 3.5px var(--teal-bg);}
/* ---------- محرر نصوص الرسائل (Edit/Preview + متغيرات قابلة للنقر) ---------- */
.msg-editor{border:1.5px solid var(--border);border-radius:14px;overflow:hidden;background:var(--field-bg);}
.msg-editor-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.msg-editor-title{font-size:13.5px;font-weight:800;color:var(--text);}
.msg-editor-tabs{display:flex;gap:4px;background:var(--card);border:1px solid var(--border);border-radius:9px;padding:3px;}
.msg-editor-tab{border:none;background:transparent;padding:5px 12px;border-radius:7px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:.15s;}
.msg-editor-tab.active{background:var(--teal);color:#fff;}
.msg-editor-actions{display:flex;gap:4px;}
.msg-editor-icon-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--card);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;transition:.15s;}
.msg-editor-icon-btn:hover:not(:disabled){background:var(--teal-bg);color:var(--teal-dark);border-color:var(--teal);}
.msg-editor-icon-btn:disabled{opacity:.35;cursor:not-allowed;}
.msg-var-grid{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--border);}
.msg-var-btn{border:1px solid var(--teal);background:var(--teal-bg);color:var(--teal-dark);font-family:var(--mono);font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:99px;cursor:pointer;transition:.15s;direction:ltr;}
.msg-var-btn:hover{background:var(--teal);color:#fff;transform:translateY(-1px);}
.msg-editor-body textarea{width:100%;border:none;border-radius:0;padding:12px;font-size:14px;line-height:1.7;resize:vertical;min-height:130px;background:var(--field-bg);}
.msg-editor-body textarea:focus{outline:none;box-shadow:none;}
.msg-preview-box{padding:14px;font-size:14px;line-height:1.9;white-space:pre-wrap;color:var(--text);background:var(--card);min-height:130px;}
.msg-editor-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;background:var(--bg);border-top:1px solid var(--border);}
.msg-char-count{font-size:11px;color:var(--muted);font-family:var(--mono);direction:ltr;}
.msg-char-count.over{color:var(--red);font-weight:700;}
/* ---------- محادثة الدعم الفني (وكيل ↔ مدير) ---------- */
.chat-shell{display:flex;flex-direction:column;height:560px;background:var(--bg);border-radius:14px;overflow:hidden;border:1px solid var(--border);}
.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:16px;}
.chat-empty{margin:auto;text-align:center;color:var(--muted);font-size:13.5px;max-width:260px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.chat-empty-icon{width:44px;height:44px;border-radius:50%;background:var(--teal-bg);display:flex;align-items:center;justify-content:center;font-size:20px;}
.chat-row{display:flex;gap:8px;max-width:78%;align-items:flex-end;}
.chat-row.mine{align-self:flex-end;flex-direction:row-reverse;}
.chat-row.theirs{align-self:flex-start;}
.chat-avatar{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;}
.chat-row.mine .chat-avatar{background:var(--mint-gradient);}
.chat-row.theirs .chat-avatar{background:linear-gradient(135deg,#C9A227,#8F6B12);}
.chat-bubble-wrap{display:flex;flex-direction:column;gap:3px;}
.chat-row.mine .chat-bubble-wrap{align-items:flex-end;}
.chat-bubble{padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.6;word-break:break-word;}
.chat-row.mine .chat-bubble{background:var(--mint-gradient);color:#fff;border-bottom-left-radius:4px;}
.chat-row.theirs .chat-bubble{background:var(--card);border:1px solid var(--border);color:var(--text);border-bottom-right-radius:4px;}
.chat-time{font-size:10.5px;color:var(--muted);font-family:var(--mono);direction:ltr;padding:0 4px;}
.chat-input-bar{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--card);}
.chat-input-bar input{flex:1;padding:11px 14px;border:1.5px solid var(--border);border-radius:12px;font-size:14px;background:var(--field-bg);transition:border-color .15s, box-shadow .15s;}
.chat-input-bar input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3.5px var(--teal-bg);}
.chat-send-btn{width:44px;height:44px;border-radius:12px;flex:none;padding:0;}
.btn{
  padding:12px 18px;border-radius:12px;font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.btn-primary{background:var(--mint-gradient);color:#fff;box-shadow:0 10px 22px -10px rgba(79,70,229,.65);}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 12px 26px -8px rgba(79,70,229,.75);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0) scale(.98);}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--teal);color:var(--teal-dark);background:var(--teal-bg);}
.btn-danger{background:var(--red);color:#fff;}
.btn-danger:hover{filter:brightness(1.06);}
.btn-danger-outline{background:var(--red-bg);color:var(--red);}
.btn-amber{background:var(--amber);color:#fff;}
.btn-ghost{background:transparent;color:var(--muted);}
.btn-ghost:hover{background:var(--bg);color:var(--text);}
.theme-toggle-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.theme-toggle-btn:hover{background:var(--teal-bg);color:var(--teal-dark);}
/* مؤشر اتصال حي بالشبكة بالشريط العلوي — يعكس حالة الإنترنت الفعلية (navigator.onLine)،
   ويذكّر المستخدم إن التطبيق يعمل بالزمن الحقيقي (Firestore live listeners) لا بيانات ثابتة. */
.conn-indicator{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:var(--green-bg);color:var(--green);font-size:11.5px;font-weight:700;margin-inline-end:6px;white-space:nowrap;}
/* النقطة الخضراء تتحرّك بـ transform/opacity فقط (compositor-only) بدل box-shadow —
   box-shadow المتحرّك يفرض إعادة رسم (repaint) كل فريم طول عمر الجلسة لأن هذا
   المؤشر ظاهر بكل صفحات التطبيق دائمًا؛ الحلقة النابضة هنا عنصر ::after منفصل
   يكبر ويتلاشى بـ transform:scale/opacity، وهذا يشتغل على الـGPU فقط بدون أي
   كلفة على خيط المعالجة الرئيسي — أهم شي لسرعة استجابة التطبيق العامة. */
.conn-dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;}
.conn-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--green);animation:connPulse 2s ease-out infinite;}
.conn-indicator.offline{background:var(--red-bg);color:var(--red);}
.conn-indicator.offline .conn-dot{background:var(--red);}
.conn-indicator.offline .conn-dot::after{animation:none;opacity:0;}
@keyframes connPulse{0%{transform:scale(1);opacity:.55;}100%{transform:scale(3.2);opacity:0;}}
@media (max-width:600px){ .conn-label{display:none;} .conn-indicator{padding:8px;} }
@media (prefers-reduced-motion: reduce){ .conn-dot::after{animation:none;opacity:0;} }
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:9px;}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none !important;}
.auth-msg{font-size:13px;padding:10px 12px;border-radius:8px;margin-top:2px;}
.auth-msg.err{background:var(--red-bg);color:var(--red);}
.auth-msg.ok{background:var(--teal-bg);color:var(--teal-dark);}

#screen-pending{
  min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:24px;
}
.pending-box{max-width:420px;background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:36px;text-align:center;}
.pending-box .icon{font-size:40px;margin-bottom:10px;}
.pending-box h2{margin:0 0 8px;}
.pending-box p{color:var(--muted);line-height:1.8;font-size:14.5px;}

/* ---------- App shell ---------- */
#screen-app{display:flex;min-height:100vh;min-height:100dvh;}
/* خلفية القائمة الجانبية: صورة sidebar-bg.svg (سلسلة عقد شبكة متصلة + توهجات
   تركواز/ذهبي، نفس هوية login-bg.svg) فوق تدرّج --sidebar/--sidebar2 الأصلي —
   واضحة ومرئية فعليًا (مو مجرد لمسة لون خفيفة)، بدل اللون الأسود الصلب خلف
   عناصر القائمة. ملف SVG محلي صغير الحجم (لا يؤخّر LCP، ولا يوجد أي تحريك هنا
   فتكلفته صفر على الأداء أثناء الاستخدام). */
.sidebar{
  width:262px;flex:none;color:#CBD1E6;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;
  border-left:1px solid rgba(255,255,255,.06);
  background-image:url('sidebar-bg.svg'), linear-gradient(175deg, var(--sidebar) 0%, var(--sidebar2) 100%);
  background-repeat:no-repeat, no-repeat;
  background-size:100% 100%, 100% 100%;
  background-position:top center, top center;
}
.sidebar.collapsed{ display:none; }
@media(max-width:860px){
  .sidebar{ position:fixed; right:0; top:0; z-index:30; box-shadow:-10px 0 30px rgba(0,0,0,.15); display:none; }
  .sidebar.mobile-open{ display:flex; }
}
/* شفنا blur(2px) هنا ما له أي فرق مرئي تقريبًا (طبقة تعتيم بسيطة خلف القائمة
   بالموبايل فقط)، وتكلفة GPU لأي backdrop-filter مو مجانية — أزلناها. */
.sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(4,9,20,.55); z-index:25; }
@media(max-width:860px){
  .sidebar-overlay.show{ display:block; }
}

/* ---------- Bottom tab bar (موبايل فقط) — تنقّل سفلي بأسلوب التطبيقات الأصلية،
   يعيد استخدام نفس أزرار .nav-item/goPage() الموجودة أصلاً (data-page + onclick)
   حتى تبقى حالة "التبويب النشط" متزامنة تلقائيًا بلا أي منطق جافاسكربت إضافي. */
.bottom-nav{
  /* الخلفية هنا شبه معتمة أصلًا (92%) — تأثير الـblur خلفها كان يظهر بالكاد بس
     يبقى شغّال بالخلفية كل فريم أثناء التمرير (شريط ثابت بأسفل الشاشة بالموبايل
     طول وقت التصفح). إزالته توفّر تكلفة GPU حقيقية بدون فرق مرئي يُذكر. */
  display:none; position:fixed; right:0; left:0; bottom:0; z-index:28;
  background:rgba(8,18,38,.96);
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -8px 28px -8px rgba(8,18,38,.35);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom)) 6px;
  gap:2px;
}
.bottom-nav .bnav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:8px 2px 7px; border-radius:14px; color:#8590AD; background:none; font-size:10.5px; font-weight:800;
  min-height:52px; transition:color .15s ease, background .15s ease, transform .12s ease;
}
.bottom-nav .bnav-item span:last-child{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bottom-nav .bnav-item .ico{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.bottom-nav .bnav-item .ico svg{ width:21px; height:21px; }
.bottom-nav .bnav-item:active{ transform:scale(.92); }
.bottom-nav .bnav-item.active{ color:#fff; background:linear-gradient(180deg,rgba(79,70,229,.22),rgba(79,70,229,.05)); }
.bottom-nav .bnav-item.active .ico{
  background:var(--mint-gradient); border-radius:10px; box-shadow:0 4px 12px -3px rgba(79,70,229,.7);
  color:#fff; width:34px; height:26px; margin-top:-8px;
}
.bottom-nav .bnav-item.bnav-more.active{ color:var(--gold); }
.bottom-nav .bnav-item.bnav-more.active .ico{ background:var(--gold-gradient); box-shadow:0 4px 12px -3px rgba(201,162,39,.7); }
@media(max-width:860px){
  .bottom-nav{ display:flex; }
  #screen-app .main{ padding-bottom:calc(60px + env(safe-area-inset-bottom)); }
  #toast-wrap{ bottom:calc(78px + env(safe-area-inset-bottom)); }
  .install-banner{ bottom:calc(78px + env(safe-area-inset-bottom)); }
}
/* ---------------------------- بانر "ثبّت التطبيق" ---------------------------- */
.install-banner{
  position:fixed; right:14px; left:14px; bottom:20px; z-index:90;
  background:var(--card); border:1.5px solid var(--border); border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.2);
  padding:12px 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  max-width:520px; margin:0 auto; font-size:13px; line-height:1.6;
  opacity:0; transform:translateY(12px); transition:opacity .25s, transform .25s;
}
.install-banner.show{ opacity:1; transform:translateY(0); }
.install-banner span{ flex:1; min-width:200px; }
.sidebar .brand{padding:18px 20px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(255,255,255,.07);}
.sidebar .brand .mark{
  width:38px;height:38px;border-radius:12px;background:var(--mint-gradient);
  display:flex;align-items:center;justify-content:center;flex:none;color:#fff;
  box-shadow:0 6px 16px -4px rgba(79,70,229,.65);
}
.sidebar .brand .mark svg{width:20px;height:20px;}
.sidebar .brand-name{font-size:15px;font-weight:800;color:#fff;}
.sidebar .brand-sub{font-size:11px;color:#7B84A6;}
.nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;
  color:#9298B5;background:none;font-size:13.5px;font-weight:700;text-align:right;width:100%;
  position:relative;transition:background .15s ease,color .15s ease;
}
.nav-item .ico{width:18px;text-align:center;display:inline-flex;align-items:center;justify-content:center;}
.nav-item .ico svg{width:18px;height:18px;}
.nav-item:hover{background:var(--sidebar-hover);color:#fff;}
.nav-item.active{background:var(--mint-gradient);color:#fff;box-shadow:0 8px 18px -6px rgba(79,70,229,.55);}
.nav-item.active::before{
  content:'';position:absolute;right:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:#fff;opacity:.7;
}
.sidebar-foot{padding:16px 18px 20px;border-top:1px solid rgba(255,255,255,.07);}
.sidebar-foot .who{font-size:12.5px;color:#7B84A6;margin-bottom:8px;line-height:1.6;}
.sidebar-foot .who b{color:#fff;display:block;font-size:13.5px;}

.main{
  flex:1;min-width:0;display:flex;flex-direction:column;
  background:
    radial-gradient(circle at 100% 0%, rgba(79,70,229,.06), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(201,162,39,.05), transparent 35%),
    var(--bg);
}
.topbar{
  /* الشريط هذا ثابت (position:sticky) وظاهر دائمًا بكل صفحة — خفّضنا قيمة الـblur
     من 14px إلى 9px (نفس مظهر الزجاج المصنفر تقريبًا) لتقليل تكلفة الرسم المستمرة
     بدون التخلي عن التأثير البصري بالكامل مثل الشريط السفلي وطبقة التعتيم. */
  height:66px;flex:none;background:var(--topbar-bg);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:0 22px;position:sticky;top:0;z-index:5;
}
.topbar h2{margin:0;font-size:18px;font-weight:800;}
/* المسافات الأساسية بكل التطبيق (content/card/grid) قُلّصت بجولة تحسين لاحقة —
   راجع التعليق فوق .card أدناه لتفاصيل القيم القديم/الجديد. */
.content{padding:20px;flex:1;max-width:1400px;width:100%;margin:0 auto;}
.page{display:none;}
.page.active{display:block;animation:pageFadeIn .22s ease;}
@keyframes pageFadeIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

/* cards / grids */
.grid{display:grid;gap:12px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.grid-2{grid-template-columns:2fr 1fr;}
/* صفحة الإعدادات (وكيل/موظف): كانت تستخدم style="grid-template-columns:1fr 1fr" مباشرة
   بالـHTML (inline) بدل كلاس عادي — هذا كان يحتاج قاعدة استثناء خاصة (#page-settings .grid
   بـ!important) عشان تتغلب عليه بالموبايل، وأي تعديل مستقبلي على ترتيب/تفاصيل الصفحة كان
   معرّض يكسرها بسهولة. حوّلناها لكلاس عادي `.grid-settings` بنفس نمط .grid-2/.grid-4 —
   تنضبط تلقائيًا بنفس قاعدة الموبايل العامة أدناه، بدون أي استثناء خاص. */
.grid-settings{grid-template-columns:1fr 1fr;align-items:start;}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-2,.grid-settings{grid-template-columns:1fr;}}
/* مسافات أكثر إحكامًا (تعليق المستخدم: كانت واسعة أكثر من اللازم) — قلّلنا حشوة
   .card من 20px لـ16px، و.content من 26px لـ20px، و.grid gap من 16px لـ12px —
   تقارب معقول بين العناصر بدون ما يصير مزدحم أو يكسر أهداف اللمس 44px بالموبايل
   (تلك القيم بقيت كما هي، فقط الحشوات/الفراغات العامة تقلّصت). */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;}
.stat-card{display:flex;flex-direction:column;gap:6px;}
.stat-card .label{font-size:12.5px;color:var(--muted);font-weight:700;}
.stat-card .num{font-size:27px;font-weight:800;letter-spacing:-.01em;}
.stat-card .sub{font-size:12px;color:var(--muted);}
.stat-teal .num{color:var(--teal-dark);}
.stat-amber .num{color:var(--amber);}
.stat-red .num{color:var(--red);}

.stat-block{
  position:relative; overflow:hidden; border-radius:var(--radius); padding:16px 18px; color:#fff;
  display:flex; flex-direction:column; justify-content:space-between; min-height:96px; box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease;
  border:1px solid rgba(255,255,255,.14);
}
.stat-block > *{ position:relative; z-index:1; }
.stat-block:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.2); }
.stat-block > div:first-child{ padding-left:42px; } /* يحجز مساحة لصندوق الأيقونة العلوي حتى ما يتراكب النص فوقه لما الكارد يضيق (عمودين بالموبايل) */
.stat-block .sb-title{font-size:13px; font-weight:800;}
.stat-block .sb-sub{font-size:11px; opacity:.85; margin-top:2px;}
.stat-block .sb-num{font-family:'Cairo'; font-size:26px; font-weight:900; margin-top:10px;}
.stat-block .sb-ico{
  position:absolute; top:14px; left:16px; font-size:20px; line-height:1;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18); border-radius:9px;
}
.stat-block .sb-ico svg{ width:18px; height:18px; }
.stat-hero{
  border-radius:var(--radius); padding:18px 20px; color:#fff; display:flex; align-items:center;
  justify-content:space-between; margin-bottom:14px; box-shadow:var(--shadow); cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease; background:linear-gradient(120deg,#081226,#10233F 55%,#0A6B75);
}
.stat-hero:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.2); }
.stat-hero .sh-label{font-size:12px; opacity:.9;}
.stat-hero .sh-num{font-family:'Cairo'; font-size:30px; font-weight:900; margin-top:4px;}
.stat-hero .sh-ico{font-size:32px; opacity:.9; display:flex; align-items:center;}
.stat-hero .sh-ico svg{ width:32px; height:32px; }
.sb-navy{ background:var(--mint-gradient); }
.sb-blue{ background:linear-gradient(135deg,#7DD3FC,#0284C7); }
.sb-amber{ background:linear-gradient(135deg,#FB923C,#C2410C); }
.sb-red{ background:linear-gradient(135deg,#FB7185,#BE123C); }
.sb-green{ background:linear-gradient(135deg,#34D399,#059669); }
.sb-gray{ background:linear-gradient(135deg,#94A3B8,#334155); }

/* النمط الكلاسيكي (القديم) — نُبقيه بالكامل تحت أسماء أصناف مختلفة حتى يقدر الوكيل
   يرجع له بزر تبديل، بدون ما نمسح أو نلمس النمط الجديد أعلاه إطلاقًا. */
.stat-block-classic{
  position:relative; overflow:hidden; border-radius:var(--radius); padding:20px 22px; color:#fff;
  display:flex; flex-direction:column; justify-content:space-between; min-height:108px; box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease; border:1px solid rgba(255,255,255,.14);
}
.stat-block-classic::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 45%);
}
.stat-block-classic > *{ position:relative; z-index:1; }
.stat-block-classic:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.2); }
.stat-block-classic .sb-title{font-size:14px; font-weight:800;}
.stat-block-classic .sb-sub{font-size:11.5px; opacity:.85; margin-top:2px;}
.stat-block-classic .sb-num{font-family:'Cairo'; font-size:32px; font-weight:900; margin-top:14px;}
.stat-block-classic .sb-ico{
  position:absolute; left:-6px; bottom:-10px; font-size:64px; opacity:.18; line-height:1;
  width:auto; height:auto; background:none; border-radius:0; top:auto;
}
.stat-block-classic .sb-ico svg{ width:64px; height:64px; }
.sb-c-navy{ background:linear-gradient(135deg,#1E293B,#0F172A); }
.sb-c-blue{ background:linear-gradient(135deg,#17A2B8,#116A79); }
.sb-c-amber{ background:linear-gradient(135deg,#FD7E14,#C2610A); }
.sb-c-red{ background:linear-gradient(135deg,#DC3545,#A82835); }
.sb-c-green{ background:linear-gradient(135deg,#28A745,#1E7E34); }
.sb-c-gray{ background:linear-gradient(135deg,#6C757D,#495057); }

.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.section-title h3{margin:0;font-size:15.5px;}

.alert{
  display:flex;align-items:center;gap:10px;background:var(--red-bg);color:var(--red);
  border:1px solid #F3CFCB;border-radius:12px;padding:13px 16px;margin-bottom:18px;font-weight:700;font-size:13.5px;
}
.alert .ico{font-size:18px;}
.alert .ico svg{width:18px;height:18px;vertical-align:-3px;}
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;}
.badge-active{background:var(--teal-bg);color:var(--teal-dark);}
.badge-suspended{background:var(--amber-bg);color:var(--amber);}
.badge-vip{background:var(--gold-gradient);color:#4A3608;font-weight:800;box-shadow:0 2px 6px rgba(201,162,39,.35);}
.badge-cancelled{background:var(--red-bg);color:var(--red);}
.badge-pending{background:var(--amber-bg);color:var(--amber);}
.badge-rejected{background:#EFEFEF;color:#7A7A7A;}

/* بطاقة موظف — بديل مبنى بشكل عمودي طبيعي بدل صف جدول عريض (كان ينضغط على
   الموبايل: 6 أعمدة، بريد+هاتف+شارات صلاحيات متعددة+4 أزرار كلها بصف واحد). */
.emp-cards-list{display:flex;flex-direction:column;gap:12px;}
.emp-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;}
.emp-card-head{font-size:15px;margin-bottom:8px;}
.emp-card-info{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:13px;margin-bottom:10px;}
.emp-card-perms{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.emp-card-actions{display:flex;flex-wrap:wrap;gap:8px;}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:right;font-size:11.5px;color:var(--muted);font-weight:800;letter-spacing:.02em;padding:11px 12px;border-bottom:2px solid var(--border);white-space:nowrap;background:#FAFAFD;}
th:first-child{border-top-right-radius:10px;} th:last-child{border-top-left-radius:10px;}
td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle;}
tbody tr{transition:background .1s ease;}
tbody tr:hover{background:#FAFAFE;}
tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto;}
/* بطاقات المشتركين — بديل الجدول على الموبايل بس (مخفية افتراضيًا، تظهر داخل استعلام
   الموبايل بالأسفل). الجدول يضل زي ما هو تمامًا على الكمبيوتر، بدون أي تغيير. */
.sub-cards-list{ display:none; }
.sub-cards-legend{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; background:var(--card);
  border:1px solid var(--border); border-radius:14px; padding:10px 14px; margin-bottom:12px;
  font-size:12px; color:var(--muted);
}
/* نقطة ملوّنة صغيرة بدل إيموجي دائرة ملوّنة (🔵🟢🔴🟠⚫) بشارة حالة المشترك */
.legend-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:5px; vertical-align:middle; }
.sub-card{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  padding:14px 16px; margin-bottom:10px; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease;
}
.sub-card:active{ transform:scale(.98); }
.sub-card-main{ display:flex; align-items:center; gap:8px; }
/* شريط إجراءات سريعة أسفل بطاقة المشترك بالقائمة مباشرة — تسديد/إضافة دين بدون
   الحاجة لفتح صفحة تفاصيل المشترك الكاملة كل مرة. تستدعي نفس openPaymentForm()
   المستخدمة أصلاً بصفحة التفاصيل، فلا يوجد منطق جديد — مجرد اختصار وصول. */
.sub-card-actions{ display:flex; gap:8px; margin-top:11px; padding-top:11px; border-top:1px dashed var(--border); }
.sca-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 8px; border-radius:10px; font-size:12px; font-weight:800; border:none;
}
.sca-pay{ background:var(--green-bg); color:var(--green); }
.sca-debt{ background:var(--amber-bg); color:var(--amber); }
.sca-renew{ background:var(--teal-bg); color:var(--teal-dark); }
.sub-card-name{ flex:1 1 0; min-width:0; }
/* اسم المشترك ببطاقة القائمة (وضع "عرض البطاقات") — كبّرناه (14.5px → 17px) بناءً
   على طلب صريح يكون بارز وواضح بأول نظرة، مع إبقاء سطر واحد بس (nowrap) هنا
   تحديدًا (بعكس بطاقة التفاصيل الكاملة) — عشان ما ينكسر ترتيب باقي عناصر البطاقة
   المدمجة (الحالة/الباقة/الوقت المتبقي) بجنبه بنفس الصف. */
.sub-card-name-row{ display:flex; align-items:center; gap:6px; font-size:17px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sub-card-username{ font-size:11px; color:var(--muted); margin-top:3px; }
.sub-card-mid{ display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; padding:0 8px; }
.sub-card-badges-row{ display:flex; align-items:center; gap:6px; }
.sub-card-left{ display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; }
.badge-pkg{
  background:linear-gradient(135deg,var(--teal),var(--teal-deep)); color:#fff; font-size:12px; font-weight:900;
  padding:5px 16px; border-radius:20px; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.badge-debt{ background:var(--red); color:#fff; font-size:11px; font-weight:800; padding:3px 12px; border-radius:20px; }
.sub-card-time{ font-size:12.5px; font-weight:900; text-align:center; flex-shrink:0; min-width:56px; color:var(--text); line-height:1.5; }
.sub-card-expiry{ font-size:10.5px; color:var(--muted); white-space:nowrap; margin-top:1px; }
.sub-card-time .expired{ color:var(--red); }
.sub-card-time .urgent{ color:var(--amber); }
.table-actions{display:flex;gap:6px;}
.empty-row{text-align:center;color:var(--muted);padding:36px 0;}
.empty-row::before{content:'○';display:block;font-size:26px;margin-bottom:8px;opacity:.35;}

/* فلاتر سريعة (Pills) — أزرار فلترة فورية فوق قوائم المشتركين/الديون، بديل أسرع
   وأوضح من فتح قائمة منسدلة لكل تبديل حالة شائع. */
.filter-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.pill{
  padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:800;
  background:var(--card);border:1.5px solid var(--border);color:var(--muted);
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease;
}
.pill:hover{border-color:var(--teal);color:var(--teal-dark);}
.pill:active{transform:scale(.96);}
.pill.active{background:var(--mint-gradient);border-color:transparent;color:#fff;box-shadow:0 6px 16px -6px rgba(79,70,229,.55);}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.toolbar input, .toolbar select{
  padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;font-size:13.5px;background:var(--card);
}
.toolbar .search{flex:1;min-width:200px;}
.spacer{flex:1;}

/* modal — على الشاشات الكبيرة (تابلت فما فوق) يظهر كـ"لوحة منزلقة" (slide-over) من
   الطرف الأيسر (عكس جهة القائمة الجانبية) بدل نافذة مركزية بأسلوب سطح مكتب تقليدي —
   إحساس أقرب لتطبيقات SaaS الحديثة. على الموبايل (أقل من 600px) يتحول لـ"ورقة سفلية"
   حسب القاعدة الموجودة أدناه بقسم media-query الخاص بالموبايل. */
.modal-overlay{
  position:fixed;inset:0;background:rgba(5,12,26,.55);display:flex;align-items:stretch;justify-content:flex-end;
  padding:0;z-index:50;overflow-y:hidden;
}
.modal{
  background:var(--card);border-radius:0;width:100%;max-width:460px;height:100%;
  box-shadow:-24px 0 60px -12px rgba(5,12,26,.3);
  display:flex;flex-direction:column;
  animation:slideOverIn .26s cubic-bezier(.22,.68,0,1.05);
}
@keyframes slideOverIn{ from{ transform:translateX(-100%); opacity:.6; } to{ transform:translateX(0); opacity:1; } }
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex:none;}
.modal-head h3{margin:0;font-size:17px;font-weight:800;}
.modal-close{background:none;font-size:20px;color:var(--muted);line-height:1;}
.modal-body{padding:16px 20px;display:flex;flex-direction:column;gap:12px;flex:1;overflow-y:auto;overscroll-behavior:contain;}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-start;flex:none;}

/* تنبيه تأكيد مخصص (بديل confirm() الافتراضية بالمتصفح) — شكله زي تنبيه تطبيق موبايل:
   دائرة أيقونة بالأعلى + عنوان + نص + زرين بيضاويين */
.confirm-overlay{
  position:fixed;inset:0;background:rgba(16,34,41,.55);display:flex;align-items:center;justify-content:center;
  padding:16px;z-index:200;
}
.confirm-box{
  background:var(--card);border-radius:20px;width:100%;max-width:340px;box-shadow:0 30px 80px rgba(0,0,0,.35);
  padding:26px 22px 20px;text-align:center;animation:confirmPop .18s ease;
}
@keyframes confirmPop{from{transform:scale(.9);opacity:0;}to{transform:scale(1);opacity:1;}}
.confirm-icon{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;font-size:26px;
}
.confirm-icon.ci-warn{background:var(--amber-bg);color:var(--amber);}
.confirm-icon.ci-danger{background:var(--red-bg);color:var(--red);}
.confirm-icon.ci-info{background:var(--teal-bg);color:var(--teal);}
.confirm-title{font-size:16px;font-weight:700;margin-bottom:6px;}
.confirm-msg{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:20px;}
.confirm-actions{display:flex;gap:10px;}
.confirm-actions button{
  flex:1;border:none;border-radius:999px;padding:11px 10px;font-size:13.5px;font-weight:700;cursor:pointer;
}
.confirm-btn-cancel{background:var(--bg);color:var(--text);}
.confirm-btn-ok{background:var(--teal);color:#fff;}
.confirm-btn-ok.ci-danger-btn{background:var(--red);}

/* Toggle Switch عام (بديل الـselect/checkbox العادي بأي مكان بالتطبيق) — مصمم
   خصيصًا لصفحة RTL: دائرة التبديل ترتكز على right (موضع البداية بالعربي = إيقاف)،
   وتتحرك يسارًا (translateX سالب) عند التفعيل — هذا يصلح خلل كانت فيه الدائرة
   تنزاح خارج حدود المفتاح فعليًا وتختفي عند التفعيل (كانت مرتكزة على left مع حركة
   سالبة بنفس الاتجاه، فتطلع بره الصندوق تمامًا). صار الشكل أوضح: مسار رمادي غامق
   بحد واضح لما يكون موقوف، يتحول تدرّج أخضر مطمئن لما يكون مفعّل، ودائرة أكبر
   وأوضح مع ظل أقوى.
   */
.toggle-switch{position:relative;display:inline-block;width:50px;height:28px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute;}
.toggle-switch .ts-slider{position:absolute;cursor:pointer;inset:0;background:#9AA1AC;border:1px solid #838B96;transition:.22s;border-radius:999px;}
.toggle-switch .ts-slider:before{position:absolute;content:"";height:22px;width:22px;top:2px;right:2px;background:#fff;transition:.22s;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.35);}
.toggle-switch input:checked + .ts-slider{background:#1FA97C;border-color:#188A65;}
.toggle-switch input:checked + .ts-slider:before{transform:translateX(-22px);}
.toggle-switch input:disabled + .ts-slider{opacity:.45;cursor:default;}
.toggle-switch input:focus-visible + .ts-slider{outline:2px solid var(--teal);outline-offset:2px;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--border);}
.toggle-row:last-child{border-bottom:none;}
.toggle-row-text .tr-title{font-weight:700;font-size:14px;margin-bottom:3px;}
.toggle-row-text .tr-sub{font-size:12px;color:var(--muted);line-height:1.5;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:520px){.form-row{grid-template-columns:1fr;}}

/* ---------------------------- إعلان منبثق (popup) عند فتح التطبيق ---------------------------- */
.announce-popup{position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(-14px);z-index:9999;width:min(380px,92vw);background:var(--card);border:1.5px solid var(--border);border-radius:16px;box-shadow:0 10px 32px rgba(0,0,0,.22);opacity:0;transition:opacity .25s,transform .25s;}
.announce-popup.show{opacity:1;transform:translateX(-50%) translateY(0);}
.announce-popup-close{position:absolute;top:8px;left:8px;width:26px;height:26px;border-radius:50%;border:none;background:rgba(0,0,0,.08);color:var(--text);font-size:14px;cursor:pointer;line-height:1;}
.announce-popup-img{width:100%;max-height:220px;object-fit:cover;border-radius:16px 16px 0 0;display:block;}
.announce-popup-body{padding:14px 16px;white-space:pre-line;font-size:14px;line-height:1.7;}
.announce-bell{position:relative;}
.announce-bell-dot{position:absolute;top:5px;left:5px;width:9px;height:9px;border-radius:50%;background:var(--red,#E5484D);border:1.5px solid var(--card);}

/* toast */
#toast-wrap{position:fixed;bottom:20px;left:20px;z-index:100;display:flex;flex-direction:column;gap:8px;}
.toast{background:var(--sidebar); color:#fff;padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:700;box-shadow:0 12px 28px -8px rgba(8,18,38,.5);
  animation:slideIn .2s ease-out; max-width:320px;}
.toast.ok{background:var(--teal-deep);}
.toast.err{background:var(--red);}
@keyframes slideIn{from{transform:translateY(10px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* gauge */
.gauge-wrap{display:flex;align-items:center;gap:18px;}
.gauge-num{font-size:26px;font-weight:800;color:var(--teal-dark);}
.gauge-label{font-size:12.5px;color:var(--muted);}

/* bar chart */
.bars{display:flex;align-items:flex-end;gap:14px;height:160px;padding-top:10px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;}
.bar{width:100%;max-width:38px;background:linear-gradient(180deg,var(--teal),var(--teal-deep));border-radius:6px 6px 2px 2px;min-height:3px;}
.bar-month{font-size:11px;color:var(--muted);font-weight:700;}
.bar-val{font-size:11px;color:var(--text);font-weight:700;}

.top-list{display:flex;flex-direction:column;gap:2px;}
.top-row{display:flex;align-items:center;justify-content:space-between;padding:11px 4px;border-bottom:1px solid var(--border);}
.top-row:last-child{border-bottom:none;}
.top-row .name{font-weight:700;font-size:13.5px;}
.top-row .meta{font-size:11.5px;color:var(--muted);}
.top-row .amt{font-weight:800;color:var(--red);font-size:14px;}

.radio-group{display:flex;gap:10px;}
.radio-opt{flex:1;border:1.5px solid var(--border);border-radius:10px;padding:10px;text-align:center;font-weight:700;font-size:13.5px;color:var(--muted);}
.radio-opt.sel{border-color:var(--teal);background:var(--teal-bg);color:var(--teal-dark);}
.radio-opt input{display:none;}

.pkg-card{border:1.5px solid var(--border);border-radius:12px;padding:16px;position:relative;}
.pkg-card .pkg-name{font-weight:800;font-size:15px;margin-bottom:4px;}
.pkg-card .pkg-speed{font-size:12.5px;color:var(--muted);margin-bottom:10px;}
.pkg-card .pkg-price{font-size:20px;font-weight:800;color:var(--teal-dark);}
.pkg-card .pkg-scope{position:absolute;top:14px;left:14px;}

.receipt{font-family:'Tajawal';padding:30px;max-width:400px;margin:0 auto;}
.receipt h2{text-align:center;margin-bottom:4px;}
.receipt .line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #ccc;font-size:14px;}
.receipt .total{font-size:18px;font-weight:800;margin-top:14px;text-align:center;}

/* هيكل تحميل (Skeleton) — بديل بصري لحظة انتظار أول استجابة من Firestore، بدل ما
   تظهر الصفحة "فاضية" أو "صفر" بشكل مضلّل للحظة قبل وصول البيانات الحقيقية. */
.skeleton{
  border-radius:var(--radius); margin-bottom:14px;
  background:linear-gradient(100deg, var(--border) 30%, var(--bg) 50%, var(--border) 70%);
  background-size:220% 100%; animation:skeletonShine 1.3s ease-in-out infinite;
}
@keyframes skeletonShine{ from{ background-position:120% 0; } to{ background-position:-20% 0; } }
.hint{font-size:12px;color:var(--muted);line-height:1.7;}
.link-btn{background:none;color:var(--teal-dark);font-weight:700;font-size:13px;text-decoration:underline;padding:0;}

/* ===== بطاقة تفاصيل المشترك (تصميم معاد) ===== */
.sub-detail-head{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 16px;margin-bottom:14px;}
.sub-detail-avatar{flex:none;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:#fff;background:linear-gradient(135deg,#2B3340,#181D24);}
.sub-detail-idbox{flex:1;min-width:0;}
/* اسم المشترك — أكبر عنصر بالبطاقة (طلب صريح: يبين "بشكل كبير") — بعد ما رفعنا
   الحجم لدرجة يصير فيها احتمال قص الأسماء الطويلة أعلى، شلنا white-space:nowrap
   وسمحنا بسطرين كحد أقصى (line-clamp) بدل قص السطر الواحد بـ"..." بمنتصف الاسم. */
.sub-detail-name{font-weight:800;font-size:22px;line-height:1.25;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sub-detail-username{font-size:13px;color:var(--muted);margin-top:4px;direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sub-detail-pills{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:none;}

.info-card{padding:6px 16px;}
.info-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.info-row:last-child{border-bottom:none;}
.info-label{color:var(--muted);font-weight:700;flex:none;}
.info-value{color:var(--text);font-weight:700;text-align:left;display:flex;align-items:center;gap:7px;justify-content:flex-end;}
/* بطاقة "معلومات النانو" — مصممة بنفس شكل تطبيق NMS المرجعي: حلقتين دائريتين
   (CPU/Memory) بالأعلى، وشبكة عمودين تحتها لكل القراءات الثانية. ألوان بنفس روح
   عالم الشبكات/الإنترنت (تدرّج أزرق-سماوي بالرأس، أيقونات ملوّنة بدل الرمادي). */
.nano-card{padding:0;overflow:hidden;border-radius:16px;}
.nano-card-head{display:flex;align-items:center;gap:12px;padding:16px;margin-bottom:0;background:linear-gradient(135deg,#1E6FBF,#22B8CF);color:#fff;}
.nano-card-icon{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex:none;color:#fff;}
.nano-card-title{font-weight:800;font-size:15px;}
.nano-card-sub{font-size:12px;opacity:.85;margin-top:2px;}
.nano-gauges{display:flex;justify-content:center;gap:28px;padding:18px 16px 4px;}
.nano-gauge{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;}
.nano-gauge-inner{width:66px;height:66px;border-radius:50%;background:var(--card-bg,#fff);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.nano-gauge-val{font-weight:800;font-size:15px;}
.nano-gauge-label{font-size:10.5px;color:var(--muted);margin-top:1px;}
.nano-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:14px 16px 16px;}
.nano-stat{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--border);}
.nano-stat-icon{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#DCEEFB,#CFF4F0);color:#177BB0;}
.nano-stat-text{min-width:0;}
.nano-stat-label{font-size:11px;color:var(--muted);}
.nano-stat-val{font-size:13.5px;font-weight:800;}
/* بطاقات "أجهزتي" — تصميم بألوان تخص عالم الشبكات/الإنترنت (تدرّجات أزرق-سماوي
   لأجهزة UBNT، بنفسجي-نيلي لأجهزة Mikrotik) بدل الألوان الرمادية العامة. */
.dev-card{border-radius:16px;overflow:hidden;background:var(--card-bg,#fff);box-shadow:0 1px 3px rgba(0,0,0,.06);}
.dev-card-head{padding:14px 16px;display:flex;align-items:center;gap:12px;color:#fff;}
.dev-card-head.ubnt{background:linear-gradient(135deg,#1E6FBF,#22B8CF);}
.dev-card-head.mikrotik{background:linear-gradient(135deg,#6D4FC4,#8A63D2);}
.dev-card-head.mimosa{background:linear-gradient(135deg,#E8590C,#F59E0B);}
.dev-card-icon-badge{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex:none;}
.dev-card-name{font-weight:800;font-size:14.5px;}
.dev-card-type{font-size:11px;opacity:.85;}
.dev-card-body{padding:14px 16px;}
.dev-ip-link{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:#1E6FBF;text-decoration:none;}
.dev-ip-link:hover{text-decoration:underline;}
.copy-ico{cursor:pointer;opacity:.55;font-size:12px;border:none;background:none;padding:0;line-height:1;}
.copy-ico:hover{opacity:1;}

.sub-action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px;}
.sub-action-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;border-radius:12px;font-weight:800;font-size:13px;color:#fff;text-align:center;text-decoration:none;border:none;cursor:pointer;}
.sub-action-btn span{font-size:16px;}
.sub-action-btn span svg{width:18px;height:18px;}
.ab-navy{background:linear-gradient(135deg,#1E293B,#0F172A);}
.ab-teal{background:var(--mint-gradient);}
.ab-amber{background:linear-gradient(135deg,#FBBF24,#B45309);}
.ab-green{background:linear-gradient(135deg,#34D399,#059669);}
.ab-gray{background:linear-gradient(135deg,#94A3B8,#475569);}
.ab-red{background:linear-gradient(135deg,#FB7185,#E11D48);}

/* =========================================================================
   MOBILE-FIRST OVERRIDES (360px–480px) — إعادة بناء حقيقية للموبايل، مو بس
   إخفاء عناصر. تطبّق فوق كل القواعد السابقة داخل هذا النطاق بس، فما تلمس
   عرض سطح المكتب إطلاقًا.
   ========================================================================= */
@media(max-width:600px){
  html{ -webkit-text-size-adjust:100%; }
  body{ font-size:16px; }

  /* 1) عمود واحد بس — أي شبكة أعمدة ترجع عمود واحد عمودي */
  .grid-4, .grid-2{ grid-template-columns:1fr !important; }
  /* عرض الجدول/البطاقات لقائمة المشتركين صار زر يدوي يتحكم فيه المستخدم مباشرة
     (toggleSubListView) — بدل الاعتماد على عرض الشاشة تلقائيًا، لأن بعض المتصفحات
     بالموبايل تبلّغ عرض شاشة "سطح مكتب" (وضع "Desktop site") فيفشل أي كشف تلقائي. */
  /* بطاقات الإحصائيات (لوحة التحكم) تصير عمودين جنب بعض بدل عمود واحد طويل — أكثر
     استغلالًا لعرض الشاشة، بدل ما تاخذ مساحة تمرير طويلة جدًا. خاص بهذا الصنف بس
     (.grid-auto)، ما يأثر على شبكات النماذج الثانية (.grid-2/.grid-4). */
  .grid-auto{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .grid{ gap:12px; }
  .form-row{ grid-template-columns:1fr !important; }

  /* 3) أزرار وعناصر لمس بحجم مريح للإصبع (44px تقريبًا) */
  .btn{ min-height:44px; padding:12px 16px; font-size:15px; }
  .btn-sm{ min-height:40px; padding:10px 14px; font-size:13.5px; }
  .field input, .field select, .field textarea{ min-height:44px; padding:12px 13px; font-size:16px; }
  input[type="checkbox"], input[type="radio"]{ width:20px; height:20px; }
  .nav-item{ min-height:46px; }

  /* 4) خط أساسي 16px+ وعناوين متناسبة مع شاشة صغيرة */
  h1{ font-size:20px; }
  h2{ font-size:18px; }
  h3{ font-size:16px; }
  .topbar h2{ font-size:16px; }
  table{ font-size:13.5px; }

  /* 5) تقليل الحشو والمسافات الكبيرة المصممة لسطح المكتب */
  .content{ padding:12px; }
  .card{ padding:13px; }
  .topbar{ height:56px; padding:0 14px; gap:8px; }
  .modal-head{ padding:13px 15px; }
  .modal-body{ padding:13px 15px; max-height:75vh; }
  .modal-foot{ padding:11px 15px; flex-wrap:wrap; }
  .stat-block{ padding:12px; }
  .stat-block > div:first-child{ padding-left:38px; }
  .stat-block .sb-ico{ top:12px; left:12px; width:28px; height:28px; }
  .stat-block .sb-ico svg{ width:16px; height:16px; }
  .stat-block .sb-title{ font-size:12px; }
  .stat-block .sb-sub{ font-size:10px; }
  .stat-block .sb-num{ font-size:22px; margin-top:6px; }
  .stat-hero{ padding:16px; }
  .section-title{ margin-bottom:10px; }

  /* 6) الجداول والصور ما تكسر عرض الصفحة — تسكرول أفقيًا جوا حاويتها بس */
  .table-wrap{ -webkit-overflow-scrolling:touch; }
  img{ max-width:100%; height:auto; }

  /* الشاشة الجانبية تاخذ العرض الكامل تقريبًا على موبايل ضيق */
  .sidebar{ width:82vw; max-width:300px; }

  /* النوافذ المنبثقة على الموبايل تتحول لـ"ورقة سفلية" (bottom sheet) بأسلوب
     تطبيقات الموبايل الأصلية — تنزلق من الأسفل وتلتصق بأسفل الشاشة، بدل نافذة
     مركزية عائمة بمظهر سطح مكتب. */
  .modal-overlay{ align-items:flex-end; justify-content:stretch; padding:0; }
  .modal{
    max-width:100vw; width:100%; height:auto; margin:0; border-radius:22px 22px 0 0;
    max-height:92vh; display:flex; flex-direction:column;
    animation:sheetUp .24s cubic-bezier(.22,.68,0,1.1);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -20px 50px -20px rgba(5,12,26,.35);
  }
  .modal::before{
    content:''; display:block; width:40px; height:4px; border-radius:99px;
    background:var(--border); margin:10px auto 0;
  }
  .modal-body{ max-height:none; flex:1; }
  @keyframes sheetUp{ from{ transform:translateY(60px); opacity:.5; } to{ transform:translateY(0); opacity:1; } }

  /* شاشة تسجيل الدخول */
  .auth-box{ padding:24px 18px; width:92vw; }

  /* لوحة التحكم: العنوان الكبير يتصاغر شوي على موبايل ضيق */
  .sidebar .brand{ padding:16px 14px; }

  /* رأس لوحة التحكم (الترحيب + المزامنة + الشعار) — عمود واحد متمركز بدل تخطيط سطح المكتب المتزاحم */
  .dash-header{ flex-direction:column !important; align-items:center !important; text-align:center; gap:14px !important; margin-bottom:16px !important; }
  .dash-header-info{ text-align:center !important; width:100%; display:flex; flex-direction:column; align-items:center; }
  .dash-header-info #lastSyncBadge{ text-align:center; }
  .dash-affiliate{ width:100%; max-width:280px; margin-inline:auto; }
  .dash-brand{ width:100%; }
  .dash-brand-logo{ justify-content:center; }
  .dash-brand-logo svg{ width:32px; height:32px; }
  .dash-brand-logo .dash-brand-name{ font-size:34px !important; }

  /* بطاقة تفاصيل المشترك على موبايل ضيق */
  .sub-detail-head{ padding:14px; gap:10px; }
  .sub-detail-avatar{ width:52px; height:52px; font-size:18px; }
  .sub-detail-name{ font-size:19px; }
  .info-row{ font-size:13px; }
  .sub-action-btn{ font-size:12px; padding:12px 8px; }

  /* عمود "الاسم" بجدول المشتركين يضل ثابت بمكانه وقت التمرير الأفقي (بدل ما يضيع
     السياق كل ما تسحب يمين شمال لتشوف باقي الأعمدة) — الجدول RTL فيبدأ من اليمين،
     فنثبّته على right:0 داخل حاوية التمرير (.table-wrap). خاص بجدول المشتركين بس
     (#subTableHead/#subTableBody) — باقي جداول التطبيق ما تتأثر إطلاقًا. */
  #subTableHead th:first-child, #subTableBody td:first-child{
    position:sticky; right:0; background:var(--card); z-index:1;
    box-shadow:-2px 0 4px rgba(0,0,0,.06);
  }
}

/* دعم "تقليل الحركة" (prefers-reduced-motion) — بعض المستخدمين يفعّلونه من إعدادات
   نظامهم (حساسية للحركة/دوار الحركة). التطبيق فيه عدة حركات زخرفية (نبض، انزلاق
   النوافذ، وميض هيكل التحميل...) — نوقفها هنا أو نبسّطها لأقل حركة ممكنة، بدون
   التأثير على أي وظيفة (كل الحركات هنا تجميلية بحتة، مو جزء من منطق التطبيق). */
@media (prefers-reduced-motion: reduce){
  .mascot{ animation:none; }
  .conn-dot::after{ animation:none; opacity:0; }
  .page.active{ animation:none; }
  .modal{ animation:none; }
  .confirm-box{ animation:none; }
  .toast{ animation:none; }
  .skeleton, [class*="skeleton"]{ animation:none; }
}