/* ============================================================================
   theme-dark.css — طبقة الوضع الداكن للنظام كله
   ----------------------------------------------------------------------------
   ليه ملف منفصل؟ الواجهة صفحة واحدة فيها ~8100 استخدام لألوان Tailwind على
   ~44 ألف سطر. إضافة `dark:` لكل عنصر بالإيد مستحيلة عملياً وبتتكسر مع أول
   شاشة جديدة. فبدل كده الترجمة بتتعمل مرة واحدة هنا: كل لون فاتح مستخدم في
   الصفحة له مقابل داكن، والشاشات الجديدة بتدخل الوضع الداكن من غير أي شغل.

   ثلاث قواعد بتحكم الملف — أي تعديل لازم يحترمها:

   1) كل حاجة جوّه `@media screen`. الفواتير والتقارير بتتطبع من نفس الـ DOM،
      والطباعة الداكنة تحرق الحبر وتطلع وحشة. الطباعة تفضل فاتحة دايماً.

   2) الانتقاء بـ `:where()` عشان الوزن يفضل (0,1,1):
        - يغلب utility الفاتح العادي        `.bg-white`            (0,1,0)
        - ويخسر قدام `dark:` المكتوب باليد  `.dark .dark\:bg-x`    (0,2,0)
      يعني الـ 354 `dark:` الموجودين في الصفحة يفضلوا هم الكلمة الأخيرة، وده
      المطلوب: اللي اتكتب بقصد أولى من الترجمة العامة. ولنفس السبب مفيش
      `!important` هنا إلا مع قواعد الـ id في `<style>` بتاعة الصفحة.

   3) الدرجات غير القياسية (`-150`, `-250`, `-350`, `-450`, `-550`, `-605`,
      `-650`, `-850`, `-955`) **مش موجودة في Tailwind** ومش بتولّد CSS أصلاً —
      يعني `border-slate-150` بيرسم إطار رمادي افتراضي مش أكتر. متتحطش هنا:
      لو اتحطت هيظهر في الداكن لون مش موجود في الفاتح.
   ============================================================================ */

@media screen {

/* --- 0. لوحة الألوان ------------------------------------------------------
   نفس درجات الوضع الداكن اللي كانت في app.css، متجمّعة في مكان واحد. */
html.dark {
    --dk-bg:            #090d16;  /* خلفية الصفحة */
    --dk-surface:       #131926;  /* الكروت والنوافذ والهيدر */
    --dk-surface-2:     #0f1420;  /* مناطق slate-50 الخفيفة */
    --dk-sunken:        #0b0f19;  /* الحقول ورؤوس الجداول */
    --dk-raised:        #1c2536;  /* hover والعناصر النشطة */
    --dk-border:        #1e293b;
    --dk-border-strong: #2b3a52;
    --dk-text:          #f8fafc;
    --dk-text-2:        #cbd5e1;
    --dk-muted:         #94a3b8;

    /* يخلّي المتصفح يرسم الاسكرول بار والـ dropdown ومنتقي التاريخ داكنين.
       من غيره الـ <select> المفتوح بيفضل أبيض فاقع فوق واجهة داكنة. */
    color-scheme: dark;
}

/* --- 1. هيكل الصفحة ------------------------------------------------------ */
html.dark,
html.dark body {
    background-color: var(--dk-bg);
    color: var(--dk-text);
}

html.dark ::selection {
    background: rgba(16, 185, 129, 0.30);
    color: #ffffff;
}

html.dark hr { border-color: var(--dk-border); }

html.dark ::-webkit-scrollbar-track { background: var(--dk-sunken); }
html.dark ::-webkit-scrollbar-thumb { background: #10b981; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #059669; }

/* --- 2. الأسطح المحايدة ---------------------------------------------------
   أهم قاعدة في الملف: 589 `bg-white` + 405 `bg-slate-50` — دي كل الكروت
   والنوافذ في النظام. */
html.dark :where(.bg-white) { background-color: var(--dk-surface); }

html.dark :where(.bg-white\/95, .bg-white\/90) { background-color: rgba(19, 25, 38, 0.95); }
html.dark :where(.bg-white\/70)               { background-color: rgba(19, 25, 38, 0.78); }

html.dark :where(
    .bg-slate-50,
    .bg-slate-50\/95, .bg-slate-50\/80, .bg-slate-50\/70,
    .bg-slate-50\/60, .bg-slate-50\/50, .bg-slate-50\/40
) { background-color: var(--dk-surface-2); }

html.dark :where(
    .bg-slate-100,
    .bg-slate-100\/90, .bg-slate-100\/80, .bg-slate-100\/70, .bg-slate-100\/30
) { background-color: var(--dk-sunken); }

html.dark :where(.bg-slate-200, .bg-slate-200\/85, .bg-slate-300, .bg-slate-400) {
    background-color: var(--dk-raised);
}

/* ملاحظة: bg-slate-500 وطالع، وكذلك bg-white/20 وتحت، متروكين زي ما هم —
   دول أصلاً داكنين أو طبقات شفافة فوق خلفية ملوّنة. */

/* --- 3. الأسطح الملوّنة الخفيفة -------------------------------------------
   درجات 50/100 بتستخدم كخلفيات تنبيه وملاحظات. في الداكن بتتحوّل لطبقة
   شفافة من نفس اللون بدل ما تفضل بيضاء فاقعة. */
html.dark :where(
    .bg-emerald-50, .bg-emerald-50\/80, .bg-emerald-50\/70, .bg-emerald-50\/60,
    .bg-emerald-50\/50, .bg-emerald-50\/40, .bg-emerald-50\/30
) { background-color: rgba(16, 185, 129, 0.10); }
html.dark :where(.bg-emerald-100) { background-color: rgba(16, 185, 129, 0.17); }

html.dark :where(.bg-amber-50, .bg-amber-50\/80, .bg-amber-50\/50, .bg-amber-50\/10) {
    background-color: rgba(245, 158, 11, 0.10);
}
html.dark :where(.bg-amber-100) { background-color: rgba(245, 158, 11, 0.17); }
html.dark :where(.bg-amber-200) { background-color: rgba(245, 158, 11, 0.24); }

html.dark :where(
    .bg-red-50, .bg-red-50\/60, .bg-red-50\/50, .bg-red-50\/40,
    .bg-red-50\/30, .bg-red-50\/10
) { background-color: rgba(239, 68, 68, 0.10); }
html.dark :where(.bg-red-100) { background-color: rgba(239, 68, 68, 0.17); }

html.dark :where(.bg-rose-50, .bg-rose-50\/40) { background-color: rgba(244, 63, 94, 0.10); }
html.dark :where(.bg-rose-100)                 { background-color: rgba(244, 63, 94, 0.17); }

html.dark :where(
    .bg-blue-50, .bg-blue-50\/80, .bg-blue-50\/70,
    .bg-blue-50\/50, .bg-blue-50\/20, .bg-blue-50\/10
) { background-color: rgba(59, 130, 246, 0.10); }
html.dark :where(.bg-blue-100) { background-color: rgba(59, 130, 246, 0.17); }

html.dark :where(.bg-indigo-50, .bg-indigo-50\/60, .bg-indigo-50\/50, .bg-indigo-50\/40) {
    background-color: rgba(99, 102, 241, 0.10);
}
html.dark :where(.bg-indigo-100) { background-color: rgba(99, 102, 241, 0.17); }

html.dark :where(.bg-violet-50, .bg-purple-50, .bg-purple-50\/80) {
    background-color: rgba(139, 92, 246, 0.10);
}
html.dark :where(.bg-violet-100, .bg-purple-100) { background-color: rgba(139, 92, 246, 0.17); }

html.dark :where(.bg-sky-50)   { background-color: rgba(14, 165, 233, 0.10); }
html.dark :where(.bg-teal-50)  { background-color: rgba(20, 184, 166, 0.10); }
html.dark :where(.bg-teal-100) { background-color: rgba(20, 184, 166, 0.17); }
html.dark :where(.bg-cyan-50)  { background-color: rgba(6, 182, 212, 0.10); }
html.dark :where(.bg-orange-50)  { background-color: rgba(249, 115, 22, 0.10); }
html.dark :where(.bg-orange-100) { background-color: rgba(249, 115, 22, 0.17); }
html.dark :where(.bg-yellow-50, .bg-yellow-100\/70) { background-color: rgba(234, 179, 8, 0.10); }
html.dark :where(.bg-fuchsia-50) { background-color: rgba(217, 70, 239, 0.10); }

/* الخلفيات المشبعة (‏500 وطالع) أزرار وشارات بنص أبيض — تفضل زي ما هي عشان
   هوية النظام متتغيّرش، وتباينها على الداكن كويس أصلاً. */

/* --- 4. النصوص -----------------------------------------------------------
   الدرجات الغامقة (600 وطالع) مكتوبة أصلاً عشان تتقرا على أبيض؛ على الداكن
   بترجع لدرجة 400 من نفس اللون. الدرجات 50–400 متروكة — دي مستخدمة فوق
   خلفيات داكنة أو ملوّنة وشغّالة صح. */
html.dark :where(
    .text-slate-950, .text-slate-900, .text-slate-800,
    .text-gray-900, .text-gray-800, .text-black
) { color: var(--dk-text); }

html.dark :where(.text-slate-700, .text-slate-600, .text-gray-700, .text-gray-600) {
    color: var(--dk-text-2);
}

html.dark :where(.text-slate-500, .text-slate-400, .text-gray-500, .text-gray-400) {
    color: var(--dk-muted);
}

html.dark :where(.text-emerald-950, .text-emerald-900, .text-emerald-800,
                 .text-emerald-700, .text-emerald-600, .text-green-600) { color: #34d399; }
html.dark :where(.text-red-950, .text-red-900, .text-red-800,
                 .text-red-700, .text-red-600, .text-red-500)           { color: #f87171; }
html.dark :where(.text-rose-900, .text-rose-800, .text-rose-700, .text-rose-600) { color: #fb7185; }
html.dark :where(.text-amber-950, .text-amber-900, .text-amber-800,
                 .text-amber-700, .text-amber-600)                      { color: #fbbf24; }
html.dark :where(.text-yellow-900, .text-yellow-800)                    { color: #facc15; }
html.dark :where(.text-orange-900, .text-orange-800,
                 .text-orange-700, .text-orange-600)                    { color: #fb923c; }
html.dark :where(.text-blue-900, .text-blue-800, .text-blue-700, .text-blue-600) { color: #60a5fa; }
html.dark :where(.text-indigo-900, .text-indigo-800,
                 .text-indigo-700, .text-indigo-600, .text-indigo-500)  { color: #818cf8; }
html.dark :where(.text-violet-900, .text-violet-800, .text-violet-700,
                 .text-violet-600, .text-violet-500,
                 .text-purple-700, .text-purple-500)                    { color: #a78bfa; }
html.dark :where(.text-sky-900, .text-sky-700)                          { color: #38bdf8; }
html.dark :where(.text-teal-800, .text-teal-700)                        { color: #2dd4bf; }
html.dark :where(.text-cyan-800, .text-cyan-500)                        { color: #22d3ee; }
html.dark :where(.text-fuchsia-500)                                     { color: #e879f9; }

/* --- 5. الحدود والفواصل --------------------------------------------------- */
html.dark :where(
    .border, .border-t, .border-b, .border-s, .border-e, .border-x, .border-y,
    .border-slate-50, .border-slate-100, .border-slate-200, .border-slate-200\/80,
    .border-slate-300, .border-gray-100, .border-gray-200, .border-white
) { border-color: var(--dk-border); }

html.dark :where(.border-slate-400, .border-slate-500) { border-color: var(--dk-border-strong); }

html.dark :where(.border-emerald-100, .border-emerald-200, .border-emerald-200\/50,
                 .border-emerald-300) { border-color: rgba(16, 185, 129, 0.30); }
html.dark :where(.border-amber-100, .border-amber-100\/80,
                 .border-amber-200, .border-amber-300) { border-color: rgba(245, 158, 11, 0.30); }
html.dark :where(.border-red-100, .border-red-200, .border-red-300) { border-color: rgba(239, 68, 68, 0.30); }
html.dark :where(.border-rose-100, .border-rose-200)   { border-color: rgba(244, 63, 94, 0.30); }
html.dark :where(.border-blue-100, .border-blue-200, .border-blue-300) { border-color: rgba(59, 130, 246, 0.30); }
html.dark :where(.border-indigo-100, .border-indigo-200) { border-color: rgba(99, 102, 241, 0.30); }
html.dark :where(.border-violet-200, .border-purple-200) { border-color: rgba(139, 92, 246, 0.30); }
html.dark :where(.border-sky-100, .border-sky-200)       { border-color: rgba(14, 165, 233, 0.30); }
html.dark :where(.border-teal-100, .border-teal-200, .border-teal-300) { border-color: rgba(20, 184, 166, 0.30); }
html.dark :where(.border-orange-100, .border-orange-200) { border-color: rgba(249, 115, 22, 0.30); }
html.dark :where(.border-yellow-100, .border-yellow-200, .border-yellow-300,
                 .border-yellow-400) { border-color: rgba(234, 179, 8, 0.30); }

/* divide-* بتحطّ اللون على الأبناء مش على الأب. */
html.dark :where(.divide-y, .divide-x) > :not([hidden]) ~ :not([hidden]),
html.dark :where(.divide-slate-50, .divide-slate-100) > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dk-border);
}

html.dark :where(.ring-slate-400)   { --tw-ring-color: rgba(148, 163, 184, 0.35); }
html.dark :where(.ring-emerald-200) { --tw-ring-color: rgba(16, 185, 129, 0.35); }
html.dark :where(.ring-indigo-200)  { --tw-ring-color: rgba(99, 102, 241, 0.35); }
html.dark :where(.ring-amber-300)   { --tw-ring-color: rgba(245, 158, 11, 0.35); }

/* --- 6. الحقول -----------------------------------------------------------
   checkbox / radio / range / color مستثنيين: `color-scheme: dark` فوق بيخلّي
   المتصفح يرسمهم صح، ولو فرضنا عليهم خلفية بيبقوا مربعات سودا. */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.dark select,
html.dark textarea {
    background-color: var(--dk-sunken);
    border-color: var(--dk-border);
    color: var(--dk-text);
}

html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b; }

html.dark select option { background-color: var(--dk-surface); color: var(--dk-text); }

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.20);
}

html.dark :where(input, select, textarea):disabled {
    background-color: #0a0e17;
    color: #64748b;
}

/* --- 7. حالات التفاعل ----------------------------------------------------
   وزن دي (0,2,1) عشان تغلب `.hover\:bg-x:hover` (0,2,0)، وبرضه تخسر قدام
   `dark:hover:` المكتوب باليد (0,3,0). */
html.dark :where(.hover\:bg-white, .hover\:bg-slate-50, .hover\:bg-slate-50\/80,
                 .hover\:bg-slate-50\/50, .hover\:bg-slate-100, .hover\:bg-slate-100\/70,
                 .hover\:bg-gray-50, .hover\:bg-slate-200, .hover\:bg-slate-300):hover {
    background-color: var(--dk-raised);
}

html.dark :where(.hover\:bg-emerald-50, .hover\:bg-emerald-50\/40,
                 .hover\:bg-emerald-50\/30, .hover\:bg-emerald-100,
                 .hover\:bg-emerald-200):hover { background-color: rgba(16, 185, 129, 0.20); }
html.dark :where(.hover\:bg-amber-50, .hover\:bg-amber-100):hover  { background-color: rgba(245, 158, 11, 0.20); }
html.dark :where(.hover\:bg-red-50, .hover\:bg-red-100):hover      { background-color: rgba(239, 68, 68, 0.20); }
html.dark :where(.hover\:bg-rose-50, .hover\:bg-rose-100):hover    { background-color: rgba(244, 63, 94, 0.20); }
html.dark :where(.hover\:bg-blue-100):hover                        { background-color: rgba(59, 130, 246, 0.20); }
html.dark :where(.hover\:bg-indigo-50, .hover\:bg-indigo-100):hover { background-color: rgba(99, 102, 241, 0.20); }
html.dark :where(.hover\:bg-violet-50, .hover\:bg-violet-100):hover { background-color: rgba(139, 92, 246, 0.20); }
html.dark :where(.hover\:bg-sky-100):hover                         { background-color: rgba(14, 165, 233, 0.20); }
html.dark :where(.hover\:bg-orange-200):hover                      { background-color: rgba(249, 115, 22, 0.20); }

html.dark :where(.hover\:text-slate-800, .hover\:text-slate-700, .hover\:text-slate-600):hover {
    color: var(--dk-text);
}
html.dark :where(.hover\:text-emerald-800, .hover\:text-emerald-700, .hover\:text-emerald-600):hover { color: #34d399; }
html.dark :where(.hover\:text-red-700, .hover\:text-red-600, .hover\:text-red-500):hover             { color: #f87171; }
html.dark :where(.hover\:text-red-800, .hover\:text-rose-800):hover                                  { color: #fb7185; }
html.dark :where(.hover\:text-blue-800):hover                                                        { color: #60a5fa; }
html.dark :where(.hover\:text-indigo-800):hover                                                      { color: #818cf8; }
html.dark :where(.group:hover .group-hover\:text-emerald-600)                                        { color: #34d399; }

html.dark :where(.hover\:border-emerald-300, .hover\:border-emerald-400,
                 .hover\:border-emerald-500):hover { border-color: rgba(16, 185, 129, 0.55); }
html.dark :where(.hover\:border-amber-400):hover   { border-color: rgba(245, 158, 11, 0.55); }
html.dark :where(.hover\:border-indigo-300, .hover\:border-indigo-400):hover { border-color: rgba(99, 102, 241, 0.55); }
html.dark :where(.hover\:border-slate-200):hover   { border-color: var(--dk-border-strong); }

html.dark :where(.focus\:bg-white):focus { background-color: var(--dk-sunken); }
html.dark :where(.disabled\:bg-slate-100):disabled { background-color: #0a0e17; }
html.dark :where(.disabled\:bg-slate-400):disabled { background-color: #334155; }
html.dark :where(.disabled\:text-slate-400):disabled { color: #64748b; }

/* صفوف الجداول: القاعدة العامة `tr:hover` كانت في app.css وبتلزم هنا برضه. */
html.dark tbody tr:hover { background-color: var(--dk-raised); }

/* --- 8. الطبقات والتدرّجات ------------------------------------------------ */
html.dark :where(.bg-slate-900\/50, .bg-slate-900\/60, .bg-slate-900\/70) {
    background-color: rgba(0, 0, 0, 0.72);
}

html.dark :where(.from-white)      { --tw-gradient-from: var(--dk-surface) var(--tw-gradient-from-position); }
html.dark :where(.to-white)        { --tw-gradient-to: var(--dk-surface) var(--tw-gradient-to-position); }
html.dark :where(.from-amber-50)   { --tw-gradient-from: rgba(245, 158, 11, 0.12) var(--tw-gradient-from-position); }
html.dark :where(.to-amber-50)     { --tw-gradient-to: rgba(245, 158, 11, 0.12) var(--tw-gradient-to-position); }
html.dark :where(.from-orange-50)  { --tw-gradient-from: rgba(249, 115, 22, 0.12) var(--tw-gradient-from-position); }

/* --- 9. الهيكل: الهيدر والقائمة الجانبية ---------------------------------- */
html.dark header.bg-white {
    background-color: var(--dk-surface);
    border-bottom: 1px solid var(--dk-border);
}
html.dark header button.text-slate-600 { color: var(--dk-text); }
html.dark header button.text-slate-600:hover { background-color: var(--dk-raised); }

html.dark aside#sidebar {
    background-color: #0b0e14;
    border-left: 1px solid var(--dk-border);
}
html.dark aside#sidebar .bg-emerald-950 { background-color: #06080c; }
html.dark aside#sidebar .menu-btn { color: var(--dk-muted); }
html.dark aside#sidebar .menu-btn:hover {
    background-color: var(--dk-surface);
    color: var(--dk-text);
}
html.dark aside#sidebar .menu-btn.bg-slate-800 {
    background-color: var(--dk-raised);
    color: #ffffff;
}

html.dark table thead th {
    background-color: var(--dk-sunken);
    color: var(--dk-muted);
    border-bottom: 2px solid var(--dk-border);
}

html.dark #pos-autocomplete-results,
html.dark #purchase-autocomplete-results {
    background-color: var(--dk-surface);
    border: 1px solid var(--dk-border);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}
html.dark #pos-autocomplete-results > div,
html.dark #purchase-autocomplete-results > div {
    border-bottom: 1px solid var(--dk-border);
    color: var(--dk-text);
}
html.dark #pos-autocomplete-results > div:hover,
html.dark #purchase-autocomplete-results > div:hover { background-color: var(--dk-raised); }

html.dark .glass-card {
    background: rgba(19, 25, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
}

html.dark .metro-tile:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
}

html.dark #tab-tasks .task-empty-state {
    border-color: var(--dk-border);
    background: rgba(15, 20, 32, 0.75);
    color: var(--dk-muted);
}

html.dark .pos-cart-resizer:hover,
html.dark .pos-cart-resizer.is-resizing { background: rgba(255, 255, 255, 0.22); }

/* --- 10. الشاشات اللي بتلوّن نفسها في <style> بتاع الصفحة ------------------
   دي قواعد id/class مكتوبة بألوان ثابتة، وزنها أعلى من طبقة الـ utilities،
   فمحتاجة نظير داكن صريح. `!important` هنا مقصود: القاعدة الأصلية أحياناً
   بتيجي بـ id + عنصرين. */

/* جدول تفاصيل الفاتورة (بيتعرض على الشاشة وبيتطبع — الطباعة فاتحة لأن الملف
   كله جوّه @media screen) */
html.dark #detail-invoice-table { border-color: var(--dk-border-strong) !important; }
html.dark #detail-invoice-table th,
html.dark #detail-invoice-table td { border-color: var(--dk-border) !important; }
html.dark #detail-invoice-table thead th {
    background: var(--dk-sunken) !important;
    color: var(--dk-text-2) !important;
    border-bottom-color: var(--dk-border-strong) !important;
}

/* تقرير المخزون الكلاسيكي */
html.dark .inventory-report-shell { background: var(--dk-bg) !important; }
html.dark .inventory-filter-panel {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}
html.dark .inventory-filter-control {
    background: var(--dk-sunken) !important;
    color: var(--dk-text) !important;
}
html.dark .inventory-utility-btn:hover { background: rgba(16, 185, 129, 0.18) !important; }
html.dark #classic-inv-rep-table tbody td.ci-stick { background: var(--dk-surface) !important; }
html.dark #classic-inv-rep-table tbody tr.ci-row-diff td.ci-stick { background: rgba(239, 68, 68, 0.18) !important; }
html.dark #classic-inv-rep-table tbody tr:nth-child(2n) td:not(.ci-stick) { background: var(--dk-surface-2) !important; }
html.dark #classic-inv-rep-table tbody tr:hover td { background: rgba(16, 185, 129, 0.14) !important; }
html.dark #classic-inv-rep-table tfoot td {
    background: var(--dk-raised) !important;
    color: var(--dk-text) !important;
}

/* مركز المخزون */
html.dark .inventory-center-shell { background: var(--dk-bg) !important; }
html.dark .inventory-center-hero  { background: linear-gradient(135deg, #0f2a22, #0b1420) !important; }

/* تقرير وحركة "سهل" */
html.dark .sahl-stock-report-shell,
html.dark .sahl-movement-shell {
    background: var(--dk-bg) !important;
    border-color: var(--dk-border) !important;
}
html.dark .sahl-stock-report-rail { background: var(--dk-surface-2) !important; }
html.dark .sahl-stock-report-main { background: var(--dk-bg) !important; }
html.dark .sahl-stock-report-filter,
html.dark .sahl-step-card {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}
html.dark .sahl-stock-report-summary {
    background: var(--dk-border) !important;
    border-color: var(--dk-border) !important;
}
html.dark .sahl-stock-report-summary > div { background: var(--dk-surface) !important; }
html.dark .sahl-field {
    background: var(--dk-sunken) !important;
    color: var(--dk-text) !important;
}
html.dark .sahl-field:disabled,
html.dark .sahl-field[readonly] { background: #0a0e17 !important; color: #64748b !important; }
html.dark .sahl-grid td {
    background: var(--dk-surface) !important;
    border-bottom-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
html.dark .sahl-grid tr.is-selected td { background: rgba(16, 185, 129, 0.20) !important; }
html.dark .sahl-side-button,
html.dark .sahl-command-button {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
html.dark .sahl-side-button:hover,
html.dark .sahl-command-button:hover { background: rgba(16, 185, 129, 0.18) !important; }
html.dark .sahl-search-results {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}
html.dark .sahl-search-results button { border-bottom-color: var(--dk-border) !important; }
html.dark .sahl-search-results button:hover { background: rgba(16, 185, 129, 0.18) !important; }

/* --- 11. مركز الطباعة (print-center-v2.css) -------------------------------
   الملف ده بيستعمل `!important` في قواعده (مثلاً `.pm-shell-v2` خلفيته
   `#f1f5f9 !important`)، فالنظير الداكن لازم يكون `!important` برضه. */
html.dark #tab-print_calc .pm-shell-v2 { background: var(--dk-bg) !important; }
html.dark #tab-print_calc .pm-header-v2 {
    background: var(--dk-surface) !important;
    border-bottom-color: var(--dk-border) !important;
}
html.dark #tab-print_calc .pm-basic-control select,
html.dark #tab-print_calc .pm-basic-control input,
html.dark #tab-print_calc .pm-advanced-toggle,
html.dark #tab-print_calc .pm-advanced-close {
    background: var(--dk-sunken) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
html.dark #tab-print_calc .pm-queue-host {
    background: var(--dk-surface) !important;
    border-top-color: var(--dk-border) !important;
}
html.dark #tab-print_calc #pm-job-list > div {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border) !important;
}
html.dark #tab-print_calc .pm-lazy-toolbar {
    background: rgba(14, 165, 233, 0.12) !important;
    border-color: rgba(14, 165, 233, 0.30) !important;
}
html.dark #tab-print_calc .pm-lazy-actions button,
html.dark #tab-print_calc .pm-file-prepare {
    background: var(--dk-surface) !important;
    color: var(--dk-text) !important;
}
html.dark #tab-print_calc .pm-lazy-actions button:first-child { color: #ffffff !important; }
html.dark #tab-print_calc .pm-lazy-progress { background: rgba(59, 130, 246, 0.22) !important; }
html.dark #tab-print_calc .pm-settings-panel,
html.dark #tab-print_calc .pm-files-panel,
html.dark #tab-print_calc .pm-preview-panel {
    border-color: var(--dk-border) !important;
}

/* --- 12. الأنماط المكتوبة داخل `style=""` ---------------------------------
   ~269 عنصر في الصفحة بيلوّنوا نفسهم بـ inline style — وده بيغلب أي stylesheet
   إلا بـ `!important`. أغلبهم في مركز الطباعة وشاشات التقارير.

   الاستهداف بنص الخاصية `[style*="..."]` مقصود: الصفحة بتكتب مجموعة ثابتة
   وصغيرة من القيم الحرفية، فالتغطية دقيقة. لو ضفت لون inline جديد في الصفحة
   ضيف له سطر هنا، أو (الأحسن) استعمل class بدل inline style.

   الترتيب مهم: `[style*="background:#fff"]` بيطابق `#fff5f5` و`#fff2f2` كمان،
   عشان كده الاتنين دول متكتوبين بعده وهما اللي بيكسبوا. */
html.dark [style*="background:#fff"],
html.dark [style*="background:#ffffff"],
html.dark [style*="background: #fff"] { background-color: var(--dk-surface) !important; }

html.dark [style*="background:#f8fafc"],
html.dark [style*="background: #f8fafc"] { background-color: var(--dk-surface-2) !important; }

html.dark [style*="background:#f1f5f9"] { background-color: var(--dk-sunken) !important; }

html.dark [style*="background:#f0fdf4"],
html.dark [style*="background:#ecfdf5"],
html.dark [style*="background:#e7f7f0"] { background-color: rgba(16, 185, 129, 0.12) !important; }

html.dark [style*="background:#eef2ff"],
html.dark [style*="background:#f8faff"] { background-color: rgba(99, 102, 241, 0.12) !important; }

html.dark [style*="background:#fff5f5"],
html.dark [style*="background:#fff2f2"] { background-color: rgba(239, 68, 68, 0.12) !important; }

html.dark [style*="background:#fffbeb"] { background-color: rgba(245, 158, 11, 0.12) !important; }

html.dark [style*="background:#eef2f3"],
html.dark [style*="background:#f4f6f7"],
html.dark [style*="background:#e4e9eb"],
html.dark [style*="background:#dde4e6"] { background-color: var(--dk-surface-2) !important; }

/* نصوص inline غامقة */
html.dark [style*="color:#0f172a"],
html.dark [style*="color:#1e293b"] { color: var(--dk-text) !important; }
html.dark [style*="color:#334155"],
html.dark [style*="color:#374151"],
html.dark [style*="color:#475569"] { color: var(--dk-text-2) !important; }
html.dark [style*="color:#64748b"],
html.dark [style*="color:#6b7280"],
html.dark [style*="color: #666"]   { color: var(--dk-muted) !important; }
html.dark [style*="color:#166534"],
html.dark [style*="color:#065f46"],
html.dark [style*="color:#047857"] { color: #34d399 !important; }
html.dark [style*="color:#991b1b"],
html.dark [style*="color:#b91c1c"] { color: #f87171 !important; }
html.dark [style*="color:#1d4ed8"],
html.dark [style*="color:#2563eb"] { color: #60a5fa !important; }
html.dark [style*="color:#b45309"],
html.dark [style*="color:#92400e"] { color: #fbbf24 !important; }

/* حدود inline محايدة */
html.dark [style*="solid #cbd5e1"],
html.dark [style*="dashed #cbd5e1"],
html.dark [style*="solid #e2e8f0"],
html.dark [style*="solid #e5e7eb"],
html.dark [style*="solid #f1f5f9"],
html.dark [style*="solid #ddd"] { border-color: var(--dk-border) !important; }

/* --- 13. ألوان Tailwind الحرفية `bg-[#...]` -------------------------------- */
html.dark :where(.bg-\[\#eef2f3\], .bg-\[\#f4f6f7\]) { background-color: var(--dk-surface-2); }
html.dark :where(.bg-\[\#e4e9eb\], .bg-\[\#dde4e6\]) { background-color: var(--dk-sunken); }

/* --- 14. ألوان النص المكتوبة في `<style>` بتاع الصفحة ---------------------
   `.sahl-stock-report-shell` و`.sahl-movement-shell` بيحطّوا `color:#17212b`
   على الغلاف كله، فبيورَّث لكل الشاشة — ده اللي كان بيخلّي تقرير المخزون
   وحركة الأصناف نص أسود على خلفية سودا. */
html.dark .sahl-stock-report-shell,
html.dark .sahl-movement-shell { color: var(--dk-text) !important; }
html.dark .sahl-stock-report-label { color: var(--dk-muted) !important; }
html.dark .inventory-report-shell,
html.dark .inventory-center-shell { color: var(--dk-text) !important; }

/* --- 15. استثناء: نص غامق فوق خلفية لون فاتح مشبّع ------------------------
   قاعدة النصوص فوق بترفع درجات 600+ لدرجة 400 عشان تتقرا على خلفية داكنة.
   لكن العنصر اللي خلفيته لون مشبّع فاتح (شارة صفرا، زرار أخضر) كان نصه غامق
   بقصد، والرفع بيقلب التباين من 8:1 لـ 1.3:1. الخلفيات دي مش بتتظلّم في
   الوضع الداكن، فالنص الغامق بتاعها يفضل غامق.
   لازم يفضل بعد القسم 4 في الترتيب عشان يكسب (نفس الوزن، والأخير بيكسب). */
html.dark :where(.bg-emerald-400,.bg-emerald-500,.bg-amber-400,.bg-amber-500,.bg-yellow-400,.bg-yellow-500,.bg-orange-500,.bg-sky-400,.bg-sky-500,.bg-teal-500,.bg-cyan-500,.bg-lime-500,.bg-green-500):where(.text-slate-950,.text-slate-900,.text-slate-800,.text-slate-700,.text-slate-600,.text-emerald-950,.text-emerald-900,.text-emerald-800,.text-amber-950,.text-amber-900,.text-amber-800,.text-red-950,.text-red-900,.text-blue-900,.text-indigo-900) {
    color: #0b1220;
}

/* --- 16. رأس تقرير المخزون الملوّن ---------------------------------------
   `#classic-inv-rep-table thead th` خلفيته أخضر مزرق ثابت (#167b7b) من
   `<style>` بتاع الصفحة، ونصّه في الوضع الفاتح أبيض. قاعدة `table thead th`
   العامة فوق كانت بتديله رمادي فاتح، والنتيجة رمادي على أخضر = تباين 1.97
   على ٢٣ خلية. الرأس ده بيلوّن نفسه، فبيحتفظ بنصّه الأبيض. */
html.dark #classic-inv-rep-table thead th {
    background: #167b7b !important;
    color: #ffffff !important;
}

/* --- 17. آخر الفجوات في مركز الطباعة والشاشات المخصّصة -------------------- */
html.dark [style*="background:#eff6ff"] { background-color: rgba(59, 130, 246, 0.14) !important; }
html.dark [style*="background:#fafafa"] { background-color: var(--dk-surface-2) !important; }
html.dark [style*="background:#cbd5e1"] { background-color: var(--dk-border) !important; }
html.dark [style*="color:#9a3412"],
html.dark [style*="color:#7c2d12"] { color: #fdba74 !important; }

/* الحقول اللي بتاخد لونها من قواعد id في print-center-v2.css (وزنها أعلى من
   قاعدة `html.dark select` العامة). */
html.dark #tab-print_calc select,
html.dark #tab-print_calc input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark #tab-print_calc textarea {
    background: var(--dk-sunken) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}

html.dark #tab-print_calc .pm-header-title,
html.dark #tab-print_calc .pm-lazy-copy strong { color: var(--dk-text) !important; }
html.dark #tab-print_calc .pm-invoice-mode      { color: var(--dk-text-2) !important; }
html.dark #tab-print_calc .pm-basic-control label,
html.dark #tab-print_calc .pm-lazy-copy span,
html.dark #tab-print_calc #pm-lazy-progress-label { color: var(--dk-muted) !important; }

html.dark .sahl-side-button kbd,
html.dark .sahl-command-button kbd { color: #34d399 !important; }
html.dark .sahl-command-button.is-danger { color: #f87171 !important; }

} /* @media screen */