/* ═══════════════════════════════════════════════════════════════════════
   ربط — طبقة نظام التصميم. تُحمَّل بعد styles.css فتغلبه.

   مصدرها الوحيد: design/README.md (حزمة التسليم من التصميم). القيم هنا
   منقولة حرفياً من جدول الرموز هناك، ولا تُخترع قيمة جديدة في هذا الملف.

   طبقتان بقصد:
     ١. لوحة ربط ‎--r-*‎ — أسماء التصميم كما هي، مصدر الحقيقة.
     ٢. مطابقة على رموز styles.css الموروثة، فتنقلب الواجهة كلها دفعة
        واحدة بدل مطاردة كل مكوّن على حدة.

   قرار المالك (٢٠٢٦-٠٩-٠٥): الأساسي هو ‎#0E7A47‎ لا ‎#17A05F‎. الأبيض على
   الزاهي يعطي 3.37:1 وهو راسب بـWCAG AA، والأغمق يعطي 5.4:1. الزاهي يبقى
   موجوداً باسم ‎--r-primary-vivid‎ للتعبئات غير النصّية وحدها (المفاتيح،
   أشرطة التقدّم، النقاط) حيث لا نص أبيض فوقه.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── لوحة ربط: منقولة من جدول الرموز في التسليم ───────────────── */
  --r-primary:        #0E7A47;   /* الأساسي بعد قرار التباين */
  --r-primary-vivid:  #17A05F;   /* تعبئة غير نصّية فقط */
  --r-primary-deeper: #0B5F37;   /* الضغط، ونهاية التدرّج */
  --r-primary-wash:   #E1FBD6;
  --r-primary-wash-2: #F4FFF0;
  --r-lime:           #75B94E;   /* على الأسطح الغامقة وحدها */

  --r-ink:            #262626;
  --r-ink-2:          #3D403B;
  --r-ink-3:          #4E5A48;
  --r-muted:          #6B6E69;   /* أخفت رمادي مقروء — لا تنزل تحته لنص */
  --r-muted-2:        #A7ACA5;

  --r-line-faint:     #F7F8F6;
  --r-line:           #EFF0ED;
  --r-line-2:         #E7E4DE;
  --r-line-3:         #DFE1DD;

  --r-surface:        #FFFFFF;
  --r-surface-alt:    #FCFDFB;
  --r-bg:             #F6F5F2;
  --r-bg-2:           #F2F3F1;

  --r-danger:         #C2452F;
  --r-danger-wash:    #FDE8E4;
  --r-warn:           #B8862B;
  --r-warn-text:      #7A5E1E;
  --r-warn-wash:      #FFF9E8;
  --r-warn-line:      #EFDFC2;
  --r-chart-blue:     #3E63C8;

  /* ── الخطوط: العناوين Cairo، الأرقام IBM Plex Mono، الشعار Quicksand،
        والمتن خط النظام العربي. مستضافة محلياً في /fonts. ────────── */
  --font-display: "Cairo", "SF Arabic", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --font-brand:   "Quicksand", system-ui, sans-serif;

  /* ── المطابقة على رموز styles.css ─────────────────────────────── */
  --brand:        var(--r-primary);
  --brand-mid:    var(--r-primary-vivid);
  --brand-deep:   var(--r-primary);
  --brand-ink:    var(--r-primary);
  --brand-soft:   var(--r-primary-wash);
  --brand-tint:   var(--r-primary-wash-2);
  --badge-fill:   var(--r-primary);
  --brand-grad-end: var(--r-primary-deeper);
  --brand-glow:   14,122,71;

  --ok:           var(--r-primary-vivid);
  --ok-ink:       var(--r-primary);
  --danger:       var(--r-danger);
  --danger-ink:   var(--r-danger);
  --tick-read:    var(--r-chart-blue);

  --ink:          var(--r-ink);
  --grey:         var(--r-muted-2);
  --white:        #FFFFFF;

  --bg:           var(--r-bg);
  --surface:      var(--r-surface);
  --surface-2:    var(--r-bg-2);
  --border:       var(--r-line);
  --text:         var(--r-ink);
  --text-soft:    var(--r-muted);

  --radius:       18px;   /* بطاقة الويب في التسليم */
  --radius-sm:    12px;

  --viz-a:        var(--r-primary);
  --viz-b:        var(--r-chart-blue);
  --viz-grid:     var(--r-line);

  /* نظام العلامة يسمّي خط المتن صراحةً: IBM Plex Sans Arabic وزن 400
     وتباعد أسطر 1.9، وCairo للعناوين الكبيرة وحدها. مستضاف محلياً. */
  --font: "IBM Plex Sans Arabic", "SF Arabic", "Segoe UI", system-ui,
          -apple-system, Tahoma, sans-serif;
}

/* ── الوضع الليلي ────────────────────────────────────────────────
   ⚠ مشتقّ لا مُصمَّم: حزمة التسليم لوحتها فاتحة فقط ولا تذكر وضعاً ليلياً
   إطلاقاً، والتطبيق عنده مفتاح ليلي شغّال يتبع الجهاز. فاشتُقّت اللوحة
   هنا من ألوان التسليم نفسها لا من خارجها: السطح هو ‎--r-ink‎ الذي يستعمله
   التصميم للشريط الجانبي والبطاقات الغامقة، ولهجة النص الخضراء هي
   ‎--r-lime‎ الذي ينصّ التسليم أنه «للأسطح الغامقة وحدها».
   التعبئة تبقى ‎#0E7A47‎ بالوضعين: الأبيض فوقها 5.4:1، وهي على سطح
   ‎#262626‎ تعطي 3.2:1 لشكل الزر — كلاهما ناجح. ───────────────────── */
:root[data-theme="dark"], html.dark, body.dark {
  --r-surface:     #262626;
  --r-surface-alt: #2B2C2A;
  --r-bg:          #1B1D1A;
  --r-bg-2:        #32332F;
  --r-line:        #3D403B;
  --r-line-faint:  #32332F;

  --brand-ink:    var(--r-lime);
  --brand-soft:   #12301F;
  --brand-tint:   #0E241A;
  --brand-glow:   23,160,95;

  --ok-ink:       var(--r-lime);
  --danger:       #E5715C;
  --danger-ink:   #E5715C;

  /* الأسطح تُعاد هنا صراحةً: ‎--bg: var(--r-bg)‎ في ‎:root‎ لا يكفي، لأن
     ‎:root[data-theme="dark"]‎ في styles.css أقوى تخصيصاً فيغلبه — فكان
     الوضع الليلي يعرض أسطح تجوال الزرقاء الرمادية تحت علامة ربط. */
  --bg:           var(--r-bg);
  --surface:      var(--r-surface);
  --surface-2:    var(--r-bg-2);
  --border:       var(--r-line);

  --ink:          #F7F8F6;
  --text:         #F7F8F6;
  --text-soft:    var(--r-muted-2);
  --grey:         var(--r-muted);

  --viz-a:        #3FBF7F;
  --viz-b:        #6E90E0;
  --viz-grid:     #3D403B;

  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.35);
}

/* ── قواعد خاصة بالتطبيق ─────────────────────────────────────────── */
.badge.confirm, .badge.late { background: var(--brand-soft); }

/* الأرقام والأوقات والعملات والمعرّفات: مونو ولاتيني الاتجاه دائماً.
   التسليم يعدّها شرطاً لا تحسيناً — رقم عربي داخل نص RTL بلا هذا
   الغلاف ينعكس ترتيبه على الشاشة. */
.mono, .num, [data-mono] {
  font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

#screen-login .login-card .brand h1 {
  font-family: var(--font-display); letter-spacing: -.01em;
}

body.demo #screen-login .login-card::before {
  content: "نسخة تجريبية · بيانات وهمية";
  display: block; text-align: center; font-size: 12px; font-weight: 600;
  color: var(--r-primary); background: var(--r-primary-wash);
  border-radius: 999px; padding: 4px 12px; margin: 0 auto 14px; width: max-content;
}
.demo-creds {
  margin-top: 14px; font-size: 13px; color: var(--text-soft);
  background: var(--surface-2); border-radius: 12px; padding: 10px 12px; line-height: 1.8;
}
.demo-creds b { color: var(--text); font-family: var(--font-mono); direction: ltr;
  unicode-bidi: isolate; }

/* ── بداية الطريق لشركة جديدة ─────────────────────────── */
.hub-start {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
}
.hub-start-head { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; }
.hub-start-head small { color: var(--text-soft); font-size: 12px; }
.hub-start-step { display: flex; gap: 12px; align-items: center; padding: 9px 0;
  border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.hub-start-step:first-of-type { border-top: 0; }
.hub-start-step .n { flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--brand-soft); color: var(--brand-deep); }
.hub-start-step.done .n { background: var(--r-primary); color: #fff; }
.hub-start-step.done b { color: var(--text-soft); font-weight: 500; }
.hub-start-step .t { display: flex; flex-direction: column; }
.hub-start-step small { color: var(--text-soft); font-size: 12px; }

/* ── تحذير الاشتراك ─────────────────────────────────────── */
.plan-warn {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: var(--r-warn-wash); border: 1px solid var(--r-warn-line);
  color: var(--r-warn-text); border-radius: 14px; padding: 12px 16px;
  margin-bottom: 14px; font-size: 14px; font-weight: 500;
}
.plan-warn.hot { background: var(--r-danger-wash); border-color: #F3C4BA;
  color: var(--r-danger); }
.plan-warn .btn { padding: 7px 16px; font-size: 13px; }

/* ═══ شاشات الدخول — W11 · W11b من التسليم ═══════════════════════════
   تقسيمة: لوحة علامة غامقة 520px + منطقة نموذج عرضها 404px في الوسط.
   اللوحة ثابتة ونسخة واحدة تظهر مع أي شاشة .login، فلا تتكرّر أربع مرات.
   ولا تدرّج ولا صورة في أي مكان: التسليم ينصّ أن التصميم مبنيّ على
   الأسطح والخطّ وحدهما، والخلفية الخضراء المتدرّجة السابقة كانت من تجوال. */
.login { background: var(--r-bg); padding-block: 40px; }

.lg-brand { display: none; }
/* تظهر متى كانت أي شاشة دخول نشطة — بلا JS. وعلى الهاتف لا تظهر أصلاً:
   عمود ثابت بعرض 520px فوق شاشة 375px يغطّيها كاملة ويقصّ عنوانه. */
@media (min-width: 900px) {
  body:has(.screen.login.active) .lg-brand {
    display: flex; flex-direction: column; justify-content: space-between;
    position: fixed; inset-block: 0; inset-inline-start: 0;
    width: 520px; padding: 44px; background: var(--r-ink); z-index: 2;
  }
  body:has(.screen.login.active) .login { padding-inline-start: 520px; }
}

.lg-lock { display: flex; align-items: center; gap: 8.5px; }  /* ربع ضلع المربّع */
.lg-lock img { border-radius: 11px; }
.lg-word { font-family: var(--font-brand); font-weight: 700; font-size: 24px;
  direction: ltr; color: #fff; letter-spacing: -.3px; }

.lg-pitch h2 { font-family: var(--font-display); font-size: 38px; font-weight: 700;
  line-height: 1.3; letter-spacing: -1.2px; color: #fff; margin-bottom: 26px; }
.lg-pitch ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.lg-pitch li { display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.72); }
.lg-pitch li::before { content: "✓"; flex: none; color: var(--r-lime); font-weight: 700; }

.lg-avs { display: flex; margin-bottom: 9px; }
.lg-avs span { width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--r-lime); color: var(--r-ink); border: 2px solid var(--r-ink); }
.lg-avs span + span { margin-inline-start: -10px; }
.lg-social p { font-size: 12.5px; color: rgba(255,255,255,.5); }

/* منطقة النموذج: 404px بلا بطاقة عائمة على الشاشة العريضة — التسليم يعرّف
   البطاقة بحدّ 1px لا بظل. */
.login-card { max-width: 404px; }
@media (min-width: 900px) {
  .login-card { box-shadow: none; background: none; padding: 0; }
  .login .brand { text-align: start; margin-bottom: 22px; }
  .login .brand-logo { display: none; }   /* اللوحة تحمله */
  .login .brand h1 { font-family: var(--font-display); font-size: 23px;
    letter-spacing: -.7px; }
  .login .brand p { font-size: 13px; line-height: 1.9; }
}
@media (max-width: 899px) {
  .login-card { border: 1px solid var(--border); box-shadow: none; }
}

/* حقل نشط: حدّ بلون العلامة الزاهي واستدارة 14px — من التسليم حرفياً. */
.login .field input { border-radius: 14px; }
.login .field input:focus { border-color: var(--r-primary-vivid);
  border-width: 1.5px; outline: none; }

/* خانات الرمز: مربّعة تماماً، والفراغة تحمل نقطة رمادية لا فراغاً. */
.otp-boxes { gap: 9px; }
.otp-cell { height: auto; aspect-ratio: 1; font-family: var(--font-mono);
  font-size: 24px; font-weight: 600; border-radius: 14px; }
.otp-cell:not(.on)::before { content: "·"; color: var(--r-line-3); }
.otp-cell.cur { border-color: var(--r-primary-vivid); box-shadow: none; }

/* زر معطّل: لا شفافية — لون صريح يقول «مو جاهز» بدل زر باهت يبدو معطوباً. */
.login .btn-primary:disabled { background: var(--r-bg-2); color: var(--r-muted-2);
  opacity: 1; }

.lg-link { font: inherit; color: var(--r-primary); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline; }
.lg-note { margin-top: 12px; font-size: 12.5px; line-height: 1.8;
  color: var(--r-warn-text); background: var(--r-warn-wash);
  border: 1px solid var(--r-warn-line); border-radius: 14px; padding: 10px 13px; }
.lg-count { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate;
  color: var(--r-primary); font-weight: 600; }

/* الحقل الموروث تعبئته ‎--surface-2‎ وحدّه ‎--border‎ — بعد لوحة ربط صار
   الاثنان رماديين متقاربين (#F2F3F1 على #EFF0ED) فاختفى الحدّ وبدا الحقل
   لطخة بلا إطار. التسليم يعرّف الحقل بحدّ على أبيض. مقصور على الدخول:
   باقي الشاشات لم تُعَد بعد، وتغيير الحقل عالمياً يسبق تصميمها. */
.login .field input {
  background: var(--r-surface); border: 1px solid var(--r-line-3);
  padding: 14px 16px;
}
.login .field input::placeholder { color: var(--r-muted-2); }
/* الإيميل والرقم بيانات لاتينية: مونو واتجاه ثابت مهما كان النص حوله. */
#in-phone { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate;
  text-align: start; }
/* التسليم: «البطاقة بلا ظل — تُعرّف بحدّ 1px». والهالة كانت إرثاً من تجوال. */
.login .btn-primary { box-shadow: none; border-radius: 999px; padding: 15px; }

/* بالوضع الليلي تقترب اللوحة (#262626) من خلفية النموذج فيضيع الفاصل الذي
   تقوم عليه التقسيمة كلها. حدّ صريح بدل الاعتماد على فرق لونين غامقين.
   بالوضع الفاتح لا يلزم: غامق على فاتح يفصل نفسه. */
:root[data-theme="dark"] .lg-brand, html.dark .lg-brand, body.dark .lg-brand {
  border-inline-end: 1px solid var(--r-line);
}

/* ═══ الشريط الجانبي — مواصفات التسليم ══════════════════════════════
   232px على ‎#262626‎، والعناصر 11×14 باستدارة 12 وحجم 13.5. الخامل
   rgba(255,255,255,.62) والنشط تعبئة خضراء ونص أبيض بوزن 600.
   يُطبَّق على الشاشة العريضة وحدها: على الهاتف الشريط سفلي وأبيض كما هو. */
@media (min-width: 1024px) {
  .tabbar { width: 232px; background: var(--r-ink); border: 0; padding: 20px 0; }

  .rail-logo { display: flex; align-items: center; gap: 8.5px; padding: 0 20px 22px; }
  .rail-logo img { border-radius: 11px; }

  /* الفاصل هامش وحدّ، لا حشوة إضافية: كانت الحشوة تُكتب مرتين فيتضخّم كل
     عنوان قسم وتُدفع آخر الصفحات خلف بطاقة المستخدم الملتصقة. */
  .rail-sec { color: rgba(255,255,255,.38); font-size: 11px; font-weight: 700;
    padding: 6px 20px 5px; margin-top: 12px; }
  .rail-sec:not(:first-of-type) { border-top: 1px solid rgba(255,255,255,.1);
    margin-inline: 14px; padding-inline: 6px; padding-top: 11px; }

  .tabbar .tab { padding: 11px 14px; border-radius: 12px; font-size: 13.5px;
    color: rgba(255,255,255,.62); margin-inline: 14px; width: auto; }
  .tabbar .tab i { color: inherit; }
  .tabbar .tab:hover { background: rgba(255,255,255,.06); color: #fff; }
  .tabbar .tab.active { background: var(--r-primary-vivid); color: #fff; font-weight: 600; }
  /* شارة العدّ: حمراء لأنها تقول «متأخر» لا «جديد» — من التسليم. */
  .tabbar .tab .tab-badge { background: var(--r-danger); color: #fff;
    font-family: var(--font-mono); font-size: 11px; border-radius: 999px;
    padding: 1px 6px; min-width: 0; }

  /* حبّة الأيقونة الخضراء الفاتحة مصمّمة للشريط السفلي الأبيض؛ على صفّ
     أخضر غامق تصير لطخة حول الأيقونة. تُنزع هنا وحدها. */
  .tabbar .tab.active i { background: none; }

  /* ‎margin-top:auto‎ كما ينصّ التسليم، بلا التصاق. جُرّب الالتصاق أولاً
     فغطّى آخر صفحة في الشريط متى طال عن الشاشة — بند تنقّل مخفيّ تحت
     بطاقة ثابتة أسوأ من بند يُمرَّر إليه. الآن يثبت في القاع متى اتّسع
     الشريط، ويأتي بعد آخر بند متى لم يتّسع. */
  .rail-foot { border-top: 1px solid rgba(255,255,255,.1); margin-inline: 14px;
    padding-top: 12px; }
  .rail-me { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
  .rail-av { flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; background: var(--r-lime);
    color: var(--r-ink); font-weight: 700; font-size: 14px; }
  .rail-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .rail-who b { color: #fff; font-size: 13px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-who small { color: rgba(255,255,255,.5); font-size: 11px; }
  .rail-out { flex: none; background: none; border: 0; cursor: pointer;
    color: rgba(255,255,255,.5); padding: 6px; border-radius: 8px; display: grid;
    place-items: center; }
  .rail-out:hover { color: var(--r-danger); background: rgba(255,255,255,.06); }
}

/* ═══ الملاحظة الداخلية ══════════════════════════════════════════════
   لا فقاعة ولا اتجاه: الملاحظة ليست رسالة، فلا تأخذ شكل رسالة. اللون
   الدافئ من التسليم (ملاحظات داخلية · تنبيه تجربة)، والعنوان مكتوب لا
   مُلمَّح — «لا يراها العميل» يجب أن تُقرأ لا أن تُستنتج من لون. */
.chat-note {
  align-self: stretch; max-width: 100%;
  background: var(--r-warn-wash); border: 1px solid var(--r-warn-line);
  border-radius: 14px; padding: 10px 13px; margin: 2px 0;
  color: var(--r-warn-text);
}
.chat-note-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; margin-bottom: 5px; opacity: .85;
}
.chat-note .chat-txt { color: var(--text); font-size: 13.5px; line-height: 1.8; }
.chat-note .chat-meta { color: var(--r-warn-text); opacity: .8; }

/* المرسِل في وضع الملاحظة: الشريط كله يتلوّن، لا الزر وحده — الكاتب
   ينظر إلى ما يكتب لا إلى أيقونة في الطرف. */
.chat-composer.noting {
  background: var(--r-warn-wash);
  box-shadow: inset 0 0 0 1.5px var(--r-warn-line);
}
.chat-composer.noting #chat-note { color: var(--r-warn-text); }
.chat-composer.noting .chat-sendbtn { background: var(--r-warn); }

/* ═══ ملف العميل — W1، العمود الثالث ════════════════════════════════
   التسليم: 232 شريط + 340 طابور + مرن + 308 ملف. يظهر على العريض وحده. */
.chat-profile { display: none; }
@media (min-width: 1200px) {
  .page[data-page="chat"] .chat-pane {
    grid-template-columns: 340px minmax(0, 1fr) 308px;
  }
  .chat-profile:not([hidden]) {
    display: block; overflow-y: auto; padding: 18px;
    border-inline-start: 1px solid var(--border); background: var(--surface);
  }
}

.cp-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cp-av { width: 46px; height: 46px; border-radius: 50%; display: grid;
  place-items: center; background: var(--brand-soft); color: var(--brand-ink);
  font-weight: 700; font-size: 18px; }
.cp-head b { font-size: 15.5px; }
.cp-phone { font-size: 12.5px; color: var(--text-soft); }
.cp-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.cp-tag { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-soft); }
.cp-tag.on { background: var(--brand-soft); color: var(--brand-ink); }

/* الأرقام مونو لاتينية الاتجاه — شرط التسليم لكل رقم ووقت. */
.cp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 14px 0; border-bottom: 1px solid var(--border); }
.cp-stat { display: flex; flex-direction: column; gap: 2px; }
.cp-stat b { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate;
  font-size: 19px; font-weight: 600; }
.cp-stat b i { font-style: normal; font-size: 12px; color: var(--text-soft); }
.cp-stat small { font-size: 11px; color: var(--text-soft); }

.cp-sec { padding: 14px 0; border-bottom: 1px solid var(--border); }
.cp-sec:last-child { border-bottom: 0; }
.cp-sec h4 { font-size: 11.5px; font-weight: 700; color: var(--text-soft);
  margin-bottom: 8px; }
.cp-sec > p { font-size: 13px; }
.cp-note { background: var(--r-warn-wash); border: 1px solid var(--r-warn-line);
  border-radius: 12px; padding: 9px 11px; margin-bottom: 7px; }
.cp-note span { display: block; font-size: 13px; line-height: 1.75; color: var(--text); }
.cp-note small { display: block; margin-top: 4px; font-size: 11px;
  color: var(--r-warn-text); }
.cp-empty { font-size: 12.5px; color: var(--text-soft); line-height: 1.8; }

/* أقسام الإدارة صارت بنوداً في الشريط الجانبي، فشريط الشرائح فوق الصفحة
   تكرارٌ لها — يختفي على الشاشة العريضة ويبقى على الهاتف حيث لا شريط
   جانبي أصلاً. */
@media (min-width: 1024px) {
  #admin-segs { display: none; }
}

/* ═══ W2 — بطاقات الرواتب الأربع ═════════════════════════════════════
   التسليم يضع أربعة أرقام فوق الجدول: المستحق، والخصومات، والمكافآت،
   والسلف. كانت بطاقةً واحدة بأحد عشر سطراً — صحيحة لكنها تُقرأ لا
   تُمسح، والمدير يفتح الشهر ليعرف رقماً واحداً أولاً. */
.pay-stats { display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pay-stat { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 16px; display: flex;
  flex-direction: column; gap: 3px; }
.pay-stat small { font-size: 11.5px; font-weight: 600; color: var(--text-soft); }
.pay-stat b { font-size: 25px; font-weight: 600; letter-spacing: -.01em;
  direction: ltr; unicode-bidi: isolate; }
.pay-stat span { font-size: 11.5px; color: var(--text-soft); line-height: 1.7; }
.pay-stat.bad b  { color: var(--r-danger); }
.pay-stat.good b { color: var(--r-primary); }

/* التفصيل يبقى، مطويّاً: هو ما يشرح لماذا صار الرقم هذا الرقم. */
.money-fold { margin-bottom: 14px; }
.money-fold > summary { cursor: pointer; list-style: none; display: inline-flex;
  align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--text-soft); padding: 7px 13px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); }
.money-fold > summary::-webkit-details-marker { display: none; }
.money-fold > summary::after { content: "⌄"; font-size: 14px; line-height: 1; }
.money-fold[open] > summary { margin-bottom: 10px; }
.money-fold[open] > summary::after { content: "⌃"; }

/* ‎#pay-totals‎ كان شبكةً بعمودين ليقف صندوق المجاميع (المحدود بـ480px)
   جنب بقية الكشف بدل شريط فارغ. لكن المجاميع صارت أربع بطاقات بعرض
   الصفحة، فبقاء الشبكة يحشرها في 480 فتلتفّ 2×2 ويبقى نصف العرض فارغاً.
   يعود كتلةً، والحدّ ينتقل إلى البطاقة المفصّلة نفسها — وهي علّة الحدّ
   الأصلية: تسميةٌ تبعد عن رقمها بعرض الصفحة. */
@media (min-width: 1024px) {
  #pay-totals { display: block; }
  .money-fold .money-card { max-width: 480px; }
}

/* ═══ الردود التلقائية (W4) ═══════════════════════════════════════ */
.bot-card { max-width: 620px; display: flex; flex-direction: column; gap: 16px; }
.bot-toggle { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.bot-toggle input { width: auto; margin-top: 3px; flex: none; }
.bot-toggle b { display: block; font-size: 14.5px; }
.bot-toggle small { display: block; font-size: 12.5px; color: var(--text-soft);
  line-height: 1.8; margin-top: 2px; }
.bot-h { font-size: 12px; font-weight: 700; color: var(--text-soft); }
.bot-day { display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--border); }
.bot-day:first-child { border-top: 0; }
.bot-on { display: flex; align-items: center; gap: 9px; cursor: pointer;
  min-width: 120px; }
.bot-on input { width: auto; flex: none; }
.bot-on b { font-size: 13.5px; font-weight: 600; }
.bot-span { display: flex; align-items: center; gap: 8px; }
.bot-span input { width: auto; font-family: var(--font-mono); direction: ltr;
  padding: 8px 10px; font-size: 13.5px; }
.bot-span em { font-style: normal; color: var(--text-soft); }
.bot-day.off .bot-span { opacity: .45; }
.bot-closed { font-size: 11.5px; font-weight: 600; color: var(--r-warn-text);
  background: var(--r-warn-wash); border-radius: 999px; padding: 3px 10px; }
.bot-note { font-size: 12.5px; color: var(--text-soft); line-height: 1.9; }

/* ═══ التقارير والأداء (W5) ═══════════════════════════════════════ */
.srv-card { margin-top: 14px; }
.srv-ch { display: grid; grid-template-columns: 92px 1fr auto; align-items: center;
  gap: 12px; padding: 8px 0; }
.srv-ch-n { font-size: 13px; font-weight: 600; }
.srv-bar { height: 8px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; }
.srv-bar i { display: block; height: 100%; background: var(--r-primary);
  border-radius: 999px; }
.srv-ch-v { font-size: 12px; color: var(--text-soft); direction: ltr;
  unicode-bidi: isolate; }

.srv-table { display: flex; flex-direction: column; }
.srv-row { display: grid; grid-template-columns: minmax(120px, 1fr) 78px 78px 92px;
  gap: 10px; align-items: center; padding: 11px 0;
  border-top: 1px solid var(--border); font-size: 13.5px; }
.srv-row.head { border-top: 0; font-size: 11.5px; font-weight: 700;
  color: var(--text-soft); padding-bottom: 7px; }
.srv-row.me { font-weight: 600; }
.srv-row .mono { direction: ltr; unicode-bidi: isolate; }

/* ═══ تنبيهات الخزنة (W6) ═════════════════════════════════════════ */
.va-card { margin-bottom: 14px; }
.va-row { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0;
  border-top: 1px solid var(--border); }
.va-row:first-of-type { border-top: 0; }
.va-row > i { flex: none; display: grid; place-items: center; width: 28px;
  height: 28px; border-radius: 9px; background: var(--surface-2);
  color: var(--text-soft); }
.va-row.warn > i { background: var(--r-warn-wash); color: var(--r-warn-text); }
.va-t { display: block; font-size: 13.5px; line-height: 1.7; }
.va-row small { display: block; font-size: 12px; color: var(--text-soft);
  margin-top: 1px; }
.va-note { margin-top: 10px; font-size: 12px; color: var(--text-soft);
  line-height: 1.9; }