/* ════════════════════════════════════════════════════════════════════════════
   هوية زمزم تكنولوجي — ZMZM Technology Design System
   ════════════════════════════════════════════════════════════════════════════
   يُحمَّل بعد Tabler وقبل كتلة <style> الداخلية في _Layout.cshtml.

   ⚠ للتراجع الكامل: احذف/علّق سطر <link> الخاص بهذا الملف في _Layout.cshtml
     → يعود المظهر السابق حرفياً. هذا الملف لا يعدّل أي ملف عرض آخر.
     نقطة git للعودة: الوسم design-pre-zmzm-identity (commit 637ef44).

   المبادئ:
   ① هيكل محايد مشترك + أزرق مؤسّسي واحد لمنطقة المحتوى.
   ② لمسة المنتج (الذهبي في ZG) محصورة في: الشريط الجانبي + بيانات الذهب.
      ← الشريط الجانبي لم يُمسّ إطلاقاً (قرار المالك: خلفيته الداكنة ونشِطه
        الذهبي أفضل بصرياً؛ الأبيض مُتعِب والأزرق أقلّ وضوحاً على الكحليّ).
   ③ ألوان الدلالة (أخضر/أحمر/أصفر/أزرق) معلومات لا هوية — لا تُمسّ أبداً.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── الأزرق المؤسّسي (بديل أزرق Tabler الافتراضي #206bc4) ───────────────── */
    --zmzm-blue:      #0F6CBD;
    --zmzm-blue-700:  #0B5296;
    --zmzm-blue-050:  #EAF2FB;

    /* ── الهيكل المحايد ─────────────────────────────────────────────────────── */
    --zmzm-page:      #F6F7F9;   /* ليست بيضاء ناصعة — أقلّ إجهاداً */
    --zmzm-surface:   #FFFFFF;
    --zmzm-line:      #E5E7EB;
    --zmzm-ink:       #111827;
    --zmzm-ink-muted: #6B7280;

    /* ── لمسة المنتج: الذهبي (بيانات الذهب + الشريط الجانبي) ──────────────────
         ✅ قرار المالك 2026-08-04 بعد معاينة ثلاثة بدائل على لوحة بيع حقيقية:
            اعتُمد «الذهب البرّاق» #C9A227 — وهو الدرجة التي كان البرنامج يستعملها
            فعلاً في 33 موضعاً، فصار المكتوب في الهوية مطابقاً للمعمول به.
            (كان #B8860B — أرشيف: الوسم design-pre-zmzm-identity.) */
    --zmzm-gold:      var(--zm-gold);

    /* ── ألوان الرسوم البيانية — لوحة مُحقَّقة لعمى الألوان (وضع فاتح) ────────
         تُسنَد بالترتيب دائماً، ولا تُدار دورياً. اللون يتبع الكِيان لا ترتيبه. */
    --viz-1: #2a78d6;  --viz-2: #eb6834;  --viz-3: #1baf7a;  --viz-4: #eda100;
    --viz-5: #e87ba4;  --viz-6: #008300;  --viz-7: #4a3aa7;  --viz-8: #e34948;
    --viz-grid:     #e1e0d9;
    --viz-axis:     #c3c2b7;
    /* حالة (محجوزة — لا تُستعمل كلون سلسلة أبداً، وتُرافَق بأيقونة ونصّ) */
    --viz-good: #0ca30c; --viz-warn: #fab219; --viz-serious: #ec835a; --viz-critical: #d03b3b;

    /* ── ربط الأزرق المؤسّسي بمتغيّرات Tabler (منطقة المحتوى فقط) ───────────── */
    --tblr-primary:     var(--zmzm-blue);
    --tblr-primary-rgb: 15, 108, 189;
    --tblr-link-color:  var(--zmzm-blue);
    --tblr-link-hover-color: var(--zmzm-blue-700);
}

/* ── الوضع الليلي: درجات أفتح تُقرأ على السطح الداكن ────────────────────────── */
[data-bs-theme="dark"] {
    --zmzm-blue:     #4A9EEA;
    --zmzm-blue-700: #7DBBF2;
    --zmzm-blue-050: #132638;
    --zmzm-gold:     var(--zm-gold);   /* قيمته الليلية تُضبط في §٧ بعد تعريف الرمز */
    --tblr-primary:     var(--zmzm-blue);
    --tblr-primary-rgb: 74, 158, 234;
    --tblr-link-color:  var(--zmzm-blue);
    --tblr-link-hover-color: var(--zmzm-blue-700);
    --viz-1: #3987e5;  --viz-2: #d95926;  --viz-3: #199e70;  --viz-4: #c98500;
    --viz-5: #d55181;  --viz-6: #008300;  --viz-7: #9085e9;  --viz-8: #e66767;
    --viz-grid: #2c2c2a;
    --viz-axis: #383835;
}

/* ════════════════════════════════════════════════════════════════════════════
   ١ · منطقة المحتوى — سطح محايد
   ════════════════════════════════════════════════════════════════════════════ */
body { background-color: var(--zmzm-page); }
[data-bs-theme="dark"] body { background-color: #0F1216; }

/* ════════════════════════════════════════════════════════════════════════════
   ٢ · الشريط الجانبي — أيقونات محايدة، واللون للنشط وحده
   ────────────────────────────────────────────────────────────────────────────
   اليوم تُلوَّن أيقونات العناصر الفرعية بألوان مختلفة (بنفسجي/أخضر/أصفر/سماوي)
   عبر صفوف مثبّتة في العرض = ضجيج بصري. هذه القاعدة المركزية تُحيّدها دون لمس
   أيٍّ من 259 ملف عرض. الخلفية والنشِط الذهبي كما هما — لم يتغيّرا.
   ════════════════════════════════════════════════════════════════════════════ */
.navbar-vertical .collapse .navbar-nav .nav-link i,
.navbar-vertical .collapse .navbar-nav .nav-link .nav-link-icon i {
    color: rgba(255, 255, 255, .42) !important;
}
.navbar-vertical .collapse .navbar-nav .nav-link:hover i {
    color: rgba(255, 255, 255, .72) !important;
}
/* النشط يستعيد اللمسة الذهبية (نفس درجة الشريط الحالية — بلا تغيير) */
.navbar-vertical .collapse .navbar-nav .nav-link.active i,
.navbar-vertical .collapse .navbar-nav .nav-link.active .nav-link-icon i {
    color: #f0c85e !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ٣ · بيانات الذهب — اللمسة الذهبية محصورة هنا داخل المحتوى
   ════════════════════════════════════════════════════════════════════════════ */
.zmzm-gold-data { color: var(--zmzm-gold); font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════════════════════
   ٤ · انضباط طباعيّ للأرقام — الخانات تتراصف عمودياً
   ════════════════════════════════════════════════════════════════════════════ */
.table .text-end,
.table .font-monospace,
.zmzm-num { font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════════════════════
   ٥ · القوائم المالية — التسلسل بالخطوط لا بالألوان (عرف محاسبيّ عالميّ)
        يُقرأ حتى بالطباعة الأحادية.
   ════════════════════════════════════════════════════════════════════════════ */
.fin-section  { font-weight: 700; border-bottom: 2px solid var(--zmzm-ink); padding-bottom: 4px; }
.fin-subtotal { font-weight: 600; border-top: 1px solid var(--zmzm-line); }
.fin-net      { font-weight: 800; border-top: 2px solid var(--zmzm-ink); border-bottom: 3px double var(--zmzm-ink); }
[data-bs-theme="dark"] .fin-section,
[data-bs-theme="dark"] .fin-net { border-color: var(--tblr-body-color); }

/* ════════════════════════════════════════════════════════════════════════════
   ٦ · المستندات المطبوعة — تبقى أبيض/أسود اقتصادية في الحبر.
        هوية الشركة العميلة تأتي من PrintSettings (AccentColor/الشعار) ولا تُمسّ.
   ════════════════════════════════════════════════════════════════════════════ */
@media print {
    .doc-stamp { font-size: .68rem; color: #7a7f87; letter-spacing: .01em; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ٧ · المرحلة أ — طبقة الرموز والأصناف الدلالية (2026-08-03)
   ────────────────────────────────────────────────────────────────────────────
   ⚠ هذه الكتلة **إضافية بالكامل ولا تُغيّر أي بكسل اليوم**: كل صنف فيها غير
     مستعمل في أي عرض بعد. الغرض أن تصير الشاشات في المرحلة (ب) تقرأ من هنا
     بدل الكتابة اليدوية، فتصبح أي لمسة تصميم لاحقاً **رافعةً بملف واحد**.

   قياس التشتّت الفعليّ (264 ملف عرض، 2026-08-03):
     text-*  1752 · style= مضمّن 1494 · bg-*-lt 532 · badge bg-* 508
     · hex مباشر 449 · btn-outline-* 439 · btn-* 313   ⇒ ≈ 5,477 موضعاً.
   التفاصيل وخريطة الترحيل: _ops/design-system/PHASE-A-INVENTORY.md
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── سُلّم الخطوط (مستخرج من الأكثر تكراراً في العروض فعلاً) ──────────────── */
    /* ✅ الدمج غير المرئي (قرار المالك 2026-08-04): صفّا الخريطة الأوّلان من سُلّم الخطوط.
         .62 · .65 · .66 · .68  ⇒  .68      |      .70 · .72 · .74 · .75  ⇒  .72
       أقصى فرق ≤ 1 بكسل — لا تراه العين. الصفوف الثلاثة الباقية (تُغيّر المظهر فعلاً) مؤجَّلة بقرارك. */
    --zm-fs-micro: .68rem;   /* أختام المستندات · تفاصيل دقيقة */
    --zm-fs-hint:  .72rem;   /* التلميحات والملاحظات — درجةٌ واحدة بعد الدمج (كانت .70) */
    --zm-fs-note:  var(--zm-fs-hint);   /* مرادف — أُبقي فلا تُمسّ الشاشات المُرحَّلة */
    --zm-fs-icon:  1.6rem;   /* أيقونة ترويسة الصفحة — 38 موضعاً */
    /* ✅ إجماليّ المستند الكبير — الرقم الذي يقرأه الكاشير بنظرة (قرار المالك 2026-08-04).
         القياس أبطل فرضية «صفّ الإجماليات» في الخريطة المنشورة: النطاق ≥1.8rem فيه **56 موضعاً،
         47 منها أيقونات** لا أرقاماً. الإجماليّان الحقيقيّان اثنان فقط:
           .pos-grand-total (نقطة البيع) 2.4rem   ·   .total-display (الشراء) 2.1rem
         فوُحِّدا **صعوداً على 2.4** لا نزولاً على 2.1: نقطة البيع تبقى كما هي (صفر انحدار حيث
         يهمّ أكثر)، والشراء يكبر قليلاً. للعكس: قيمة واحدة هنا. */
    --zm-fs-display: 2.4rem;

    /* ── لمسة الذهب: درجتان قائمتان فعلاً (تُوحَّدان في المرحلة ج بقرارك) ────── */
    /* ✅ درجة الذهب المعتمدة — مصدر وحيد للحقيقة (قرار المالك 2026-08-04) */
    --zm-gold:            #C9A227;
    --zm-gold-rgb:        201, 162, 39;
    /* الاسمان السابقان يبقيان مرادفَين — الشاشات المُرحَّلة تستعملهما ولا داعي للمسّها */
    --zm-gold-bright:     var(--zm-gold);
    --zm-gold-bright-rgb: var(--zm-gold-rgb);
    --zm-gold-deep:       #9A6B00;
}

/* ⚠ تتالٍ حَرِج: `:root` و`[data-bs-theme="dark"]` **بنفس درجة الأولوية** (0,1,0)، فيفوز
   **المتأخّر في الملف**. وبما أن كتلة الليلي (§ أعلاه) تسبق هذه الكتلة، كان الليلي سيأخذ
   ذهب الوضع الفاتح. لذلك يُعاد ضبط الذهب الليليّ **هنا بعد** تعريف الرمز — لا فوق. */
[data-bs-theme="dark"] {
    --zm-gold:     #D9A441;        /* أفتح ليُقرأ على السطح الداكن — والشارة تتبعه تلقائياً */
    --zm-gold-rgb: 217, 164, 65;

    /* ── محايدات مستعملة يدوياً في العروض (تُوثَّق لتُستبدل لا لتُكرَّس) ───────── */
    --zm-slate-400: #9AA3AD;
    --zm-slate-350: #94A3B8;
    --zm-slate-200: #E2E8F0;
}

/* ── ٧.١ · انضباط طباعيّ ─────────────────────────────────────────────────────
   يُغني عن  style="font-size:.7rem"  و style="font-variant-numeric:tabular-nums" */
.zm-hint  { font-size: var(--zm-fs-hint); }
.zm-note  { font-size: var(--zm-fs-note); }
.zm-micro { font-size: var(--zm-fs-micro); }
.zm-num   { font-variant-numeric: tabular-nums; }   /* 52 موضعاً مضمّناً */

/* ── ٧.٢ · ترويسة الصفحة — المربّع الأيقونيّ الموحّد ─────────────────────────
   يُغني عن  style="width:48px;height:48px;..."  (يبقى rounded-3 في الوسم كما هو) */
.zm-page-icon {
    width: 48px; height: 48px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.zm-page-icon i { font-size: var(--zm-fs-icon); }

/* ── ٧.٣ · عروض أعمدة الجداول — تُغني عن  style="width:NNpx" (≈ 250 موضعاً) ── */
.zm-w-50  { width: 50px; }   .zm-w-60  { width: 60px; }   .zm-w-70  { width: 70px; }
.zm-w-80  { width: 80px; }   .zm-w-90  { width: 90px; }   .zm-w-100 { width: 100px; }
.zm-w-110 { width: 110px; }  .zm-w-120 { width: 120px; }  .zm-w-130 { width: 130px; }
.zm-w-140 { width: 140px; }  .zm-w-150 { width: 150px; }  .zm-w-210 { width: 210px; }

/* ── ٧.٤ · شارات حالة المستند — دلالة واحدة لكل حالة عبر البرنامج كلّه ───────
   اليوم تُكتب يدوياً بصيغ متفاوتة (508 شارة). تُستعمل **مع** صنف `badge` القائم:
       class="badge bg-yellow-lt text-yellow"  ⇒  class="badge zm-badge-draft"
   القواعد أدناه **نسخة حرفية** من قاعدة Tabler المقروءة من ملفه (تحقّق 2026-08-03):
       .bg-{c}-lt{color:rgba(var(--tblr-{c}-rgb),…);background-color:rgba(var(--tblr-{c}-lt-rgb),…)}
   ⚠ الخلفية تأتي من متغيّر **‑lt‑rgb** المستقلّ لا من شفافية 10% للّون (خطأ افترضتُه
     أولاً وصحّحته بقراءة المصدر). المرجعية بالمتغيّر ⇒ الوضع الليلي يتبع تلقائياً. */
.zm-badge-draft     { --tblr-bg-opacity: 1; --tblr-text-opacity: 1; color: rgba(var(--tblr-yellow-rgb),    var(--tblr-text-opacity)) !important; background-color: rgba(var(--tblr-yellow-lt-rgb),    var(--tblr-bg-opacity)) !important; }
.zm-badge-posted    { --tblr-bg-opacity: 1; --tblr-text-opacity: 1; color: rgba(var(--tblr-green-rgb),     var(--tblr-text-opacity)) !important; background-color: rgba(var(--tblr-green-lt-rgb),     var(--tblr-bg-opacity)) !important; }
.zm-badge-reversed  { --tblr-bg-opacity: 1; --tblr-text-opacity: 1; color: rgba(var(--tblr-orange-rgb),    var(--tblr-text-opacity)) !important; background-color: rgba(var(--tblr-orange-lt-rgb),    var(--tblr-bg-opacity)) !important; }
.zm-badge-cancelled { --tblr-bg-opacity: 1; --tblr-text-opacity: 1; color: rgba(var(--tblr-secondary-rgb), var(--tblr-text-opacity)) !important; background-color: rgba(var(--tblr-secondary-lt-rgb), var(--tblr-bg-opacity)) !important; }
.zm-badge-system    { --tblr-bg-opacity: 1; --tblr-text-opacity: 1; color: rgba(var(--tblr-purple-rgb),    var(--tblr-text-opacity)) !important; background-color: rgba(var(--tblr-purple-lt-rgb),    var(--tblr-bg-opacity)) !important; }
.zm-badge-derived   { --tblr-bg-opacity: 1; --tblr-text-opacity: 1; color: rgba(var(--tblr-azure-rgb),     var(--tblr-text-opacity)) !important; background-color: rgba(var(--tblr-azure-lt-rgb),     var(--tblr-bg-opacity)) !important; }
/* شارة **بيانات ذهب** (عيار/سعر) — ليست حالة مستند.
   ✅ قرار المالك 2026-08-04: شكل موحّد **ذهبيّ شفّاف** بدل الأصفر.
      كانت نقطة البيع صفراء (Tabler) وشاشة الشراء ذهبية شفّافة = مظهران لمفهوم واحد؛
      والأخطر أن **الأصفر في بقيّة البرنامج يعني «تنبيه»** فكان يخلط دلالتين.
      الآن الأصفر محرَّر لمعناه التحذيري، والذهب يحمل لونه الحقيقي. */
.zm-badge-gold      { color: var(--zm-gold) !important; background-color: rgba(var(--zm-gold-rgb), .12) !important; }
/* صنف **تسعير ثابت** (قطعة بسعر مقطوع لا بالوزن) — دلالة نطاق قائمة في PricingType. */
.zm-badge-fixed     { --tblr-bg-opacity: 1; --tblr-text-opacity: 1; color: rgba(var(--tblr-purple-rgb),    var(--tblr-text-opacity)) !important; background-color: rgba(var(--tblr-purple-lt-rgb),    var(--tblr-bg-opacity)) !important; }

/* ── ٧.٥ · بيانات الذهب داخل المحتوى (اسم مختصر للقائم في §3) ───────────────── */
.zm-gold-data { color: var(--zm-gold); font-variant-numeric: tabular-nums; }

/* ── ٧.٦ · مؤشّرات اللوحات — **مؤجّلة عمداً إلى المرحلة ج** ───────────────────
   عرّفتُ هنا أوّلاً `.zm-kpi-value/.zm-kpi-label` بمقاسات افترضتُها. الفحص الفعليّ
   للوحة المالية أسقط الافتراض: القيمة الكبرى `1.35rem/line-height:1.1` (لا 1.2)،
   وبلا tabular-nums، وبطاقات الذهب `1.2rem`، والعنوان `text-muted small` لا مقاساً.
   والأهم: **الشاشة الواحدة فيها 13 مقاس خط** (.62 .66 .68 .70 .72 .78 .95 1.05
   1.2 1.35 1.5 1.7 2.4rem) — أي أن السُّلّم ليس سُلّماً. توحيدها **قرار تصميم**
   (تغيير بصريّ) يخصّ المرحلة ج، فحُذف الصنفان بدل تكريس مقاس مخترَع.
   🛡 لا تُعرّف صنفاً قبل قياس ما يستعمله الواقع — الصنف المُخترَع يوهم بالتوحيد. */

/* ── ٧.٧ · شريط أدوات الشاشة — لا يُطبع أبداً ──────────────────────────────── */
.zm-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
@media print { .zm-toolbar { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   طبقة التباين (WCAG AA) — أُضيفت 2026-08-09 بطلب المالك بعد قياس آليّ
   ---------------------------------------------------------------------------
   المشكلة المقيسة: ألوان تابلر الدلالية معرَّفة **مرّة واحدة للوضعين**، فالفاتح
   الساطع (أخضر 2.05:1 · برتقالي 2.27:1 · أحمر 3.36:1 على الأبيض) يسقط في الوضع
   الفاتح، والغامق (أزرق أساسي 2.12:1 · خافت) يسقط في الداكن. والقاعدة المطلوبة:
   نصٌّ غامق ⇒ خلفية فاتحة، ونصٌّ فاتح ⇒ خلفية غامقة.
   الحلّ: حبرٌ لكل لون **لكل سطح**، محسوب رياضياً بنفس درجة اللون (Hue/Saturation
   محفوظان، الإضاءة وحدها تتحرّك) حتى تبلغ 4.6:1 — فالهوية لا تتغيّر والقراءة تُصان.
   التراجع: احذف هذه الكتلة كاملةً (لا شيء خارجها يعتمد عليها).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
#285c87  --zm-ink-info: #285c87;  --zm-ink-muted: #4f5964;
}
[data-bs-theme="dark"] {
#60a9e6  --zm-ink-info: #60a9e6;  --zm-ink-muted: #9ca4ae;
}

/* الحبر — **الجولة الثانية 2026-08-09**: أُعيد ضبطه ليجتاز 4.6:1 على **كل سطح واقعيّ**
   لا على الأبيض وحده: البطاقة + تدرّجات الصفوف الملوّنة التسعة (#f7d7d7 · #e9c8d8 ·
   #d5d3e5 · #dfd3cd · #eed1cf · #cbdddb · #fff3cd · #e9ecef) في الفاتح، وثمانية أسطح
   داكنة في الليلي. السبب: نصٌّ مضبوط على الأبيض يفقد ~1.2 نقطة فوق تدرّج ملوّن —
   وهناك كانت كل الحالات المتبقّية (3.16–3.5). درجة اللون محفوظة (التعتيم بضرب القنوات). */
:root {
  --zm-ink-blue: #0054a6;
  --zm-ink-azure: #285c87;
  --zm-ink-indigo: #344eba;
  --zm-ink-purple: #88309d;
  --zm-ink-pink: #a32752;
  --zm-ink-red: #a32b2b;
  --zm-ink-orange: #943e04;
  --zm-ink-yellow: #7a5000;
  --zm-ink-lime: #3d620c;
  --zm-ink-green: #1b6627;
  --zm-ink-teal: #076549;
  --zm-ink-cyan: #0e616e;
  --zm-ink-primary: #0054a6;
  --zm-ink-secondary: #4f5964;
  --zm-ink-success: #1b6627;
  --zm-ink-warning: #943e04;
  --zm-ink-danger: #a32b2b;
  --zm-ink-info: #285c87;
  --zm-ink-muted: #4f5964;
  --zm-ink-gold: #6b5615;
}
[data-bs-theme="dark"] {
  --zm-ink-blue: #7da8d2;
  --zm-ink-azure: #60a9e6;
  --zm-ink-indigo: #8ca0f3;
  --zm-ink-purple: #ce8bdf;
  --zm-ink-pink: #e787a8;
  --zm-ink-red: #e78a8a;
  --zm-ink-orange: #f98436;
  --zm-ink-yellow: #f59f00;
  --zm-ink-lime: #74b816;
  --zm-ink-green: #42ba55;
  --zm-ink-teal: #3ab792;
  --zm-ink-cyan: #3eb2c4;
  --zm-ink-primary: #7da8d2;
  --zm-ink-secondary: #9ca4ae;
  --zm-ink-success: #42ba55;
  --zm-ink-warning: #f98436;
  --zm-ink-danger: #e78a8a;
  --zm-ink-info: #60a9e6;
  --zm-ink-muted: #9ca4ae;
  --zm-ink-gold: #d8b445;
}

/* ١) أدوات لون النصّ تتبع سطحها */
.text-blue { color: var(--zm-ink-blue) !important; }
.text-azure { color: var(--zm-ink-azure) !important; }
.text-indigo { color: var(--zm-ink-indigo) !important; }
.text-purple { color: var(--zm-ink-purple) !important; }
.text-pink { color: var(--zm-ink-pink) !important; }
.text-red { color: var(--zm-ink-red) !important; }
.text-orange { color: var(--zm-ink-orange) !important; }
.text-yellow { color: var(--zm-ink-yellow) !important; }
.text-lime { color: var(--zm-ink-lime) !important; }
.text-green { color: var(--zm-ink-green) !important; }
.text-teal { color: var(--zm-ink-teal) !important; }
.text-cyan { color: var(--zm-ink-cyan) !important; }
.text-primary { color: var(--zm-ink-primary) !important; }
.text-secondary { color: var(--zm-ink-secondary) !important; }
.text-success { color: var(--zm-ink-success) !important; }
.text-warning { color: var(--zm-ink-warning) !important; }
.text-danger { color: var(--zm-ink-danger) !important; }
.text-info { color: var(--zm-ink-info) !important; }
.text-muted { color: var(--zm-ink-muted) !important; }

/* ٢) 🔴 فخّ الشارات: تابلر يجعل لون نصّ الشارة --tblr-badge-color: var(--tblr-secondary)
   أي **رمادياً** — فـadge bg-secondary نصٌّ رمادي على خلفية رمادية (1:1 حرفياً)،
   وadge bg-danger رماديٌّ على أحمر. لكل خلفية صُلبة نختار الأبيض أو الحبر الداكن
   بأيّهما أعلى تبايناً. (شارات -lt تضبط لونها بنفسها فلا تُمَسّ.) */
.badge.bg-blue:not([class*='-lt']), .badge.bg-indigo:not([class*='-lt']), .badge.bg-purple:not([class*='-lt']), .badge.bg-pink:not([class*='-lt']), .badge.bg-red:not([class*='-lt']), .badge.bg-primary:not([class*='-lt']), .badge.bg-secondary:not([class*='-lt']), .badge.bg-danger:not([class*='-lt']) { color: #ffffff !important; }
.badge.bg-azure:not([class*='-lt']), .badge.bg-orange:not([class*='-lt']), .badge.bg-yellow:not([class*='-lt']), .badge.bg-lime:not([class*='-lt']), .badge.bg-green:not([class*='-lt']), .badge.bg-teal:not([class*='-lt']), .badge.bg-cyan:not([class*='-lt']), .badge.bg-success:not([class*='-lt']), .badge.bg-warning:not([class*='-lt']), .badge.bg-info:not([class*='-lt']) { color: #182433 !important; }
.badge:not([class*="bg-"]) { color: var(--zm-ink-muted) !important; }

/* ٣) 🔴 الصفوف الملوّنة — الفخّ الذي أبلغ عنه المالك بلقطة (والأكثر إيلاماً للعين):
   `.table-danger` وأخواتها تُثبِّت قيماً حرفية **بلا أي تكيّف مع الوضع الداكن**:
   حبرٌ غامق `#182433` وخلفية وردية فاتحة `#f7d7d7` ⇒ في الوضع الداكن يظهر شريطٌ
   ورديّ ساطع وسط صفحة داكنة. والأسوأ أنّ حبر **التمرير** `#fcfdfe` (أبيض تقريباً)
   فوق خلفية تمريرٍ فاتحة `#e6cacb` = 1.3:1 — يختفي السطر لحظة مرور الفأرة **في
   الوضعين معاً**. (وتحذير من تجربتي: تفتيح النصّ وحده يفاقم العطب — الخلفية أوّلاً.)
   الحلّ: في الفاتح نُصلح حبر التمرير فقط؛ وفي الداكن نُحوّل الخلفية إلى تدرّج داكن
   (`--tblr-*-lt` تتكيّف فعلاً: من #fbebeb إلى #2b2634) ونجعل الحبر حبر النصّ الأساس. */
.table-primary, .table-secondary, .table-success, .table-info,
.table-warning, .table-danger, .table-light {
  --tblr-table-hover-color: var(--tblr-table-color);
  --tblr-table-active-color: var(--tblr-table-color);
  --tblr-table-striped-color: var(--tblr-table-color);
}
[data-bs-theme="dark"] .table-primary   { --tblr-table-bg: var(--tblr-primary-lt); }
[data-bs-theme="dark"] .table-secondary { --tblr-table-bg: var(--tblr-secondary-lt); }
[data-bs-theme="dark"] .table-success   { --tblr-table-bg: var(--tblr-success-lt); }
[data-bs-theme="dark"] .table-info      { --tblr-table-bg: var(--tblr-info-lt); }
[data-bs-theme="dark"] .table-warning   { --tblr-table-bg: var(--tblr-warning-lt); }
[data-bs-theme="dark"] .table-danger    { --tblr-table-bg: var(--tblr-danger-lt); }
[data-bs-theme="dark"] .table-light     { --tblr-table-bg: var(--tblr-bg-surface-secondary); }
[data-bs-theme="dark"] .table-primary, [data-bs-theme="dark"] .table-secondary,
[data-bs-theme="dark"] .table-success, [data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-warning, [data-bs-theme="dark"] .table-danger,
[data-bs-theme="dark"] .table-light {
  --tblr-table-color: var(--tblr-body-color);
  --tblr-table-hover-color: var(--tblr-body-color);
  --tblr-table-active-color: var(--tblr-body-color);
  --tblr-table-striped-color: var(--tblr-body-color);
  --tblr-table-striped-bg: rgba(255, 255, 255, .04);
  --tblr-table-hover-bg: rgba(255, 255, 255, .06);
  --tblr-table-active-bg: rgba(255, 255, 255, .08);
  --tblr-table-border-color: rgba(255, 255, 255, .10);
}

/* ٤) 🔴 الفخّ الأكبر — أصناف -lt في الوضع الداكن:
   تابلر يُعيد تعريف **خلفيتها** للوضع الداكن (--tblr-blue-lt من #e6eef6 إلى #16293f)
   لكنه **لا يُعيد تعريف لون نصّها** (يبقى --tblr-blue = #0054a6) ⇒ نصٌّ كحليّ غامق
   على خلفيةٍ كحلية غامقة = 1.98:1. وهي أكثر أنماط الشارات استعمالاً في ZG (53 موضعاً
   لـadge bg-blue-lt وحدها). وفي الفاتح يسقط الأصفر بالمثل (1.97:1).
   الحلّ: لون نصّها يتبع حبر السطح المحسوب — فتنقلب مع الوضع تلقائياً. */
.bg-blue-lt,
.bg-azure-lt,
.bg-indigo-lt,
.bg-purple-lt,
.bg-pink-lt,
.bg-red-lt,
.bg-orange-lt,
.bg-yellow-lt,
.bg-lime-lt,
.bg-green-lt,
.bg-teal-lt,
.bg-cyan-lt,
.bg-primary-lt,
.bg-secondary-lt,
.bg-success-lt,
.bg-warning-lt,
.bg-danger-lt,
.bg-info-lt {
  color: var(--zm-ink-blue) !important;
}
.bg-azure-lt   { color: var(--zm-ink-azure) !important; }
.bg-indigo-lt  { color: var(--zm-ink-indigo) !important; }
.bg-purple-lt  { color: var(--zm-ink-purple) !important; }
.bg-pink-lt    { color: var(--zm-ink-pink) !important; }
.bg-red-lt, .bg-danger-lt   { color: var(--zm-ink-red) !important; }
.bg-orange-lt, .bg-warning-lt { color: var(--zm-ink-orange) !important; }
.bg-yellow-lt  { color: var(--zm-ink-yellow) !important; }
.bg-lime-lt    { color: var(--zm-ink-lime) !important; }
.bg-green-lt, .bg-success-lt { color: var(--zm-ink-green) !important; }
.bg-teal-lt    { color: var(--zm-ink-teal) !important; }
.bg-cyan-lt, .bg-info-lt     { color: var(--zm-ink-cyan) !important; }
.bg-secondary-lt { color: var(--zm-ink-secondary) !important; }
.bg-primary-lt   { color: var(--zm-ink-primary) !important; }

/* ٥) ذهب زمزم على أرضيته الفاتحة: #c9a227 على #f7f1df = 2.14:1 — يُعتَّم للقراءة
   مع بقاء الذهب نفسه لونَ العلامة في الحدود والأيقونات والشريط الجانبي. */
.bg-gold-soft { color: var(--zm-ink-gold) !important; }

/* ٦) التنبيهات في الوضع الفاتح: تابلر يلوّن نصّها بـ--tblr-*-text-emphasis وهو اللون
   المشبع نفسه على تدرّج فاتح ⇒ أخضر 2.05:1 · برتقالي 2.27 · أزرق 2.28 (وهي 200+ موضع
   في ZG). لون النصّ يتبع الحبر المحسوب، ويبقى إطار التنبيه وخلفيته كما هما. */
.alert-success { --tblr-alert-color: var(--zm-ink-green);  --tblr-alert-link-color: var(--zm-ink-green); }
.alert-green   { --tblr-alert-color: var(--zm-ink-green);  --tblr-alert-link-color: var(--zm-ink-green); }
.alert-warning { --tblr-alert-color: var(--zm-ink-orange); --tblr-alert-link-color: var(--zm-ink-orange); }
.alert-orange  { --tblr-alert-color: var(--zm-ink-orange); --tblr-alert-link-color: var(--zm-ink-orange); }
.alert-yellow  { --tblr-alert-color: var(--zm-ink-yellow); --tblr-alert-link-color: var(--zm-ink-yellow); }
.alert-info    { --tblr-alert-color: var(--zm-ink-cyan);   --tblr-alert-link-color: var(--zm-ink-cyan); }
.alert-azure   { --tblr-alert-color: var(--zm-ink-azure);  --tblr-alert-link-color: var(--zm-ink-azure); }
.alert-danger  { --tblr-alert-color: var(--zm-ink-red);    --tblr-alert-link-color: var(--zm-ink-red); }
.alert-red     { --tblr-alert-color: var(--zm-ink-red);    --tblr-alert-link-color: var(--zm-ink-red); }
.alert-primary { --tblr-alert-color: var(--zm-ink-primary);--tblr-alert-link-color: var(--zm-ink-primary); }
.alert-purple  { --tblr-alert-color: var(--zm-ink-purple); --tblr-alert-link-color: var(--zm-ink-purple); }
.alert-teal    { --tblr-alert-color: var(--zm-ink-teal);   --tblr-alert-link-color: var(--zm-ink-teal); }
.alert-secondary { --tblr-alert-color: var(--zm-ink-secondary); --tblr-alert-link-color: var(--zm-ink-secondary); }

/* ٧) أصناف زمزم الناعمة -soft (خلفية بشفافية 15٪ من اللون نفسه): نصّها كان اللون
   المشبع فوق تدرّجه ⇒ أخضر 1.81:1. تتبع الآن الحبر المحسوب مثل أخواتها. */
.bg-green-soft  { color: var(--zm-ink-green) !important; }
.bg-blue-soft   { color: var(--zm-ink-blue) !important; }
.bg-purple-soft { color: var(--zm-ink-purple) !important; }
.bg-red-soft    { color: var(--zm-ink-red) !important; }
.bg-orange-soft { color: var(--zm-ink-orange) !important; }
.bg-teal-soft   { color: var(--zm-ink-teal) !important; }
.bg-azure-soft  { color: var(--zm-ink-azure) !important; }
.bg-yellow-soft { color: var(--zm-ink-yellow) !important; }

/* ٨) نصٌّ أبيض فوق خلفية ساطعة — العكس الحرفيّ لقاعدة المالك:
   g-yellow text-white = 2.13:1 · g-green text-white = 2.74 · g-azure = 3.05.
   الأبيض لا يصلح إلا فوق الداكن؛ وهذه الخلفيات فاتحة الإحساس فتأخذ الحبر الداكن.
   ويشمل ذلك g-primary **في الوضع الداكن وحده** (أزرق زمزم يفتحّ فيه إلى #4A9EEA
   فيسقط الأبيض إلى 2.85) — أما في الفاتح فالأبيض عليه صحيح 7.45:1، فلا يُمَسّ. */
.bg-yellow.text-white, .bg-lime.text-white, .bg-green.text-white, .bg-success.text-white,
.bg-teal.text-white,   .bg-cyan.text-white, .bg-azure.text-white, .bg-info.text-white,
.bg-orange.text-white, .bg-warning.text-white {
  color: #182433 !important;
}
[data-bs-theme="dark"] .bg-primary.text-white,
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .bg-primary .text-white { color: #182433 !important; }

/* ٩) تنبيهات -lt (تدرّج أفتح): لونها يتبع الحبر المحسوب كبقيّة التنبيهات */
.alert-success-lt { --tblr-alert-color: var(--zm-ink-green); }
.alert-info-lt    { --tblr-alert-color: var(--zm-ink-cyan); }
.alert-warning-lt { --tblr-alert-color: var(--zm-ink-orange); }
.alert-danger-lt  { --tblr-alert-color: var(--zm-ink-red); }
.bg-muted-lt      { color: var(--zm-ink-secondary) !important; }

/* ١٠) شريط التقدّم فوق خلفية صُلبة: نصّه كان حبراً داكناً فوق الأرجواني = 3.24:1.
   يأخذ نفس منطق الشارات — الأبيض فوق الداكن والحبر فوق الفاتح. */
.progress-bar.bg-blue, .progress-bar.bg-indigo, .progress-bar.bg-purple, .progress-bar.bg-pink,
.progress-bar.bg-red, .progress-bar.bg-danger, .progress-bar.bg-primary, .progress-bar.bg-secondary {
  color: #ffffff !important;
}
.progress-bar.bg-azure, .progress-bar.bg-orange, .progress-bar.bg-yellow, .progress-bar.bg-lime,
.progress-bar.bg-green, .progress-bar.bg-teal, .progress-bar.bg-cyan,
.progress-bar.bg-success, .progress-bar.bg-warning, .progress-bar.bg-info {
  color: #182433 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ١١ · صورة الصنف المصغّرة + معاينتها (2026-08-09 · بطلب المالك)
   يرافقها wwwroot/js/item-image-zoom.js. المعاينة ixed عمداً كي لا يقصّها
   overflow الجدول، وz-index أعلى من النوافذ المنبثقة كي تظهر فوق كل شيء.
   ════════════════════════════════════════════════════════════════════════════ */
.zm-thumb {
  width: 42px; height: 42px; object-fit: cover; border-radius: .4rem;
  border: 1px solid var(--tblr-border-color); background: #fff;
  cursor: zoom-in; transition: transform .12s ease, box-shadow .12s ease;
}
.zm-thumb:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.zm-thumb-lg { width: 96px; height: 96px; }
.zm-thumb-ph {
  width: 42px; height: 42px; border-radius: .4rem; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px dashed var(--tblr-border-color); color: var(--zm-ink-muted);
  background: var(--tblr-bg-surface-secondary, transparent);
}
.zm-thumb-ph.zm-thumb-lg { width: 96px; height: 96px; font-size: 1.6rem; }
#zm-img-pop {
  position: fixed; z-index: 1085; display: none; padding: 4px;
  background: var(--tblr-bg-surface, #fff); border: 1px solid var(--tblr-border-color);
  border-radius: .6rem; box-shadow: 0 8px 28px rgba(0,0,0,.28); pointer-events: none;
}
#zm-img-pop.on { display: block; }
#zm-img-pop img { display: block; max-width: 320px; max-height: 320px; border-radius: .4rem; }
@media print { .zm-thumb, .zm-thumb-ph, #zm-img-pop { display: none !important; } }