/* =====================================================================
 *  fagala.css - ستايل نظام الفجالة ستور (كان جوه includes/header.php)
 *
 *  ليه اتنقل لملف لوحده؟
 *    وهو جوه الـHTML المتصفح مابيقدرش يكاشه، فكان بيتنزّل مع كل صفحة
 *    (~30KB في كل مرة). دلوقتي بيتنزّل مرة واحدة ويتكاش.
 *
 *  مهم: لو غيّرت حاجة هنا، زوّد رقم ?v= في header.php
 *        وزوّد VERSION في sw.js عشان الكاش يتحدّث.
 * ===================================================================== */

/* =====================================================================
 *  قواعد التصميم — بريف ٤٢ (٢٢ سبتمبر ٢٠٢٦)
 *
 *  الموقع كان فيه ٣١ مقاس خط و١٨ نص قطر و٥١ ظل مختلفين، ومعظمهم
 *  مكتوبين بإيد جوّه <style> بتاع كل صفحة. التوكنات اللي في :root
 *  تحت (قسم «نظام التصميم») هي المرجع من هنا ورايح:
 *
 *   ١. أي CSS جديد ياخد من التوكنات — مفيش رقم بكسل جديد لو فيه توكن قريب.
 *   ٢. الخط:     --fs-xs 12 · --fs-sm 12 · --fs-base 13 · --fs-md 14
 *                · --fs-lg 16 · --fs-xl 18 · --fs-2xl 22 · --fs-3xl 28
 *   ٣. الحواف:   --r-xs 6 · --r-sm 8 · --r-md 10 (= --r) · --r-lg 14 · --r-pill 999
 *   ٤. المسافات: --sp-1 4 · --sp-2 8 · --sp-3 12 · --sp-4 16 · --sp-5 20 · --sp-6 24
 *   ٥. الطبقات:  --z-dropdown 50 · --z-sticky 100 · --z-modal 1000
 *                · --z-toast 1100 · --z-top 1200
 *                🔴 مفيش 9999 ولا 99999 تاني. حاجة لازم تبقى فوق المودال
 *                   ← --z-toast أو --z-top.
 *   ٦. الظل:     --shadow-sm (كارت ساكن) · --shadow (كارت بارز · قايمة)
 *                · --shadow-lg (مودال · بوب أب). مفيش box-shadow جديد بإيد.
 *   ٧. نقط الشاشة: 480 · 640 · 768 · 1024 — شوف التعليق جوّه :root.
 *   ٨. الألوان: من التوكنات الموجودة بس، واقرا تعليق الوضع الليلي قبل أي لون.
 *
 *  🔴 التوكنات دي مقاسات مش ألوان — **مابتتغيّرش في الوضع الليلي**،
 *     فمش موجودة في بلوك [data-theme="dark"] بقصد.
 *  🔴 login.php مابتقراش الملف ده (عندها :root بتاعتها) — التوكنات
 *     مش متاحة هناك.
 * ===================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            /* ===== الكحلي: لون الأنظمة المالية الرسمية ===== */
            --ink-900: #16233d;   /* الشريط الجانبي — كحلي عميق مش أسود */
            --ink-800: #22334f;
            --ink-700: #3b4e6d;
            --ink-600: #4d6180;
            --ink-500: #5c6c85;   /* نص ثانوي — كان #6d7f9a (٣٫٦٣ على line-soft، فشل AA) */
            --ink-400: #5e6e86;   /* نص خافت — كان #94a3b8 (٢٫٥٦ على الأبيض، أسوأ توكن) */
            --ink-300: #c3ccd8;
            --ink-200: #e2e7ee;

            /* ===== التفاعل: أزرق فولاذي هادي ===== */
            /* اتنقّحت الألوان يوم ٣١ أغسطس ٢٠٢٦ عشان الدلالية كانت غامقة (إضاءة ٣٠-٤٢٪) فبتقرا طيني بدل ما تبقى إشارة.
               كل القيم دي اتفحص تباينها ومعدّية معيار AA: كل لون على الأبيض ≥ ٤.٥، وكل لون على خلفيته الناعمة ≥ ٤.٥.
               أي تعديل فيها لازم يتفحص تباينه تاني قبل ما يتحط. */
            --accent:       #1e6fbf;
            --accent-hover: #185a9c;
            --accent-soft:  #e8f1fb;
            --accent-ring:  rgba(30,111,191,.20);

            /* ===== الأسطح ===== */
            --bg:        #f5f6f8;   /* رمادي فاتح محايد */
            --surface:   #ffffff;
            --line:      #e3e7ed;
            --line-soft: #eff2f6;

            /* ===== دلالات الأرقام — مهدّاة مش فاقعة ===== */
            --pos:       #0b7a52;
            --pos-soft:  #e6f6ee;
            --neg:       #c0332e;
            --neg-soft:  #fdeceb;
            --warn:      #946105;
            --warn-soft: #fdf4e3;

            /* ===== الدور التاني للألوان الدلالية =====
               `--pos` و`--neg` و`--warn` بيتقلبوا فاتحين في الوضع الليلي
               عشان ٤٨٧ استعمال منهم **كتابة**. لكن اللي بيستعملهم
               **خلفية بكتابة بيضا** (١٢٠ موضع) محتاج لون غامق يقبل
               الأبيض فوقه. فدول الدور التاني.
               🔴 قيمهم **واحدة في الوضعين** — كل واحد فيهم الأبيض فوقه
               عدّى AA: pos ٥.٣٦ · neg ٥.٥٩ · warn ٥.٢٩.
               عشان كده مش هتلاقيهم في بلوك [data-theme="dark"]. */
            --pos-fill:  #0b7a52;
            --neg-fill:  #c0332e;
            --warn-fill: #946105;

            /* الأزرق ككتابة. `--accent` نفسه بيفضل غامق في الوضعين لأنه
               خلفية الزراير في كل مكان (الأبيض فوقه ٥.١٤). */
            --accent-text: #1a63ab;

            /* ===== السطح القوي (الزرار المختار · الزرار الثانوي) =====
               ١٢ موضع في المشروع بيستعملوا `--ink-900`/`--ink-800`
               **كخلفية** بكتابة بيضا. وسلّم الحبر **بيتعكس** في الوضع
               الليلي — يعني الخلفية كانت هتطلع **بيضا والكتابة بيضا**.
               🔴 دي كانت مكسورة فعلاً في شريط فلاتر الفواتير.
               الحل: الدور ده بقى ليه توكن بيتقلب مع الوضع — غامق بكتابة
               بيضا في الفاتح، وفاتح بكتابة غامقة في الليلي. الاتنين
               تباينهم ١٢.٦ فما فوق. */
            --fill-strong:      var(--ink-900);
            --fill-strong-fg:   #ffffff;
            --fill-strong-veil: rgba(255,255,255,.18);

            color-scheme: light;

            /* ===== الخطوط ===== */
            --font: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;

            /* ===== الإيقاع ===== */
            --r-sm: 8px;  --r: 10px;  --r-lg: 14px;
            --shadow-sm: 0 1px 2px rgba(20,33,61,.07);
            --shadow:    0 2px 4px rgba(20,33,61,.06), 0 8px 20px rgba(20,33,61,.07);
            --shadow-lg: 0 18px 44px rgba(20,33,61,.20);

            /* ===== نظام التصميم (بريف ٤٢) — مقاسات مش ألوان، مابتتغيّرش في الليلي =====
               🔴 `--r-sm` و`--r` و`--r-lg` اللي فوق كانوا موجودين ومستعملين قبل كده —
               متغيّرش قيمتهم. الجداد اتضافوا حواليهم. */

            /* الخط */
            --fs-xs:   12px;
            --fs-sm:   12px;
            --fs-base: 13px;
            --fs-md:   14px;   /* الزرار والخانات */
            --fs-lg:   16px;
            --fs-xl:   18px;
            --fs-2xl:  22px;
            --fs-3xl:  28px;

            /* الحواف — بتكمّل --r-sm (8) و--r (10) و--r-lg (14) اللي فوق */
            --r-xs:   6px;
            --r-md:   var(--r);   /* ١٠ — اسم تاني لنفس القيمة عشان السلّم يتقري */
            --r-pill: 999px;

            /* المسافات (gap · padding · margin) — سلّم ٤ */
            --sp-1: 4px;
            --sp-2: 8px;
            --sp-3: 12px;
            --sp-4: 16px;
            --sp-5: 20px;
            --sp-6: 24px;

            /* الطبقات (z-index) — من تحت لفوق */
            --z-dropdown: 50;     /* نفس مستوى الهيدر اللازق وقوايم الصفحة */
            --z-sticky:   100;    /* نفس مستوى الشريط الجانبي الثابت (.sidebar) */
            --z-modal:    1000;   /* المودال وخلفيته */
            --z-toast:    1100;   /* الرسايل العايمة — فوق المودال */
            --z-top:      1200;   /* حاجة لازم تبقى فوق كل ده */

            /* الظلال: التلاتة اللي فوق (--shadow-sm · --shadow · --shadow-lg) هم الوحيدين،
               ومتعرّفين تاني في بلوك الليلي بأسود أقوى. متضيفش box-shadow بإيد. */

            /* نقط الشاشة (breakpoints): 480 · 640 · 768 · 1024
               🔴 CSS مابيقبلش var() جوّه @media — اكتب الرقم نفسه:
                  @media (max-width: 768px) { … }
               النقط القديمة (760 · 820 · 560 · 600 · 520 · 880 · 900 · 430) بتفضل زي
               ما هي لحد ما صفحتها تتلمس، ووقتها تتقرّب لأقرب واحدة من الأربعة. */

            /* توافق مع الكود القديم */
            --purple: var(--accent);
            --purple-dark: var(--accent-hover);
            --sidebar: var(--ink-900);
            --sidebar-hover: var(--ink-800);
            --text: var(--ink-800);
            --muted: var(--ink-500);
            --surface-soft: var(--line-soft);
            --bg-main: var(--bg);
            --bg-surface: var(--surface);
            --text-muted: var(--ink-500);

            /* منحنيات الحركة للأيقونات (بريف ٣٦) */
            --ic-ease:   cubic-bezier(.45, 0, .2, 1);     /* حركة رايحة جاية */
            --ic-spring: cubic-bezier(.34, 1.56, .64, 1); /* نطة/ظهور فيها ارتداد خفيف */
        }

        /* =====================================================================
         *  الوضع الليلي — ٣١ أغسطس ٢٠٢٦
         *
         *  الفكرة: مفيش قاعدة CSS واحدة بتتغيّر هنا. **قيم متغيّرات وبس.**
         *  الصفحة كلها بتقلب لأن كل حاجة بتقرا من المتغيّرات دي.
         *
         *  سلّم الحبر **بيتعكس**: في الفاتح `--ink-900` أغمق لون (نص)،
         *  وفي الليلي بقى **أفتح** لون (نص). عشان كده `--sidebar`
         *  و`--sidebar-hover` مكتوبين هنا بلون صريح مش `var(--ink-900)`
         *  — من غير كده الشريط الجانبي كان هيطلع **أبيض**.
         *
         *  🔴 كل قيمة هنا اتفحص تباينها بحساب فعلي ومعدّية AA:
         *     ink-800 على السطح ١٢.٦ · ink-500 ٥.٣٠ · accent-text ٧.٧٣
         *     pos ٩.٥٠ · neg ٧.١٦ · warn ٨.٦٦
         *     وكل لون على خلفيته الناعمة: pos ٨.٣١ · neg ٦.٨٦ · warn ٧.٧١
         *  🔴 أي تعديل في أي قيمة **لازم يتفحص تباينه تاني** قبل ما يتحط.
         * ===================================================================== */
        :root[data-theme="dark"] {
            /* سلّم الحبر معكوس: ٩٠٠ = أنصع نص، ٢٠٠ = أغمق حد */
            --ink-900: #eef2f8;
            --ink-800: #dbe3ee;
            --ink-700: #bcc8d8;
            --ink-600: #9aa8bf;
            --ink-500: #8494ac;
            --ink-400: #8a99b0;
            --ink-300: #4a5a75;
            --ink-200: #313f57;

            /* الأسطح: الأرضية أغمق، والكارت طالع فوقها درجة */
            --bg:        #0f1826;
            --surface:   #16202f;
            --line:      #263243;
            --line-soft: #1b2635;

            /* 🔴 صريحين مش var(--ink-*) — السبب مشروح فوق */
            --sidebar:       #0a111c;
            --sidebar-hover: #16202f;

            /* الأزرق: `--accent` و`--accent-hover` **مش هنا** بقصد —
               دول خلفيات الزراير والأبيض فوقهم عدّى AA في الوضعين
               (٥.١٤ و٧.٠٥). اللي بيتغيّر هو الأزرق ككتابة وكخلفية ناعمة. */
            --accent-soft: #14263c;
            --accent-text: #7ab8f0;
            --accent-ring: rgba(122,184,240,.22);

            /* الدلالية ككتابة — فاتحة */
            --pos:  #4ade9a;
            --neg:  #ff8a80;
            --warn: #f0b23c;

            /* الخلفيات الناعمة — صبغات غامقة */
            --pos-soft:  #12301f;
            --neg-soft:  #3a1a18;
            --warn-soft: #362614;

            /* الظل على أرضية غامقة لازم يبقى أسود وأقوى، الرمادي بيختفي */
            --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
            --shadow:    0 2px 4px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.45);
            --shadow-lg: 0 18px 44px rgba(0,0,0,.60);

            /* السطح القوي بينعكس: في الفاتح غامق بكتابة بيضا، وهنا
               فاتح بكتابة غامقة. 🔴 مكتوب بلون صريح مش `var(--ink-900)`
               عشان سلّم الحبر اتعكس — لو ساب `var(--ink-900)` كان هيبقى
               نفس القيمة بس الكتابة تفضل بيضا = زرار مختفي. */
            --fill-strong:      #dbe3ee;
            --fill-strong-fg:   #0f1826;
            --fill-strong-veil: rgba(0,0,0,.13);

            /* أسامي قديمة بتفضل راكبة على توكنات الوضع الحالي. */
            --surface-soft: var(--line-soft);
            --bg-main: var(--bg);
            --bg-surface: var(--surface);
            --text-muted: var(--ink-500);

            color-scheme: dark;
        }
        body {
            font-family: var(--font);
            background: var(--bg);
            color: var(--ink-800);
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            font-feature-settings: 'tnum' 1;   /* أرقام بعرض ثابت: الأعمدة تتصفّ */
        }

        /* ===== الأرقام: بطل الواجهة =====
           كل رقم في جدول أو خانة إدخال بياخد الخط الجدولي عشان الخانات
           تتصفّ تحت بعض بالظبط — ده اللي بيريّح العين وانت بتقارن. */
        table td, table th,
        input[type="number"], .num, .money {
            font-variant-numeric: tabular-nums;
            font-feature-settings: 'tnum' 1;
        }
                .num-pos { color: var(--pos); }
        .num-neg { color: var(--neg); }
        .num-zero { color: var(--ink-400); }

        /* تركيز واضح للكيبورد (إتاحة) */
        :focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            border-radius: 4px;
        }
        @media (prefers-reduced-motion: reduce) {
            * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
        }
        /* =====================================================================
         *  الزرار الموحّد — بريف ٤٣ (٢٢ سبتمبر ٢٠٢٦)
         *
         *  قبل كده `.btn` كان متعرّف جوّه ٣٣ صفحة، كل واحدة بمقاساتها.
         *  دلوقتي هنا مرة واحدة. الصفحة اللي زرارها مختلف فعلاً سايبة
         *  override صغير في <style> بتاعها (بييجي بعد الملف ده فبيكسب).
         *
         *  🔴 الأنواع مكتوبة `.btn:where(.btn-x)` بقصد:
         *     - `:where()` وزنه صفر ← السيلكتور وزنه زي `.btn-x` لوحده بالظبط،
         *       فأي تعريف محلي في صفحة لسه بيكسب (لأنه بعد الملف ده).
         *     - من غير `.btn` مابيمسكش ← `review.php` فيها `btn-approve`
         *       و`btn-reject` على `btn-review` مش على `.btn`، ومالهاش دعوة.
         *  🔴 أي نوع بيغيّر الخلفية أو اللون لازم يعرّف :hover بتاعه،
         *     وإلا بيرث `.btn:hover` (الأزرق) والكتابة تبوظ.
         *  🔴 الأسامي القديمة (btn-red · btn-reject · btn-green · btn-approve ·
         *     btn-cancel) أسامي تانية لنفس الأنواع — مفيش HTML اتغيّر.
         * ===================================================================== */
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 7px;
            padding: 11px 20px;
            border: none; border-radius: var(--r-md);
            background: var(--accent); color: #fff;
            font-family: inherit; font-size: var(--fs-md);
            cursor: pointer; text-decoration: none;
            transition: background .15s ease, border-color .15s ease, filter .15s ease;
        }
        .btn:hover { background: var(--accent-hover); color: #fff; }
        /* :hover بس هنا مش :focus-visible — عشان الأنواع المحلية اللي فضلت في الصفحات
           (زي btn-secondary في purchase_groups) ماتقلبش أزرق لما تاخد فوكس بالكيبورد */
        .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .btn:is(:disabled, [disabled]) { opacity: .55; cursor: not-allowed; }

        /* الصغير */
        .btn:where(.btn-sm) { padding: 6px 12px; font-size: var(--fs-base); }

        /* الأساسي — نفس .btn، الاسم موجود عشان صفحات بتكتبه صريح */
        .btn:where(.btn-primary) { background: var(--accent); color: #fff; }
        .btn:where(.btn-primary):is(:hover, :focus-visible) { background: var(--accent-hover); color: #fff; }

        /* الشفاف: أرضية الصفحة + كتابة زرقا */
        .btn:where(.btn-ghost) { background: var(--bg); color: var(--accent-text); }
        .btn:where(.btn-ghost):is(:hover, :focus-visible) { background: var(--line); color: var(--accent-text); }

        /* الثانوي والإلغاء: رمادي هادي */
        .btn:where(.btn-secondary, .btn-cancel) { background: var(--line-soft); color: var(--ink-500); }
        .btn:where(.btn-secondary, .btn-cancel):is(:hover, :focus-visible) { background: var(--line); color: var(--ink-500); }

        /* الخطر: --neg-fill مش --neg (الأبيض فوقه — شوف «الدور التاني» في :root) */
        .btn:where(.btn-danger, .btn-red, .btn-reject) { background: var(--neg-fill); color: #fff; }
        .btn:where(.btn-danger, .btn-red, .btn-reject):is(:hover, :focus-visible) { background: var(--neg-fill); color: #fff; filter: brightness(.92); }

        /* النجاح */
        .btn:where(.btn-success, .btn-green, .btn-approve) { background: var(--pos-fill); color: #fff; }
        .btn:where(.btn-success, .btn-green, .btn-approve):is(:hover, :focus-visible) { background: var(--pos-fill); color: #fff; filter: brightness(.92); }

        /* المحدّد: سطح + برواز */
        .btn:where(.btn-outline) { background: var(--surface); color: var(--ink-700); border: 1px solid var(--line); }
        .btn:where(.btn-outline):is(:hover, :focus-visible) { background: var(--bg); color: var(--ink-700); }

        /* ===== التخطيط ===== */
        .layout { display: flex; min-height: 100vh; }
        /* ===== Sidebar ===== */
        /* 🔴 نص الشريط الجانبي لون صريح مش توكن (بريف ١٥٠): الشريط غامق في الوضعين،
           و--ink-300 الليلي #4a5a75 على #0a111c = ٢٫٧ و--ink-400 النهاري #5e6e86
           على #16233d = ٣٫٠٢ — الاتنين بيسقطوا. #94a3b8 = ٦٫١٠ نهاري / ٧٫٣٨ ليلي. */
        .sidebar {
            width: 250px;
            background: var(--sidebar);
            color: #94a3b8;
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; right: 0; bottom: 0;
            z-index: 100;
            transition: transform 0.25s;
        }
        .sidebar-brand {
            padding: 20px;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            display: flex;
            align-items: center;
            gap: 11px;
            letter-spacing: -.01em;
        }
        .sidebar-brand .dot img { display:block; width:100%; height:100%; object-fit:cover; }
        .sidebar-brand .dot {
            width: 36px; height: 36px;
            background: transparent;
            border-radius: 10px;
            overflow: hidden;
            flex: 0 0 auto;
            box-shadow: var(--shadow-sm);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
        }
        .sidebar-nav { flex: 1; padding: 10px 0; overflow-y: auto; }
        .nav-item {
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px 20px;
            color: #94a3b8;
            text-decoration: none;
            font-size: 14.5px;
            transition: color .18s, background .18s;
            border-right: 3px solid transparent;
        }

        /* ===== الأيقونة داخل مربّع صغير — بتاخد الوهج الملوّن ===== */
        .nav-item i,
        .nav-item .nicon {
            width: 32px; height: 32px;
            flex: 0 0 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            background: rgba(255,255,255,.05);
            color: #94a3b8;
            transition: background .18s, color .18s, box-shadow .22s;
        }
        .nav-item i {
            font-size: 18px;
        }
        .nav-item .nicon {
            box-sizing: border-box;
            padding: 6px;
            overflow: hidden;
            transition: transform .25s var(--ic-spring);
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon {
            transform: scale(1.08);
        }

        /* ===== المرور: وهج خفيف ===== */
        .nav-item:hover { color: #fff; background: rgba(255,255,255,.035); }
        .nav-item:is(:hover, :focus-visible, .ic-finish) i,
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon {
            background: rgba(93,150,208,.20);
            color: #cfe3f7;
            box-shadow: 0 4px 14px rgba(60,120,190,.30);
        }

        /* ===== النشط: الوهج الكامل (نفس إحساس اللوجو) ===== */
        .nav-item.active {
            background: linear-gradient(90deg, rgba(93,150,208,.16) 0%, rgba(93,150,208,.03) 65%, transparent 100%);
            color: #fff;
            font-weight: 600;
            border-right-color: #5d96d0;
        }
        .nav-item.active i,
        .nav-item.active .nicon {
            background: linear-gradient(160deg, #3d8ad4 0%, #1e6fbf 100%);
            color: #fff;
            box-shadow: 0 6px 18px rgba(60,120,190,.45), 0 0 0 1px rgba(255,255,255,.10) inset;
        }

        /* =================================================================
           حكايات الأيقونات — كل موديول بحركة تفاعلية تناسب معناه.
           بتشتغل عند المرور (:hover) والتركيز (:focus-visible) فقط.
           العنصر ساكن تماماً في وضع الراحة أو النشاط.
           ================================================================= */

        /* 1. الإعدادات (ti-settings): الترس بيلف حوالين مركزه (والدايرة اللي جوه ثابتة) */
        @keyframes ni-spin-gear {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-settings .nicon-part-gear {
            animation: ni-spin-gear 1.1s linear infinite;
            transform-box: fill-box;
            transform-origin: center;
        }

        /* 2. استعلام الأسعار (ti-scan): إطار السكانر ثابت، وشرطة أفقية جواه بتنزل وتطلع */
        @keyframes ni-scan-laser {
            0%, 100% { transform: translateY(-2.5px); }
            50%      { transform: translateY(2.5px); }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-scan .nicon-part-laser {
            animation: ni-scan-laser 1.0s var(--ic-ease) infinite;
        }

        /* 3. طلب نواقص (ti-shopping-cart): مربعات صغيرة بتقع جوه العربية ← العربية بتطلع يمين وتختفي ← ترجع من الشمال فاضية */
        @keyframes ni-cart-drive {
            0%, 35%  { transform: translateX(0); opacity: 1; }
            58%      { transform: translateX(28px); opacity: 1; }
            59%      { transform: translateX(28px); opacity: 0; }
            60%      { transform: translateX(-28px); opacity: 0; }
            70%      { transform: translateX(-28px); opacity: 1; }
            100%     { transform: translateX(0); opacity: 1; }
        }
        @keyframes ni-cart-box1 {
            0%        { transform: translateY(-8px); opacity: 0; }
            15%, 35%  { transform: translateY(0); opacity: 1; }
            58%       { transform: translate(28px, 0); opacity: 1; }
            59%, 100% { transform: translateY(-8px); opacity: 0; }
        }
        @keyframes ni-cart-box2 {
            0%, 15%   { transform: translateY(-8px); opacity: 0; }
            30%, 35%  { transform: translateY(0); opacity: 1; }
            58%       { transform: translate(28px, 0); opacity: 1; }
            59%, 100% { transform: translateY(-8px); opacity: 0; }
        }
        .nav-item .nicon-shopping-cart .nicon-part-box1,
        .nav-item .nicon-shopping-cart .nicon-part-box2 {
            opacity: 0;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-shopping-cart .nicon-part-cart {
            animation: ni-cart-drive 1.2s var(--ic-ease) infinite;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-shopping-cart .nicon-part-box1 {
            animation: ni-cart-box1 1.2s var(--ic-spring) infinite;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-shopping-cart .nicon-part-box2 {
            animation: ni-cart-box2 1.2s var(--ic-spring) infinite;
        }

        /* 4. الرئيسية (ti-layout-dashboard): المربعات الأربعة بتنور واحد ورا التاني */
        @keyframes ni-pulse-tile {
            0%, 100% { opacity: 0.3; }
            50%      { opacity: 1; }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-layout-dashboard .nicon-part-tile1 {
            animation: ni-pulse-tile 1.0s var(--ic-ease) infinite 0s;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-layout-dashboard .nicon-part-tile2 {
            animation: ni-pulse-tile 1.0s var(--ic-ease) infinite 0.25s;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-layout-dashboard .nicon-part-tile3 {
            animation: ni-pulse-tile 1.0s var(--ic-ease) infinite 0.5s;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-layout-dashboard .nicon-part-tile4 {
            animation: ni-pulse-tile 1.0s var(--ic-ease) infinite 0.75s;
        }

        /* 5. سكانر الكمبيوتر (ti-device-mobile): الموبايل ثابت وموجتين بيطلعوا من جنبه */
        @keyframes ni-wave-signal {
            0%   { opacity: 0; transform: scale(0.6); }
            50%  { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(1.15); }
        }
        .nav-item .nicon-device-mobile .nicon-part-wave1,
        .nav-item .nicon-device-mobile .nicon-part-wave2 {
            opacity: 0;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-device-mobile .nicon-part-wave1 {
            animation: ni-wave-signal 1.0s var(--ic-ease) infinite;
            transform-box: fill-box;
            transform-origin: left center;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-device-mobile .nicon-part-wave2 {
            animation: ni-wave-signal 1.0s var(--ic-ease) infinite 0.35s;
            transform-box: fill-box;
            transform-origin: left center;
        }

        /* 6. تقفيل الكاشير (ti-lock-dollar): الحلقة بتطلع لفوق وترجع تقفل، وعلامة الدولار بتنبض */
        @keyframes ni-unlock-shackle {
            0%, 100% { transform: translateY(0); }
            40%, 60% { transform: translateY(-2.5px); }
        }
        @keyframes ni-pulse-dollar {
            0%, 100% { transform: scale(1); }
            50%      { transform: scale(1.12); }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-lock-dollar .nicon-part-shackle {
            animation: ni-unlock-shackle 1.1s var(--ic-ease) infinite;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-lock-dollar .nicon-part-dollar {
            animation: ni-pulse-dollar 1.1s var(--ic-spring) infinite;
            transform-box: fill-box;
            transform-origin: center;
        }

        /* 7. العهد (ti-cash): الورقة بتتزحلق يمين وشمال، والدايرة بتلف */
        @keyframes ni-slide-bill {
            0%, 100% { transform: translateX(0); }
            50%      { transform: translateX(2.5px); }
        }
        @keyframes ni-spin-coin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-cash .nicon-part-bill {
            animation: ni-slide-bill 1.1s var(--ic-ease) infinite;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-cash .nicon-part-coin {
            animation: ni-spin-coin 1.1s linear infinite;
            transform-box: fill-box;
            transform-origin: center;
        }

        /* 8. مراجعة المحاسب (ti-user-check): علامة الصح بتترسم بـ stroke-dashoffset */
        @keyframes ni-draw-check {
            0%       { stroke-dashoffset: 14; }
            45%, 80% { stroke-dashoffset: 0; }
            100%     { stroke-dashoffset: 14; }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-user-check .nicon-part-check {
            animation: ni-draw-check 1.0s var(--ic-spring) infinite;
        }

        /* 9. الخزينة وكشف الحساب (ti-building-bank): السقف المثلث بينزل مكانه، والعواميد بتطلع من تحت واحد ورا التاني */
        @keyframes ni-drop-roof {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-2.5px); }
        }
        @keyframes ni-rise-col {
            0%, 100% { transform: scaleY(1); }
            50%      { transform: scaleY(0.2); }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-building-bank .nicon-part-roof {
            animation: ni-drop-roof 1.1s var(--ic-ease) infinite;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-building-bank .nicon-part-col1 {
            animation: ni-rise-col 1.1s var(--ic-spring) infinite 0s;
            transform-box: fill-box;
            transform-origin: bottom center;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-building-bank .nicon-part-col2 {
            animation: ni-rise-col 1.1s var(--ic-spring) infinite 0.18s;
            transform-box: fill-box;
            transform-origin: bottom center;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-building-bank .nicon-part-col3 {
            animation: ni-rise-col 1.1s var(--ic-spring) infinite 0.36s;
            transform-box: fill-box;
            transform-origin: bottom center;
        }

        /* 10. الموارد البشرية (ti-users): الشخص اللي ورا بيطل من ورا الأولاني */
        @keyframes ni-peek-user {
            0%, 100% { transform: translate(0, 0); }
            50%      { transform: translate(2.5px, -1px); }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-users .nicon-part-user-back {
            animation: ni-peek-user 1.0s var(--ic-ease) infinite;
        }

        /* 11. تسجيل الحضور (ti-clock-hour-4): عقرب الدقايق بيلف لفة كاملة، وعقرب الساعات بيتحرك شوية */
        @keyframes ni-spin-minute {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        @keyframes ni-nudge-hour {
            0%, 100% { transform: rotate(0deg); }
            50%      { transform: rotate(20deg); }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-clock-hour-4 .nicon-part-minute {
            animation: ni-spin-minute 1.1s linear infinite;
            transform-box: fill-box;
            transform-origin: bottom center;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-clock-hour-4 .nicon-part-hour {
            animation: ni-nudge-hour 1.1s var(--ic-ease) infinite;
            transform-box: fill-box;
            transform-origin: left bottom;
        }

        /* 12. المهام (ti-inbox): ورقة صغيرة بتنزل من فوق وتدخل الصندوق */
        @keyframes ni-drop-paper {
            0%        { transform: translateY(-3px); opacity: 0; }
            20%       { opacity: 1; }
            70%       { transform: translateY(3px); opacity: 1; }
            85%, 100% { transform: translateY(3px); opacity: 0; }
        }
        .nav-item .nicon-inbox .nicon-part-paper {
            opacity: 0;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-inbox .nicon-part-paper {
            animation: ni-drop-paper 1.0s var(--ic-spring) infinite;
        }

        /* 13. إصدار المهام (ti-send): الطيارة الورق بتطير لفوق يمين وتختفي، وترجع من تحت شمال */
        @keyframes ni-fly-plane {
            0%       { transform: translate(0, 0); opacity: 1; }
            45%      { transform: translate(22px, -22px); opacity: 1; }
            46%      { transform: translate(-22px, 22px); opacity: 0; }
            60%      { transform: translate(-22px, 22px); opacity: 1; }
            100%     { transform: translate(0, 0); opacity: 1; }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-send .nicon-part-plane {
            animation: ni-fly-plane 1.2s var(--ic-ease) infinite;
        }

        /* 14. الموردون (ti-building-store): المظلة اللي فوق بتتهز كأن فيه هوا */
        @keyframes ni-flutter-awning {
            0%, 100% { transform: rotate(0deg) skewX(0deg); }
            25%      { transform: rotate(-2.5deg) skewX(-2deg); }
            75%      { transform: rotate(2.5deg) skewX(2deg); }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-building-store .nicon-part-awning {
            animation: ni-flutter-awning 1.0s var(--ic-ease) infinite;
            transform-box: fill-box;
            transform-origin: top center;
        }

        /* 15. الاستلامات (ti-package-import): السهم بيدخل الصندوق من برّه */
        @keyframes ni-import-arrow {
            0%, 100% { transform: translateX(0); }
            50%      { transform: translateX(-2.5px); }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-package-import .nicon-part-arrow {
            animation: ni-import-arrow 1.0s var(--ic-ease) infinite;
        }

        /* 16. استلام الفواتير (ti-truck): العجلتين بيلفوا والعربية بتهتز وخطوط سرعة ورا */
        @keyframes ni-truck-bounce {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-1px); }
        }
        @keyframes ni-spin-wheel {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        @keyframes ni-speed-lines {
            0%, 100% { opacity: 0.2; transform: translateX(0); }
            50%      { opacity: 1; transform: translateX(-2px); }
        }
        .nav-item .nicon-truck .nicon-part-lines {
            opacity: 0;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-truck .nicon-part-body {
            animation: ni-truck-bounce 0.9s var(--ic-ease) infinite;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-truck .nicon-part-wheel1,
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-truck .nicon-part-wheel2 {
            animation: ni-spin-wheel 0.9s linear infinite;
            transform-box: fill-box;
            transform-origin: center;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-truck .nicon-part-lines {
            animation: ni-speed-lines 0.9s var(--ic-ease) infinite;
        }

        /* 17. الجرد (ti-packages): الصناديق بتتحط فوق بعض واحد ورا التاني */
        @keyframes ni-stack-box {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-2.5px); }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-packages .nicon-part-box-bl {
            animation: ni-stack-box 1.0s var(--ic-spring) infinite 0s;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-packages .nicon-part-box-br {
            animation: ni-stack-box 1.0s var(--ic-spring) infinite 0.2s;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-packages .nicon-part-box-top {
            animation: ni-stack-box 1.0s var(--ic-spring) infinite 0.4s;
        }

        /* 18. تحليل الموسم (ti-calculator): الزراير بتنور واحد ورا التاني كأن حد بيكتب رقم */
        @keyframes ni-press-btn {
            0%, 100% { opacity: 0.35; stroke-width: 2.5; }
            50%      { opacity: 1; stroke-width: 3.5; }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-calculator .nicon-part-btn1 {
            animation: ni-press-btn 1.1s var(--ic-ease) infinite 0s;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-calculator .nicon-part-btn2 {
            animation: ni-press-btn 1.1s var(--ic-ease) infinite 0.18s;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-calculator .nicon-part-btn3 {
            animation: ni-press-btn 1.1s var(--ic-ease) infinite 0.36s;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-calculator .nicon-part-btn4 {
            animation: ni-press-btn 1.1s var(--ic-ease) infinite 0.54s;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-calculator .nicon-part-btn5 {
            animation: ni-press-btn 1.1s var(--ic-ease) infinite 0.72s;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-calculator .nicon-part-btn6 {
            animation: ni-press-btn 1.1s var(--ic-ease) infinite 0.9s;
        }

        /* 19. التقارير (ti-chart-bar): العواميد بتطلع من تحت لطولها واحد ورا التاني */
        @keyframes ni-grow-bar {
            0%, 100% { transform: scaleY(1); }
            50%      { transform: scaleY(0.35); }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-chart-bar .nicon-part-bar1 {
            animation: ni-grow-bar 1.0s var(--ic-spring) infinite 0s;
            transform-box: fill-box;
            transform-origin: bottom center;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-chart-bar .nicon-part-bar2 {
            animation: ni-grow-bar 1.0s var(--ic-spring) infinite 0.2s;
            transform-box: fill-box;
            transform-origin: bottom center;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-chart-bar .nicon-part-bar3 {
            animation: ni-grow-bar 1.0s var(--ic-spring) infinite 0.4s;
            transform-box: fill-box;
            transform-origin: bottom center;
        }

        /* 20. التعريفات (ti-adjustments): المقابض الصغيرة بتتحرك على الخطوط كل واحدة في اتجاه */
        @keyframes ni-slide-knob1 {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(2.5px); }
        }
        @keyframes ni-slide-knob2 {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-2.5px); }
        }
        @keyframes ni-slide-knob3 {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(2.5px); }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-adjustments .nicon-part-knob1 {
            animation: ni-slide-knob1 1.0s var(--ic-ease) infinite;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-adjustments .nicon-part-knob2 {
            animation: ni-slide-knob2 1.0s var(--ic-ease) infinite;
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-adjustments .nicon-part-knob3 {
            animation: ni-slide-knob3 1.0s var(--ic-ease) infinite;
        }

        /* 21. سجل الأخطاء (ti-alert-triangle): علامة التعجب بترمش */
        @keyframes ni-flash-exclamation {
            0%, 100% { opacity: 1; transform: scale(1); }
            50%      { opacity: 0.15; transform: scale(0.85); }
        }
        .nav-item:is(:hover, :focus-visible, .ic-finish) .nicon-alert-triangle .nicon-part-exclamation {
            animation: ni-flash-exclamation 0.9s var(--ic-ease) infinite;
            transform-box: fill-box;
            transform-origin: center;
        }

        /* احترام تفضيل تقليل الحركة — تسكت الأيقونات لو المستخدم مقفل الحركات في نظامه */
        @media (prefers-reduced-motion: reduce) {
            .nav-item i::before,
            .nav-item .nicon,
            .nav-item .nicon *,
            .aicon,
            .aicon * {
                animation: none !important;
                transition: none !important;
            }
        }

        /* =================================================================
           حكايات أيقونات الموقع — بريف ٣٦
           أيقونات العمل التفاعلية (Inline SVG داخل <i>).
           حركة نقية بـ CSS على الهوفر أو التركيز، وic-finish يضمن إكمال اللفة.
           ================================================================= */
        .ti.has-aicon::before { content: none !important; }
        .aicon {
            width: 1em;
            height: 1em;
            display: inline-block;
            vertical-align: -0.15em;
            overflow: hidden;
            transition: transform .25s var(--ic-spring);
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon {
            transform: scale(1.08);
        }

        /* 1. جرس (ti-bell): الجرس بيتمرجح والشرطوطة تتحرك عكسه */
        @keyframes ai-bell-swing {
            0%, 100% { transform: rotate(0deg); }
            20%      { transform: rotate(-12deg); }
            45%      { transform: rotate(10deg); }
            70%      { transform: rotate(-6deg); }
            85%      { transform: rotate(3deg); }
        }
        @keyframes ai-bell-clapper {
            0%, 100% { transform: translateX(0); }
            20%      { transform: translateX(1.5px); }
            45%      { transform: translateX(-1.5px); }
            70%      { transform: translateX(1px); }
            85%      { transform: translateX(-0.5px); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-bell .aicon-part-bell,
        .aicon-bell.aicon-ring-once .aicon-part-bell {
            animation: ai-bell-swing 0.8s var(--ic-ease) 1;
            transform-box: fill-box;
            transform-origin: top center;
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-bell .aicon-part-clapper,
        .aicon-bell.aicon-ring-once .aicon-part-clapper {
            animation: ai-bell-clapper 0.8s var(--ic-ease) 1;
            transform-box: fill-box;
            transform-origin: top center;
        }

        /* 2. سلة المهملات (ti-trash): الغطا بيترفع ويميل وينزل */
        @keyframes ai-trash-lid {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            40%      { transform: translateY(-2.5px) rotate(-10deg); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-trash .aicon-part-lid {
            animation: ai-trash-lid 0.7s var(--ic-spring) 1;
            transform-box: fill-box;
            transform-origin: right bottom;
        }

        /* 3. علامة الصح (ti-check): الصح بيترسم */
        @keyframes ai-check-draw {
            0%   { stroke-dashoffset: 24; }
            100% { stroke-dashoffset: 0; }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-check .aicon-part-check {
            animation: ai-check-draw 0.6s var(--ic-spring) 1;
        }

        /* 4. صح جوه دايرة (ti-circle-check): الدايرة ثابتة والصح بيترسم جواها */
        @keyframes ai-circle-check-draw {
            0%   { stroke-dashoffset: 16; }
            100% { stroke-dashoffset: 0; }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-circle-check .aicon-part-check {
            animation: ai-circle-check-draw 0.6s var(--ic-spring) 1;
        }

        /* 5. زائد (ti-plus): بتلف ٩٠° */
        @keyframes ai-plus-spin {
            0%   { transform: rotate(0deg); }
            100% { transform: rotate(90deg); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-plus .aicon-part-cross {
            animation: ai-plus-spin 0.6s var(--ic-spring) 1;
            transform-box: fill-box;
            transform-origin: center;
        }

        /* 6. إغلاق (ti-x): بتلف ٩٠° وتصغر شوية */
        @keyframes ai-x-turn {
            0%   { transform: rotate(0deg) scale(1); }
            50%  { transform: rotate(45deg) scale(0.88); }
            100% { transform: rotate(90deg) scale(1); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-x .aicon-part-x {
            animation: ai-x-turn 0.6s var(--ic-spring) 1;
            transform-box: fill-box;
            transform-origin: center;
        }

        /* 7. تحميل لأسفل (ti-download): السهم بينزل يدخل الصينية */
        @keyframes ai-download-arrow {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(2.5px); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-download .aicon-part-arrow {
            animation: ai-download-arrow 0.7s var(--ic-spring) 1;
        }

        /* 8. رفع لأعلى (ti-upload): السهم بيطلع من الصينية */
        @keyframes ai-upload-arrow {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-2.5px); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-upload .aicon-part-arrow {
            animation: ai-upload-arrow 0.7s var(--ic-spring) 1;
        }

        /* 9. تحديث ودوران (ti-refresh, ti-rotate): لفة كاملة مرة واحدة */
        @keyframes ai-rotate-spin {
            0%   { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-refresh .aicon-part-arrows,
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-rotate .aicon-part-arrows {
            animation: ai-rotate-spin 0.8s linear 1;
            transform-box: fill-box;
            transform-origin: center;
        }

        /* 10. بحث (ti-search): العدسة بتتحرك حركة دايرية صغيرة كأنها بتدوّر */
        @keyframes ai-search-lens {
            0%, 100% { transform: translate(0, 0); }
            25%      { transform: translate(1.5px, -1.5px); }
            50%      { transform: translate(2px, 1.5px); }
            75%      { transform: translate(-1.5px, 1px); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-search .aicon-part-lens {
            animation: ai-search-lens 0.8s var(--ic-ease) 1;
        }

        /* 11. فلترة (ti-filter): القمع بيضيق ويرجع، ونقطة بتنقط من تحت */
        @keyframes ai-filter-funnel {
            0%, 100% { transform: scale(1); }
            40%      { transform: scale(0.9, 1.05); }
        }
        @keyframes ai-filter-drop {
            0%   { transform: translateY(-2px); opacity: 0; }
            45%  { opacity: 1; }
            100% { transform: translateY(2.5px); opacity: 0; }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-filter .aicon-part-funnel {
            animation: ai-filter-funnel 0.8s var(--ic-ease) 1;
            transform-box: fill-box;
            transform-origin: top center;
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-filter .aicon-part-drop {
            animation: ai-filter-drop 0.8s var(--ic-ease) 1;
        }

        /* 12. تعديل وقلم (ti-edit, ti-pencil): القلم بيتحرك يمين وشمال كأنه بيكتب */
        @keyframes ai-pencil-write {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            25%      { transform: translate(1.5px, -1.5px) rotate(4deg); }
            75%      { transform: translate(-1.5px, 1.5px) rotate(-4deg); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-edit .aicon-part-pencil,
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-pencil .aicon-part-pencil {
            animation: ai-pencil-write 0.8s var(--ic-ease) 1;
            transform-box: fill-box;
            transform-origin: bottom left;
        }

        /* 13. قفل (ti-lock): الحلقة بتطلع لفوق وترجع */
        @keyframes ai-lock-shackle {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-2.5px); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-lock .aicon-part-shackle {
            animation: ai-lock-shackle 0.7s var(--ic-spring) 1;
        }

        /* 14. كاميرا (ti-camera): العدسة بتقفل وتفتح (scale) + فلاش خفيف */
        @keyframes ai-camera-lens {
            0%, 100% { transform: scale(1); }
            50%      { transform: scale(0.75); }
        }
        @keyframes ai-camera-flash {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50%      { opacity: 1; transform: scale(1.15); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-camera .aicon-part-lens {
            animation: ai-camera-lens 0.7s var(--ic-ease) 1;
            transform-box: fill-box;
            transform-origin: center;
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-camera .aicon-part-flash {
            animation: ai-camera-flash 0.7s var(--ic-ease) 1;
            transform-box: fill-box;
            transform-origin: center;
        }

        /* 15. تقويم (ti-calendar): الورقة بتتقلب (rotateX خفيف) */
        @keyframes ai-calendar-flip {
            0%, 100% { transform: perspective(80px) rotateX(0deg); }
            50%      { transform: perspective(80px) rotateX(-20deg); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-calendar .aicon-part-page {
            animation: ai-calendar-flip 0.8s var(--ic-ease) 1;
            transform-box: fill-box;
            transform-origin: top center;
        }

        /* 16. تنبيه (ti-alert-triangle): علامة التعجب بترمش */
        @keyframes ai-alert-flash {
            0%, 100% { opacity: 1; transform: scale(1); }
            50%      { opacity: 0.2; transform: scale(0.9); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-alert-triangle .aicon-part-exclamation {
            animation: ai-alert-flash 0.8s var(--ic-ease) 1;
            transform-box: fill-box;
            transform-origin: center;
        }

        /* 17. إرسال (ti-send): الطيارة بتطير يمين فوق وترجع */
        @keyframes ai-plane-fly {
            0%       { transform: translate(0, 0); opacity: 1; }
            45%      { transform: translate(14px, -14px); opacity: 1; }
            46%      { transform: translate(-14px, 14px); opacity: 0; }
            60%      { transform: translate(-14px, 14px); opacity: 1; }
            100%     { transform: translate(0, 0); opacity: 1; }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-send .aicon-part-plane {
            animation: ai-plane-fly 0.9s var(--ic-ease) 1;
        }

        /* 18. ملف جدول / فاتورة (ti-file-spreadsheet, ti-file-invoice): السطور بتترسم ورا بعض */
        @keyframes ai-line-draw {
            0%   { stroke-dashoffset: 10; }
            100% { stroke-dashoffset: 0; }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-file-spreadsheet .aicon-part-line1,
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-file-invoice .aicon-part-line1 {
            animation: ai-line-draw 0.7s var(--ic-spring) 1 0s;
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-file-spreadsheet .aicon-part-line2,
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-file-invoice .aicon-part-line2 {
            animation: ai-line-draw 0.7s var(--ic-spring) 1 0.15s;
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-file-spreadsheet .aicon-part-line3,
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-file-invoice .aicon-part-line3 {
            animation: ai-line-draw 0.7s var(--ic-spring) 1 0.3s;
        }

        /* 19. رابط (ti-link): الحلقتين بيبعدوا ويقربوا */
        @keyframes ai-link-part2 {
            0%, 100% { transform: translate(0, 0); }
            50%      { transform: translate(1.5px, -1.5px); }
        }
        @keyframes ai-link-part3 {
            0%, 100% { transform: translate(0, 0); }
            50%      { transform: translate(-1.5px, 1.5px); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-link .aicon-part-link2 {
            animation: ai-link-part2 0.7s var(--ic-ease) 1;
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-link .aicon-part-link3 {
            animation: ai-link-part3 0.7s var(--ic-ease) 1;
        }

        /* 20. سهم لأسفل (ti-chevron-down): بينزل ويطلع (نطة) */
        @keyframes ai-chevron-bounce {
            0%, 100% { transform: translateY(0); }
            40%      { transform: translateY(2.5px); }
            70%      { transform: translateY(-1px); }
        }
        :is(a, button, .btn, label, th, [role="button"]):is(:hover, :focus-visible, .ic-finish) .aicon-chevron-down .aicon-part-chevron {
            animation: ai-chevron-bounce 0.6s var(--ic-spring) 1;
        }

        /* نقطة ذهبية صغيرة على العنصر النشط */
        .nav-item.active::after {
            content: '';
            position: absolute;
            left: 18px; top: 50%;
            width: 5px; height: 5px;
            margin-top: -2.5px;
            border-radius: 50%;
            background: #d6af6a;
        }
        .sidebar-footer {
            padding: 16px 20px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }
        .user-box { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
        .user-avatar {
            width: 36px; height: 36px;
            background: var(--purple);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-weight: 600; font-size: 15px;
        }
        .user-info { font-size: 13px; line-height: 1.3; }
        .user-info .name { color: #fff; font-weight: 500; }
        /* 🔴 مكتوب صريح مش `var(--ink-500)`: السايدبار غامق في الوضعين،
           والـink-500 اغمّق في ١٤٤ عشان النص العادي على الخلفيات الفاتحة،
           فنسبته على الشريط نزلت لـ٢٫٩٤. الثابت ده ٦٫١٠ / ٧٫٣٨ (بريف ١٤٤). */
        .user-info .role { color: #94a3b8; font-size: 12px; }
        .btn-logout {
            display: flex; align-items: center; justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 9px;
            background: rgba(255,255,255,0.06);
            color: #94a3b8;
            text-decoration: none;
            border-radius: 8px;
            font-size: 14px;
            transition: background 0.15s;
        }
        .btn-logout:hover { background: rgba(255,255,255,0.12); color: #fff; }
        .btn-logout i { display:inline-block; transform-origin:center; }
        @keyframes ic-out { 0%,100%{transform:translateX(0);} 45%{transform:translateX(-5px);} }
        .btn-logout:hover i { animation: ic-out .55s ease; }
        /* ===== المحتوى الرئيسي ===== */
        .main { flex: 1; margin-right: 250px; min-width: 0; }
        .topbar {
            background: var(--surface);
            padding: 15px 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--line);
            position: sticky; top: 0; z-index: 50;
        }
        .topbar h2 {
            font-size: 18px;
            color: var(--ink-900);
            font-weight: 600;
            letter-spacing: -.015em;
        }
        /* الجرس والإشعارات */
        .notif-wrap { position: relative; }
        .notif-bell { position: relative; background: var(--accent-soft); border: none; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; color: var(--accent-text); font-size: 20px; display: flex; align-items: center; justify-content: center; }
        .notif-bell:hover { background: var(--line); }
        .notif-badge { position: absolute; top: -4px; left: -4px; background: var(--neg-fill); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
        .notif-panel { display: none; position: absolute; top: 52px; left: 0; width: 340px; max-width: 90vw; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); z-index: 100; overflow: hidden; }
        .notif-panel.open { display: block; }
        .notif-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink-900); }
        .notif-mark { font-size: 12px; color: var(--accent-text); text-decoration: none; font-weight: 400; }
        .notif-list { max-height: 400px; overflow-y: auto; }
        .notif-item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: inherit; }
        .notif-item:hover { background: var(--line-soft); }
        .notif-item.unread { background: var(--accent-soft); }
        .notif-item.unread .ni-title { font-weight: 700; }
        .ni-title { font-size: 14px; color: var(--ink-900); }
        .ni-body { font-size: 13px; color: var(--ink-500); margin-top: 3px; }
        .ni-time { font-size: 11px; color: var(--ink-400); margin-top: 4px; }
        .notif-empty { text-align: center; color: var(--ink-400); padding: 30px; font-size: 14px; }

        /* ===== سلايدر الوضع الليلي ===== */
        /* 🔴 النافبار `justify-content: space-between` وعنده تلات عناصر
           (العنوان · السلايدر · الجرس). من غير الهامش التلقائي ده السلايدر
           بيقع في **نص** الشريط بدل ما يبقى جنب الجرس. */
        .theme-toggle { background:none; border:none; padding:0; cursor:pointer; display:flex; align-items:center; margin-inline-start:auto; margin-inline-end:12px; }
        .tt-track {
            display:block; position:relative;
            width:46px; height:26px; border-radius:99px;
            background: var(--line-soft); border:1px solid var(--line);
            transition: background .2s, border-color .2s;
        }
        .tt-knob {
            position:absolute; top:2px; right:2px;
            width:20px; height:20px; border-radius:50%;
            background: var(--surface); box-shadow: var(--shadow-sm);
            display:flex; align-items:center; justify-content:center;
            font-size:12px; color: var(--ink-400);
            transition: transform .2s, color .2s;
        }
        :root[data-theme="dark"] .tt-track { background: var(--accent); border-color: var(--accent); }
        /* الزرار على اليمين في الوضع الفاتح، وبيمشي شمال في الليلي.
           translateX فيزيائي مش منطقي — السالب شمال حتى في RTL. */
        :root[data-theme="dark"] .tt-knob { transform: translateX(-20px); color: var(--accent-text); }

        /* ===== أيقونة السلايدر: شمس في الفاتح ↔ هلال في الليلي (بريف ٤٩) =====
           الـSVG جوّه header.php. الشكل كله بـtransform بس (مش r ولا cx) عشان
           يتحرّك ناعم في كل المتصفحات:
             - الشمس: القرص متصغّر (scale .62) · القرص القاضم برّه (translate) · الشعاعات ظاهرة
             - الهلال: القرص كامل · القاضم داخل عليه · الشعاعات منكمشة ومخفية
             - الأيقونة كلها بتلف ٣٦٠° في نفس مدة مشي الزرار (.45s) — والعكس بيلف راجع */
        .tt-knob { color: var(--warn); transition: transform .45s cubic-bezier(.4,0,.2,1), color .45s; }
        .tt-sm { width: 14px; height: 14px; display: block; overflow: visible;
                 transition: transform .45s cubic-bezier(.4,0,.2,1); }
        .tt-sm-core, .tt-sm-bite, .tt-sm-rays { transform-box: fill-box; transform-origin: center;
                 transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .3s; }
        .tt-sm-core { transform: scale(.62); }
        .tt-sm-bite { transform: translate(11px, -11px); }
        .tt-sm-rays { transform: scale(1) rotate(0deg); opacity: 1; }
        :root[data-theme="dark"] .tt-sm      { transform: rotate(360deg); }
        :root[data-theme="dark"] .tt-sm-core { transform: scale(1); }
        :root[data-theme="dark"] .tt-sm-bite { transform: translate(0, 0); }
        :root[data-theme="dark"] .tt-sm-rays { transform: scale(.4) rotate(-45deg); opacity: 0; }
        @media (prefers-reduced-motion: reduce) {
            .tt-knob, .tt-sm, .tt-sm-core, .tt-sm-bite, .tt-sm-rays { transition: none; }
        }
        .topbar .menu-toggle {
            display: none;
            background: none; border: none;
            font-size: 24px; color: var(--accent-text);
            cursor: pointer;
        }
        .content { padding: 24px; }
        /* ===== بطاقات عامة ===== */
        .card {
            background: var(--surface);
            border-radius: var(--r-lg);
            padding: 22px;
            border: 1px solid var(--line);
            box-shadow: var(--shadow-sm);
        }
        /* ===== سلايدر الجداول (أفقي + رأسي، مشترك لكل الصفحات) ===== */
        .table-scroll {
            width: 100%;
            max-height: 72vh;               /* يتمدّد مع الشاشة بدل ارتفاع ثابت بيقصّ */
            overflow: auto;                 /* أفقي + رأسي معاً */
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: var(--ink-300) transparent;
            border-radius: 8px;
        }
        .table-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
        .table-scroll::-webkit-scrollbar-track { background: var(--line-soft); border-radius: 8px; }
        .table-scroll::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 8px; }
        .table-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }
        .table-scroll table { min-width: max-content; }
        /* الرأس يفضل ثابت فوق أثناء التمرير الرأسي */
        .table-scroll thead th {
            position: sticky;
            top: 0;
            z-index: 5;
            background: var(--surface);
            box-shadow: 0 1px 0 var(--line);
        }
        /* =================================================================
           طبقة الهرمية البصرية — بتمسك الكروت والأرقام في كل الشاشات.
           الفكرة: الرقم الكبير هو اللي بيتقري الأول، واللابل يفضل هادي.
           ================================================================= */

        /* كروت الأرقام (الداشبورد: الخزائن والملخّص) */
        .tre-box, .sum-box, .bars-card, .shifts-card {
            background: var(--surface) !important;
            border: 1px solid var(--line);
            border-radius: var(--r-lg) !important;
            box-shadow: var(--shadow-sm) !important;
            transition: box-shadow .18s, transform .18s;
        }
        .tre-box:hover, .sum-box:hover { box-shadow: var(--shadow); }

        /* اللابل: صغير وهادي وحروفه متباعدة شوية */
        .tre-box .tre-top, .sum-box .l {
            font-size: 12px !important;
            color: var(--ink-500) !important;
            letter-spacing: .02em;
            font-weight: 500;
        }

        /* الرقم: هو البطل — أكبر وأتقل وحروفه متقاربة */
        .tre-box .tre-val, .sum-box .v {
            font-weight: 700 !important;
            letter-spacing: -.03em;
            line-height: 1.05;
            font-variant-numeric: tabular-nums;
        }
        /* clamp: كارت الخزنة ممكن يوصل ١٥٠px ورقم زي 93,086.10 بـ27px كان بيلزق في حرفه (٢٣ سبتمبر) */
        .tre-box .tre-val { font-size: clamp(19px, 1.6vw, 27px) !important; }
        .sum-box .v       { font-size: 29px !important; }

        /* الكارت الرئيسي: أغمق وأوضح — ده أهم رقم في الشاشة */
        .tre-box.main {
            background: var(--ink-900) !important;
            border: none !important;
            color: #fff;
        }
        /* 🔴 الكارت ده **مش** بياخد `--fill-strong` زي الزراير. ده كارت
           كبير، ولو بقى فاتح في الوضع الليلي هيبقى بلوك وهج في نص الشاشة.
           فبياخد الأزرق بدل ما ينعكس — بيفضل «أهم رقم في الشاشة» من غير
           ما يعمي، والكتابة البيضا اللي تحت لسه معدّية AA (٥.١٤). */
        :root[data-theme="dark"] .tre-box.main { background: var(--accent) !important; }
        .tre-box.main .tre-top { color: rgba(255,255,255,.62) !important; }
        .tre-box.main .tre-val { color: #fff !important; font-size: 34px !important; }
        .tre-box.main .tre-cur { color: rgba(255,255,255,.5) !important; }

        /* أشرطة النسب: أنحف وأنضف */
        .bar-track {
            height: 7px !important;
            background: var(--line-soft) !important;
            border: none !important;
            border-radius: 99px !important;
        }
        .bar-fill { border-radius: 99px !important; }

        /* عناوين الأقسام: خط علوي رفيع بدل الغمق الزيادة */
        .section-title, .sec-label {
            letter-spacing: -.01em;
        }

        /* الأزرار والفلاتر */
        .period-btn {
            background: var(--surface) !important;
            border: 1px solid var(--line) !important;
            color: var(--ink-700) !important;
            border-radius: var(--r) !important;
            transition: border-color .15s, color .15s;
        }
        .period-btn:hover { border-color: var(--ink-300) !important; }
        .period-btn.active {
            background: var(--fill-strong) !important;
            border-color: var(--fill-strong) !important;
            color: var(--fill-strong-fg) !important;
        }

        /* الشارات: خفيفة ومقروءة */
        .badge, .st-badge {
            font-weight: 600 !important;
            letter-spacing: .01em;
            border-radius: 6px !important;
        }

        /* =================================================================
           إيقاف الأصفر بتاع autofill في كروم.
           من غير ده الخانات بتطلع صفرا فاقع وتكسر الشكل تمامًا.
           ================================================================= */
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        textarea:-webkit-autofill,
        select:-webkit-autofill {
            -webkit-text-fill-color: var(--ink-800) !important;
            -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
            box-shadow: 0 0 0 1000px var(--surface) inset !important;
            caret-color: var(--ink-800);
            transition: background-color 9999s ease-out 0s;
        }

        /* ===== خانات الإدخال: شكل موحّد ===== */
        input[type="text"], input[type="number"], input[type="password"],
        input[type="date"], input[type="time"], input[type="month"],
        input[type="search"], input[type="tel"], select, textarea {
            font-family: inherit;
            font-size: 14px;
            color: var(--ink-800);
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--r-sm);
            transition: border-color .15s, box-shadow .15s;
        }
        input:focus, select:focus, textarea:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-ring);
            outline: none;
        }
        input::placeholder, textarea::placeholder { color: var(--ink-400); }

        /* =================================================================
           تهدئة التابات: التاب النشط كان مصمت بلون فاقع في كل شاشة.
           البديل: خط سفلي واضح + نص غامق — أهدى وأدق.
           ================================================================= */
        .tab, .tab-btn {
            background: transparent !important;
            border: none !important;
            border-bottom: 2px solid transparent !important;
            border-radius: 0 !important;
            color: var(--ink-500) !important;
            font-weight: 500;
            padding: 10px 16px !important;
            transition: color .15s, border-color .15s;
        }
        .tab:hover, .tab-btn:hover { color: var(--ink-800) !important; }
        .tab.active, .tab-btn.active {
            background: transparent !important;
            color: var(--ink-900) !important;
            font-weight: 600;
            border-bottom-color: var(--accent) !important;
        }

        /* ===== الجداول: هرمية أوضح =====
           الصف بيتلوّن عند المرور، والأرقام بتاخد وزن أعلى من النص. */
        tbody tr { transition: background .12s; }
        tbody tr:hover { background: var(--line-soft); }
        thead th {
            font-size: 12px !important;
            font-weight: 600 !important;
            color: var(--ink-500) !important;
            letter-spacing: .02em;
        }

        /* ===== الأزرار ===== */
        .btn, button.btn, a.btn {
            border-radius: var(--r-sm);
            font-family: inherit;
            font-weight: 500;
            transition: background .15s, border-color .15s, opacity .15s;
        }
        .btn:hover { opacity: .92; }

        /* ===== الشارات: هادية ===== */
        .badge, .st-badge, .status-badge {
            font-weight: 600 !important;
            font-size: 11.5px !important;
            border-radius: 5px !important;
            padding: 3px 9px !important;
            letter-spacing: .01em;
        }

        /* =================================================================
           حماية من التجاوز الأفقي على الموبايل.
           من غيرها أي عنصر عريض (جدول/صف flex) بيدفع الصفحة كلها
           وتظهر مزاحة زي ما حصل في استعلام الأسعار.
           ================================================================= */
        html, body { max-width: 100%; overflow-x: hidden; }
        .content { max-width: 100%; }
        .content img, .content video, .content canvas { max-width: 100%; height: auto; }

        /* الجداول العريضة: تتمرّر لوحدها بدل ما تكسر الصفحة */
        @media (max-width: 768px) {
            .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .card table { min-width: max-content; }
        }

        /* ===== زر الرجوع =====
           كان خلفيته نفس لون الصفحة فكان شبه مختفي.
           دلوقتي: أبيض بحدود، وعند المرور بيتملي بلون الموقع. */
        .btn-back {
            background: var(--surface) !important;
            color: var(--ink-700) !important;
            border: 1px solid var(--line) !important;
            box-shadow: var(--shadow-sm);
            margin-bottom: 16px;
            transition: background .16s, color .16s, border-color .16s, box-shadow .16s;
        }
        .btn-back:hover {
            background: var(--accent) !important;
            color: #fff !important;
            border-color: var(--accent) !important;
            box-shadow: 0 4px 14px var(--accent-ring);
            opacity: 1 !important;
        }
        .btn-back i { transition: transform .18s; }
        .btn-back:hover i { transform: translateX(4px); }

        /* ===== موبايل ===== */
        .overlay {
            display: none;
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.4);
            z-index: 99;
        }
        @media (max-width: 1024px) {
            .sidebar { transform: translateX(100%); box-shadow: -4px 0 20px rgba(0,0,0,0.15); }
            .sidebar.open { transform: translateX(0); }
            .main { margin-right: 0 !important; width: 100%; }
            .topbar .menu-toggle { display: block; }
            .overlay.show { display: block; }
            .content { padding: 16px; }
        }
        @media (max-width: 560px) {
            .content { padding: 12px; }
            .card { padding: 16px; }
            .topbar { padding: 14px 16px; }
        }
        /* ===== رسالة الفلاش الموحدة (متاحة لكل الصفحات) =====
           الصيغة المعتمدة: <div class="flash success|error">
           بعض الصفحات بتكرر التعريف محليًا — مفيش مشكلة، نفس القيم. */
        .flash { padding:12px 16px; border-radius:10px; margin-bottom:18px; font-size:14px; }
        .flash.success { background:var(--pos-soft); color:var(--pos); }
        .flash.error   { background:var(--neg-soft); color:var(--neg); }

/* =====================================================================
   منتقي القيود الشجري (acctree.js) — 2026-08-22
   بديل الـ<select> المسطّح اللي كان بيعرض المسار كنص طويل.
   متحطّة هنا مش جوه الصفحات عشان الخمس شاشات تشاركها ويتكاش مرة واحدة.
   ===================================================================== */
.act { position:relative; }
.act-btn {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:10px 12px; border:1.5px solid var(--line); border-radius:9px;
    background:var(--line-soft); font-size:14px; font-family:inherit;
    cursor:pointer; text-align:right; color:var(--ink-800);
}
.act-btn:hover { border-color:var(--accent); }
.act-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.act-label.act-empty { color:var(--ink-400); }
.act-caret { color:var(--ink-400); font-size:11px; flex-shrink:0; }

.act-pop {
    position:absolute; z-index:60; top:calc(100% + 4px); right:0; left:0;
    background:var(--surface); border:1.5px solid var(--line); border-radius:11px;
    box-shadow:var(--shadow-lg); overflow:hidden;
}
.act-head { display:flex; gap:6px; padding:8px; border-bottom:1px solid var(--line); }
.act-search {
    flex:1; padding:7px 10px; border:1.5px solid var(--line); border-radius:8px;
    font-size:13px; font-family:inherit; background:var(--line-soft);
}
.act-search:focus { outline:none; border-color:var(--accent); background:var(--surface); }
.act-clear {
    padding:7px 11px; border:none; border-radius:8px; cursor:pointer;
    background:var(--line-soft); color:var(--ink-600); font-size:12px; font-family:inherit;
}
.act-clear:hover { background:var(--neg-soft); color:var(--neg); }

.act-body, .act-results { max-height:260px; overflow-y:auto; padding:4px 0; }
.act-row {
    display:flex; align-items:center; gap:7px; padding:7px 8px;
    cursor:pointer; font-size:13px; color:var(--ink-800);
}
.act-row:hover { background:var(--bg); }
.act-arrow { width:13px; flex-shrink:0; color:var(--accent-text); font-size:10px; }
.act-dot   { width:13px; flex-shrink:0; }
.act-dot::before {
    content:''; display:block; width:4px; height:4px; border-radius:50%;
    background:var(--ink-300); margin:0 4px;
}
.act-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.act-row.has-kids > .act-name { font-weight:600; color:var(--ink-900); }
.act-pick {
    opacity:0; border:none; background:var(--accent-soft); color:var(--accent-hover);
    font-size:11px; font-family:inherit; padding:2px 9px; border-radius:20px;
    cursor:pointer; flex-shrink:0;
}
.act-row:hover .act-pick { opacity:1; }
.act-pick:hover { background:var(--accent); color:#fff; }
.act-none { padding:18px; text-align:center; color:var(--ink-400); font-size:13px; }

/* =====================================================================
   الأرقام جوه نص عربي — منع انقلاب الإشارة
   ---------------------------------------------------------------
   🔴 المشكلة: علامة «−» حرف محايد. جوه فقرة RTL الخوارزمية بتحطها
      في آخر الرن، فـ«-205,434» بتتعرض «205,434-» — رقم سالب شكله
      موجب في شاشة أرصدة خزائن.
   الحل: العنصر اللي فيه الرقم يبقى LTR ومعزول عن الفقرة اللي حواليه.
      `isolate` عشان مايأثرش على النص اللي جنبه.
      المحاذاة بتفضل يمين عشان الشكل مايتغيرش.

   🔴 القاعدة دي **للعناصر اللي جوّاها رقم لوحده وبس**.
      العنصر اللي جوّاه رقم + وحدة عملة (زي `.tre-val` و`.sc-value`)
      **ممنوع يتحط هنا**: `direction: ltr` بيقلب ترتيب الاتنين فوحدة
      العملة بتنطّ من شمال الرقم ليمينه. دول بيتحلّوا بـ`ltr_out()`
      اللي بتعزل **الرقم نفسه** وتسيب الكارت عربي زي ما هو.
      وعشان كده `.amt-debit` مقيّدة بـ`span` — نفس الكلاس بيتحط كمان
      على كارت فيه وحدة عملة.
   ===================================================================== */
.diff-pos, .diff-neg,
span.amt-debit, span.amt-credit,
.num-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

/* ===== نظام التصميم ٢ب — بوب أب · توست · تحميل · جدول فاضي (بريف ٤٤) ===== */

/* قفل سكرول الصفحة أثناء فتح الحوار */
html.fg-dlg-open {
    overflow: hidden;
}

/* خلفية الحوار المعتمة */
.fg-dlg-bg {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(30, 27, 75, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* صندوق الحوار */
.fg-dlg {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    width: min(92vw, 420px);
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    box-sizing: border-box;
}

.fg-dlg-title {
    margin: 0 0 12px 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink-900);
}

.fg-dlg-msg {
    margin: 0 0 20px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    white-space: pre-line;
    word-break: break-word;
}

.fg-dlg-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.fg-dlg-btn {
    flex: 1;
    min-width: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: none;
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, filter .15s ease;
}

.fg-dlg-btn:focus-visible {
    outline: 2px solid var(--accent-ring);
    outline-offset: 2px;
}

.fg-dlg-ok {
    background: var(--accent);
    color: #fff;
}

.fg-dlg-ok:is(:hover, :focus-visible) {
    background: var(--accent-hover);
    color: #fff;
}

.fg-dlg-cancel {
    background: var(--line-soft);
    color: var(--ink-700);
}

.fg-dlg-cancel:is(:hover, :focus-visible) {
    background: var(--line);
    color: var(--ink-700);
}

.fg-dlg-ok.fg-dlg-danger {
    background: var(--neg-fill);
    color: #fff;
}

.fg-dlg-ok.fg-dlg-danger:is(:hover, :focus-visible) {
    background: var(--neg-fill);
    color: #fff;
    filter: brightness(.92);
}

/* حاوية التوستات العائمة */
.fg-toasts {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    inset-inline: 0;
    margin-inline: auto;
    width: min(92vw, 420px);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

/* عنصر التوست */
.fg-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    box-sizing: border-box;
    animation: fgToastIn .2s ease-out forwards;
    transition: opacity .2s ease, transform .2s ease;
}

.fg-toast.fg-toast-closing {
    opacity: 0;
    transform: translateY(8px);
}

@keyframes fgToastIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.fg-toast-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.fg-toast-text {
    flex: 1;
    word-break: break-word;
    line-height: 1.45;
}

.fg-toast-x {
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    opacity: .8;
    color: inherit;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s ease;
}

.fg-toast-x:is(:hover, :focus-visible) {
    opacity: 1;
    color: inherit;
}

/* أنواع التوست */
.fg-toast-ok {
    background: var(--pos-fill);
    color: #fff;
}

.fg-toast-err {
    background: var(--neg-fill);
    color: #fff;
}

.fg-toast-warn {
    background: var(--warn-fill);
    color: #fff;
}

/* حالة التحميل */
.fg-busy {
    pointer-events: none;
    opacity: .85;
    cursor: progress;
}

/* جدول فاضي موحّد
   استعمال: <td colspan="N" class="fg-empty"><i class="ti ti-inbox"></i> مفيش …</td> */
.fg-empty {
    text-align: center;
    color: var(--ink-400);
    padding: 24px;
    font-size: 14px;
}

.fg-empty .ti {
    display: block;
    font-size: 28px;
    margin: 0 auto 8px;
    color: var(--ink-400);
}

/* =====================================================================
   مكوّن الجدول الموحّد للموقع كله (.ftable) وشارات الحالة (.fchip)
   بريف ١٠٣ — استخدام التوكنات فقط ومطابقة الوضعين الفاتح والليلي
   ===================================================================== */
.ftable-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow-x: auto;
    margin-bottom: var(--sp-6);
}

.ftable {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.ftable th {
    background: var(--bg);
    color: var(--ink-600);
    font-weight: 600;
    padding: 10px 14px;
    text-align: right;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.ftable td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-800);
}

.ftable tr:hover {
    background: var(--line-soft);
}

.ftable .num,
.ftable th.num {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: center;
    white-space: nowrap;
}

.ftable td.name {
    font-weight: 600;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftable td.dim {
    color: var(--ink-500);
}

/* شارات الحالة الموحّدة (.fchip) */
.fchip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.fchip-neg  { background: var(--neg-soft); color: var(--neg); }
.fchip-warn { background: var(--warn-soft); color: var(--warn); }
.fchip-pos  { background: var(--pos-soft); color: var(--pos); }
.fchip-mute { background: var(--line-soft); color: var(--ink-600); }

/* =====================================================================
 * مكتبة الواجهة الموحّدة — بريف ٢٣٦
 * المرجع البصري: finance.php · treasury.php · invoices.php.
 * أي صفحة جديدة تستخدم دول بدل ما تعرّف شكل محلي للخانات والكروت.
 * ===================================================================== */
.ffield { display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; }
.ffield > label {
    color:var(--ink-700); font-size:var(--fs-base); font-weight:500;
}
label.ffield { color:var(--ink-700); font-size:var(--fs-base); font-weight:500; }
.finput, .fselect, .ftextarea {
    width:100%; min-height:40px; padding:10px 12px;
    border:1.5px solid var(--line); border-radius:var(--r-md);
    background:var(--line-soft); color:var(--ink-800);
    font:inherit; font-size:var(--fs-md);
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ftextarea { min-height:88px; resize:vertical; }
.finput-sm { min-height:34px; padding:7px 10px; font-size:var(--fs-base); }
.finput:focus, .fselect:focus, .ftextarea:focus {
    outline:none; border-color:var(--accent-text); background:var(--surface);
    box-shadow:0 0 0 3px var(--accent-ring);
}
.finput:is(:disabled, [readonly]),
.fselect:is(:disabled, [readonly]),
.ftextarea:is(:disabled, [readonly]) {
    background:var(--bg); color:var(--ink-500); cursor:not-allowed; opacity:.8;
}
.finput.is-invalid, .fselect.is-invalid, .ftextarea.is-invalid {
    border-color:var(--neg); background:var(--neg-soft);
}
.ffield-err { color:var(--neg); font-size:var(--fs-xs); }
.finput.num { text-align:center; font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

/* الفورم الأفقي (.form-inline): الخانة بعرضها الطبيعي زي ما كانت قبل المكتبة،
   والـ.fld اللي واخد flex بيمدّها. من غير ده .finput (width:100%) بتاخد السطر كله. */
.form-inline { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
.form-inline .fld { display:flex; flex-direction:column; gap:4px; }
.form-inline .finput, .form-inline .fselect { width:auto; }

.fgrid { display:grid; gap:var(--sp-4); align-items:end; }
.fgrid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.fgrid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.fgrid-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }

.fcard {
    background:var(--surface); border:1px solid var(--line-soft);
    border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--shadow-sm);
}
.fcard-head {
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--sp-3); margin-bottom:var(--sp-4);
}
.fcard-title { margin:0; color:var(--ink-900); font-size:var(--fs-lg); font-weight:600; }
.fcard-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); }

.ftabs { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.ftab {
    display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
    min-height:36px; padding:8px 14px; border:1px solid var(--line);
    border-radius:var(--r-sm); background:var(--surface); color:var(--ink-600);
    font:inherit; font-size:var(--fs-base); font-weight:600;
    text-decoration:none; cursor:pointer;
}
.ftab:is(:hover, :focus-visible) { border-color:var(--accent-text); color:var(--accent-text); }
.ftab:is(.is-active, .active) { border-color:var(--accent); background:var(--accent); color:#fff; }
.ftab:is(.is-active, .active):is(:hover, :focus-visible) { background:var(--accent-hover); color:#fff; }

@media (max-width: 768px) {
    .ftabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ftab { flex-shrink: 0; white-space: nowrap; }
}

.falert, .alert {
    display:flex; align-items:flex-start; gap:var(--sp-2);
    padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4);
    border:1px solid var(--line); border-radius:var(--r-md);
    background:var(--line-soft); color:var(--ink-800);
    font-size:var(--fs-md); line-height:1.7;
}
.falert > .ti, .alert > .ti { flex:0 0 auto; margin-top:3px; font-size:var(--fs-lg); }
.falert-info, .alert-info { border-color:var(--accent-text); background:var(--accent-soft); color:var(--accent-text); }
.falert-warn, .alert-warning { border-color:var(--warn); background:var(--warn-soft); color:var(--warn); }
.falert-neg, .alert-danger { border-color:var(--neg); background:var(--neg-soft); color:var(--neg); }
.falert-pos, .alert-success { border-color:var(--pos); background:var(--pos-soft); color:var(--pos); }

.ffilters {
    display:flex; flex-direction:row; align-items:end; flex-wrap:wrap; gap:var(--sp-3);
    width:100%;
    padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4);
    border:1px solid var(--line); border-radius:var(--r-md); background:var(--line-soft);
}
.ffilters > .ffield { flex:1 1 160px; }
.ffilters > :is(.finput, .fselect, .ftextarea) { flex:1 1 140px; width:auto; }
.ffilters > .btn { flex:0 0 auto; }

.fcode {
    direction:ltr; unicode-bidi:isolate; text-align:left;
    margin:var(--sp-4) 0 0; padding:var(--sp-3) var(--sp-4);
    border:1px solid var(--line); border-radius:var(--r-sm);
    background:var(--surface-soft); color:var(--ink-800);
    overflow:auto; white-space:pre-wrap;
}
.fcode > code { direction:ltr; unicode-bidi:isolate; }

.fpage-head {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:var(--sp-4); margin-bottom:var(--sp-5);
}
.fpage-title { margin:0; color:var(--ink-900); font-size:var(--fs-2xl); font-weight:700; }
.fpage-sub { margin-top:var(--sp-1); color:var(--ink-500); font-size:var(--fs-base); }
.fpage-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); }

.fkpis {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    gap:var(--sp-3); margin-bottom:var(--sp-4);
}
.fkpi {
    min-width:0; padding:var(--sp-3) var(--sp-4);
    border:1.5px solid var(--line); border-radius:var(--r-md);
    background:var(--line-soft); color:var(--ink-800);
}
.fkpi > span { display:block; margin-bottom:var(--sp-1); color:var(--ink-500); font-size:var(--fs-xs); }
.fkpi > strong { color:var(--ink-900); font-size:var(--fs-xl); font-variant-numeric:tabular-nums; }

@media (max-width:640px) {
    .fgrid-2, .fgrid-3, .fgrid-4 { grid-template-columns:1fr; }
    .fpage-head, .fcard-head { align-items:stretch; flex-direction:column; }
}