/* ═══════════════════════════════════════════════════════════════════════
   طبقة الجوال للحوض — «basin-mobile»
   ───────────────────────────────────────────────────────────────────────
   أمر المالك 2026-09-03: «أعد تصميم كامل صفحات الحوض الخاصة بالجوال.
   الاستخدام عبر الجوال مشوّه للغاية وغير قابل للاستخدام — أعد الاستخدام بما
   يتوافق مع الجوال شكلاً واستخداماً، وعن طريق إيجينت بصري للمراجعة.»

   🔒 **كل ما في هذا الملف داخل `@media (max-width: 767.98px)`** — الديسكتوب
      لم يشتكِ منه المالك، وكسرُه خسارةٌ صافية. (قِيس بشاهد ضبط: الأربع عشرة
      صفحة على 1280px قبلَ الطبقة وبعدها — ارتفاع الرأس والفائض متطابقان.)

   🧱 **البناء:** غلافٌ واحد ← محرّكان عامّان ← ملفّ لكل مجموعة صفحات.
      والمحرّكان يشتقّان عملهما من بنية الصفحة نفسها (رؤوس الأعمدة · سمة
      `title`) **فلا يشيخان**: أيّ جدولٍ أو تسميةٍ تُضاف غداً تعمل بلا لمس شيفرة.

   📏 **بوّابة القبول (قاعدة 24 · §18):** صفر فائض أفقي على 393 و360 ·
      هدف لمس ≥44×44 · لا معلومة خلف `title`/`:hover` · لا نصّ دون 10px.

   ⚠️ **ولا يُحرَّر هذا الملف بالید إلا بفهم بنيته** — وترتيب أجزائه مقصود:
      الغلاف يحجز المساحات، والمحرّكان يبنيان فوقها، والصفحات تُخصّص.
   ═══════════════════════════════════════════════════════════════════════ */



/* ───────── _shell ───────── */
/* ══════════════════════════════════════════════════════════════════════════
   غلاف الحوض على الجوال — `_shell.css`
   يسري على الصفحات الخمس عشرة كلها: الرأس · التنقّل · حدود الشاشة.

   ❶ **العلّة الجذرية للتشوّه:** `aside.sidebar` تُخفى بـ`translateX(100%)`،
      فتبقى **محتوىً حيّاً عند 393→653** — لا تُرى ويُمرَّر إليها. وفي الصفحات
      التي يصير جسمها حاوية تمرير (`body:not(:has(.main-content)){overflow:auto}`)
      تُترجَم إلى فائضٍ حقيقي: `/board` **416px** و`/case` **414px** على شاشة 393،
      فيُصغّر كروم الصفحة كلها لتتّسع — وهذا هو «المشوّه للغاية» الذي رآه المالك.
      ⛔ والإخفاء هنا **بالقصّ** (`display`) لا بالإزاحة، فلا يبقى ما يُمرَّر إليه.

   ❷ **التنقّل:** أربعة عشر رابطاً لا يسعها شريط. فالبنية طبقتان:
      • **شريط سفليّ بأربع وجهات + «المزيد»** — والأربع هي حلقة العمل على العميل
        الواحد: الحوض (يجده) ← التذاكر (طلبه، وهي الوحيدة التي تحمل عدّاداً حيّاً
        يتغيّر وأنت لا تنظر) ← المفاتيح (يسلّمه) ← التفعيل (يتأكّد). وما عداها
        صفحاتُ إشرافٍ دوريّ تُفتح وتُترك: المراجعة · المالية · السجل · اللوحة ·
        الإدارة · الحسابات · الربط. و«المدد» و«ملفّ العميل» بحثٌ يبلغه الموظف من
        بطاقة العميل نفسها، وبحثُ الحوض يغني عنه بالجوال.
      • **«المزيد» يفتح القائمة الأصلية نفسها** ورقةً سفليّة — لا نسخةً عنها:
        فتصفية الصلاحيات وعدّاد التذاكر واسم الموظف وزرّ الحساب تعمل كما هي،
        ولا تشيخ نسخةٌ ثانية (وهي علّة النسخ التي أوجبت توحيد `_nav.html`).

   ❸ **الرأس:** كان يبتلع **343px في `/log`** و162 في المالية والإدارة و158 في
      المراجعة و142 في ملفّ العميل — أي أكثر من ثلث الشاشة قبل أوّل صفّ بيانات.
      صار صفّاً واحداً لاصقاً **48px** فيه: الشعار · عنوان الصفحة · زرّ «أدوات».
      وكلّ ما كان في الرأس (الأزرار · الروابط · مؤشّرات KPI · سطر التعريف) ينتقل
      إلى **لوح ينسدل بنقرة** — ⛔ لا يُحذف ولا يُخبَّأ خلف تحويم (قاعدة 24).

   ⚠️ **الترتيب ملزم:** هذه الكتلة تُركَّب **بعد** قواعد `basin.css` الأصلية —
      فبعض مُميِّزاتها مساوٍ في الوزن (`body:not(:has(.main-content))`) ويُحسم
      بترتيب المصدر لا بالوزن.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── خارج نقطة الكسر عمداً، وهو الاستثناء الوحيد (قاعدة ١) ──────────────
   `.bsn-xtra` صندوقٌ **يلفّه `_shell.js` حول عناصر الرأس القائمة** ليقدر CSS
   على تصنيفها صفّاً أوّل وثانياً. ولو بقي صندوقاً حقيقياً على الديسكتوب لانقلب
   صفُّ الرأس كلّه عنصراً واحداً في الفليكس. و`display:contents` يجعله شفّافاً
   للتخطيط تماماً — فالديسكتوب يبقى حرفياً كما كان، ولم يشتكِ منه المالك.
   ومعه إخفاء ما أنشأه الغلاف من عناصر جوّالية بحتة.                        */
.bsn-xtra { display: contents; }
.bsn-tabbar, .bsn-tools-btn, .bsn-sheet-x { display: none; }


@media (max-width: 767.98px) {

  /* ═══ ٠ · الثوابت — يبني عليها بناةُ الصفحات ولا يخترعون غيرها ═══ */
  :root {
    --bsn-appbar: 48px;                                   /* الرأس اللاصق      */
    --bsn-tabbar: 58px;                                   /* الشريط السفليّ    */
    --bsn-safe: env(safe-area-inset-bottom, 0px);         /* شريط آيفون السفلي */
    --bsn-bottom: calc(var(--bsn-tabbar) + var(--bsn-safe));
    --bsn-top: var(--bsn-appbar);          /* إزاحة كلّ ما يلتصق تحت الرأس */
    --bsn-gut: 12px;                       /* هامش الصفحة الجانبي على الجوال */
  }

  /* ═══ ١ · حدود الشاشة — والحاويةُ الممرِّرة تبقى كما هي عمداً ═══
     🧪 **جُرِّب البديلُ وقِيس فسقط:** حوّلتُ الصفحات إلى تمرير المستند (رفعُ
        `overflow` عن الجسم وعن `.dashboard-scroll`) طلباً لانكماش شريط
        المتصفّح وإلغاء التمرير داخل التمرير. فقفز الفائض الأفقي من **صفر إلى
        3313px في `/` و1993 في `/desk` و1753 في `/conn` و1687 في `/users`** —
        لأن جداول الحوض عريضة (1169px) وكانت الحاوية الداخلية تحتويها وتُمرِّرها
        أفقياً. أي أن رفع التمرير الداخلي **يبتر الجداول** لا يُحسّن التصفّح.
        فأُعيد الهيكل الأصلي كما هو، والغلاف يقتصر على ما يملكه: الرأس
        والتنقّل وحدود الشاشة.
     ⛔ فلا يُلمس `body{display/height/overflow}` ولا `.main-content` ولا
        `overflow` أيّ حاوية — ومن غيّرها أعاد الأرقام أعلاه.
     ⚠️ وصفحة الدخول خارج هذا كلّه: لا رأس فيها ولا شريط، ولا يُحجز فيها شيء. */

  /* أرضيةٌ محجوزة للشريط السفليّ **داخل الحاوية الممرِّرة** لا على الجسم —
     فالجسم في سبع صفحات لا يمرّر أصلاً، فحشوُه لا يبلغ آخر البطاقات.
     ومشروطةٌ بوجود الشريط فعلاً: بلا `_shell.js` لا تُحجز مساحةٌ فارغة. */
  body:has(.bsn-tabbar) .dashboard-scroll,
  body:has(.bsn-tabbar) .shell,
  body:has(.bsn-tabbar) .scroll,
  body:has(.bsn-tabbar) .wrap,
  body:has(.bsn-tabbar) .page {
    padding-inline: var(--bsn-gut);
    padding-block-end: calc(var(--bsn-bottom) + 12px);
    max-width: none;
  }
  /* والورقة مفتوحة ⇒ ما تحتها لا يُمرَّر */
  body.nav-open, body.nav-open .dashboard-scroll { overflow: hidden; }


  /* ═══ ٢ · الرأس — صفٌّ واحد 48px، والباقي بنقرة ═══ */
  /* المظهر واللصوق على **الحاوية**، والصفّ الفليكسيّ على **الصفّ** — فصفحات
     `.hd` تلفّ محتواها في `.hd-in` داخل `header.hd`، فلا يُجعل الاثنان فليكساً. */
  .top-header, header.hd, .topbar, .wrap > .top {
    position: sticky; top: 0; z-index: 45;
    height: auto; min-height: var(--bsn-appbar); margin: 0 0 10px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: none;
  }
  .top-header, .hd-in, .topbar, .wrap > .top {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px; padding: 0 6px; max-width: none;
    min-height: var(--bsn-appbar);
  }
  header.hd { padding: 0; }
  .hd-in { margin: 0; border: 0; }
  /* رأس `case` يسكن داخل `.wrap` المحشوّ — يُمَدّ بالسالب ليبلغ حافّتي الشاشة */
  .wrap > .top { margin: calc(var(--bsn-gut) * -1) calc(var(--bsn-gut) * -1) 12px; }

  /* الشعار: هدف لمسٍ حقيقيّ لا أيقونة صغيرة */
  .top-header > .hdr-logo, .topbar > a:first-child, .wrap > .top > img {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0; margin: 0;
    border: 0; background: none; font-size: 12px;
  }
  .hd-in > img { flex: none; height: 26px; width: auto; margin-inline-end: 2px; }
  .wrap > .top > img { width: 30px; height: 30px; border-radius: var(--radius-s); }

  /* العنوان: سطرٌ واحد يبتلع الفائض بنقاطٍ ولا يدفع الزرّ خارج الشاشة.
     🪤 و`flex-basis:0` لا `auto` — **وهذه علّة مقيسة لا احتياط:** الصفّ ملفوف
        (`flex-wrap`)، والمتصفّح يقسم السطور على **الحجم الافتراضي قبل التقلّص**.
        فباسم عميلٍ طويل (`/card`: «عبدالرحمن بن محمد بن عبدالله القحطاني
        الغامدي» ≈340px) كان الصفّ ينكسر ثلاثة أسطر ويصير الرأس **118px**
        بدل 48 — والاسم لم يكن ليقصّ لأنه لم يُطلب منه التقلّص أصلاً. */
  .top-header > .page-title, .hd-in > div:has(h1), .topbar > .nm, .wrap > .top > b {
    flex: 1 1 0; min-width: 0; display: block;
    font-size: 16.5px; font-weight: 700; line-height: 1.25; color: var(--ink);
    margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hd h1 { font-size: 16.5px; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* زرّ «أدوات» — 44×44، ونصُّه مرئيّ لا خلف تحويم */
  .bsn-tools-btn {
    order: 1; flex: none; display: inline-flex; align-items: center; gap: 4px;
    min-width: 44px; min-height: 44px; padding: 0 8px;
    border: 1px solid var(--border); border-radius: var(--radius-s);
    background: var(--surface); color: var(--text-muted);
    font: 600 11.5px/1 'IBM Plex Sans Arabic', sans-serif; cursor: pointer;
  }
  .bsn-tools-btn svg { width: 14px; height: 14px; fill: none;
    stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
    transition: transform .18s ease; }
  body.bsn-tools .bsn-tools-btn { color: var(--ink); border-color: var(--ink); }
  body.bsn-tools .bsn-tools-btn svg { transform: rotate(180deg); }

  /* لوح الأدوات — كلُّ ما كان يحشو الرأس: أزرار الصفحة · روابطها · مؤشّراتها ·
     سطر التعريف. ينسدل بنقرة ويُطوى بنقرة، ولا يُخفي شيئاً خلف تحويم. */
  .bsn-xtra {
    order: 9; flex: 0 0 100%; display: none;
    align-items: center; flex-wrap: wrap; gap: 8px;
    max-height: calc(100dvh - var(--bsn-appbar) - var(--bsn-bottom) - 8px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 6px 12px; margin: 0 -6px;
    border-top: 1px solid var(--border); background: var(--surface);
  }
  body.bsn-tools .bsn-xtra { display: flex; }
  .bsn-xtra > .header-actions { display: contents; }   /* لا صندوق داخل صندوق */
  .bsn-xtra .sp { display: none; }                     /* الفواصل المطّاطة تُلغى */
  .bsn-xtra .bsn-tagline {
    flex: 1 0 100%; order: -1; margin: 0;
    font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.5;
    background: none; border: 0; padding: 0;
  }
  /* كلّ ما يُضغط في اللوح ≥44 — وقد كانت 26–34px.
     🪤 والمُميِّز **نسَبيّ لا ابنيّ**: `.header-actions` صار `display:contents`
        فأولادُه أولادُ اللوح تخطيطاً، لكن `>` يقرأ الشجرة لا التخطيط. */
  .bsn-xtra a, .bsn-xtra button, .bsn-xtra .kpi, .bsn-xtra .pill {
    min-height: 44px; padding: 8px 12px; font-size: 12.5px;
    display: inline-flex; align-items: center; gap: 6px; margin: 0;
    white-space: nowrap;
  }
  .bsn-xtra a > *, .bsn-xtra button > * { min-height: 0; padding: 0; }

  /* ═══ ٣ · القائمة القديمة: الدُّرج يصير **ورقةً سفليّة**، والإخفاء بالقصّ ═══
     ⛔ لا `transform` ولا `visibility` — كلاهما يُبقي العنصر محتوىً يُمرَّر إليه
        فيعود الفائض (المقيس: 393→653 في كلّ صفحة). `display` وحده يمحوه. */
  .sidebar {
    position: fixed; inset: auto 0 0 0; top: auto;
    width: auto; max-width: none; height: auto; max-height: 84dvh;
    transform: none; transition: none;
    display: none; flex-direction: column;
    border: 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 48px rgba(0,0,0,.42);
    padding-block-end: var(--bsn-safe);
    z-index: 70; overscroll-behavior: contain;
  }
  body.nav-open .sidebar { display: flex; animation: bsn-rise .2s ease both; }
  @keyframes bsn-rise { from { transform: translateY(14px); opacity: .4 } }
  @media (prefers-reduced-motion: reduce) {
    body.nav-open .sidebar { animation: none; }
  }
  .sidebar::before {                                  /* مقبض الورقة */
    content: ""; flex: none; width: 38px; height: 4px; border-radius: 100px;
    background: var(--line-dark); margin: 8px auto 2px;
  }
  .nav-backdrop { z-index: 65; }

  .side-logo { padding: 10px 16px 12px; border-bottom: 1px solid var(--line-dark);
    min-height: 48px; }
  .side-logo .brand-sub { letter-spacing: .4px; }
  .bsn-sheet-x {                                    /* إغلاق الورقة — 44×44 */
    position: absolute; top: 12px; inset-inline-end: 8px; z-index: 2;
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--line-dark); border-radius: var(--radius-s);
    background: transparent; color: #cfcfcf; font-size: 17px; cursor: pointer;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
  }

  /* الروابط الأربعة عشر في عمودين — فتُرى كلّها بلا تمرير، وكلٌّ ≥48px */
  .nav-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    padding: 10px 12px 12px; overflow-y: auto; }
  .nav-group-title { grid-column: 1 / -1; margin: 6px 0 0; padding: 0 4px;
    font-size: 10.5px; }
  .nav-group-title[style] { margin-top: 10px !important; }  /* يُلغي inline 24px */
  .nav-link { margin: 0; min-height: 48px; padding: 8px 10px; gap: 8px;
    font-size: 12.5px; line-height: 1.3; align-items: center;
    border: 1px solid var(--line-dark); }
  .nav-link svg { flex: none; }
  .nav-badge { margin-inline-start: 4px; }

  .user-profile-side { padding: 10px 14px; gap: 10px; }
  .user-profile-side #acct { min-height: 44px; display: inline-flex;
    align-items: center; font-size: 12px; }
  /* «خروج» كان **أيقونةً عارية** اسمُها في `title=` و`aria-label` وحدهما —
     ولا تحويم على اللمس، فالموظف يرى سهماً لا يدري ما يفعل (قاعدة 24).
     فالاسم يُكتب بجوارها مرئياً دائماً. */
  .user-profile-side > a.nav-link { min-height: 44px; min-width: 44px;
    flex: none; gap: 6px; padding: 8px 12px; font-size: 12px;
    border-color: var(--line-dark); }
  .user-profile-side > a.nav-link[href="/logout"]::after { content: "خروج"; }

  /* الزرّ العائم القديم: كان `fixed` عند (331, 790) **فوق المحتوى** في أسفل
     الشاشة وهو المدخل الوحيد للتنقّل. صار الشريط السفليّ مدخلاً، فيُطفأ —
     ⚠️ إلا إن تعذّر `_shell.js` فيبقى **احتياطياً في الزاوية العليا** لا فوق
        البيانات، فلا يبقى الموظف بلا تنقّل إطلاقاً. */
  .nav-burger { display: none; }
  body:not(:has(.bsn-tabbar)) .nav-burger {
    display: flex; top: 2px; bottom: auto; inset-inline-end: 4px;
    width: 44px; height: 44px; border-radius: var(--radius-s); z-index: 46;
    box-shadow: none;
  }


  /* ═══ ٤ · الشريط السفليّ — التنقّل في متناول الإبهام ═══ */
  .bsn-tabbar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 55;
    display: flex; align-items: stretch;
    height: var(--bsn-bottom); padding-bottom: var(--bsn-safe);
    background: var(--shell); border-top: 1px solid var(--line-dark);
  }
  .bsn-tab {
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    padding: 4px 2px; border: 0; background: none; cursor: pointer;
    color: #9a9a9a; text-decoration: none;
    font: 600 11px/1.15 'IBM Plex Sans Arabic', sans-serif;
  }
  .bsn-tab:hover, .bsn-tab:focus { text-decoration: none; color: #fff; }
  .bsn-tab svg { width: 21px; height: 21px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; }
  .bsn-tab span { max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .bsn-tab.is-on { color: #fff; }
  .bsn-tab.is-on svg { stroke: var(--brand-action); }
  .bsn-tab.is-on::before { content: ""; position: absolute; top: 0;
    inset-inline: 22%; height: 2.5px; border-radius: 0 0 3px 3px;
    background: var(--brand-action); }
  .bsn-tab .bsn-tab-badge {
    position: absolute; top: 3px; inset-inline-end: 26%;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 100px;
    background: var(--text-muted); color: #fff;
    font: 700 10px/17px 'IBM Plex Sans Arabic', sans-serif;
    font-style: normal; text-align: center;
  }
  .bsn-tab .bsn-tab-badge.hot { background: var(--brand-action); }
  body.nav-open .bsn-more { color: #fff; }


  /* ═══ ٥ · طبقاتٌ عائمة أخرى — ألّا تعود العلّة من بابٍ آخر ═══ */
  /* 🪤 بطاقة العميل الجانبية تُخفى بـ`translateX(-100%)` عند `left:0` — أي
        محتوىً عند −393→0. كانت مكتومة بـ`overflow:hidden` على الجسم، وقد رفعناه
        في ①، فلولا القصّ هنا لعاد الفائض من حيث لم يُرصد. وعلى الجوال هي شاشةٌ
        كاملة لا درجٌ جانبيّ. */
  .dw { inset: 0; width: auto; max-width: none; transform: none; transition: none;
    display: none; border: 0; }
  .dw.on { display: flex; }
  .dwb { padding: var(--bsn-gut); }

  /* الرسائل الطافية تُرفع فوق الشريط — وإلا ابتلعها */
  .toast { bottom: calc(var(--bsn-bottom) + 12px); inset-inline: 12px; }

  /* ═══ ٦ · ما لم يُفعَل عمداً — وهو قرارٌ لا سهو ═══
     ⛔ لا `overflow:hidden` ولا `overflow-x:clip` على الجذر أو الجسم.
        الأول يكسر `position:sticky` ويمنع التمرير الأفقي المشروع داخل الجداول؛
        والثاني **يبتر المحتوى ويُخفي الفائض عن القياس معاً** — فيصير عطبُ صفحةٍ
        غيرَ مرئيّ لمن يقيس ولمن يقرأ. والفائض هنا عولج من جذره: الطبقتان
        المخفيّتان بالإزاحة (`.sidebar` و`.dw`) صارتا تُقصّان بـ`display`.
        فما بقي من فائضٍ بعد ذلك **فهو فائض صفحةٍ يُصلَح في ملفّها**. */
}


/* ───────── _tables ───────── */
/* ═══════════════════════════════════════════════════════════════════════════
   _tables.css — محرّك الجداول لطبقة جوال الحوض
   كلُّ صفٍّ بطاقةٌ مستقلّة، وكلُّ حقلٍ يحمل تسميتَه بجانبه — والتسمية مشتقّةٌ
   من `thead th` بالبناء لا باليد (انظر `_tables.js`).

   ⚠️ ثلاثة أشياء تُفسّر شكل هذا الملف:
   ① نقطة الكسر واحدة `max-width:767.98px` — ولا سطر خارجها. الديسكتوب لم يشتكِ.
   ② الأصناف مكرّرة `.bsn-tbl.bsn-tbl.bsn-tbl` عمداً: صفحات `log/review/finance`
      تكتب `display:table-cell!important` في `<style>` داخلها، وهذه الصفحات
      تُحمَّل **بعد** `basin.css` الذي سيُركَّب فيه هذا الملف. فالوزن هو
      الحَكَم لا الترتيب — ثلاثة أصناف (0,3,x) تغلب `table.t td` (0,1,2).
   ③ `!important` على `display` وحده تقريباً — لأن الخصم استعمله. وما عداه
      يُحسم بالوزن بلا رفع صوت.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* ── ⓪ حدٌّ أدنى لكل جدولٍ لم يُحوَّل: ألّا يكسر الصفحة ────────────────
     جداولُ «مفتاح/قيمة» لا تُحوَّل — فهي مقروءةٌ بالإبهام أصلاً. لكنّها تفيض:
     🪤 مقيس على `/case` — جدولُ هويّة العميل يدفع الصفحة إلى 399px، ولا يظهر
     في جردِ الجداول لأنه بلا `thead`. فالمنع ألّا يتجاوز أيُّ جدولٍ حاويتَه. */
  .bsn-tbl-fluid.bsn-tbl-fluid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* ولو أبى الجدولُ الانضباط (محتواه أعرضُ من الحاوية) فُرِض عليه عرضٌ ثابت،
     فتُجبَر الخلايا على الالتفاف بدل أن تدفع الصفحة. */
  .bsn-tbl-fluid.bsn-tbl-fit { table-layout: fixed !important; }
  .bsn-tbl-fluid.bsn-tbl-fluid > tbody > tr > th,
  .bsn-tbl-fluid.bsn-tbl-fluid > tbody > tr > td,
  .bsn-tbl-fluid.bsn-tbl-fluid > thead > tr > th {
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  /* ── ① الرموز المحلّية ─────────────────────────────────────────────────── */
  .bsn-tbl {
    --bsn-lblw: 96px;      /* عرض عمود التسمية — يضبطه JS بقياس أعرض عنوان */
    --bsn-tdpad: 12px;     /* حشو الخليّة الجانبي */
    --bsn-tdgap: 10px;     /* الفجوة بين التسمية وقيمتها */
    --bsn-cardgap: 10px;   /* بين بطاقةٍ وأختها */
  }

  /* ── ② الجدول يصير عمودَ بطاقات ───────────────────────────────────────── */
  .bsn-tbl.bsn-tbl.bsn-tbl {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 13px;
    text-align: start;
  }
  /* أعمدةٌ مرسومة سلفاً (`<colgroup>` في `review`) لا معنى لها بعد التحويل */
  .bsn-tbl.bsn-tbl.bsn-tbl > colgroup { display: none !important; }

  .bsn-tbl.bsn-tbl.bsn-tbl > thead,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody,
  .bsn-tbl.bsn-tbl.bsn-tbl > tfoot {
    display: block !important;
    width: auto !important;
  }

  /* ── ③ صفّ العناوين: يختفي، إلّا ما كان منه زرَّ فرزٍ أو فلترة ─────────── */
  /*    فالتسمية انتقلت إلى كل خليّة، ولم يبقَ في الرأس إلا ما يُنقَر.        */
  .bsn-tbl.bsn-tbl.bsn-tbl > thead { display: none !important; }
  .bsn-tbl.bsn-thx-on.bsn-tbl > thead { display: block !important; }

  .bsn-tbl.bsn-tbl.bsn-tbl > thead > tr,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr.bsn-hdr {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: default;
  }
  /* صفُّ عناوينٍ داخل الجسم (لا `thead` له) وليس فيه ما يُنقَر ⟵ يُطوى */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr.bsn-hdr:not(.bsn-hdr-on) { display: none !important; }

  .bsn-tbl.bsn-tbl.bsn-tbl > thead > tr > th,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr.bsn-hdr > th { display: none !important; }

  /* الشارة القابلة للنقر: هدف لمسٍ 44px، وثابتةٌ لا لاصقة (الرأس فوقها) */
  .bsn-tbl.bsn-tbl.bsn-tbl > thead > tr > th.bsn-thx,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr.bsn-hdr > th.bsn-thx {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    min-height: 44px;
    padding: 0 13px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: var(--surface);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    box-shadow: none;
    -webkit-user-select: none; user-select: none;
  }
  .bsn-tbl.bsn-tbl.bsn-tbl th.bsn-thx .ar { color: var(--brand-action); font-size: 11.5px; }
  /* العمود المفروز به الآن — يُرى بلا تحويم */
  .bsn-tbl.bsn-tbl.bsn-tbl th.bsn-thx.bsn-on {
    border-color: var(--brand-action);
    color: var(--brand-action);
    background: rgba(237, 9, 84, .06);
  }
  /* كلمةُ تعريفٍ للشارات كي لا يُظنّ بها عناوين — يضعها JS متى تيقّن أنها فرز */
  .bsn-tbl.bsn-tbl.bsn-tbl > thead > tr[data-bsn-cap]::before,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr.bsn-hdr[data-bsn-cap]::before {
    content: attr(data-bsn-cap);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    margin-inline-end: 2px;
  }

  /* ── ④ الصفّ = بطاقة ──────────────────────────────────────────────────── */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr,
  .bsn-tbl.bsn-tbl.bsn-tbl > tfoot > tr {
    display: block !important;
    width: auto !important;
    margin: 0 0 var(--bsn-cardgap);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    /* لا `overflow:hidden` — كي لا تُقصّ قائمةٌ منسدلة تخرج من داخل الصفّ */
  }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr:last-child,
  .bsn-tbl.bsn-tbl.bsn-tbl > tfoot > tr:last-child { margin-bottom: 0; }

  /* ── ⑤ الخليّة = سطرُ «تسمية · قيمة» ──────────────────────────────────── */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > th,
  .bsn-tbl.bsn-tbl.bsn-tbl > tfoot > tr > td,
  .bsn-tbl.bsn-tbl.bsn-tbl > tfoot > tr > th {
    display: block !important;
    position: relative;
    width: auto !important;
    max-width: none !important;
    min-height: 38px;
    padding-block: 9px;
    padding-inline-end: var(--bsn-tdpad);
    padding-inline-start: calc(var(--bsn-tdpad) + var(--bsn-lblw) + var(--bsn-tdgap));
    border: 0;
    border-bottom: 1px solid var(--border);
    background: none;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--ink);
    text-align: start;
    vertical-align: baseline;
    /* 🪤 مقيس: `.mono`/`.num`/`.money` في log·review·finance تكتب `direction:ltr`،
       و`padding-inline-start` و`inset-inline-start` يتبعان اتجاهَ العنصر نفسه —
       فانقلبت التسمية إلى يسار الخليّة وحدها بين إخوتها. والعودة إلى اتجاه
       الجدول تُرجع عمودَ التسميات مستقيماً، و`isolate` تُبقي الأرقام واللاتيني
       مقروءةً بترتيبها داخل السطر. */
    direction: inherit;
    unicode-bidi: isolate;
    /* الصفحات تقصّ بـ`nowrap + ellipsis` — وعلى الهاتف القصُّ إخفاءُ بيانات */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: break-word;
    box-shadow: none;
  }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > :last-child,
  .bsn-tbl.bsn-tbl.bsn-tbl > tfoot > tr > :last-child { border-bottom: 0; }

  /* التسمية — نصٌّ مرئيٌّ دائماً، لا `title=` ولا تحويم (قاعدة 24) */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td::before,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > th::before,
  .bsn-tbl.bsn-tbl.bsn-tbl > tfoot > tr > td::before,
  .bsn-tbl.bsn-tbl.bsn-tbl > tfoot > tr > th::before {
    content: attr(data-lbl);
    position: absolute;
    inset-block-start: 9px;
    inset-inline-start: var(--bsn-tdpad);
    width: var(--bsn-lblw);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text-muted);
    text-align: start;
    white-space: normal;
    overflow-wrap: break-word;
    pointer-events: none;
  }

  /* أوّل حقلٍ = ترويسةُ البطاقة (يبقى بتسميته، فالتسمية لا تُلغى) */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > :first-child {
    background: var(--bg-main);
    border-radius: var(--radius-m) var(--radius-m) 0 0;
    font-size: 13.5px;
    font-weight: 700;
  }

  /* ── ⑥ خلايا بلا تسمية: عمودُ أفعالٍ، أو خليّةٌ تمتدّ على الصفّ كلّه ──── */
  .bsn-tbl.bsn-tbl.bsn-tbl [data-bsn-nolbl],
  .bsn-tbl.bsn-tbl.bsn-tbl [data-bsn-full] {
    padding-inline-start: var(--bsn-tdpad);
  }
  .bsn-tbl.bsn-tbl.bsn-tbl [data-bsn-nolbl]::before,
  .bsn-tbl.bsn-tbl.bsn-tbl [data-bsn-full]::before { content: none; }

  .bsn-tbl.bsn-tbl.bsn-tbl [data-bsn-full] {
    text-align: center;
    color: var(--text-muted);
  }
  /* صفٌّ كلُّه خليّةٌ ممتدّة (فراغ · تحميل · فاصل مجموعة) ليس بطاقةَ بيانات */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr.bsn-rfull {
    background: none;
    border-style: dashed;
  }

  /* عمود الأفعال: أزرارٌ في صفٍّ واحد، وهدفُ اللمس 44 (48 لِما يُضغط كثيراً) */
  .bsn-tbl.bsn-tbl.bsn-tbl td[data-bsn-act] {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-block: 7px;
  }
  .bsn-tbl.bsn-tbl.bsn-tbl td[data-bsn-act] > button,
  .bsn-tbl.bsn-tbl.bsn-tbl td[data-bsn-act] > a,
  .bsn-tbl.bsn-tbl.bsn-tbl td[data-bsn-act] > select {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 14px;
    font-size: 13px;
  }

  /* ── ⑦ ما كان خلف التحويم يُرى (قاعدة 24 — لا `:hover` على اللمس) ─────── */
  .bsn-tbl.bsn-tbl.bsn-tbl .bsn-reveal { opacity: 1 !important; }
  /* أيقونةٌ صغيرة تُوسَّع منطقةُ لمسها بلا أن يتغيّر مكانها في السطر */
  .bsn-tbl.bsn-tbl.bsn-tbl .bsn-hit { position: relative; }
  .bsn-tbl.bsn-tbl.bsn-tbl .bsn-hit::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 10px;
  }
  /* ⛔ وما في `title=` من بياناتٍ مخبوءة **ليس شغل هذا المحرّك**: يتولّاه
     `_titles` بتصنيفٍ خمسيّ (مكرّر · تلميح · مبتور · أيقونة · معلومة زائدة)
     وبإظهارٍ بالنقر. وطبعُه هنا نصّاً دائماً يُكرّره ويُثقل البطاقة — فتُرك له. */

  /* ── ⑧ ما يبقى عاملاً داخل البطاقة ───────────────────────────────────── */
  /*    الشارات والحالات والنجوم والروابط عناصرُ الصفحة نفسها — لم تُمسّ.     */
  /*    وهذه ضبطٌ لِما ينكسر حين يضيق السطر فقط.                             */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td > .bdg,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td > .tg { margin-bottom: 0; }
  .bsn-tbl.bsn-tbl.bsn-tbl img,
  .bsn-tbl.bsn-tbl.bsn-tbl svg { max-width: 100%; }
  /* الأعمدة الرقمية تُصفّ لجهة النهاية على الديسكتوب — وفي البطاقة لا معنى له */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td.num,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td.money { text-align: start; }

  /* غلافُ الجدول: هامشٌ كي لا تلتصق البطاقة بحافّة اللوح.
     ⛔ ولا نلمس `overflow` الغلاف: هو شبكةُ الأمان الأخيرة إن أفلت عرضٌ من
        القياس — ورفعُها يُسرّب الفائض إلى الصفحة كلّها (قِيس على `/board`). */
  .bsn-tbl-wrap { padding: 10px; }
  .bsn-tbl-wrap.bsn-tbl-flat { padding: 0; }
}


/* ───────── _titles ───────── */
/* ═══════════════════════════════════════════════════════════════════════════
   محرّك التسميات المخبوءة — الكسوة  ·  `_titles.css`   (يرافق `_titles.js`)
   ───────────────────────────────────────────────────────────────────────────
   ⛔ كلّ ما هنا داخل `@media (max-width: 767.98px)` بلا استثناء واحد: التحويم
      يعمل على الديسكتوب، فأيّ قاعدةٍ تخرج عن نقطة الكسر خسارةٌ صافية.

   الرموز من `basin.css` وغلاف الجوال — ولا رقم لونٍ مخترع:
     `--surface` · `--bg-main` · `--border` · `--ink` · `--text-muted`
     `--brand-action` · `--radius-s` · `--radius-m` · `--shadow` · `--shadow-pop`
     `--bsn-bottom` (أرضيّة شريط التنقّل) · `--bsn-gut`

   الطبقات: اللوحة والورقة فوق `.dw` (101) لأنّ درج العميل نفسه يحمل تسمياتٍ
   مخبوءة (٩٠ في `/card`) — فلو جلستا تحته لاختفى الكشف حيث يُطلب أكثر ما يُطلب.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* ═══ ① العلامة: «هنا شيءٌ لا تراه» ═══════════════════════════════════
     تسطيرٌ منقّط محايد — عُرف الويب لما يُفتح بالنقر. ولا تكلفة تخطيط له
     (التسطير لا يُعيد التدفّق)، فيصلح لمئات العناصر بلا أثر على القياس. */
  .mt-live .mt-h {
    text-decoration: underline dotted var(--text-muted);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(237, 9, 84, .10);
  }

  /* عنصرٌ بلا نصّ (أيقونة/شريط) لا يقبل تسطيراً — فله نقطةٌ صغيرة */
  .mt-live .mt-h:empty,
  .mt-live .mt-h.mt-dot { position: relative; text-decoration: none; }
  .mt-live .mt-h:empty::after,
  .mt-live .mt-h.mt-dot::after {
    content: ''; position: absolute; inset-block-start: -2px; inset-inline-end: -2px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand-action);
  }

  .mt-live .mt-h.mt-on {
    background: rgba(237, 9, 84, .07);
    border-radius: var(--radius-s);
    text-decoration-color: var(--brand-action);
  }

  /* هدفُ اللمس: طبقةٌ مطلقة تُوسّع المقبض إلى 44 **بلا إعادة تدفّق** — فالشارة
     تبقى بمقاسها البصري ولا يتزحزح سطرٌ من أجلها. المقدارُ يحسبه المحرّك من
     مقاس العنصر المقيس (`--mt-ey` رأسياً · `--mt-ex` أفقياً، والأفقيّ محدودٌ
     بـ8px لأنّه وحده يهدّد بفائضٍ أفقي). */
  .mt-live .mt-h.mt-hit { position: relative; }
  .mt-live .mt-h.mt-hit::after {
    content: ''; position: absolute;
    inset-block: var(--mt-ey, 0px);
    inset-inline: var(--mt-ex, 0px);
  }

  /* ═══ ② شارةُ «⋯»: مقبضٌ مستقلّ حين لا يجوز سرق النقرة ═══════════════
     تُستعمل داخل صفٍّ نقّار وبجانب زرٍّ له فعلُه — فلا يُسلَب أحدٌ نقرته.
     44×44 هدفَ لمس، لكنّ **بصرَها 24×24** كي لا تُثقل صفّاً فيه عشرات. */
  .mt-live .mt-more {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; vertical-align: middle;
    inline-size: 24px; block-size: 24px; margin-inline-start: 4px;
    padding: 0; border: 1px solid var(--border); border-radius: 50%;
    background: var(--surface); color: var(--text-muted);
    font: 700 13px/1 "IBM Plex Sans Arabic", system-ui, sans-serif;
    cursor: pointer; flex: none;
  }
  /* الهدف يُوسَّع بطبقةٍ مطلقة (بلا إعادة تدفّق). وهي تتجاوز صندوقها 10px،
     فقياسُ الفائض الأفقي عليها **شرطُ قبولٍ لا اطمئنان**: قِيس صفراً على 393
     و360 في الصفحات الخمس عشرة كلِّها، لأنّ حشو البطاقات يبتلع العشرة. */
  .mt-live .mt-more::before {
    content: ''; position: absolute;
    inset-block: -10px; inset-inline: -10px;   /* 24+20 = 44 */
  }
  .mt-live .mt-more[aria-expanded="true"] {
    background: var(--brand-action); color: #FFFFFF; border-color: var(--brand-action);
  }
  /* داخل جدولٍ ضيّق نكتفي بالحدّ الأدنى المقبول بصرياً */
  .mt-live td > .mt-more, .mt-live th > .mt-more { margin-inline-start: 2px; }

  /* ═══ ③ التسمية المكتوبة: ما قصُر يُقرأ بلا نقر أصلاً ═══════════════════
     «مرئيةٌ دائماً» أفضل من «تظهر بالنقر» — والقاعدة 24 تُقدّمها. */
  .mt-live .mt-lbl {
    display: block; margin-block-start: 2px;
    font-size: 11.5px; line-height: 1.35; font-weight: 600;
    color: var(--text-muted); letter-spacing: 0;
    overflow-wrap: anywhere;                 /* النموّ في الارتفاع لا العرض */
  }
  .mt-live td .mt-lbl, .mt-live th .mt-lbl { font-size: 12.5px; }  /* أرضيّة الجدول */

  /* التسمية داخل صندوق العنصر نفسه (زرٌّ أو شارةٌ تتّسع لحرف) */
  .mt-live .mt-lbl-host {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; flex-wrap: wrap;
  }
  .mt-live .mt-lbl-host > .mt-lbl {
    display: inline; margin-block-start: 0; font-size: 11.5px;
  }

  /* الأيقونة الضيّقة تُلَفّ في عمود فتنزل تسميتُها تحتها */
  .mt-live .mt-ico {
    display: inline-flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; max-inline-size: 100%; vertical-align: middle;
  }
  .mt-live .mt-ico > .mt-lbl { text-align: center; }

  /* ═══ ④ فكّ البتر: النصّ المقصوص يلتفّ حتى أربعة أسطر ═══════════════════
     ⛔ ولا يُلمس `display` الخليّة — الغلاف يُحقن بداخلها فتبقى `table-cell`. */
  .mt-live .mt-clip {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    overflow: hidden;
    white-space: normal !important;          /* ينسخ `nowrap` المصدر */
    text-overflow: clip;
    overflow-wrap: anywhere; word-break: break-word;
    max-inline-size: 100%;
  }
  /* مسارُ الخليّة (`td`/`th`) — نائمٌ اليوم لأنّ `_tables` يفكّ الجدول إلى
     بطاقات فلا تُقصّ خليّة (قِستُه: صفرٌ في كلّ الصفحات على 393 و360). ويبقى
     لجدولٍ لا يُحوَّل. ⛔ وبلا سقفِ عرضٍ مخترع: كنتُ كتبتُ `60vw` حَدْساً،
     وسقفٌ لم يُقَس على حالةٍ حيّة يضيّق خليّةً بلا سبب يوم يستيقظ. */
  .mt-live .mt-clip-host { white-space: normal !important; }

  /* ═══ ⑤ اللوحة الصغيرة — للنصّ القصير، ملتصقةً بمقبضها ═══════════════ */
  .mt-pop {
    position: fixed; z-index: 120;
    inset-block-start: 0; inset-inline-start: 0;
    inline-size: max-content;
    max-inline-size: min(320px, calc(100vw - 20px));
    box-sizing: border-box;
    padding: 10px 12px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--border); border-radius: var(--radius-m);
    box-shadow: var(--shadow-pop, var(--shadow));
    font: 500 13.5px/1.6 "IBM Plex Sans Arabic", system-ui, sans-serif;
    overflow-wrap: anywhere;
    /* 🪤 الإغلاق بـ`display:none` لا بإزاحةٍ خارج الشاشة: المُزاح يبقى محتوىً
       يُمرَّر إليه فيصنع فائضاً أفقياً — وهي علّة `aside.sidebar` بعينها. */
  }
  .mt-pop[hidden] { display: none; }
  .mt-pop .mt-pop-t { max-block-size: 40vh; overflow-y: auto; overscroll-behavior: contain; }

  /* رأسُ السهم — يشير إلى المقبض، ومكانه `--mt-ax` يحسبه المحرّك */
  .mt-pop .mt-pop-x {
    position: absolute; inset-inline-start: var(--mt-ax, 20px);
    inset-block-start: -6px; margin-inline-start: -6px;
    inline-size: 11px; block-size: 11px; rotate: 45deg;
    background: var(--surface);
    border-inline-start: 1px solid var(--border);
    border-block-start: 1px solid var(--border);
    border-start-start-radius: 2px;
  }
  .mt-pop.mt-up .mt-pop-x {
    inset-block-start: auto; inset-block-end: -6px; rotate: 225deg;
  }

  /* ═══ ⑥ الورقة السفليّة — للنصّ الطويل: كاملٌ · ملتفّ · قابلٌ للتحديد ═══ */
  .mt-sheet { position: fixed; inset: 0; z-index: 125; }
  .mt-sheet[hidden] { display: none; }
  .mt-sheet .mt-bd { position: absolute; inset: 0; background: rgba(10, 10, 10, .42); }

  .mt-sheet .mt-card {
    position: absolute; inset-inline: 0; inset-block-end: 0;
    box-sizing: border-box;
    max-block-size: 78vh; display: flex; flex-direction: column;
    background: var(--surface); color: var(--ink);
    border-start-start-radius: 18px; border-start-end-radius: 18px;
    border-block-start: 1px solid var(--border);
    box-shadow: var(--shadow-pop, var(--shadow));
    /* أرضيّةٌ لشريط التنقّل: النصّ لا يختبئ خلفه، ولا نعوم فوق زرّ فعل */
    padding-block-end: calc(var(--bsn-bottom, 58px) + 8px);
  }

  .mt-sheet .mt-hd {
    display: flex; align-items: center; gap: 8px;
    padding: 10px var(--bsn-gut, 12px);
    border-block-end: 1px solid var(--border);
  }
  .mt-sheet .mt-ttl {
    flex: 1; font-size: 14px; font-weight: 700; color: var(--ink);
  }
  .mt-sheet .mt-hd button {
    min-block-size: 44px; min-inline-size: 60px; padding: 0 14px;
    border-radius: var(--radius-s); cursor: pointer;
    font: 700 13px/1 "IBM Plex Sans Arabic", system-ui, sans-serif;
  }
  .mt-sheet .mt-cp { border: 1px solid var(--border); background: var(--bg-main); color: var(--ink); }
  .mt-sheet .mt-x  { border: 1px solid var(--brand-action); background: var(--brand-action); color: #FFFFFF; }

  .mt-sheet .mt-body {
    flex: 1; overflow: auto; overscroll-behavior: contain;
    padding: 12px var(--bsn-gut, 12px);
    font: 500 13.5px/1.75 "IBM Plex Sans Arabic", system-ui, sans-serif;
    color: var(--ink);
    white-space: pre-wrap; overflow-wrap: anywhere;
    -webkit-user-select: text; user-select: text;
    direction: rtl; unicode-bidi: plaintext;   /* قِيَمٌ لاتينية داخل صفحةٍ عربية */
  }

  /* ═══ ⑦ استثناءات مقيسة على أشكالٍ بعينها ══════════════════════════════
     هذه أشكالٌ في المصدر لا تُعالَج بقاعدةٍ عامّة، وقياسُها أوجب نصّها. */

  /* شريطُ الحصّة (`/finance` · `/manage`) ارتفاعه 6px — لا يسع رقمه، فينزل تحته.
     والغلافُ عمودٌ بعرض الشريط: نموٌّ في الارتفاع وحده. */
  .mt-live .mt-ico > .shr { inline-size: 100%; }

  /* أعمدةُ المخطّط (`/finance`) عرضها 20px — دون هدف اللمس. وحاويتُها
     `.bars` تُمرَّر أفقياً بنفسها، فتوسيعُها لا يمسّ عرض الصفحة. */
  .mt-live .bars .bar.mt-h { min-inline-size: 44px; flex: 1 0 44px; }
}


/* ───────── activation ───────── */
/* ═══════════════════════════════════════════════════════════════════════════
   ساحة التفعيل — طبقة الجوال  ·  activation.css
   ───────────────────────────────────────────────────────────────────────────
   كل ما في هذا الملف داخل نقطة الكسر الواحدة `@media (max-width: 767.98px)`.
   ولا قاعدة واحدة خارجها — فالديسكتوب (الجدول القابل للسحب، قرار #320) لم يشتكِ
   منه المالك، وكسرُه خسارةٌ صافية.

   البناء يتّكئ على ما بناه الزملاء ولا يعيده:
   الغلاف (`_shell.css`) يملك الرأس والشريط و`.dw` و`.toast` و`.sidebar` —
   فلا أكتب هذه المُميِّزات. و`_titles.*` يملك `title=` كلَّه — فلا أطبع تسميةً ثانية.
   و`_tables.*` لا شأن له هنا: الجدول مُخفى على الجوال أصلاً (`#tblwrap`).

   العلل المقيسة قبل العمل (Chrome، 393×852، is_mobile):
   ① الرأس التحكّمي يلتهم 358px من 794px — 45٪ من الشاشة قبل أوّل طلب.
   ② متوسط ارتفاع البطاقة 317px (أقصاها 422) ⇒ 10,751px تمريراً لـ32 طلباً.
   ③ الإيميل مقصوصٌ بثلاث نقاط داخل الرقاقة — تقنيعٌ صريح يخالف أمر المالك
      «التقنيع جعلها عديمة الفائدة للموظف» وقاعدة 24.
   ④ 41 هدف لمس دون 44×44، أغلبها `.qord` (53×23) وهو زرّ نسخ رقم الطلب.
   ⑤ الرقائق تتراصف سلّماً مُشوَّهاً (320 ثم 264 ثم 84) وحولها فراغٌ أبيض.
   ⑥ شارة الحالة — «رأس مال الموظف» بنصّ المالك — أصغر شيء في البطاقة (10.5px)،
      بينما على الديسكتوب `.bdg.lead` بـ13.5px. أي أنّ أمر المالك سقط في الجوال.
   ⑦ في درج البطاقة `#dw`: أزرار النسخ `.cp` بـ`opacity:0` لا تُكشف إلا بالتحويم —
      ولا تحويم على اللمس (قاعدة 24)، فهي غير موجودة عملياً للموظف.

   🔒 وحصرُ النطاق مقصودٌ ومقيس، لا زخرفةَ مُميِّزات: `grep -l` على صفحات الحوض
      كشف أنّ `.pulse`/`.pz` مشتركةٌ مع `keys` و`conn`، و`.tools` مع `desk` و`index`
      و`keys` و`log` و`subs`، و`.empty` مع عشرٍ منها. فكلّ قاعدةٍ تمسّ واحدةً من
      هذه سُبقت بـ`body:has(#tblwrap)` — و`#tblwrap` في `activation.html` وحدها.
      وما كان حصرياً أصلاً (`qrow` · `qtop` · `chips` · `qact` · `qnote` · `meta-line`
      · `newbar` · `tgl2` · `refbtn` · `#cards`) تُرك بلا حارسٍ لأن الحارس عندئذٍ
      وزنٌ زائدٌ يُصعّب على المنسّق نقلَ الكتلة.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* رمزٌ خاصّ بهذه الصفحة وحدها — ارتفاع شريط المصافي اللاصق، تتّكئ عليه
     `.newbar` كي لا تختفي تحته. البادئة `--act-` تمنع أي تصادم. */
  :root { --act-rail: 57px; }  /* 6+44+6 حشواً وارتفاعاً + 1px حدّاً سفلياً — مقيس */

  /* ═══ ٠ · واقعةٌ مقيسة تُقيَّد ولا يبقى لها حارس ═══════════════════════
     وجدتُ الصفحة **بيضاءَ تماماً** أثناء العمل، والقياس بالحقل لا بالانطباع:
       · `document.elementFromPoint(196,400)` ⟵ `ASIDE#dw.dw`، `position:fixed`،
         `z-index:101`، `background rgb(255,255,255)`، `393×852` — أي أنّ الدرج
         **المغلق** يغطّي الصفحة كلَّها.
       · شاهد الضبط: تعطيل `desk.css` وحدها يُعيد الرسم (اللقطة 7,356 بايت ⟵
         134,777)؛ وتعطيل أيّ ملفٍّ آخر لا يغيّر شيئاً.
       · السبب: `desk.css` كتبت `#dw:not([hidden]){display:flex}` بلا حصر، و
         `activation.html` و`index.html` تكتبان `#dw` **بلا سمة `hidden`** (بخلاف
         `desk/users/keys/subs`) — فالنفي يصدُق دائماً في هاتين الصفحتين.
     🟢 وقد **أصلحها صاحبُها في المنبع** (صارت `body:has(#board) #dw:not([hidden])`)،
        فقياسٌ بعده يقول: مع ملفّي أو بدونه `#dw` مغلقٌ `display:none` وعرضُه 0.
     ⛔ ولذلك **حذفتُ حارسي** الذي كتبتُه وقتها: حارسٌ على عطبٍ زال يبقى مُميِّزاً
        أعلى (1,1,1) يبتلع صامتاً أيَّ تجاوزٍ مشروعٍ يأتي بعده — وهو عين الفخّ
        الذي نتجنّبه. والقيد هنا لتبقى الواقعة معلومةً لمن يقرأ. */

  /* ───────────────────────────────────────────────────────────────────────
     ① شريط المصافي (`.pulse`) — بوصلة الموظف، فتلزَم أن تبقى في يده
     كان صفَّين (96px) يمضيان مع التمرير. صار صفّاً واحداً (56px) **لاصقاً**:
     يظلّ معه طوال 10,751px من التمرير بدل أن يُرى مرّة ويُفقد.
     والتمرير الأفقي هنا مقصودٌ ومُعلَن — الرقاقة الثالثة تُرى مقصوصةً فيُعرف
     أنّ خلفها المزيد — وهو محصورٌ في الشريط نفسه لا في الصفحة (عقد الغلاف ⑤٢).
     ─────────────────────────────────────────────────────────────────────── */
  body:has(#tblwrap) .dashboard-scroll > .pulse {
    position: sticky; top: 0; z-index: 30;      /* ≤40 — عقد الغلاف ⑤٤ */
    display: flex; flex-wrap: nowrap;
    gap: 7px; margin: 0 0 10px;
    /* حافة إلى حافة: الحاوية حشوُها 12px، فنُلغيها ونعيدها داخلاً.
       الصندوق يبقى 393 فلا فائض — قِيس. */
    margin-inline: calc(var(--bsn-gut, 12px) * -1);
    padding: 6px var(--bsn-gut, 12px);
    background: var(--bg-main);
    /* 🪤 الحاوية حشوُها العلويّ 12px، والعنصر اللاصق يقف عند 70 لا 58 — فتبقى
       نافذةٌ 12px تُرى منها حافّةُ البطاقة وهي تمرّ فوقه. الظلّ المصمت يسدّها
       بلا إزاحةٍ ولا حشوٍ يغيّر الارتفاع المقيس. */
    box-shadow: 0 -14px 0 var(--bg-main);
    border-block-end: 1px solid var(--border);
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  body:has(#tblwrap) .dashboard-scroll > .pulse::-webkit-scrollbar { display: none; }

  body:has(#tblwrap) .pulse .pz {
    flex: 0 0 auto; scroll-snap-align: start;
    min-height: 44px; padding: 8px 13px; gap: 8px;
  }
  body:has(#tblwrap) .pulse .pz .num { font-size: 16px; }
  body:has(#tblwrap) .pulse .pz .txt { font-size: 12px; }
  /* المُختارة تُعرف بلونها لا بظلٍّ باهت — الإصبع لا يحوم ليتأكّد */
  body:has(#tblwrap) .pulse .pz.on {
    border-color: var(--ink);
    background: var(--surface-hover, var(--bg-main));
    box-shadow: inset 0 0 0 1px var(--ink);
  }

  /* `.newbar` لاصقةٌ عند 0 في المصدر — فكانت ستختفي تحت الشريط. تنزل تحته. */
  .newbar { top: var(--act-rail); z-index: 29; }
  .newbar button { min-height: 44px; padding: 8px 18px; font-size: 12.5px; }

  /* ───────────────────────────────────────────────────────────────────────
     ② صفّ الأدوات — شبكةٌ لا فيضٌ متعرّج
     كان `flex-wrap` يرصفها سلّماً مُوسّطاً (بحث · مُنتَج+تاريخ · إخفاء+تحديث)
     بعروضٍ مختلفة. صار شبكةً بعمودين: كلّ شيء بعرضٍ واحد وحافّة واحدة.
     والارتفاع كما كان تقريباً — الربح في الانتظام لا في البكسل.
     ─────────────────────────────────────────────────────────────────────── */
  body:has(#tblwrap) .dashboard-scroll > .tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px; margin-bottom: 8px; align-items: stretch;
  }
  body:has(#tblwrap) .tools input[type=search] {
    grid-column: 1 / -1;
    width: 100%; min-width: 0; flex: none;
    min-height: 44px; padding: 9px 13px; font-size: 13px;
    border-radius: var(--radius-m);
  }
  body:has(#tblwrap) .tools select {
    width: 100%; max-width: none; min-width: 0;
    min-height: 44px; padding: 9px 8px; font-size: 12.5px;
    border-radius: var(--radius-m);
  }
  body:has(#tblwrap) .tools .tgl2,
  body:has(#tblwrap) .tools .refbtn {
    width: 100%; min-height: 44px; justify-content: center;
    padding: 8px 9px; border-radius: var(--radius-m);
    font-size: 12px;
  }
  /* المربّع 14px كان أصغر من أن يُرى؛ واللمس يقع على البطاقة (الـlabel) كاملةً. */
  body:has(#tblwrap) .tools .tgl2 input { width: 20px; height: 20px; flex: none; }

  .meta-line { font-size: 11.5px; gap: 4px 12px; margin: 0 0 10px; line-height: 1.5; }

  /* ───────────────────────────────────────────────────────────────────────
     ③ البطاقة — ثلاث فرق واضحة: مَن · ما · افعل
     ─────────────────────────────────────────────────────────────────────── */
  #cards .qrow {
    padding: 12px 12px 11px; margin-bottom: 8px;
    border-radius: 14px;
    border-inline-start-width: 3px;            /* حافّة الحالة — عرضٌ ثابت فلا يقفز */
  }
  #cards .qrow.done { border-inline-start-color: var(--c-ok); opacity: .62; }
  /* `.qrow.hold` تحمل حافّتها الحمراء من المصدر — لا تُنازَع */

  /* ── فرقة «مَن»: رقم الطلب + كل الشارات في صفٍّ واحد ── */
  #cards .qrow .qtop {
    align-items: center;
    gap: 2px 7px;
  }
  /* زرّ نسخ رقم الطلب — كان 53×23 (52٪ من هدف اللمس). صار 44 ارتفاعاً،
     وخطٌّ منقّط تحته يقول للإصبع «أنا أُنقر» بلا تحويمٍ ولا `title`. */
  #cards .qrow .qtop .qord {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-inline: 2px;
    font-size: 15.5px; font-weight: 700;
    border-block-end: 1px dotted var(--text-muted);
  }
  /* شارة الحالة «رأس مال الموظف» (أمر المالك 2026-08-26) — تعود لحجم
     `.bdg.lead` الذي أمر به على الديسكتوب، لأن الأمر لم يكن عن الشاشة بل عن
     المعلومة. 10.5px ⟵ 12.5px، والارتفاع 21 ⟵ 28. */
  #cards .qrow .qtop .bdg {
    font-size: 12.5px; font-weight: 700;
    min-height: 28px; padding: 5px 11px; border-radius: 9px;
    display: inline-flex; align-items: center;
  }
  /* ── فرقة «ما»: اسم المنتج سطراً كاملاً تحت الشارات ──
     كان يُزاحم الشارات فينكسر في منتصفه ويبدو مُوسَّطاً بلا سبب. */
  #cards .qrow .qtop .qprod {
    order: 9; flex: 1 1 100%; min-width: 0;
    font-size: 14px; font-weight: 700; line-height: 1.35;
    margin-block-start: 0;
  }

  /* ── رقائق النسخ: بيانٌ كامل، بلا ثلاث نقاط ──
     ⛔ حذفُ نصف الإيميل ليس اختصاراً بل تقنيع. `flex-grow` يملأ الصفّ فيذهب
     السلّم الأبيض، و`overflow-wrap` يلفّ الطويل بدل أن يقصّه. */
  #cards .qrow .chips { gap: 6px; margin-top: 8px; }
  #cards .qrow .chips .chip {
    flex: 1 1 auto; min-width: 0;
    min-height: 44px; padding: 7px 9px;
    border-radius: 10px; font-size: 12.5px;
    align-items: center; gap: 6px; text-align: start;
  }
  #cards .qrow .chips .chip > small { flex: 0 0 auto; font-size: 10.5px; }
  /* علامةُ نسخٍ صامتة: الرقاقة تشبه حقل إدخالٍ فلا يُخمَّن أنها تُنقر.
     زخرفةٌ لا معلومة — القيمة كلُّها ظاهرةٌ قبلها. */
  #cards .qrow .chips .chip::after {
    content: '\29C9'; flex: 0 0 auto; margin-inline-start: auto;
    font-size: 13px; color: var(--text-muted); line-height: 1; opacity: .75;
  }
  #cards .qrow .chips .chip > span.v {
    flex: 1 1 auto; min-width: 0; max-width: none;
    white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere; line-height: 1.35; text-align: start;
  }

  /* ── ملاحظة الموظف: كانت 343×28 وهي مِفتاحُ نافذة الكتابة (`data-act`) ── */
  #cards .qrow .qnote {
    display: flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 8px 11px;
    border-radius: 10px; font-size: 12.5px; line-height: 1.4;
  }

  /* ── فرقة «افعل»: فعلٌ واحد لا يُخطئه الإبهام، ثم أربعة معاونين ──
     كانت خمسة أزرار متساوية الوزن تلتفّ صفَّين متعرّجين، و«تم التفعيل»
     — وهو كلّ غرض الساحة — بعرض 94px بينها. */
  #cards .qrow .qact {
    /* 🪤 جرّبتُ `grid-template-columns: repeat(auto-fit, …)` فسقط: الزرّ الأساسي
       يمتدّ `1 / -1` فيملأ كلّ المسارات، فلا يبقى مسارٌ فارغٌ ليُطوى — والنتيجة
       المقيسة أنّ زرّين ثانويّين يقفان في 72.5px×2 ويُترك نصف الصفّ فارغاً.
       فالمرن أصدق هنا: `flex` يقسم السطر على ما فيه مهما كان عددهم 1..4،
       والأساسي بأساسٍ 100٪ ينفرد بسطره فوقهم. */
    display: flex; flex-wrap: wrap;
    gap: 6px; margin-top: 9px;
  }
  #cards .qrow .qact .ib {
    flex: 1 1 68px; min-width: 0;
    height: 44px; padding: 0 4px;
    font-size: 11px; border-radius: 10px; gap: 3px;
  }
  #cards .qrow .qact .ib.pri {
    flex: 1 1 100%;
    height: 48px; font-size: 14.5px; font-weight: 700;
    border-radius: 12px; letter-spacing: .2px;
  }

  /* `.empty` مشتركةٌ مع عشر صفحات — فتُحصر كما حُصرت أخواتها. */
  body:has(#tblwrap) .empty { padding: 40px 16px; font-size: 13px; }

  /* ───────────────────────────────────────────────────────────────────────
     ④ درج البطاقة `#dw` — يُفتح من هذه الصفحة بزرّ «🪪 البطاقة»
     ⚠️ **للمنسّق: موضعُ هذه القواعد الصحيح `customer.css` لا هنا.**
     كنتُ قد كتبتُ في الدرج ستّ قواعد (`.cp` · `.idrow` · `.vl` · `.lb` · `.sech`
     · `.x` · `.act`) لعلّتين قِستُهما: أزرارُ النسخ بـ`opacity:0` لا تُكشف إلا
     بالتحويم — ولا تحويم على اللمس — وإيميلٌ طويلٌ يخرج ‎-9→375‏ فيُبتر أوّلُ حرفه.
     ثمّ نزل `customer.css` (وهو مالك الدرج بنصّ ترويسته: «`.dwh` · `.idrow` ·
     `.sec` …») **فعالج العلّتين**: قياسٌ بملفّي مُعطَّلاً يردّ `ov:0` و`invisCp:0`.
     ⇒ فحذفتُ ما صار مكرَّراً — ولا سيّما أنّ قواعده شبكةٌ (`grid-area: cp`)
        وقواعدي مرنة، وتغليبُ مرنٍ على شبكةٍ في صفحةٍ دون أخرى يجعل **المكوّن
        الواحد وجهين**، وهو أسوأ من العلّة الأولى.

     وبقي ما لم يبلغه: `‎.x‎` 32×32 و`a.act/button.act/span.act` بارتفاع 31 —
     **15 هدف لمسٍ دون 44** يبلغها موظّفي من صفحتي. فأضبطها بالحدّ الأدنى وحده
     (لا شكلاً ولا لوناً)، محصورةً بصفحتي كي لا أنازع المالك في صفحته،
     🔁 **ومكانها الصحيح `customer.css`: فلتُنقل إليه وليُرفع الحصر** — عندئذٍ
     يستوي الدرج على كل الصفحات، وهو المطلوب.
     ولا أكتب `.dw` ولا `.dwb` أنفسهما — هما للغلاف (عقده ④).
     ─────────────────────────────────────────────────────────────────────── */
  /* 🔒 وكلُّها `min-*` لا مقاساً مصمتاً — عمداً: لو رفعها مالكُ الدرج غداً فوق 44
     أخذنا رقمَه هو، ولو خفضها بقي حدُّ قاعدة 24 قائماً. فالقاعدة أرضيّةٌ لا سقف،
     ولا أُنازعه في تصميمٍ بل في حدٍّ لا يجوز النزول عنه. */
  body:has(#tblwrap) #dw .x { min-width: 44px; min-height: 44px; font-size: 16px; }
  body:has(#tblwrap) #dw a.act,
  body:has(#tblwrap) #dw button.act,
  body:has(#tblwrap) #dw span.act { min-height: 44px; padding-block: 8px; }
  /* رأسُ القسم هو مفتاحُ الطيّ نفسه (`wireFold` يربط النقر عليه) — قِيس 26px */
  body:has(#tblwrap) #dw .sec > .sech { min-height: 44px; }
}


/* ───────── board ───────── */
/* ══════════════════════════════════════════════════════════════════════════
   لوحة القيادة على الجوال — `board.css`
   صفحةُ أرقامٍ ولوحات: الموظف يفتحها ليقرأ حالة اليوم بنظرة. فالمقياس هنا
   **كم رقماً يراه قبل أن يمرّر**، لا كم عنصراً رتّبناه.

   ❶ **العلّة الجذرية للتشوّه — مقيسة لا مُرجَّحة (قاعدة 20):**
      `board.html` يكتب في `<style>` السطري `.daterow{display:flex;flex-wrap:wrap}`،
      و`basin.css:424` يكتب `.grid,.g2,.g4,.fgrid,.kindgrid,.daterow{display:grid}`.
      والوزن متساوٍ (0,1,0) **ورابط `basin.css` بعد الـ`<style>`** — فيفوز الأخير.
      فصار الشريط شبكةً بعمودٍ واحد، وعرضُ العمود = `min-content` لأعرض أبنائه
      وهو `.dbox` (حقلا تاريخ 126px + زرّ) = **392px** على حاويةٍ عرضها 369.
      ⇒ نتيجتان مقيستان في نداءٍ واحد:
        • الأزرار السبعة **صفٌّ لكلٍّ منها بعرض الشاشة** (ارتفاع الشريط 358px)،
          فتُستهلك الشاشة كلها قبل أن يُرى رقمٌ واحد — وهو «المشوّه» الذي وصفه المالك.
        • `scrollWidth` = **404px** على 393 و**404** على 360 (بلا تصغير كروم):
          والفائض كلُّه من هذا العمود وحده — لا من الجداول.
      ⇒ والعلاج سطران: تُعاد `.daterow` شبكةً **متعدّدة الأعمدة** (`auto-fit`)
        ويُمنح `.dbox` صفَّه كاملاً. فيسقط الفائض ويسقط معه رصُّ الأزرار.

   ❷ **الرصّ الثاني: لوحٌ داخل لوح.** `basin.css:315` يعطي `.sec` خلفيةً وحدّاً
      و**حشواً 20px**، وهي في الأصل لأقسام درج العميل (`.dwb .sec`) لا لأقسام
      اللوحة. فكانت البطاقات البيضاء تسكن لوحاً أبيض داخل لوحٍ أبيض، وتخسر
      **40px من 393** بلا معنى. فتُسطَّح على الجوال وتُترك البطاقة هي اللوح.

   ❸ **ما لم أفعله عمداً:** لم أُعِد ترتيب القسمين. صاحب الصفحة كتب بيده
      `<!-- ═══ التعويض: صدر اللوحة ═══ -->` — فالتعويض قبل المبيعات **قرارُ
      تحريرٍ منه لا سهو**، ومن يرتّب ما لا يفهمه يُنتج جمالاً بلا نفع.

   ⚖️ **حدود ملكيّتي:** لا ألمس `overflow` أيّ حاوية تمرير (`.tw` منها — وقد
      حذّر منها `_tables` نصّاً: هي شبكةُ الأمان الأخيرة)، ولا الرأس ولا الشريط
      ولا بطاقات `_tables` ولا `title=` (تلك لـ`_titles`). ولا أخترع لوناً:
      كلُّ لونٍ هنا رمزٌ من `basin.css`.

   🔒 **كلُّ مُميِّزٍ هنا مقصورٌ على هذه الصفحة** — إمّا بمُعرِّفٍ (`#presets`
      `#rnote` `#kinds` `#fin` `#foot`) أو بصنفٍ لا يوجد إلا فيها (تُحقَّق
      بالجرد: `.daterow` · `.tw` · `.sec` · `.big` · `.split` · `.rangenote`
      حصريّة لـ`board.html`)، أو بأبٍ حصريّ (`.shell > .sec` · `.daterow .dbox`
      — و`.dbox` و`.pill` مشتركتان مع صفحاتٍ أخرى فلا تُمسّان إلا تحت أبيهما).
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* ═══ ١ · صدر الصفحة: مسافةٌ لا تُهدر ═══════════════════════════════════
     `.shell` يأخذ `padding:24px` من `basin.css`، والغلاف يضبط الجانبين
     والأسفل فقط — فيبقى 24px فوقَ رأسٍ لاصقٍ له هامشه أصلاً. والمُميِّز
     `:has(> #presets)` يقصر هذا على اللوحة وحدها فلا تُمسّ الصفحات الأخرى. */
  .shell:has(> #presets) { padding-block-start: 8px; }


  /* ═══ ٢ · شريط المدى — من سبعة صفوف إلى صفّين ═══════════════════════════
     `auto-fit` + `minmax` تقسّم الشريط أربعة أعمدة على 393 و360 معاً،
     والنصّ يلتفّ داخل الشريحة (لا `nowrap`) فلا يدفع عموداً فيفيض. */
  .daterow {
    display: grid;
    /* 🔢 76px مقيسٌ لا مذوَّق: أربعة أعمدة على 393 **وعلى 360 معاً**
       (⌊(336+8)/(76+8)⌋ = 4) ⇒ صفّان لا ثلاثة. و80px تُسقِط 360 إلى ثلاثة. */
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 8px;
    padding: 0;
    margin: 0 0 10px;
  }

  /* الشريحة: هدف لمسٍ حقيقيّ 44px — كانت 21px (٠٫٤٨ من الحدّ الأدنى) */
  #presets .pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 6px 8px;
    font-size: 12.5px; font-weight: 600; line-height: 1.25;
    text-align: center; white-space: normal; overflow-wrap: break-word;
    border-radius: 999px; border: 1.5px solid var(--border);
    background: var(--surface); color: var(--ink);
    box-shadow: none;
  }
  /* المختارة تبقى بلون الصفحة نفسه (حبرٌ داكن) — لا لونَ جديداً يُخترع.
     ⚠️ ولا بدّ من إعادة تصريحها: مُميِّزي (1,1,0) يغلب `.pill.on` (0,2,0). */
  #presets .pill.on {
    background: var(--ink); border-color: var(--ink); color: #FFFFFF; font-weight: 700;
  }

  /* صندوق المدى المخصّص — صفٌّ كامل تحت الشرائح، لا عمودٌ يفيض بجانبها */
  .daterow .dbox {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 2px 0 0;
    border-radius: var(--radius-m);
    box-shadow: none;
  }
  .daterow .dbox span {
    font-size: 12.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap;
  }
  /* الحقل كان 126px ثابتاً — وهو أصل الـ392px. يصير مرناً وبارتفاع لمس. */
  .daterow .dbox input {
    width: 100%; min-width: 0; height: 44px;
    padding: 0 8px;
    font-size: 13px; color: var(--ink);
    background: var(--bg-main);
    border: 1px solid var(--border); border-radius: var(--radius-s);
  }
  /* «اعرض» يمتدّ على الصفّ: فعلٌ واحد واضح، لا زرٌّ 49×23 بين الحقول.
     ومحدَّدٌ بحدّ الحبر لا مملوءاً به: الشريحة المختارة فوقه سوداء مملوءة،
     وكتلتان سوداوان متتاليتان تتنازعان النظر — وهذا زرٌّ ثانويّ لا أوّل. */
  .daterow .dbox #go {
    grid-column: 1 / -1;
    width: 100%; min-height: 44px; margin-top: 2px;
    font-size: 13px; font-weight: 700;
    background: var(--surface); border: 1.5px solid var(--ink); color: var(--ink);
  }

  /* سطر «المدة … تُقارن بـ …» — هو الذي يخبر الموظف ماذا يقرأ */
  #rnote {
    font-size: 12.5px; line-height: 1.65; color: var(--text-muted);
    padding: 0; margin: 0 0 2px;
  }


  /* ═══ ٣ · تسطيح اللوح الحاوي — 40px تعود إلى المحتوى ═══════════════════ */
  .shell > .sec {
    background: none; border: 0; border-radius: 0;
    padding: 0; margin: 18px 0 0; box-shadow: none;
  }
  .shell > .sec > h2 {
    font-size: 17px; line-height: 1.35; margin: 0 0 3px; gap: 6px;
  }
  .shell > .sec > p { font-size: 12.5px; line-height: 1.55; margin: 0 0 8px; }


  /* ═══ ٤ · لوحات الأرقام — عمودان، والرقم هو البطل ══════════════════════
     عمودان لا عمود: العدّاد وحده لا يعني شيئاً بلا جاره (وهي قاعدة الصفحة
     المكتوبة في `board.js`: «الرقم بلا نظيره ليس معلومة»). */
  .shell > .sec .grid { gap: 10px; margin-top: 10px; }
  .shell > .sec .grid.g4 { grid-template-columns: repeat(2, 1fr); }
  .shell > .sec .grid.g2 { grid-template-columns: 1fr; }
  .shell > .sec .card {
    padding: 12px 13px; margin-bottom: 0; border-radius: var(--radius-m);
    min-width: 0;
  }
  .shell > .sec .card h3 { font-size: 12px; line-height: 1.35; margin: 0 0 5px; }
  .shell > .sec .big { font-size: 24px; line-height: 1.2; overflow-wrap: break-word; }
  .shell > .sec .big small { font-size: 12.5px; }
  .shell > .sec .delta {
    font-size: 11.5px; padding: 3px 8px; margin-top: 6px;
    max-width: 100%; white-space: normal;
  }
  .shell > .sec .sub2 { font-size: 12px; line-height: 1.6; margin-top: 5px; }
  .shell > .sec .split { gap: 6px; margin-top: 8px; }
  .shell > .sec .split div { font-size: 12px; padding: 5px 9px; }
  /* الشارة أدنى مقاسٍ مسموح لها §18 هو 11 — كانت 10.5 */
  .shell > .sec .badge { font-size: 11px; padding: 2px 8px; }
  .shell > .sec .st { font-size: 11px; padding: 3px 8px; }


  /* ═══ ٥ · تنبيه الصفوف الملوّثة — يُقرأ لا يُتخطّى ═════════════════════ */
  .shell > .sec .note {
    font-size: 12.5px; line-height: 1.65; padding: 10px 12px;
    border-radius: var(--radius-m); margin-top: 10px;
  }


  /* ═══ ٦ · صندوق أحدث الحالات ═══════════════════════════════════════════
     ⛔ `overflow` هنا **ليس ملكي**: `_tables` يحذّر أنه شبكة الأمان الأخيرة
        إن أفلت عرضٌ من القياس. فلا أغيّره — أغيّر ارتفاعه ولونه وعنوانه فقط.
     🪤 والصندوق يمرّر 12,170px داخل 460px (٢٦ ضِعفاً) بلا أيّ عنوانٍ يقول
        ما هو ولا أيّ أثرٍ يقول إنه يمرّر — فيبدو للإبهام «صفحةً عالقة».
        فيُعطى: عنواناً لاصقاً + ظلّاً داخلياً سفلياً يقول «تحته المزيد». */
  .tw {
    /* `min()` لا `vh` وحدها: على الهاتف تقيس `vh` أطولَ حالةٍ للنافذة (بلا شريط
       المتصفّح) فيخرج الصندوق عن المرئيّ، وسقفٌ ثابت يبتلع شاشةً قصيرة. */
    max-height: min(62vh, 560px);
    background: var(--bg-main);
    border-radius: var(--radius-m);
    box-shadow: inset 0 -20px 14px -12px rgba(26, 26, 26, .22);
  }
  /* عنوانٌ لاصق داخل الصندوق — الجدول في المصدر بلا عنوان، وعلى الديسكتوب
     تشرحه رؤوسُ الأعمدة. وهي تختفي في وضع البطاقات، فيبقى الصندوق بلا اسم. */
  .tw::before {
    content: "أحدث الحالات — مرِّر داخل الصندوق";
    position: sticky; top: 0; z-index: 2;
    display: block; padding: 9px 12px;
    font-size: 12px; font-weight: 700; color: var(--text-muted);
    background: var(--bg-main); border-bottom: 1px solid var(--border);
    border-radius: var(--radius-m) var(--radius-m) 0 0;
  }
  /* احتياط: رأسٌ لاصق داخل صندوقٍ يمرّر يُلصَق بحافّته هو لا بحافّة الشاشة.
     (`board.html` يكتب `th{top:52px}` مقيساً على رأس الديسكتوب.) */
  .tw th { top: 0; }
  .shell > .sec .empty { padding: 22px 12px; font-size: 12.5px; }


  /* ═══ ٧ · جدولا «نوع التعويض» و«الهامش» — يبقيان جدولين ════════════════
     عمودان وثلاثة: `_tables` لا يحوّلهما (وهو الصواب — «مفتاح/قيمة» تخطيطٌ
     لا بيانات). فيُضبط حشوُهما ومقاسُهما فقط. */
  #kinds table, #fin table { font-size: 12.5px; }
  #kinds td, #fin td { padding: 9px 8px; font-size: 12.5px; line-height: 1.5; }
  #kinds td:last-child { white-space: nowrap; }
  /* 🪤 مقيس: عمودُ الشهر انكسر «2026-» / «09» سطرين — نصيبه 54px ومحتواه ~63.
     ⛔ والعلاج ليس `white-space:nowrap`: `_tables` يفرض `normal !important` على
        كل جدولٍ لم يُحوَّل، وهي شبكةُ أمانه ضدّ الفيض (قِيست على `/case`).
        فلا أرفع صوتي فوق صوته — أُوسِّع العمود بتلميح عرضٍ فيزول سببُ الكسر. */
  #fin td:first-child { width: 5.4em; }
  #fin td:nth-child(2) { width: 7.2em; }
  /* 🪤 عمود الملاحظة في «الهامش» يحمل `style="font-size:11px"` سطرياً —
     و11px دون حدّ الجدول (12.5) في §18. والسطريّ لا يُغلَب إلا بـ`!important`،
     فهو مقصورٌ على هذه الخاصّة وحدها في هذا العمود وحده. */
  #fin tr > td:nth-child(3) { font-size: 12.5px !important; line-height: 1.55; }
  #fin .note { margin: 0; }


  /* ═══ ٨ · ذيل الصفحة — «آخر سحب من الشيت» شرطُ تصديق كلّ رقمٍ فوقه ═════ */
  #foot { font-size: 12px; line-height: 1.75; margin-top: 16px; padding-top: 10px; }
}


/* ───────── conn ───────── */
/* ══════════════════════════════════════════════════════════════════════════
   `/conn` — الربط والتكاملات على الجوال  ·  `conn.css`
   ──────────────────────────────────────────────────────────────────────────
   **العلّة المقيسة (قبل، Chrome 393×852 و360، `is_mobile`):** الصفحة تبني
   **40 صفّاً `div.crow`** فليكساً أفقياً داخل `.cpanel{overflow:hidden}`.
   والصفّ لا يسع في 393px، فما زاد **يُقصّ ولا يُرى ولا يُمرَّر إليه**:
   **327 عنصراً خارج الشاشة على 393** و**367 على 360**. ومنها أدواتُ العمل:
     · `span.cacts` (زرّا **فحص** و**تعديل**) عند `-231→-122` — **خارج الشاشة
       تماماً**، فالموظّف لا يقدر أن يفحص رابطاً ولا أن يعدّله من هاتفه أصلاً.
     · `span.st.active` (الحالة) عند `-109→-65` — **فلا يعرف أيّ ربط معطَّل**.
     · `span.cmain` عرضه **586px** لأن `min-width:210px;flex:0 0 auto` تمنعه
       من التقلّص — وهو الذي يدفع البقيّة خارج الشاشة.
   ومعها سطرٌ في `<style>` الصفحة نفسها:
     `@media(max-width:760px){.cauth,.chk{display:none}}`
   يحذف **نوع المصادقة وموضع السرّ ونتيجة آخر فحص**. أي أن ما بقي على الجوال
   لم يكن جدولاً مضغوطاً بل **سجلَّ أسماءٍ بلا حالةٍ ولا فعل**.
   ومعها **137 هدف لمسٍ دون 44×44** (أصغرها `.cpy` بـ19.6×22 و`.cbt` بـ29
   ارتفاعاً)، ودُرجٌ عرضُه 440px يُخفى بـ`inset-inline-end:-460px`.

   **العلاج: الصفّ الأفقيّ يصير بطاقةً رأسية.** لا يُحذف حقلٌ ولا يُقنَّع،
   وترتيبُها بحسب ما يفعله الموظّف: **النوع والاسم والحالة** ترويسةً، ثم
   **الموضع** (وهو غرض الصفحة المعلن: «سجلّ المواضع لا خزنة الأسرار»)، ثم
   **المصادقة وآخر فحص**، ثم **الأفعال** في متناول الإبهام أسفل البطاقة.
   والدُرج يصير **ورقةً سفليّة**.

   ── ما لا أملكه فلا أنازع عليه ──────────────────────────────────────────
   · **`.pulse` (مصفاة الحالة) لزميل التفعيل** — بناها في `activation.css`
     شريطاً **لاصقاً** ذا انزلاقٍ أفقيّ مقصود ومُعلَن بمُميِّز `.dashboard-scroll
     > .pulse` (0,2,0) وهو يسري على صفحتي أيضاً. **فحذفتُ قواعدي عنها كلَّها**:
     تكرارُها يورث تصادماً صامتاً عند التركيب، والفائدة عندي أكبر منها عنده —
     المصفاة تبقى في يد الموظّف على امتداد أربعين بطاقة.
   · **`title=` كلُّه لـ`_titles`** — لا أطبع تسميةً ثانية.
   · **الرأس والشريط و`.sidebar` للغلاف** — و«فحص الكل» و«إضافة ربط» ينتقلان
     إلى لوح «أدوات» بحكمه، وكلاهما فعلٌ نادر في هذه الصفحة لا يستحقّ صفّاً دائماً.

   ⚠️ **وأربعة مُميِّزات رُفعت درجةً عمداً لا زخرفةً:** `desk.css` يكتب `.cpy`
      و`.empty-state` **بلا نطاق**، وهو يُحمَّل بعدي أبجدياً (c ثمّ d) فيغلبني
      بترتيب المصدر. فما يخصّ بطاقتي أسنَدتُه إلى `.crow >` و`.cpanel` —
      🪤 وهذا مقيس لا محتاط: `.cpy{min-height:34px}` عنده كانت تغلب ارتفاعي.

   ⛔ ولا قاعدة خارج `@media (max-width: 767.98px)` — الديسكتوب كما هو.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* ═══ ⓪ رقاقة الحالة بعرض محتواها — في شريط الزميل لا فوقه ═══════════════
     `<style>` الصفحة تكتب `.pz{min-width:150px}` وهي مقاسُ **صفَّين عريضين
     على الديسكتوب**. وفي الشريط المنزلق تعني خمس رقاقات × 150 = **750px**،
     أي رقاقتان ونصف تُرى من خمس. وبعرض المحتوى تصير 493px فيُرى منها
     ثلاثٌ والرابعةُ مقصوصة — وهو ما قصده صاحب الشريط نصّاً.
     ⚠️ والنطاق `.pulse:has(+ .ktabs)` **لأن `#pulse` مشتركٌ مع `/activation`**
        و`.ktabs` لا توجد إلا في هذه الصفحة — فلا يتسرّب مقاسي إلى صفحته. */
  .pulse:has(+ .ktabs) .pz { min-width: 0; }


  /* ═══ ① ألسنة النوع — المصفاة الثانية ═══════════════════════════════════
     كانت 33px ارتفاعاً (دون 44). ولا تُجعل لاصقةً هي الأخرى: شريطان لاصقان
     يأكلان 110px من 852، والتصفية بالنوع تُطلب مرّةً والحالةُ مرّات. */
  .ktabs { gap: 7px; margin-bottom: 12px; }
  .ktab {
    min-height: 44px; padding: 0 15px; font-size: 13px;
    display: inline-flex; align-items: center;
  }
  /* 🪤 «Webhooks11» ملتصقة في اللقطة: العدد رقمٌ ضعيف الاتجاه يلتحق بالكلمة
     اللاتينية في مقطعها LTR، و`margin-inline-start` في RTL يضع الفراغ على
     الجهة **البعيدة** عن الكلمة. فالفراغ يُطلب من الجهتين معاً. */
  .ktab .n { margin-inline: 4px; font-size: 11.5px; }


  /* ═══ ② اللوح يُفتح والصفوف تصير بطاقات ═════════════════════════════════
     `overflow:hidden` على اللوح هو ما جعل العطب **صامتاً**: القياس يقول
     «صفر فائض أفقي» بينما نصف كل صفٍّ مقصوصٌ لا يُرى ولا يُبلَغ. */
  .cpanel {
    background: none; border: 0; border-radius: 0; overflow: visible;
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;
  }
  .cpanel .empty-state {
    padding: 34px 16px; font-size: 13.5px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-m);
  }

  .cpanel .crow {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px 9px; padding: 12px;
    border: 1px solid var(--border); border-radius: var(--radius-m);
    background: var(--surface); box-shadow: var(--shadow);
  }
  /* `.crow:last-child{border-bottom:0}` وزنُه (0,2,0) فلا يغلبه `.crow` وحده */
  .cpanel .crow:last-child { border-bottom: 1px solid var(--border); }
  .cpanel .crow > * { min-width: 0; }   /* بلا هذا لا يتقلّص شيءٌ في الفليكس */

  /* ── ترويسة البطاقة: النوع · الاسم · الحالة ──
     `.mt-ico` غلافُ محرّك التسميات حول `.cico`، وفيه «MCP/API/Webhook»
     مكتوبةً — فنوع الربط يُقرأ بلا تحويم ولا نقر. */
  .crow > .cico, .crow > .mt-ico { order: 1; flex: 0 0 auto; align-self: flex-start; }
  .crow .cico { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }

  /* 🪤 `.cmain{min-width:210px;flex:0 0 auto}` هي علّة الفائض الأمّ: أطولُ
        اسمٍ في القاعدة **107 حرفاً** («خادم MCP الداخلي للحوض — أدوات القراءة
        المقيَّدة…») فقِيس الصندوق **586px** على شاشة 393. والاسم هويّةُ الصفّ
        فلا يُقصّ (قاعدة 3: بيانات كاملة) — يلتفّ ويطول. */
  .crow > .cmain { order: 2; flex: 1 1 110px; min-width: 0; align-self: center; }
  .crow .cname { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
  .crow .cprov { font-size: 12px; line-height: 1.5; display: block; }

  .crow > .st {
    order: 3; flex: 0 0 auto; align-self: flex-start;
    font-size: 12px; padding: 6px 11px; line-height: 1.4;
  }

  /* ── الموضع (Endpoint) — وهو غرض الصفحة المعلن ──
     كان `nowrap+ellipsis` بعرض 120px، فيُقرأ منه `https://eshtrakat…` ولا
     شيء بعدها. وأطولُ موضعٍ **126 حرفاً**، فيلتفّ كاملاً في صندوقه.
     وباللفّ يسقط حكم `clip` عند محرّك التسميات فلا يتكرّر العلاج طبقتين. */
  .crow > .cep {
    order: 4; flex: 1 1 100%; min-width: 0;
    white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.65;
    background: var(--bg-main); border: 1px solid var(--border);
    border-radius: var(--radius-s); padding: 7px 9px;
  }
  .crow .cep b { font-weight: 600; }

  /* ── المصادقة وآخر فحص — أُعيدا بعد أن حذفتهما الصفحة ──
     ⛔ `@media(max-width:760px){.cauth,.chk{display:none}}` تحذف على الجوال
        **نوعَ المصادقة وموضعَ السرّ ونتيجةَ آخر فحص**. وموضع السرّ هو سبب
        وجود الصفحة، ونتيجةُ الفحص هي ما يقول للموظّف «هذا الربط سقط».
        فتُعادان مرئيّتين، ويُسبقان بتسميةٍ صريحة — فـ«x-api-key» وحدها
        لا تقول للموظّف أنها المصادقة، و«الخادم استجاب (401)» لا تقول متى.
     🔗 وتفصيلُهما (موضعُ السرّ · وقتُ الفحص) في `title=` ويتولّاه `_titles`
        بالنقر — لا بالتحويم (قاعدة 24). ومقيسٌ أنه فعل: الحقلان يخرجان
        من القياس بـ`mt-h mt-hit` أي مقبضين موسَّعين إلى 44. */
  .crow > .cauth, .crow > .chk {
    display: block; max-width: none; white-space: normal;
    overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
    font-size: 12px; line-height: 1.55;
  }
  .crow > .cauth { order: 5; flex: 1 1 100%; }
  .crow > .chk   { order: 6; flex: 1 1 100%; }
  .crow > .cauth::before { content: "المصادقة · "; font-weight: 700; }
  .crow > .chk::before   { content: "آخر فحص · ";  font-weight: 700; }

  /* ── صفّ الأفعال — كانت `.cbt` بارتفاع 29px و`.cpy` بمقاس 19.6×22،
        وكلُّها خارج الشاشة أصلاً. */

  /* 🪤 **زرّ النسخ «⧉» اسمُه في `title=` وحده — ولا تحويم على اللمس.** ولم
     أكتب له تسميةً بيدي، بل **وسّعتُ صندوقه فكتبها المحرّك**: عقدُ `_titles`
     ينصّ أن تلميحاً ≤20 حرفاً على عنصرٍ بلا نصٍّ ظاهر «يُكتب بجانب الأيقونة
     **إن وسعتها**»، و«نسخ الرابط» عشرة أحرف. وحين كان الزرّ **44×44 ثابتاً**
     لم تسعه، فسقط الحكم إلى `legend` — و`MTitles.stats()` يردّ حينها
     `skip:legend = 39` و`icon+more = 1`، أي **٣٩ بطاقة أيقونتُها بلا اسم**.
     وبـ`width:auto` و`padding` جانبيّ صار الحكم `label = 40` و`#more = 0`
     على 393 و360 معاً — مقيسٌ بعد التغيير لا مفترضٌ قبله.
     ⛔ فلا أطبع «نسخ» بـ`content` فوقها: طبقتان تُقرآن «⧉ نسخ الرابط نسخ»
        (وقد رأيتُها في اللقطة قبل أن أحذفها). */
  .crow > .cpy {
    order: 7; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    width: auto; min-width: 44px; height: 44px; padding: 0 12px;
    font-size: 16px; white-space: nowrap;
    border: 1px solid var(--border); border-radius: var(--radius-s);
    background: var(--surface); color: var(--ink);
  }
  .crow > .cpy .mt-lbl { font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .crow > .cacts { order: 8; flex: 1 1 130px; gap: 8px; }
  .crow .cbt {
    flex: 1 1 auto; min-height: 44px; padding: 0 12px;
    font-size: 13px; border-radius: var(--radius-s);
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ⚠️ ما يحقنه `_titles` **أخٌ** لا ابن: مقبض «⋯» يوضع بعد صاحبه مباشرةً،
     والتسميةُ كذلك. فبلا ترتيبٍ صريح يسقطان على `order:0` أي **قبل الأيقونة**
     في رأس البطاقة، أو ينفصلان عن الحقل الذي يشرحانه. فيُوسَمان بترتيب
     **الأخ السابق** لا بترتيبٍ واحدٍ جامد. */
  .crow > .mt-more, .crow > .mt-lbl { order: 7; flex: 0 0 auto; }
  .crow > .cmain + .mt-more, .crow > .cmain + .mt-lbl { order: 2; }
  .crow > .st    + .mt-more, .crow > .st    + .mt-lbl { order: 3; }
  .crow > .cep   + .mt-more, .crow > .cep   + .mt-lbl { order: 4; }
  .crow > .cauth + .mt-more, .crow > .cauth + .mt-lbl { order: 5; }
  .crow > .chk   + .mt-more, .crow > .chk   + .mt-lbl { order: 6; }
  /* وتسميةٌ يكتبها المحرّك أخاً لزرٍّ لا تنزل تحته في عمودٍ عرضُه 44px */
  .crow > .mt-lbl { font-size: 11.5px; margin-block: 0;
                    white-space: nowrap; align-self: center; }


  /* ═══ ③ الدُرج — نافذةٌ جانبية 440px تصير ورقةً سفليّة ═══════════════════
     ⛔ والإخفاء **بالقصّ** لا بالإزاحة: `inset-inline-end:-460px` تُبقي
        العنصر محتوىً حيّاً يمكن التمرير إليه — وهي علّة `aside.sidebar`
        نفسُها التي أثبتها بانِي الغلاف بالقياس. و`display` وحده يمحوه.
     وخلفيّتها (60) فوق الشريط السفليّ (55)، والورقة (61) فوقها — فلا يُنقر
     ما تحتها ولا يبتلعها الشريط. */
  .drawer {
    inset-inline: 0; inset-block: auto 0; top: auto;
    width: auto; max-width: none; height: auto; max-height: 88dvh;
    transform: none; transition: none;
    display: none; flex-direction: column;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, .28);
    padding-block-end: var(--bsn-safe);
  }
  .drawer.open { display: flex; inset-inline: 0; }
  .drawer::before {                                   /* مقبض الورقة */
    content: ""; flex: none; width: 38px; height: 4px; border-radius: 100px;
    background: var(--border); margin: 8px auto 2px;
  }

  .drawer .dhead { padding: 10px 14px 12px; }
  .drawer .dhead h2 { font-size: 15.5px; line-height: 1.4; overflow-wrap: anywhere; }
  .drawer .dclose {
    flex: 0 0 auto; display: inline-flex; align-items: center;
    justify-content: center; width: 44px; height: 44px; margin: -4px -6px -4px 0;
    color: var(--ink);
  }

  /* 🪤 **علّةٌ رأيتُها في اللقطة بعد أن قال القياسُ «سليم»:** `.dbody` أخٌ
     لـ`.dlog`، والأخيرة تطبع **ثمانية أحداث** بلا سقف. ففي ورقةٍ ارتفاعُها
     88dvh أخذ السجلُّ نحو ثلثيها، وانضغط النموذج حتى قُصَّت قائمة «الاتجاه»
     في منتصفها — **ولا يظهر ذلك في `scrollWidth` ولا في هدف اللمس**.
     والعلاج شقّان: `min-height:0` كي يقدر النموذج على التقلّص والتمرير أصلاً
     (فالافتراضي `auto` يمنع انكماش عنصر الفليكس دون محتواه)، وسقفٌ للسجلّ
     بتمريرٍ خاصٍّ به. والسجلّ **تاريخٌ لا نموذج**، فأولى الاثنين بالتقييد. */
  .drawer .dbody { padding: 14px; gap: 13px;
                   flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
  .drawer .dlog:not(:empty) {
    flex: 0 0 auto; max-height: 20dvh;
    overflow-y: auto; overscroll-behavior: contain;
    margin-inline: 14px; padding: 8px 0 12px;
    border-block-start: 1px solid var(--border);
  }
  .drawer .dlog:not(:empty)::before {
    content: "سجلّ الأحداث"; display: block; margin-bottom: 4px;
    font-size: 11.5px; font-weight: 700; color: var(--ink); line-height: 1.6;
  }
  /* عمودان بعرض 176px لكلٍّ منهما لا يسعان «يحتاج تفويضاً» ولا رابط توثيق */
  .drawer .f2 { grid-template-columns: 1fr; gap: 13px; }
  .drawer .fld label { font-size: 12.5px; margin-bottom: 6px; }
  /* 🪤 16px ليست ذوقاً: سفاري آيفون **يقرّب الصفحة تلقائياً** عند التركيز على
     حقلٍ أصغر من 16px، فتخرج الورقة عن مقاسها ويبقى التقريب بعد الخروج. */
  .drawer .fld input, .drawer .fld select, .drawer .fld textarea {
    font-size: 16px; padding: 11px 12px; min-height: 46px; border-radius: 10px;
  }
  .drawer .fld .en { font-size: 15px; }
  .drawer .fld textarea { min-height: 92px; }
  .drawer .secnote { font-size: 12px; padding: 10px 12px; }

  .drawer .derr { padding: 0 14px 6px; font-size: 12.5px; }
  .drawer .dlog { font-size: 12px; line-height: 1.85; }
  .drawer .dlog:empty { padding: 0; }
  .drawer .dfoot { padding: 12px 14px; }
  .drawer .dsave { min-height: 48px; font-size: 14.5px; border-radius: 10px; }
}


/* ───────── customer ───────── */
/* ═══════════════════════════════════════════════════════════════════════════
   customer.css — صفحتا ملفّ العميل على الجوال:  /card  و  /case
   وهما قلب عمل خدمة العملاء: تُفتحان والموظف يكلّم العميل، فالمقياس
   «كم ثانيةً حتى يقرأ الرقم» لا «كم تبدو أنيقة».

   ⚠️ ثلاثة قيود تُفسّر شكل الملف:
   ① نقطة كسر واحدة `max-width:767.98px` — ولا سطر خارجها. الديسكتوب لم يشتكِ،
      وصفحة `/card` مبنيّةٌ عمداً «تُقرأ عرضاً لا طولاً» بأمر المالك — وذلك
      صحيحٌ على شاشةٍ عريضة، ولا عرض هنا أصلاً.
   ② لا أُنشئ صنفاً ولا أنازع الغلاف على مُميِّزاته؛ وكل ما تحت هو ضبطُ
      عناصر الصفحتين نفسيهما (`.dwh` · `.idrow` · `.sec` · `.ot` · `.search`).
   ③ `!important` مقصورٌ على ما كتبه الخصم بـ`!important` أو بوزنٍ مساوٍ
      (الصفحتان تكتبان `<style>` داخلهما ويُحمَّل **بعد** `basin.css`).
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

/* ══════════════════════════════════════════════════════════════════════════
   ① /card — الشبكات كلّها تنهار إلى عمود واحد
   🪤 العلّة المقيسة: `.dwh` مسارُه `minmax(340px,1fr)` و`.sec.cols` 310px
      و`.sec.cards` 360px — وكلّها **حدودٌ دنيا** لا تنكمش. فالمسار المحسوب
      خرج 360px والقسم 402px داخل حاويةٍ 369px، فوقعت الكتل عند `-33→369`:
      نصفُها خارج الشاشة **ولا يُبلَغ بتمرير** لأن الجذر يقصّها. ومقيسٌ أنها
      188 عنصراً على 393px و609 على 360px — وهذا سببُ «مشوّه» في أمر المالك.
   ══════════════════════════════════════════════════════════════════════════ */

  /* والعلاج ليس «عموداً واحداً» بل **رفعُ الشبكة أصلاً**: العمود الواحد يبقى
     مساراً لا ينكمش دون محتواه، وتدفّقُ الكتل ينكمش دائماً.
     🪤 وله سببٌ ثانٍ مقيسٌ بشاهد ضبط: `position:sticky` على عنصرٍ داخل شبكة
        يُزيحه كروم إزاحةً ثابتةً بمقدار `top` **ولو لم يحن وقت الالتصاق** —
        قِيس الفارق 48px مع `top:48px`، و1px مع `top:0`، و1px مع `position:static`
        في القسم نفسه. فعنوانُ القسم كان يهبط 48px تاركاً فجوةً بيضاء ويغطّي
        أوّل صفٍّ تحته. وفي الأقسام غير الشبكية (`display:block`) لا يقع شيء. */
  .dwh,
  .dwb,
  .dwb .sec.cols,
  .dwb .sec.cards { display: block !important; }
  .dwb,
  .dwb > .sec,
  .dwb > .sec > *,
  .dwh > * { min-width: 0; }
  /* ما كانت الشبكة تفصله بـ`gap` يُعاد بهامشٍ صريح */
  .dwb .sec.cards > .revbox,
  .dwb .sec.cards > .cnv { margin-bottom: 10px; }
  .dwb .sec.cards > .revbox:last-child,
  .dwb .sec.cards > .cnv:last-child { margin-bottom: 0; }

  /* لوحُ القسم: 20px حشواً على 369px تأكل عُشر العرض */
  .dwb > .sec { padding: 12px; margin-bottom: 12px; }
  .page .dwh { padding: 14px 12px; }

/* ── ② عنوانُ القسم: رايةٌ تُرى بطرف العين ─────────────────────────────────
   ⛔ **ولم أجعله لاصقاً — وقد جرّبتُه وقِستُ أنه لا يعمل**: `.dwb` نفسه حاويةُ
      تمريرٍ (`overflow-y:auto` في `basin.css`)، فـ`sticky` يرتبط بمِسطرتها لا
      بالشاشة. والمقيس: عند التمرير إلى 2900 كان عنوان «رسائل ميتا» عند
      **‎-854px** أي خارج الشاشة تماماً؛ ومع ذلك يُزيح كرومُ أوّلَ قسمٍ 48px
      إلى الأسفل فيفتح فجوةً بيضاء ويغطّي أوّل صفٍّ تحته. وإصلاحُه يوجب رفع
      `overflow` عن حاوية تمرير — **وذلك ممنوعٌ بعقد الغلاف صراحةً**
      (رفعُه يقفز بالفائض إلى الآلاف). فالرايةُ لونٌ وحجمٌ لا التصاق.        */

  .dwb > .sec > .sech {
    margin: 0 0 10px;
    padding: 2px 10px 10px;
    border-bottom: 1px solid var(--border);
    border-inline-start: 4px solid var(--brand-action);
    font-size: 15px;
  }
  /* والسهم المطويّ لا معنى له هنا — الطيّ مُعطَّل في هذه الصفحة أصلاً */
  .dwb > .sec > .sech::after { content: none; }

/* ── ③ شريط الأرقام: ستّةٌ في صفٍّ ⟵ ثلاثةٌ في صفّين ──────────────────────
   🪤 مقيس: `.dst .v` فيه `nowrap + ellipsis`، فصار «الإنفاق» يُقرأ «…5»
      و«التقييم» «★2…». رقمٌ مبتورٌ أسوأ من لا رقم: يبدو معلومةً وليس بها. */

  .page .dwst {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
    padding: 12px;
  }
  .page .dst { padding: 10px 6px; }
  .page .dst .v {
    font-size: 17px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }
  .page .dst .k { font-size: 10.5px; }

/* ── ④ صفُّ المعرِّف: القيمة كاملةً لا منقوطةً ─────────────────────────────
   ⛔ أمر المالك المُلزم لأدوات الموظفين: «لا اختصار رقم جوال أو بريد».
      والصفحة تكتب `nowrap + ellipsis` على `.vl` وتضع النصّ الكامل في `title=`
      — و`title` لا وجود له على اللمس (قاعدة 24). فالبريد الطويل كان يُقرأ
      «abdulrahman.alqahtani.busi…» ولا سبيل لبقيّته بإصبع.                */

  /* صفٌّ من سطرين: «تسمية · حالة» فوق، والقيمة كاملةً تحت، وزرّ النسخ
     على حافّة النهاية يمتدّ على السطرين — فموضعه ثابتٌ في كل صفّ لا يتنقّل. */
  .dwh .idrow,
  .dwb .sec.cols .idrow,
  .dwb .sec .idrow {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) 44px;
    grid-template-areas: "lb bdg cp" "vl vl  cp";
    align-items: center;
    column-gap: 6px;
    row-gap: 0;
    padding-block: 7px;
    margin-top: 0;
  }
  .dwh .idrow > .lb,
  .dwb .sec .idrow > .lb {
    grid-area: lb;
    align-self: end;
    min-width: 0;
    white-space: nowrap;
  }
  /* الشارة ملاصقةٌ لتسميتها لا مرميّةٌ في الطرف الآخر: «إيميل ‹فعال›» تُقرأ
     وحدةً واحدة، وبينهما 320px من الفراغ تُقرأ خبرين لا خبراً. */
  .dwh .idrow > .bdg,
  .dwb .sec .idrow > .bdg {
    grid-area: bdg;
    justify-self: start;
    align-self: end;
  }
  .dwh .idrow > .vl,
  .dwb .sec.cols .idrow > .vl,
  .dwb .sec .idrow > .vl,
  .dwh .idrow > span:not(.lb):not(.bdg):not(.vl),
  .dwb .sec .idrow > span:not(.lb):not(.bdg):not(.vl) {
    grid-area: vl;
    justify-self: start;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    line-height: 1.5;
  }
  .dwh .idrow > .cp,
  .dwb .sec .idrow > .cp { grid-area: cp; justify-self: end; }
  /* فاصلٌ خفيف بين الصفوف بعد أن صار كلٌّ منها سطرين.
     🪤 والصفحة تكتب `border-bottom: 1px solid var(--hairline)` على صفوف
        `.sec.cols` — و`--hairline` **غير معرَّف في `basin.css`**، فالقيمة
        تسقط إلى `currentColor` أي خطٌّ أسودُ عريضُ الأثر. يُستبدل برمزٍ قائم. */
  .dwh .idrow + .idrow { border-top: 1px solid var(--border); }
  .dwb .sec.cols .idrow { border-bottom: 1px solid var(--border); }
  .dwb .sec.cols .idrow:last-child { border-bottom: 0; }

/* ── ⑤ زرّ النسخ ⧉ — كان **مخفيّاً** بالكامل على اللمس ────────────────────
   🪤 `basin.css`: `.cp{opacity:0}` ولا يظهر إلا بـ`:hover` — ولا تحويم على
      الإصبع. فعشرةُ أزرارِ نسخٍ في البطاقة كانت غيرَ موجودةٍ عملياً، وقياسُها
      18×22 دون 44 على أي حال. وهذا أهمّ زرٍّ في الصفحة: الموظف ينسخ الجوال
      والبريد ورقم الطلب وهو يكلّم العميل.                                   */

  .cp,
  .idrow:hover .cp,
  tr:hover .cp {
    opacity: 1;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 15px;
    color: var(--text-muted);
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
  }

/* ── ⑤-ب روابطٌ داخل النصّ: هدفُ لمسٍ بلا كسر السطر ───────────────────────
   «لوحة القيادة» في حاشية التوقّفات، و«فتح ↗» في الجدول الزمني — روابطُ
   `inline` قياسُها 30×17 و54×18. والحشو العموديّ على عنصرٍ سطريّ يوسّع
   صندوقَه المقيس ولا يزحزح السطر الذي هو فيه.                              */

  .dwb .rm > a,
  .dwb .tli .t1 > a,
  .dwb .action > a {
    display: inline;
    padding-block: 15px;
    padding-inline: 8px;
  }

/* ── ⑥ صفُّ الأفعال — عمودان بهدفٍ 48px ───────────────────────────────────
   واتساب · اتصال · كرزون · إيميل: هذه ما يفعله الموظف فعلاً من الصفحة،
   وكانت 31px ارتفاعاً وبخطّ 11.5px.                                        */

  .page .acts,
  .page .dwh .acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }
  .page .acts .act,
  .page .dwh .acts .act {
    flex: 1 1 44%;
    justify-content: center;
    min-height: 48px;
    padding: 0 12px;
    font-size: 13px;
    text-align: center;
  }
  /* وما كان زرّاً خارج صفّ الأفعال يبقى هدفَ لمسٍ صحيحاً */
  .page a.act,
  .page button.act,
  #out a.act,
  #out button.act { min-height: 44px; }

/* ── ⑦ بطاقاتُ التقييمات والرسائل والتذاكر ───────────────────────────────── */

  .dwb .sec.cards .revbox,
  .dwb .sec .revbox { padding: 10px 12px; }
  .dwb .rh { gap: 6px; }
  /* التاريخ كان يُدفع لحافّةٍ خارج الشاشة بـ`margin-inline-start:auto` */
  .dwb .rh .rm[style] { margin-inline-start: auto; }
  .dwb .rt { font-size: 13px; }
  .dwb .rm { font-size: 12px; }
  /* 🪤 ختمُ الوقت كان يُعرَض مقلوباً: النصّ في الـDOM «2026-09-01 18:22»
     ويُرسم «18:22 2026-09-01» — الوقتُ قبل التاريخ. والعلّة أن الرقمين
     مقطعان لاتينيّان في فقرةٍ عربية فيُعكَس ترتيبُهما. و`plaintext` تُسند
     اتجاهَ كل خليّةٍ إلى أوّل حرفٍ قويٍّ فيها: فالتاريخُ يستقيم، و«مرحلة
     التذكرة» العربيّة في `.rm` نفسها تبقى عربيّة. (قِيس بلقطةٍ قبل وبعد.) */
  .dwb .rh .rm,
  .dwb .tli .dt,
  .dwb .cnv .inf .b { unicode-bidi: plaintext; }

  /* الجدول الزمني: خيطُه وحلقاتُه تأكل 40px من عرضٍ ضيّق */
  .dwb .tl { padding-inline-end: 14px; }
  .dwb .tli { padding-inline-end: 20px; padding-bottom: 14px; }
  .dwb .tli .t2 { font-size: 13px; overflow-wrap: anywhere; }

  /* المحادثات: أيقونة · نصّ · زرّ فتح في صفٍّ واحد */
  .dwb .cnv {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .dwb .cnv:last-child { border-bottom: 0; }
  .dwb .cnv .inf { flex: 1 1 60%; min-width: 0; }
  .dwb .cnv .inf .a { font-size: 13px; font-weight: 700; }
  .dwb .cnv .inf .b { font-size: 12px; color: var(--text-muted); }
  .dwb .cnv .act { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   ⑧ جدول الطلبات في /card — بطاقةٌ من أربعة أسطر لا من سبعة
   🪤 مقيس: محرّك الجداول يحوّل كل صفٍّ إلى بطاقةٍ من سبعة أسطر بتسميةٍ في
      عمودٍ جانبيّ عرضه 70px، فارتفاع البطاقة **341px**. و32 طلباً ⇒ نحو
      11,000px من 19,632px — أي أكثر من نصف الصفحة لجدولٍ واحد.
      والحلّ ليس حذفَ بيانٍ (كلُّها تبقى) بل **تسميةٌ في السطر** وشبكةُ
      عمودين: رقم·تاريخ ⟶ حالة·مبلغ ⟶ دفع ⟶ أصناف.
   ══════════════════════════════════════════════════════════════════════════ */

  /* غلافُ الجدول داخل القسم: حشوٌ ثالثٌ فوق حشو القسم */
  .dwb .sec > .scroll { padding-inline: 0; padding-block: 0; }

  table.ot.bsn-tbl.bsn-tbl > tbody > tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 46px;
    align-items: center;
    padding: 4px 0;
    margin-bottom: 8px;
  }
  table.ot.bsn-tbl.bsn-tbl > tbody > tr > td {
    min-height: 0 !important;
    padding: 4px 10px !important;
    border-bottom: 0 !important;
    font-size: 13px;
  }
  /* التسمية تنزل من عمودها الجانبيّ إلى داخل السطر — فتبقى مرئيّةً ولا تحجز
     70px في كل سطر. (وهي تسميةٌ مرئيّة لا `title=` — قاعدة 24 محفوظة.) */
  table.ot.bsn-tbl.bsn-tbl > tbody > tr > td::before {
    position: static !important;
    display: inline;
    width: auto !important;
    margin-inline-end: 5px;
    font-size: 11px;
    font-weight: 700;
    /* 🪤 مقيسٌ بخمس حالاتٍ ضبط: التسمية العربيّة حين تدخل سطرَ القيمة تكسر
       ترتيبَ التاريخ — `2026-09-02` تُعرَض `02-09-2026`، **والنصّ في الـDOM
       صحيح**، فالخلل في العرض لا في البيان وهو أخطر: رقمٌ يُقرأ للعميل مقلوباً.
       والعزل يُعيده (جُرِّب: بلا عزلٍ ✗ · بعزلٍ ✓ · بـ`plaintext` ✗). */
    unicode-bidi: isolate;
  }
  table.ot.bsn-tbl.bsn-tbl > tbody > tr > td:first-child {
    background: none !important;
    border-radius: 0 !important;
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-content: center;
    padding: 0 !important;
  }
  table.ot.bsn-tbl.bsn-tbl > tbody > tr > td:nth-child(2) {   /* رقم */
    grid-column: 1; grid-row: 1;
    font-size: 14px; font-weight: 700;
  }
  table.ot.bsn-tbl.bsn-tbl > tbody > tr > td:nth-child(3) {   /* التاريخ */
    grid-column: 2; grid-row: 1;
  }
  table.ot.bsn-tbl.bsn-tbl > tbody > tr > td:nth-child(4) {   /* الحالة */
    grid-column: 1; grid-row: 2;
  }
  table.ot.bsn-tbl.bsn-tbl > tbody > tr > td:nth-child(5) {   /* المبلغ */
    grid-column: 2; grid-row: 2;
    font-weight: 700;
  }
  table.ot.bsn-tbl.bsn-tbl > tbody > tr > td:nth-child(6) {   /* الدفع */
    grid-column: 1 / -1; grid-row: 3;
  }
  table.ot.bsn-tbl.bsn-tbl > tbody > tr > td:nth-child(7) {   /* الأصناف */
    grid-column: 1 / -1; grid-row: 4;
    color: var(--text-muted);
    border-top: 1px solid var(--border) !important;
    margin-top: 2px;
    padding-top: 6px !important;
  }

/* ══════════════════════════════════════════════════════════════════════════
   ⑨ /case — ملفّ العميل
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ⑨-أ خانة البحث: هي **مصدر الفائض الأفقي كلّه** على 360px ─────────────
   🪤 مقيس: `input` بلا `min-width:0` داخل `flex` فلا ينكمش تحت عرضه
      الذاتيّ (20 حرفاً بخطّ 19px) + زرٌّ بحشو 30px ⇒ أدنى عرضٍ للنموذج 366px.
      فارتفع عرضُ الصفحة على شاشة 360 إلى **367px**، وظهر الفائض في
      `.bsn-tabbar` (عرضُه 100% من صفحةٍ صارت أعرض) — وهو عَرَضٌ لا علّة.   */

  .wrap .search { gap: 8px; padding: 6px 6px 6px 6px; }
  .wrap .search input {
    flex: 1 1 100px;
    min-width: 0;
    font-size: 17px;
    padding: 12px 12px;
  }
  .wrap .search button {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 15px;
  }
  .wrap .hint { font-size: 12.5px; text-align: start; }

/* ── ⑨-ب لوحُ البطاقة وعنوانُه ───────────────────────────────────────────── */

  #out .card { padding: 12px; border-radius: var(--radius-m); margin: 12px 0; }
  /* ✅ وهنا **يعمل** الالتصاق (خلافاً لـ`/card`): لا حاوية تمرير بين العنوان
     والشاشة. مقيسٌ حيّاً: عند التمرير إلى 2500 كان «الاشتراكات» عند 48px،
     وعند 6000 كان «الطلبات» عند 48px — أي مثبَّتاً تحت رأس الغلاف تماماً.
     وفي جدولٍ من 31 طلباً يعني ذلك أن الموظف يعرف ما يقرأ بلا أن يرجع. */
  #out .card h2 {
    position: sticky;
    top: var(--bsn-top);
    z-index: 30;
    margin: -12px -12px 10px;
    padding: 11px 12px;
    /* 🪤 والشريط القرمزيّ يُرسم خلفيّةً لا `border`: الحدُّ عند زاويةٍ مستديرةٍ
       بعرضين مختلفين يُخرج وتداً مائلاً خارج اللوح — رُئي وقِيس. والخلفيّة
       تُقصّ بنصف القطر نفسه فتنتهي مستديرةً مع اللوح. */
    border-right: 0;
    background-color: var(--surface);
    background-image: linear-gradient(var(--bsn-red), var(--bsn-red));
    background-repeat: no-repeat;
    background-size: 5px 100%;
    background-position: right top;
    border-bottom: 1px solid var(--bsn-line);
    border-radius: var(--radius-m) var(--radius-m) 0 0;
    font-size: 16.5px;
    line-height: 1.5;
  }
  #out .flag { font-size: 14px; padding: 10px 12px; }
  #out .flag b { font-size: 15px; }

/* ── ⑨-ج جداول «مفتاح/قيمة»: التسمية سطرٌ والقيمة سطر ─────────────────────
   🪤 مقيس: الجدولان مقسومان نصفين (`table-layout:fixed`)، فسطرُ «مدة غير
      محدّدة في اسم المنتج — تحقّق من الطلب» يلتفّ ثلاثة أسطرٍ في 160px بينما
      نصفُ الصفّ المقابل فارغ. وأسماءُ المنتجات والبُرُد الطويلة أسوأ.
      و`:not(.bsn-tbl)` تحصر القاعدة فيما لم يحوّله المحرّك إلى بطاقات.      */

  #out .card > table:not(.bsn-tbl) > tbody > tr { display: block; }
  #out .card > table:not(.bsn-tbl) > tbody > tr > th {
    display: block;
    width: auto;
    padding: 8px 10px 0;
    border-bottom: 0;
    background: none;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
  }
  #out .card > table:not(.bsn-tbl) > tbody > tr > td {
    display: block;
    width: auto;
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--bsn-line);
    font-size: 14.5px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  #out .card > table:not(.bsn-tbl) > tbody > tr:last-child > td { border-bottom: 0; }
  #out .card > table:not(.bsn-tbl) .big { font-size: 18px; }

/* ── ⑨-د جدول الطلبات: ثلاثة أسطرٍ لا خمسة ──────────────────────────────── */

  #out .card > table.bsn-tbl.bsn-tbl > tbody > tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    padding: 4px 0;
    margin-bottom: 8px;
  }
  #out .card > table.bsn-tbl.bsn-tbl > tbody > tr > td {
    min-height: 0 !important;
    padding: 4px 10px !important;
    border-bottom: 0 !important;
    font-size: 13.5px;
  }
  #out .card > table.bsn-tbl.bsn-tbl > tbody > tr > td::before {
    position: static !important;
    display: inline;
    width: auto !important;
    margin-inline-end: 5px;
    font-size: 11px;
    font-weight: 700;
    /* 🪤 مقيسٌ بخمس حالاتٍ ضبط: التسمية العربيّة حين تدخل سطرَ القيمة تكسر
       ترتيبَ التاريخ — `2026-09-02` تُعرَض `02-09-2026`، **والنصّ في الـDOM
       صحيح**، فالخلل في العرض لا في البيان وهو أخطر: رقمٌ يُقرأ للعميل مقلوباً.
       والعزل يُعيده (جُرِّب: بلا عزلٍ ✗ · بعزلٍ ✓ · بـ`plaintext` ✗). */
    unicode-bidi: isolate;
  }
  #out .card > table.bsn-tbl.bsn-tbl > tbody > tr > td:first-child {
    background: none !important;
    border-radius: 0 !important;
    grid-column: 1; grid-row: 1;
    font-size: 14px; font-weight: 700;
  }
  #out .card > table.bsn-tbl.bsn-tbl > tbody > tr > td:nth-child(2) { grid-column: 2; grid-row: 1; }
  #out .card > table.bsn-tbl.bsn-tbl > tbody > tr > td:nth-child(3) { grid-column: 1; grid-row: 2; }
  #out .card > table.bsn-tbl.bsn-tbl > tbody > tr > td:nth-child(4) { grid-column: 2; grid-row: 2; font-weight: 700; }
  #out .card > table.bsn-tbl.bsn-tbl > tbody > tr > td:nth-child(5) {
    grid-column: 1 / -1; grid-row: 3;
    color: var(--text-muted);
    border-top: 1px solid var(--bsn-line) !important;
    margin-top: 2px;
    padding-top: 6px !important;
  }

/* ── ⑨-هـ الخطّ الزمنيّ للمحادثة وأزرارُه ───────────────────────────────── */

  #out .msg { padding: 7px 0; font-size: 14px; }
  #out .msg time { font-size: 12.5px; }
  #out .more { min-height: 48px; font-size: 14.5px; }
  #out .saved { font-size: 13px; }
  #out .saved button { min-height: 44px; padding: 6px 16px; }
  #out .an { font-size: 14.5px; }
  #out .an h3 { font-size: 15.5px; }

}


/* ───────── desk ───────── */
/* ══════════════════════════════════════════════════════════════════════════
   مكتب التذاكر (/desk) — طبقة الهاتف · قاعدة 24 «الهاتف أولاً»
   كتلة واحدة داخل @media (max-width: 767.98px). لا قاعدة خارجها.
   الرموز من basin.css و_shell.css فقط — ولا رقم لون مخترع.

   ── الحكم التصميميّ (والدليل قبله) ───────────────────────────────────────
   الكانبان الأفقيّ **لا يصلح لهاتف**، وثلاثة قياسات تقولها:

   ① **سحبُ البطاقة — وهو سببُ وجود اللوحة — ميّتٌ على اللمس.** أحداث
      HTML5 (dragstart / drop) التي عليها يقوم `wireBoard()` لا تُطلقها
      إصبعٌ أصلاً. فكلّ نقلٍ بين الأعمدة على الهاتف يمرّ حتماً بأزرار
      `.mv` داخل ملفّ التذكرة. أي أن اللوحة تُقدّم على الهاتف **صفراً**
      من قدرتها المميِّزة.
   ② **عرض `#board` 1969px داخل حاوية 369px** — خمسةُ أعمدة من ستّة تقع
      عند (‎-271‏ · ‎-623‏ · ‎-943‏ · ‎-1266‏ · ‎-1586‏)، ولا شيء في الشاشة
      يقول للموظف إنّها موجودة.
   ③ **ثلاثة محاور تمرير متداخلة في شاشةٍ واحدة:** الصفحة (رأسيّ) ⟵
      `.board` (أفقيّ) ⟵ `.colb` (رأسيّ، `max-height:602px` ومحتواه
      919px و1381px). فمسحةُ إبهامٍ صاعدة تُحرّك العمود لا الصفحة —
      وهذا بعينه «مشوّه وغير قابل للاستخدام».

   ⟵ **والعلاج ليس إلغاء اللوحة بل تدويرها.** التجميع بالحالة
      (جديدة · قيد العمل · بانتظار العميل · تصعيد · مكتملة · أرشيف) هو
      نموذج الموظف الذهنيّ، ولا يعطيه الجدولُ المُبطَّق. فالأعمدة تصير
      **أقساماً مطويّة رأسيّة** بعرض الشاشة، ورأسُ كلّ قسم لاصقٌ يقول
      أين أنت، ومحور تمريرٍ **واحد** للصفحة كلّها.
      والطيّ ليس اختراعاً: `FOLD` قائمٌ في الصفحة ومحفوظٌ في المتصفّح
      بأمر المالك («مثلاً مكتملة أحتاجها تكون دائماً مطوية») — فصار
      رأسُ القسم كلُّه هدفَ الطيّ بدل زرٍّ عرضه 18px.
      وتبويب «جدول» يبقى كما هو لمن أراد الفرز والصفحات.

   ── النطاق: كلُّ قاعدةٍ هنا مقصورةٌ على هذه الصفحة ─────────────────────
   المِرصد يحقن كلّ ملفّات `mobile/` في **كلّ** صفحة، و`basin.css` مشتركٌ
   بينها جميعاً. وأصنافٌ كثيرةٌ ألمسها هنا (`.stats-grid` · `.stat-card` ·
   `.tools-row` · `.srch-box` · `.mini` · `.inp` · `.kv` · `.pager` ·
   `.tbl-footer` · `.empty-state`) **تعيش في صفحاتٍ أخرى أيضاً** — فلو
   تركتُها عاريةً لأعدتُ تصميم `/` و`/subs` و`/keys` من حيث لا أُرى.
   فكلّ مُميِّزٍ مسبوقٌ بـ`body:has(#board)`، و`#board` **حصريٌّ لهذه الصفحة**
   (مقيس: `grep -l 'id="board"' *.html` ⟵ `desk.html` وحدها).
   🪤 وثمنُه معلومٌ لا مكتوم: متصفّحٌ بلا `:has()` تسقط عنده الكتلة كلُّها
      فترجع الصفحة إلى حالها اليوم — لا إلى ما هو أسوأ. وهو نفس اختيار
      `tables-heavy.css`، والحوض خلف تسجيل دخولٍ على هواتف حديثة.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* ═══ ٠ · عطبٌ وظيفيّ قبل الشكل: ملفّ التذكرة لا يُفتح أصلاً ═══════════
     `basin.css` يُخفي `.dw` بالإزاحة ويُظهره بـ`.dw.on`، والغلاف بدّل ذلك
     إلى `display:none` ويُظهره بـ`.dw.on` كذلك (وهو صوابٌ يقطع فائض
     ‎-393→0‏). لكنّ صفحة المكتب **لا تُضيف الصنف `on` إطلاقاً** — دالّة
     `openDrawer()` تفتح بـ`hidden=false` وأنماطٍ سطريّة.
     فالنتيجة المقيسة قبل هذا السطر: `#dw.hidden === false` بينما
     `getBoundingClientRect().width === 0` و`display === "none"` —
     أي أن الموظف على الهاتف **ينقر التذكرة فلا يحدث شيء**، وهو أشدّ من
     أيّ تشويهٍ بصريّ. والإصلاح في ملفّ الصفحة لأن العطب في تعاقدها هي،
     ولا يمسّ هندسة الغلاف: `inset` و`width` و`transform` تبقى له. */
  body:has(#board) #dw:not([hidden]) { display: flex; }

  /* ═══ ١ · شريط الحال — ستّ بطاقات كانت تأكل شاشةً كاملة ═══════════════
     مقيس: `.stats-grid` عمودان × 98px = **326px** قبل أن يرى الموظف
     تذكرةً واحدة. الرقم هو الرسالة، والباقي حشو. ثلاثةٌ في الصفّ بحشوٍ
     ضيّق ⟵ صفّان، وكلّ بطاقة تبقى فوق 44×44 بفارقٍ واسع.
     (`!important` يوازن الذي في `<style>` الصفحة، ويحسمه ترتيبُ التحميل.) */
  body:has(#board) .stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px; margin-bottom: 14px; margin-top: 16px;   /* بديلُ حشو الحاوية أدناه */
  }
  /* 🪤 وحشوُ الحاوية العلويّ (16px) ينقل نقطةَ لصق الرؤوس إلى حافّة
     **المحتوى** لا حافّة الصندوق، فيبقى شريطُ 16px تجري فيه بطاقةٌ فوق
     عنوان قسمها. يُنقل الحشو إلى أوّل عنصرٍ فيستوي المظهر ويستوي اللصق.
     ⛔ ولا أمسّ الحشو السفليّ — أرضيّةُ الشريط للغلاف وحده. */
  body:has(#board) .dashboard-scroll { padding-block-start: 0; }
  body:has(#board) .stat-card {
    padding: 9px 8px 10px; border-radius: var(--radius-s); min-height: 62px;
  }
  body:has(#board) .stat-card .lbl {
    font-size: 11px; margin-bottom: 3px; gap: 3px; line-height: 1.3;
    justify-content: flex-start; flex-wrap: wrap;
  }
  body:has(#board) .stat-card .val { font-size: 22px; line-height: 1.15; }
  /* التحويم لا وجود له على اللمس، وأثرُه يعلق بعد النقر فيبدو كتحديدٍ كاذب */
  body:has(#board) .stat-card:hover { transform: none; border-color: var(--border); }
  body:has(#board) .stat-card.brand:hover { border-color: rgba(237,9,84,.3); }
  body:has(#board) .stat-card:active { border-color: var(--brand-action); }

  /* ═══ ٢ · صفّ الأدوات — بحثٌ وفلاتر بالإبهام لا بالظفر ════════════════
     كان: بحثٌ بارتفاع 24px، وتبويبان 66×33 و72×33، وثلاث قوائم 32px،
     وشريحة 92×32 — تتلوّى في ثلاثة صفوف. ومقاسُ الخطّ 12.5px على
     `<select>` يجعل iOS **يُقرّب الصفحة** عند اللمس فيُفقد المكان،
     ولهذا 16px على كلّ ما يُركَّز عليه — لا ترفاً بل منعاً للقفز. */
  body:has(#board) .tools-row {
    padding: 9px; gap: 8px; margin-bottom: 14px; border-radius: var(--radius-m);
  }
  body:has(#board) .srch-box {
    padding: 0 12px; border-radius: var(--radius-s); min-height: 44px;
  }
  body:has(#board) .srch-box svg { flex: none; }
  body:has(#board) .srch-box input { font-size: 16px; min-height: 44px; }

  body:has(#board) .sfilters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  /* ترتيب الإبهام: طريقةُ العرض أوّلاً (فهي تُبدّل الشاشة كلَّها)، ثم
     المُسنَد إليه (أطولُ قيمةً فيأخذ صفَّه)، ثم القصيرتان، ثم المُبدِّل */
  body:has(#board) .sfilters > .vtabs,
  body:has(#board) .sfilters > #fAssignee,
  body:has(#board) .sfilters > #fLate { grid-column: 1 / -1; }

  body:has(#board) .vtabs { display: flex; width: 100%; border-radius: var(--radius-s); }
  body:has(#board) .vtab {
    flex: 1; min-height: 44px; font-size: 14px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  }
  body:has(#board) .sel,
  body:has(#board) .sfilters select.btn-outline {
    min-height: 44px; font-size: 16px; padding: 0 10px; width: 100%;
    border-radius: var(--radius-s);
  }
  body:has(#board) #fLate {
    min-height: 44px; width: 100%; justify-content: center; font-size: 14px;
  }
  body:has(#board) #fLate:hover { border-color: var(--border); color: inherit; }
  body:has(#board) #fLate[aria-pressed="true"]:hover {
    border-color: var(--ink); color: var(--surface);
  }

  /* ═══ ٣ · اللوحة تُدار ٩٠° — من أعمدةٍ متجاورة إلى أقسامٍ متتابعة ═════
     ⚠️ ورفعُ `overflow` عن `.board` **ليس نقضاً لممنوع الغلاف بل شرطُه**:
        الغلاف منع رفعَه عن حاوياتٍ **يبقى محتواها عريضاً** (فيقفز الفائض
        إلى 1993px في هذه الصفحة بعينها). وأنا أرفعه **بعد** أن أزلتُ
        العرض نفسه — الأعمدة صارت بعرض الحاوية فلا شيء يُمرَّر إليه،
        والدليل مقيسٌ بعده: `scrollWidth === innerWidth` على 393 و360.
        ولولا رفعُه لانكسر `position:sticky` لرؤوس الأقسام، لأن
        `overflow-x:auto` يجعل المحور الآخر `auto` فيصير صندوقُ اللصق
        هو اللوحة لا الشاشة. */
  body:has(#board) .board { display: block; overflow: visible; padding: 0 0 4px; gap: 0; }
  body:has(#board) .col {
    width: auto; max-width: 100%; max-height: none;
    margin-bottom: 10px; border-radius: var(--radius-m);
  }
  body:has(#board) .col:last-child { margin-bottom: 0; }
  /* محورُ تمريرٍ واحد للصفحة: العمود لم يعد صندوقاً يُمرَّر بداخله */
  body:has(#board) .colb { overflow: visible; max-height: none; padding: 8px; gap: 8px; }
  body:has(#board) .colb:empty::after { font-size: 13px; padding: 18px 0; }

  /* رأس القسم لاصقٌ — يقول دائماً «أين أنا» وأنت تمرّ بين ستّة أقسام.
     🪤 **و`top` هنا صفرٌ لا `--bsn-top`، وهذا مقيسٌ لا مخالفة:** عقدُ
        الغلاف يوصي بـ`--bsn-top` كي لا يزحف اللاصقُ تحت الرأس، وهو
        صوابٌ حين تكون **الشاشة** هي المُمرِّرة. وليست هنا: قِستُ
        المُمرِّرات في الصفحة فرجعت واحدةً — `DIV.dashboard-scroll`
        (6348/794) — وحافّتُها العليا **أسفل الرأس أصلاً**. فإسنادُ
        اللصق إليها بـ48px يثبّت الرأس 48px **دون** حافّة صندوقه،
        فيبقى شريطٌ تجري فيه بطاقاتُ العمود **فوق عنوانه** — وقد رأيتُه
        بعيني في اللقطة قبل أن يقوله رقم. والصفرُ يلصقه بالحافّة نفسها.
        وz-index يبقى 12 كما يأمر العقد (≤40). */
  body:has(#board) .colh {
    position: sticky; top: 0; z-index: 12;
    min-height: 50px; padding: 6px 12px; gap: 9px;
    border-radius: var(--radius-m) var(--radius-m) 0 0;
  }
  body:has(#board) .col.fold .colh { border-radius: var(--radius-m); }
  body:has(#board) .colh .dot { width: 10px; height: 10px; }
  body:has(#board) .colh .nm { font-size: 15px; }
  body:has(#board) .colh .n { font-size: 12px; padding: 3px 10px; }

  /* ═══ ٣ب · الطيّ: الرأس كلُّه هو الزرّ ════════════════════════════════
     كان `button.foldb` **18×19px** — أي رُبع هدف اللمس، وستّ نسخٍ منه.
     وبدل تكبيره وحده (فيرتفع الرأس بلا داعٍ) يُفرَش الزرّ على الرأس كلّه:
     **367×49 هدفاً واحداً**، والنصّ فوقه يمرّر اللمسة إليه. والشيفرة كما
     هي — الزرّ نفسه هو المنقور، ولا معالج جديد. */
  body:has(#board) .colh > .dot,
  body:has(#board) .colh > .nm,
  body:has(#board) .colh > .n { position: relative; z-index: 1; pointer-events: none; }
  body:has(#board) .colh .foldb {
    position: absolute; inset: 0; margin: 0; padding: 0 62px;
    border-radius: var(--radius-m); font-size: 0; z-index: 0;
  }
  /* 🔎 مقيسٌ لا مفترَض: `_titles` لفّ الزرّ نفسه بـ`mt-lbl-host`، فالتسمية
     **داخله** لا أخاً له — و`.mt-lbl` تحمل مقاس خطّها فتنجو من `font-size:0`
     الذي أطفأ المحرف `⌄` الحرفيّ. وأهمّ من ذلك أنها **حيّةٌ تتبع الحالة**:
     قِستُها «طيّ العمود» ثم «فرد العمود» بعد النقر. فالاسم مكتوبٌ دائماً
     بلا تحويم، والمحرف يُعاد رسمه بجانبه ليدور مع الحالة. */
  body:has(#board) .colh .foldb::before {
    content: "⌄"; font-size: 15px; line-height: 1; color: var(--text-muted);
    display: inline-block; transition: transform .15s;
  }
  body:has(#board) .colh .foldb .mt-lbl { font-size: 12px; }
  /* الصفحة تدير `.foldb` كلَّه عند الطيّ — ولو دار المفروش لانقلب النصّ
     رأساً على عقب. فالدوران يُنقل إلى المحرف وحده. */
  body:has(#board) .col.fold .colh .foldb { transform: none; }
  body:has(#board) .col.fold .colh .foldb::before { transform: rotate(180deg); }
  body:has(#board) .colh .foldb:hover { background: none; color: var(--text-muted); }
  body:has(#board) .colh .foldb:active { background: var(--bg-main); }

  /* المطويّ على الهاتف = قسمٌ مغلق، لا شريطٌ رأسيّ.
     (`writing-mode: vertical-rl` يقلب اسم العمود على جنبه — معقولٌ في
      عمودٍ عرضه 52px، وعبثٌ في صفٍّ عرضه 369px.) */
  body:has(#board) .col.fold { flex: none; width: auto; }
  body:has(#board) .col.fold .colh {
    flex-direction: row; padding: 6px 12px; gap: 9px; height: auto;
  }
  body:has(#board) .col.fold .colh .nm { writing-mode: horizontal-tb; letter-spacing: 0; }
  body:has(#board) .col.fold .colh .n { margin-inline-start: auto; }

  /* ═══ ٤ · بطاقة التذكرة — أربعة أسطر بعرض الإبهام ═════════════════════
     ⛔ ورفعُ بترِ الاسم مقصود: `white-space:nowrap` مع `ellipsis` كان يقصّ
        «عبدالرحمن بن سعد بن محمد القحطاني الدوسري» إلى نصفه — وتقنيعُ
        بياناتٍ يحتاجها الموظف ممنوعٌ بأمر المالك. */
  body:has(#board) .tk { padding: 11px 12px; border-inline-start-width: 4px; }
  body:has(#board) .tk .r1 { flex-wrap: wrap; gap: 4px 7px; margin-bottom: 5px; }
  body:has(#board) .tk .no { font-size: 11.5px; }
  body:has(#board) .tk .nm {
    font-size: 14.5px; line-height: 1.4;
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  body:has(#board) .tk .txt { font-size: 13px; -webkit-line-clamp: 3; }
  body:has(#board) .tk .r3 { margin-top: 8px; gap: 5px; }
  body:has(#board) .tk:hover { border-color: var(--border); box-shadow: none; }
  body:has(#board) .tk.p1:hover { border-inline-start-color: var(--c-err); }
  body:has(#board) .tk.p2:hover { border-inline-start-color: var(--c-info); }
  body:has(#board) .tk.p3:hover { border-inline-start-color: var(--text-muted); }
  body:has(#board) .tk:active { border-color: var(--brand-action); }

  body:has(#board) .mini { font-size: 11px; padding: 3px 8px; }  /* أرضيّة الشارة §18 */

  /* ═══ ٥ · ملفّ التذكرة — حيث يعمل الموظف فعلاً ════════════════════════ */
  /* 🔒 رأس الملفّ يبقى مثبَّتاً عمداً — وليس ترفاً: الدرجُ على الجوال يملأ
     الشاشة (z-index 101) **فيغطّي شريط التنقّل السفليّ نفسه**، والستارُ
     خلفه فلا يُنقَر. فزرّ «✕» هو **المخرج الوحيد** من التذكرة، ومعه في
     الرأس ما يلزم الموظفَ وهو يعمل: الرقم · المصدر · الأولوية · تجاوز
     الوعد · العميل · جواله. قِيس ارتفاعه 205px من 852. */
  body:has(#board) .tkh { padding: 10px var(--bsn-gut) 9px; }
  /* زرّ الإغلاق كان يعتمد `margin-inline-start:auto` فينزل إلى سطرٍ ثانٍ
     وحده متى لفّت الشارات — أي أن **مخرج الشاشة يتحرّك بحسب البيانات**.
     يُثبَّت في ركنٍ واحد ويُحجز له مكانه. */
  body:has(#board) .tkh .t1 { position: relative; padding-inline-end: 54px; gap: 7px; }
  body:has(#board) .tkh h2 { font-size: 18px; }
  body:has(#board) .tkh .sub { font-size: 12.5px; line-height: 1.7; margin-top: 7px; }
  body:has(#board) #xc {
    position: absolute; inset-inline-end: 0; top: 0; margin: 0 !important;
    width: 44px; height: 44px; font-size: 17px; flex: none;
  }
  /* ⛔ رقمُ الجوال لا يُكسر بين سطرين — قِيس «+966 50 118 / 4477» مقسوماً،
     وهو رقمٌ يُقرأ ليُطابَق لا نصٌّ يلتفّ. */
  body:has(#board) .tkh .sub .num { white-space: nowrap; }
  /* 🪤 تسريبٌ مقيس من ملفّ صفحةٍ أخرى: قاعدةٌ عامّة (`.cpy::after{content:"نسخ"}`)
     كُتبت بلا نطاق لصفحة الاتّصالات — حيث الزرّ أيقونةٌ عارية — فطبعت الكلمة
     ثانيةً على زرٍّ يقول «نسخ» أصلاً: عرضُه 74px ونصُّه «نسخ نسخ». تُطفأ في
     نطاقي، ويبقى إصلاح الجذر (تنطيقُ تلك القاعدة) للمنسّق. */
  body:has(#board) .cpy::after { content: none; }
  /* «نسخ» فعلٌ حقيقيّ متكرّر (يُلصَق الرقم في واتساب) — فيُقاس بالإبهام
     لا بحجم الكلمة. كان 46.7×34. */
  body:has(#board) .cpy {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 56px; min-height: 44px; height: auto; padding: 4px 14px;
    font-size: 13px; border-radius: var(--radius-s); vertical-align: middle;
  }
  body:has(#board) .cust {
    min-height: 44px; display: inline-flex; align-items: center; font-size: 14px;
  }
  /* 🤝 مقبض `_titles` («⋯») صندوقُه المرسوم 24×24 داخل رأس التذكرة —
     ولا أُوسّعه: صاحبه وسّع **هدف لمسه** سلفاً بـ`::before{inset:-10px}`
     أي 44×44 فعليّاً، والبصرُ 24 عمداً «كي لا تُثقل صفّاً فيه عشرات».
     فمن يقيس الصندوق وحده يرى مخالفةً ليست موجودة، ومن يُصلحها يهدم
     تصميماً مقيساً. تُترك كما هي. */

  /* محورُ تمريرٍ واحد داخل الملفّ: كان `.tkl` و`.tkr` صندوقين مستقلَّين
     (`overflow-y:auto`) وهما فوق بعضهما في عمودٍ واحد على الجوال — أي
     صندوقان يتنازعان الإبهام في شاشةٍ واحدة. */
  body:has(#board) .tkgrid {
    display: block; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0;
  }
  body:has(#board) .tkl,
  body:has(#board) .tkr { overflow: visible; padding: 12px var(--bsn-gut) 18px; }
  body:has(#board) .tkr { padding-bottom: calc(var(--bsn-gut) + 40px); }
  body:has(#board) .blk { margin-bottom: 16px; }
  body:has(#board) .blk > h3 { font-size: 12.5px; }

  /* نقلُ الحالة هو الفعل الأكثر تكراراً — وهو **الطريق الوحيد** للنقل على
     الهاتف بعد موت السحب. فيُعطى ستّة أزرارٍ بشبكةٍ لا بلفّةٍ عشوائية. */
  body:has(#board) .moves { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  body:has(#board) .mv {
    min-height: 46px; font-size: 13.5px; padding: 6px 8px; border-radius: var(--radius-s);
  }
  body:has(#board) .mv:hover { border-color: var(--border); color: var(--ink); }
  body:has(#board) .mv[aria-pressed="true"]:hover {
    border-color: var(--brand-action); color: #FFFFFF;   /* نفسُ لون basin.css للحالة نفسها */
  }
  body:has(#board) .mv:active { border-color: var(--brand-action); }

  body:has(#board) .prio { gap: 7px; }
  body:has(#board) .prio button { min-height: 46px; font-size: 13.5px; }
  body:has(#board) .prio button:hover { border-color: var(--border); color: var(--text-muted); }

  /* الحقول: 16px يمنع تقريب iOS عند التركيز — وبدونه تقفز الصفحة */
  body:has(#board) .inp,
  body:has(#board) select.inp,
  body:has(#board) .ta { font-size: 16px; border-radius: var(--radius-s); }
  body:has(#board) .inp,
  body:has(#board) select.inp { min-height: 46px; padding: 8px 11px; }
  body:has(#board) .ta { min-height: 108px; padding: 10px 11px; }
  body:has(#board) .flab { font-size: 12px; margin-bottom: 5px; }
  body:has(#board) .frow2 { gap: 10px; }

  /* النصّ لا يُحبس في صندوقٍ داخل صندوق */
  body:has(#board) .req { font-size: 13.5px; max-height: none; overflow: visible; padding: 12px 13px; }

  /* الأزرار الأساسية بعرض الصفّ — لا تُلتقط بالظفر */
  body:has(#board) .acts2 { gap: 8px; margin-top: 12px; }
  body:has(#board) .acts2 > .btn,
  body:has(#board) .acts2 > .btn-outline {
    flex: 1 1 100%; min-height: 46px; justify-content: center; font-size: 14px;
  }
  body:has(#board) .cbtns { gap: 8px; }
  body:has(#board) .cbtn {
    flex: 1 1 100%; min-height: 46px; justify-content: center; font-size: 13.5px;
  }
  body:has(#board) .cbtn:hover { border-color: var(--border); color: var(--text); }
  body:has(#board) .cbtn:active { border-color: var(--brand-action); color: var(--brand-action); }

  /* مفتاح/قيمة: القيمة كانت `nowrap` + `ellipsis` فتُبتر أسماءُ الموظفين
     والتواريخ. تلتفّ الآن ولا تُقنَّع. */
  body:has(#board) .kv { flex-wrap: wrap; gap: 4px 8px; padding: 8px 0; font-size: 13px; }
  body:has(#board) .kv .k { min-width: 0; flex: 0 0 92px; }
  body:has(#board) .kv .v {
    white-space: normal; overflow: visible; text-overflow: clip;
    flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
  }
  body:has(#board) .lnk {
    font-size: 13px; min-height: 44px; display: inline-flex; align-items: center;
  }

  /* صندوق التعويض — قرارٌ يُتّخذ بالإبهام: الصفّ كلُّه هدفُ الاختيار
     (`<label class="subrow">` يلفّ المربّع، فالمربّع 20px والهدف 369×46). */
  body:has(#board) .comp { padding: 12px; }
  body:has(#board) .sublist { max-height: none; overflow: visible; }
  body:has(#board) .subrow { min-height: 46px; font-size: 13px; padding: 8px 10px; }
  body:has(#board) .subrow input { width: 20px; height: 20px; }
  body:has(#board) .subrow .nm2 { white-space: normal; overflow: visible; text-overflow: clip; }
  body:has(#board) .subrow .en { font-size: 11.5px; }
  body:has(#board) .subbar { flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; }
  body:has(#board) .subbar button { min-height: 44px; font-size: 12.5px; }
  body:has(#board) .comp .warn { font-size: 12px; }

  /* طلبات العميل — تلتفّ ولا تُبتر، ولا صندوق تمريرٍ داخل صندوق */
  body:has(#board) .ordl { max-height: none; overflow: visible; }
  body:has(#board) .ordr { flex-wrap: wrap; gap: 3px 8px; padding: 9px 0; font-size: 12.5px; }
  body:has(#board) .ordr .it {
    flex: 1 1 100%; white-space: normal; overflow: visible; text-overflow: clip;
  }
  body:has(#board) #ordH { min-height: 44px; align-items: center; }

  /* الجدول الزمني */
  body:has(#board) .tlr .k { font-size: 13px; }
  body:has(#board) .tlr .m { font-size: 12.5px; }
  body:has(#board) .tlr .w { font-size: 11.5px; }

  /* ═══ ٦ · الطبقة الثانية: بطاقة العميل ════════════════════════════════
     🪤 `#cardPane` يُخفى بـ`translateX(-102%)` وهو عند `inset-inline-start:0`
        في صفحة `dir=rtl` — أي محتوىً حيّ عند ‎-336→25‏ يصنع فائضاً أفقياً
        متى بُني اللوح (وهو يُبنى عند أوّل ضغطةٍ على «بطاقة الحوض»، فلا
        يظهر في قياس الصفحة الساكنة أصلاً). فالإخفاء بالقصّ لا بالإزاحة —
        وهو نفسُ علاج الغلاف لـ`.sidebar` و`.dw`. */
  body:has(#board) #cardPane {
    inset: 0; width: auto; transform: none; display: none; border-inline-end: 0;
  }
  body:has(#board) #cardPane[open] { display: flex; }
  body:has(#board) #cardPane .ph { min-height: 52px; padding: 8px var(--bsn-gut); }
  body:has(#board) #paneX { width: 44px; height: 44px; font-size: 24px; }
  body:has(#board) #cardPane .ph .lnk { font-size: 12.5px; min-height: 44px; }

  body:has(#board) .dw2 { width: auto; inset-inline: 0; border-inline-end: 0; }
  body:has(#board) .dw2 .body2 {
    padding: 0 var(--bsn-gut) calc(var(--bsn-bottom) + 20px);
  }

  /* ═══ ٧ · تبويب «جدول» — البطاقات يبنيها `_tables`، وهذا ذيلُه فقط ═══ */
  body:has(#board) .empty-state { padding: 26px 16px; font-size: 13.5px; }
  body:has(#board) .tbl-footer { flex-wrap: wrap; gap: 10px; padding: 12px var(--bsn-gut); }
  body:has(#board) .tbl-footer #range { font-size: 13px; flex: 1 1 100%; text-align: center; }
  body:has(#board) .pager { width: 100%; gap: 10px; }
  body:has(#board) .pager button {
    flex: 1; min-height: 46px; font-size: 14px; justify-content: center;
  }
  body:has(#board) .pager button:not(:disabled):hover { border-color: var(--border); }
}


/* ───────── finance-manage ───────── */
/* ═══════════════════════════════════════════════════════════════════════════
   finance-manage.css — طبقة الجوال لصفحتَي `/finance` و `/manage`

   نقطة الكسر واحدة: `@media (max-width: 767.98px)` — ولا سطر خارجها.
   والغلاف والجداول والعناوين المخبوءة محرّكاتٌ قائمة لا تُعاد هنا:
   `_shell` يملك الرأس والشريط، و`_tables` يملك تحويل الصفوف إلى بطاقات،
   و`_titles` يملك كلّ `title=`. وهذا الملف لعلل الصفحتين وحدهما.

   ⚠️ وثلاث علل من الأصل تُذكر لتُعرف لا لتُنسى — عولج أثرُها على الجوال هنا،
      وموضعُ إصلاحها الحقيقيّ هو المصدر:
      ① `finance.js` يضع وسم SVG داخل `title="…"` فينكسر الوسم ويتسرّب نصّ.
      ② `manage.html` يسمّي رقماً `class="pv warn"` فيلتقط صندوق `.warn` نفسه.
      ③ تعليق المدرّج يقول «مرّر على العمود» — والتحويم لا وجود له على اللمس.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* ── ① الألواح: حشوٌ أضيق يستردّ 12px لكلّ صفّ ─────────────────────────
     `.sect` كان 20px حشواً من كلّ جهة، فيبقى للمحتوى 299px من 393.
     14px تعيد له 311px — وهي فارقُ عمودٍ كامل في جدول أربعة أعمدة. */
  .shell .sect { padding: 14px; }
  .shell .sect > h2 { font-size: 17px; line-height: 1.35; margin-bottom: 4px; }
  .shell .sect > .cap { font-size: 12px; line-height: 1.65; margin-bottom: 12px; }

  /* حواجز الفائض: لا عنصرٌ يدفع الصفحة لأن كلمةً فيه أطول من عموده */
  .shell .sect,
  .shell .fbox,
  .shell .pbox,
  .shell .warn,
  .shell .soon { min-width: 0; }
  .shell .sect > .cap,
  .shell .warn p,
  .shell .soon { overflow-wrap: break-word; }

  /* ── ② بطاقات الأرقام الحاكمة (`.fgrid`/`.fbox`) ───────────────────── */
  .shell .fgrid { gap: 10px; margin-block: 12px; }
  .shell .fgrid .fbox { padding: 13px 14px; }
  .shell .fgrid .fbox .t { font-size: 12px; }
  .shell .fgrid .fbox .n { font-size: 11.5px; line-height: 1.6; }

  /* الرقم لا ينكسر عن رمز الريال: `<svg class="sar">` عنصرٌ مستقلّ يليه،
     وكان يسقط وحده إلى سطرٍ ثانٍ فيقرأ الموظفُ مبلغاً بلا عملته. */
  .shell .fgrid .fbox .v {
    font-size: 24px; line-height: 1.2; white-space: nowrap;
  }

  /* المالية وحدها تُعرض في عمودٍ واحد: أرقامها مبالغُ من اثنتي عشرة خانة
     (4,962,318.50) ومعها رمز الريال، ونصفُ الشاشة (149px صافية) لا يسعها
     عند 24px. و`#bars` معرّفٌ لا يوجد إلّا في `/finance` — فالتمييز بالصفحة
     نفسها لا بعرض الشاشة. ولو سقط `:has()` في متصفّحٍ قديم رجعت الصفحة
     إلى عمودين وهو سلوكها اليوم — تدهورٌ لا كسر. */
  body:has(#bars) .shell .fgrid { grid-template-columns: 1fr; }

  /* ── ③ الأرقام الملوّنة بـ`warn` في `/manage` ─────────────────────────
     🪤 مقيس: `warn` في `manage.html` اسمان لشيئين — لونُ رقمٍ خطِر،
        وصندوقُ تنبيهٍ كامل (خلفية + إطار + حشو 12px 15px + خطّ 12px).
        فكلّ `<div class="pv warn">` و`<div class="v warn">` يلتقط الصندوق:
        يصير الرقمُ داخل إطارٍ برتقاليّ وتسميتُه خارجه، ويرتفع المربّع إلى
        **123px** بينما جارتُه **81px** — فتتفكّك الشبكة صفّاً صفّاً.
        وهنا يُلغى الالتقاط ويبقى اللون وحده، فتستوي المربّعات. */
  .shell .pbox .pv.warn,
  .shell .fbox .v.warn {
    background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
    color: var(--c-warn, #B45309);
  }
  .shell .pgrid { gap: 10px; }
  .shell .pbox {
    padding: 12px 13px; min-height: 76px;
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
  }
  .shell .pbox .pv { font-size: 23px; line-height: 1.15; }
  .shell .pbox .pk { font-size: 11.5px; line-height: 1.45; }

  /* ── ④ زرّ سحب بيانات التوقفات: الفعل الوحيد في قسمه ─────────────────
     كان 153×37 — تحت 44، وهو أكثر ما يُضغط في `/manage`. */
  .shell #ytBtn {
    width: 100%; min-height: 48px; justify-content: center;
    font-size: 14px; padding: 12px 16px;
  }
  .shell .lazyhint { font-size: 12px; }

  /* ── ⑤ مخارج الصفحة في «ما ليس هنا» ────────────────────────────────
     ثلاثة روابط داخل نصٍّ متدفّق، قِيست 40px و40px و**18px** ارتفاعاً،
     واثنان منها ينكسران عبر سطرين («صفحة / المالية») فيصير الرابطُ
     الواحد هدفَين ناقصَين. تصير أزراراً لا تنكسر. */
     ويشمل الحكمُ صناديق `.warn` كذلك: قسم توقفات اليوتيوب يزرع بعد السحب
     تنبيهاً فيه رابط «لوحة القيادة» — قِيس **54×18** بعد الضغط على الزرّ،
     فلا يُرى في جردِ الصفحة قبل السحب. */
  .shell .soon { font-size: 12.5px; padding: 14px 12px; }
  .shell .soon:has(a) { line-height: 3.6; }
  .shell .soon:not(:has(a)) { line-height: 1.9; }
  .shell .warn:has(a) { line-height: 3.2; }
  .shell .soon a,
  .shell .warn a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 12px; margin-block: 2px;
    border: 1px solid var(--border, #E5E5E5);
    border-radius: var(--radius-s, 8px);
    background: var(--surface, #FFFFFF);
    color: var(--brand-action, #ED0954);
    font-weight: 700; text-decoration: none; white-space: nowrap;
  }

  /* ── ⑥ `/finance` · صندوق الطلبات الشاذّة ───────────────────────────
     🪤 مقيس: `#anom` وحده **9,818px** من صفحةٍ طولها 13,654 — أي ٧٢٪.
        أربعون صفّاً صارت أربعين بطاقةً بارتفاع 238px، فيمرّ الموظفُ
        تسعةَ آلافِ بكسل قبل أن يبلغ «وسائل الدفع».
     ولا يُحذف صفٌّ ولا يُختصر عدد (قاعدة 23): الجردُ يبقى كاملاً، ويُحاط
     بإطارٍ يُمرَّر رأسياً — فالقائمة كلّها في متناوله والقسمُ يعود لحجمه. */
  #anom .warn { padding: 12px; }
  #anom .warn h3 { font-size: 16px; line-height: 1.45; }
  #anom .warn p { font-size: 12.5px; line-height: 1.7; }
  #anom .bsn-tbl-wrap {
    /* 52vh لا 60: يبقى ثلث الشاشة على الأقلّ خارج الإطار في كلّ لحظة،
       فيجد الإبهامُ أرضاً يمرّر منها الصفحةَ نفسها. */
    max-height: 52vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border, #E5E5E5);
    border-radius: var(--radius-s, 8px);
    background: var(--surface, #FFFFFF);
  }
  /* والإعلان **قبل** الإطار لا بعده: يقرؤه الموظفُ قبل أن تهبط أصبعُه فيه،
     فلا يحسب الإطارَ نهايةَ القائمة ولا يفاجئه أنّ التمرير فيه غيرُ تمرير
     الصفحة. (`overscroll-behavior:contain` يمنع تسرّب التمرير عمداً —
     فبدونه يُبتلع سحبُ الصفحة داخل تسعة آلاف بكسل من الجرد.) */
  #anom .warn p::after {
    content: "وجردُها أدناه في إطارٍ يُمرَّر رأسياً — كاملاً بلا نقص، وتمريرُ الصفحة من خارجه.";
    display: block; margin-top: 9px;
    font-size: 11.5px; line-height: 1.6; font-weight: 600;
    color: var(--text-muted, #6B6B6B);
  }

  /* ── ⑦ `/finance` · المدرّج الشهري ──────────────────────────────────
     ثلاث علل مقيسة، وهذه معالجتها:

     ① نصٌّ متسرّب: `finance.js` يكتب
        `title="… <svg class="sar" …>"` — فالاقتباس الثاني يُغلق السمة،
        وما بعده يصير محتوى داخل `div.bar`. فيظهر فوق كلّ عمود
        `" · 812 طلباً · متوسط 108.40">` — أربعاً وعشرين مرّة متراكبة.
        `font-size:0` على العمود يقتل العقد النصّية وحدها، ويُستعاد الحجم
        على `<u>` (اسم الشهر) وعلى ما يزرعه `_titles`.
        ⚠️ والإصلاح الأصل في `finance.js`: تهريب `"` أو نزع الـSVG من السمة.

     ② الأحدث كان خارج الشاشة: الترتيب في الـDOM زمنيّ (الأقدم أوّلاً)،
        وبداية التمرير عند أوّل عنصرٍ في التدفّق — فأوّل ما يراه الموظف
        شهرُ 2024-10، والشهرُ الجاري يقع عند **1,131px** خارج النافذة،
        أي ثلاث سحباتٍ أفقية قبل أن يبلغ اليوم.
        🧪 وشاهد الضبط: قِستُ الأربع تراكيب (`row`/`row-reverse` × `rtl`/`ltr`)
           فرجعت كلُّها بالمنظور نفسه — `2024-10 … 2025-05` — لأن مبدأ
           التمرير يتبع بداية التدفّق مهما انقلب الاتجاه. **فالاتجاه ليس
           العلاج، والترتيب هو.** و`order` يقلب المواضع بلا أن يمسّ المبدأ:
           آخرُ عمودٍ في الـDOM (الأحدث) يصير أوّلَ ما يُرى، ويعود الزمن
           إلى الوراء كلّما سُحب — كالخلاصة على الهاتف.
        📏 والمدى ستّون شهراً (خمس سنوات) وليس حدّاً على البيانات: كلّ عمود
           يُرسم ويُنقر مهما بلغ العدد، و`order:999` الافتراضيّ يُلحق ما
           تجاوز الستّين بذيل الشريط (الأقدم) بدل أن يقفز إلى صدره.

     ③ التحويم: التعليق يقول «مرّر على العمود لترى الشهر ورقمه» — و`:hover`
        لا وجود له على اللمس. النصّ يُستبدل بما يصف اللمس فعلاً؛ والقيمةُ
        نفسها يفتحها `_titles` بالنقر (`data-mt="info+tap"` مقروءةً حيّاً).
        ⚠️ وموضع الإصلاح الأصل: نصّ `<p class="cap">` في `finance.html`. */
  /* ④ والمقياس نفسه كان يكذب — وهذه أثقل الثلاث:
        `.bar` عمودُ فليكس يضمّ العمودَ الملوّن `<i>` واسمَ الشهر `<u>` معاً،
        وارتفاع `<i>` نسبةٌ مئوية من `.bar`. فحين يقترب العمودُ من السقف
        يصير `i + u` أطولَ من العمود، فيُقلّص الفليكس `i` — والتقليص يقع
        على الطوال وحدهم.
        🧪 مقيس على البيانات الحيّة: ستّة شهورٍ بين **79.30٪ و100.00٪**
           رُسمت كلُّها بالارتفاع نفسه **134.0px** بلا فرقٍ واحد، بينما
           ما دون 71.5٪ يرسم على نسبةٍ سليمة 1.820px لكل نقطة مئوية.
           فخُمس المقياس الأعلى ممحوٌّ، وأفضلُ شهرٍ يبدو كشهرٍ يقلّ عنه
           بالخُمس. **ورسمٌ يكذب أسوأ من لا رسم.**
        والعلاج: يُقصَر مسارُ العمود على 130px ويُمنع التقليص، فتبقى النسبة
        واحدةً للجميع (1.30px لكل نقطة)، ويهبط الاسمُ تحت المسار في مساحته.
        ⚠️ والعطب في `basin`/`finance.html` أصلاً ويظهر على الديسكتوب كذلك —
           وهذا علاجُ أثره على الجوال وحده. */
  .shell .sect .bars { height: 186px; gap: 4px; padding-bottom: 4px; }
  .shell .sect .bars .bar {
    font-size: 0; line-height: 0; order: 999;
    height: 130px;                 /* ← مرجعُ النسبة المئوية لكل الأعمدة */
  }
  .shell .sect .bars .bar > i {
    flex: none;                    /* ← لا يُقلَّص، فلا يُمحى أعلى المقياس */
    border-radius: 6px 6px 0 0;
  }
  .shell .sect .bars .bar > u {
    flex: none;
    font-size: 10.5px; line-height: 1.2; margin-top: 6px;
  }
  /* ما يزرعه `_titles` داخل العمود يبقى مقروءاً رغم `font-size:0` */
  .shell .sect .bars .bar .mt-lbl,
  .shell .sect .bars .bar .mt-more,
  .shell .sect .bars .bar .mt-ico { font-size: 10.5px; line-height: 1.3; }

  /* قلبُ المواضع: الأحدث أوّلَ ما يُرى (انظر ② أعلاه) */
  .shell .sect .bars .bar:nth-last-child(1){order:1}.shell .sect .bars .bar:nth-last-child(2){order:2}.shell .sect .bars .bar:nth-last-child(3){order:3}.shell .sect .bars .bar:nth-last-child(4){order:4}
  .shell .sect .bars .bar:nth-last-child(5){order:5}.shell .sect .bars .bar:nth-last-child(6){order:6}.shell .sect .bars .bar:nth-last-child(7){order:7}.shell .sect .bars .bar:nth-last-child(8){order:8}
  .shell .sect .bars .bar:nth-last-child(9){order:9}.shell .sect .bars .bar:nth-last-child(10){order:10}.shell .sect .bars .bar:nth-last-child(11){order:11}.shell .sect .bars .bar:nth-last-child(12){order:12}
  .shell .sect .bars .bar:nth-last-child(13){order:13}.shell .sect .bars .bar:nth-last-child(14){order:14}.shell .sect .bars .bar:nth-last-child(15){order:15}.shell .sect .bars .bar:nth-last-child(16){order:16}
  .shell .sect .bars .bar:nth-last-child(17){order:17}.shell .sect .bars .bar:nth-last-child(18){order:18}.shell .sect .bars .bar:nth-last-child(19){order:19}.shell .sect .bars .bar:nth-last-child(20){order:20}
  .shell .sect .bars .bar:nth-last-child(21){order:21}.shell .sect .bars .bar:nth-last-child(22){order:22}.shell .sect .bars .bar:nth-last-child(23){order:23}.shell .sect .bars .bar:nth-last-child(24){order:24}
  .shell .sect .bars .bar:nth-last-child(25){order:25}.shell .sect .bars .bar:nth-last-child(26){order:26}.shell .sect .bars .bar:nth-last-child(27){order:27}.shell .sect .bars .bar:nth-last-child(28){order:28}
  .shell .sect .bars .bar:nth-last-child(29){order:29}.shell .sect .bars .bar:nth-last-child(30){order:30}.shell .sect .bars .bar:nth-last-child(31){order:31}.shell .sect .bars .bar:nth-last-child(32){order:32}
  .shell .sect .bars .bar:nth-last-child(33){order:33}.shell .sect .bars .bar:nth-last-child(34){order:34}.shell .sect .bars .bar:nth-last-child(35){order:35}.shell .sect .bars .bar:nth-last-child(36){order:36}
  .shell .sect .bars .bar:nth-last-child(37){order:37}.shell .sect .bars .bar:nth-last-child(38){order:38}.shell .sect .bars .bar:nth-last-child(39){order:39}.shell .sect .bars .bar:nth-last-child(40){order:40}
  .shell .sect .bars .bar:nth-last-child(41){order:41}.shell .sect .bars .bar:nth-last-child(42){order:42}.shell .sect .bars .bar:nth-last-child(43){order:43}.shell .sect .bars .bar:nth-last-child(44){order:44}
  .shell .sect .bars .bar:nth-last-child(45){order:45}.shell .sect .bars .bar:nth-last-child(46){order:46}.shell .sect .bars .bar:nth-last-child(47){order:47}.shell .sect .bars .bar:nth-last-child(48){order:48}
  .shell .sect .bars .bar:nth-last-child(49){order:49}.shell .sect .bars .bar:nth-last-child(50){order:50}.shell .sect .bars .bar:nth-last-child(51){order:51}.shell .sect .bars .bar:nth-last-child(52){order:52}
  .shell .sect .bars .bar:nth-last-child(53){order:53}.shell .sect .bars .bar:nth-last-child(54){order:54}.shell .sect .bars .bar:nth-last-child(55){order:55}.shell .sect .bars .bar:nth-last-child(56){order:56}
  .shell .sect .bars .bar:nth-last-child(57){order:57}.shell .sect .bars .bar:nth-last-child(58){order:58}.shell .sect .bars .bar:nth-last-child(59){order:59}.shell .sect .bars .bar:nth-last-child(60){order:60}

  /* التعليق يُبدَّل كاملاً — لا يُصغَّر خطُّه إلى صفر، فيبقى في الشجرة نصٌّ
     دون الحدّ يُحسب على الصفحة. يُحجب بـ`display:none` ويُكتب البديل
     على `h2::after` — ولذلك يُثبَّت `h2` كتلةً حتى لا يصير البديلُ
     عنصرَ فليكس بجانب العنوان لو صار العنوانُ فليكساً يوماً. */
  .shell .sect:has(> #bars) > h2 { display: block; }
  .shell .sect:has(> #bars) > .cap { display: none; }
  .shell .sect:has(> #bars) > h2::after {
    content: "الطلبات المكتملة فقط · الأحدث أوّلاً · انقر أيّ عمودٍ ليُظهر شهره ومبلغه · واسحب أفقياً لما قبله.";
    display: block; margin: 5px 0 12px;
    font-size: 12px; font-weight: 400; line-height: 1.65;
    color: var(--text-muted, #6B6B6B);
  }

  /* ── ⑧ جداول `.ft` (وسائل الدفع · الحالات · الدول · التركّز) ─────────
     العناوين كانت 11px والخلايا 11.5px — وكلاهما تحت حدّ الجدول 12.5px
     (قاعدة 24). والحشو يُقلَّص 8→6px والشريط 60→44px ليستردّ العمودُ
     الرقميّ ما يكفيه فلا ينكسر المبلغ. */
  .shell table.ft th { font-size: 12.5px; padding: 0 6px 8px; }
  .shell table.ft td { font-size: 12.5px; padding: 9px 6px; line-height: 1.5; }
  .shell table.ft .shr { min-width: 44px; }
}


/* ───────── lists-dense ───────── */
/* ═══════════════════════════════════════════════════════════════════════════
   lists-dense.css — القوائم الكثيفة الثلاث على الجوال
   `/` نافذة الموظف 360° · `/review` طابور المراجعة · `/log` سجل الأحداث

   ⓪ **العلّة ليست الفائض الأفقي** — الغلافُ ومحرّك الجداول حسماه (قِستُ
      `scrollWidth == innerWidth` على 393 و360 قبل أن أكتب سطراً). العلّة
      **الطول**، وهذه أرقامُه المقيسة على المِرصد بالفِخاخ الحقيقية:
        `/`       ‏19,171px لثمانيةٍ وثلاثين عميلاً  (‏470px للعميل)
        `/review` ‏14,207px لستٍّ وثلاثين قضيةً     (‏359px للقضية)
        `/log`    ‏38,174px لمئة حدثٍ               (‏375px للحدث)
      ومئةُ حدثٍ بطولِ ‏38 ألف بكسل ليست «قائمةً طويلة» بل **قائمةٌ لا تُقرأ**:
      الموظّف يمرّر خمساً وأربعين شاشةً كي يبلغ زرّ «الصفحة التالية»، فيتركها.

   ثلاثةُ أسبابٍ مقيسة لهذا الطول، ولكلٍّ علاجُه هنا:
   ① **البطاقة عمودٌ واحد** — تسعةُ حقولٍ فوق بعضها، كلُّ حقلٍ يحجز 118px
      لتسميته ثمّ يترك بقيّة السطر بياضاً. والعلاج **شبكةٌ تُزاوج القصيرَ
      بالقصير**، والتسميةُ بجانب قيمتها لا في عمودٍ محجوز.
   ② **زرُّ الصفحات في القاع** — تحت مئة بطاقة، ومعه عدّادُ «المعروض من
      الإجمالي» وزرُّ CSV. والعلاج **يُرفَع فوق القائمة ويلتصق**.
   ③ **الرأس يبتلع الشاشة الأولى** — بطاقاتُ الملخّص والفلاتر تأخذ 450–590px
      فلا يرى الموظّفُ صفّاً واحداً عند الفتح. والعلاج **ضغطُها** لا حذفُها.

   ⛔ ولم أحذف تسميةً ولا قيمةً ولا قنّعتُ رقماً — الضغط في التخطيط لا في
      البيانات (أمرُ المالك في أدوات الموظفين: التقنيع «جعلها عديمة الفائدة»).

   ═══ التخصيص — ولماذا كلُّ مميِّزٍ هنا مسبوقٌ بـ`body:has(…)` ═══════════════
   أصنافُ هذه الصفحات مشتركةٌ مع صفحاتِ زملائي: `.totbar` في `/finance` أيضاً،
   و`.tblwrap` و`.chip` و`.tbl-footer` في ستِّ صفحاتٍ أخرى، و`tr[data-bsn-v]`
   في **كلّ** جدولٍ حوّله المحرّك في الحوض كلِّه. فقاعدةٌ بلا تخصيصٍ هنا
   تُعيد تخطيطَ صفحاتٍ لم أقِسها ولم يطلبها منّي أحد.
   والمميِّزات المختارة **فريدةٌ مقيسة** لا مظنونة (بحثٌ في `static/*.html`):
     `#segTog` ⟵ `index.html` وحدها · `#kinds.kindgrid` ⟵ `review.html` وحدها
     (`#kinds` في `board.html` كذلك لكن بلا الصنف) · `#sevs` ⟵ `log.html` وحدها.
   🪤 وتجنّبتُ `table.crm-table` رغم بداهته: قِستُه في **ستِّ** صفحات.
   وثمنُ `:has()` معلومٌ لا مكتوم: متصفّحٌ لا يدعمها تسقط عنده الكتلة كلُّها
   فترجع الصفحةُ إلى تخطيط محرّك الجداول — أطولَ لكن سليماً، لا مكسوراً.

   وصفوفُ الجداول تُخصَّص بتوقيعِ أعمدتها `tr[data-bsn-v^="…"]` الذي يكتبه
   المحرّك — وهو يصف الجدول نفسه: لو نُقل إلى صفحةٍ أخرى تبعه تخطيطُه.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* ═══ ① أرضيةُ البطاقات الثلاث ═════════════════════════════════════════
     أُلغي عمودُ التسميات المحجوز (118px من 369) فصارت التسمية سطراً بجانب
     قيمتها. والوفر مضاعف: القصيرُ لا يترك بياضاً، والطويلُ يستعمل عرض
     البطاقة كاملاً بدل ثلثيه.
     🪤 والوزن هنا ضرورة لا زخرفة: محرّك الجداول يكتب (0,4,3) ومعه
        `display:block!important`، فأيّ تخفيفٍ في المميِّز يُسقط الكتلة صامتاً. */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"],
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"],
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] {
    --bsn-tdpad: 11px;
    --bsn-cardgap: 9px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td {
    display: block !important;                 /* المحرّك كتبها بـ!important */
    grid-column: 1 / -1;                       /* الافتراض سطرٌ كامل، والمزاوجة تُعلن */
    min-height: 0;
    padding-block: 6px;
    padding-inline: var(--bsn-tdpad);
    line-height: 1.5;
  }
  /* التسمية: من عمودٍ مطلقٍ محجوز ⟵ إلى نصٍّ يسبق قيمته في السطر نفسه */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td::before,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td::before,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td::before {
    position: static;
    display: inline;
    width: auto;
    margin-inline-end: 6px;
    font-size: 12.5px;
    vertical-align: baseline;
  }

  /* ترويسةُ البطاقة (أوّل حقل) — والتسمية باقيةٌ فيها (عقدُ محرّك الجداول
     ينصّ ألّا تُلغى). 🪤 وجرّبتُها سطراً مستقلاًّ فوق القيمة فكانت أوضح شكلاً
     وأغلى ثمناً: قِستُ ‏20px لكلّ بطاقة × ‏174 بطاقةً = **‏3,480px** زيادةً
     في الصفحات الثلاث. فرجعتْ إلى سطرها — والوضوحُ من الوزن لا من السطر. */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:first-child,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td:first-child,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td:first-child {
    padding-block: 7px;
    font-size: 13.5px;
  }

  /* حقولُ JSON الخام (`التفاصيل`): محتواها لاتينيٌّ في سياقٍ عربيّ، فتُقلَب
     أقواسُه وفواصلُه إن قُرئ RTL. مقيسٌ قبل: «‏identities": [40917],"}» —
     وبعد: «{"identities": [40917]}». فالقيمة تُقرأ LTR والتسمية تبقى يميناً. */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td.det,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td.det,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td.det {
    direction: ltr;
    text-align: left;
    font-size: 12.5px;
    overflow-wrap: anywhere;
  }
  /* والتسمية تُطفَّف إلى يمين الخليّة (لا سطراً مستقلاًّ) فيلتفّ حولها النصُّ
     اللاتيني — تبقى في موضعها العربيّ بلا سطرٍ إضافيّ لكلّ بطاقة. */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td.det::before,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td.det::before,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td.det::before {
    float: right;
    direction: rtl;
    margin: 0 0 0 8px;
  }
  /* خانةٌ فارغة لا تُبقي سطراً: ‏63 من مئةِ حدثٍ في `/log` بلا تفاصيل */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:empty,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td:empty,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td:empty { display: none !important; }


  /* ═══ ② شريط التنقّل يُرفَع فوق القائمة ويلتصق ═════════════════════════
     المكسب ليس جمالياً: عدّادُ «المعروض من الإجمالي» وزرّا الصفحات وCSV كانت
     خلف 14–38 ألف بكسل. ورفعُها وحدَه يحوّل القائمة من «مسدودة» إلى «متصفَّحة».
     🪤 و`overflow:hidden` على الحاوية يُبطل الالتصاق (يصير الالتصاقُ إلى حاويةٍ
        لا تتمرّر) — فرُفع عنها هنا وحدها. والقصُّ الأفقي باقٍ حيث كان: على
        `.data-scroll` و`.scroll`، ولم أمسّ `overflow` أيٍّ منهما (عقد الغلاف). */
  body:has(#segTog) .data-section,
  body:has(#kinds.kindgrid) .data-section,
  body:has(#sevs) .data-section,
  body:has(#segTog) .tblwrap,
  body:has(#kinds.kindgrid) .tblwrap,
  body:has(#sevs) .tblwrap {
    overflow: visible;
    display: flex;                 /* `order` لا أثر له خارج flex/grid */
    flex-direction: column;
  }
  /* 🪤 مقيس في `basin.css` نفسه (سطر 60): `display:flex` على الحاوية يُبطل
     `hidden` فيظهر ما أُخفي. فالحارس يُعاد صراحةً لأنّي أعتمد على الترتيب. */
  body:has(#segTog) .data-section > [hidden],
  body:has(#kinds.kindgrid) .data-section > [hidden],
  body:has(#sevs) .data-section > [hidden],
  body:has(#segTog) .tblwrap > [hidden],
  body:has(#kinds.kindgrid) .tblwrap > [hidden],
  body:has(#sevs) .tblwrap > [hidden] { display: none !important; }

  body:has(#segTog) .tbl-footer,
  body:has(#kinds.kindgrid) .tbl-footer,
  body:has(#sevs) .tbl-footer,
  body:has(#segTog) .totbar,
  body:has(#kinds.kindgrid) .totbar,
  body:has(#sevs) .totbar {
    order: -1;
    position: sticky;
    z-index: 38;                   /* دون 45 (الرأس) — عقد الغلاف */
    align-items: center;
    justify-content: flex-start;
    row-gap: 4px;
    border-block-start: 0;
    border-block-end: 1px solid var(--border);
    border-radius: var(--radius-m) var(--radius-m) 0 0;
    font-size: 12.5px;
  }
  /* في `/` المتمرِّرُ حاويةٌ داخلية (`.dashboard-scroll`) تبدأ تحت الرأس أصلاً
     فالإزاحة صفر، وفي `/review`·`/log` المتمرِّرُ المستندُ فالإزاحة ارتفاعُ الرأس. */
  body:has(#segTog) .tbl-footer { top: 0; padding: 6px var(--bsn-gut, 12px); }
  body:has(#segTog) .totbar,
  body:has(#kinds.kindgrid) .totbar,
  body:has(#sevs) .totbar { top: var(--bsn-top, 48px); background: var(--surface); padding: 8px var(--bsn-gut, 12px); }

  /* العدّادُ سطرٌ مستقلّ والأزرارُ سطرٌ تحته — فلا يتلوّى الشريط ثلاثة صفوف */
  body:has(#segTog) .totbar > span:first-child,
  body:has(#kinds.kindgrid) .totbar > span:first-child,
  body:has(#sevs) .totbar > span:first-child { flex: 1 0 100%; font-size: 12px; line-height: 1.4; }
  body:has(#segTog) .tbl-footer > div:nth-child(2) { flex: 1 0 100%; font-size: 12px; line-height: 1.4; }
  body:has(#segTog) .tbl-footer > #sortNote { order: 3; flex: 1 0 100%; font-size: 11.5px; line-height: 1.35; }
  /* 🪤 والفاصلُ المطّاط (`.sp`) يدفع CSV إلى سطرٍ ثالث على الجوال — قِستُ
     الشريط 128px بسببه. فيُطوى، ويتقاسم الصفحتان وCSV سطراً واحداً. */
  body:has(#segTog) .totbar .sp,
  body:has(#kinds.kindgrid) .totbar .sp,
  body:has(#sevs) .totbar .sp { flex: 0 0 0; }
  body:has(#segTog) .totbar .pager,
  body:has(#kinds.kindgrid) .totbar .pager,
  body:has(#sevs) .totbar .pager { flex: 2 1 auto; gap: 8px; }
  body:has(#segTog) .tbl-footer .pager { flex: 1 0 100%; gap: 8px; }
  body:has(#segTog) .totbar .pager button,
  body:has(#kinds.kindgrid) .totbar .pager button,
  body:has(#sevs) .totbar .pager button,
  body:has(#segTog) .tbl-footer .pager button,
  body:has(#kinds.kindgrid) .tbl-footer .pager button,
  body:has(#sevs) .tbl-footer .pager button {
    flex: 1;
    min-height: 46px;
    justify-content: center;
    font-size: 13px;
  }
  body:has(#segTog) .totbar .btn,
  body:has(#kinds.kindgrid) .totbar .btn,
  body:has(#sevs) .totbar .btn { flex: 1 1 auto; }
  body:has(#segTog) .totbar .btn,
  body:has(#kinds.kindgrid) .totbar .btn,
  body:has(#sevs) .totbar .btn,
  body:has(#segTog) .tbl-footer .btn,
  body:has(#kinds.kindgrid) .tbl-footer .btn,
  body:has(#sevs) .tbl-footer .btn {
    min-height: 46px;
    justify-content: center;
    padding-inline: 14px;
    font-size: 12.5px;
  }


  /* ═══ ③ الشرائح والفلاتر: هدفُ لمسٍ 44 ═════════════════════════════════
     كانت 32–34px في الصفحات الثلاث — أقلَّ من ثلاثة أرباع الإبهام. */
  body:has(#segTog) .chip,
  body:has(#kinds.kindgrid) .chip,
  body:has(#sevs) .chip { min-height: 44px; padding: 6px 14px; font-size: 12.5px; }
  body:has(#segTog) .chip .n,
  body:has(#kinds.kindgrid) .chip .n,
  body:has(#sevs) .chip .n { font-size: 11px; }
  body:has(#segTog) .flab,
  body:has(#kinds.kindgrid) .flab,
  body:has(#sevs) .flab { font-size: 12px; }

  /* حقلُ البحث في `/review`·`/log` (صنف `.srch`). و16px خطّاً لأنّ ما دونها
     يجعل iOS يُقرّب الصفحة عند التركيز، فيصغُر المنفذُ ويظهر فائضٌ ليس من
     صنع التخطيط. و`.kbd` اختصارُ لوحةِ مفاتيح لا وجود له على اللمس. */
  body:has(#kinds.kindgrid) .srch { padding: 4px 12px; min-height: 48px; }
  body:has(#sevs) .srch { padding: 4px 12px; min-height: 48px; }
  body:has(#kinds.kindgrid) .srch input { min-height: 44px; font-size: 16px; }
  body:has(#sevs) .srch input { min-height: 44px; font-size: 16px; }
  body:has(#kinds.kindgrid) .srch .kbd { display: none; }
  body:has(#sevs) .srch .kbd { display: none; }


  /* ═══════════════════════════════════════════════════════════════════════
     ④ `/` — نافذة الموظف 360°
     ═══════════════════════════════════════════════════════════════════════ */

  /* أربعُ بطاقاتِ ملخّصٍ كانت تبتلع 590px — أي أوّلَ شاشتين — فلا يرى الموظّفُ
     صندوقَ البحث عند الفتح. والحشوُ والخطُّ وحدهما سببُ ذلك.
     🪤 وزميلي في `/desk` كتب `.stats-grid{repeat(3)!important}` بلا تخصيصٍ
     لصفحته، فتسرّبت إلى هذه: ستُّ بطاقاتٍ تنقسم على ثلاثةٍ بلا كسر، أمّا
     أربعٌ فتترك يتيمةً في الصفّ الثاني. فأخصُّ صفحتي بمميِّزٍ أعلى وزناً
     ولا أنازعه في صفحته. (وهذا يستحقّ نظرةً من المنسّق عند التركيب.) */
  body:has(#segTog) .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    margin-bottom: 12px;
  }
  body:has(#segTog) .stat-card { padding: 9px 11px; }
  body:has(#segTog) .stat-card .lbl { font-size: 12px; margin-bottom: 1px; }
  body:has(#segTog) .stat-card .val { font-size: 21px; line-height: 1.2; }
  body:has(#segTog) .stat-card:hover { transform: none; }   /* التحويم لا وجود له على اللمس */
  body:has(#segTog) .tools-row { padding: 11px; gap: 12px; margin-bottom: 12px; }

  /* 🪤 صندوقُ البحث الرئيسيّ ارتفاعُه 24px — وهو أوّلُ ما يلمسه الموظّف في
     الصفحة، وأكثرُ ما يستعمله. (وزميلُ `/desk` عالج الصنف نفسه لكنّه خصَّ
     كتلتَه بـ`body:has(#board)` فلم تبلغ هذه الصفحة.) */
  body:has(#segTog) .srch-box { padding: 4px 14px; }
  body:has(#segTog) .srch-box input,
  body:has(#segTog) .tag-pop input { min-height: 44px; font-size: 16px; }

  /* 🪤 الشرائح الذكية: `max-height:500px` مع `overflow:hidden` — وبرفع الشريحة
     إلى 44px صار المحتوى أطول من السقف، فتُقصّ شرائحُ لا يبلغها الموظّف أبداً.
     وهذا قصٌّ صامت: القائمة تبدو كاملةً وليست كذلك. */
  body:has(#segTog) .segs-wrapper:not(.collapsed) { max-height: none; overflow: visible; }
  body:has(#segTog) .segs-wrapper { gap: 6px; }
  body:has(#segTog) #tagBtn,
  body:has(#segTog) .seg-toggle-btn { min-height: 44px; }
  body:has(#segTog) .tag-picker-container { gap: 8px; }

  /* ── بطاقة العميل: تسعةُ حقولٍ في سبعة أسطر ───────────────────────────
     والترتيب بحسب ما يفعله الموظّف: يعرف من هو ⟵ يتّصل أو يراسل ⟵ يرى ما
     يملك ⟵ ثمّ الأرقام. والأربعةُ القصيرة تتزاوج في سطرين.
     🪤 والصفُّ يُسمّى صراحةً بـ`grid-row`: التوضيبُ التلقائيّ يمضي إلى الأمام
        ولا يعود، فلا يرفع حقلاً إلى صفٍّ سبقه (قِستُه في `/review` — صفّان
        نصفُ كلٍّ منهما فارغ). */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(1) { grid-row: 1; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(2) { grid-row: 2; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(3) { grid-row: 3; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(4) { grid-row: 4; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(5) { grid-row: 5; grid-column: 1; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(6) { grid-row: 5; grid-column: 2; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(7) { grid-row: 6; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(8) { grid-row: 7; grid-column: 1; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(9) { grid-row: 7; grid-column: 2; }
  /* الفاصلُ الرأسيّ — و`inline-start` في RTL هو الحدُّ الأيمن، أي الملاصقُ لجاره */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(6),
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(9) { border-inline-start: 1px solid var(--border); }
  /* آخرُ سطرٍ خليّتان — والمحرّك يرفع الحدّ السفلي عن الأخيرة وحدها */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(8) { border-bottom: 0; }

  /* 🪤 التسمية «💬» رمزٌ لا اسم — ومن لم يعرفه لا يجد شرحه إلّا في تحويمٍ لا
     وجود له على اللمس. فيُسمَّى صراحةً في كلّ خليّة (قاعدة 24). */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td[data-lbl="💬"]::before { content: "💬 محادثات"; }

  /* الجوال والإيميل: قيمتُهما لاتينيةٌ طويلة. 🪤 وجرّبتُهما صفَّ عناصر مقلوباً
     (`flex row-reverse`) فانكسر: بريدٌ بطول 52 حرفاً يأخذ السطر كلَّه، فينزل
     زرُّ النسخ سطراً ثالثاً وتبقى التسمية وحدها في الأوّل — **‏130px لخليّةٍ
     واحدة**. فرجعتْ كتلةً، وزرُّ النسخ يُطفَّف إلى طرف السطر ويلتفُّ حوله
     النصّ: سطران بدل ثلاثة، والتسمية بجانب قيمتها. */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(2),
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(3) { padding-block: 4px; overflow-wrap: anywhere; }

  /* ⛔ أزرارُ النسخ كانت `opacity:0` حتى التحويم — أي **معدومةً على اللمس**،
     وهي ‏71 زرّاً في الصفحة. والمقاس 18×23، ولا يكفي توسيعُها بطبقةٍ وهمية:
     قِستُ أنّ ‏38 منها لا يبلغها مربّعُ 44 لأنّ جيرانَها (شاراتٌ ومقبضُ «⋯»)
     تسرق أركانه. فصارت أجساماً حقيقية 44×44 تُطفَّف إلى طرف السطر. */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] .cp {
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: left;                   /* الصفحة RTL دائماً، فاليسارُ هو الطرف */
    float: inline-end;
    width: 44px;
    height: 44px;
    margin: -3px 0 0 0;
    padding: 0;
    /* خلفيةٌ وحدٌّ كي يُقرأ المربّعُ زرّاً لا فراغاً — فحجمٌ بلا هيئةٍ يبدو خللاً */
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    font-size: 15px;
    line-height: 1;
  }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] .cp:active { border-color: var(--brand-action); color: var(--brand-action); }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] .cp.op svg { width: 17px; height: 17px; }

  /* متنفَّسٌ حول مقبض «⋯» — يملكه محرّك العناوين ولا أمسّ هيئته، لكنّ توسيعَه
     الوهميّ (24 + 10 من كلّ جهة = 44) يحتاج فراغاً حوله وإلّا سرقت جيرانُه
     أركانَه. 🪤 وقِستُ السارقَ لا خمّنتُه: `elementFromPoint` على أركان
     المربّع ردَّ **`td.cspend`** ثماني مرّاتٍ (خليّةُ الإنفاق تحته) و
     **`span.product-badge`** أربعاً. فالعلاج فراغٌ رأسيّ في خليّة المنتجات
     وأفقيٌّ حول المقبض — لا تكبيرُ زرٍّ ليس لي. */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] .mt-more,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] .mt-more,
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] .mt-more { margin-inline: 11px; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="العميل|الجوال|الإيميل"] > td:nth-child(4) { padding-block: 11px; }


  /* ═══════════════════════════════════════════════════════════════════════
     ⑤ `/review` — طابور المراجعة
     ═══════════════════════════════════════════════════════════════════════ */

  /* سبعُ بطاقاتِ ملخّصٍ في عمودٍ واحد ابتلعت 1,650px قبل أوّل قضية */
  body:has(#kinds.kindgrid) .kindgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
  body:has(#kinds.kindgrid) .kindbox { padding: 9px 11px; }
  body:has(#kinds.kindgrid) .kindbox .t { font-size: 12.5px; overflow-wrap: anywhere; }
  body:has(#kinds.kindgrid) .kindbox .v { font-size: 21px; line-height: 1.2; }
  body:has(#kinds.kindgrid) .kindbox .pay { font-size: 12px; white-space: normal; }
  body:has(#kinds.kindgrid) .kindbox a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; }
  /* وشرحُ الرموز أسفل الصفحة كان 10.5px — فوق الأرضية بنصف بكسل، وتحت القراءة */
  body:has(#kinds.kindgrid) .legend { font-size: 12px; }

  /* ── بطاقة القضية: التاريخُ ترويسةً، ثمّ النوعُ وعددُ معرّفاته، ثمّ الاسم
     فالسببُ فالتفاصيل، والقرارُ آخرَ ما تراه العين قبل أن يضغطه الإبهام.
     🪤 و«النوع» و«معرّفات» ليسا متجاورين في الجدول (بينهما السببُ والاسم)،
        فلا يكفي `grid-column` — الصفُّ يُسمّى بـ`grid-row`. */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td:nth-child(1) { grid-row: 1; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td:nth-child(2) { grid-row: 2; grid-column: 1; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td:nth-child(5) { grid-row: 2; grid-column: 2; border-inline-start: 1px solid var(--border); }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td:nth-child(3) { grid-row: 3; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td:nth-child(4) { grid-row: 4; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td:nth-child(6) { grid-row: 5; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td:nth-child(7) { grid-row: 6; }

  /* السببُ هو الجملةُ التي يُبنى عليها القرار — فيُقرأ لا يُلمَح */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td.why { font-size: 13.5px; color: var(--ink); }

  /* والتفاصيلُ هنا JSON بصنف `.pay` لا `.det` — فتأخذ معاملةَ JSON نفسها */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td:nth-child(6) {
    direction: ltr;
    text-align: left;
    font-size: 12.5px;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td:nth-child(6)::before { float: right; direction: rtl; margin: 0 0 0 8px; }

  /* القرار: زرّان يُضغطان في كلّ قضيّة (‏72 زرّاً كانت 29px ارتفاعاً) —
     48px وعرضٌ متساوٍ لا يُخطئه الإبهام. */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td.act {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding-block: 9px;
  }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td.act::before { flex: none; align-self: center; margin-inline-end: 0; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="التاريخ|النوع|السبب"] > td.act .mini {
    flex: 1 1 0;
    min-width: 100px;
    min-height: 48px;
    padding-inline: 12px;
    border-radius: var(--radius-s);
    font-size: 13px;
    font-weight: 700;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     ⑥ `/log` — سجل الأحداث (مئةُ صفٍّ في الصفحة الواحدة)
     ═══════════════════════════════════════════════════════════════════════ */

  /* الفلاتر: أربعُ درجاتِ خطورةٍ وإحدى عشرة فئة. بالالتفاف تحجز 450px من
     الشاشة الأولى فلا يرى الموظّفُ حدثاً واحداً عند الفتح. والحلُّ شريطان
     يُمرَّران أفقياً — **وهو تمريرٌ مقصودٌ ومُعلَن**، تُعلنه الشريحةُ المقطوعة
     عند الحافّة — ولا يمسُّ عرضَ الصفحة لأنه محبوسٌ في حاويته (قِيس:
     `documentElement.scrollWidth == 393`). */
  body:has(#sevs) .tools > .frow { align-items: flex-start; row-gap: 4px; }
  body:has(#sevs) .tools > .frow > .flab {
    flex: 1 0 100%;
    margin-inline-start: 0 !important;
    padding-block-start: 2px;
  }
  body:has(#sevs) .tools > .frow > #sevs,
  body:has(#sevs) .tools > .frow > #cats {
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-block-end: 2px;
    -webkit-overflow-scrolling: touch;
  }
  body:has(#sevs) .tools > .frow > #sevs > .chip,
  body:has(#sevs) .tools > .frow > #cats > .chip { flex: none; scroll-snap-align: start; }
  body:has(#sevs) .tools { padding-block-start: 10px; gap: 8px; }

  /* شريطُ التحديث التلقائي: كان 10.5px نصّاً و46×23 زرّاً */
  body:has(#sevs) .legend { font-size: 12px; padding: 4px var(--bsn-gut, 12px); gap: 6px 10px; }
  body:has(#sevs) .legend .btn,
  body:has(#sevs) #pause { min-height: 44px; padding-inline: 14px; font-size: 12.5px; }

  /* ── بطاقة الحدث: ثمانيةُ حقولٍ في ستّة أسطر ─────────────────────────
     والزوجان مقصودان: «ما خطورته» مع «أيُّ فئة» — سؤالان يُقرآن معاً؛ ثمّ
     «من فعله» مع «ما الإجراء». ثمّ الملخّصُ فالتفاصيلُ فالأثرُ التقني.
     🪤 وجرّبتُ وضعَ الوقت في نصف السطر فانكسر سطرين على 393 (‏54px للخليّة
        الواحدة) — فالوقتُ سطرٌ كامل، والقياسُ هو الذي حكم لا الذوق. */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td:nth-child(1) { grid-row: 1; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td:nth-child(2) { grid-row: 2; grid-column: 1; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td:nth-child(3) { grid-row: 2; grid-column: 2; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td:nth-child(4) { grid-row: 3; grid-column: 1; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td:nth-child(5) { grid-row: 3; grid-column: 2; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td:nth-child(6) { grid-row: 4; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td:nth-child(7) { grid-row: 5; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td:nth-child(8) { grid-row: 6; }
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td:nth-child(3),
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td:nth-child(5) { border-inline-start: 1px solid var(--border); }

  /* الملخّصُ جملةُ الحدث المقروءة — فتُقرأ بحجم النصّ لا بحجم البيانات */
  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr[data-bsn-v^="الوقت|الخطورة|الفئة"] > td:nth-child(6) { font-size: 13.5px; color: var(--ink); }
}


/* ───────── tables-heavy ───────── */
/* ═══════════════════════════════════════════════════════════════════════════
   tables-heavy.css — الجداول الثقيلة الثلاثة: /keys · /subs · /users

   محرّك `_tables` حوّل الصفوف بطاقاتٍ فأزال الفائض الأفقي — وبقيت علّتان
   لا يحلّهما محرّكٌ عامّ لأنّهما **من معنى الصفحة لا من شكل الجدول**:

   ① **البطاقة عمودٌ من ٦–٨ أسطر متساوية الوزن** (٣٥٥ · ٤٠٠ · ٣٦٦px للصفّ).
      والموظف لا يقرأ صفّاً، بل **يبحث عن صفٍّ ثمّ يفعل به شيئاً**. فالسطر
      المتساوي يُخفي أيّها هو الهويّة وأيّها هو الفعل، ويجعل ٣٦ طلباً تنتظر
      **١٢٬٠٨٢px من التمرير**. والعلاج: هويّةٌ في الترويسة · حقولٌ قصيرة
      **مزدوجة في صفٍّ واحد** · وشريطُ فعلٍ عريضٍ في القاع.
   ② **عمود التسمية المحجوز ٩٦px** يأكل ثُلث عرض الشاشة في كلّ خليّة فيُجبر
      القيمةَ على الالتفاف، ويترك بجانب «الطلب #96812» بياضاً بطول ثلث الشاشة.
      وعلى ٣٩٣px المساحةُ هي العملة: التسمية **تسبق** قيمتها في السطر نفسه،
      ولا تصعد فوقها إلّا حيث تملأ القيمةُ السطرَ وحدها (الإيميل · المفتاح).

   والأثر مقيسٌ على المرصد بتعطيل هذا الملف وحده (393px):
      `/keys`  ‏12,082 ⟵ **8,671**  (الصفّ 355 ⟵ 240)
      `/subs`  ‏15,636 ⟵ **12,828** (الصفّ 400 ⟵ 311)
      `/users` ‏12,368 ⟵ **10,820** (الصفّ 366 ⟵ 304)

   ⚠️ ثلاثة أشياء تُفسّر شكل هذا الملف:
   ① **النطاق بثلاث مراسٍ لا بصنفٍ عامّ:** `#stkbar` (keys وحدها) · `#kBonus`
      (subs وحدها) · `.warnbox` (users وحدها) — تحقّقتُ من انفرادها بـgrep على
      كلّ `*.html`. و`.crm-table` و`.tools-row` و`.chip` **مشتركةٌ مع صفحاتٍ
      لستُ مالكَها** (`/`, `/desk`, `/log`, `/review`, `/finance`, `/activation`)
      فلا أكتب عليها بلا نطاق. ومن سقط عنده `:has()` سقطت كتلتي كلُّها ورجع
      إلى بطاقة `_tables` سليمةً — لا إلى صفحةٍ مكسورة.
   ② **الوزن هو الحَكَم لا الترتيب:** `keys.html` و`subs.html` تكتبان أنماطهما
      في `<style>` داخل الصفحة، **وهي تُحمَّل بعد `basin.css`** الذي سيُركَّب
      فيه هذا الملف. فكلُّ ما يمسّ `.krow`/`.pz`/`.grp`/`.kfilters` مُسنَدٌ إلى
      مِرساةٍ بمعرّف (`#stk`/`#stkbar`) — والمعرّف يغلب الصنفَ بلا رفع صوت.
   ③ `!important` مقصورٌ على ما استعمله المحرّك فيه (`display` · `padding-inline`)
      — وما عداه يُحسم بالوزن بلا رفع صوت.

   نقطة الكسر واحدة `max-width: 767.98px` — ولا سطر خارجها.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* ══════════════════════════════════════════════════════════════════════
     ① البطاقة = شبكةُ عمودين — والحقول القصيرة تتزاوج فيها
     ══════════════════════════════════════════════════════════════════════ */
  body:has(#stkbar)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr,
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr,
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    margin-bottom: 12px;
  }

  /* الافتراضي: الخليّة تمتدّ على العرض كلّه، والتسمية **تسبق** قيمتها في
     السطر نفسه بدل عمودٍ محجوزٍ عرضُه 96px. والوفر مضاعف: الحقلُ القصير لا
     يترك بياضاً بطول ثلث الشاشة، والحقلُ الطويل يستعمل عرض البطاقة كاملاً
     (345px بدل 251px) فيسقط عنه سطرُ التفاف. */
  body:has(#stkbar)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td,
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td,
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td {
    grid-column: 1 / -1;
    min-height: 0;
    padding-block: 8px;
    padding-inline: 12px !important;
    font-size: 13.5px;
    line-height: 1.5;
  }

  body:has(#stkbar)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td::before,
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td::before,
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td::before {
    /* 🪤 والعلامة `‎` (U+200E) بعد التسمية ليست زخرفة، بل مقيسةٌ في اللقطة:
       التسمية العربية إذا لاصقت قيمةً تبدأ بمحايد (`#48219` · `+٣٠`) جعلت
       المحايدَ يأخذ اتجاه الفقرة فيقفز إلى الطرف الآخر — فيُقرأ «51037#»
       و«٣٠+». والعلامة تُلحقه بمقطع الرقم فيعود «#51037» و«+٣٠».
       والفراغان **قبلها لا بعدها**: بعدها يدخلان مقطع الرقم فيقعان في طرفه
       البعيد، وقبلها يبقيان محايدَين ملتصقَين بالتسمية حيث الفجوة مطلوبة. */
    content: attr(data-lbl) "\00a0\00a0\200E";
    position: static;
    display: inline;
    width: auto;
    margin-block-end: 0;
    font-size: 11.5px;      /* أعلى من أرضية 10px — وهي تسميةٌ لا بيان */
    line-height: 1.25;
  }

  /* 🪤 والخليّة **بلا تسمية** تُستثنى صراحةً — وإلّا رجعت إليها التسمية فارغة.
     مقيسٌ في اللقطة: خليّة الأفعال `data-lbl=""`، فأنتج `content` فراغَين
     عرضُهما **19px** قبل الزرّ، فانكمش من 341 إلى 322 وانزاح عن حافّته.
     (المحرّك يكتب `content:none` لها بـ(0,4,1)، وقاعدتي العامّة (0,4,5)
     تغلبه — فالاستثناء يُعاد بوزنٍ أعلى لا بالاتّكال عليه.) */
  body:has(#stkbar)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-bsn-nolbl]::before,
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-bsn-nolbl]::before,
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-bsn-nolbl]::before,
  body:has(#stkbar)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-bsn-full]::before,
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-bsn-full]::before,
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-bsn-full]::before {
    content: none;
  }

  /* واستثناءٌ واحد: قيمةٌ تملأ السطر وحدها لا تُشارَك فيه.
     الإيميل 41 حرفاً والمفتاح 29 — وأيُّ تسميةٍ تسبقهما تدفعهما إلى سطرين،
     فالتسمية تصعد فوقهما وتُترك القيمة على عرض البطاقة كاملاً. */
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="الإيميل"]::before,
  body:has(#stkbar)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="المفتاح / الحساب"]::before {
    display: block;
    margin-block-end: 1px;
  }

  /* ── ثنائيّةُ الصفّ: حقلان قصيران جنباً إلى جنب ─────────────────────────
     التعيين **صريح** (`grid-column: 1` / `2`) لا `span` — كي لا تتغيّر
     المواضع حين يتبدّل عدد الأعمدة بين تبويبَي `/keys`.
     و`1` هي اليمين في RTL، فالفاصل الرأسي على `inline-start` للعمود الثاني. */
  body:has(#stkbar)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="الطلب"],
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="بدأ في"],
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="الباقي"],
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="الدور"],
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="الصلاحيات"] {
    grid-column: 1;
  }

  body:has(#stkbar)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="التاريخ"],
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="ينتهي في"],
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="ممنوح"],
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="الحالة"],
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="آخر دخول"] {
    grid-column: 2;
    border-inline-start: 1px solid var(--border);
  }

  /* ══════════════════════════════════════════════════════════════════════
     ② شريط الفعل — عريضٌ في القاع، وهدفُ لمسه ٤٨ لا ٤٤
        (هو ما يُضغط في كلّ صفٍّ، والقاعدة 24 تُفضّل ٤٨ لما يُضغط كثيراً)
     ══════════════════════════════════════════════════════════════════════ */
  /* 🪤 و`display:flex` مُعادةٌ صراحةً: محرّك الجداول يكتبها لخليّة الأفعال
     بـ(0,4,1)، ثمّ يكتب `lists-dense.css` — وهو غيرُ منطوقٍ بصفحة —
     `tr[data-bsn-v] > td{display:block!important}` بـ(0,4,3) فيغلبها في
     **كلّ** صفحة لا في صفحاته وحدها. والأثر مقيس: الزرّ رجع 49.9px عرضاً
     في خليّةٍ عرضها 365 (`display:block` ⟵ فلا `flex` يعمل). */
  body:has(#stkbar)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-bsn-act],
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-bsn-act],
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-bsn-act] {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    grid-column: 1 / -1;
    padding-block: 8px;
    background: var(--bg-main);
  }
  body:has(#stkbar)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-bsn-act] > *,
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-bsn-act] > *,
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-bsn-act] > * {
    flex: 1 1 0;
    min-height: 48px;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: var(--radius-s);
  }

  /* صفٌّ بخليّتَي فعلٍ منفصلتين (`/keys` · «سحب وتسليم» + «↗ البطاقة»):
     تُوضعان جنباً إلى جنب لا سطرين — والأولى هي القرمزية فتُقرأ أولاً. */
  body:has(#stkbar) .bsn-tbl.bsn-tbl.bsn-tbl > tbody >
    tr:has(td[data-bsn-act]:nth-last-child(2)) > td[data-bsn-act] {
    border-bottom: 0;
  }
  body:has(#stkbar) .bsn-tbl.bsn-tbl.bsn-tbl > tbody >
    tr:has(td[data-bsn-act]:nth-last-child(2)) > td[data-bsn-act]:nth-last-child(2) {
    grid-column: 1;
  }
  body:has(#stkbar) .bsn-tbl.bsn-tbl.bsn-tbl > tbody >
    tr:has(td[data-bsn-act]:nth-last-child(2)) > td[data-bsn-act]:last-child {
    grid-column: 2;
  }

  /* ══════════════════════════════════════════════════════════════════════
     ③ حقولٌ بعينها — وزنُها من معناها في الصفحة
     ══════════════════════════════════════════════════════════════════════ */

  /* «الباقي» هو **سبب وجود صفحة `/subs`** (المِصفاة الافتراضية «تنتهي قريباً»)
     — فيُقرأ بحجم الأرقام لا بحجم النصّ، ولونُه من أصناف الصفحة نفسها. */
  body:has(#kBonus) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="الباقي"] .lft {
    font-size: 16px;
    font-weight: 700;
  }
  body:has(#kBonus) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="الباقي"] .sbar {
    margin-block-start: 5px;
  }
  body:has(#kBonus) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="ممنوح"] .gift {
    font-size: 15px;
    font-weight: 700;
  }

  /* المفتاح والإيميل: بياناتٌ تُنسخ ولا تُقنَّع (أمر المالك) — تُعرض كاملةً
     وتُكسَر أينما لزم، ولا `ellipsis` ولا اختصار. */
  body:has(#stkbar) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="المفتاح / الحساب"] .secret,
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="الإيميل"] {
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  body:has(#stkbar) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="المفتاح / الحساب"] .secret {
    display: block;
    padding: 7px 9px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     ④ ترويسة البطاقة = هويّة الصفّ (آخر ما يُكتب كي يغلب ما قبله بالترتيب)
        والتسمية تُطوى هنا وحدها: الخليّة الأولى في الجداول الثلاثة هي
        **اسمُ عميلٍ أو موظّفٍ أو منتج** — عنوانُ البطاقة، ولا يحتاج لافتة.
        (وما عداها من التسميات باقٍ مرئياً في كلّ خليّة.)
     ══════════════════════════════════════════════════════════════════════ */
  body:has(#stkbar)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td:first-child,
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td:first-child,
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td:first-child {
    grid-column: 1 / -1;
    padding-block: 10px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.45;
  }
  body:has(#stkbar)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td:first-child::before,
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td:first-child::before,
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td:first-child::before {
    content: none;
  }
  /* السطر التابع للاسم (الجوال · الإيميل · اسم الدخول) — بيانُ تعريفٍ لا زخرفة */
  body:has(#stkbar)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td:first-child .cap,
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td:first-child .cap,
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td:first-child .cap,
  /* وخليّة «العميل» حيثما وقعت — ففي تبويب المفاتيح ليست الأولى، والجوال
     فيها هو الجوال نفسه فلا يُرسَم بطريقتين في صفحةٍ واحدة. */
  body:has(#stkbar) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > td[data-lbl="العميل"] .cap {
    margin-block-start: 2px;
    font-weight: 600;
    /* 🪤 «+966544178820» في فقرةٍ عربية تُرسَم «966544178820+» — والعلامة
       تقفز إلى الطرف الآخر فيقرؤها الموظّف رقماً مقلوباً. و`direction:ltr`
       تُصلح الرسم، لكنّها تسحب السطر إلى اليسار — فـ`text-align:end`
       (وهي اليمين داخل عنصرٍ لاتينيّ) تُعيده تحت الاسم تماماً. */
    direction: ltr;
    text-align: end;
  }

  /* صفٌّ كلُّه خليّةٌ ممتدّة (لا نتائج · تحميل) يبقى سطراً واحداً */
  body:has(#stkbar)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > [data-bsn-full],
  body:has(#kBonus)  .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > [data-bsn-full],
  body:has(.warnbox) .bsn-tbl.bsn-tbl.bsn-tbl > tbody > tr > [data-bsn-full] {
    grid-column: 1 / -1;
    border-inline-start: 0;
  }

  /* ══════════════════════════════════════════════════════════════════════
     ⑤ صفّ الأدوات: البحث والمِصافي — أهدافُ لمسٍ حقيقية، وخطٌّ لا يُقفز به
        🪤 وخطُّ الإدخال دون 16px يجعل iOS **يُكبّر الصفحة** عند اللمس،
           فتخرج الأعمدة عن الشاشة ويظنّ الموظفُ الصفحةَ مكسورة.
           (قِيس على المرصد: `#q` كان 14.5px وارتفاعه 24px.)
     ══════════════════════════════════════════════════════════════════════ */
  body:has(#stkbar) .tools-row,
  body:has(#kBonus) .tools-row {
    padding: 12px;
    gap: 12px;
    margin-bottom: 14px;
  }
  body:has(#stkbar) .tools-row .srch-box,
  body:has(#kBonus) .tools-row .srch-box { padding: 3px 13px; gap: 9px; }
  body:has(#stkbar) .tools-row .srch-box input,
  body:has(#kBonus) .tools-row .srch-box input {
    min-height: 46px;
    font-size: 16px;
  }
  body:has(#stkbar) .kfilters,
  body:has(#kBonus) .sfilters { gap: 8px; }
  body:has(#stkbar) .kfilters .chip,
  body:has(#kBonus) .sfilters .chip {
    min-height: 44px;
    padding: 0 15px;
    font-size: 13px;
  }
  /* `#prod` يحمل `style="padding:7px 10px"` سطريّاً — فالارتفاع يُضبط
     بـ`min-height` لا بالحشو، وهو ما لا تغلبه سمةُ النمط. */
  body:has(#stkbar) .kfilters > select,
  body:has(#kBonus) .sfilters > select {
    min-height: 44px;
    font-size: 16px;
    flex: 1 1 100%;
  }

  /* ذيل الجدول: العدّاد وزرّا الصفحات.
     ⚠️ و`lists-dense.css` (وهو غيرُ منطوقٍ بصفحة) يرفعه فوق القائمة ويُلصقه
     بـ`order:-1; position:sticky` — فيسري على صفحتَيّ أيضاً. والرفع في ذاته
     مكسبٌ هنا (٤٠–٦٠ صفّاً في الصفحة الواحدة، والزرّ كان خلفها جميعاً)،
     لكنّه **يمرّ فوق البطاقات عند التمرير** وخلفيّتُه بلا حدٍّ يفصلها عنها.
     فأُثبّت له سطحاً وظلّاً حتى يُقرأ شريطاً عائماً لا سطراً من بطاقة. */
  body:has(#stkbar) .tbl-footer,
  body:has(#kBonus) .tbl-footer {
    padding: 10px 12px;
    gap: 10px;
    background: var(--surface);
    box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .35);
  }
  body:has(#stkbar) .tbl-footer .pager button,
  body:has(#kBonus) .tbl-footer .pager button {
    min-height: 44px;
    min-width: 88px;
    padding: 0 16px;
    font-size: 13.5px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     ⑥ `/subs` — لوحةُ الأرقام الخمسة
        كانت خمس بطاقاتٍ بارتفاع ١١٥px تملأ الشاشة الأولى كلَّها (٦٦٠px)
        قبل أن يرى الموظفُ اشتراكاً واحداً. والرقم يُقرأ في سطرٍ واحد.
     ══════════════════════════════════════════════════════════════════════ */
  body:has(#kBonus) .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }
  body:has(#kBonus) .stats-grid .stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }
  body:has(#kBonus) .stats-grid .stat-card .val {
    order: 1;
    font-size: 20px;
    line-height: 1.2;
    flex: 0 0 auto;
  }
  body:has(#kBonus) .stats-grid .stat-card .lbl {
    order: 2;
    margin: 0;
    font-size: 11.5px;
    line-height: 1.35;
    justify-content: flex-start;
    gap: 5px;
    flex: 1 1 auto;
  }

  /* ══════════════════════════════════════════════════════════════════════
     ⑦ `/keys` — لوحة المخزون
        هي أوّل ما يراه الموظف، وبينها وبين عملِه (طابور التسليم) ٨٠٠px.
        فمفتاحُ طيّها يصير زرّاً حقيقياً بارتفاع ٤٨، وأزرارُ اللصق تبلغ ٤٤
        (كانت ٣١ — تسعةَ عشرَ هدفَ لمسٍ ناقصاً في صفحةٍ واحدة).
     ══════════════════════════════════════════════════════════════════════ */
  #stkbar.stkbar {
    min-height: 48px;
    margin: 0 0 12px;
    padding: 0 14px;
    gap: 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
  }
  #stkbar.stkbar .chev { font-size: 17px; }

  #stk .pulse { gap: 8px; margin-bottom: 10px; }
  #stk .pulse .pz {
    min-width: calc(50% - 4px);
    min-height: 56px;
    padding: 9px 12px;
    gap: 9px;
  }
  #stk .pulse .pz .num { font-size: 22px; }
  #stk .pulse .pz .txt { font-size: 11.5px; }

  #stk .grp { min-height: 48px; padding: 0 14px; }
  #stk .grp .chev { font-size: 15px; }

  /* الصفّ: اسمٌ **يلتفّ ولا يُبتر** — فالاسم المبتور كان يضع بقيّته في
     `title=` وحده، ولا تحويم على اللمس (قاعدة 24). ثمّ الرقم فالزرّ. */
  #stk .krow { padding: 7px 14px; gap: 11px; }
  #stk .krow .nm {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 13.5px;
    line-height: 1.4;
  }
  #stk .krow .qty { font-size: 18px; min-width: 36px; }
  #stk .krow .act {
    min-height: 44px;
    padding: 0 13px;
    font-size: 12.5px;
    flex: 0 0 auto;
  }
  /* 🪤 والزرّ الممتلئ يُفرَّغ على الجوال — والعلّة عين علّة المالك التي هدمت
     شبكةَ المربّعات هنا (تعليق `keys.html`): **«حين يصير كل شيء أحمر لا يبقى
     شيء أحمر»**. عشرةُ صفوفٍ «نفد/قارب» تحمل زرّاً قرمزياً ممتلئاً بارتفاع 44
     تصنع جداراً أحمر بطول الشاشة، فيبتلع الإشارةَ التي من أجلها لُوِّن: الرقمَ
     الأحمر والشريطَ الجانبي. والفعلُ يبقى قرمزيّ الحدّ والحرف — لونُ الفعل
     في الدستور — والحالةُ تبقى في الرقم حيث تُقرأ. */
  #stk .krow .act.hot {
    background: var(--surface);
    border-color: var(--brand-action);
    color: var(--brand-action);
    font-weight: 700;
  }

  /* ══════════════════════════════════════════════════════════════════════
     ⑧ الدرج (`.dw`) — وهو **حيثُ يقع الفعل** في الصفحات الثلاث
        كلُّ بطاقةٍ أعدتُ ترتيبَها تنتهي بزرٍّ يفتح هذا الدرج: «لصق دفعة»
        و«إدارة المدّة» و«فتح». فلا معنى لبطاقةٍ يبلغها الإبهام ثمّ يعجز عن
        إتمام العمل فيها. والمقيس داخله على 393: ✕ الإغلاق **32×32** ·
        الحقول 39–41 · «حفظ الدفعة» و«تثبيت المدّة» و«أضف» و«إلغاء» **35** ·
        وأزرار الصلاحيات الثلاثية في `/users` **24** لموظّفٍ غير مدير
        (وهي مقفلةٌ للمدير وحده — فالعطب لا يظهر إن فُتحت بطاقةُ مديرٍ).

        ⛔ ولا أمسّ `.dw` ولا `.dwb` أنفسهما — هما للغلاف بعقده؛ وهذا ضبطُ
           عناصرَ **داخلهما** لا إعادةُ تشكيلٍ لهما.
        🪤 و`textarea` مستثناةٌ من `min-height` عمداً: للصفحة عليها 190px
           سلفاً، و«الحدّ الأدنى 44» يهبط بها لا يرفعها.
     ══════════════════════════════════════════════════════════════════════ */
  body:has(#stkbar)  .dw .x-btn,
  body:has(#kBonus)  .dw .x-btn,
  body:has(.warnbox) .dw .x-btn {
    min-width: 44px;
    min-height: 44px;
  }

  body:has(#stkbar)  .dw input, body:has(#stkbar)  .dw select,
  body:has(#kBonus)  .dw input, body:has(#kBonus)  .dw select,
  body:has(.warnbox) .dw input, body:has(.warnbox) .dw select {
    min-height: 44px;
  }
  /* 16px لا 13.5: دون ذلك يُقرّب iOS الصفحة عند التركيز على الحقل */
  body:has(#stkbar)  .dw input, body:has(#stkbar)  .dw select, body:has(#stkbar)  .dw textarea,
  body:has(#kBonus)  .dw input, body:has(#kBonus)  .dw select, body:has(#kBonus)  .dw textarea,
  body:has(.warnbox) .dw input, body:has(.warnbox) .dw select, body:has(.warnbox) .dw textarea {
    font-size: 16px;
  }

  body:has(#stkbar)  .dw button, body:has(#stkbar)  .dw .btn, body:has(#stkbar)  .dw a.btn-outline,
  body:has(#kBonus)  .dw button, body:has(#kBonus)  .dw .btn, body:has(#kBonus)  .dw a.btn-outline,
  body:has(.warnbox) .dw button, body:has(.warnbox) .dw .btn, body:has(.warnbox) .dw a.btn-outline {
    min-height: 44px;
    padding-inline: 16px;
    font-size: 13.5px;
  }
  /* مفتاح الصلاحية الثلاثي (`لا يرى · يطّلع · يحرّر`) — ثلاثة أهدافٍ في
     مساحةٍ واحدة، فيُوسَّع كلُّ واحدٍ منها ويُمنع من الالتصاق بجاره. */
  body:has(.warnbox) .dw .lv { flex-wrap: wrap; }
  body:has(.warnbox) .dw .lv button {
    min-height: 44px;
    min-width: 60px;
    padding-inline: 12px;
    font-size: 13px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     ⑨ `/users` — لوحةُ التحذير فوق القائمة
     ══════════════════════════════════════════════════════════════════════ */
  body:has(.warnbox) .warnbox {
    font-size: 12.5px;
    line-height: 1.65;
    padding: 12px 14px;
    margin-bottom: 14px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   ⑫ تصويبات المنسّق — علل قِستُها بنفسي بعد التركيب، لا نقلاً عن بانٍ
   (قاعدة 17: لا يُعلَن أثرٌ قبل قراءته من مصدره)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* ① شريط النبض في «الربط والتكاملات» — العدسة العامّة لم تره.
     🪤 قياس الصفحة كلها قال «صفر فائض» **وهو صادق**: `.dashboard-scroll`
        يمتصّ الفيض (`overflow-x:auto`). لكن المكوّن نفسه مكسور:
        `.pulse` محتواه **394** في صندوق **369**، وكل رقاقة `.pz` محتواها
        **95** في **65** و`overflow:visible` — فالتسمية تُقصّ في منتصف الكلمة
        («أرشي…» · «معد…» · «يحتا… تفو…»). ورأيتُها في اللقطة قبل أن أجدها
        بالقياس — **فالرقم وحده لا يكفي**. */
  /* 🪤 **وهذا تصويبُ تصويبي أنا** — أمسكه المدقّق الثالث:
     جعلتُ `.pulse` شريطاً أفقياً يُسحب لأصلح قصَّ تسمياته في `/conn`،
     **والصنف مشترك مع `/activation`** — فصارت هناك الرقاقة النشِطة
     «37 الكل» **خارج الشاشة كلياً** (يسارها −132) عند فتح الصفحة، وحالةُ
     الفلتر أهمُّ ما يقول للموظف ما ينظر إليه. **فبُدّل عطبٌ بعطب.**
     ✅ **واللفُّ يحفظ الحالتين:** كلُّ رقاقةٍ ظاهرة (لا نشِطة تختفي)،
     وكلُّ تسميةٍ كاملة (`min-width:max-content` لا عرضٌ ثابت 65px).
     **والرؤية أولى من الأناقة** — والسطر الثاني ثمنٌ زهيد. */
  .pulse {
    display: flex; flex-wrap: wrap; gap: 8px;
    overflow: visible;
  }
  .pulse > .pz {
    flex: 0 1 auto; width: auto; min-width: max-content; overflow: visible;
  }
  /* والتسمية تُقرأ كاملةً — لا تُقصّ ولا تُلفّ سطرين في رقاقة */
  .pulse > .pz > * { white-space: nowrap; }

  /* ② زرّ «⋯» الذي يزرعه محرّك التسميات كان **24×24** — والمحرّك الذي أنشئ
     لإصلاح قاعدة 24 لا يجوز أن يخالفها. والتوسعة بمنطقة إصابة لا بتكبير
     الصندوق، فلا يُزاح النصّ الذي يجاوره. */
  /* 🪤 وطريقُ العنصر الزائف **فشل مقيساً**: اختبارُ إصابةٍ حقيقيّ
     (`elementFromPoint` على زوايا مربّع 44) أعطى **زاويةً واحدة من أربع**،
     لأن الحاضن يقصّ ما خرج عنه فلا ينفع `z-index`. والصندوق الحقيقيّ لا
     يُقصّ ولا يحتاج سياق تكديس: **الزرّ نفسه 44×44** وهامشٌ سالب يردّ أثره
     في التخطيط، فيبقى شكلُه 24 ومساحةُ لمسه 44. */
  button.mt-more {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    margin: -10px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle;
  }

  /* ③ «رحلة التذكرة» في بطاقة العميل: `summary` بارتفاع **19px** —
     وهو مفتاح الطيّ، أي أنّ ما لا يُلمس لا يُفتح. */
  .sec summary, details > summary {
    min-height: 44px; display: flex; align-items: center;
    padding-block: 10px; cursor: pointer;
  }

  /* ④ مربّع اختيار ساحة التفعيل **20×20**، وزرّ إظهار كلمة المرور **33×29** */
  input[type="checkbox"], input[type="radio"] { position: relative; }
  input[type="checkbox"]::after, input[type="radio"]::after {
    content: ''; position: absolute; inset: -12px;
  }
  button.peek { min-width: 44px; min-height: 44px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ⑬ ما رفعه المدقّق البصريّ المستقلّ — وأعدتُ قياسه قبل أن أصلحه
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* ① فقاعة «نُسخ» كانت **46.6٪ خارج الشاشة** (مقيسة عند x = −172 بعرض 369).
     🪤 والعلّة تركيبٌ بين ملفّين: `basin.css` يوسّطها بـ`left:50%` مع
        `transform:translateX(-50%)`، وطبقةُ الجوال بدّلت الموضع بـ`inset-inline:12px`
        **ولم تُبطل التحويل** — فبقيت الإزاحة السالبة تعمل على عنصرٍ لم يعد موسَّطاً.
        ولا يُنتج ذلك فائضاً (`position:fixed` لا يوسّع المستند) **فمرّ من كل رقم**،
        ووقع على أكثر فعلٍ يكرّره الموظف في يومه: النسخ. */
  .toast { transform: translateY(20px) !important; }
  .toast.on { transform: translateY(0) !important; }

  /* ② علامة `+` ترتدّ إلى طرف الرقم الخطأ («966551234789+»).
     🔬 وشاهد الضبط **من المنتج نفسه**: في `/review` يُرسم `+966114778812`
        صحيحاً لأن `td.pay` تحمل `direction:ltr;unicode-bidi:plaintext`.
        فالحوض يعرف العلاج ويطبّقه في موضعٍ ويغفله في آخر — وهذا تعميمُه. */
  td.mono, .mono, .bdg.rep, [data-lbl] .mono {
    direction: ltr; unicode-bidi: plaintext; text-align: start;
  }
  /* والشارات «+2» و«+3» تُرسم «2+» و«3+» للسبب نفسه */
  .bdg, .badge, .chip-n { unicode-bidi: plaintext; }

  /* ③ ورقة «المزيد»: نصٌّ `#1A1A1A` على خلفيّة `#0A0A0A` — **تباين 1.14:1**.
     ⛔ وهذا **نصّ شكوى المالك** التي بُنيت عليها قاعدة أدوات الموظفين:
        «الخلفية غامقة والبيانات غامقة، المظهر سيء». والتسمية المحقونة كانت
        تأخذ حبر الأوراق الفاتحة فتختفي على السطح الداكن — فتَرِث لونَ سطحها. */
  .sidebar .mt-lbl,
  .sidebar .mt-more,
  .nav-link .mt-lbl { color: #E7E9EE !important; }
  .sidebar .nav-group-title { color: #9A9A9A !important; }  /* كان #5C5C5C = 2.96:1 */

  /* ④ ظلُّ الشعار على صفحة الدخول بلون `#E01E37` — وهو من ألوان المصيدة
     التي تأمر قاعدة 14 باستبدالها «أينما وُجدت»، ومعه الوصية ١: «الشعار… لا ظلال». */
  .brand img, .side-logo img, .hdr-logo img { filter: none !important; }

  /* ⑤ شريط التبويبات السفليّ لا يُعرض قبل المصادقة — تبويباتٌ لا تقود إلى شيء */
  body:has(form[action*="login"]) .bsn-tabbar,
  body:has(#loginForm) .bsn-tabbar { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ⑭ حكم المدقّق الثالث — ومنه **انتكاسةٌ أعترف بها** لا عطبٌ موروث
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* ① 🔴 **الانتكاسة:** صفّ رقاقات ساحة التفعيل كان يُري حالاته الخمس على
     **سطرين وكلُّها ظاهرة**، فصيّرتُه شريطاً أفقياً بصفٍّ واحد — فصارت
     الرقاقة النشِطة «37 الكل» **خارج الشاشة كلياً** (يسارها −132)، ورقاقة
     «5 تم التفعيل» مشطورةً عند الحافة بلا ما يدلّ على أنها تُمرَّر.
     **وهذا بعينه ما يمرّ من كل رقم:** `scrollWidth == 393` سليم، وخمسة
     عناصر خارج الشاشة، **وحالةُ الفلتر — أهمّ ما يقول للموظف ما ينظر إليه —
     غير مرئيّة عند فتح الصفحة.** فالعودة إلى اللفّ: الرؤية أولى من الأناقة. */
  #q-chips, .qchips, .filters .chips, .frow:has(.chip.on) {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    row-gap: 8px;
  }

  /* ② النصّ النائب يُقصّ في منتصف الكلمة («… · اسم العميل · **ال**»).
     🪤 وسببُه من عملي: رفعتُ الحقل إلى 16px (وهو صواب — دونها يُكبّر iOS
        الصفحة عند التركيز)، **والنصّ النائب لم يُقصَّر معه** فصار 308.8px
        في 282px. وحاجزُ التكبير معلَّقٌ على مقاس **الحقل** لا على مقاس نصّه
        النائب — فيبقى الحقل 16px ويصغُر النائب وحده. */
  input::placeholder, textarea::placeholder {
    /* 12.5px = أرضيّة الجدول في §18 (والحدّ المطلق 10) — وعندها يدخل أطولُ
       نصٍّ نائب في الحوض (272px ← 262px في 267px متاحة على مكتب التذاكر). */
    font-size: 12.5px; opacity: .75;
  }
  input:focus::placeholder { opacity: .45; }

  /* ③ شارات الصلاحيات **50×24.8** ومتجاورةٌ رأسياً — واختبار الإصابة أعطى
     3 من 9 و0 من 9، أي أن الإصبع الواقع في مساحة الأمان يصيب الجارة. */
  .perms .chip, .roles .chip, [class*="perm"] .chip, .uchip {
    min-height: 44px; display: inline-flex; align-items: center;
    padding-inline: 12px; margin-block: 4px;   /* 8px أمانٍ بين المتجاورتين */
  }

  /* ④ التنقيط تحت النصّ العربي يصطدم بذيول الحروف (ع/ط/و/ن) فيُقرأ تلفاً
     لا دعوةً للنقر — تُزاح عنها بمسافةٍ تتخطّى الذيل. */
  .mt-h { text-underline-offset: 3px; text-decoration-thickness: 1px; }
}

@media (max-width: 767.98px) {
  /* 🪤 والقاعدة التي غلبت تصويبي: `body:has(#tblwrap) .dashboard-scroll > .pulse`
     جعلت صفَّ الحالات **لاصقاً بلا لفّ**. واللصوقُ صائب (الفلتر يبقى في اليد)،
     **والـ`nowrap` هو الذي أخرج النشِطة خارج الشاشة**. فيُبقى اللصوق ويُردّ اللفّ
     — بتخصيصٍ مساوٍ كي يغلب بترتيبه لا بمنازعةٍ في الوزن. */
  body:has(#tblwrap) .dashboard-scroll > .pulse {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
}