/* ═══ الطبقةُ ②: الأساس ══════════════════════════════════════════════════
   إعادةُ التهيئة والعناصرُ العارية: `*` · `html, body` · العناوين · `[hidden]` ·
   الروابط. ⚖️ **و`‎.num` هنا وهي صنف**: مقياسٌ نصّيٌّ عامٌّ بلا مكوّنٍ يملكه —
   تقرؤه الجداولُ والإحصاءاتُ وقاعدةُ الخطّ الكرديّة في الطبقة ①. **والشريطُ
   المتناوبُ في ذيل الملفّ صنفٌ ثانٍ بالحجّة نفسِها** — لا مكوّنَ جدولٍ يملكه. */



* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: "Cairo", "Inter", "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-page);
}

/* ═══ شريطُ تمرير الصفحة — رفيعٌ بلون مقبض شريط الجداول (قرارُ المالك «ب»، 2026-10-03، البند 21) ═══
   🔴 **السبب**: آخرُ موضعٍ بشريط المتصفّح العريض الافتراضيّ (‏15) — والجداولُ بجانبه على الخلفيّة نفسِها بشريطنا الرفيع، والنوافذُ والدرجُ بالرفيع.
   📐 **واللونُ لونُ مقبض شريط الجداول ساكناً** (‏`.tw-thumb` أدناه: `--border-hover`) **لا لونُ شريط النوافذ** (‏`--border-default`): عُرض على
      المالك الاثنان — ⚗️ محسوباً على لون الصفحة 1.36:1 نهاراً و1.99 ليلاً، والآخرُ 1.14 و1.53: يكاد لا يُرى حيث يقف هذا. فاختار ما يطابق
      جيرانَه على الخلفيّة نفسِها. ويحرس ألّا يفترقا `TableRailTests` نصّاً و`TableRailSmokeTests` مرسوماً.
   ⚗️ **والكلفةُ قِيست وقيلت له**: الشريطُ 15 ⇐ 10، فتتّسع كلُّ صفحةٍ تتمرّر 5 بكسلات — في «الرصيد المخزني» (‏1366×768) تحرّك 1135 عنصراً
      من 1222 أفقيّاً حتى 5، ولا شيءَ رأسيّاً. وصفحةٌ لا تتمرّر لا يتغيّر فيها شيء.
   🔴 **و`body` تعيد اللونَ إلى `auto`**: `scrollbar-color` **موروثة** (‏و`scrollbar-width` لا) — ⚗️ فبالقاعدة الأولى وحدَها لبس كلُّ متمرّرٍ تحت
      الصفحة لونَها (‏`body` وحاويةُ الجدول قُرئتا `rgb(203, 213, 225)`). وشريطُ الصفحة يُؤخذ من `html` نفسِها لا من `body`، فالردُّ لا يمسّه. */
html { scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; }
body { scrollbar-color: auto; }

h1 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 1rem; }
h2 { font-size: 16px; font-weight: 600; }
/* 🔴 **و`hidden` تعني مخفيّاً — مهما قالت الأصناف** (2026-08-10): ورقةُ المتصفّح تُعطي
   `[hidden] { display: none }` **بأضعف وزنٍ ممكن**، فأيُّ `display` يكتبه المؤلّف يغلبها.
   ⚗️ **وقع ذلك حرفيّاً**: تنبيهُ «انقضت مدّة رمزك» في شاشة التفعيل عليه `hidden`
      و`.alert { display: flex }` — **فيُقرأ ظاهراً واللحظةُ لحظةُ ميلاد الرمز**: قِيس
      `hidden=true` و`display: flex` و«مرئيٌّ» والعدّادُ يقول ٢٩:٣٢.
   💣 **وثمنُه أغلى من مظهر**: من يُقال له إنّ رمزَه انقضى **يُعيد التسجيل فيُبطل رمزَه
      الحيّ** — وهي الحلقةُ نفسُها التي بُنيت لأجلها `DeliveryPromiseMinutes` وترقيمُ الخطوات.
   🔑 **و`!important` هنا في محلّها**: `hidden` **ليست تنسيقاً بل حالة**، ولا حالةَ يُراد
      فيها إظهارُ ما وُسم مخفيّاً. وهو السطرُ نفسُه في كلّ إعادات التهيئة الحديثة. */
[hidden] { display: none !important; }

a { color: var(--status-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* الأرقام: Inter بأرقام جدولية تصطف عمودياً.
   🔴 **و`direction: ltr` هنا لا في الجدول** (2026-08-21): كانت مربوطةً بـ`.table .num`،
      **فالرمزُ داخلَ جدولٍ سليمٌ وخارجَه مقلوب**. ومحرفٌ محايدٌ (‏`-` `_` `.` `/`) في أوّل
      رمزٍ لاتينيٍّ داخل فقرةٍ عربيّةٍ **يقفز إلى الطرف الآخر**:
      ⚗️ قِيس بترتيب الحروف بصريّاً — `-EXV42 TONER` يُعرض `EXV42 TONER-`،
         و`_x0002_6950566142499` يُعرض `x0002_6950566142499_`.
      ⚠️ **والضررُ ليس جمالاً**: من ينسخ ما يقرأ ويبحث به يجد صفراً، والمادّةُ موجودة.
         و**٩٠ مادّةً من ١٤٬٣٧٧** رمزُها يبدأ بمحرفٍ محايد (‏`.` ٤٠ · `-` ٣٦ · `_` ٩ · `/` ٣ · `(` و`+`).
   ⚖️ **و`direction: ltr` لا `unicode-bidi: plaintext`** — والثاني كان ترجيحي حتّى قِيس:
      `.num` **يحمل عربيّةً فعلاً** («اربيل» «بغداد» «موصل» في المخازن، و«الرصيد» و«الهاتف»
      في الترويسات)، و`plaintext` **يُزيحها ٩ بكسلات** بينما `ltr` لا يمسّها.
   🔴 **و`direction` وحدَه لا يكفي — وهذا أوقعني** (2026-08-21): `direction` **لا يفتح فقرةً
      ثنائيّةَ الاتجاه على عنصرٍ سطريّ** ما لم يصحبه `unicode-bidi`. فنجح العلاجُ حيث يقع
      `.num` على خليّةِ جدولٍ أو عنصرِ فلكس (كلاهما كتلة)، **وبقي عاطلاً على اثني عشر
      `span` سطريّاً** — وهي أسوأُ الحالات: الرمزُ يلي اسمَ المادة العربيَّ في الخليّة نفسِها،
      فالمحايدُ محشورٌ بين قويٍّ يمينيٍّ وقويٍّ يساريٍّ فيأخذ اتّجاهَ الفقرة.
      ⚗️ **مقيسٌ في `span.cell-code.num` بعد إضافة `direction` وحدَه**: `-EXV42 TONER` ما زال
         يُعرض `EXV42 TONER-` · `TONER.` ← `.TONER` · `(SET)` ← `)SET(`.
   ⚖️ **و`isolate` لا `embed`**: كلاهما يُصلح الثلاثةَ مقيساً، و`isolate` يعزل الصندوقَ عن
      جارِه فلا يلتقط محايدَه — وهو ما تفعله `<bdi>`، وهي أصلاً القيمةُ الضمنيّةُ لخليّة
      الجدول فلا تغيّر شيئاً هناك. */
.num { font-family: "Inter", "Cairo", sans-serif; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }


/* ═══ الشريطُ المتناوب (Zebra) ═══════════════════════════════════════════════
   ⚖️ **وهو هنا للسبب الذي جاءت لأجله `‎.num` أعلاه**: تظليلُ صفٍّ لا مكوّنَ يملكه —
   لا `Table.razor` في المستودع، والجداولُ السبعةُ والأربعون مكتوبةٌ في الشاشات.
   ↺ **وهو عودةٌ لا ابتكار**: الإيداعُ الأوّل كان يُلوّن (`--zebra: #f4f8f4`)، ونقلُ
   الهويّة `3597fb0` نزعه وكتب في app.css:259 «(بلا Zebra)». فطلبُ المالك نقضٌ
   لذلك القرار، وعنوانُ app.css صار كاذباً — فصُحِّح هناك.

   🔑 **والقاعدةُ تُلوّن `tr` لا `td` — وهذا هو الحارسُ كلُّه، لا زخرفةَ في الاختيار.**
      كلُّ تظليلِ حالةٍ في المستودع مكتوبٌ على الخليّة: `tr:hover td` ‏(app.css:288) ·
      `tr.row-muted td` ‏(:2083) · `.row-checked td` ‏(:2120) · `.au-row-sel td` ‏(:3559) ·
      `.stk-counted td` ‏(:3658). وخلفيّةُ الخليّة تُرسم **فوق** خلفيّةِ صفّها **بترتيب
      الرسم لا بالنوعيّة** — فالشريطُ يخسر لكلِّ حالةٍ بلا `!important` ولا تسلسلٍ هشّ.
      💣 والطفرةُ الطبيعيّةُ هي نقلُه إلى `td`: تصير (0,2,3) فتغلب الحالاتِ الثلاثَ
         الأدنى فيموت تمييزُ المحدَّد والموقوف والمجرود. يحرسه `RowStripeTests`.

   ⚠️ **و`‎:not(…)` حمّالةٌ لا احتياط**: ثلاثةٌ من الأربعة تظليلاتُها **شفّافة**
      (`row-muted` ‏rgba، و`green-50` تصير rgba في الداكن) — فلولا الاستثناءُ لركّبت
      الحالةُ الواحدةُ فوق الشريط في الزوجيّ وفوق البطاقة في الفرديّ، **فتظهر بلونين**.
      والأربعةُ محصورةٌ من الترميز لا من الحدس: `<tr class=…>` في المستودع كلِّه.

   🔴 **و861px حدٌّ لا زينة**: دون 860px يصير كلُّ صفٍّ بطاقةً مستقلّة
      (`table.auto-cards tr` ‏app.css:593) — والشريطُ (0,2,2) يغلبها (0,1,2) فتخرج
      بطاقاتٌ بلونين. و`screen` تمنع تسرّبَه إلى الورق (قرارُ المالك: الورقُ كما هو).
   📐 **ولا تتّكل هذه القواعدُ على ترتيب التحميل**: لا نظيرَ لها بنوعيّةٍ مساوية —
      قِيس كلُّ فارقٍ بنقطةٍ فأكثر. فبقاؤها في المكتبة (تُحمَّل قبل app.css) سليم. */
@media screen and (min-width: 861px) {

    /* الشريط. (0,2,2) على الصفّ — و`‎:where` بوزن صفر كي يبقى خفيفاً ما أمكن. */
    :where(.table:not(.heat-grid)) tbody
    tr:nth-child(even):not(.row-muted, .row-checked, .au-row-sel, .stk-counted) {
        background: var(--zebra);
    }

    /* ⚠️ **والأعمدةُ المجمّدةُ تثقب الشريطَ ما لم يُعَد عليها صراحةً**: خلفيّتُها
       مُعتِمةٌ إلزاماً وإلّا انزلق تحتها ما يمرّ أفقياً — وهي العلّةُ التي كُتب لها
       `StickyCellTintTests` مرّتين (الترويسةُ ثمّ الصفُّ الموقوف).
       ↺ **وكان الحاملُ يُركّب `linear-gradient` فوق لون البطاقة** — النمطُ الذي
          يستعمله الصفُّ الموقوف (app.css:2620)، **ولزومُه من شفافيّة اللون**. ولمّا
          صار `--zebra` مصمتاً (رماديُّ الصفحة) بطل اللزوم: تركيبُ مصمتٍ فوق أيّ شيءٍ
          هو المصمتُ نفسُه. فالمساواةُ مع الخليّة العاديّة صارت **بديهيّةً لا محسوبة**.
       🔒 **ولا تُضِف `tbody` ولا `‎:not(…)` هنا**: كلٌّ منهما يرفع (0,2,2) إلى (0,2,3)
          أو (0,3,2) فتغلب `‎.table tbody tr:hover td` — فيموت المرورُ على الأعمدة
          الثلاثة الأولى في «دليل المواد» و«جهات الاتصال». النافذةُ نقطةٌ واحدةٌ بين
          `‎.table-wrap td.stick` ‏(0,2,1) الذي يجب أن يُغلَب و‏(0,2,3) الذي يجب ألّا يُغلَب. */
    :where(.table-wrap) tr:nth-child(even) td.stick {
        background: var(--zebra);
    }

    /* والعمودان المجمّدان في الجدول المحوريّ (app.css:658) — العلّةُ نفسُها.
       📐 **ويلزم (0,5,2)** لأنّ ما يُغلَب نوعيّتُه (0,3,1). ولا مرورَ يُفقَد بذلك:
          `‎.table.pivot td:first-child` تغلب المرورَ **اليوم قبل هذا التغيير** — قِيس.
          ولا صفَّ حالةٍ في جدولٍ محوريّ (قِيس: StockPage:143 وAuthBackdrop:63 بلا أصناف). */
    .table.pivot:not(.heat-grid) tr:nth-child(even) td:first-child,
    .table.pivot:not(.heat-grid) tr:nth-child(even) td:nth-child(2) {
        background: var(--zebra);
    }
}


/* ═══ شريطُ تمرير الجداول — خارج البطاقة (قرارُ المالك «أ»، 2026-10-03) ═══════════════════════
   يرسمه `table-rail.js` (‏هنا في المكتبة) — والتعليلُ والقياسُ في رأسه. ⚖️ **وهو هنا لسبب الشريط المتناوب أعلاه**:
   لا مكوّنَ جدولٍ يملكه، والجداولُ مكتوبةٌ في الشاشات — فترثه المشاريعُ القادمةُ مع المكتبة.
   📐 **وشريطُ المتصفّح لا يُخفى إلّا لجدولٍ لبس شريطَنا** (‏`data-tw-railed` يكتبها السكربت) — فإن لم يعمل بقي ما كان.
   📐 **والمقبضُ بلون حدود التطبيق ويغمق عند المرور والسحب، والمجرى يكاد لا يُرى** — محسوبةً على لون الصفحة:
      ⚗️ نهاراً المقبضُ `--border-hover` ‏1.36:1 ثمّ `--text-placeholder` ‏2.35:1، والمجرى `--border-default` ‏1.14:1؛
      وليلاً 1.99 ثمّ 3.78، والمجرى 1.53. ↺ **وكان المجرى `--border-subtle` فخرج 1.00:1 نهاراً** — لا يُرى أصلاً، لا «يكاد».
   ↺ **والرأسيُّ دُفن 2026-10-06** (‏البند 42، قرارُ المالك «أ»): منذ البند 8 كلُّ جدولِ صفحةٍ يمتدّ بطوله والصفحةُ وحدَها تتمرّر — فلم يبقَ
      له جدولٌ يلبسه. حُذفت قواعدُه الثلاث من هنا وشيفرتُه من السكربت، والباقي الأفقيّ. ويحرس الدفنَ `TableRailTests`.
   ⚠️ **ولا يُطبع**: شريطٌ على الورق لا يتحرّك. */
/* ‏الطبقةُ آخرَ المستند وأصلُها أصلُه — فإحداثيّاتُ الأشرطة إحداثيّاتُ المستند، ولا تجاور ابناً من أبناء الشاشة */
.tw-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.table-wrap[data-tw-railed] { scrollbar-width: none; }
.table-wrap[data-tw-railed]::-webkit-scrollbar { display: none; }

.tw-rail { position: absolute; z-index: 5; display: none; touch-action: none; user-select: none; }
.tw-rail.is-on { display: block; }
.tw-track, .tw-thumb { position: absolute; border-radius: 999px; transition: width .12s ease, height .12s ease, background-color .12s ease; }
.tw-track { background: var(--border-default); }
.tw-thumb { background: var(--border-hover); }
.tw-rail:hover .tw-thumb, .tw-rail.is-drag .tw-thumb { background: var(--text-placeholder); }

/* ‏الأفقيُّ: الخطُّ في أعلى منطقته — أقربُ ما يكون إلى الجدول فوقه — ويغلظ نازلاً */
.tw-rail--h .tw-track { top: 0; inset-inline: 0; height: 4px; }
.tw-rail--h .tw-thumb { top: 0; inset-inline-start: 0; height: 4px; }
.tw-rail--h:hover :is(.tw-track, .tw-thumb), .tw-rail--h.is-drag :is(.tw-track, .tw-thumb) { height: 8px; }

@media print { .tw-rail { display: none !important; } }

/* ═══ والجدولُ في سطحٍ عائم — شريطُ المتصفّح رفيعاً داخله (قرارُ المالك «ب»، 2026-10-03) ═══════════
   📐 **نافذةٌ أو درج: لا حافّةَ شاشةٍ يقف عندها شريطُنا** — فيبقى التمريرُ وشريطُه للمتصفّح، رفيعاً بلون شريط جدول الأسطر.
      والسكربتُ يسمّي الجدولَ (‏`data-tw-inner`) حين يجد له أباً مثبَّتاً على الشاشة — **فإن لم يعمل بقي شريطُ المتصفّح كما هو**.
   ⚗️ قِيس في نافذة «أمر شراء» (‏1366×768): يأخذ من الجدول 10 بكسل لكلّ محور، والعريضُ يأخذ 15.
   ↺ **واللونُ لونُ شريط جدول الأسطر** (‏`.attr-grid-scroll` في `app.css`: `--border-default`) — **قرارُ المالك 2026-10-03: «ليكن أفتح ليطابق»**.
      وكان `--border-hover` اجتهاداً خالف ما وُصف له. ⚠️ والكلفةُ معلَنة: محسوباً على سطح النافذة 1.24:1 نهاراً و1.41 ليلاً،
      وكان 1.48 و1.83. ويحرس ألّا يفترق الشريطان `TableRailTests` نصّاً و`TableRailSmokeTests` مرسوماً — **فمن غيّر أحدَهما غيّر الآخر**.
   ⛔ **وبلا `::-webkit-scrollbar`**: كروم يُهملها متى ضُبطت `scrollbar-width`، وسفاري القديمُ يبقى بشريطه — ولا سفاري هنا يُقاس عليه. */
.table-wrap[data-tw-inner] { scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; }

/* ═══ وجدولُ الصفحة يمتدّ بطوله — والصفحةُ وحدَها تتمرّر (قرارُ المالك «ب»، 2026-10-06، البند 8) ═══════════════════════
   🔴 **كان في الشاشة تمريران**: نافذةُ الجدول المسقوفةُ (‏`app.css`) تتمرّر، وشريطُ الصفحات تحتها خارج الشاشة فتتمرّر الصفحةُ
      أيضاً — والقياسُ في رأس `table-rail.js`. ✅ والسكربتُ يسمّي كلَّ جدولِ صفحةٍ (‏`data-tw-flow`)، وهنا يُرفع عنه السقف.
   📐 **والقيمةُ `fit` لمن يتّسع في بطاقته**: لا يحتاج تمريراً أفقيّاً، فيكفّ غلافُه عن أن يكون حاويةَ تمرير — وتلتصق ترويستُه
      بإطار العرض. **`clip` لا `visible`**: الاثنتان تُطلقان الالتصاق، و`clip` وحدَها تُبقي القصَّ بقوس البطاقة
      (‏`.card.table-wrap` · `.hm-heatcard > .table-wrap`).
   📐 **والأعرضُ (‏`wide`) يُرفع عنه السقفُ وحدَه**: `overflow-x: auto` باقيةٌ له — تمريرُه الأفقيُّ وأعمدتُه المجمَّدة — فلا تلتصق
      ترويستُه (‏الحاويةُ تأخذ الالتصاق). **فقاعدةُ السمة بلا قيمةٍ لا تكتب `overflow`**: لو كتبته لقُصّ ما زاد عن البطاقة ولم يُبلَغ.
   📐 **و`top` ارتفاعُ الشريط العلويّ لا صفر**: الشريطُ ملتصقٌ فوق المحتوى (‏`z-index: 30`) — عند الصفر تختفي الترويسةُ تحته.
      والرقمُ من الرمز، وهو عُرفُ `.print-table thead th` في `app.css`.
   📐 **و`screen`**: الورقةُ لا تتمرّر — فلا يمسّ الامتدادُ طباعةً.
   📐 **والنوعيّةُ (0,2,0) تغلب `.table-wrap` أينما كُتبت، ويغلبها ترتيبُ الورود** في `.table-wrap.menu-open` و`.pop-open`
      (‏`app.css`: النوعيّةُ نفسُها والملفُّ بعد هذا) — فقائمةُ الصفّ تُفلت من القصّ كما كانت.
   🔗 **والحدُّ 861 حدُّ البيت**: دونه الجداولُ بطاقاتٌ بلا ترويسةٍ ولا سقف.
   ويحرسه `StickyTableHeadTests` و`TableRailTests` نصّاً، و`TableFlowSmokeTests` مرسوماً. */
@media screen and (min-width: 861px) {
    .table-wrap[data-tw-flow] { max-height: none; }
    .table-wrap[data-tw-flow="fit"] { overflow: clip; }
    .table-wrap[data-tw-flow="fit"] .table th { top: var(--topbar-h); }
}

/* ═══ مفرداتُ حركة الأيقونات (‏البند 79، حرفُ المالك «ب» 2026-10-25) ═══
   📐 حركاتٌ قصيرةٌ تعود إلى موضعها — لا لونَ فيها ولا مقاس — يختار المضيفُ لكلّ أيقونةٍ ما يقول معناها (‏`app.css`: سجلُّ الحركة).
   📐 **وبالخصائص المستقلّة** (‏`rotate` · `translate` · `scale`) لا بـ`transform`: تتركّب مع تحويلٍ قائمٍ ولا تمحوه.
   ⚠️ والمستدعي يضعها تحت `prefers-reduced-motion: no-preference` — فهنا الحركةُ وحدَها لا متى تجري. */
@keyframes mw-ring { 0%, 100% { rotate: 0deg; } 20% { rotate: 16deg; } 40% { rotate: -13deg; } 60% { rotate: 8deg; } 80% { rotate: -4deg; } }
@keyframes mw-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes mw-turn { from { rotate: 0deg; } to { rotate: 90deg; } }
@keyframes mw-tilt { 0%, 100% { rotate: 0deg; } 45% { rotate: -25deg; } }
@keyframes mw-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -10deg; } 75% { rotate: 10deg; } }
@keyframes mw-hop { 0%, 100% { translate: 0 0; } 40% { translate: 0 -3px; } 70% { translate: 0 1px; } }
@keyframes mw-lift { 0%, 100% { translate: 0 0; } 45% { translate: 0 -3px; } }
@keyframes mw-dip { 0%, 100% { translate: 0 0; } 45% { translate: 0 3px; } }
@keyframes mw-drive { 0%, 100% { translate: 0 0; } 35% { translate: 3px 0; } 65% { translate: -1px 0; } }
@keyframes mw-shake { 0%, 100% { translate: 0 0; } 20%, 60% { translate: -1.5px 0; } 40%, 80% { translate: 1.5px 0; } }
@keyframes mw-apart-end { 0%, 100% { translate: 0 0; } 45% { translate: 3px 0; } }
@keyframes mw-apart-start { 0%, 100% { translate: 0 0; } 45% { translate: -3px 0; } }
@keyframes mw-grow { 0%, 100% { scale: 1 1; } 45% { scale: 1 .55; } }