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

   مصدرها: DESIGN.md بجذر الريبو (نظام التصميم المعتمد مع المالك
   2026-10-01)، وأصله design/README.md (حزمة التسليم من التصميم). لا تُخترع
   هنا قيمة غير موجودة هناك.

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

   لوحة العلامة — «قاعدة الختم» (قرار المالك 2026-10-01، يعكس قراءة 09-11):
     ‎#0E7A47‎  أي تعبئة خضراء تحمل نصاً أو رمزاً يُقرأ (زر، صفّ نشط، شارة،
               فقاعة صادرة، صورة رمزية بحروف) — الأبيض عليه 5.39:1. وهو
               وحده الأخضر النصّي على الفاتح. التمرير والضغط ‎#0B5F37‎.
     ‎#17A05F‎  التعبئة الصامتة وحدها (نقطة، شريط تقدّم، رسم، مفتاح، مربّع
               الشعار) — الأبيض عليه 3.37:1، راسب بـAA، فلا نصّ فوقه أبداً.
     ‎#E1FBD6‎  خلفية الرقاقة والتحديد
     ‎#262626‎  النص والعناوين · ‎#F6F5F2‎ خلفية الصفحة
     ‎#6B6E69‎  النص الثانوي · ‎#EFF0ED‎ الحدود · ‎#C2452F‎ الخطر
   فالتعبئة الحاملة لنص تقرأ ‎--r-seal‎ (ثابتة بالوضعين: تعبئةٌ تحمل أبيض
   لا تنفتح ليلاً)، والصامتة ‎--r-primary‎، والنص ‎--r-primary-ink‎
   (‎--brand-ink‎). ولا تدرّج ولا ظلّ لما هو مستقرّ: الظلّ لما يطفو فقط.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── لوحة ربط: منقولة من جدول الرموز في التسليم ───────────────── */
  --r-primary:        #17A05F;   /* الفعل والحالة — للتعبئة وحدها */
  --r-primary-vivid:  #17A05F;   /* الاسم القديم للتعبئة نفسها */
  --r-primary-deeper: #0E7A47;   /* حالة الضغط */
  --r-primary-ink:    #0E7A47;   /* الأخضر النصّي على الفاتح — دائماً */
  /* الختم: تعبئةٌ تحمل نصاً أو رمزاً. لا تُعاد بالكتلة الليلية عمداً —
     الأبيض فوقها، فلو انفتحت ليلاً لسقط تباينه (كان الصفّ النشط بالشريط
     أبيضَ على ‎#3DD68C‎ = 1.88:1). */
  --r-seal:           #0E7A47;
  --r-seal-deep:      #0B5F37;   /* تمرير الختم وضغطه — الأبيض عليه 7.76:1 */
  --r-primary-wash:   #E1FBD6;
  --r-primary-wash-2: #F4FFF0;
  --r-lime:           #75B94E;   /* على الأسطح الغامقة وحدها */

  --r-ink:            #262626;
  --r-ink-2:          #3D403B;
  /* سطح الشريط الجانبي — **ثابت الدكانة في الوضعين**. كان يقرأ ‎--r-ink‎،
     وهي في الوضع الليلي لون النص الفاتح — فانقلب الشريط أبيضَ عليه نصٌّ
     أبيض. اللون هنا لا هناك، لأن الشريط سطحٌ لا حبر. */
  --r-rail:           #262626;
  --r-rail-line:      rgba(255,255,255,.1);
  /* الحبر حين يكون **سطحاً** لا نصاً: لوح العلامة في الدخول، وبطاقة
     التجربة، وخلفية الصور الرمزية الليمونية. يبقى داكناً في الوضعين
     لأن ما فوقه أبيض دائماً. */
  --r-ink-fixed:      #262626;
  --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;
  /* الأحمر تعبئةً تحمل أبيض (شارة، toast) — ثابت بالوضعين، 5.02:1.
     و‎--r-danger‎ نفسه ينفتح ليلاً لأنه هناك حبر لا تعبئة. */
  --r-danger-fill:    #C2452F;
  /* النص الأحمر الصغير: ‎#C2452F‎ على غسلته 4.26:1 (راسب)، وهذا 5.37:1 —
     من جدول التسليم («النص الصغير ‎#A93A26‎»). */
  --r-danger-ink:     #A93A26;
  --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-ink);
  --brand-soft:   var(--r-primary-wash);
  --brand-tint:   var(--r-primary-wash-2);
  --badge-fill:   var(--r-seal);        /* الشارة تحمل رقماً — ختم */
  --brand-grad-end: var(--r-primary);   /* لا تدرّج: نهايته بلون بدايته */
  --brand-glow:   23,160,95;

  --ok:           var(--r-primary-vivid);
  --ok-ink:       var(--r-primary-ink);
  --danger:       var(--r-danger);
  --danger-ink:   var(--r-danger-ink);
  /* كان يُقرأ بثلاثة أماكن (بانر القناة المتوقفة، الرسالة الفاشلة،
     ‎.tag-bad‎) ولا يُعرَّف بأيّ ملف — فكانت الغسلة شفّافة والحدّ الأحمر
     يحيط بلا شيء. ليلاً يتبع ‎--r-danger-wash‎ الغامق وحده. */
  --danger-wash:  var(--r-danger-wash);
  --tick-read:    var(--r-chart-blue);

  /* مسطّح عند السكون (قرار المالك 2026-10-01): البطاقة تُعرَّف بحدّ 1px،
     والظلّ للطبقة العائمة وحدها (لوح منبثق، toast، قائمة). المستعملون
     الوحيدون لهذه الرموز بطاقاتٌ مستقرّة (‎.card‎، بطاقات الرئيسية والتقارير)،
     أما العائم فيحمل ظلّه صريحاً — فتصفيرها هنا لا يمسّ طبقةً تطفو. */
  --shadow:       none;
  --sh-1:         none;
  --sh-2:         none;
  --sh-3:         none;

  --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;
}

/* ── الوضع الليلي (W29) ──────────────────────────────────────────
   لم يعد مشتقّاً: حزمة التسليم صارت تحمل شاشة W29 بتوكناتها الصريحة،
   وهذه القيم منقولة منها حرفاً بحرف — خلفية ‎#0C0E11‎، سطح ‎#1A1D23‎،
   حدّان ‎#2C313A‎ و‎#39404A‎، نص ‎#F2F3F5‎ وثانويّه ‎#A0A6B0‎، والأخضر
   يفتح إلى ‎#3DD68C‎ والأحمر إلى ‎#FF6B5E‎ ليبقى التباين مقبولاً على
   الأسطح الداكنة.

   «ثلاث درجات أسطح فقط» شرط في التسليم لا ذوق: خلفية، سطح، وحدود.
   فما نضيف درجة رابعة هنا مهما احتاجها مكوّن — يستعمل الحدّ الأفتح
   ‎--r-line-2‎ بدلها. ───────────────────────────────────────────── */
:root[data-theme="dark"], html.dark, body.dark {
  --r-bg:          #0C0E11;
  --r-bg-2:        #1A1D23;
  --r-surface:     #1A1D23;
  --r-surface-alt: #1A1D23;
  --r-line:        #2C313A;
  --r-line-2:      #39404A;
  --r-line-3:      #39404A;
  --r-line-faint:  #2C313A;

  --r-ink:         #F2F3F5;
  --r-ink-2:       #F2F3F5;
  --r-muted:       #A0A6B0;
  --r-muted-2:     #A0A6B0;

  /* الشريط في الليل يذوب في الخلفية بحدٍّ رفيع — ثلاث درجات أسطح فقط. */
  --r-rail:        #0C0E11;
  --r-rail-line:   #2C313A;

  --r-primary-vivid: #3DD68C;
  --r-primary-ink:   #3DD68C;   /* النص الأخضر على الغامق يفتح */
  --r-danger:      #FF6B5E;
  --r-danger-wash: #2A1714;

  --brand-ink:    #3DD68C;
  --brand-mid:    #3DD68C;
  --brand-soft:   #123322;
  --brand-tint:   #0F2A1C;
  --brand-glow:   61,214,140;

  --ok:           #3DD68C;
  --ok-ink:       #3DD68C;
  --danger:       #FF6B5E;
  --danger-ink:   #FF6B5E;

  /* الأسطح تُعاد هنا صراحةً: ‎--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:          #F2F3F5;
  --text:         #F2F3F5;
  --text-soft:    #A0A6B0;
  --grey:         #A0A6B0;

  --warn:         #E0B75A;
  --warn-text:    #E0B75A;
  --warn-wash:    #2A2416;
  --warn-line:    #4A3F22;
  /* عائلة ‎--r-warn-*‎ كانت بلا نسخة ليلية، فبقيت الملاحظة الداخلية وتنبيه
     الباقة رقعةً كريمية فاتحة على سطح غامق. ‎--r-warn‎ نفسه لا يُعاد: هو
     تعبئة زر الإرسال بوضع الملاحظة وفوقه أيقونة بيضاء — التعبئة لا تنفتح. */
  --r-warn-text:  #E0B75A;   /* 8.14:1 على غسلته */
  --r-warn-wash:  #2A2416;
  --r-warn-line:  #4A3F22;
  --r-danger-ink: #FF6B5E;   /* النص الأحمر ليلاً حبرٌ فاتح؛ التعبئة تبقى */

  --viz-a:        #3DD68C;
  --viz-b:        #6E90E0;
  --viz-grid:     #2C313A;

  /* مسطّح ليلاً أيضاً: الحدّ هو الذي يفصل الطبقات الثلاث. */
  --shadow: none;
}

/* ── الأزرار كما في دليل الواجهة («كل مكوّن بكل حالاته»): تعبئة واحدة
      بلا ظل ولا تدرّج وحوافّ كبسولة. التعبئة ختمٌ ‎#0E7A47‎ لأن عليها نصاً،
      والتمرير والضغط ‎#0B5F37‎، والمعطّل ‎#E7E8E5‎ بنص ‎#A7ACA5‎ — لا
      شفافية تبهت الزر كله. ────── */
:root { --r-disabled: #E7E8E5; }
:root[data-theme="dark"], html.dark, body.dark { --r-disabled: #2C313A; }
.btn-primary { background: var(--r-seal); box-shadow: none; border-radius: 999px; }
.btn-primary:hover:not(:disabled) { background: var(--r-seal-deep); filter: none; }
.btn-primary:active:not(:disabled) { background: var(--r-seal-deep); }
.btn-primary:disabled { background: var(--r-disabled); color: var(--r-muted-2); opacity: 1; }
/* الثانوي: حدّ 1px ‎#E3E4E0‎ بلا تعبئة، والتمرير حدّ ‎#C9CBC6‎ على خلفية الصفحة. */
:root { --r-ghost-line: #E3E4E0; --r-ghost-line-hover: #C9CBC6; }
:root[data-theme="dark"], html.dark, body.dark { --r-ghost-line: #39404A; --r-ghost-line-hover: #4A525E; }
.btn-ghost { background: transparent; border: 1px solid var(--r-ghost-line); border-radius: 999px; }
.btn-ghost:hover:not(:disabled) { background: var(--r-bg); border-color: var(--r-ghost-line-hover); }
/* «ممنوع: ظل على الأيقونة» — نصّ الدليل. */
.brand-logo { box-shadow: none; }
/* رصيد الإذن الزمني المستهلك: يبقى معروضاً (يتجدّد كل شهر، وغيابه يُقرأ
   «ما عندي هذا الحق»)، لكن بلون الانتهاء — رقمٌ صفر بالأخضر يُقرأ رصيداً. */
#leave-balance.spent .hl-bal-top b { color: var(--r-muted); }
#leave-balance.spent .foot { color: var(--r-warn-text); font-weight: 600; }

/* ── قواعد خاصة بالتطبيق ─────────────────────────────────────────── */
/* «بانتظار الموافقة» و«متأخر» حالتا انتباه لا نجاح — كانتا خضراوين مثل
   «مُعتمد»، لأن عنبر تجوال (لون الانتباه هناك) صار أخضر هنا. الصوت الدافئ
   الوحيد بالنظام عائلة التحذير. */
.badge.confirm, .badge.late { background: var(--r-warn-wash); color: var(--r-warn-text); }

/* الأرقام والأوقات والعملات والمعرّفات: مونو ولاتيني الاتجاه دائماً.
   التسليم يعدّها شرطاً لا تحسيناً — رقم عربي داخل نص 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: .75rem; font-weight: 600;
  color: var(--brand-ink); background: var(--r-primary-wash);
  border-radius: 999px; padding: 4px 12px; margin: 0 auto 14px; width: max-content;
}
:root[data-lang="en"] body.demo #screen-login .login-card::before { content: "Demo copy · sample data"; }

.demo-creds {
  margin-top: 14px; font-size: .8125rem; 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: .75rem; }
/* الخطوات نفسها انتقلت لصفحة «الإعداد الأول»؛ ما بقى هنا إلا رابطها
   وشريط تقدّمها. */
a.hub-start-head { color: inherit; text-decoration: none; }

/* ── تحذير الاشتراك ─────────────────────────────────────── */
.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: .875rem; font-weight: 500;
}
.plan-warn.hot { background: var(--r-danger-wash); border-color: #F3C4BA;
  color: var(--r-danger-ink); }
/* الحدّ الوردي مكتوبٌ صراحةً فبقي فاتحاً ليلاً حول رقعة غامقة. */
:root[data-theme="dark"] .plan-warn.hot { border-color: rgba(255,107,94,.35); }
.plan-warn .btn { padding: 7px 16px; font-size: .8125rem; }

/* ═══ شاشات الدخول — 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-fixed); 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; }
/* الشعار النصّي واحد: «rabet» لاتينياً بخط العلامة، بكل شاشة وبكل لغة.
   الاسم العربي «ربط» يبقى بالنصّ الجاري لا بالعلامة، حتى لا يظهر
   الاسم مرّتين بلغتين جنب بعض على نفس الشاشة. */
.wordmark { font-family: var(--font-brand); font-weight: 700;
  direction: ltr; unicode-bidi: isolate; text-transform: lowercase;
  letter-spacing: -.3px; }

.lg-word { font-size: 1.5rem; color: #fff; }

.lg-pitch h2 { font-family: var(--font-display); font-size: 2.375rem; 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: .875rem; 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: .8125rem; font-weight: 700;
  background: var(--r-lime); color: var(--r-ink-fixed);
  border: 2px solid var(--r-ink-fixed); }
.lg-avs span + span { margin-inline-start: -10px; }
.lg-social p { font-size: .78125rem; 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: 1.4375rem;
    letter-spacing: -.7px; }
  .login .brand p { font-size: .8125rem; 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: 1.5rem; 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(--brand-ink); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline; }
.lg-note { margin-top: 12px; font-size: .78125rem; 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(--brand-ink); 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-rail);
    border: 0; border-inline-end: 1px solid var(--r-rail-line);
    padding: 20px 0; }

  .rail-logo { display: flex; align-items: center; gap: 8.5px; padding: 0 20px 22px; }
  .rail-logo img { border-radius: 11px; }
  .rail-logo .wordmark { font-size: 1.5rem; color: #fff; }

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

  .tabbar .tab { padding: 11px 14px; border-radius: 12px; font-size: .84375rem;
    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; }
  /* الصفّ النشط ختمٌ لأن عليه نصاً. كان ‎--r-primary-vivid‎، وهو ليلاً
     ‎#3DD68C‎ — أبيض على أخضر فاتح = 1.88:1. */
  .tabbar .tab.active { background: var(--r-seal); color: #fff; font-weight: 600; }
  /* الوضع الليلي: `‎:root[data-theme="dark"] .tab.active‎` في styles.css
     يفرض `color: var(--brand-ink)‎` وتخصيصه أعلى، فصار نصّ الصفّ النشط
     بنفس أخضر خلفيته — صفٌّ أخضر فارغ بلا كلمة ولا أيقونة (رآه المالك
     على «البوابة»). نغلبه هنا صراحةً بتخصيص أعلى، والأيقونة ترث اللون. */
  :root[data-theme="dark"] .tabbar .tab.active { color: #fff; }
  /* شارة العدّ: حمراء لأنها تقول «متأخر» لا «جديد» — من التسليم. تعبئةٌ
     ثابتة: ‎--r-danger‎ ينفتح ليلاً إلى ‎#FF6B5E‎ فيسقط الأبيض فوقه. */
  .tabbar .tab .tab-badge { background: var(--r-danger-fill); color: #fff;
    font-family: var(--font-mono); font-size: .6875rem; 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-fixed); font-weight: 700; font-size: .875rem; }
  .rail-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .rail-who b { color: #fff; font-size: .8125rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-who small { color: rgba(255,255,255,.5); font-size: .6875rem; }
  .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: .71875rem; font-weight: 700; margin-bottom: 5px; opacity: .85;
}
.chat-note .chat-txt { color: var(--text); font-size: .84375rem; 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 ملف. يظهر على العريض وحده.

   «العريض» يُقاس بعرض لوحة المحادثة نفسها لا بعرض النافذة: الشرط كان
   `min-width: 1200px` على النافذة، والنافذة تشمل الشريط الجانبي (232)
   وهوامش الصفحة — فعلى نافذة 1250 كانت اللوحة 954px تقسّم على طابور 310
   وملف 306، وتبقى المحادثة نفسها 300px: اسم العميل ينقطع «يحيى حسين …»
   والرقم ينقص أوّله وحقل الكتابة ينضغط لمربع (شكوى المالك 24 أيلول).
   فالملف يظهر حين تتّسع اللوحة لثلاثتها مع محادثة لا تقلّ عن ~480px،
   وتحت ذلك بيانات العميل من زرّ (i) برأس المحادثة كما على الهاتف.
   واللوحة `flex` لا `grid` (قاعدة لاحقة في styles.css تغلب)، فالعرض
   يُعطى للملف بـ`flex-basis` لا بأعمدة الشبكة. */
.chat-profile { display: none; }
/* الحاوية على العريض وحده: `container-type` يحبس ما بداخله كما يحبس
   `contain: layout`، فيصير الإطار مرجعاً لكل `position: fixed` داخله —
   وعلى الهاتف المحادثة نفسها طبقةٌ ثابتة فوق الشاشة كلها. */
@media (min-width: 1024px) {
  .page[data-page="chat"] { container-type: inline-size; container-name: chatpage; }
}
@container chatpage (min-width: 1100px) {
  .chat-profile:not([hidden]) {
    display: block; flex: 0 0 308px; min-width: 0; align-self: stretch;
    overflow-y: auto; padding: 18px;
    border-inline-start: 1px solid var(--border); background: var(--surface);
  }
}

/* الشريط العلوي على العريض: قاعدة «تنقية الترويسة» في styles.css
   (`.topbar { padding-inline: var(--s4) }`) تأتي بعد قاعدة الإزاحة
   وتغلبها بكل العروض — فصار أول الشريط (اسم الموظف وعنوان الصفحة)
   تحت الشريط الجانبي الثابت: «المحادثات» يظهر منها حرف «ت». والإزاحة
   بعرض شريط ربط الحقيقي 232 لا 248 الموروث من تجوال. */
@media (min-width: 1024px) {
  body { --sidebar: 232px; }
  .topbar { padding-inline-start: calc(var(--sidebar) + 24px); }
}

.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: 1.125rem; }
.cp-head b { font-size: .96875rem; }
.cp-phone { font-size: .78125rem; color: var(--text-soft); }
.cp-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.cp-tag { font-size: .6875rem; 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: 1.1875rem; font-weight: 600; }
.cp-stat b i { font-style: normal; font-size: .75rem; color: var(--text-soft); }
.cp-stat small { font-size: .6875rem; 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: .71875rem; font-weight: 700; color: var(--text-soft);
  margin-bottom: 8px; }
.cp-sec > p { font-size: .8125rem; }
.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: .8125rem; line-height: 1.75; color: var(--text); }
.cp-note small { display: block; margin-top: 4px; font-size: .6875rem;
  color: var(--r-warn-text); }
.cp-empty { font-size: .78125rem; 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: .71875rem; font-weight: 600; color: var(--text-soft); }
.pay-stat b { font-size: 1.5625rem; font-weight: 600; letter-spacing: -.01em;
  direction: ltr; unicode-bidi: isolate; }
.pay-stat span { font-size: .71875rem; color: var(--text-soft); line-height: 1.7; }
.pay-stat.bad b  { color: var(--r-danger); }
.pay-stat.good b { color: var(--brand-ink); }

/* التفصيل يبقى، مطويّاً: هو ما يشرح لماذا صار الرقم هذا الرقم. */
.money-fold { margin-bottom: 14px; }
.money-fold > summary { cursor: pointer; list-style: none; display: inline-flex;
  align-items: center; gap: 6px; font-size: .78125rem; 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: .875rem; 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: .90625rem; }
.bot-toggle small { display: block; font-size: .78125rem; color: var(--text-soft);
  line-height: 1.8; margin-top: 2px; }
.bot-h { font-size: .75rem; 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: .84375rem; 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: .84375rem; }
.bot-span em { font-style: normal; color: var(--text-soft); }
.bot-day.off .bot-span { opacity: .45; }
.bot-closed { font-size: .71875rem; font-weight: 600; color: var(--r-warn-text);
  background: var(--r-warn-wash); border-radius: 999px; padding: 3px 10px; }
.bot-note { font-size: .78125rem; 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: .8125rem; 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: .75rem; 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: .84375rem; }
.srv-row.head { border-top: 0; font-size: .71875rem; 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: .84375rem; line-height: 1.7; }
.va-row small { display: block; font-size: .75rem; color: var(--text-soft);
  margin-top: 1px; }
.va-note { margin-top: 10px; font-size: .75rem; color: var(--text-soft);
  line-height: 1.9; }

/* ═══ مرجع الصلاحيات (W7) ═════════════════════════════════════════ */
.pm-card { margin-top: 14px; }
.pm-desc { font-size: .78125rem; color: var(--text-soft); margin-bottom: 10px; }
.pm-levels { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pm-level { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.pm-level b { font-size: .8125rem; font-weight: 600; }
.pm-level .mono { font-size: 1rem; font-weight: 600; direction: ltr;
  unicode-bidi: isolate; }
.pm-h { font-size: .71875rem; font-weight: 700; color: var(--text-soft);
  margin: 14px 0 6px; }
.pm-flags { display: flex; flex-direction: column; }
.pm-flag { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: .8125rem; }
.pm-flag:first-child { border-top: 0; }
.pm-flag .mono { color: var(--text-soft); direction: ltr; unicode-bidi: isolate; }
.pm-def { font-style: normal; font-size: .6875rem; color: var(--text-soft); }
.pm-note { margin-top: 14px; font-size: .78125rem; color: var(--text-soft);
  line-height: 1.9; }

/* ═══ العملاء والمكالمات (W8) ═════════════════════════════════════ */
/* أربع بطاقات لا ثلاث: «متوسط المدة» ينضاف يوم تصير مكالمة مردودة
   ويختفي بيوم بلا وحدة. `repeat(3,1fr)` العامّة كانت تكسر الرابعة
   لسطر لحالها بنص الشاشة. */
#calls-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* شريطا الشرائح فوق بعض: القناة والمقطع سؤالان مختلفان عن نفس الدليل،
   فيبقيان صفّين لا صفّاً واحداً مزدحماً يلتفّ بلا معنى. */
#cust-stages { margin-top: 8px; }

.ph-actions { display: flex; align-items: center; gap: 12px; }

/* ═══ الإعداد الأول (W9) ══════════════════════════════════════════ */
.su-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) {
  .su-wrap { grid-template-columns: 1fr 280px; align-items: start; }
}

.su-bar { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; }
.su-bar-t { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; }
.su-bar-t b { font-size: .9375rem; }
.su-bar-t span { font-family: var(--font-mono); font-size: .8125rem;
  color: var(--brand-ink); font-weight: 700; }
.su-track { height: 7px; border-radius: 99px; background: var(--r-line);
  overflow: hidden; }
.su-track i { display: block; height: 100%; border-radius: 99px;
  /* التعبئة لا نصّ، فتاخذ الأخضر الحيّ */
  background: var(--r-primary-vivid); transition: width .35s ease; }

.su-step { display: flex; align-items: flex-start; gap: 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 17px; margin-bottom: 9px; }
.su-step.done { background: var(--r-primary-wash);
  border-color: rgba(23,160,95,.22); }
.su-n { flex: none; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8125rem; font-weight: 700;
  background: var(--r-line); color: var(--muted); }
.su-step.done .su-n { background: var(--r-seal); color: #fff; }
.su-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.su-b b { font-size: .90625rem; }
.su-detail { color: var(--brand-ink); font-weight: 600; }
.su-hint { color: var(--muted); line-height: 1.65; }
.su-ok { flex: none; color: var(--brand-ink); font-weight: 700; font-size: .8125rem;
  font-style: normal; align-self: center; }
.su-step .btn { flex: none; align-self: center; }

.su-trial { background: var(--r-ink-fixed); color: #fff; border-radius: var(--radius);
  padding: 18px; margin-bottom: 12px; text-align: center; }
.su-trial small { color: rgba(255,255,255,.62); display: block; }
.su-trial b { display: block; font-size: 2.5rem; line-height: 1.15;
  font-family: var(--font-mono); color: var(--r-lime); }
.su-trial.hot b { color: #FFB4A2; }
.su-trial span { color: rgba(255,255,255,.72); font-size: .8125rem; }
.su-trial p { color: rgba(255,255,255,.62); font-size: .78125rem; line-height: 1.7;
  margin: 11px 0; }

.su-note { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; }
.su-note b { display: block; margin-bottom: 7px; }
.su-note p { color: var(--muted); font-size: .78125rem; line-height: 1.8;
  margin-bottom: 8px; }
.su-note p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════
   الربط والقنوات — W12 · W13 · W16 · W18 · W20…W23

   القيم منقولة من التسليم لا مقرَّبة: نصف القطر ٨ / ١٢ / ١٦ / ٢٠ / ٩٩٩،
   والمسافات مضاعفات ٤، وخلفية مربّع القناة لون المنصّة بشفافية ١٢–١٣٪.
   ═══════════════════════════════════════════════════════════════════ */

/* قنوات التسليم التي لم تكن في اللوحة القديمة. الشفافية هي نفسها
   (١٢–١٣٪) لأن التسليم ينصّ عليها رقماً. */
:root {
  --ch-whatsapp_qr: var(--ch-whatsapp); --ch-whatsapp_qr-bg: var(--ch-whatsapp-bg);
  --ch-fb_comments: var(--ch-facebook); --ch-fb_comments-bg: var(--ch-facebook-bg);
  --ch-webchat:     var(--r-primary);   --ch-webchat-bg:     var(--r-primary-wash);
  --ch-calls:       var(--r-primary);   --ch-calls-bg:       var(--r-primary-wash);
  --ch-wa_calls:    var(--ch-whatsapp); --ch-wa_calls-bg:    var(--ch-whatsapp-bg);
  --ch-ig_comments: var(--ch-instagram); --ch-ig_comments-bg: var(--ch-instagram-bg);
}
.prov-logo[data-ch="whatsapp_qr"] { background: var(--ch-whatsapp_qr-bg); color: var(--ch-whatsapp_qr); }
.prov-logo[data-ch="fb_comments"] { background: var(--ch-fb_comments-bg); color: var(--ch-fb_comments); }
.prov-logo[data-ch="webchat"]     { background: var(--ch-webchat-bg);     color: var(--ch-webchat); }
.prov-logo[data-ch="calls"]       { background: var(--ch-calls-bg);       color: var(--ch-calls); }
.prov-logo[data-ch="wa_calls"]    { background: var(--ch-wa_calls-bg);    color: var(--ch-wa_calls); }
.prov-logo[data-ch="ig_comments"] { background: var(--ch-ig_comments-bg); color: var(--ch-ig_comments); }
.prov-logo.sm { width: 30px; height: 30px; border-radius: 9px; }

.prov-pill.prov-off,
.prov-pill.prov-idle { color: var(--text-soft); background: var(--surface-2); }
.prov-off .chan-dot  { background: var(--r-muted-2); }
.prov-idle .chan-dot { background: var(--r-line-3); }

/* ── القشرة ────────────────────────────────────────────────────── */
.chan-wrap { display: flex; flex-direction: column; gap: 16px; }
.chan-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.chan-head-t { flex: 1 1 260px; min-width: 0; }
.chan-head-t h4 {
  font-family: var(--font-display); font-size: 1.4375rem; font-weight: 700;
  letter-spacing: -.7px; margin: 0 0 2px;
}
.chan-head-a { display: flex; gap: 8px; flex: 0 0 auto; }

/* التبويبات الأربعة — خط سفلي أخضر للمفتوح، لا كبسولة ممتلئة: الكبسولة
   الممتلئة محجوزة للأزرار، وتبويبٌ يشبه زراً يُضغط بالغلط. */
.chan-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.chan-tabs::-webkit-scrollbar { display: none; }
.chan-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 10px 14px; font: inherit; font-size: .84375rem; font-weight: 600;
  color: var(--text-soft); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.chan-tab:hover { color: var(--text); }
.chan-tab.on { color: var(--brand-ink); border-bottom-color: var(--r-primary); }
/* حلقة التركيز تلتصق بالتبويب بدل كبسولةٍ طافية فوق خطّه — الحلقة العامة
   (زاوية مدوّرة وإزاحة ٢ بكسل) صمّمت للأزرار لا لتبويب بخطٍ سفلي. */
.chan-tab:focus-visible { outline-offset: -3px; border-radius: 10px 10px 0 0; }

.chan-cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .chan-cols { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}
.chan-main, .chan-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.chan-side .card { padding: 14px 16px; }
.chan-side h5, .chan-main h5 {
  font-size: .9375rem; font-weight: 700; margin: 0 0 8px;
  display: flex; align-items: baseline; gap: 8px;
}
.chan-side h5 .set-note, .chan-main h5 .set-note { font-weight: 400; }

/* ── بطاقات الإحصاء الأربع ─────────────────────────────────────── */
.chan-tally {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.tally {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.tally-w {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78125rem; font-weight: 600; color: var(--text-soft);
}
.tally b { font-size: 1.625rem; font-weight: 600; line-height: 1; }
.tally-ok    .chan-dot { background: var(--ok); }
.tally-warn  .chan-dot { background: var(--warn); }
.tally-ready .chan-dot { background: var(--r-line-3); }
.tally-off   .chan-dot { background: var(--danger); }
.tally-off   b { color: var(--danger-ink); }

/* ── البانر: سبب ← خطوة ← زر واحد ─────────────────────────────── */
.chan-banner {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 16px;
  background: var(--danger-wash); border: 1px solid var(--danger);
}
.chan-bang {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .8125rem;
  background: var(--r-danger-fill); color: #fff;
}
.chan-banner-t { flex: 1 1 240px; min-width: 0; }
.chan-banner-t b { display: block; font-size: .875rem; font-weight: 700; }
/* سطر الخطوة التالية بالحبر الثانوي لا الرمادي: ‎#6B6E69‎ على الغسلة
   الحمراء 4.39:1 (راسب)، و‎--r-ink-2‎ = 8.94:1 ويفتح ليلاً وحده. */
.chan-banner-t small {
  display: block; margin-top: 3px; font-size: .78125rem; line-height: 1.7;
  color: var(--r-ink-2);
}
.chan-banner-a { display: flex; gap: 8px; flex: 0 0 auto; }

/* ── جدول القنوات ─────────────────────────────────────────────── */
.chan-table-card { padding: 0; overflow: hidden; }
.chan-table-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.chan-table-head h5 { margin: 0; }
.chan-table-head .toolbar { margin-inline-start: auto; }
.chan-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
.chan-table { display: flex; flex-direction: column; }
.chan-tr {
  display: grid; align-items: center; gap: 12px; padding: 13px 18px;
  grid-template-columns: minmax(0, 2.4fr) 1.1fr .8fr 1fr auto;
  border-bottom: 1px solid var(--r-line-faint);
}
.chan-tr:last-child { border-bottom: 0; }
.chan-th {
  background: var(--r-surface-alt); font-size: .71875rem; font-weight: 600;
  color: var(--text-soft);
}
.chan-td-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chan-td-name b { display: block; font-size: .84375rem; font-weight: 600; }
.chan-td-name small {
  display: block; font-size: .71875rem; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chan-td-act { text-align: end; }
.chan-tr .prov-pill { margin-inline-start: 0; }
.key-tr { grid-template-columns: minmax(0, 2fr) 1.2fr 1fr auto; }
/* السجل: النوع أولاً بعرض ثابت فتصطفّ الكبسولات عموداً واحداً، ثم الحدث،
   ثم الوقت. كان النوع آخر الصف والوقت في المنتصف، وبينهما فراغ نصف الشاشة. */
.log-tr { grid-template-columns: 112px minmax(0, 1fr) 128px; }
.log-tr small { display: block; font-size: .71875rem; color: var(--text-soft); }
.log-what b { font-size: .84375rem; font-weight: 600; }
.log-when { color: var(--text-soft); font-size: .78125rem; text-align: end; }
.log-card .chan-table-head { justify-content: space-between; }
.log-card .log-filters { margin-inline-start: 0; }
.chan-foot { padding: 12px 18px 14px; margin: 0; }
/* أرقام الأوقات مصطفّة **بخط النص نفسه**. `.mono` يقلب الخط والاتجاه
   معاً، فـ«قبل 12 دقيقة» بخطٍ أحادي لاتيني تتقطّع حروفها العربية. */
.tnum { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .chan-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .chan-th, .chan-td-last { display: none; }
}

/* ── اللوح الجانبي ────────────────────────────────────────────── */
.how-row { display: flex; gap: 10px; padding: 8px 0; }
.how-row + .how-row { border-top: 1px solid var(--r-line-faint); }
.how-n {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 8px;
  display: grid; place-items: center; font-size: .6875rem; font-weight: 600;
  background: var(--brand-soft); color: var(--brand-ink);
}
.how-row b { display: block; font-size: .8125rem; font-weight: 600; }
.how-row small { display: block; font-size: .71875rem; color: var(--text-soft); line-height: 1.7; }

.ready-row, .recv-row, .num-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
}
.ready-row + .ready-row, .recv-row + .recv-row, .num-row + .num-row {
  border-top: 1px solid var(--r-line-faint);
}
.ready-row > div, .num-row > div { flex: 1 1 auto; min-width: 0; }
.ready-row b, .num-row b { display: block; font-size: .8125rem; font-weight: 600; }
.ready-row small, .num-row small {
  display: block; font-size: .71875rem; color: var(--text-soft);
}
.recv-row .rail-av { width: 26px; height: 26px; font-size: .6875rem; }

.chan-url {
  display: block; padding: 9px 12px; border-radius: 12px; font-size: .75rem;
  background: var(--surface-2); border: 1px solid var(--border);
  overflow-x: auto; white-space: nowrap;
}
.chan-url.wide { margin-bottom: 10px; }

.recent-row { display: flex; gap: 8px; padding: 8px 0; }
.recent-row + .recent-row { border-top: 1px solid var(--r-line-faint); }
.recent-row b { display: block; font-size: .78125rem; font-weight: 600; }
.recent-row small { font-size: .6875rem; color: var(--text-soft); }
.recent-error .chan-dot { background: var(--danger); }
.recent-link  .chan-dot { background: var(--ok); }
.recent-keys  .chan-dot { background: var(--warn); }
.recent-unlink .chan-dot { background: var(--r-muted-2); }

.chan-warn { border-color: var(--warn-line); background: var(--warn-wash); }
.chan-warn h5 { color: var(--warn-text); }

.linkish {
  appearance: none; background: none; border: 0; cursor: pointer; padding: 0;
  font: inherit; font-size: .75rem; font-weight: 600; color: var(--brand-ink);
  margin-inline-start: auto;
}
.btn.danger, .btn-ghost.danger { color: var(--danger-ink); }
.btn.wide + .btn.wide { margin-top: 8px; }

/* ── حساب Meta ────────────────────────────────────────────────── */
.meta-id { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; }
.meta-av {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; font-family: var(--font-mono);
  font-size: .8125rem; font-weight: 600;
  background: var(--ch-facebook-bg); color: var(--ch-facebook);
}
.meta-id > div { flex: 1 1 auto; min-width: 0; }
.meta-id b { display: block; font-size: .9375rem; font-weight: 700; }
.meta-id small { display: block; font-size: .71875rem; color: var(--text-soft); }

/* ── إدارة قناة ───────────────────────────────────────────────── */
.chan-back { align-self: flex-start; margin-bottom: 2px; }
.chan-stats {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.chan-stats > div {
  padding: 12px 14px; border-radius: 14px; background: var(--surface-2);
}
.chan-stats small { display: block; font-size: .71875rem; color: var(--text-soft); }
.chan-stats b { font-size: 1.125rem; font-weight: 700; }

/* ── الكتالوج (W16): قائمة طولية واحدة مجمّعة، لا شبكة بطاقات ──── */
.cat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; }
.cat-q {
  flex: 1 1 180px; min-width: 0; padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--r-line-2); background: var(--surface);
  color: var(--text); font: inherit; font-size: .8125rem;
}
.cat-q:focus { outline: 0; border-color: var(--r-primary-vivid); }
.cat-body { display: flex; flex-direction: column; gap: 18px; }
.cat-sec > h5 {
  display: flex; align-items: baseline; gap: 8px; font-size: .8125rem;
  font-weight: 700; color: var(--text-soft); margin: 0 0 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.cat-card {
  display: grid; align-items: center; gap: 12px; padding: 14px 0;
  grid-template-columns: auto minmax(0, 1fr) 150px auto;
}
.cat-card + .cat-card { border-top: 1px solid var(--r-line-faint); }
.cat-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cat-name b { font-size: .875rem; font-weight: 700; }
.cat-name small { font-size: .71875rem; color: var(--text-soft); }
.cat-about {
  margin: 4px 0 0; font-size: .78125rem; line-height: 1.75; color: var(--text-soft);
}
.cat-t .ci-caps { margin-top: 8px; }
.cat-need small { display: block; font-size: .65625rem; color: var(--text-soft); }
.cat-need b { font-size: .75rem; font-weight: 600; }
.prov-badge.on { background: var(--surface-2); color: var(--text-soft); }
@media (max-width: 760px) {
  .cat-card { grid-template-columns: auto minmax(0, 1fr); }
  .cat-need { grid-column: 2; }
  .cat-cta  { grid-column: 2; }
}

/* ── لوح الربط (W13) ──────────────────────────────────────────── */
.wiz-steps {
  display: flex; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0;
  flex-wrap: wrap;
}
.wiz-steps li {
  display: inline-flex; align-items: center; gap: 6px; font-size: .75rem;
  font-weight: 600; color: var(--text-soft);
}
.wiz-steps li span {
  width: 20px; height: 20px; border-radius: 999px; display: grid;
  place-items: center; font-size: .6875rem; background: var(--surface-2);
}
.wiz-steps li.on { color: var(--text); }
.wiz-steps li.on span { background: var(--r-seal); color: #fff; }

#wiz-ways { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.wiz-way {
  appearance: none; cursor: pointer; text-align: start; font: inherit;
  display: flex; flex-direction: column; gap: 5px; padding: 14px 16px;
  border-radius: 16px; border: 1px solid var(--r-line-2);
  background: var(--surface); color: var(--text);
}
.wiz-way.on { border-color: var(--r-primary-vivid); background: var(--brand-tint); }
.wiz-way-h { display: flex; align-items: center; gap: 7px; }
.wiz-way-h b { font-size: .875rem; font-weight: 700; }
.wiz-way small { font-size: .78125rem; line-height: 1.75; color: var(--text-soft); }
.wiz-need { font-size: .71875rem; font-weight: 600; color: var(--brand-ink); }
.wiz-before { padding: 14px 16px; }
.wiz-req {
  display: flex; align-items: flex-start; gap: 8px; padding: 6px 0;
  font-size: .78125rem; line-height: 1.7; color: var(--text-soft);
}
.wiz-tick, .wiz-dot {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: .625rem; margin-top: 2px;
}
.wiz-tick { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.wiz-dot  { background: var(--r-line-3); }
.wiz-foot { justify-content: flex-end; margin-top: 14px; }

/* ── QR (W18) ─────────────────────────────────────────────────── */
.qr-cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .qr-cols { grid-template-columns: 232px minmax(0, 1fr); } }
.qr-box {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px; border-radius: 20px; background: var(--surface);
  border: 1px solid var(--border);
}
.qr-art {
  width: 200px; height: 200px; display: grid; place-items: center;
  color: var(--r-ink-fixed); background: #fff; border-radius: 12px; padding: 6px;
}
.qr-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.qr-list { margin: 12px 0 0; padding-inline-start: 18px; }
.qr-list li { padding: 5px 0; font-size: .8125rem; }
.qr-list small { display: block; font-size: .71875rem; color: var(--text-soft); line-height: 1.7; }

/* ── حالة فارغة داخل بطاقة ────────────────────────────────────── */
.es-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 22px 20px;
}
.es-card b { font-size: .9375rem; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   التعليقات — W19 · S25

   ثلاثة أعمدة: المنشورات · التعليقات · لوح الرد. وعلى الهاتف عمودٌ
   واحد يتدرّج (S25): شريط منشور واحد فوق، والتعليقات تحته.
   ═══════════════════════════════════════════════════════════════════ */
.cmt-cols { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px)  { .cmt-cols { grid-template-columns: 260px minmax(0, 1fr); } }
@media (min-width: 1280px) { .cmt-cols { grid-template-columns: 260px minmax(0, 1fr) 300px; } }

.cmt-posts, .cmt-main, .cmt-reply {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
@media (max-width: 1279px) { .cmt-reply { grid-column: 1 / -1; } }

.cmt-search input {
  width: 100%; padding: 10px 14px; border-radius: 14px; font: inherit;
  font-size: .8125rem; border: 1px solid var(--r-line-2);
  background: var(--surface); color: var(--text);
}
.cmt-search input:focus { outline: 0; border-color: var(--r-primary-vivid); }
.cmt-filters { margin-inline-start: 0; }

.cmt-post-list {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
}
.cmt-post {
  appearance: none; border: 0; cursor: pointer; font: inherit; text-align: start;
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--surface); color: var(--text);
  border-bottom: 1px solid var(--r-line-faint);
}
.cmt-post:last-child { border-bottom: 0; }
.cmt-post.on { background: var(--brand-tint); }
.cmt-post-t { flex: 1 1 auto; min-width: 0; }
.cmt-post-t b {
  display: block; font-size: .78125rem; font-weight: 600; line-height: 1.5;
}
.cmt-post-t small {
  display: block; margin-top: 3px; font-size: .6875rem; color: var(--text-soft);
}
.cmt-thumb, .cmt-prev {
  flex: 0 0 auto; display: grid; place-items: center; position: relative;
  background: var(--surface-2); color: var(--text-soft); overflow: hidden;
}
.cmt-thumb { width: 36px; height: 36px; border-radius: 10px; }
.cmt-prev  { width: 62px; height: 62px; border-radius: 16px; }
.cmt-thumb img, .cmt-prev img { width: 100%; height: 100%; object-fit: cover; }
.cmt-prev-ch {
  position: absolute; inset-inline-end: -1px; inset-block-end: -1px;
  width: 20px; height: 20px; border-radius: 50%; display: grid;
  place-items: center; background: var(--surface); color: var(--text-soft);
  border: 1px solid var(--border);
}
.cmt-badge {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; display: grid; place-items: center;
  font-size: .6875rem; font-weight: 600; background: var(--danger); color: #fff;
}
.cmt-kind {
  font-size: .65625rem; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-soft);
}

/* ترويسة المنشور المحدد */
.cmt-head-card { padding: 14px 16px; }
.cmt-head-row { display: flex; align-items: flex-start; gap: 12px; }
.cmt-head-t { flex: 1 1 auto; min-width: 0; }
.cmt-head-t b { display: block; font-size: .875rem; font-weight: 700; line-height: 1.6; }
.cmt-head-t small { display: block; margin-top: 3px; font-size: .71875rem; color: var(--text-soft); }
.cmt-head-m { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: .71875rem; color: var(--text-soft); }
.cmt-un { color: var(--danger-ink); font-weight: 600; }
.cmt-metrics {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--r-line-faint); font-size: .71875rem; color: var(--text-soft);
}
.cmt-metrics b { font-size: .8125rem; color: var(--text); }

/* التعليق نفسه */
.cmt-list { display: flex; flex-direction: column; gap: 10px; }
.cmt {
  display: flex; gap: 10px; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px;
}
.cmt-new { border-inline-start: 3px solid var(--r-primary); }
.cmt-av {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8125rem; font-weight: 700;
  background: var(--brand-soft); color: var(--brand-ink);
}
.cmt-body { flex: 1 1 auto; min-width: 0; }
.cmt-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cmt-meta b { font-size: .8125rem; font-weight: 600; }
.cmt-when, .cmt-src { font-size: .6875rem; color: var(--text-soft); }
.cmt-tag {
  font-size: .65625rem; font-weight: 600; padding: 1px 8px; border-radius: 999px;
}
.tag-price { background: var(--brand-soft); color: var(--brand-ink); }
.tag-bad   { background: var(--danger-wash); color: var(--danger-ink); }
.tag-cust  { background: var(--warn-wash); color: var(--warn-text); }
.cmt-text { margin: 6px 0 0; font-size: .8125rem; line-height: 1.75; }
.cmt-answer {
  margin-top: 8px; padding: 9px 12px; border-radius: 14px;
  background: var(--brand-tint); border: 1px solid var(--brand-soft);
}
.cmt-answer b { display: block; font-size: .6875rem; font-weight: 600; color: var(--brand-ink); }
.cmt-answer span { display: block; margin-top: 3px; font-size: .78125rem; line-height: 1.7; }
.cmt-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; align-items: center; }
.cmt-acts .linkish { margin-inline-start: 0; }

/* لوح الرد */
.cmt-reply-card textarea {
  width: 100%; margin: 10px 0; padding: 12px 14px; border-radius: 16px;
  font: inherit; font-size: .8125rem; line-height: 1.8; resize: vertical;
  border: 1px solid var(--r-line-2); background: var(--surface); color: var(--text);
}
.cmt-reply-card textarea:focus { outline: 0; border-color: var(--r-primary-vivid); }
.cmt-reply-card textarea:disabled { background: var(--surface-2); color: var(--text-soft); }
.cmt-mode {
  display: flex; gap: 3px; padding: 3px; border-radius: 999px;
  background: var(--surface-2);
}
.cmt-mode-b {
  appearance: none; border: 0; cursor: pointer; font: inherit; flex: 1 1 0;
  padding: 7px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600;
  background: transparent; color: var(--text-soft);
}
/* المقطع المختار سطحٌ أبيض بحلقة 1px كبقية المقاطع (DESIGN.md) — الختم الممتلئ
   لزرّ «إرسال الرد» وحده في هذا اللوح. */
.cmt-mode-b.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--r-line-3); }
.cmt-tpl { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cmt-rule { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--r-line-faint); }

/* أربع باقات في شبكة الاشتراك، ومعها سعرها — القائمة نفسها في كل شاشة. */
.plan-pick { flex-wrap: wrap; }
.plan-pick .theme-opt { flex: 1 1 130px; flex-direction: column; gap: 2px; }
.plan-pick .theme-opt small { font-size: .71875rem; color: var(--text-soft); }

/* ═══════════════════════════════════════════════════════════════════
   مبدّل مساحة العمل — W15 · S24
   ═══════════════════════════════════════════════════════════════════ */
.ws-pill {
  appearance: none; cursor: pointer; font: inherit; text-align: start;
  display: flex; align-items: center; gap: 9px; width: calc(100% - 20px);
  margin: 0 10px 10px; padding: 7px 8px 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
}
.ws-pill:hover { background: rgba(255, 255, 255, .12); }
.ws-av {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; font-size: .8125rem; font-weight: 700;
  background: var(--r-seal); color: #fff;
}
.ws-t { flex: 1 1 auto; min-width: 0; }
.ws-t b {
  display: block; font-size: .8125rem; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.ws-t small { display: block; font-size: .65625rem; opacity: .62; }
.ws-swap {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border-radius: 999px; font-size: .71875rem; font-weight: 600;
  background: rgba(255, 255, 255, .12); color: #fff;
}

/* على الهاتف الشريط سفلي: الكبسولة تصعد إلى الترويسة بدلاً منه. */
@media (max-width: 1023px) {
  .tabbar-items .ws-pill { display: none; }
}

/* داخل الورقة: صفوف الشركات */
.ws-search { position: relative; margin-bottom: 12px; }
.ws-search input {
  width: 100%; padding: 11px 14px; border-radius: 14px; font: inherit;
  font-size: .8125rem; border: 1px solid var(--r-line-2);
  background: var(--surface); color: var(--text);
}
.ws-search input:focus { outline: 0; border-color: var(--r-primary-vivid); }
.ws-search kbd {
  position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%);
  font-size: .65625rem; color: var(--text-soft); background: var(--surface-2);
  border-radius: 6px; padding: 2px 6px;
}
.ws-list { display: flex; flex-direction: column; gap: 6px; }
.ws-row {
  appearance: none; cursor: pointer; font: inherit; text-align: start;
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
}
.ws-row.on { background: var(--brand-tint); border-color: var(--brand-soft); }
.ws-row:disabled { cursor: default; }
.ws-row .ws-t b { font-size: .84375rem; font-weight: 600; }
.ws-row .ws-t small { color: var(--text-soft); opacity: 1; }
.ws-check { color: var(--brand-ink); }
.ws-go { color: var(--r-muted-2); }
.ws-add {
  display: block; margin-top: 10px; padding: 11px 12px; border-radius: 16px;
  border: 1px dashed var(--r-line-3); text-align: center; font-size: .8125rem;
  font-weight: 600; color: var(--brand-ink);
}
.ws-note { margin-top: 12px; }
.ws-warn { color: var(--warn-text); }
.ws-rules { margin-top: 12px; }
.ws-rules summary {
  cursor: pointer; font-size: .8125rem; font-weight: 700; padding: 8px 0;
}

/* أين تسكن الكبسولة: الترويسة على الهاتف، ورأس القائمة على الشاشة
   العريضة — واحدة تظهر دائماً، ومكانها لا يتغيّر بين شاشة وأخرى. */
.ws-mount-top { display: block; min-width: 0; max-width: 260px; }
.ws-mount-top .ws-pill {
  width: 100%; margin: 0; background: var(--surface-2); color: var(--text);
  border-color: var(--border);
}
.ws-mount-top .ws-pill:hover { background: var(--brand-tint); }
.ws-mount-top .ws-swap { background: var(--brand-soft); color: var(--brand-ink); }
.ws-mount-top .ws-t small { opacity: 1; color: var(--text-soft); }
@media (min-width: 1024px) { .ws-mount-top { display: none; } }
@media (max-width: 520px) { .ws-mount-top .ws-t { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   التعليقات الداخلية — W26

   بانرٌ دافئ يقول القاعدة أولاً: «لا تظهر للعميل أبداً». ثم المثبّتة،
   ثم الباقي. الترتيب هو الرسالة — من يفتح اللوح يريد أن يطمئن قبل أن
   يقرأ.
   ═══════════════════════════════════════════════════════════════════ */
.nt-banner {
  display: flex; gap: 9px; align-items: flex-start; padding: 12px 14px;
  border-radius: 16px; margin-bottom: 12px; font-size: .78125rem; line-height: 1.8;
  background: var(--warn-wash); border: 1px solid var(--warn-line);
  color: var(--warn-text);
}
.nt-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px;
  background: var(--warn);
}
.nt-pins { margin-bottom: 12px; }
.nt-pin {
  font-size: .78125rem; padding: 7px 11px; border-radius: 12px; margin-top: 6px;
  background: var(--brand-tint); color: var(--text);
}
.nt-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.nt {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
}
.nt.on { border-color: var(--warn-line); background: var(--warn-wash); }
.nt-body { flex: 1 1 auto; min-width: 0; }
.nt-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.nt-meta b { font-size: .8125rem; font-weight: 600; }
.nt-badge {
  font-size: .65625rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--warn); color: #fff;
}
.nt-when { font-size: .6875rem; color: var(--text-soft); }
.nt-text { margin: 5px 0 0; font-size: .8125rem; line-height: 1.75; }
.nt-at { display: block; margin-top: 4px; font-size: .6875rem; color: var(--text-soft); }
.nt .linkish { margin-inline-start: 0; margin-top: 6px; }
.nt-new textarea {
  width: 100%; padding: 11px 13px; border-radius: 14px; font: inherit;
  font-size: .8125rem; line-height: 1.8; resize: vertical; margin-bottom: 9px;
  border: 1px solid var(--r-line-2); background: var(--surface); color: var(--text);
}
.nt-new textarea:focus { outline: 0; border-color: var(--r-primary-vivid); }
.nt-pinbox {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78125rem;
  font-weight: 600; color: var(--text-soft);
}
.cp-at {
  background: var(--brand-soft); color: var(--brand-ink); border-radius: 5px;
  padding: 1px 5px; font-weight: 600;
}
.cp-pinned { margin-bottom: 8px; }
.cp-pinned small { display: block; font-size: .65625rem; color: var(--text-soft); }
.cp-pin {
  display: block; margin-top: 4px; font-size: .75rem; padding: 5px 9px;
  border-radius: 10px; background: var(--warn-wash); color: var(--warn-text);
}
.cp-note.on { border-inline-start: 2px solid var(--warn); padding-inline-start: 8px; }

/* ═══════════════════════════════════════════════════════════════════
   فقاعات المحادثة — قيم التسليم حرفياً

   الواردة بيضاء بحدّ ‎#EFF0ED‎ و‎16 16 16 5‎، والصادرة خضراء ممتلئة
   بنصٍّ أبيض و‎16 16 5 16‎. الوقت داخل الصادرة يخفت إلى ‎rgba(255,255,255,.75)‎.

   واسم من ردّ **فوق** الفقاعة خارجها: هو ما يقوم مقام الإسناد في هذا
   المنتج، فلو سكن داخلها لصار سطراً في رسالة بدل أن يكون توقيعاً عليها.
   ═══════════════════════════════════════════════════════════════════ */
.chat-line { display: flex; flex-direction: column; max-width: 82%; }
.chat-line.in  { align-self: flex-start; align-items: flex-start; }
.chat-line.out { align-self: flex-end;   align-items: flex-end; }
.chat-line .chat-b { max-width: 100%; }

/* مقيَّد بـ‎.chat-line‎ عمداً: ‎.chat-who‎ اسمٌ تستعمله شريحة «آخر ردّ»
   في الرأس أيضاً، وقاعدةٌ عارية تجعل الشريحة ترث قياس هذا السطر. */
.chat-line > .chat-who {
  display: block; font-size: .65625rem; font-weight: 600; color: var(--brand-ink);
  margin-bottom: 4px; margin-inline-end: 2px;
}
.chat-line.out:has(.chat-b.bad) > .chat-who { color: var(--danger-ink); }

.chat-b {
  padding: 9px 13px; font-size: .8125rem; line-height: 1.75;
}
.chat-b.in {
  border-radius: 16px 16px 16px 5px;
  background: var(--surface); border: 1px solid var(--border);
}
/* الصادرة ختمٌ لأن عليها نصاً (5.39:1)، وبنفس القيمة ليلاً. */
.chat-b.out {
  border-radius: 16px 16px 5px 16px;
  background: var(--r-seal); border: 1px solid var(--r-seal);
  color: #fff;
}
/* ليلاً كان ‎styles.css‎ يفرض بنّي تجوال (‎#3A2C12‎ بحدٍّ عنبري) بتخصيصٍ
   أعلى من القاعدة أعلاه. نفس المحدِّد هنا يغلبه لأنه يُحمَّل بعده —
   والفاشلة تبقى حمراء ليلاً كما نهاراً. */
:root[data-theme="dark"] .chat-b.out { background: var(--r-seal); border-color: var(--r-seal); }
:root[data-theme="dark"] .chat-b.out.bad { background: var(--danger-wash); border-color: var(--danger); }
/* الوقت والعلامتان .88 لا .75: على الختم ‎.75‎ = 3.77:1 لنصٍّ بحجم 11px
   (راسب)، و‎.88‎ = 4.56:1. */
.chat-b.out .chat-meta,
.chat-b.out .chat-tick { color: rgba(255, 255, 255, .88); }
.chat-b.out .chat-tick.read { color: #fff; }
.chat-b.out .chat-file,
.chat-b.out .chat-gone { color: rgba(255, 255, 255, .88); }
.chat-b.bad {
  background: var(--danger-wash); border-color: var(--danger);
  color: var(--text);
}
.chat-b.bad .chat-meta { color: var(--danger-ink); }

/* رمز QR الحقيقي يصل مرسوماً SVG من الجسر — الحاوية تعطيه مقاسه وحسب. */
.qr-art svg { width: 100%; height: 100%; display: block; }
.qr-art svg rect:first-child { fill: #fff; }

/* ── بطاقات الباقات (شاشة الاشتراك) ─────────────────────────────────
   السعر بالدولار وحده، والمواصفات تحته سطراً سطراً: الزبون يقارن الأربع
   بعينه بدل ما يفتح صفحة أسعار ثانية ويرجع. ودورة الفوترة تُبدَّل فوق
   البطاقات فيرى فرق السنوي على الأرقام نفسها. */
.cycle-pick { display: inline-flex; gap: 4px; padding: 4px; margin: 10px 0 14px;
  background: var(--surface-2); border-radius: 999px; }
.cycle-pick button { border: 0; background: none; color: var(--text-soft);
  font: inherit; font-size: .84375rem; font-weight: 600; padding: 8px 16px;
  border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.cycle-pick button small { font-size: .6875rem; font-weight: 500; opacity: .8; }
.cycle-pick button.on { background: var(--r-seal); color: #fff; }

.plan-cards { display: grid; gap: 10px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.plan-card { display: flex; flex-direction: column; gap: 6px; text-align: start;
  padding: 14px; border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
/* مسطّح: الحدّ الأخضر وحده يقول «اضغط»، بلا توهّج ولا رفع. */
.plan-card:hover:not(:disabled) { border-color: var(--r-primary); }
.plan-card:disabled { cursor: default; }
.plan-card.current { border-color: var(--r-primary); background: var(--brand-tint); }
.pc-name { font-size: .9375rem; }
.pc-price { font-family: var(--font-mono); font-size: 1.375rem; font-weight: 700;
  direction: ltr; text-align: start; color: var(--text); }
.pc-price small { font-size: .75rem; font-weight: 500; color: var(--text-soft);
  font-family: var(--font-body, inherit); }
/* الكلمة العربية لا تُكتب بالخط الأحادي — يقطّع وصل الحروف («بـسعر مـخصص»
   بشاشة الزعيم، ٤ تشرين الأول ٢٠٢٦). «/ شهر» و«بسعر مخصص» بخط الواجهة. */
.pc-price small { font-family: var(--font); }
.pc-price.pc-custom { font-family: var(--font-display); direction: rtl; font-size: 1.25rem; }
.pc-desc { color: var(--text-soft); font-size: .78125rem; }
.pc-feat { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.pc-feat li { font-size: .78125rem; color: var(--text-soft); padding-inline-start: 16px;
  position: relative; }
.pc-feat li::before { content: "✓"; position: absolute; inset-inline-start: 0;
  color: var(--brand-ink); font-weight: 700; }
.pc-tag, .pc-go { margin-top: 8px; align-self: flex-start; font-size: .71875rem;
  font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.pc-tag { background: var(--brand-soft); color: var(--brand-ink); }
.pc-go { background: var(--r-seal); color: #fff; }

/* ── شاشة القنوات (من تصميم «الشاشة نفسها، مرتّبة») ─────────────────
   عمودان: قائمة 330 فيها بحث وثلاثة فلاتر ومجموعتان، ولوح تفاصيل يملأ
   الباقي. القاعدة التي بُني عليها التصميم: الفراغ يصير محتوى — لوح
   التفاصيل يجاوب «شنو هذي القناة وشلون أربطها» بدل نصف شاشة أبيض. */
.chan-split { display: grid; gap: 14px; align-items: start;
  grid-template-columns: 330px minmax(0, 1fr); }
@media (max-width: 980px) { .chan-split { grid-template-columns: 1fr; } }

.chan-list { background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; position: sticky; top: 8px;
  display: flex; flex-direction: column; max-height: calc(100dvh - 210px); }
@media (max-width: 980px) { .chan-list { position: static; max-height: none; } }
.cl-tools { padding: 14px 14px 10px; display: grid; gap: 10px;
  border-bottom: 1px solid var(--border); }
.cl-search { width: 100%; font: inherit; font-size: .78125rem; padding: 9px 14px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); }
.cl-search:focus { outline: none; border-color: var(--r-primary); }
.cl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* شرائح الفريق والقنوات بلغة شرائح التصفية كلها: إطار 1px، والمختارة غسلةٌ
   بحبر الختم — كانت المختارة كبسولةً سوداء لا تشبه أي فلتر آخر في النظام. */
.cl-chip { font: inherit; font-size: .75rem; font-weight: 600;
  min-height: 32px; padding-block: 0; padding-inline: 12px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--text-soft); border: 1px solid var(--r-ghost-line);
  transition: background-color .15s, border-color .15s, color .15s; }
.cl-chip:not(.on):hover { background: var(--bg); border-color: var(--r-ghost-line-hover); color: var(--text); }
.cl-chip.on { background: var(--brand-soft); color: var(--brand-ink); border-color: transparent; }
@media (max-width: 719px), (pointer: coarse) { .cl-chip { min-height: 40px; } }

.cl-scroll { overflow: auto; padding: 10px 10px 12px; display: flex;
  flex-direction: column; gap: 2px; }
/* الأقسام الثلاثة (المحادثات · الاتصالات · التعليقات) عناوين تُقرأ لا
   تسميات باهتة: كانت 10.5px رمادية فلا يُرى أن القائمة مقسومة أصلاً. */
.cl-sec { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: .75rem; font-weight: 700; color: var(--text);
  padding: 14px 8px 6px; }
.cl-sec:first-child { padding-top: 4px; }
.cl-sec .tnum { font-size: .6875rem; font-weight: 600; color: var(--text-soft);
  background: var(--surface-2); border-radius: 999px; padding: 1px 8px; }
.cl-row { display: flex; align-items: center; gap: 11px; width: 100%; border: 0;
  background: none; font: inherit; color: var(--text); text-align: start;
  padding: 7px 10px; border-radius: 12px; cursor: pointer; }
.cl-row:hover { background: var(--surface-2); }
.cl-row.on { background: var(--brand-tint); }
.cl-row .prov-logo { width: 32px; height: 32px; flex: none; border-radius: 10px;
  display: grid; place-items: center; background: var(--surface-2); }
.cl-t { flex: 1; min-width: 0; display: grid; line-height: 1.4; }
.cl-t b { font-size: .8125rem; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cl-t small { font-size: .6875rem; color: var(--text-soft); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* الحالة تُقال بلون الكلمة نفسها لا بأيقونة تُفسَّر. */
.cl-t small.cl-ok { color: var(--brand-ink); font-weight: 600; }
.cl-t small.cl-warn { color: #B08900; font-weight: 600; }
.cl-t small.cl-down { color: var(--r-danger); font-weight: 600; }
.cl-dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--text-soft); opacity: .55; }
.cl-dot.cl-ok { background: var(--r-primary-vivid); opacity: 1; }
.cl-dot.cl-warn { background: #E0A63D; opacity: 1; }
.cl-dot.cl-down { background: var(--r-danger); opacity: 1; }
.cl-tick { width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: var(--r-seal); color: #fff; font-size: .625rem;
  font-weight: 700; display: grid; place-items: center; }

/* ترويسة الشاشة: عدد متصل · آخر فحص · شارة ما يحتاج انتباهاً */
#chan-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chan-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--border); }
.chan-flag { display: inline-flex; align-items: center; gap: 6px; font-size: .6875rem;
  font-weight: 700; border-radius: 999px; padding: 3px 10px;
  background: var(--r-danger-wash, #FFF1EF); color: var(--r-danger-ink); }
.chan-flag .chan-dot { background: var(--r-danger); }

/* لوح التفاصيل */
.chan-detail { min-width: 0; display: grid; gap: 14px; align-content: start;
  container-type: inline-size; }
/* لوح التفاصيل أضيق من الصفحة (القائمة 330 بجانبه)، فعموداه يُحكم عليهما
   بعرضه هو لا بعرض النافذة: عمودٌ جانبي ثابت 300 بجانب رئيسيٍّ في لوح
   عرضه 500 كان يترك للرئيسي كلمةً في السطر («كيف / يتصل / تطبيقك»). */
@container (max-width: 860px) {
  .chan-detail .chan-cols { grid-template-columns: minmax(0, 1fr); }
}
.ci-head-card { display: grid; gap: 16px; }
.ci-head { display: flex; align-items: flex-start; gap: 14px; }
.prov-logo.lg { width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; background: var(--surface-2); flex: none; }
.ci-t { flex: 1; min-width: 0; display: grid; gap: 5px; }
.ci-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ci-name b { font-size: 1.1875rem; }
.ci-pill { font-size: .6875rem; font-weight: 700; border-radius: 999px;
  padding: 3px 10px; background: var(--surface-2); color: var(--text-soft); }
.ci-t small { font-size: .78125rem; color: var(--text-soft); }
.ci-act { flex: none; display: flex; gap: 8px; }
.ci-about { font-size: .84375rem; line-height: 1.9; color: var(--text); }
/* الإمكانيات: ما تسويه القناة فعلاً، شرائح قصيرة من سجل القنوات. */
.ci-caps { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-cap { font-size: .71875rem; font-weight: 600; line-height: 1.6;
  border-radius: 999px; padding: 3px 10px;
  background: var(--brand-tint); color: var(--brand-ink); }
.ci-tiles { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ci-tile { background: var(--surface-2); border-radius: 12px; padding: 13px 15px;
  display: grid; gap: 4px; }
.ci-tile small { font-size: .6875rem; font-weight: 600; color: var(--text-soft); }
.ci-tile b { font-size: .8125rem; font-weight: 600; }

.ci-cols { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) 290px; }
/* العمودان داخل اللوح لا ينفعان إلا على شاشة عريضة فعلاً: دونها يصير
   عمود «خطوات الربط» 230px فتنكسر كل خطوة على أربعة أسطر. */
@media (max-width: 1400px) { .ci-cols { grid-template-columns: 1fr; } }
.ci-steps, .ci-after { display: grid; gap: 12px; align-content: start; }
.ci-step { display: flex; gap: 13px; }
.ci-n { width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: .75rem; font-weight: 600;
  background: var(--surface-2); color: var(--text-soft); }
.ci-n.on { background: var(--brand-soft); color: var(--brand-ink); }
.ci-step div { display: grid; gap: 3px; }
.ci-step b { font-size: .84375rem; font-weight: 600; }
.ci-step small { font-size: .75rem; line-height: 1.8; color: var(--text-soft); }
.ci-line { display: flex; align-items: flex-start; gap: 9px; font-size: .78125rem;
  line-height: 1.8; }
.ci-line .cl-dot { margin-top: 7px; }
.ci-note { font-size: .71875rem; line-height: 1.75; border-radius: 12px;
  padding: 11px 13px; background: var(--r-warn-wash, #FFF9E8); color: var(--text); }
:root[data-theme="dark"] .ci-note { background: #2A2313; }

/* صفحة الإعدادات محدودة بـ940 لأن أكثرها نماذج تُقرأ بسطر قصير. لكن
   شاشة القنوات ليست نموذجاً: التصميم يعطيها العرض الباقي بعد الشريط
   وقائمة الإعدادات. بالحدّ القديم كان لوح التفاصيل يطلع 330px ونصف
   الشاشة أبيض — وهي أول ملاحظة في التصميم. */
@media (min-width: 1024px) {
  .page[data-page="settings"]:has(.chan-wrap) { --page-max: 1440px; }
}

/* ── ربط Telegram ─────────────────────────────────────────────────
   خطوات ‎@BotFather‎ تُقرأ سطراً بعد سطر لا شارات في صفّ واحد: هي
   تعليماتٌ تُنفَّذ بالترتيب، لا مؤشّر تقدّمٍ داخل الورقة. */
.wiz-steps.col { flex-direction: column; align-items: stretch; gap: 10px; }
.wiz-steps.col li { align-items: flex-start; font-weight: 500; line-height: 1.7;
  font-size: .8125rem; color: var(--text); }
.wiz-steps.col li span { flex: none; margin-top: 1px;
  background: var(--brand-tint); color: var(--brand-ink); }
.sep { border: 0; border-top: 1px solid var(--r-line-faint, var(--r-line-2));
  margin: 16px 0; }

/* سقف الباقة جنب رقم الموظفين في شريط الأرقام: «2 / 40». السقف أخفت من
   الرقم لأن المقروء هو المستهلك، ويحمرّان معاً حين يمتلئ (طلب المالك
   ١٢ أيلول) — كان الرقم وحده، فلا يُعرف الامتلاء إلا عند رفض الإضافة. */
.summary .sum-cap { font-size: .62em; font-weight: 600; color: var(--text-soft); }
.summary b.sum-full, .summary b.sum-full .sum-cap { color: var(--danger); }

/* ── الفريق (النظام) ──────────────────────────────────────────────
   الرصيدان صفٌّ واحد فوق: سقف الحسابات وسقف ملفّات الموظفين رقمان
   مستقلان بالباقة. كل بطاقة «1 من 15» وشريطٌ يمتلئ وما بقي (بلاغ المالك
   ١١ أيلول: «يذكر شكد عندك بالباقة») — كانت رقماً وحده بلا سقف. */
.tm-plan { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; font-size: .8125rem; color: var(--text-soft); }
.tm-plan b { color: var(--text); }
.tm-quotas { display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tm-quota { display: grid; gap: 6px; padding: 16px 18px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--r-line-2); }
.tm-q-label { font-size: .78125rem; font-weight: 600; color: var(--text-soft); }
.tm-quota b { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.tm-quota b span { font-size: .875rem; font-weight: 500; color: var(--text-soft); }
.tm-bar { height: 6px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; }
.tm-bar span { display: block; height: 100%; border-radius: inherit;
  background: var(--r-primary); }
.tm-q-note { font-size: .75rem; color: var(--text-soft); }
.tm-quota.near .tm-bar span { background: var(--r-warn, #C98A12); }
.tm-quota.full b { color: var(--danger); }
.tm-quota.full .tm-bar span { background: var(--danger); }

/* الأشخاص · الصلاحيات — تبويبان داخل الفريق (طلب المالك ١١ أيلول). */
.tm-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--r-line-2);
  margin-bottom: 16px; }
.tm-tab { appearance: none; border: 0; background: none; font: inherit;
  font-size: .875rem; font-weight: 600; color: var(--text-soft); cursor: pointer;
  padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px; }
.tm-tab .tnum { font-size: .71875rem; font-weight: 600; border-radius: 999px;
  padding: 1px 8px; background: var(--surface-2); color: var(--text-soft); }
.tm-tab.on { color: var(--text); border-bottom-color: var(--r-primary); }
.tm-tab.on .tnum { background: var(--brand-tint); color: var(--brand-ink); }
.tm-tab:focus-visible { outline: 2px solid var(--r-primary); outline-offset: 2px;
  border-radius: 8px; }

.tm-toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-chips .tnum { opacity: .7; }

/* ── جدول الفريق: الشخص، وملفُّه، وصلاحياته ────────────────────────
   صفٌّ واحد لكل إنسان وخليّتان تقولان ما له وما ينقصه. و«ملفّات بلا
   حساب» و«دعوات بانتظار القبول» صفوفٌ في الجدول نفسه لا قوائم أخرى
   تحته — فالناقص يُقرأ بنظرة: خليّةٌ ممتلئة وأخرى منقّطة. */
.tm-table { display: flex; flex-direction: column; gap: 8px; }
.tm-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 12px 16px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--r-line-2); }
.tm-row.off { opacity: .55; }
.tm-person { display: flex; align-items: center; gap: 12px; min-width: 0;
  flex: 1 1 100%; }
.tm-av { flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 700; font-size: .9375rem;
  background: var(--brand-tint); color: var(--brand-ink); }
.tm-inv .tm-av { background: var(--surface-2); color: var(--text-soft); }
.tm-who { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tm-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-l1 b { font-size: .90625rem; }
.tm-l2 { display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: .78125rem;
  color: var(--text-soft); min-width: 0; }
.tm-l2 span { overflow-wrap: anywhere; }
/* النوع كلمةٌ ملوّنة لا أيقونة: «موظف» و«مستخدم» فرقٌ يُقرأ لا يُخمَّن. */
.tm-kind { font-size: .71875rem; font-weight: 600; border-radius: 999px;
  padding: 2px 9px; }
.tm-kind.emp { background: var(--brand-tint); color: var(--brand-ink); }
.tm-kind.usr { background: var(--surface-2); color: var(--text-soft); }
.tm-kind.own { background: var(--r-seal); color: #fff; }

/* على الضيّق لا أعمدة: الخليّتان تنزلان تحت الاسم بمحاذاته — 50px هي
   عرض الصورة وفجوتها، فيبدأ المحتوى حيث يبدأ الاسم لا حيث تبدأ الصورة. */
.tm-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-width: 0; margin-inline-start: 50px; }
.tm-cell small { font-size: .75rem; color: var(--text-soft); }
.tm-dash { font-size: .75rem; color: var(--r-muted-2); }

/* بابُ الموارد البشرية: يُقرأ حالةً ويُضغط انتقالاً إلى ملفّه هناك. */
.tm-open { appearance: none; border: 0; background: none; font: inherit;
  color: inherit; cursor: pointer; text-align: start; padding: 0;
  position: relative; min-width: 0; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; }
.tm-open small { font-size: .75rem; color: var(--text-soft); }
.tm-open::after { content: "\203A"; font-size: 1.0625rem; line-height: 1;
  color: var(--r-muted-2); }
.tm-open:hover::after, .tm-open:hover small { color: var(--r-primary-ink); }
.tm-open:focus-visible { outline: 2px solid var(--r-primary); outline-offset: 3px;
  border-radius: 8px; }

/* إلغاء الدعوة: فعلٌ ثانوي تحت موعد انتهائها — كلمةٌ لا زرٌّ ممتلئ.
   اللون صريح: زرٌّ بلا لون على جهازٍ ليلي يُرسم نصّه أبيض. */
.tm-x { flex: none; appearance: none; border: 0; background: none; font: inherit;
  font-size: .75rem; font-weight: 600; color: var(--danger); cursor: pointer;
  padding: 2px 0; }
.tm-x:hover { text-decoration: underline; }
.tm-x:focus-visible { outline: 2px solid var(--r-primary); outline-offset: 3px;
  border-radius: 6px; }
.tm-x:disabled { opacity: .5; cursor: default; text-decoration: none; }

/* مجموعة الصلاحيات بجانب كل شخص — ضغطتها تفتح «الصلاحيات». */
.tm-grp { flex: none; appearance: none; font: inherit; font-size: .75rem;
  font-weight: 600; cursor: pointer; border-radius: 999px; padding: 4px 11px;
  border: 1px dashed var(--r-line-2); background: none; color: var(--text-soft);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-grp.on { border-style: solid; border-color: transparent;
  background: var(--brand-tint); color: var(--brand-ink); }
.tm-grp:disabled { cursor: default; }

/* عنوان قسمٍ داخل الجدول نفسه. */
.tm-sec { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 20px 0 2px; font-size: .90625rem; font-weight: 700; }
.tm-sec .tnum { font-size: .71875rem; font-weight: 600; border-radius: 999px;
  padding: 1px 8px; background: var(--surface-2); color: var(--text-soft); }
.tm-sec small { font-weight: 500; font-size: .78125rem; color: var(--text-soft); }

/* الرأس لا يوجد حيث لا أعمدة، والبطاقتان لا تُضاعفان الرقم حيث يوجد. */
.tm-thead { display: none; }

/* ≥1024 هو عرض اللوحة: دونه الصفحة عمودٌ عرضه 640 لا يتّسع لثلاثة. */
@media (min-width: 1024px) {
  .tm-table { --tm-cols: minmax(0, 1fr) minmax(150px, 200px) minmax(140px, 190px); }
  .tm-quotas.narrow-only { display: none; }
  .tm-thead { display: grid; grid-template-columns: var(--tm-cols); gap: 12px;
    align-items: end; padding: 0 17px 12px; margin-bottom: 2px;
    border-bottom: 1px solid var(--r-line-2);
    /* يلتصق تحت الشريط العلوي: قائمةٌ بستّين موظفاً تمرّ، فتبقى أسماء
       الأعمدة فوقها — وإلا صارت الخلايا أرقاماً بلا عناوين. */
    position: sticky; top: calc(68px + var(--safe-top, 0px)); z-index: 3;
    background: var(--bg); }
  .tm-row { display: grid; grid-template-columns: var(--tm-cols); gap: 12px;
    align-items: center; }
  .tm-person { flex: none; }
  .tm-cell { display: grid; gap: 5px; justify-items: start; align-content: center;
    margin-inline-start: 0; min-height: 40px;
    border-inline-start: 1px solid var(--r-line); padding-inline-start: 14px; }
  .tm-cell small { font-size: .71875rem; max-width: 100%; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .tm-open { display: grid; gap: 5px; justify-items: start; width: 100%;
    padding-inline-end: 16px; }
  .tm-open::after { position: absolute; inset-inline-end: 0; top: 50%;
    transform: translateY(-50%); }
  .tm-sec { margin: 22px 0 4px; }
  .th-lbl { font-size: .75rem; font-weight: 700; color: var(--text-soft); }
  .th-q { display: grid; gap: 5px; align-content: end; padding-inline-start: 14px; }
  .th-q b { font-size: 1.25rem; font-weight: 700; line-height: 1; }
  .th-q b span { font-size: .78125rem; font-weight: 500; color: var(--text-soft); }
  .th-q .tm-bar { height: 5px; }
  .th-note { font-size: .71875rem; color: var(--text-soft); }
  .th-q.near .tm-bar span { background: var(--r-warn); }
  .th-q.full b, .th-q.full .th-note { color: var(--danger); }
  .th-q.full .tm-bar span { background: var(--danger); }
}

/* ── مجموعات الصلاحيات (الإعدادات · الفريق) ─────────────────────────
   كتبتُ `pgroups.js` بلا سطر CSS واحد: صفوف المجموعات أزرارٌ خام بحجم
   نصّها، ومستويات المحرّر أزرار راديو مكشوفة. هنا شكلها — نفس بطاقات
   الفريق، والمستوى شريحةٌ تُختار لا دائرة. */
.pg-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; }
.pg-head .set-note { margin: 0; max-width: 62ch; }
.pg-row { appearance: none; font: inherit; color: var(--text); text-align: start;
  cursor: pointer; width: 100%; display: grid; align-items: center; gap: 14px;
  grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) auto;
  padding: 14px 16px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--r-line-2); }
.pg-row + .pg-row { margin-top: 8px; }
.pg-row:hover { border-color: var(--r-primary-vivid); }
.pg-row:focus-visible { outline: 2px solid var(--r-primary); outline-offset: 2px; }
.pg-t { display: grid; gap: 3px; min-width: 0; }
.pg-t b { font-size: .90625rem; }
.pg-t small { font-size: .75rem; color: var(--text-soft); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pg-sum { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pg-n { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px;
  display: grid; place-items: center; font-size: .78125rem; font-weight: 700;
  background: var(--brand-tint); color: var(--brand-ink); }
.pg-empty { padding: 18px; border-radius: 16px; border: 1px dashed var(--r-line-2);
  display: grid; gap: 6px; }
@media (max-width: 640px) {
  .pg-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pg-sum { grid-column: 1 / -1; order: 3; }
}
.pg-sec { display: flex; align-items: center; gap: 8px; font-size: .84375rem;
  font-weight: 700; margin: 18px 0 8px; }
.pg-mod { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--r-line-2); }
.pg-mod + .pg-mod { margin-top: 8px; }
.pg-mod-h { display: grid; gap: 2px; }
.pg-mod-h b { font-size: .875rem; }
.pg-mod-h small { font-size: .75rem; color: var(--text-soft); }
.pg-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-level { position: relative; cursor: pointer; }
.pg-level input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pg-level span { display: inline-block; padding: 6px 12px; border-radius: 999px;
  font-size: .78125rem; font-weight: 600; border: 1px solid var(--r-line-2);
  background: var(--surface); color: var(--text-soft); }
.pg-level input:checked + span { background: var(--brand-tint);
  border-color: var(--r-primary-vivid); color: var(--brand-ink); }
.pg-level input:focus-visible + span { outline: 2px solid var(--r-primary);
  outline-offset: 2px; }
.pg-level input:disabled + span { opacity: .6; }
.pg-flags { display: grid; gap: 2px; padding-top: 8px;
  border-top: 1px dashed var(--r-line-2); }
.pg-flag { font-size: .8125rem; }
.pg-members { display: grid; gap: 6px; }
.pg-member { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2);
  font-size: .84375rem; }
.pg-member small { margin-inline-start: 6px; font-size: .71875rem; color: var(--text-soft); }
.pg-add { display: flex; gap: 8px; margin-top: 8px; }
.pg-add select { flex: 1; min-width: 0; }

/* نماذج المجموعات: تبدأ منها ولا تُحفظ قبل «احفظ». */
.tm-presets { display: grid; gap: 8px; margin-bottom: 16px; padding: 14px 16px;
  border-radius: 16px; background: var(--r-surface-alt, var(--surface-2)); }
.tm-presets[hidden] { display: none; }
.tm-presets > small { font-size: .78125rem; color: var(--text-soft); }
.tm-preset-row { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tm-preset { appearance: none; text-align: start; font: inherit; cursor: pointer;
  display: grid; gap: 3px; padding: 11px 14px; border-radius: 14px;
  border: 1px solid var(--r-line-2); background: var(--surface); color: var(--text); }
.tm-preset:hover { border-color: var(--r-primary-vivid, var(--r-primary)); }
.tm-preset b { font-size: .84375rem; color: var(--brand-ink); }
.tm-preset small { font-size: .75rem; color: var(--text-soft); line-height: 1.6; }
.tm-kinds { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.tm-pick { appearance: none; cursor: pointer; text-align: start; font: inherit;
  display: flex; flex-direction: column; gap: 4px; padding: 13px 16px;
  border-radius: 16px; border: 1px solid var(--r-line-2);
  background: var(--surface); color: var(--text); }
.tm-pick.on { border-color: var(--r-primary-vivid); background: var(--brand-tint); }
.tm-pick small { color: var(--text-soft); font-size: .78125rem; }


/* ── لوح التكامل (شات الموقع · دعم داخل التطبيق) ───────────────────── */
.int-docs h6 { font-size: .84375rem; font-weight: 700; margin: 18px 0 6px; }
.int-docs h6:first-of-type { margin-top: 10px; }
.int-code {
  position: relative; margin: 8px 0 4px; border-radius: 12px;
  background: var(--r-surface-alt); border: 1px solid var(--border);
}
.int-code pre {
  margin: 0; padding: 12px 14px 12px 76px; overflow-x: auto;
  font-family: var(--font-mono); font-size: .75rem; line-height: 1.7;
  white-space: pre; text-align: left;
}
.int-code .btn { position: absolute; top: 8px; left: 8px; }
.int-opts, .int-eps { display: grid; gap: 6px; margin: 6px 0 10px; min-width: 0; }
/* نقطة نهاية = شريحة: الطريقة والمسار وجسمٌ مثال (قصير، فلا يخرج من
   البطاقة)، ووصفها بالعربي تحتها — لا جنبها فيتداخل الاتجاهان. */
.int-ep { display: grid; justify-items: start; gap: 5px; min-width: 0;
  padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border);
  font-size: .78125rem; line-height: 1.7; color: var(--text-soft); }
.int-ep > code { font-family: var(--font-mono); font-size: .75rem; color: var(--text);
  background: var(--r-surface-alt); border-radius: 6px; padding: 3px 8px;
  overflow-wrap: anywhere; max-width: 100%; }
.int-ep > code b { color: var(--brand-ink); font-weight: 700; }
.int-ep > code i { font-style: normal; color: var(--text-soft); }
.int-opts code { overflow-wrap: anywhere; }
.int-docs, .int-code { min-width: 0; }
.int-opts > div {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  font-size: .78125rem; color: var(--text-soft);
}
.int-opts code {
  font-family: var(--font-mono); font-size: .71875rem; color: var(--text);
  background: var(--r-surface-alt); border-radius: 6px; padding: 2px 6px;
}

/* ═══════════════════════════════════════════════════════════════════
   مواءمة DESIGN.md (قرار المالك 2026-10-01) — لما يملكه styles.css

   الموروث لا يُمسّ في ملفه: كل تصحيح هنا بنفس المحدِّد أو أعلى منه،
   فيغلب لأن هذا الملف يُحمَّل بعده. أربع قواعد من DESIGN.md:
   الختم (تعبئة تحمل نصاً = ‎#0E7A47‎)، التعبئة لا تنفتح ليلاً، الانتباه
   دافئ لا أخضر، ومسطّح عند السكون.
   ═══════════════════════════════════════════════════════════════════ */

/* ١ — قاعدة الختم: كل تعبئة خضراء عليها حروف أو رمز يُقرأ. كانت تدرّجاً
   بين ‎--brand‎ و‎--brand-deep‎، وكلاهما ‎#17A05F‎ هنا، فالأبيض فوقها
   3.37:1. والتدرّج نفسه ممنوع: تعبئة واحدة. */
.brand-mark, .avatar, .punch, .mv-ev.on, .shift-btn.on,
.picker-actions button.primary, .days-picker label:has(input:checked),
.toast.ok, .sheet-tabs button.active, .chat-av, .call-av, .cust-av, .ah-av,
.callmini, .callmini-yes, .callmini.ringing .callmini-yes,
.call-round.yes .call-round-ic, .chat-sendbtn, .call-act,
.hn-main .punch, .hn-main .punch.is-in {
  background: var(--r-seal);
}
/* زر البصمة: كبسولة بلا توهّج مثل كل ما يُضغط. والمستدير القديم بحالة
   «داخل» كان تدرّجاً إلى ‎--ink‎ — وهو ليلاً فاتح، فيصير الأبيض فوق فاتح. */
.punch, .hn-main .punch, .hn-main .punch.is-in, .brand-mark { box-shadow: none; }
.hn-main .punch { border-radius: 999px; }
.punch.is-in { background: var(--r-ink-fixed); box-shadow: none; }
/* «تسجيل خروج» أحمر و«تسجيل دخول» أخضر فقط (قرار المالك ٥ تشرين الأول ٢٠٢٦).
   بعد قاعدة الختم أعلاه بنفس الخصوصية فيغلبها، وتعبئةٌ ثابتة لا تنفتح ليلاً. */
.punch.is-in, .hn-main .punch.is-in { background: var(--r-danger-fill); }

/* ٢ — التعبئة لا تنفتح ليلاً. ‎styles.css‎ كان يصلح الشارات بأحمر تجوال
   ‎#D92D20‎ وtoast النجاح بـ‎--brand‎ (أبيض على ‎#17A05F‎). */
:root[data-theme="dark"] .toast.ok { background: var(--r-seal); }
:root[data-theme="dark"] .bell-badge,
:root[data-theme="dark"] .hub-badge,
:root[data-theme="dark"] .toast.err { background: var(--r-danger-fill); }
/* شارة الشريط السفلي تعدّ غير المقروء — ختمٌ بالوضعين، لا حمراء ليلاً
   وخضراء نهاراً. وعلى العريض تعود حمراء لأنها هناك «متأخر». */
:root[data-theme="dark"] .tab .tab-badge { background: var(--badge-fill); }
@media (min-width: 1024px) {
  :root[data-theme="dark"] .tabbar .tab .tab-badge { background: var(--r-danger-fill); }
}

/* ٣ — الانتباه دافئ. عنبر تجوال كان لون «انتبه»، فلمّا صار ‎--brand‎ أخضر
   هنا صارت «قيد المراجعة» و«ينتظر من مدة» و«تنبيه» و«الموقع غير متاح»
   بلون «تمام» نفسه. */
.geo-engine.warn, .hm-cause-m.warn, .chat-wait.warm, .aq-ic.warm {
  background: var(--r-warn-wash); color: var(--r-warn-text);
}
.chan-warn .chan-dot, .prov-warn .chan-dot, .gps.bad .dot { background: var(--r-warn); }

/* النص الأحمر الصغير على غسلته: ‎--danger-ink‎ (5.37:1) بدل ‎--danger‎
   (4.26:1). ومبلغ الخصم كان أحمر تجوال مكتوباً صراحةً. */
.error, .badge.refuse, .badge.cancel, .site-note.bad, .badge.absent,
.badge.leave_unpaid, .chip.warn, .move-leg.out .leg-label, .chat-pill.warn,
.chat-win.shut, .chat-state.st-unread, .call-row.missed .call-icon,
.chat-wait.hot, .call-icon.miss, .aq-ic.hot,
.led-sum.take b, .led-row.take .led-amt { color: var(--danger-ink); }

/* ٤ — مسطّح عند السكون. الرموز ‎--shadow‎/‎--sh-*‎ صُفّرت في ‎:root‎؛ هنا ما
   كان يكتب ظلّه صراحةً. القطعة المختارة في المقسَّم كان يميّزها ظلّ خفيف
   على صينية رمادية؛ صار حدّاً 1px — نفس لغة البطاقات. */
.seg.active, .tb-seg button.on { box-shadow: 0 0 0 1px var(--r-line-2); }
.hub-card:hover { border-color: var(--r-ghost-line-hover); }

/* ٥ — الشكل والخط: كل ما يُضغط أو يُوسم كبسولة، وعناوين الصفحات بـCairo
   (الخط للحجم: 22px فما فوق). */
.chip { border-radius: 999px; }
.ph-text h2, .page-head h2 { font-family: var(--font-display); letter-spacing: -.7px; }

/* ٦ — أسطح المتصفّح من اللوحة لا من افتراضاته: التحديد والمؤشّر وشريط
   التمرير. ‎--brand-soft‎ و‎--brand-ink‎ ينقلبان ليلاً وحدهما. */
::selection { background: var(--brand-soft); color: var(--text); }
input, textarea { caret-color: var(--brand-ink); }
html { scrollbar-color: var(--r-line-3) transparent; }

/* ═══════════════════════════════════════════════════════════════════
   صندوق الوارد بعد نقده (٢ تشرين الأول ٢٠٢٦)

   ثلاثة أهداف: ثماني محادثات على شاشة الهاتف لا أربع (PRODUCT.md)،
   ورأس محادثة لا يخرج عن الشاشة، وردود جاهزة لكل شركة. لا ميزة تُحذف:
   ما غاب عن الصف يظهر للصف المفتوح، وصفّ القنوات خلف زرّه.
   ═══════════════════════════════════════════════════════════════════ */

/* عنوان القسم مكرّر — الشريط العلوي يحمل اسم الصفحة — وصار سطراً فارغاً
   بعد أن خرج منه زرّ «محادثة جديدة» إلى سطر الأدوات. */
.page[data-page="chat"] .chat-side > .page-head { display: none; }

/* ── سطر الأدوات: البحث يأخذ الباقي، والأزرار كبسولات ثابتة ─────── */
.chat-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.chat-tools .chat-search { flex: 1 1 auto; min-width: 0; margin: 0; height: 40px;
  padding-block: 0; }
.chat-search:focus-within { border-color: var(--r-primary);
  box-shadow: 0 0 0 3px rgba(23,160,95,.22); }
.chat-tool { flex: none; height: 40px; min-width: 40px; border-radius: 999px;
  border: 1px solid var(--r-ghost-line); background: var(--surface);
  color: var(--text-soft); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.chat-tool:hover { background: var(--r-bg); border-color: var(--r-ghost-line-hover); color: var(--text); }
.chat-sort { display: inline-flex; align-items: center; gap: 5px; padding: 0 12px;
  font: inherit; font-size: .78125rem; font-weight: 600; white-space: nowrap; }
.chat-sort svg { flex: none; }
/* فلتر قناةٍ فعّال: الزر يقول ذلك ولو طُوي الصف، فلا يختفي سبب قائمةٍ أقصر. */
#chat-chan-btn.on { color: var(--brand-ink); border-color: var(--r-primary);
  background: var(--brand-soft); }
@media (pointer: coarse) {
  .chat-tool, .chat-tools .chat-search { height: 44px; min-width: 44px; }
}

/* عدّاد الشريحة النشطة: كان أبيض على أخضرٍ مُبيَّض (3.18:1)؛ التظليل للداكن
   يرفعه فوق 4.5. */
.chipbtn.active .chan-n { background: var(--surface); color: var(--brand-ink); }

/* رقم الـQR بلون WhatsApp كأخيه، على الصورة الرمزية وفي شريحته. */
.chat-ch.whatsapp_qr { background: #25D366; }
#chat-channels [data-chatchannel="whatsapp_qr"]::before { background: #25D366; }

/* ── الصف سطران: من ومتى، ثم ماذا قال وكم ينتظر ─────────────────── */
.chat-row { padding: 8px 4px; gap: 10px; align-items: center; }   /* 62px: ثمانية تحت الشريط */
.chat-av { width: 40px; height: 40px; }
.chat-top { align-items: center; }
.chat-top b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.chat-top time { margin-inline-start: auto; }
.chat-line2 { display: flex; align-items: center; gap: 6px; margin-top: 2px; min-width: 0; }
.chat-line2 .chat-prev { flex: 1 1 auto; min-width: 0; margin: 0; }
.chat-line2 .chat-unread, .chat-line2 .chat-wait { flex: none; }
.chat-by { flex: none; max-width: 8em; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: .71875rem; color: var(--text-soft); }
/* «مسودة:» دافئة لا خضراء: ردٌّ لم يُرسل حالة انتباه، لا نجاح. */
.chat-draft { font-style: normal; font-weight: 700; color: var(--r-warn-text); }
/* رقم العملية والبيع والإعلان ومن ردّ: للصف المفتوح وحده. */
.chat-row:not(.on) .chat-tags { display: none; }
.chat-row.on .chat-tags:has(*) { margin-top: 6px; }
/* الصف المفتوح يُرى بالوضعين: كان ‎#1A1D23‎ على لوحٍ ‎#1A1D23‎ ليلاً (1.00:1).
   غسلة التحديد من DESIGN.md (Leaf Wash) لا شريطٌ ملوّن على حافته.
   الغسلة وحدها خفيفة (1.08:1 على الأبيض)، فيحيطها خطٌّ بكسلٍ واحد بأخضر
   الوصل (3.37:1 نهاراً، فوق 3:1 ليلاً) — إطارٌ للصف كله لا شريطٌ على حافته. */
.chat-row.on { background: var(--brand-soft); border-radius: 10px;
  border-bottom-color: transparent; box-shadow: inset 0 0 0 1px var(--r-primary); }
.chat-row.on .chat-ch { border-color: var(--brand-soft); }
.chat-sec { padding: 8px 4px 4px; }
.chat-sec.calm { padding-top: 12px; }

/* ── ارتفاع الطابور والمحادثة: ما تبقّى من النافذة، يحسبه ‎fitPane()‎ ── */
@media (min-width: 1024px) {
  .page[data-page="chat"] .chat-side,
  .page[data-page="chat"] .chat-thread { height: var(--chat-h, 74dvh); }
  .page[data-page="chat"] .chat-profile:not([hidden]) { max-height: var(--chat-h, 74dvh); }
}

/* ── رأس المحادثة على الهاتف: سطران لا سطرٌ يخرج عن الشاشة ──────────
   كان ٤٣٩–٤٦٧px داخل ٣٧٥: زرّ «بيانات المحادثة» خارجها كلياً وزرّ الحالة
   مقصوص. السطر الأول من وكيف تعود، والثاني النافذة ومن ردّ والحالة —
   فيبقى «آخر ردّ» مقروءاً كاملاً بدل أن يُخفى. */
@media (max-width: 719px) {
  .chat-head { flex-wrap: wrap; row-gap: 8px; }
  .chat-head > #chat-back { order: 1; }
  .chat-head > .chat-id { order: 2; flex: 1 1 0; min-width: 0; }
  .chat-head > #chat-info { order: 3; }
  .chat-head::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .chat-head > #chat-window { order: 5; max-width: none; }
  .chat-head > #chat-assign { order: 6; min-width: 0; flex: 0 1 auto; }
  .chat-head > #chat-state { order: 7; margin-inline-start: auto; min-height: 40px; }
}

/* على الهاتف خمسة أزرار حول المربع تتركه بعرض ٨٠px. زرّ «ردود جاهزة» يُخفى
   هنا وحده: الردود في متناول الإبهام من شريطها فوق المربع («كل الردود»)
   ومن «/»، والمربع يرجع لعرضه. */
@media (max-width: 719px) {
  .chat-composer #chat-canned { display: none; }
}

/* مربع الكتابة ١٦px على اللمس: تحته يكبّر iOS الشاشة عند التركيز. */
@media (max-width: 1023px), (pointer: coarse) {
  .chat-composer textarea { font-size: 1rem; }
}

/* ── «/» ونموذج الرد الجاهز (العمود نفسه في desk.css) ──────────────────────────────────── */
.quick-row:has(.quick-sub) b { flex: none; max-width: 45%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.quick-sub { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: .78125rem; color: var(--text-soft); }
.reply-form { margin-top: 4px; }
.reply-form h4 { margin: 0 0 10px; }
.reply-form textarea { resize: vertical; min-height: 96px; }
.reply-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.reply-actions .btn.danger { margin-inline-start: auto; }

/* ═══ «الآن» و«المزيد» — هيكلٌ يفهمه من لم يتعلّمه (٢ تشرين الأول ٢٠٢٦) ═══
   قرار المالك: «حتى المطي يعرف يستخدمه». الصفحة الأولى قائمةٌ مرتّبة بما
   ينتظرك، والشريط على الهاتف ثلاث خانات، والقائمة الجانبية صفحات كل يوم
   وحدها، وكل ما سواها في «المزيد» بنفس أقسامه. */

/* بعرض القراءة: سطر مهمة على 1180px يتشتّت فيه البصر بين طرفيه. */
.page[data-page="more"] { max-width: 720px; margin-inline: auto; }
/* «الآن» بعرض الصفحة لمن له بطاقات الأقسام، وبعرض القراءة لمن ليس له إلا
   قائمته — سطر مهمة على 1180px يتشتّت فيه البصر بين طرفيه. */
.page[data-page="hub"] { max-width: 1180px; margin-inline: auto; }
.page[data-page="hub"]:not(.as-areas) .now-head,
.page[data-page="hub"]:not(.as-areas) .now-main { max-width: 720px; margin-inline: auto; }

.now-head { margin: 4px 2px 16px; }
.now-head h2 { font-family: var(--font-display); font-size: 1.4375rem; font-weight: 700;
  letter-spacing: -.7px; line-height: 1.3; color: var(--text); }
.now-head p { margin-top: 2px; font-size: .84375rem; color: var(--text-soft); }

/* قائمةٌ واحدة بيضاء وخطوطٌ بين سطورها — لا بطاقة لكل سطر. */
.now-list { list-style: none; margin: 0; padding: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.now-row { display: flex; align-items: center; border-top: 1px solid var(--border); }
.now-row:first-child { border-top: 0; }
.now-hit { flex: 1; min-width: 0; min-height: 68px; display: flex; align-items: center;
  gap: 12px; padding: 13px 16px; background: none; border: 0; font: inherit;
  color: inherit; text-align: start; text-decoration: none; }
button.now-hit, a.now-hit { cursor: pointer; transition: background .15s ease; }
button.now-hit:hover, a.now-hit:hover { background: var(--surface-2); }
button.now-hit:focus-visible, a.now-hit:focus-visible {
  outline: 2px solid var(--r-primary); outline-offset: -2px; }

.now-ic { flex: none; width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center; }
.now-ic.tone-seal   { background: var(--brand-soft); color: var(--brand-ink); }
.now-ic.tone-warn   { background: var(--r-warn-wash); color: var(--r-warn-text); }
.now-ic.tone-danger { background: var(--danger-wash); color: var(--danger-ink); }
.now-ic.tone-calm   { background: var(--surface-2); color: var(--text-soft); }

.now-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.now-t b { font-size: .9375rem; font-weight: 700; line-height: 1.5; color: var(--text); }
.now-t small { font-size: .8125rem; line-height: 1.6; color: var(--text-soft); }
.now-t .num, .more-badge { font-family: var(--font-mono); font-weight: 600;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
/* التقدّم بلا نص: أخضر الوصل — والختم لما يحمل كلمة. */
.now-track { display: block; height: 4px; max-width: 240px; margin-top: 7px;
  border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.now-track i { display: block; height: 100%; border-radius: inherit; background: var(--r-primary); }
.now-go { flex: none; display: grid; color: var(--r-muted-2); }
.now-act { flex: none; min-height: 44px; margin-inline-end: 16px; padding: 10px 18px;
  font-size: .875rem; }

/* ما بعد المهام حالٌ لا عمل: نفس السطر بوزنٍ أخفّ. */
.now-row.quiet .now-t b { font-weight: 600; }
.now-row.quiet .now-hit { min-height: 62px; }

/* ── المزيد ── */
.more-me { margin: 4px 0 18px; }
.more-me .ws-pill { width: 100%; margin: 0; background: var(--surface); color: var(--text);
  border-color: var(--border); }
.more-me .ws-pill:hover { background: var(--brand-tint); }
.more-me .ws-swap { background: var(--brand-soft); color: var(--brand-ink); }
.more-me .ws-t small { opacity: 1; color: var(--text-soft); }

.more-group { margin-bottom: 18px; }
.more-group h3 { margin: 0 6px 8px; font-size: .75rem; font-weight: 700; color: var(--text-soft); }
.more-rows { background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  overflow: hidden; }
.more-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px;
  padding: 11px 16px; background: none; border: 0; border-top: 1px solid var(--border);
  font: inherit; color: var(--text); text-align: start; text-decoration: none; cursor: pointer;
  transition: background .15s ease; }
.more-row:first-child { border-top: 0; }
.more-row:hover { background: var(--surface-2); }
.more-row:focus-visible { outline: 2px solid var(--r-primary); outline-offset: -2px; }
.more-ic { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid;
  place-items: center; background: var(--surface-2); color: var(--text-soft); }
.more-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.more-t b { font-size: .90625rem; font-weight: 600; line-height: 1.5; }
.more-t small { font-size: .78125rem; color: var(--text-soft); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; background: var(--badge-fill); color: #fff; font-size: .75rem; }
.more-badge[hidden] { display: none; }
.more-go { flex: none; display: grid; color: var(--r-muted-2); }
/* الخروج كلمةٌ حمراء لا كبسولةٌ حمراء (DESIGN.md: الفعل الهدّام). */
.more-row.out { color: var(--danger-ink); }
.more-row.out .more-ic { background: var(--danger-wash); color: var(--danger-ink); }

/* الهاتف: المبدّل ينتقل من الترويسة إلى «المزيد» — كان يضغط اسم صاحب
   الحساب إلى 41px. */
@media (max-width: 1023px) {
  .ws-mount-top { display: none; }
  .now-hit { min-height: 64px; }
}
/* الشاشة العريضة: من أنت وأي شركة يحملهما رأس القائمة وقاعها. */
@media (min-width: 1024px) {
  .more-me { display: none; }
  .tabbar .rail-gap { flex: none; height: 1px; margin: 10px 14px 8px;
    background: var(--r-rail-line); }
}
@media (max-width: 1023px) { .tabbar .rail-gap { display: none; } }
@media (min-width: 1024px) {
  /* «الآن» عمودٌ واحد: شبكة العمودين كانت لبطاقات البوابة. */
  .page.active[data-page="hub"] { display: block; }
  /* بنود القائمة بارتفاع 40px: حبّة الأيقونة مصمّمة للشريط السفلي، وهنا
     كانت تمدّ كل بند إلى 54px فيسقط قاع القائمة (من أنت والخروج) تحت الشاشة. */
  .tabbar .tab { padding-block: 9px; }
  .tabbar .tab i { padding: 0; }
}

/* ═══ الطابور: الاستعجال والأسماء (٢ تشرين الأول ٢٠٢٦، الجولة الثالثة) ═══ */
/* الحالتان النادرتان تظهران مع زرّ التصفية أو حين تُختاران. */
#chat-filters:not(.more) .chipbtn.extra:not(.active) { display: none; }
/* الانتظار بأربع درجات حول هدف الرد (٢٠ دقيقة)، والشارة تمتلئ لمن ينتظر من
   يومٍ أو أكثر وحده — كان كل شيء فوق ٢٠ دقيقة بنفس الأحمر فلا يُعرف أيّها أسوأ. */
.chat-wait.late { background: var(--r-danger-fill); color: #fff; }
.dot.late { background: var(--r-danger-fill); }
/* نافذة الرد: هادئة، ثم تنبيه دافئ تحت ثلاث ساعات، ثم خطر تحت الساعة. */
.chat-win.ok   { background: var(--surface-2); color: var(--text-soft); }
.chat-win.soon { background: var(--r-warn-wash); color: var(--r-warn-text); }
.chat-win.late, .chat-win.shut { background: var(--danger-wash); color: var(--danger-ink); }
.chat-win-warn { color: var(--r-warn-text); }
.chat-win-warn.late, .chat-win-warn.shut { color: var(--danger-ink); }
/* الأحمر الخفيف غسلةُ الخطر نفسها، لا أحمر تجوال القديم (rgba(217,45,32,.12)). */
.chat-wait.hot { background: var(--danger-wash); }
/* الصور الرمزية محايدة: الأخضر لما لم يُقرأ وحده (شارة العدّ)، لا لكل وجه
   في القائمة — سبع عشرة تعبئة خضراء معاً كانت تطغى على الشارة نفسها. */
.chat-av, .cust-av { background: var(--surface-2); color: var(--text); }
/* ليلاً ‎--surface-2‎ هو لون القائمة نفسه، فتذوب الدائرة ويبقى الحرف وحده. */
:root[data-theme="dark"] .chat-av, :root[data-theme="dark"] .cust-av { background: var(--r-line); }
/* شريط الردود السريعة ينسحب حين تبدأ الكتابة: بالشفافية وحدها والطيّ فوري —
   تحريك ‎max-height‎ والحشوة كان يعيد حساب التخطيط في كل إطار. */
.chat-quickbar { transition: opacity .18s ease; }

/* ═══ بعد المراجعة المستقلة (٢ تشرين الأول ٢٠٢٦) ═══ */
/* شرائح الطابور على الشاشة العريضة تلتفّ سطرين: عمود الطابور نحو 285px
   فكانت «تمت» تُقصّ و«الكل» خارجه بلا أي إشارة أن الصف يُمرَّر. على
   الهاتف يبقى صفّاً يُمرَّر — السطر الثاني يكلّف محادثة من الثماني. */
@media (min-width: 720px) {
  #chat-filters { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
}
/* الشريط العلوي على الشاشة العريضة: الاسم والصورة يحملهما قاع القائمة
   الجانبية، فلا يتكرّران هنا. وعلى «الآن» تسقط شارة «خارج الدوام»: سطر
   البصمة تحتها يقول الشيء نفسه. */
@media (min-width: 1024px) {
  .topbar .who { display: none; }
  body.on-now #tb-punch { display: none; }
}
/* شارة الانتظار صارت كلمة («4 ساعات»): لا تنكسر سطرين، وتُقرأ من اليمين.
   كان ‎direction: ltr‎ في styles.css لحماية «38د»، فلمّا صارت جملة عربية رسم
   الرقم يسار الكلمة فقُرئت «ساعات 4». العزل يبقى، والاتجاه عربي. */
.chat-wait { white-space: nowrap; direction: rtl; unicode-bidi: isolate; }

/* عنوان قائمة «ما ينتظرك»، والصورة الرمزية الصغيرة في أسماء «في الدوام الآن». */
.now-sec { margin: 0 2px 10px; font-size: .9375rem; font-weight: 700; color: var(--text); }
.in-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text); font-weight: 700; font-size: .8125rem; }
:root[data-theme="dark"] .in-av { background: var(--r-line); }
/* رسم الاتصالات يُرسم على عرض 300 ويتمدّد مع بطاقته: على الشاشة العريضة صارت
   أرقام محوره نحو 20px. سقفٌ لعرضه يبقيها قريبة من حجمها المكتوب (10.5px). */
.tb-card svg.tb-viz:not(.tb-spark) { max-width: 380px; margin-inline: auto; }

/* ═══ «الآن» للمدير: حسب القسم، بقواعد الترتيب من موقع «ناس» (٢ تشرين الأول) ═══
   اختيار المالك «ج»، ثم «قواعده على النظام»: شبكةٌ واحدة، وفراغٌ بين الأقسام
   أكبر منه داخلها، وبطاقاتٌ تنفصل بلونها لا بخطوطها، ورقمٌ كبير تحته اسمه،
   ورابطٌ نصّي واحد لكل بطاقة. لا صور ولا عناوين ضخمة: هذا مكان عمل يومي. */
#now-areas { display: none; }
.page[data-page="hub"].as-areas #now-areas { display: block; }
.page[data-page="hub"].as-areas .now-main { display: none; }
.page[data-page="hub"].as-areas .now-head h2 { font-size: 1.75rem; }

/* البطاقات والقوائم بلا إطار: الأبيض على ورق الصفحة يكفي ليفصلها. */
.now-list, .more-rows { border: 0; }
.page[data-page="hub"] .hub-reports .tb-card { border-color: transparent; }

.area-bar { margin-bottom: 4px; }
.area-title { margin: 32px 2px 12px; font-size: 1.125rem; font-weight: 700; color: var(--text); }
.area-bar + .area-title { margin-top: 28px; }
.area-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px)  { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.area-card { display: flex; flex-direction: column; gap: 16px; padding: 20px;
  background: var(--surface); border-radius: 18px; }
.area-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.area-h b { font-size: .9375rem; font-weight: 700; }
.area-link { background: none; border: 0; padding: 10px 0; margin: -10px 0; min-height: 44px;
  font: inherit; font-size: .8125rem; font-weight: 600; color: var(--brand-ink); cursor: pointer; }
.area-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.area-link:focus-visible { outline: 2px solid var(--r-primary); outline-offset: 2px; border-radius: 6px; }

/* الرقم الكبير واسمه تحته — مثل «+300 موظف» هناك. */
.area-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.area-n { font-family: var(--font-mono); font-size: 2.75rem; font-weight: 600; line-height: 1.05;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; color: var(--text); }
.area-of { font-size: .9375rem; font-weight: 600; color: var(--text-soft); }
.area-l { flex-basis: 100%; display: flex; align-items: center; gap: 7px;
  font-size: .875rem; font-weight: 600; color: var(--text); }
.area-calm { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; color: var(--text-soft); }
.area-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.area-dot.warn { background: var(--r-warn); }
.area-dot.seal { background: var(--r-primary); }
.area-sub { margin: -8px 0 0; font-size: .8125rem; color: var(--text-soft); }

/* الأرقام الصغيرة: ثلاثة على سطر، يفصلها عن الرقم الكبير خطٌّ واحد رفيع. */
.area-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0;
  padding-top: 14px; border-top: 1px solid var(--border); }
.area-stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.area-stats dt { font-size: .75rem; font-weight: 600; color: var(--text-soft); }
.area-stats dd { margin: 0; font-size: 1.375rem; line-height: 1.3; }
.area-stats dd .num { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate; }
.area-stats dd .word { font-size: .9375rem; font-weight: 700; }

.area-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.area-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.area-list .in-av { grid-row: 1 / span 2; }
.area-list b { font-size: .875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-list small { font-size: .75rem; color: var(--text-soft); }

/* صفوف «يحتاج قرارك» تمتد لحافتي البطاقة، ومحتواها على خطّ محتوى البطاقة. */
.area-rows { margin: -4px -20px -20px; border-radius: 0 0 18px 18px; }
.area-rows .now-hit { min-height: 60px; padding-inline: 20px; }

/* هيكل رمادي مكان رقمٍ لم يصل بعد — لا قفزة حين يصل. */
.sk { display: inline-block; height: .9em; border-radius: 6px; background: var(--surface-2);
  vertical-align: middle; }
:root[data-theme="dark"] .sk { background: var(--r-line); }

.page[data-page="hub"] > .hub-reports { margin-top: 32px; }
/* عنوان لوحة الفريق بمقاس عناوين الأقسام فوقه («اليوم في شركتك»). */
.page[data-page="hub"] .hub-reports .tb-head h3 { font-size: 1.125rem; font-weight: 700; }

/* ═══ إحساس موقع «ناس» بألوان ربط (٢ تشرين الأول ٢٠٢٦) ═══
   اختيار المالك بعد ni.iq: عناوين أكبر وأهدأ، ورسمة هندسية من خطّ الشعار،
   وألوان أهدأ — الأخضر للأزرار وللحيّ وحده — وأرقام أكبر وفراغ أوسع بين
   الأقسام. صفحات الشغل الكثيف تأخذ الهدوء والترتيب وتبقى كثيفة. */
.now-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.now-hello { min-width: 0; }
.now-art { display: none; }
@media (min-width: 1024px) {
  .page[data-page="hub"].as-areas .now-art { display: block; flex: none; width: 340px; }
  .page[data-page="hub"].as-areas .now-head { margin-bottom: 8px; }
}
.art { display: block; width: 100%; height: auto; }
.art-grid line { stroke: var(--r-line-2); stroke-width: 1; }
.art-step { fill: var(--brand-soft); }
.art-live { fill: var(--r-primary); }
.art-stroke { fill: none; stroke: var(--r-seal); stroke-width: 26; stroke-linecap: round; }
.art-dot { fill: var(--r-ink); }

/* عناوين أكبر وأهدأ: التحية بمقاس العرض (Cairo 38px)، وعناوين الأقسام 24px. */
.page[data-page="hub"].as-areas .now-head h2 { font-size: 2.375rem; letter-spacing: -1.2px; line-height: 1.3; }
.area-title, .page[data-page="hub"] .hub-reports .tb-head h3 {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.5px; }
@media (min-width: 1024px) {
  .area-title { margin-top: 48px; }
  .page[data-page="hub"] > .hub-reports { margin-top: 48px; }
}
.area-n { font-size: 3.25rem; }

/* ألوان أهدأ: بلاطة المهمة محايدة، والأخضر لا يلوّنها لمجرد أنها عمل؛ التنبيه
   يلوّن أيقونته وحدها، والخطر وحده يحتفظ بغسلته لأنه يوقف الشركة. */
.now-ic.tone-seal, .now-ic.tone-calm { background: var(--surface-2); color: var(--text-soft); }
.now-ic.tone-warn { background: var(--surface-2); color: var(--r-warn-text); }
:root[data-theme="dark"] .now-ic.tone-seal, :root[data-theme="dark"] .now-ic.tone-calm,
:root[data-theme="dark"] .now-ic.tone-warn { background: var(--r-line); }

/* لا شيء ينتظرك: الرسمة الصغيرة وجملتان، لا سطرٌ رمادي بين السطور. */
.now-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 20px 24px;
  text-align: center; }
.now-empty .art-sm { width: 200px; margin-bottom: 10px; }
.now-empty b { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.4px; }
.now-empty small { font-size: .84375rem; color: var(--text-soft); }

/* ── نتيجة المحادثة ─────────────────────────────────────────────────────
   شريطٌ رفيع فوق الرسائل بنفس نَفَس شريط التذكير: نقطة بلون النتيجة، النتيجة
   بخطٍّ ثقيل، ومن حدّدها ومتى بخطٍّ هادئ، والإجراء كلمة. بلا نتيجة يبقى رمادياً
   لا يصرخ — هو تذكيرٌ لا إنذار. */
.chat-deal { display: flex; align-items: center; gap: 10px; padding: 6px 16px;
  font-size: .8125rem; color: var(--text-soft); background: var(--surface);
  border-bottom: 1px solid var(--r-line); }
.chat-deal[hidden] { display: none; }
.chat-deal .state-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.chat-deal .dl-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-deal .dl-txt b { font-weight: 600; color: var(--text); }
.chat-deal:not(.set) .dl-txt b { font-weight: 500; color: var(--text-soft); }

/* ورقة النتيجة (ترتيب الآيفون 4a بألوان الويب): ثلاث خطوات متصلة بخطٍّ
   يمتلئ أخضر حتى الخطوة الحالية، والحالية بغسلة الورقة وإطار الختم؛ وتحتها
   خروجان. الختم #0E7A47 لما عليه نص، والأخضر الحيّ للتعبئة بلا نص. */
.dl-ad { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 14px;
  border-radius: 12px; font-size: .78125rem; line-height: 1.7; color: var(--r-ink);
  background: var(--r-warn-wash); border: 1px solid var(--r-warn-line); }
.dl-ad > svg { flex: none; margin-top: 2px; color: var(--r-warn-text); }
.dl-h { margin: 0 0 8px; font-size: .75rem; font-weight: 700; color: var(--r-muted); }
.dl-steps { display: flex; align-items: center; }
.dl-link { flex: none; width: 10px; height: 2px; background: var(--r-ghost-line); }
.dl-link.on { background: var(--r-primary); }
.dl-step { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; font: inherit; cursor: pointer; color: var(--r-muted);
  background: var(--r-surface); border: 1.5px solid var(--r-ghost-line); border-radius: 14px;
  transition: border-color .15s, background .15s; }
.dl-step:hover { border-color: var(--r-ghost-line-hover); }
.dl-step b { font-size: .84375rem; font-weight: 700; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%; }
.dl-step code { font: 500 .59375rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--r-muted);
  direction: ltr; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dl-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: #fff; }
.dl-pip { width: 12px; height: 12px; border-radius: 50%; background: #C4C0BC; }
.dl-ring { width: 12px; height: 12px; border-radius: 50%; border: 3px solid #fff; background: var(--r-primary); }
.dl-step.done, .dl-step.cur { color: var(--r-ink); }
.dl-step.done { border-color: color-mix(in srgb, var(--r-primary) 35%, var(--r-ghost-line)); }
.dl-step.done .dl-mark, .dl-step.cur .dl-mark { background: var(--r-seal); }
.dl-step.cur { background: var(--r-primary-wash); border-color: var(--r-seal); }
.dl-step.cur code { color: var(--r-seal); }
.dl-hint { min-height: 18px; margin: 8px 0 18px; font-size: .75rem; color: var(--r-muted); }
.dl-exits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dl-exit { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font: inherit; text-align: start;
  cursor: pointer; color: var(--r-muted); background: var(--r-surface);
  border: 1.5px solid var(--r-ghost-line); border-radius: 12px; }
.dl-exit > svg { flex: none; }
.dl-exit span { min-width: 0; display: flex; flex-direction: column; }
.dl-exit b { font-size: .84375rem; font-weight: 700; color: var(--r-ink); }
.dl-exit small { font-size: .6875rem; color: var(--r-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-exit-junk, .dl-exit-junk b { color: var(--r-danger-ink); }
.dl-exit-lost.on { background: var(--surface-2); border-color: var(--r-muted); }
.dl-exit-junk.on { background: var(--r-danger-wash); border-color: var(--r-danger-ink); }
.dl-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--r-line); font-size: .71875rem; color: var(--r-muted); }
.dl-foot > span { flex: 1; }
.dl-clear { font: inherit; font-size: .8125rem; font-weight: 600; color: var(--r-muted); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px 4px; }
.dl-done { font: inherit; font-size: .875rem; font-weight: 600; color: var(--r-seal); cursor: pointer;
  background: var(--r-primary-wash); border: 0; border-radius: 999px; padding: 8px 18px; min-height: 40px; }
@media (max-width: 380px) { .dl-step b { font-size: .78125rem; } }

/* سطر النتيجة في الخيط: في الوسط مثل فاصل اليوم، حبّةٌ هادئة بنقطة لونها. */
.chat-event { display: flex; justify-content: center; margin: 8px 0; }
.chat-event > span { display: inline-flex; align-items: center; gap: 6px; max-width: 92%;
  padding: 5px 12px; border-radius: 999px; font-size: .78125rem; line-height: 1.5;
  color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--r-line); }
.chat-event b { font-weight: 600; color: var(--text); }
.chat-event .state-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }

/* ── «ذكّرني بهذا العميل» ─────────────────────────────────────────────
   شريطٌ رفيع فوق الرسائل: القادم رماديٌّ هادئ، وما حان بغسلة التنبيه — هو سبب
   رجوع المحادثة فتقع العين عليه أولاً. والإجراء كلمةٌ لا زرٌّ ممتلئ. */
.chat-remind { display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  font-size: .8125rem; color: var(--text-soft); background: var(--surface-2);
  border-bottom: 1px solid var(--r-line); }
.chat-remind[hidden] { display: none; }
.chat-remind > svg { flex: none; }
.chat-remind .rm-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.chat-remind .rm-txt b { font-weight: 600; color: var(--text); }
.chat-remind.due { background: var(--r-warn-wash); color: var(--r-warn-text); }
.chat-remind.due { border-bottom-color: var(--r-warn-line); }
.chat-remind.due .rm-txt b { color: var(--r-warn-text); }
:root[data-theme="dark"] .chat-remind.due {
  background: color-mix(in srgb, var(--warn) 15%, var(--surface)); color: var(--warn-text); }
:root[data-theme="dark"] .chat-remind.due { border-bottom-color: color-mix(in srgb, var(--warn) 30%, var(--surface)); }
:root[data-theme="dark"] .chat-remind.due .rm-txt b { color: var(--warn-text); }
.rm-act { flex: none; font: inherit; font-weight: 600; color: var(--brand-ink); background: none;
  border: 0; padding: 6px 8px; min-width: 44px; min-height: 40px; cursor: pointer; }
/* جرس القائمة: بجانب الوقت، رماديٌّ لما هو قادم وبلون التنبيه لما حان. */
.chat-rem-ic { display: inline-grid; place-items: center; color: var(--r-muted); }
.chat-rem-ic.due { color: var(--r-warn-text); }
:root[data-theme="dark"] .chat-rem-ic.due { color: var(--warn-text); }

/* في قائمة الحالة: الموعد القائم سطرٌ بإلغائه، ثم ملاحظةٌ اختيارية، ثم المواعيد
   كبسولاتٍ بإبهام (40px)، و«وقت آخر…» بحدٍّ متقطّع لأنه يفتح ولا يختار. */
.rm-current { display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: var(--radius-sm); background: var(--surface-2); font-size: .8125rem; }
.rm-current span { flex: 1; min-width: 0; }
.rm-other { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: .78125rem;
  color: var(--text-soft); }
.rm-note-in { width: 100%; margin-top: 8px; }
.rm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rm-chip { font: inherit; font-size: .8125rem; font-weight: 600; padding: 9px 14px; min-height: 40px;
  border-radius: 999px; border: 1px solid var(--r-line-2); background: var(--surface);
  color: var(--text); cursor: pointer; }
.rm-chip:hover { background: var(--surface-2); }
.rm-chip.ghost { border-style: dashed; color: var(--text-soft); }
.rm-custom { display: flex; gap: 8px; margin-top: 8px; }
.rm-custom[hidden] { display: none; }
.rm-custom input { flex: 1; min-width: 0; }
.rm-hint { display: block; margin-top: 8px; font-size: .75rem; color: var(--text-soft); }

/* ── مراحل البيع ───────────────────────────────────────────────────────
   أعمدةٌ بلون الورق الغائر وبطاقاتٌ بيضاء بلا خطّ ولا ظلّ (مسطّح عند السكون،
   والفصل بالدرجة كما في «الآن»). العدد مونو، ولون المرحلة نقطةٌ لا تعبئة.
   على الهاتف تبويباتٌ نصّية بخطّ أخضر تحت المفتوح وعمودٌ واحد. */
.pl-tabs { display: none; }
.pl-cols { display: grid; grid-template-columns: repeat(5, minmax(208px, 1fr)); gap: 12px;
  align-items: start; overflow-x: auto; padding-bottom: 8px; }
.pl-col { background: var(--surface-2); border-radius: 18px; padding: 10px; min-width: 0;
  display: flex; flex-direction: column; gap: 8px; transition: background .15s; }
.pl-col.over { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--r-primary); }
/* ليلاً الورق الغائر والسطح لونٌ واحد (#1A1D23)، فتذوب البطاقة في عمودها:
   العمود يصير خطّاً على الصفحة، والبطاقة سطحاً عليها. */
:root[data-theme="dark"] .pl-col { background: transparent; box-shadow: inset 0 0 0 1px var(--r-line); }
:root[data-theme="dark"] .pl-col.over { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--r-primary); }
.pl-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 2px; flex-wrap: wrap; }
.pl-head b { font-size: .875rem; font-weight: 700; }
.pl-head .num, .pl-tab .num { font-family: var(--font-mono); font-size: .8125rem; font-weight: 600;
  color: var(--text-soft); direction: ltr; unicode-bidi: isolate; }
.pl-head .num { margin-inline-start: auto; }
.pl-head small { flex-basis: 100%; font-size: .71875rem; color: var(--text-soft); }
.pl-list { display: flex; flex-direction: column; gap: 8px; min-height: 56px; }
.pl-card { background: var(--surface); border-radius: 14px; padding: 10px 10px 4px; cursor: grab; }
.pl-card.lift { opacity: .45; }
.pl-open { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0;
  padding: 0; text-align: start; cursor: pointer; font: inherit; color: inherit; }
.pl-card .chat-av { width: 34px; height: 34px; flex: none; font-size: .875rem; }
.pl-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-txt b { font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-txt small { font-size: .78125rem; color: var(--text-soft); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.pl-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .71875rem;
  color: var(--text-soft); min-width: 0; }
.pl-age { font-weight: 600; direction: rtl; unicode-bidi: isolate; white-space: nowrap; }
.pl-tag { padding: 1px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink);
  font-weight: 600; white-space: nowrap; }
.pl-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-move { margin-inline-start: auto; flex: none; font: inherit; font-size: .78125rem; font-weight: 600;
  color: var(--brand-ink); background: none; border: 0; padding: 8px 4px; min-height: 36px; cursor: pointer; }
.pl-empty, .pl-more { font-size: .78125rem; color: var(--text-soft); text-align: center; padding: 12px 4px; margin: 0; }
@media (max-width: 1023px) {
  .pl-tabs { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--r-line); margin-bottom: 12px; }
  .pl-tabs.more { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 36px);
    mask-image: linear-gradient(to left, transparent 0, #000 36px); }
  .pl-tabs::-webkit-scrollbar { display: none; }
  .pl-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .875rem;
    font-weight: 600; color: var(--text-soft); background: none; border: 0;
    border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 2px; min-height: 44px;
    cursor: pointer; white-space: nowrap; }
  .pl-tab.on { color: var(--brand-ink); border-bottom-color: var(--r-primary); }
  .pl-cols { display: block; overflow: visible; padding: 0; }
  .pl-col { display: none; background: none; padding: 0; }
  .pl-col.on { display: flex; }
  .pl-col .pl-head { display: none; }
  .pl-card { cursor: default; padding: 12px 12px 4px; }
}

/* ── رمز «راسلنا» للمحل ────────────────────────────────────────────────
   بطاقةٌ لكل ورقة معلّقة: الرمز نفسه على بياضٍ دائم (القارئ يحتاج حافةً
   فاتحة حتى ليلاً)، ثم اسم المكان والرابط القصير، وثلاثة أرقام: مسحات ←
   محادثات ← بيع. الأفعال: «اطبع» وحدها ممتلئة، والباقي شبحيّ أو كلمة. */
.qp-bar { display: flex; margin-bottom: 14px; }
.qp-bar .btn, .qp-acts .btn { display: inline-flex; align-items: center; gap: 6px; }
.qp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 14px; }
.qp-card { display: flex; gap: 16px; padding: 16px; background: var(--surface); border-radius: 18px;
  align-items: flex-start; min-width: 0; }
.qp-art { flex: none; width: 132px; height: 132px; border-radius: 12px; overflow: hidden; background: #fff; }
.qp-art svg { width: 100%; height: 100%; display: block; }
.qp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.qp-info > b { font-size: 1rem; font-weight: 700; }
.qp-url { font-family: var(--font-mono); font-size: .78125rem; color: var(--text-soft);
  direction: ltr; unicode-bidi: isolate; text-align: end; overflow-wrap: anywhere; }
.qp-stats { display: flex; gap: 22px; margin: 4px 0 2px; }
.qp-stats div { display: flex; flex-direction: column; gap: 2px; }
.qp-stats dt { font-size: .71875rem; color: var(--text-soft); }
.qp-stats dd { margin: 0; font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600;
  direction: ltr; unicode-bidi: isolate; text-align: start; }
.qp-msg { margin: 0; font-size: .78125rem; line-height: 1.7; color: var(--text-soft); overflow-wrap: anywhere; }
.qp-msg q { color: var(--text); quotes: "«" "»"; }
.qp-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.qp-text { font: inherit; font-size: .8125rem; font-weight: 600; color: var(--brand-ink); background: none;
  border: 0; padding: 10px 6px; min-height: 44px; cursor: pointer; }
.qp-text.danger { color: var(--danger-ink); }
.qp-nums { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qp-num { font: inherit; font-size: .78125rem; font-weight: 600; padding: 8px 12px; min-height: 36px;
  border-radius: 999px; border: 1px solid var(--r-line-2); background: var(--surface); cursor: pointer; }
.qp-empty { max-width: 520px; margin: 32px auto; padding: 28px 22px; text-align: center; display: flex;
  flex-direction: column; align-items: center; gap: 10px; background: var(--surface); border-radius: 18px; }
.qp-empty-art { width: 88px; height: 88px; color: var(--text-soft); opacity: .35; margin-bottom: 4px; }
.qp-empty-art svg { width: 100%; height: 100%; }
.qp-empty b { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.4px; }
.qp-empty p { margin: 0; font-size: .875rem; line-height: 1.8; color: var(--text-soft); }
.qp-empty small { font-size: .78125rem; color: var(--text-soft); }
@media (max-width: 560px) {
  .qp-card { flex-direction: column; align-items: stretch; }
  .qp-art { width: 168px; height: 168px; align-self: center; }
}

/* الطباعة: الورقة وحدها بمقاس A5 — كل ما سواها يُخفى ما دام الصنف على الجسم. */
#qp-print { display: none; }
@media print {
  @page { size: A5 portrait; margin: 12mm; }
  body.qp-printing > *:not(#qp-print) { display: none !important; }
  body.qp-printing #qp-print { display: block !important; }
  /* الورقة في وسط الصفحة لا في أعلاها: A5 ناقص الهوامش ≈ 186mm. */
  .qp-poster { min-height: 180mm; display: flex; flex-direction: column; justify-content: center; }
}
.qp-poster { text-align: center; color: #141414; }
.qp-poster .qp-co { font-size: 16pt; font-weight: 700; margin: 0 0 4mm; }
.qp-poster h1 { font-family: var(--font-display); font-size: 24pt; line-height: 1.3; margin: 0 0 8mm; }
.qp-poster .qp-code { width: 90mm; height: 90mm; margin: 0 auto 6mm; }
.qp-poster .qp-code svg { width: 100%; height: 100%; display: block; }
.qp-poster .qp-how { font-size: 13pt; margin: 0 0 3mm; }
.qp-poster .qp-link { font-family: var(--font-mono); font-size: 11pt; color: #555; margin: 0; }

/* ── «بالدوام الآن» أعلى الصندوق ─────────────────────────────────────
   سطرٌ هادئ لا شريط: من المتاح باسمه الأول، والنقطة الخضراء لمن الصندوق
   مفتوحٌ أمامه الآن. وحين لا أحد يصير السطر بلون التنبيه — لا أحمر: لا شيء
   تعطّل، الدوام فارغٌ فقط. */
.chat-team { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 2px 16px 8px; font-size: .78125rem; color: var(--text-soft); }
.chat-team[hidden] { display: none; }
.chat-team > b { font-weight: 600; }
.ct-who { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-weight: 600; }
.ct-who i { width: 7px; height: 7px; border-radius: 50%; background: var(--r-line-3); flex: none; }
.ct-who i.on { background: var(--r-primary); }
.chat-team.none { gap: 6px; color: var(--r-warn-text); }
.chat-team.none svg { flex: none; }
:root[data-theme="dark"] .chat-team.none { color: var(--warn-text); }

/* ── قائمة الأسعار ──────────────────────────────────────────────────────
   قائمةٌ بيضاء واحدة بلا خطّ خارجي، والسعر مونو عند نهاية السطر؛ ثم «هكذا
   تصل العميل» نصّاً كما سيُرسل — المعاينة هي الوثيقة. */
.pr-bar { display: flex; margin-bottom: 14px; }
.pr-bar .btn, .pr-empty .btn { display: inline-flex; align-items: center; gap: 6px; }
.pr-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: 18px;
  max-width: 760px; }
.pr-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 60px;
  border-bottom: 1px solid var(--r-line); }
.pr-row:last-child { border-bottom: 0; }
.pr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-main b { font-size: .90625rem; font-weight: 600; }
.pr-main small { font-size: .78125rem; color: var(--text-soft); }
.pr-price { font-family: var(--font-mono); font-size: .875rem; font-weight: 600; white-space: nowrap;
  unicode-bidi: isolate; }
.pr-acts { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.pr-acts [data-up] svg { transform: rotate(90deg); }
.pr-text { font: inherit; font-size: .8125rem; font-weight: 600; color: var(--brand-ink); background: none;
  border: 0; padding: 10px 6px; min-height: 44px; cursor: pointer; }
.pr-text.danger { color: var(--danger-ink); }
.pr-text.wide { width: 100%; margin-top: 4px; }
.pr-preview { max-width: 760px; margin-top: 22px; }
.pr-preview h3 { font-size: .875rem; font-weight: 700; margin: 0 0 8px; }
.pr-preview pre { margin: 0; padding: 14px 16px; background: var(--surface-2); border-radius: 14px;
  font: inherit; font-size: .84375rem; line-height: 1.8; white-space: pre-wrap; }
.pr-preview small { display: block; margin-top: 8px; font-size: .78125rem; color: var(--text-soft); }
.pr-empty { max-width: 520px; margin: 32px auto; padding: 28px 22px; text-align: center; display: flex;
  flex-direction: column; align-items: center; gap: 10px; background: var(--surface); border-radius: 18px; }
.pr-empty b { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.4px; }
.pr-empty p { margin: 0; font-size: .875rem; line-height: 1.8; color: var(--text-soft); }
.pr-empty small { font-size: .78125rem; color: var(--text-soft); }

/* ── طلبا الموظف: تعديل البصمة وتبديل الدوام ────────────────────────────
   لوحٌ أبيض واحد لكل قسم: عنوانٌ وزرٌّ شبحي، ثم الطلبات سطراً سطراً بحالتها
   كلمةً على كبسولة. وما ينتظر جواباً (طلب زميل، أو قرار مدير) بطاقةٌ بفعلين:
   «أوافق» ممتلئة وحدها. */
.hrq { background: var(--surface); border-radius: 18px; padding: 14px 16px; margin: 0 0 14px; }
.hrq[hidden] { display: none; }
.hrq > .sub { margin: 4px 0 10px; }
.hrq-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; }
.hrq-head b { font-size: .9375rem; font-weight: 700; }
.hrq-list { list-style: none; margin: 0; padding: 0; }
.hrq-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; min-height: 52px;
  border-top: 1px solid var(--r-line); }
.hrq-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hrq-main b { font-size: .875rem; font-weight: 600; }
.hrq-main small { font-size: .78125rem; color: var(--text-soft); }
.hrq-chip { flex: none; font-size: .71875rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-soft); white-space: nowrap; }
.hrq-chip.ok { background: var(--brand-soft); color: var(--brand-ink); }
.hrq-chip.warn { background: var(--r-warn-wash); color: var(--r-warn-text); }
.hrq-chip.bad { background: var(--r-danger-wash); color: var(--danger-ink); }
:root[data-theme="dark"] .hrq-chip.warn { background: color-mix(in srgb, var(--warn) 15%, var(--surface));
  color: var(--warn-text); }
.hrq-ask { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  margin: 8px 0; border-radius: 14px; background: var(--surface-2); }
.hrq-ask p { flex: 1 1 260px; margin: 0; font-size: .875rem; line-height: 1.7; }
.hrq-ask small { display: block; font-size: .78125rem; color: var(--text-soft); }
.hrq-acts { display: inline-flex; gap: 8px; flex: none; }
.hrq-text { font: inherit; font-size: .8125rem; font-weight: 600; color: var(--danger-ink); background: none;
  border: 0; padding: 8px 4px; min-height: 40px; cursor: pointer; flex: none; }
.hrq-empty { margin: 0; font-size: .8125rem; line-height: 1.7; color: var(--text-soft); }
.hn-fix { display: block; margin: 10px auto 0; font: inherit; font-size: .8125rem; font-weight: 600;
  color: var(--brand-ink); background: none; border: 0; padding: 10px 6px; min-height: 44px; cursor: pointer; }
.hn-fix[hidden] { display: none; }
#sw-kinds { margin: 4px 0 14px; }

/* ═══ الترتيب الجديد: قائمة مسطّحة، تبويبات أعلى الصفحة، إعدادات واحدة ═══
   (قرار المالك ٤ تشرين الأول ٢٠٢٦، على طريقة Seler بهوية ربط.) */
@media (min-width: 1024px) {
  /* فاصلٌ رفيع بين خدمة العملاء والموارد البشرية، لا عنوان قسم. */
  .tabbar .rail-div { flex: none; height: 1px; margin: 10px 28px; background: var(--r-rail-line); }
  /* «الإعدادات» في القاع فوق من أنت؛ قاعدة القاع (‎margin-top:auto‎) تنتقل
     إليها فيلتصق الاثنان معاً. */
  .tabbar .rail-set { margin-top: auto; }
  .tabbar .rail-set + .rail-foot { margin-top: 8px; }
}

/* تبويبات الصفحة: نصٌّ وخطٌّ أخضر 2px تحت المفتوح — DESIGN.md «In-page
   tabs». الكبسولة المملوءة للأزرار وحدها. */
.subtabs { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--r-line); margin: 0 0 14px; }
.subtabs::-webkit-scrollbar { display: none; }
.subtab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--text-soft); background: none;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 2px;
  min-height: 44px; cursor: pointer; white-space: nowrap; }
.subtab:hover { color: var(--text); }
.subtab.on { color: var(--r-seal); border-bottom-color: var(--r-primary); cursor: default; }
:root[data-theme="dark"] .subtab.on { color: var(--brand-ink); }
.subtab:focus-visible { outline: 2px solid var(--r-primary); outline-offset: 2px; border-radius: 8px; }
.subtab .tab-badge { position: static; background: var(--r-danger-fill); color: #fff;
  font-family: var(--font-mono); font-size: .6875rem; border-radius: 999px; padding: 1px 6px; }
.subtab .tab-badge[hidden] { display: none; }
/* صفحةٌ شبكةٌ بعمودين (البصمة للموظف): الشريط سطرٌ كامل فوقها، لا خانةٌ
   تدفع البطاقة إلى العمود الآخر. */
.page > .subtabs { grid-column: 1 / -1; }

/* قائمة الإعدادات بجانب صفحةٍ منها: نفس هندسة صفحة الإعدادات (عمود 244
   وفجوة 22)، والصفحة كما هي في العمود الثاني. */
@media (min-width: 1024px) {
  /* وبعرضها كذلك (940، قاعدة «النماذج والقراءة» في styles.css): القائمة
     لا تقفز من مكانها بين صفحة الإعدادات وأخواتها. */
  .page.in-set.active { --page-max: 940px; display: grid;
    grid-template-columns: 244px minmax(0, 1fr); column-gap: 22px; align-items: start; }
  .page.in-set > * { grid-column: 2; min-width: 0; }
  .page.in-set > .set-float { grid-column: 1; grid-row: 1 / span 40; align-self: start; }
  /* صفحة الإعدادات نفسها بلا رأس على الشاشة العريضة: العنوان في الشريط
     العلوي، فتبدأ قائمتها من أعلى كما في أخواتها. */
  main .page[data-page="settings"] > .ph { display: none; }
}

/* ═══ تنسيق Seler بهوية ربط (قرار المالك ٤ تشرين الأول ٢٠٢٦) ════════════
   «سوّها بنفس التنسيق مالتهم بس بالهوية مالتنا، لأن شغلهم أرتب». قِستُ
   لوحتهم (dashboard.seler.app) وأخذتُ القواعد لا الشكل — الألوان والخطوط
   والشعار والكبسولات تبقى لربط:
   ١. الصفحة تبدأ بترويسة واحدة: عنوان، سطر يشرح، أفعالها بالطرف الآخر،
      وخطٌّ رفيع تحتها. بلا أيقونة ولا صندوق.
   ٢. الأقسام بلا صناديق: عنوانٌ وسطر، والفاصل بين قسمين خطٌّ ومسافة.
   ٣. الحقل عمودي: اسمه، ثم الشرح، ثم الحقل بعرضٍ مقروء — لا اسمٌ في
      طرف وحقلٌ ضيّق في الطرف الآخر.
   ٤. الأرقام صفٌّ واحد بفواصل رفيعة، لا بلاطات.
   ٥. الكثافة على الشاشة العريضة: حقل 40 وزرّ 38؛ الهاتف يبقى 44 للإبهام.
   الفواصل بـ«Line Strong» (‎--r-line-2‎): Seler يرسم خطّه على الأبيض، وخطّنا
   الأخفّ (‎--r-line‎) يذوب في الورق الدافئ فلا يُرى. */

/* ١ — ترويسة الصفحة */
.ph { align-items: flex-start; gap: 16px; padding-bottom: 20px; margin-bottom: 28px;
  border-bottom: 1px solid var(--r-line-2); }
.ph > .ph-icon { display: none; }
.ph-text h2 { font-size: 1.4375rem; font-weight: 700; line-height: 1.3; }
.ph-text p { margin-top: 6px; font-size: .84375rem; line-height: 1.7; color: var(--text-soft); max-width: 64ch; }
.ph-actions { margin-inline-start: auto; }
@media (min-width: 1024px) { .ph-actions { margin-inline-start: auto; } }
/* وتحتها تبويبات: خطّ التبويبات هو الفاصل، لا خطّان بينهما فراغ. */
.ph:has(+ .subtabs) { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }
.subtabs { margin-bottom: 24px; }

/* رأس قسم الإعدادات (settings.js `paneHead`) وصفحات الإعدادات القائمة
   بذاتها: العنوان يظهر هنا على الشاشة العريضة، والشريط العلوي يقول
   «الإعدادات» — كما يعرض Seler اسم القسم كبيراً بجانب قائمته. */
.pane-head { padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--r-line-2); }
.pane-head h2 { font-family: var(--font-display); font-size: 1.4375rem; font-weight: 700;
  letter-spacing: -.7px; line-height: 1.3; }
.pane-head p { margin-top: 6px; font-size: .84375rem; line-height: 1.7; color: var(--text-soft); max-width: 64ch; }
@media (min-width: 1024px) {
  main .page.in-set.active > .ph > .ph-text > h2 { display: block; }
}

/* ٢ — الأقسام بلا صناديق */
.set-card { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; }
.set-card + .set-card { border-top: 1px solid var(--r-line-2); margin-top: 28px; padding-top: 28px; }
.set-card > h4 { font-size: .9375rem; font-weight: 700; margin-bottom: 4px; }
.set-card > .set-note:first-of-type { margin-bottom: 18px; }
.set-note { font-size: .8125rem; line-height: 1.7; }
.set-row b { font-size: .84375rem; }
.set-row small { font-size: .8125rem; line-height: 1.6; }

/* ٣ — الحقل عمودي: اسمه وشرحه فوقه، وهو بعرضٍ مقروء. صفوف التبديل
   (مربّع اختيار) تبقى أفقية: اسمٌ يقابله مفتاح. `!important` وحدها هنا:
   الحقول تحمل `style="max-width:220px"` مكتوبة في القالب. */
label.set-row:has(> select, > input:not([type="checkbox"], [type="radio"]), > textarea) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start;
  border-bottom: 0; padding: 0 0 20px; }
label.set-row:has(> select, > input:not([type="checkbox"], [type="radio"]), > textarea)
  > :is(select, input, textarea) { width: 100%; max-width: 520px !important; }
label.set-row > div > br { display: none; }
label.set-row > div > small { margin-top: 2px; }

/* ٥ — الكثافة على الشاشة العريضة بفأرة. تخصيصٌ بوزن العنصر وحده
   (`:where`) فيغلب القاعدة الأساس ولا يغلب حقلاً له صنفه (البحث بأيقونة،
   مربع الكتابة في المحادثة). */
@media (min-width: 1024px) and (pointer: fine) {
  input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])),
  select, textarea {
    font-size: .875rem; padding: 8px 12px; min-height: 40px; background: var(--surface);
    border: 1px solid var(--r-line-3); border-radius: 12px; }
  textarea { padding: 10px 12px; }
  input:where(:not([type="checkbox"], [type="radio"])):hover, select:hover, textarea:hover {
    border-color: var(--r-ghost-line-hover, #C9CBC6); }
  .btn { min-height: 38px; padding: 8px 16px; font-size: .84375rem; }
}

/* ٤ — الأرقام صفٌّ واحد بفواصل رفيعة */
.stats { gap: 0; }
.stat { background: none; border: 0; border-radius: 0; text-align: start; padding: 2px 20px; }
.stat:first-child { padding-inline-start: 0; }
.stat + .stat { border-inline-start: 1px solid var(--r-line-2); }
.stat small { font-size: .8125rem; }
.stat strong { width: fit-content; font-family: var(--font-mono); font-size: 1.4375rem; font-weight: 600;
  margin: 6px 0 2px; }

/* الحالة الفارغة بمقاس Seler: دائرةٌ هادئة، عنوانٌ وسطر، وزرٌّ واحد. */
.es { padding: 56px 24px; gap: 6px; }
.es-art { width: 52px; height: 52px; margin-bottom: 10px; background: var(--r-bg-2); }
.es b { font-size: .9375rem; font-weight: 600; }
.es p { font-size: .84375rem; max-width: 38ch; }

/* قائمة الإعدادات: عمودٌ بخطٍّ رفيع يفصله عن المحتوى، وبنودٌ هادئة بارتفاع
   36. المفتوح يبقى بغسلة الورقة وختم ربط. */
@media (min-width: 1024px) {
  .set-shell { gap: 28px; }
  .page.in-set.active { column-gap: 28px; }
  .set-nav { position: sticky; top: 76px; padding-inline-end: 18px;
    border-inline-end: 1px solid var(--r-line-2); min-height: calc(100dvh - 140px); }
  .set-nav .nav-group { margin-top: 22px; }
  .set-nav .nav-group:first-child { margin-top: 0; }
  .set-nav .nav-group > h5 { font-size: .71875rem; font-weight: 600; letter-spacing: 0;
    color: var(--text-soft); margin-bottom: 4px; padding: 0 10px; }
  .set-nav button { min-height: 36px; padding: 7px 10px; margin-bottom: 1px; border-radius: 12px;
    font-size: .84375rem; font-weight: 500; color: var(--r-ink-2); }
  .set-nav button.on { background: var(--brand-soft); color: var(--r-seal); font-weight: 600; }
  :root[data-theme="dark"] .set-nav button.on { color: var(--brand-ink); }
}

/* صفحات الإعدادات القائمة بذاتها على نفس القاعدة: بطاقاتها أقسام بلا
   صناديق، وقوائمها صفوفٌ يفصلها خطٌّ رفيع لا بطاقاتٌ متراصّة — كما يعرض
   Seler أعضاءه. و«يحتاج قرارك» شأن الإدارة اليومي، لا مكانه بين الإعدادات. */
.page.in-set #admin-queue { display: none; }
.page.in-set :is(.bot-card, .pm-card, .card.inline-form) {
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.page.in-set :is(.bot-card, .pm-card) + :is(.bot-card, .pm-card) {
  border-top: 1px solid var(--r-line-2); margin-top: 28px; padding-top: 28px; }
.page.in-set :is(.tm-table, .list) { gap: 0; display: flex; flex-direction: column;
  border-top: 1px solid var(--r-line-2); }
.page.in-set :is(.tm-table > .tm-row, .list > .item) {
  background: none; border: 0; border-bottom: 1px solid var(--r-line-2); border-radius: 0;
  padding: 14px 4px; margin: 0; }
/* رأس الجدول يبدأ حيث تبدأ الصفوف: كان بحشوة 17px لصفوف البطاقات، والصفوف هنا
   بحشوة 4px — فانزاح كل عنوان 13px عن عموده (٥ تشرين الأول). */
.page.in-set .tm-thead { padding-inline: 4px; }
.page.in-set .card.inline-form { display: flex; gap: 10px; margin-bottom: 18px; }
.page.in-set .card.inline-form > input { flex: 1; max-width: 420px; }

/* التقارير على نفس القاعدة: شريط الفترة رأسٌ بخطٍّ تحته لا صندوق، والأرقام
   الستّة صفٌّ بفواصل، واللوحات أقسامٌ بلا إطار. ويسقط شريط «الدَّين» الملوّن
   على حرف البطاقة (حافةٌ ملوّنة أعرض من 1px ممنوعة): الرقم الأحمر يكفي. */
.ra-bar { background: none; min-height: 0; padding: 0 0 20px; border-bottom: 1px solid var(--r-line-2); }
/* الفترة المختارة غسلةٌ بحبر الختم كشرائح التصفية كلها (٥ تشرين الأول)، لا ختمٌ ممتلئ. */
.ra-pill.on { background: var(--brand-soft); color: var(--brand-ink); border-color: transparent; }
.ra-body { padding: 24px 0 0; gap: 32px; }
.ra-nums { gap: 0; }
.ra-num { background: none; border: 0; border-radius: 0; padding: 2px 20px; }
.ra-num:first-child { padding-inline-start: 0; }
.ra-num + .ra-num { border-inline-start: 1px solid var(--r-line-2); }
.ra-num.debt::before { content: none; }
.ra-num.solid { padding: 16px 18px; border-radius: 14px; border: 0; }
.ra-panel { background: none; border: 0; border-radius: 0; padding: 0; }
@media (max-width: 1280px) {
  .ra-six { row-gap: 20px; }
  .ra-six > .ra-num:nth-child(3n+1) { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 720px) {
  .ra-six > .ra-num { border-inline-start: 0; padding-inline-start: 0; }
}

/* القوائم صفوفٌ يفصلها خطٌّ رفيع، لا بطاقاتٌ متراصّة بفجوات — في كل
   التطبيق، كما يعرض Seler عملاءه وأعضاءه. الصفّ الذي يُفتح يضيء بالمرور. */
.list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--r-line-2); }
.list > .item { background: none; border: 0; border-bottom: 1px solid var(--r-line-2);
  border-radius: 0; padding: 14px 4px; box-shadow: none; }
.list > .item.tappable { cursor: pointer; }
@media (hover: hover) { .list > .item.tappable:hover { background: var(--r-bg-2); } }

/* زرّ «إضافة» بعرض الصفحة كان شريطاً أخضر يقطع الشاشة؛ على العريضة يأخذ
   حجمه ويقف في طرف الصفحة الآخر كما يقف «استيراد» في Seler. */
@media (min-width: 1024px) {
  /* ‎:not([hidden])‎: ‎display:flex‎ يغلب إخفاء المتصفح فيظهر الزرّ المخفي. */
  :is(.page, .admin-pane) > .btn.wide:not([hidden]) { width: auto; display: flex; margin-inline-start: auto; }
}
.card { border-color: var(--r-line-2); }
.subtabs { border-bottom-color: var(--r-line-2); }

/* الموافقات: القائمة كانت شبكة أعمدة، فصارت شرائح الفلتر خانةً منها تمتدّ
   بطول أطول طلب (158px كبسولة واقفة). صارت صفوفاً كأخواتها، والشرائح سطرٌ فوقها. */
@media (min-width: 1024px) { #appr-list { display: flex; flex-direction: column; gap: 0; } }
#appr-list > .appr-chips { margin-bottom: 14px; align-items: center; }
#appr-list > .item { background: none; border: 0; border-bottom: 1px solid var(--r-line-2);
  border-radius: 0; padding: 14px 4px; box-shadow: none; }
#appr-list > .appr-chips + .item { border-top: 1px solid var(--r-line-2); }

/* أقسام الإدارة التي تسكن الإعدادات (الأقسام، الإجازات الرسمية): رأسها باسم
   القسم وخطٌّ تحته، كأخواتها. */
.page.in-set > .page-head { align-items: flex-start; padding-bottom: 20px; margin-bottom: 28px;
  border-bottom: 1px solid var(--r-line-2); }
.page.in-set > .page-head > .btn { margin-inline-start: auto; }
/* «إضافة» العامة (موظف، سلفة، عطلة…) تكرّر زرّ القسم نفسه هنا. */
.page.in-set > .page-head > #btn-add { display: none; }
@media (min-width: 1024px) {
  main .page.in-set.active > .page-head > h2 { display: block; font-size: 1.4375rem; line-height: 1.3; }
}

/* ═══ القنوات على طريقة Seler (٤ تشرين الأول ٢٠٢٦) ═══════════════════
   أقسامٌ بطريقة الربط: عنوانٌ صغير وسطرٌ يشرح الطريقة، ثم صفوفٌ بارتفاع 72
   يفصلها خطٌّ رفيع، ثم زرٌّ واحد بإطار. العلامة بلون منصّتها على مربّعٍ
   هادئ، والحالة كلمةٌ في الطرف (ملوّنة بنقطة متى كانت حيّة). */
.chx-sec { padding-bottom: 40px; }
.chx-sec > h5 { font-size: .75rem; font-weight: 600; color: var(--text-soft); margin: 0 0 12px; }
.chx-rows { border-top: 1px solid var(--r-line-2); }
.chx-row { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 2px;
  border-bottom: 1px solid var(--r-line-2); }
.chx-ic.prov-logo { flex: none; width: 36px; height: 36px; border-radius: 8px; display: grid;
  place-items: center; background: var(--r-bg-2); }
:root[data-theme="dark"] .chx-ic.prov-logo { background: var(--r-line); }
.chx-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chx-t b { font-size: .875rem; font-weight: 600; }
.chx-t small { font-size: .8125rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.chx-state { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem;
  color: var(--text-soft); white-space: nowrap; }
.chx-state:is(.chx-ok, .chx-warn, .chx-down)::before { content: ""; width: 7px; height: 7px;
  border-radius: 50%; background: currentColor; }
.chx-state.chx-ok { color: var(--r-seal); }
:root[data-theme="dark"] .chx-state.chx-ok { color: var(--brand-ink); }
.chx-state.chx-warn { color: var(--r-warn-text); }
.chx-state.chx-down { color: var(--danger-ink); }
.chx-act { flex: none; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--r-seal);
  background: none; border: 0; padding: 8px 6px; min-height: 40px; cursor: pointer; }
:root[data-theme="dark"] .chx-act { color: var(--brand-ink); }
.chx-act:hover { text-decoration: underline; text-underline-offset: 3px; }
/* علامة الحال: دائرة 22 مملوءة — صحٌّ أبيض على الختم، وتعجّبٌ على العنبر
   (تحتاج معالجة) أو الأحمر (متوقفة). تعجّب العنبر بحبر الفحم الثابت لا
   بالأبيض: الأبيض عليه 3.0:1 والفحم 5.3:1، في النهار والليل. */
.st-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid;
  place-items: center; color: #fff; cursor: default; }
.st-mark.ok { background: var(--r-seal); }
.st-mark.warn { background: var(--r-warn); color: var(--r-ink-fixed); }
.st-mark.down { background: var(--r-danger-fill); }
.chx-go { flex: none; min-height: 34px; padding: 6px 14px; font-size: .8125rem; }

/* قوالب WhatsApp: شريط الحالات بأعدادها، و«تحديث الحالات» و«قالب جديد» في طرفه. */
.tpl-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.tpl-bar .tb-seg .mono { margin-inline-start: 4px; color: var(--text-soft); }
.tpl-bar #tpl-refresh { margin-inline-start: auto; }
.tpl-bar #tpl-new { display: inline-flex; align-items: center; gap: 6px; }
.tpl-row { align-items: flex-start; }
.tpl-row .tpl-body { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; }
@media (max-width: 560px) {
  .chx-row { flex-wrap: wrap; }
  .chx-row .chx-t { flex-basis: calc(100% - 60px); }
  .chx-row .chx-state { margin-inline-start: 48px; }
  .tpl-bar #tpl-refresh { margin-inline-start: 0; }
}
/* إدارة قناة، والحالات الفارغة، وبقية الألواح (Meta، المفاتيح، السجل) داخل
   أقسام القنوات: أقسامٌ بلا صناديق كبقية الإعدادات، و«‹ كل القنوات» رابطٌ
   نصّي لا زرّ. */
.chx .card { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.chx .chan-main > .card + .card, .chx .chan-side > .card + .card,
.chx .chan-pane > .card + .card, .chx .chan-main > section + section {
  border-top: 1px solid var(--r-line-2); margin-top: 24px; padding-top: 24px; }
.chx .card > h5 { font-size: .9375rem; font-weight: 700; margin-bottom: 10px; }
.chx .chan-cols { gap: 40px; }
.chx .chan-back { background: none; border: 0; padding: 6px 0; min-height: 36px; color: var(--r-seal);
  font-weight: 600; margin-bottom: 18px; }
:root[data-theme="dark"] .chx .chan-back { color: var(--brand-ink); }
.chx .es-card { text-align: center; padding: 48px 16px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; }
.chx .es-card .toolbar { justify-content: center; margin-top: 10px; }
/* الكود داخل عمودٍ ضيّق يتمرّر في مكانه: البطاقة كانت تقصّه، وبعد تسطيحها
   صار يطفح على العمود المجاور. */
.chx .chan-main, .chx .chan-side { min-width: 0; }
.chx :is(pre.code-block, .int-code pre) { max-width: 100%; overflow-x: auto; background: var(--r-bg-2);
  border-radius: 12px; padding: 12px 14px; font-size: .8125rem; line-height: 1.7; }

/* ═══ بقية صفحات الإعدادات بقاعدة القنوات (٤ تشرين الأول ٢٠٢٦) ══════════ */
.st-mark { cursor: default; }

/* الإعداد الأول: صفوفٌ بخطٍّ رفيع لا بطاقات، والمنتهية علامة صحٍّ خضراء مكان
   رقمها — لا تعبئة خضراء للصفّ كلّه ولا كلمة «تمّ». */
.su-bar { background: none; border: 0; border-radius: 0; padding: 0; margin-bottom: 18px; }
.su-steps { border-top: 1px solid var(--r-line-2); }
.su-step, .su-step.done { background: none; border: 0; border-bottom: 1px solid var(--r-line-2);
  border-radius: 0; margin: 0; padding: 14px 2px; min-height: 72px; align-items: center; }
.su-step > .st-mark { width: 27px; height: 27px; }
.su-step .su-go { flex: none; }
.su-detail { color: var(--text-soft); font-weight: 400; }

/* بطاقات الأرقام (الصلاحيات، الرواتب): صفٌّ واحد بفواصل رفيعة، كأرقام Seler. */
.pay-stats { gap: 0; }
.pay-stat { background: none; border: 0; border-radius: 0; padding: 2px 20px; }
.pay-stat:first-child { padding-inline-start: 0; }
.pay-stat + .pay-stat { border-inline-start: 1px solid var(--r-line-2); }
.pay-stat small { font-size: .8125rem; font-weight: 500; }
.pay-stat b { width: fit-content; font-family: var(--font-mono); font-size: 1.4375rem; }

/* مستويات الصلاحية: سطرٌ بأرقامه لا ثلاث بلاطات رمادية. */
.pm-levels { gap: 0; }
.pm-level { background: none; border: 0; border-radius: 0; padding: 4px 16px; }
.pm-level:first-child { padding-inline-start: 0; }
.pm-level + .pm-level { border-inline-start: 1px solid var(--r-line-2); }
.pg-empty { border: 0; border-top: 1px solid var(--r-line-2); border-radius: 0; padding: 20px 2px; }

/* الأقسام بلا صلاحيات خاصة: الحال العادي، فكلمةٌ هادئة. */
.gc-plain { font-size: .8125rem; color: var(--text-soft); }

/* قائمة الأسعار ورموز راسلنا: صفوفٌ بخطٍّ رفيع على الورق، لا صناديق بيضاء. */
.pr-list { background: none; border-radius: 0; border-top: 1px solid var(--r-line-2); }
.pr-row { border-bottom-color: var(--r-line-2); padding: 12px 2px; min-height: 64px; }
.pr-row:last-child { border-bottom: 1px solid var(--r-line-2); }
.qp-grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--r-line-2); }
.qp-card { background: none; border-radius: 0; padding: 18px 2px; border-bottom: 1px solid var(--r-line-2); }
.qp-art { width: 104px; height: 104px; }

/* ═══ الموارد البشرية بقاعدة القنوات (٤ تشرين الأول ٢٠٢٦) ══════════════ */
/* «يحتاج قرارك» مكانه «الآن»: كان يتكرّر فوق كل أقسام الإدارة، وفي
   الموافقات نفسها فوق نفس الطلبات المدرجة تحته. */
.page[data-page="admin"] #admin-queue { display: none; }

/* سطور الأرقام (الموظفون، السجل، السلف): صفٌّ بفواصل لا صندوق أبيض. */
.summary { background: none; border: 0; border-radius: 0; padding: 0; gap: 0; margin-bottom: 18px; }
/* ‎:is(.sum-go, div)‎ لا ‎*‎: أزرار الأرقام عندها قاعدة ‎.summary .sum-go‎ تصفّر حشوتها. */
.summary > :is(.sum-go, div) { padding: 2px 20px; }
.summary > :is(.sum-go, div):first-child { padding-inline-start: 0; }
.summary > * + :is(.sum-go, div) { border-inline-start: 1px solid var(--r-line-2); }
.summary b { width: fit-content; font-family: var(--font-mono); font-size: 1.4375rem; }

/* الموظفون صفوفٌ كأعضاء Seler: بطاقة كل موظف صارت سطراً بخطٍّ رفيع. */
.emp-cards { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--r-line-2); }
.emp-card { background: none; border: 0; border-bottom: 1px solid var(--r-line-2); border-radius: 0;
  padding: 12px 4px; min-height: 68px; }
.emp-card:hover { border-color: var(--r-line-2); background: var(--r-bg-2); }
.emp-group-note { display: none; }

/* «الحضور» للمدير: بطاقات الأرقام صفٌّ واحد بفواصل، واللوحات أقسامٌ بلا صناديق. */
.ah-hero { gap: 0; }
.ah-now, .ah-money { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 2px 20px; }
.ah-hero > :first-child { padding-inline-start: 0; }
.ah-hero > * + * { border-inline-start: 1px solid var(--r-line-2); }
.rep-tiles { gap: 0; margin-top: 18px; }
.rep-tile, .rep-tile.warn, .rep-tile.ok { background: none; border: 0; border-radius: 0; padding: 2px 20px; }
.rep-tiles > :first-child { padding-inline-start: 0; }
.rep-tiles > * + * { border-inline-start: 1px solid var(--r-line-2); }
.rep-tile b { font-family: var(--font-mono); }
/* ‎!important‎ على الهامش وحده: القالب يكتب ‎style="margin-top:14px"‎ على كل لوح. */
.page[data-page="home"] .rep-card, .page[data-page="home"] .money-card {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  margin-top: 28px !important; padding-top: 28px; border-top: 1px solid var(--r-line-2); }

/* الإجازات: النموذج والرصيد وتبديل الدوام أقسامٌ بلا صناديق. */
.hl-form.card, .hl-balance.card { background: none; border: 0; border-radius: 0; box-shadow: none; }
.hl-balance.card { padding: 0 0 0 0; }
.hl-form.card { padding: 0; }
.hl-grid { border-top: 1px solid var(--r-line-2); padding-top: 28px; margin-top: 16px; }
/* «تبديل الدوام مع زميل» و«تعديل البصمة»: قسمٌ بخطٍّ فوقه لا بطاقة، وطلباته
   صفوفٌ لا مربّعات رمادية. */
.hrq { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 24px 0 0;
  margin-top: 28px; border-top: 1px solid var(--r-line-2); }
.hrq-ask { background: none; border-radius: 0; margin: 0; padding: 14px 2px;
  border-bottom: 1px solid var(--r-line-2); }
/* السجل: «تعديل البصمة» أول ما تحت التبويبات، فلا خطّ ثانٍ فوقه. */
.page[data-page="attendance"] .hrq { border-top: 0; margin-top: 0; padding-top: 0; }

/* ═══ التعليقات بقاعدة القنوات (٤ تشرين الأول ٢٠٢٦) ═══════════════════
   التعليق صفٌّ بخطٍّ رفيع لا بطاقة، والجديد تعرفه بدائرة اسمه الخضراء (لا
   حافةٌ ملوّنة بـ3px — ممنوعة)، وأفعاله الثلاثة كلماتٌ لا ثلاثة أزرار بإطار. */
.cmt { background: none; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--r-line-2); padding: 16px 2px; margin: 0; }
.cmt-new { border-inline-start: 0; }
.cmt-new .cmt-av { background: var(--brand-soft); color: var(--r-seal); }
.cmt-acts { gap: 16px; }
.cmt-acts .btn-ghost { background: none; border: 0; border-radius: 0; padding: 6px 0;
  min-height: 32px; color: var(--r-seal); font-weight: 600; }
.cmt-acts .btn-ghost[data-hide] { color: var(--text-soft); }
:root[data-theme="dark"] .cmt-acts .btn-ghost { color: var(--brand-ink); }
.cmt-head-card.card { background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0 0 18px; border-bottom: 1px solid var(--r-line-2); }
.cmt-reply > .card:not(.cmt-reply-card) { background: none; border: 0; border-radius: 0;
  box-shadow: none; padding: 18px 2px 0; }

/* الهاتف: صفوف الأرقام تنطوي، والفاصل الرفيع يقع في أول السطر الثاني فيبدو
   خطّاً تائهاً. تصير شبكة عمودين بفراغ لا بخطوط. */
@media (max-width: 560px) {
  .summary, .pay-stats, .ah-hero, .rep-tiles { display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .summary > :is(.sum-go, div), .summary > * + :is(.sum-go, div),
  .pay-stat, .pay-stat + .pay-stat,
  .ah-hero > *, .ah-hero > * + *,
  .rep-tiles > *, .rep-tiles > * + * { border-inline-start: 0; padding-inline-start: 0; }
  /* بطاقتا «الحضور» الكبيرتان رقمٌ واسمه بسطر: كلٌّ منهما بعرض الهاتف. */
  .ah-hero { grid-template-columns: minmax(0, 1fr); }
}
/* عدّاد أرقام QR بجانب عنوان قسمها: «١ من ٣» حسب الباقة. */
.chx-count { margin-inline-start: 8px; font-size: .75rem; font-weight: 500; color: var(--text-soft); }

/* ── تصنيفات العملاء (tags.js) ───────────────────────────────
   كبسولة محايدة ونقطة لون: الواجهة شبه بلا لون وصوتها الأخضر واحد،
   والنقطة علامةٌ بلا نص فيجوز لها اللون. ليلاً تفتح النقاط لأنها حبر. */
:root {
  --tg-blue: #3E63C8; --tg-green: #17A05F; --tg-amber: #B8862B; --tg-purple: #6A55E0;
  --tg-teal: #1B87BA; --tg-pink: #C13584; --tg-red: #C2452F; --tg-gray: #A7ACA5;
}
:root[data-theme="dark"], html.dark, body.dark {
  --tg-blue: #6E90E0; --tg-green: #3DD68C; --tg-amber: #E0B75A; --tg-purple: #9C8CF2;
  --tg-teal: #4FB3E0; --tg-pink: #E46BB0; --tg-red: #FF6B5E; --tg-gray: #A0A6B0;
}
.tg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--tg-gray); }
.tg-dot.c-blue { background: var(--tg-blue); }
.tg-dot.c-green { background: var(--tg-green); }
.tg-dot.c-amber { background: var(--tg-amber); }
.tg-dot.c-purple { background: var(--tg-purple); }
.tg-dot.c-teal { background: var(--tg-teal); }
.tg-dot.c-pink { background: var(--tg-pink); }
.tg-dot.c-red { background: var(--tg-red); }

.tg-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font-size: .78125rem; font-weight: 600; line-height: 1.2; padding: 5px 10px;
  border-radius: 999px; background: var(--surface-2); color: var(--text); }
.tg-pill > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ليلاً على Night Line كالصور الرمزية — Night Surface يبتلعها. */
:root[data-theme="dark"] .tg-pill { background: var(--r-line); }
.tg-pill.more { color: var(--text-soft); font-family: var(--font-mono); direction: ltr;
  unicode-bidi: isolate; }
.chat-pill.tg { display: inline-flex; align-items: center; gap: 5px; max-width: 12em;
  color: var(--text); }
.chat-pill.tg > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* وضعها ورفعها: كبسولات بزرّ ×، وزرّ «+ تصنيف» بإطار متقطّع يفتح خانة بحث. */
.tg-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tg-x { display: grid; place-items: center; width: 20px; height: 20px; margin-inline-end: -5px;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-soft);
  cursor: pointer; }
.tg-x:hover { background: var(--r-line); color: var(--text); }
.tg-add { display: inline-flex; align-items: center; gap: 4px; min-height: 28px;
  padding: 4px 11px; border: 1px dashed var(--r-ghost-line-hover); border-radius: 999px;
  background: none; font: inherit; font-size: .78125rem; font-weight: 600;
  color: var(--text-soft); cursor: pointer; }
.tg-add:hover { border-color: var(--text-soft); color: var(--text); }
.tg-pick { margin-top: 8px; border: 1px solid var(--r-line-2); border-radius: 12px;
  background: var(--surface); overflow: hidden; }
.tg-input { display: block; width: 100%; padding: 10px 12px; border: 0;
  border-bottom: 1px solid var(--r-line-2); background: transparent; font: inherit;
  font-size: 1rem; color: var(--text); }
/* الحلقة على الصندوق كله لا على الخانة وحدها — مثل خانة البحث بالطابور. */
.tg-pick .tg-input, .tg-pick .tg-input:focus { height: auto; border: 0;
  border-bottom: 1px solid var(--r-line-2); border-radius: 0; box-shadow: none;
  outline: none; background: transparent; }
.tg-pick:focus-within { border-color: var(--r-primary);
  box-shadow: 0 0 0 3px rgba(23,160,95,.22); }
.tg-menu { max-height: 248px; overflow-y: auto; padding: 4px; }
.tg-opt { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit;
  font-size: .84375rem; color: var(--text); text-align: start; cursor: pointer; }
.tg-opt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-opt small { margin-inline-start: auto; font-family: var(--font-mono); font-size: .71875rem;
  color: var(--text-soft); direction: ltr; unicode-bidi: isolate; }
.tg-opt.hi, .tg-opt:hover { background: var(--surface-2); }
.tg-opt.new { color: var(--r-seal); font-weight: 600; }
:root[data-theme="dark"] .tg-opt.new { color: var(--brand-ink); }
.tg-empty { padding: 10px; font-size: .78125rem; color: var(--text-soft); }

/* ملف العميل وورقة «بيانات المحادثة» */
.cp-tagsec { padding-top: 12px; }
.cm-tags { margin-bottom: 14px; }
.cm-tags > span { display: block; margin-bottom: 6px; }

/* شرائح التصفية ودليل العملاء */
.chipbtn.tg-chip { display: inline-flex; align-items: center; gap: 6px; }
.chipbtn.tg-chip.active .tg-dot { outline: 0; }
.cust-name .tg-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cust-name .tg-pill { font-size: .71875rem; padding: 3px 8px; }

/* صفحة الإدارة: صفوف بخطّ رفيع لا بطاقات (تنسيق الإعدادات). */
.tg-new { display: flex; gap: 8px; margin-bottom: 18px; max-width: 520px; }
.tg-new input { flex: 1; min-width: 0; }
.tg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--r-line-2); }
.tg-swatch { display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 1px solid var(--r-ghost-line); border-radius: 50%; background: var(--surface);
  cursor: pointer; }
.tg-swatch:hover { border-color: var(--r-ghost-line-hover); }
.tg-swatch .tg-dot { width: 12px; height: 12px; }
.tg-name { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid transparent;
  border-radius: 8px; background: none; font: inherit; font-size: 1rem; font-weight: 600;
  color: var(--text); }
.tg-name:hover { border-color: var(--r-ghost-line); }
.tg-name:focus { border-color: var(--r-primary); outline: none; }
.tg-count { font-size: .78125rem; color: var(--text-soft); white-space: nowrap; }
.tg-palette { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%;
  padding: 2px 0 4px; padding-inline-start: 42px; }
.tg-palette[hidden] { display: none; }
.tg-palette button { display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--r-ghost-line); border-radius: 50%; background: var(--surface);
  cursor: pointer; }
.tg-palette button[aria-pressed="true"] { border: 2px solid var(--text); }
.tg-palette .tg-dot { width: 14px; height: 14px; }
.tg-none { padding: 14px 2px; font-size: .8125rem; color: var(--text-soft); }

/* ═══ الإعدادات، الجولة الثانية (٤ تشرين الأول ٢٠٢٦) ═════════════════ */

/* اسم الشركة للقراءة: يُكتب عند الإنشاء ولا يتغيّر — حقلٌ بلون الورق
   الثاني بلا حلقة تركيز، فلا يُظن أنه يُكتب فيه. */
input.org-fixed, input.org-fixed:focus { background: var(--r-bg-2); color: var(--text-soft);
  border-color: transparent; box-shadow: none; cursor: default; }

/* المنطقة الزمنية: ثلاث صفوف اختيار لا قائمة منسدلة. المدن، والساعة الآن
   هناك، والفرق عن غرينتش صغيراً بالطرف. المختار بحدّ الختم. */
.set-row.tz-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  align-items: start; border-bottom: 0; padding: 0 0 20px; }
.set-row.tz-set > div > br { display: none; }
.set-row.tz-set > div > small { display: block; margin-top: 2px; }
.tz-pick { display: grid; gap: 6px; max-width: 520px; }
.tz-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--r-line-2); border-radius: 12px; background: var(--surface);
  color: var(--text); cursor: pointer; }
.tz-opt:hover { border-color: var(--r-ghost-line-hover); }
.tz-opt:has(input:checked) { border-color: var(--r-seal); box-shadow: inset 0 0 0 1px var(--r-seal); }
.tz-opt:has(input:focus-visible) { outline: 2px solid var(--r-primary); outline-offset: 2px; }
/* `input { width: 100% }` العامة تمدّ الدائرة على عرض الصفّ — حجمها صريح. */
.tz-opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--r-seal); }
.tz-city { flex: 1; min-width: 0; font-size: .875rem; font-weight: 600; }
.tz-now { flex: none; font-size: .8125rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.tz-off { flex: none; min-width: 34px; text-align: center; font-family: var(--font-mono);
  font-size: .75rem; color: var(--text-soft); background: var(--r-bg-2); border-radius: 999px;
  padding: 2px 8px; }
:root[data-theme="dark"] .tz-off { background: var(--r-line); }

/* الباقات بالسنوي: سعر الشهر كبيراً، وتحته ما يُدفع مرة وما يُوفَّر. */
.pc-bill { font-size: .75rem; color: var(--text-soft); margin-top: -2px; }

/* الويبهوك والمفاتيح: عمودٌ واحد بأربعة أقسام (عنوانٌ وسطرٌ وأفعالٌ بالطرف،
   ثم صفوف القنوات نفسها). */
.kx { max-width: 760px; }
.kx-sec + .kx-sec { margin-top: 36px; }
.kx-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kx-head > div:first-child { flex: 1 1 260px; min-width: 0; }
.kx-head h5 { margin: 0; font-size: .9375rem; font-weight: 700; }
.kx-head small { display: block; margin-top: 4px; font-size: .8125rem; line-height: 1.7;
  color: var(--text-soft); }
.kx-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.kx .chx-row { min-height: 60px; }
.kx .chx-t small.kx-wrap { white-space: normal; }
.kx .kx-url { text-align: end; }
.kx-used { flex: none; font-size: .78125rem; color: var(--text-soft); white-space: nowrap; }
.kx .chx-act.kx-del { color: var(--danger-ink); }
.kx pre.code-block { margin: 14px 0 6px; }
.kx .kx-doc { display: inline-block; padding-inline: 0; text-decoration: none; }
.kx-foot { margin-top: 10px; }
@media (max-width: 560px) {
  .kx .chx-row .kx-used { margin-inline-start: 0; flex-basis: 100%; order: 3; }
}

/* «تصنيفات العملاء» صفحةٌ بذاتها في خدمة العملاء: كانت تسكن عمود الإعدادات
   (٥٢٠)، وعلى عرض الصفحة كله يبتعد الاسم عن عدده وزرّ حذفه نصف شاشة. */
#tags-body { max-width: 720px; }

/* ── الإعدادات على الهاتف: فهرسٌ ثم قسم (تدقيق ٤ تشرين الأول ٢٠٢٦) ─────
   كانت شريطاً أفقياً بسبعة عشر بنداً يظهر منها أربعة، والمفتوح خارج الشاشة.
   الفهرس صفوف «المزيد» نفسها بعناوين مجموعاتها، والقسم يفتح وحده وفوقه
   رجوعٌ إلى الفهرس (settings.js `paintSettings`). */
@media (max-width: 860px) {
  .set-shell[data-mode="list"] .set-pane,
  .set-shell[data-mode="detail"] .set-nav { display: none; }
  .set-shell[data-mode="list"] .set-nav { display: block; overflow: visible; padding: 0; }
  .page.set-detail > .ph, .page.set-quiet > .ph { display: none; }
  .set-nav .more-row { width: 100%; min-height: 56px; margin: 0; padding: 10px 16px;
    border-radius: 0; border-top: 1px solid var(--border); white-space: normal;
    font-size: 1rem; font-weight: 400; color: var(--text); }
  .set-nav .more-row:first-child { border-top: 0; }
  .set-nav .more-row:hover { background: var(--surface-2); color: var(--text); }
  .set-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
    margin: -8px -6px 4px; padding: 0 6px; border: 0; border-radius: 12px; background: none;
    font: inherit; font-size: .875rem; font-weight: 600; color: var(--r-seal); cursor: pointer; }
  .set-back:active { background: var(--surface-2); }
  :root[data-theme="dark"] .set-back { color: var(--brand-ink); }
}

/* ── الحقول بحسب DESIGN.md على الهاتف واللمس (تدقيق ٤ تشرين الأول) ──────
   كانت الحقل الأساس الموروث: غسلة ورقٍ رمادية بإطارٍ #EFF0ED لا يُرى، فالحقل
   الفارغ بقعةٌ باهتة على الورق. الآن كما على الشاشة العريضة: سطحٌ أبيض وخطّ
   الحقل، وزوايا 14. الحقول ذات الصنف (البحث بأيقونة، مربع الكتابة) لها قواعدها. */
@media (max-width: 1023px), (pointer: coarse) {
  input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])),
  select, textarea {
    background: var(--surface); border: 1px solid var(--r-line-3); border-radius: 14px; }
}

/* ── قائمة الإعدادات في مكانٍ واحد (المالك، ٥ تشرين الأول ٢٠٢٦: «القائمة تكمز
   من مكان إلى مكان») ──────────────────────────────────────────────────────
   كانت الصفحة تتوسّط مساحتها، وعرضها يتبع القسم (النماذج 940، القنوات 1440)،
   فتقفز القائمة 110px يميناً ويساراً بين «بيانات الشركة» و«القنوات»؛ وكانت أطول
   من الشاشة بست نقاط فتنزلق مع أي تمرير. الآن كل صفحات الإعدادات تبدأ من بداية
   السطر (اليمين)، والقائمة لاصقة عند موضعها نفسه فلا تتحرّك حتى مع التمرير. */
@media (min-width: 1024px) {
  .page[data-page="settings"].active, .page.in-set.active {
    margin-inline-start: 0; margin-inline-end: auto; }
  /* 87 = الشريط العلوي (63) + هامش المحتوى (24): موضع القائمة وهي ساكنة،
     فلا تتحرّك نقطةً حين تلصق. */
  .set-nav { top: 87px; min-height: calc(100dvh - 160px); }
  /* والقائمة تتمرّر وحدها (المالك بفيديو، ٥ تشرين الأول): عشرون بنداً أطول من
     شاشة لابتوب، فكانت تنزل مع الصفحة — ثم يعيد كل ضغطٍ الصفحةَ إلى أعلاها،
     فيختفي البند المضغوط تحت الحافة ويُعاد التمرير له قبل كل ضغطة. الآن
     ارتفاعها ما بقي من الشاشة، وما زاد يتمرّر داخلها ولا يتحرّك مع الصفحة. */
  .set-nav { max-height: calc(100dvh - 103px); overflow-y: auto;
    overscroll-behavior: contain; scrollbar-width: thin;
    scrollbar-color: var(--r-line-3) transparent; }
  /* والقائمة لا تدخل مع صفحتها: الفريق والأقسام والإعداد الأول صفحاتٌ أخرى،
     وحركة دخول الصفحة (ست نقاط وشفافية) كانت تحرّك القائمة معها في كل
     انتقالٍ بينها وبين بقية الإعدادات. الحركة للمحتوى وحده. */
  .page[data-page="settings"].active, .page.in-set.active { animation: none; }
  #set-pane, .page.in-set.active > :not(.set-float) { animation: fade .18s ease; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  #set-pane, .page.in-set.active > :not(.set-float) { animation: none; }
}

/* ── فترات التقرير (المالك، ٥ تشرين الأول ٢٠٢٦) ──────────────────────
   الحبّات بخطّ التطبيق: كانت بخطّ الزرّ الافتراضي من المتصفح لا بـ Plex. واللوح
   ينتظر بارتفاعه نفسه وبهدوء بدل أن يُمسح، و«مدة مخصصة» تفتح سطر تاريخين. */
.ra-pill { font-family: inherit; min-height: 36px; transition: background-color .15s ease, color .15s ease; }
.ra-pill:not(.on):not(.ra-custom):hover { background: var(--r-line); }
.ra-pill.ra-custom[aria-expanded="true"] { border-color: var(--r-ink-2); color: var(--text); }
.ra-body.ra-wait { opacity: .45; pointer-events: none; transition: opacity .15s ease .12s; }
.ra-range { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end;
  padding: 16px 0 0; justify-content: flex-end; }
.ra-range label { display: flex; align-items: center; gap: 8px; font-size: .8125rem;
  font-weight: 600; color: var(--text-soft); }
.ra-range input[type="date"] { width: auto; min-width: 160px; font-family: var(--font-mono, inherit);
  direction: ltr; }
@media (max-width: 720px) {
  .ra-pill { min-height: 44px; padding-inline: 16px; }
  .ra-range { justify-content: stretch; }
  .ra-range label { flex: 1 1 140px; flex-direction: column; align-items: stretch; gap: 4px; }
  .ra-range input[type="date"] { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ra-body.ra-wait, .ra-pill { transition: none; } }

/* ═══ ترتيب المكتب (٥ تشرين الأول ٢٠٢٦) ═══════════════════════════════
   صندوق الوارد صار ملفّه (desk.css). هنا ما يمسّ بقية الصفحات من الجولة نفسها:
   ترويسةٌ فارغة لا تُرسم، ودليل العملاء بسطر بحثٍ واحد وصفّ شرائح واحد. */

/* ترويسة الصفحة على الشاشة العريضة عنوانُها في الشريط العلوي؛ فإن لم يبقَ
   فيها شرحٌ ولا فعل صارت شريطاً فارغاً بخطٍّ تحته (مراحل العملاء، المكالمات). */
@media (min-width: 1024px) {
  main .page > .ph:not(:has(.ph-text > p)):not(:has(.ph-actions > :not([hidden]):not(:empty))) {
    display: none;
  }
}

/* حقول البحث في رأس الصفحات (العملاء، المكالمات، الموظفون): حقلٌ أبيض بخطّ
   الحقل وحافّةٍ كبسولية كبقية الحقول — كانت صناديق رمادية بارتفاع 56 تبدو
   لوحاً لا حقلاً. ودليل العملاء: البحث والعدد والتنزيل سطرٌ واحد. */
main .page > .chat-search, .emp-bar .searchbox {
  min-height: 44px; margin: 0 0 12px; padding-block: 0; padding-inline: 14px;
  background: var(--r-surface); border: 1px solid var(--r-line-3); border-radius: 999px;
}
.emp-bar .searchbox { margin: 0; }
main .page > .chat-search:focus-within, .emp-bar .searchbox:focus-within {
  border-color: var(--r-primary); box-shadow: 0 0 0 3px rgba(23, 160, 95, .22); }
@media (min-width: 1024px) and (pointer: fine) {
  main .page > .chat-search, .emp-bar .searchbox { min-height: 40px; }
  .page[data-page="calls"] > .chat-search { max-width: 560px; }
}
.cust-filters { display: flex; flex-direction: column; margin-bottom: 6px; }
.cust-filters > #cust-stages { margin-top: 0; }
@media (min-width: 1024px) {
  .page.active[data-page="customers"] {
    display: grid; grid-template-columns: minmax(0, 560px) 1fr; column-gap: 16px; align-content: start;
  }
  .page[data-page="customers"] > * { grid-column: 1 / -1; }
  .page[data-page="customers"] > .chat-search { grid-column: 1; grid-row: 1; margin-bottom: 14px; }
  .page[data-page="customers"] > .ph {
    grid-column: 2; grid-row: 1; align-self: center; margin: 0 0 14px; padding: 0; border: 0;
  }
  .page[data-page="customers"] > .ph > .ph-text { display: none; }
  .page[data-page="customers"] .ph-actions { display: flex; align-items: center; gap: 12px; }
  .cust-filters { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
  .cust-filters > .chips { padding-bottom: 0; flex-wrap: wrap; }
  .cust-filters > #cust-channels { padding-inline-start: 12px; border-inline-start: 1px solid var(--r-line-2); }
}

/* الموافقة والرفض في كل صفّ طلب: «موافقة» كبسولةٌ بإطار وحبر الختم، و«رفض»
   كلمةٌ بحبر الخطر. كانت «موافقة» ممتلئة في كل صفّ — خمسة أزرار خضراء ممتلئة
   في صفحةٍ واحدة لا يُعرف أيّها الفعل (قاعدة الصوت الواحد). */
.appr-acts { display: flex; align-items: center; gap: 4px; flex: none; }
.btn.appr-ok {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding-block: 0; padding-inline: 12px 14px;
  font-size: .8125rem; font-weight: 600; color: var(--r-seal); background: var(--r-surface);
  border: 1px solid var(--r-ghost-line); border-radius: 999px;
}
.btn.appr-ok:hover { background: var(--r-primary-wash); border-color: color-mix(in srgb, var(--r-primary) 45%, var(--r-ghost-line)); }
:root[data-theme="dark"] .btn.appr-ok { color: var(--brand-ink); }
:root[data-theme="dark"] .btn.appr-ok:hover { background: var(--brand-soft); }
.btn.appr-no {
  min-height: 36px; padding-block: 0; padding-inline: 10px; font-size: .8125rem; font-weight: 600;
  color: var(--r-danger-ink); background: none; border: 0; border-radius: 999px;
}
.btn.appr-no:hover { background: var(--r-danger-wash); }
@media (max-width: 719px), (pointer: coarse) { .btn.appr-ok, .btn.appr-no { min-height: 44px; } }

/* رسم «آخر 7 أيام» بالحضور: سبعة أيامٍ بثلاثة أعمدة كانت تتمدّد على 1160px
   فيصير العمود الواحد بعرض 50px — بلوكات لا رسم. عرضٌ مقروء، والمفتاح تحته. */
@media (min-width: 1024px) {
  .page[data-page="home"] .rep-card .rep-chart { max-width: 640px; }
}

/* الرقم ووحدته في بطاقة التقرير يُقرآن بالعربية: «19 دقيقة» و«4.5 من 5» — الرقم
   أولاً من اليمين. كانت الكتلة لاتينية الاتجاه فتقع الوحدة يمين الرقم («د 19»). */
.ra-num b:has(> u) { direction: rtl; unicode-bidi: isolate; }

/* «الرواتب المستحقة لغاية الآن» رقمُ مالٍ لا فعل: بحبر النص. الأخضر يبقى
   لـ«بالدوام الآن» لأنه حالٌ حيّة ويُضغط. */
.ah-money b { color: var(--text); }

/* «الأقسام والسجل»: الأقسام · سجل العمليات · الأمان تبويباتٌ داخل الصفحة لا
   شرائح تصفية — بخطّ التبويبات نفسه (DESIGN.md: In-page tabs). */
#sys-tabs { gap: 20px; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 20px; padding-bottom: 0;
  border-bottom: 1px solid var(--r-line); }
#sys-tabs .chipbtn { flex: none; min-height: 44px; margin-bottom: -1px; padding-block: 0; padding-inline: 2px;
  font-size: .875rem; font-weight: 600; color: var(--text-soft); background: none; border: 0;
  border-bottom: 2px solid transparent; border-radius: 0; }
#sys-tabs .chipbtn:hover { color: var(--text); background: none; }
#sys-tabs .chipbtn.active { color: var(--r-seal); border-bottom-color: var(--r-primary); background: none; }
:root[data-theme="dark"] #sys-tabs .chipbtn.active { color: var(--brand-ink); }

/* مربّعات الاختيار والدوائر بلون العلامة لا أزرق المتصفّح. */
:root { accent-color: var(--r-seal); }
:root[data-theme="dark"] { accent-color: var(--r-primary-vivid); }
.ra-pill:not(.on):not(.ra-custom) { background: var(--surface); border-color: var(--r-ghost-line); color: var(--text-soft); }
.ra-pill:not(.on):not(.ra-custom):hover { background: var(--bg); border-color: var(--r-ghost-line-hover); color: var(--text); }
/* خلية جدول التقرير التي تحمل كلمة («21 دقيقة»): خطّ النص واتجاهه — العربية لا
   تُكتب بالأحادي (تنقطع حروفها). وعدّاد أرقام QR جملةٌ عربية بأرقام جدولية. */
.ra-cell.words { font-family: var(--font); direction: rtl; }
.chx-count { font-variant-numeric: tabular-nums; }

/* حقل اختيار الموظف (السجل والرواتب) حقلٌ أبيض بخطّ الحقل كبقية الحقول — كان
   صندوقاً رمادياً بحدّ 1.5px بجانب قائمة الشهر البيضاء. */
.picker-btn { background: var(--surface); border: 1px solid var(--r-line-3); border-radius: 14px;
  min-height: 44px; padding-block: 0; padding-inline: 14px; }
.picker-btn:hover { border-color: var(--r-ghost-line-hover); }
@media (min-width: 1024px) and (pointer: fine) { .picker-btn { min-height: 40px; } }
/* السجل: شرائح النوع كانت ملتصقة بحقلي الموظف والفترة، والأرقام ملتصقة بها —
   ثلاث طبقات تحكّم بلا نَفَس بينها. */
#att-admin-filters:not([hidden]) + #att-filters { margin-block-start: 12px; }
#att-filters + #att-summary > .summary { margin-block-start: 14px; }
/* سهم المنتقي هو سهم <select> المجاور: كان «▾» نصّاً صغيراً باهتاً فبدا الحقلان
   المتجاوران («كل الموظفين» و«حسب الفترة») من نظامين (٥ تشرين الأول). */
.picker-btn .caret { font-size: 0; width: 12px; height: 12px; flex: none;
  background: var(--text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* وجوه الفريق محايدة كوجوه الطابور ودليل العملاء: الأخضر في قوائم الأشخاص لما
   يُفعل وحده (DESIGN.md: Unread-Owns-Green). */
.tm-av { background: var(--surface-2); color: var(--text); }
:root[data-theme="dark"] .tm-av { background: var(--r-line); }

/* أزرار شريط الرواتب لا تنكسر سطرين على الهاتف («طباعة / PDF»). */
.toolbar .btn { white-space: nowrap; }

/* «+ إضافة» العامة تبقى حيث لا زرّ إضافة للقسم نفسه (الرواتب): الموظفون والسلف
   والإجازات الرسمية والأقسام لها زرّها، والموافقات والأرشيف لا يُضاف إليهما. */
.page[data-page="admin"]:has(.admin-pane.active:is([data-admin-pane="employees"], [data-admin-pane="advances"],
  [data-admin-pane="holidays"], [data-admin-pane="approvals"], [data-admin-pane="archive"],
  [data-admin-pane="system"])) > .page-head { display: none; }

/* «بيانات الشركة» بثلاث مجموعات: عنوانٌ وخطٌّ فوقه، والزوجان (الإحداثيان،
   بداية الدوام ونهايته) متجاوران، والفعلان سطرٌ واحد في الآخر. */
.org-group { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--r-line-2); }
.org-group > h5 { margin: 0 0 4px; font-size: .9375rem; font-weight: 700; color: var(--text); }
.org-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; max-width: 520px; }
.org-pair > .set-row { min-width: 0; }
@media (max-width: 560px) { .org-pair { grid-template-columns: minmax(0, 1fr); } }
.org-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
/* طرف الترويسة بلا فعلٍ ظاهر لا يأخذ سطراً (على الهاتف كان سطراً فارغاً بخطّين). */
.ph-actions:not(:has(> :not([hidden]))) { display: none; }

/* روابط شاشة الدخول (نسيت الرمز، شركة أخرى، حساب جديد) سطورٌ هادئة تحت الزر —
   كانت ثلاث رقعٍ صفراء بلون التنبيه وروابط بأزرق المتصفّح (الأزرق المتقاعد). */
.login #login-forgot, .login #login-other, .login #login-foot {
  margin-top: 0; padding: 0; background: none; border: 0; border-radius: 0;
  text-align: center; font-size: .8125rem; line-height: 1.7; color: var(--text-soft); }
.login #login-forgot { margin-top: 18px; }
.login #login-other, .login #login-foot { margin-top: 6px; }
.login a { color: var(--r-seal); font-weight: 600; text-decoration: none; }
.login a:hover { text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .login a { color: var(--brand-ink); }
/* رابطٌ بشكل زرّ («عرض المنشور») لا يُسطَّر: الكبسولة نفسها هي ما يقول «اضغط». */
a.btn { text-decoration: none; }

/* ── التقارير: المحاذاة والكلمات العربية (ملاحظة المالك ٥ تشرين الأول) ──
   الرقم في خلية الجدول يقف على حافة عنوان عموده نفسها: الخلية لاتينية الاتجاه
   (للعزل) فكانت تلتصق باليسار والعنوان باليمين، فلا يُعرف الرقم لأي عمود. */
.ra-row > .ra-cell, .ra-row.head > span { justify-self: start; }
/* الكلمة العربية لا تُكتب بالأحادي (تنقطع حروفها «د قـيـقـة»، «سا عة»): وحدة
   الرقم ووحدة محور الرسم بخطّ النص واتجاهه. */
.ra-num > b u { font-family: var(--font); }
.ra-unit { font-family: var(--font); direction: rtl; }
/* تسميات المحور المتباعدة تأخذ مكانها كاملاً بلا قصّ. */
.ra-col span { min-block-size: 1.2em; overflow: visible; }
/* عدّاد أرقام QR جملةٌ معزولة: بلا عزل التصق صفره بـ«QR» قبله («QR0 من 3»). */
.chx-count { unicode-bidi: isolate; display: inline-block; }
/* تسمية أول عمود وآخره تتوسّط عمودها فتخرج نصفها عن حافّة الرسم المقصوصة («00:0»). */
.ra-cols { padding-inline: 16px; }

/* ── محاذاة الجداول: كل رقم على حافة عنوان عموده (ملاحظة المالك ٥ تشرين الأول) ──
   الخلية اللاتينية الاتجاه (لحماية إشارة السالب «−98,157») تحسب «النهاية»
   باتجاهها هي فتقف يميناً والعنوان يساراً: «الصافي» كان يبعد عن عنوانه 87px. */
.pay-row .pay-head .net { text-align: left; }
:root[data-lang="en"] .pay-row .pay-head .net { text-align: right; }
/* «متوسط ردّنا» جملةٌ عربية («دقيقتان») لا رقم: اتجاهها عربي فتقف تحت عنوانها. */
.cust-reply { direction: rtl; unicode-bidi: isolate; }
:root[data-lang="en"] .cust-reply { direction: ltr; }
/* وهامش الفصل قبل «الصافي» على الجانب نفسه للعنوان وخليته: الخلية لاتينية،
   فبدايتها يسارها. */
:root:not([data-lang="en"]) .pay-row .pay-head .net { margin-inline: 0 10px; }