/* ============================================================================
   EazyGo — ثيم لوحة التحكم الجديد (تصميم العميل 2026-09-10)
   ----------------------------------------------------------------------------
   - تغيير شكل فقط: ألوان · مسافات · حواف · ظلال · حركة. لا يمسّ منطقًا ولا بيانات.
   - يُحمَّل بعد eazygo-ui.css ويعلو عليه في الوضع النهاري وحده.
   - الأصل: كل قاعدة تبدأ بـ html:not(.dark) (قاعدة المشروع: لا يُمسّ الليلي).
     ثم طلب المالك صراحةً (2026-09-10) أن يأخذ الليلي الهوية نفسها ⇒ الأجزاء التي تصلح
     للخلفية الداكنة كما هي تبدأ بـ html:is(.dark, :not(.dark)) (نفس التخصيص ويطابق
     الوضعين)، وللّيلي قسم خاص به (19). الحقول والجداول والشبكة تبقى على ألوان Filament
     الليلية المصمَّمة للخلفية الداكنة.
   - لم نحذف شيئًا من eazygo-ui.css.
   - الرجوع للشكل القديم = حذف سطر تحميل هذا الملف من AdminPanelProvider.
   - اتجاهات منطقية فقط (inline-start/end) لأن اللوحة عربية RTL وإنجليزية LTR.
   ============================================================================ */


/* ============================ 1) الرموز (Tokens) ============================ */
/* ألوان التصميم + إعادة تعريف متغيّرات eazygo-ui.css نفسها: كل ما بُني عليها
   (تقارير، شبكة الأسعار، إشعارات، تلميحات…) يأخذ الهوية الجديدة دفعة واحدة،
   والليلي يبقى على قيم :root الأصلية لأن هذا المُحدِّد لا يطابقه. */
:root:root {
    --ezt-shell-1: #0f172a;
    --ezt-shell-2: #1e293b;
    --ezt-shell-3: #0f2744;
    --ezt-blue: #2563eb;
    --ezt-blue-2: #1d4ed8;
    --ezt-navy: #1e3c72;
    --ezt-navy-2: #2a5298;
    --ezt-ink: #0f172a;
    --ezt-text: #1e293b;
    --ezt-body: #334155;
    --ezt-muted: #64748b;
    --ezt-faint: #94a3b8;
    --ezt-line: #e2e8f0;
    --ezt-line-2: #cbd5e1;
    --ezt-grid: #94a3b8;
    --ezt-surface: #ffffff;
    --ezt-surface-2: #f8fafc;
    --ezt-surface-3: #f1f5f9;
    --ezt-row-hover: #e0f2fe;
    --ezt-on-navy: #e2e8f0;
    --ezt-on-navy-muted: #94a3b8;
    --ezt-glass: rgba(255, 255, 255, .06);
    --ezt-glass-line: rgba(148, 163, 184, .3);
    --ezt-grad-primary: linear-gradient(135deg, #1e3c72 0%, #2563eb 100%);
    --ezt-grad-active: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --ezt-shadow-card: 0 20px 50px rgba(15, 23, 42, .18), inset 0 0 0 1px rgba(255, 255, 255, .6);
    --ezt-shadow-soft: 0 4px 24px rgba(15, 23, 42, .06);
    --ezt-ring: 0 0 0 3px rgba(37, 99, 235, .18);
    --ezt-sidebar-gap: 14px;

}

/* متغيّرات eazygo-ui.css بقيم الهوية الجديدة — نهاري فقط: قواعد الليلي في eazygo-ui.css
   لها ألوانها الخاصة المختبَرة. */
html:not(.dark) {
    --ez-primary: #2563eb;
    --ez-primary-dark: #1e3c72;
    --ez-navy: #1e3c72;
    --ez-navy-deep: #0f172a;
    --ez-ink: #0f172a;
    --ez-body: #334155;
    --ez-muted: #64748b;
    --ez-canvas: #f8fafc;
    --ez-surface: #ffffff;
    --ez-hairline: #e2e8f0;
    --ez-card-shadow: 0 14px 32px rgba(15, 23, 42, .12);
}

/* لون Filament الأساسي والحواف: للوضعين. :root:root يعلو على :root الذي يطبعه Filament. */
:root:root {

    /* لون Filament الأساسي: من التيل إلى أزرق التصميم (سلّم Tailwind blue).
       هنا لا في AdminPanelProvider عمدًا — تغييره هناك يلوّن الليلي أيضًا. */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    --primary-950: #172554;
    --info-50: #eff6ff;
    --info-100: #dbeafe;
    --info-200: #bfdbfe;
    --info-300: #93c5fd;
    --info-400: #60a5fa;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    --info-700: #1d4ed8;
    --info-800: #1e40af;
    --info-900: #1e3a8a;
    --info-950: #172554;

    /* حواف التصميم أنعم من القيم المصغّرة في eazygo-ui.css (هناك !important). */
    --radius-md: .5rem !important;
    --radius-lg: .625rem !important;
    --radius-xl: .875rem !important;
}


/* ============================ 2) الغلاف الكحلي ============================ */
/* خلفية الصفحة كحلي متدرّج كما في التصميم؛ eazygo-ui.css يفرض رماديًا فاتحًا
   بـ!important على .fi-body و.fi-main فنعلو عليه بالمثل. */
/* التدرّج على html لا على body: لو رُسم على body (ولـhtml خلفية) لغطّى طبقة الهالات
   ذات z-index:-1، لأن خلفيات الكتل تُرسم بعد الطبقات السالبة. */
/* بلا `fixed`: التدرّج الثابت يُرسم بطول الشاشة وحده فينقطع الكحلي تحت الصفحات الطويلة
   (لقطة الموبايل)، وسفاري الموبايل لا يدعمه أصلًا. الهالات وحدها ثابتة. */
html:not(.dark) {
    min-height: 100%;
    background: linear-gradient(160deg, var(--ezt-shell-1) 0%, var(--ezt-shell-2) 45%, var(--ezt-shell-3) 100%);
    background-color: var(--ezt-shell-1);
}
html:not(.dark) .fi-body {
    background: transparent !important;
    color: var(--ezt-text);
}
/* هالات الضوء الأربع: طبقة ثابتة خلف المحتوى (z-index:-1 تحت كل البلوكات وفوق
   خلفية الصفحة) وبلا pointer-events فلا تعترض أي ضغطة. */
html:not(.dark) .fi-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 10%, rgba(139, 92, 246, .18), transparent 45%),
        radial-gradient(ellipse at 85% 20%, rgba(59, 130, 246, .14), transparent 40%),
        radial-gradient(ellipse at 70% 90%, rgba(16, 185, 129, .12), transparent 45%),
        radial-gradient(ellipse at 10% 80%, rgba(236, 72, 153, .10), transparent 40%);
}
html:not(.dark) .fi-layout,
html:not(.dark) .fi-main-ctn,
html:not(.dark) .fi-main {
    background: transparent !important;
}


/* ============================ 3) القائمة الجانبية ============================ */
/* كارت كحلي زجاجي عائم (التصميم: .settings-dashboard-nav). */
html:is(.dark, :not(.dark)) .fi-sidebar,
html:is(.dark, :not(.dark)) .fi-sidebar-nav {
    background: transparent;
}
/* بلا backdrop-filter وبلا overflow:hidden عمدًا: القائمة المطويّة تفتح قوائم الأقسام
   منسدلةً خارج حدود الكارت، والاثنان كانا يقصّانها فتختفي تحت المحتوى (لقطة المالك
   2026-09-10). اللون شبه المعتم يعطي نفس المظهر فوق الكحلي بلا تمويه. */
html:is(.dark, :not(.dark)) .fi-sidebar {
    background: rgba(15, 23, 42, .86);
    border: 1px solid rgba(148, 163, 184, .22);
    box-shadow: 0 18px 44px rgba(2, 6, 23, .38);
}
/* ديسكتوب: القائمة ثابتة لكن مُنزاحة عن حواف الشاشة بفراغ متساوٍ فتبدو كارتًا
   عائمًا. eazygo-ui.css يثبّتها بـ!important على الحافة (top/bottom 0 وهامش
   ومسافة 16px معًا) فنعيد ضبطها كلها بقيمة واحدة. */
@media (min-width: 64rem) {
    html:is(.dark, :not(.dark)) .fi-sidebar.fi-main-sidebar {
        top: var(--ezt-sidebar-gap) !important;
        bottom: var(--ezt-sidebar-gap) !important;
        height: auto !important;
        inset-inline-start: var(--ezt-sidebar-gap) !important;
        margin-inline-start: 0 !important;
        border-radius: 18px;
    }
    /* المحتوى والشريط العلوي يبدآن بعد الكارت بفراغ واحد. */
    html:is(.dark, :not(.dark)) .fi-topbar-ctn,
    html:is(.dark, :not(.dark)) .fi-main-ctn {
        padding-inline-start: calc(var(--sidebar-width, 16rem) + var(--ezt-sidebar-gap)) !important;
    }
    html:is(.dark, :not(.dark)) .fi-main-ctn:not(.fi-main-ctn-sidebar-open) {
        padding-inline-start: calc(var(--collapsed-sidebar-width, 4.5rem) + var(--ezt-sidebar-gap)) !important;
    }
    html:is(.dark, :not(.dark)):has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .fi-topbar-ctn {
        padding-inline-start: calc(var(--collapsed-sidebar-width, 4.5rem) + var(--ezt-sidebar-gap)) !important;
    }
    /* رأس اللوجو: كان نيڤي صلبًا (#083555 !important) — الآن جزء من الزجاج. */
    html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-header-ctn,
    html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-header {
        background: transparent !important;
    }
}
/* موبايل: درج Filament المنزلق نفسه بلون الكارت (أصلب قليلًا لأنه فوق المحتوى). */
@media (max-width: 63.999rem) {
    html:is(.dark, :not(.dark)) .fi-sidebar {
        background: rgba(15, 23, 42, .96);
        border-radius: 0;
        border-block: 0;
        border-inline-start: 0;
    }
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-header {
    border-bottom: 1px solid rgba(148, 163, 184, .14);
}

/* التنقّل: فراغ جانبي 10px فتظهر العناصر كبسولات مدوّرة لا شرائط ملتصقة بالحافة. */
html:is(.dark, :not(.dark)) .fi-sidebar-nav {
    padding-inline: 10px !important;
    padding-block: 14px 18px !important;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-nav-groups {
    gap: 6px !important;
    row-gap: 6px !important;
}
/* المجموعة: صندوق هادئ بحواف مدوّرة بدل الشريط الممتدّ. */
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group {
    background: transparent !important;
    border-radius: 14px;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group.fi-collapsible:not(.fi-collapsed) {
    background: rgba(255, 255, 255, .035) !important;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group-btn {
    padding-inline-start: 14px !important;
    border-radius: 12px;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group-btn:hover {
    background: rgba(59, 130, 246, .12);
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group.fi-collapsible:not(.fi-collapsed) .fi-sidebar-group-btn::after {
    content: none;
}
/* عناوين الأقسام الرئيسية: أهدأ من العناصر (#94a3b8) لكن واضحة. */
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group-label {
    color: var(--ezt-on-navy-muted);
    font-weight: 700;
    font-size: .92rem;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group-label .fi-icon,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group-collapse-btn .fi-icon {
    color: #7c8ba1;
}

/* العنصر: كبسولة بحواف 12px (التصميم: .settings-tab-btn). */
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-btn {
    padding-inline: 14px !important;
    padding-block: 10px !important;
    border-radius: 12px !important;
    transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group.fi-collapsible:has(.fi-sidebar-group-btn) .fi-sidebar-group-items .fi-sidebar-item-btn {
    padding-inline-start: 44px !important;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group-items .fi-sidebar-item-btn {
    padding-block: 8px !important;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-btn,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-label,
html:is(.dark, :not(.dark)) .fi-sidebar a {
    color: var(--ezt-on-navy);
    text-shadow: none;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-label {
    font-weight: 600;
    font-size: .88rem;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) {
    background: transparent !important;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item-btn {
    padding-block: 12px !important;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item-label,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item-btn .fi-icon {
    color: var(--ezt-on-navy) !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-btn .fi-icon {
    color: #93a3b8;
}
/* الفواصل الرفيعة بين العناصر تشوّش شكل الكبسولات — نلغيها. */
html:is(.dark, :not(.dark)) .fi-sidebar-group-items .fi-sidebar-item + .fi-sidebar-item::before {
    content: none;
}
html:is(.dark, :not(.dark)) .fi-sidebar-group-items {
    padding: 0 0 6px !important;
    gap: 2px !important;
    row-gap: 2px !important;
}

/* المرور: تينت أزرق + زحزحة 2px نحو نهاية السطر (يسار في العربي، يمين في الإنجليزي). */
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-btn:hover {
    background: rgba(59, 130, 246, .2) !important;
    border-radius: 12px !important;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-btn:hover .fi-icon {
    color: #f8fafc !important;
}
html:is(.dark, :not(.dark))[dir="rtl"] .fi-sidebar .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
    transform: translateX(-2px);
}
html:is(.dark, :not(.dark))[dir="ltr"] .fi-sidebar .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
    transform: translateX(2px);
}

/* النشط: كبسولة زرقاء متدرّجة مضيئة. eazygo-ui.css يلوّنه تيل بـ!important
   (مرّتين: عام ولوحة التحكم) فنعلو على الاثنين بنفس القوة. */
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item.fi-active > a.fi-sidebar-item-btn,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item.fi-active > a.fi-sidebar-item-btn {
    background: var(--ezt-grad-active) !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, .35) !important;
    border-radius: 12px !important;
}
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item.fi-active .fi-icon,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item.fi-active .fi-icon {
    color: #ffffff !important;
}

/* شارة العدّاد: كهرماني كما هو لكن كبسولة ناعمة تتناسق مع الشكل الجديد. */
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-badge,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-badge {
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* زر الطيّ واسم الموقع أعلى القائمة. */
html:is(.dark, :not(.dark)) .ez-sidebar-toggle {
    color: var(--ezt-on-navy-muted);
    border-radius: 10px;
}
html:is(.dark, :not(.dark)) .ez-sidebar-toggle:hover {
    background: rgba(59, 130, 246, .18);
    color: #ffffff;
}

/* القائمة مطويّة على الديسكتوب: أيقونات فقط في كبسولات متوسّطة. */
@media (min-width: 64rem) {
    html:is(.dark, :not(.dark)) .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn,
    html:is(.dark, :not(.dark)) .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn {
        justify-content: center !important;
        padding-inline: 0 !important;
    }
}


/* ============================ 4) الشريط العلوي ============================ */
/* شفّاف فوق الكحلي. عند التمرير يمرّ المحتوى تحته، فنعطيه نفس الكحلي بشفافية
   وتمويه خفيف — لا يظهر كشريط منفصل ولا يتداخل النص تحته. */
html:is(.dark, :not(.dark)) .fi-topbar-ctn,
html:is(.dark, :not(.dark)) .fi-topbar {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
html:is(.dark, :not(.dark)) .fi-topbar-ctn {
    background: rgba(15, 23, 42, .55) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
/* الأزرار والأيقونات: زجاج فاتح على الكحلي (التصميم: .eg-header-btn). */
html:is(.dark, :not(.dark)) .fi-topbar .fi-icon-btn,
html:is(.dark, :not(.dark)) .fi-topbar .fi-topbar-open-sidebar-btn,
html:is(.dark, :not(.dark)) .fi-topbar .fi-topbar-close-sidebar-btn {
    color: var(--ezt-on-navy) !important;
    background: var(--ezt-glass);
    border: 1px solid var(--ezt-glass-line);
    border-radius: 10px;
}
html:is(.dark, :not(.dark)) .fi-topbar .fi-icon-btn:hover {
    background: rgba(59, 130, 246, .22);
    color: #ffffff !important;
}
html:is(.dark, :not(.dark)) .fi-topbar .fi-icon-btn .fi-icon {
    color: inherit !important;
}
/* حقل البحث العام: زجاج بنص فاتح. */
html:is(.dark, :not(.dark)) .fi-topbar .fi-input-wrp {
    background: var(--ezt-glass) !important;
    border-color: var(--ezt-glass-line) !important;
    box-shadow: inset 0 0 0 1px var(--ezt-glass-line) !important;
    border-radius: 10px;
}
html:is(.dark, :not(.dark)) .fi-topbar .fi-input-wrp input,
html:is(.dark, :not(.dark)) .fi-topbar .fi-input-wrp .fi-icon {
    color: var(--ezt-on-navy) !important;
}
html:is(.dark, :not(.dark)) .fi-topbar .fi-input-wrp input::placeholder {
    color: var(--ezt-on-navy-muted) !important;
}
/* حلقة الأفاتار فاتحة كي لا يذوب في الكحلي. */
html:is(.dark, :not(.dark)) .fi-topbar .fi-avatar {
    box-shadow: 0 0 0 2px rgba(148, 163, 184, .45);
}
/* القوائم المنسدلة تبقى بيضاء (فوق المحتوى) — حواف وظلّ التصميم فقط. */
html:not(.dark) .fi-dropdown-panel {
    border-radius: 14px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .22) !important;
    border: 1px solid var(--ezt-line);
}


/* ============================ 5) رأس الصفحة على الكحلي ============================ */
/* العنوان أبيض كبير فوق الكارت (التصميم: .settings-dashboard-header). eazygo-ui.css
   يرسم للرأس باند فاتحًا بتدرّج وإطار وظلّ كلها !important ⇒ نلغيها بالمثل. */
html:is(.dark, :not(.dark)) .fi-header {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 6px 4px 4px !important;
}
html:is(.dark, :not(.dark)) .fi-header-heading,
html:is(.dark, :not(.dark)) .fi-header:not(.fi-header-has-breadcrumbs) .fi-header-heading {
    color: #f8fafc !important;
    font-size: 1.75rem !important;
    line-height: 2.35rem !important;
    font-weight: 700 !important;
}
html:is(.dark, :not(.dark)) .fi-header-subheading {
    color: var(--ezt-on-navy-muted) !important;
}
html:is(.dark, :not(.dark)) .fi-breadcrumbs .fi-link,
html:is(.dark, :not(.dark)) .fi-breadcrumbs .fi-breadcrumbs-item-label {
    color: var(--ezt-on-navy-muted) !important;
}
html:is(.dark, :not(.dark)) .fi-breadcrumbs-item:last-child .fi-link,
html:is(.dark, :not(.dark)) .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: var(--ezt-on-navy) !important;
}
html:is(.dark, :not(.dark)) .fi-breadcrumbs .fi-icon,
html:is(.dark, :not(.dark)) .fi-breadcrumbs .fi-breadcrumbs-item-separator {
    color: #64748b !important;
}


/* ============================ 6) كارت المحتوى الأبيض ============================ */
/* كل ما تحت رأس الصفحة داخل كارت أبيض عائم واحد (التصميم: .settings-dashboard-main).
   على .fi-page-main لا .fi-page-content كي تدخل التبويبات الفرعية (sub-navigation) معه. */
html:not(.dark) .fi-page-main {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 18px;
    box-shadow: var(--ezt-shadow-card);
    padding: 22px 24px 28px;
}
@media (max-width: 40rem) {
    html:not(.dark) .fi-page-main {
        border-radius: 14px;
        padding: 14px 12px 18px;
    }
}
/* لوحة التحكم: خلفية «نظرة عامة» الملوّنة الهادئة من التصميم. Filament لا يعطي صفحة
   اللوحة كلاسًا خاصًا، فنعرفها ببانر الترحيب الذي لا يظهر إلا فيها. */
html:not(.dark) .fi-page-main:has(.eazygo-hero) {
    background: linear-gradient(165deg, #fafbff 0%, #f0f9ff 35%, #fdf4ff 100%);
    padding: 26px 26px 32px;
}


/* ============================ 7) صفحة الدخول ============================ */
html:not(.dark) .fi-simple-layout {
    background:
        radial-gradient(ellipse at 15% 10%, rgba(139, 92, 246, .22), transparent 45%),
        radial-gradient(ellipse at 85% 20%, rgba(59, 130, 246, .18), transparent 40%),
        radial-gradient(ellipse at 70% 90%, rgba(16, 185, 129, .14), transparent 45%),
        radial-gradient(ellipse at 10% 80%, rgba(236, 72, 153, .12), transparent 40%),
        linear-gradient(160deg, var(--ezt-shell-1) 0%, var(--ezt-shell-2) 45%, var(--ezt-shell-3) 100%);
    background-color: var(--ezt-shell-1);
}
html:not(.dark) .fi-simple-main {
    border-color: rgba(226, 232, 240, .95);
    box-shadow: 0 30px 70px rgba(2, 6, 23, .45), inset 0 0 0 1px rgba(255, 255, 255, .6);
}
html:not(.dark) .fi-simple-main::before {
    height: 5px;
    background: linear-gradient(90deg, #1e3c72, #2563eb, #7c3aed);
}
html:not(.dark) .fi-simple-main .fi-input-wrp:focus-within {
    border-color: var(--ezt-blue);
    box-shadow: var(--ezt-ring);
}
html:not(.dark) .fi-simple-main .fi-btn.fi-btn-color-primary,
html:not(.dark) .fi-simple-main button[type="submit"].fi-btn {
    background: var(--ezt-grad-primary) !important;
    box-shadow: 0 10px 22px -8px rgba(37, 99, 235, .55) !important;
}
html:not(.dark) .fi-simple-main .fi-btn.fi-btn-color-primary:hover,
html:not(.dark) .fi-simple-main button[type="submit"].fi-btn:hover {
    background: linear-gradient(135deg, #172f5a 0%, #1d4ed8 100%) !important;
    box-shadow: 0 14px 28px -10px rgba(29, 78, 216, .65) !important;
}


/* ============================ 8) مبدّل اللغة في الشريط العلوي ============================ */
/* كبسولة زجاجية واللغة الحالية زرقاء — نفس مبدّل العملة في التصميم (.eg-currency-toggle). */
html:is(.dark, :not(.dark)) .fi-panel-locale-switcher {
    padding: 3px !important;
    gap: 2px !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--ezt-glass-line);
}
html:is(.dark, :not(.dark)) .fi-panel-locale-switcher > span {
    display: none;
}
html:is(.dark, :not(.dark)) .fi-panel-locale-link {
    padding: 3px 11px;
    border-radius: 999px;
    color: #cbd5e1;
    font-weight: 700;
    opacity: 1 !important;
}
html:is(.dark, :not(.dark)) .fi-panel-locale-link:hover {
    color: #ffffff;
}
html:is(.dark, :not(.dark)) .fi-panel-locale-link[aria-current="true"] {
    background: var(--ezt-blue);
    color: #ffffff;
}
/* على الموبايل كان المبدّل ينكسر سطرين (العربية فوق English) في الشريط الضيّق. */
html:is(.dark, :not(.dark)) .fi-panel-locale-switcher,
html:is(.dark, :not(.dark)) .fi-panel-locale-link {
    flex-wrap: nowrap;
    white-space: nowrap;
}
@media (max-width: 40rem) {
    html:is(.dark, :not(.dark)) .fi-panel-locale-link {
        padding: 2px 8px;
        font-size: .78rem;
    }
    /* بانر الترحيب: أيقونة الطائرة تأكل نصف العرض فيلتفّ النصّ كلمةً في كل سطر. */
    html:is(.dark, :not(.dark)) .eazygo-hero-mark {
        display: none;
    }
    html:is(.dark, :not(.dark)) .eazygo-hero {
        padding: 1.2rem 1.25rem;
    }
}


/* ============================ 9) كروت الإحصائيات ============================ */
/* كروت متدرّجة زاهية (التصميم: .dash-overview-card): أيقونة زجاجية فوق، ثم الرقم
   كبيرًا، ثم العنوان. الألوان تدور بالترتيب فتعمل مع أي عدد كروت (الرئيسية والتقرير
   المالي) بلا ربط كارت بعينه. */
html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat {
    --ezt-stat-bg: linear-gradient(145deg, #7c3aed 0%, #6366f1 50%, #818cf8 100%);
    --ezt-stat-glow: #c4b5fd;
    position: relative;
    overflow: hidden;
    min-height: 9rem;
    padding: 1.4rem 1.2rem !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 20px !important;
    background: var(--ezt-stat-bg) !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .12), 0 4px 12px rgba(15, 23, 42, .06) !important;
    color: #ffffff;
    animation: eztStatIn .55s cubic-bezier(.22, 1, .36, 1) backwards;
    transition: transform .25s ease, box-shadow .25s ease !important;
}
/* كل كارت داخل عمود شبكة خاص به (fi-grid-col > fi-sc-component > الكارت)، فالترتيب
   يُحسب على العمود لا على الكارت — وإلا عُدَّ كل كارت «الأول» فخرجت كلها بنفسجية. */
html:is(.dark, :not(.dark)) .fi-grid-col:nth-child(8n+2) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #0284c7 0%, #0ea5e9 50%, #38bdf8 100%); --ezt-stat-glow: #7dd3fc; animation-delay: .08s; }
html:is(.dark, :not(.dark)) .fi-grid-col:nth-child(8n+3) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #059669 0%, #10b981 45%, #34d399 100%); --ezt-stat-glow: #6ee7b7; animation-delay: .16s; }
html:is(.dark, :not(.dark)) .fi-grid-col:nth-child(8n+4) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #b45309 0%, #d97706 55%, #f59e0b 100%); --ezt-stat-glow: #fde68a; animation-delay: .24s; }
html:is(.dark, :not(.dark)) .fi-grid-col:nth-child(8n+5) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #be123c 0%, #e11d48 50%, #fb7185 100%); --ezt-stat-glow: #fda4af; animation-delay: .32s; }
html:is(.dark, :not(.dark)) .fi-grid-col:nth-child(8n+6) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #4338ca 0%, #6366f1 50%, #818cf8 100%); --ezt-stat-glow: #a5b4fc; animation-delay: .4s; }
html:is(.dark, :not(.dark)) .fi-grid-col:nth-child(8n+7) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #ea580c 0%, #f97316 45%, #fb923c 100%); --ezt-stat-glow: #fdba74; animation-delay: .48s; }
html:is(.dark, :not(.dark)) .fi-grid-col:nth-child(8n) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #0e7490 0%, #0891b2 50%, #22d3ee 100%); --ezt-stat-glow: #a5f3fc; animation-delay: .56s; }/* في اللوحة ثلاث ويدجتات إحصائيات متجاورة (أشقّاء fi-wi-widget)، أربعة كروت لكلٍّ منها.
   نعطي الصفّ الثاني والثالث لوحة ألوان أخرى كي لا تتكرّر الأربعة نفسها ثلاث مرّات. */
html:is(.dark, :not(.dark)) .fi-wi-stats-overview ~ .fi-wi-stats-overview .fi-grid-col:nth-child(4n+1) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #be123c 0%, #e11d48 50%, #fb7185 100%); --ezt-stat-glow: #fda4af; }
html:is(.dark, :not(.dark)) .fi-wi-stats-overview ~ .fi-wi-stats-overview .fi-grid-col:nth-child(4n+2) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #4338ca 0%, #6366f1 50%, #818cf8 100%); --ezt-stat-glow: #a5b4fc; }
html:is(.dark, :not(.dark)) .fi-wi-stats-overview ~ .fi-wi-stats-overview .fi-grid-col:nth-child(4n+3) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #ea580c 0%, #f97316 45%, #fb923c 100%); --ezt-stat-glow: #fdba74; }
html:is(.dark, :not(.dark)) .fi-wi-stats-overview ~ .fi-wi-stats-overview .fi-grid-col:nth-child(4n+4) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #0e7490 0%, #0891b2 50%, #22d3ee 100%); --ezt-stat-glow: #a5f3fc; }
html:is(.dark, :not(.dark)) .fi-wi-stats-overview ~ .fi-wi-stats-overview ~ .fi-wi-stats-overview .fi-grid-col:nth-child(4n+1) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #0f766e 0%, #14b8a6 50%, #5eead4 100%); --ezt-stat-glow: #99f6e4; }
html:is(.dark, :not(.dark)) .fi-wi-stats-overview ~ .fi-wi-stats-overview ~ .fi-wi-stats-overview .fi-grid-col:nth-child(4n+2) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #1d4ed8 0%, #3b82f6 50%, #60a5fa 100%); --ezt-stat-glow: #bfdbfe; }
html:is(.dark, :not(.dark)) .fi-wi-stats-overview ~ .fi-wi-stats-overview ~ .fi-wi-stats-overview .fi-grid-col:nth-child(4n+3) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #7c3aed 0%, #8b5cf6 50%, #a78bfa 100%); --ezt-stat-glow: #ddd6fe; }
html:is(.dark, :not(.dark)) .fi-wi-stats-overview ~ .fi-wi-stats-overview ~ .fi-wi-stats-overview .fi-grid-col:nth-child(4n+4) > .fi-sc-component > .fi-wi-stats-overview-stat { --ezt-stat-bg: linear-gradient(145deg, #c2410c 0%, #ea580c 50%, #fb923c 100%); --ezt-stat-glow: #fed7aa; }
html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 22px 44px rgba(15, 23, 42, .18) !important;
}
/* هالة ضوء ناعمة أعلى الكارت (التصميم: .dash-overview-card__glow). */
html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat::before {
    content: "";
    position: absolute;
    inset-block-start: -2.2rem;
    inset-inline: 0;
    margin-inline: auto;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: var(--ezt-stat-glow);
    filter: blur(40px);
    opacity: .5;
    pointer-events: none;
}
html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    text-align: center;
}
/* الأيقونة والعنوان داخل حاوية واحدة في Filament؛ display:contents يفكّها فنرتّب
   الأيقونة فوق الرقم والعنوان تحته كما في التصميم — ترتيب بصري فقط. */
html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat-label-ctn {
    display: contents;
}
html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    order: 0;
    box-sizing: border-box;
    width: 3.1rem;
    height: 3.1rem;
    padding: .8rem;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .1));
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}
html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat-value {
    order: 1;
    color: #ffffff !important;
    font-size: 2rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}
html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat-label {
    order: 2;
    color: rgba(255, 255, 255, .95) !important;
    font-weight: 600;
    font-size: .9rem;
}
html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat-description {
    order: 3;
    color: rgba(255, 255, 255, .88) !important;
    font-weight: 600;
}
html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat-description .fi-icon {
    color: inherit !important;
}
/* المنحنى الصغير أسفل الكارت: أبيض شفاف بدل لون الحالة (جافاسكربت Filament يقرأ
   اللون المحسوب لهذين العنصرين). */
html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat-chart {
    opacity: .8;
}
html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat-chart-bg-color {
    color: rgba(255, 255, 255, .16) !important;
}
html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat-chart-border-color {
    color: rgba(255, 255, 255, .75) !important;
}
@keyframes eztStatIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* بانر الترحيب: حواف وظلّ الكروت الجديدة + هالة بنفسجية خفيفة. */
html:is(.dark, :not(.dark)) .eazygo-hero {
    border-radius: 20px;
    background:
        radial-gradient(600px 220px at 12% 0%, rgba(139, 92, 246, .35), transparent 70%),
        radial-gradient(700px 200px at 88% 0%, rgba(59, 130, 246, .45), transparent 70%),
        linear-gradient(135deg, #0f172a 0%, #1e3c72 55%, #2563eb 100%);
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .55);
}


/* ============================ 10) الجداول ============================ */
/* جدول بإطار وخطوط شبكة واضحة ورأس رمادي وصفوف متبادلة (التصميم: .settings-table).
   eazygo-ui.css يلوّن الرأس تيل فاتح (#E8F1F7 !important) والمرور #EEF5FA !important. */
/* بلا overflow:hidden: قوائم الفلاتر وإجراءات الصفوف تنسدل داخل هذا الإطار، والقصّ كان
   سيخفي ما يتجاوز جدولًا قصيرًا. الحواف العليا على شريط الأدوات نفسه. */
html:not(.dark) .fi-ta-ctn {
    border-radius: 14px !important;
    border: 1.5px solid var(--ezt-grid);
    box-shadow: var(--ezt-shadow-soft) !important;
}
html:not(.dark) .fi-ta-ctn > .fi-ta-header-ctn:first-child,
html:not(.dark) .fi-ta-ctn > :first-child .fi-ta-header-toolbar {
    border-start-start-radius: 13px;
    border-start-end-radius: 13px;
}
html:not(.dark) .fi-ta-header-ctn,
html:not(.dark) .fi-ta-header-toolbar {
    background: linear-gradient(180deg, #ffffff 0%, var(--ezt-surface-3) 100%);
}
html:not(.dark) .fi-ta-header-toolbar {
    border-bottom: 1px solid var(--ezt-line);
}
html:not(.dark) .fi-ta-table thead,
html:not(.dark) .fi-ta-table thead tr,
html:not(.dark) .fi-ta-header-cell,
html:not(.dark) .fi-ta-table thead .fi-ta-header-cell.fi-align-end,
html:not(.dark) .fi-ta-table thead .fi-ta-actions-header-cell,
html:not(.dark) .fi-ta-table thead th {
    background-color: var(--ezt-line) !important;
}
html:not(.dark) .fi-ta-table thead th {
    color: #475569;
    font-weight: 700;
    border-bottom: 2px solid var(--ezt-grid);
}
html:not(.dark) .fi-ta-table thead th:not(:last-child),
html:not(.dark) .fi-ta-table tbody td:not(:last-child) {
    border-inline-end: 1px solid var(--ezt-line-2);
}
html:not(.dark) .fi-ta-header-cell-sort-btn,
html:not(.dark) .fi-ta-header-cell .fi-ta-header-cell-label {
    color: #475569;
}
html:not(.dark) .fi-ta-table tbody td {
    border-top: 1px solid var(--ezt-line-2);
    color: var(--ezt-text);
}
/* صفوف متبادلة على الصف نفسه (لا الخلية) كي يغلبها لون المرور. */
html:not(.dark) .fi-ta-row:nth-child(even) {
    background-color: var(--ezt-surface-2);
}
html:not(.dark) .fi-ta-row:hover {
    background-color: var(--ezt-row-hover) !important;
}
/* خلية الإجراءات المثبّتة لها خلفية صلبة (eazygo-ui.css) فتتبع الصف يدويًا. */
html:not(.dark) .fi-ta-table td.fi-ta-cell:has(> .fi-ta-actions) {
    background-color: var(--ezt-surface);
}
html:not(.dark) .fi-ta-row:nth-child(even) td.fi-ta-cell:has(> .fi-ta-actions) {
    background-color: var(--ezt-surface-2);
}
html:not(.dark) .fi-ta-row:hover td.fi-ta-cell:has(> .fi-ta-actions) {
    background-color: var(--ezt-row-hover);
}
/* حقل البحث: صندوق التصميم (.dash-table-search) بتدرّج أبيض ناعم. */
html:not(.dark) .fi-ta-search-field .fi-input-wrp {
    border-radius: 12px !important;
    background: linear-gradient(180deg, #ffffff 0%, var(--ezt-surface-3) 100%) !important;
}
/* الترقيم: الصفحة الحالية كبسولة زرقاء. */
html:not(.dark) .fi-pagination-items {
    border-radius: 12px;
    overflow: hidden;
}
html:not(.dark) .fi-pagination-item.fi-active .fi-pagination-item-btn {
    background: var(--ezt-grad-active);
}
html:not(.dark) .fi-pagination-item.fi-active .fi-pagination-item-label {
    color: #ffffff;
}


/* ============================ 11) الشارات والتبويبات ============================ */
/* شارات الحالة كبسولات بألوان التصميم الهادئة (.settings-badge--*). شارات القائمة
   الجانبية كهرمانية بـ!important في eazygo-ui.css فلا تتأثّر بهذه. */
html:not(.dark) .fi-badge {
    border-radius: 999px;
    font-weight: 700;
    box-shadow: none;
}
html:not(.dark) .fi-badge.fi-color-success { background-color: #d1fae5; color: #047857; }
html:not(.dark) .fi-badge.fi-color-danger { background-color: #fee2e2; color: #b91c1c; }
html:not(.dark) .fi-badge.fi-color-warning { background-color: #fef3c7; color: #b45309; }
html:not(.dark) .fi-badge.fi-color-info,
html:not(.dark) .fi-badge.fi-color-primary { background-color: #dbeafe; color: #1d4ed8; }
html:not(.dark) .fi-badge.fi-color-gray { background-color: var(--ezt-surface-3); color: #475569; }
html:not(.dark) .fi-badge .fi-badge-label,
html:not(.dark) .fi-badge > .fi-icon {
    color: inherit;
}

/* التبويبات: مسار رمادي والتبويب النشط كبسولة زرقاء (التصميم: .eg-perm-page-tabs). */
html:not(.dark) .fi-tabs {
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: var(--ezt-line);
    box-shadow: none;
}
html:not(.dark) .fi-tabs-item {
    border-radius: 10px;
    font-weight: 700;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
html:not(.dark) .fi-tabs-item:not(.fi-active) .fi-tabs-item-label,
html:not(.dark) .fi-tabs-item:not(.fi-active) .fi-icon {
    color: #475569;
}
html:not(.dark) .fi-tabs-item:not(.fi-active):hover {
    background: rgba(255, 255, 255, .7);
}
html:is(.dark, :not(.dark)) .fi-tabs-item.fi-active {
    background: var(--ezt-grad-active);
    box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
}
html:is(.dark, :not(.dark)) .fi-tabs-item.fi-active .fi-tabs-item-label,
html:is(.dark, :not(.dark)) .fi-tabs-item.fi-active .fi-icon {
    color: #ffffff;
}
html:is(.dark, :not(.dark)) .fi-tabs-item.fi-active .fi-badge {
    background-color: rgba(255, 255, 255, .25);
    color: #ffffff;
}


/* ============================ 12) الأقسام (البلوكات) ============================ */
/* كارت أبيض بحافة هادئة وظلّ ناعم ورأس رمادي فاتح (التصميم: .mf-card). بلا
   overflow:hidden كي لا تُقصّ القوائم المنسدلة داخل الفورم — الحواف على الرأس نفسه. */
html:not(.dark) .fi-section:not(.fi-section-not-contained) {
    border-radius: 14px !important;
    border: 1px solid #e8edf4;
    box-shadow: var(--ezt-shadow-soft) !important;
}
html:not(.dark) .fi-section:not(.fi-section-not-contained) > .fi-section-header {
    background: var(--ezt-surface-2);
    border-bottom: 1px solid #eef2f7;
    border-start-start-radius: 14px;
    border-start-end-radius: 14px;
}
html:not(.dark) .fi-section.fi-collapsed:not(.fi-section-not-contained) > .fi-section-header {
    border-bottom: 0;
    border-radius: 14px;
}
html:not(.dark) .fi-section-header-heading {
    color: var(--ezt-ink);
    font-weight: 800;
}
html:not(.dark) .fi-section-header-description {
    color: var(--ezt-muted);
}
/* أيقونة رأس القسم: مربّع كحلي متدرّج (التصميم: .mf-card__icon). */
html:not(.dark) .fi-section-header > .fi-icon {
    box-sizing: border-box;
    width: 2.3rem;
    height: 2.3rem;
    padding: .55rem;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--ezt-navy) 0%, var(--ezt-navy-2) 100%);
}
html:not(.dark) .fi-section.fi-secondary:not(.fi-section-not-contained) {
    background-color: var(--ezt-surface-2) !important;
}


/* ============================ 13) الأزرار ============================ */
/* الأساسي: تدرّج كحلي→أزرق (التصميم: .settings-btn--primary)؛ الرمادي: أبيض بحدّ. */
html:is(.dark, :not(.dark)) .fi-btn {
    border-radius: 10px;
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
html:is(.dark, :not(.dark)) .fi-btn.fi-color-primary:not(.fi-outlined) {
    background: var(--ezt-grad-primary);
    color: #ffffff;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .55);
}
html:is(.dark, :not(.dark)) .fi-btn.fi-color-primary:not(.fi-outlined):hover {
    background: linear-gradient(135deg, #172f5a 0%, #1d4ed8 100%);
    box-shadow: 0 10px 22px -8px rgba(29, 78, 216, .6);
    transform: translateY(-1px);
}
html:is(.dark, :not(.dark)) .fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon {
    color: #ffffff;
}
html:not(.dark) .fi-btn.fi-color-gray:not(.fi-outlined) {
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), inset 0 0 0 1px var(--ezt-line-2);
    color: var(--ezt-body);
}
html:not(.dark) .fi-btn.fi-color-gray:not(.fi-outlined):hover {
    background: var(--ezt-surface-3);
}
/* أزرار رأس الصفحة تقف على الكحلي: الرمادي يصير زجاجًا فاتحًا. */
html:not(.dark) .fi-header-actions-ctn .fi-btn.fi-color-gray,
html:not(.dark) .fi-header .fi-icon-btn {
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .35);
    color: var(--ezt-on-navy);
}
html:not(.dark) .fi-header-actions-ctn .fi-btn.fi-color-gray .fi-icon,
html:not(.dark) .fi-header .fi-icon-btn .fi-icon {
    color: var(--ezt-on-navy);
}
html:not(.dark) .fi-header-actions-ctn .fi-btn.fi-color-gray:hover {
    background: rgba(59, 130, 246, .22);
}


/* ============================ 14) الحقول ============================ */
/* حدّ رمادي واضح وحلقة تركيز زرقاء (التصميم: .settings-field input). */
html:not(.dark) .fi-input-wrp {
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 0 0 1px var(--ezt-line-2);
}
html:not(.dark) .fi-input-wrp:focus-within {
    border-color: var(--ezt-blue);
    box-shadow: 0 0 0 1px var(--ezt-blue), var(--ezt-ring);
}
html:not(.dark) .fi-input-wrp.fi-invalid {
    box-shadow: 0 0 0 1px #ef4444;
}
html:not(.dark) .fi-input-wrp.fi-disabled {
    background-color: var(--ezt-surface-2);
}
html:not(.dark) .fi-fo-field-label {
    color: var(--ezt-body);
}
html:not(.dark) .fi-checkbox-input,
html:not(.dark) .fi-radio-input {
    accent-color: var(--ezt-blue);
}


/* ============================ 15) النوافذ المنبثقة ============================ */
/* نوافذ الفورم: رأس كحلي متدرّج بنص أبيض (التصميم: .dash-form-modal__head).
   نوافذ التأكيد (حذف…) بلا محتوى تبقى بيضاء كي لا تفقد نبرة التحذير. */
html:is(.dark, :not(.dark)) .fi-modal-window {
    border-radius: 16px !important;
    box-shadow: 0 30px 70px -20px rgba(15, 23, 42, .45) !important;
}
html:is(.dark, :not(.dark)) .fi-modal-window.fi-modal-window-has-content > .fi-modal-header {
    background: linear-gradient(135deg, #1e3c72 0%, #2d5aa0 100%);
    border-start-start-radius: 16px;
    border-start-end-radius: 16px;
}
html:is(.dark, :not(.dark)) .fi-modal-window.fi-modal-window-has-content > .fi-modal-header .fi-modal-heading {
    color: #ffffff;
}
html:is(.dark, :not(.dark)) .fi-modal-window.fi-modal-window-has-content > .fi-modal-header .fi-modal-description {
    color: #cbd5e1;
}
html:is(.dark, :not(.dark)) .fi-modal-window.fi-modal-window-has-content > .fi-modal-header .fi-modal-close-btn,
html:is(.dark, :not(.dark)) .fi-modal-window.fi-modal-window-has-content > .fi-modal-header .fi-modal-close-btn .fi-icon {
    color: #e2e8f0;
}
html:is(.dark, :not(.dark)) .fi-modal-close-overlay {
    background-color: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
html:not(.dark) .fi-no-notification {
    border-radius: 14px;
}


/* ============================ 16) التقارير ============================ */
/* كروت الأرقام: تدرّجات التقرير المالي في التصميم (.finance-report-card--*). */
html:is(.dark, :not(.dark)) .ezr-stat {
    --ezt-rep-bg: linear-gradient(145deg, #0e7490, #0891b2, #22d3ee);
    background: var(--ezt-rep-bg);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .1);
    transition: transform .2s ease, box-shadow .2s ease;
}
html:is(.dark, :not(.dark)) .ezr-stat:nth-child(5n+2) { --ezt-rep-bg: linear-gradient(145deg, #1d4ed8, #3b82f6, #60a5fa); }
html:is(.dark, :not(.dark)) .ezr-stat:nth-child(5n+3) { --ezt-rep-bg: linear-gradient(145deg, #7c3aed, #8b5cf6, #a78bfa); }
html:is(.dark, :not(.dark)) .ezr-stat:nth-child(5n+4) { --ezt-rep-bg: linear-gradient(145deg, #047857, #10b981, #34d399); }
html:is(.dark, :not(.dark)) .ezr-stat:nth-child(5n) { --ezt-rep-bg: linear-gradient(145deg, #b45309, #d97706, #f59e0b); }
html:is(.dark, :not(.dark)) .ezr-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .16);
}
html:is(.dark, :not(.dark)) .ezr-stat-ic {
    background: rgba(255, 255, 255, .25);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #ffffff;
}
html:is(.dark, :not(.dark)) .ezr-stat-label {
    color: rgba(255, 255, 255, .95);
}
html:is(.dark, :not(.dark)) .ezr-stat-value {
    color: #ffffff;
}
html:not(.dark) .ezr-bar-track {
    background: var(--ezt-line);
}
html:not(.dark) .ezr-bar-fill {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}
/* أزرار الفترات: كبسولات والنشطة كحلي متدرّج (التصميم: .parcel-reports-filter-btn). */
html:not(.dark) .ezr-period {
    padding: .5rem 1.1rem;
    border-color: var(--ezt-line-2);
    color: #475569;
    font-size: .85rem;
}
html:not(.dark) .ezr-period:hover {
    border-color: var(--ezt-blue);
    color: var(--ezt-blue);
}
html:not(.dark) .ezr-period-on,
html:not(.dark) .ezr-period-on:hover {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(30, 60, 114, .35);
}
/* بحث التقارير: تخطيطه كان في `eazygo-ui.css` مقيَّدًا بـ`html:not(.dark)`
   وحده، فيفقد الوضع الليلي `display:flex` وحدوده وعدّاد نتائجه ⇒ صندوق عارٍ
   بلا إطار يبدو كأنه ليس خانة بحث. التخطيط يخصّ الوضعين معًا. */
html:is(.dark, :not(.dark)) .ezr-search {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .9rem;
}
html:is(.dark, :not(.dark)) .ezr-search-input {
    flex: 1;
    max-width: 22rem;
    padding: .55rem .9rem;
    border: 1px solid var(--ezt-line-2);
    border-radius: 12px;
    background: var(--ezt-surface);
    color: var(--ezt-text);
}
html:is(.dark, :not(.dark)) .ezr-search-input::placeholder {
    color: var(--ezt-faint);
}
html:is(.dark, :not(.dark)) .ezr-search-input:focus {
    outline: none;
    border-color: var(--ezt-blue);
    box-shadow: var(--ezt-ring);
}
html:is(.dark, :not(.dark)) .ezr-search-count {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ezt-muted);
}
/* جداول التقارير بنفس شبكة جداول اللوحة. */
html:not(.dark) .eazygo-report-table-wrap {
    border: 1.5px solid var(--ezt-grid);
    border-radius: 12px;
    box-shadow: var(--ezt-shadow-soft);
}
html:not(.dark) .eazygo-report-table thead th {
    background-color: var(--ezt-line);
    color: #475569;
    font-weight: 700;
    border-bottom: 2px solid var(--ezt-grid);
}
html:not(.dark) .eazygo-report-table thead th:not(:last-child),
html:not(.dark) .eazygo-report-table tbody td:not(:last-child),
html:not(.dark) .eazygo-report-table tfoot td:not(:last-child) {
    border-inline-end: 1px solid var(--ezt-line-2);
}
html:not(.dark) .eazygo-report-table tbody td {
    border-top-color: var(--ezt-line-2);
    color: var(--ezt-text);
}
html:not(.dark) .eazygo-report-table tbody tr:nth-child(even) {
    background-color: var(--ezt-surface-2);
}
html:not(.dark) .eazygo-report-table tbody tr:hover {
    background-color: var(--ezt-row-hover);
}
html:not(.dark) .eazygo-report-table tfoot tr {
    background-color: var(--ezt-line);
    color: var(--ezt-ink);
}
html:not(.dark) .eazygo-report-table tfoot td {
    border-top: 2px solid var(--ezt-grid);
}


/* ============================ 17) شبكة أسعار الطرود ============================ */
/* ألوان التصميم (.pp-full): رأس العربية أخضر، الأجنبية أزرق، فاصل كحلي عريض بينهما،
   وأزرار دائرية ملوّنة. الهندسة والمقاسات كما هي في eazygo-ui.css (قرارات المالك). */
html:is(.dark, :not(.dark)) .ez-pricing-grid-circle {
    color: #ffffff;
    border: 0;
    background: linear-gradient(135deg, #1e3c72 0%, #2563eb 100%);
    box-shadow: 0 8px 18px -6px rgba(37, 99, 235, .5);
}
html:is(.dark, :not(.dark)) .ez-pricing-grid-circle-accent {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    box-shadow: 0 8px 18px -6px rgba(5, 150, 105, .5);
}
html:not(.dark) .ez-pricing-grid-circle-danger {
    color: #475569;
    background: #ffffff;
    border: 1.5px solid var(--ezt-line-2);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .06);
}
html:not(.dark) .ez-pricing-grid-default-bar,
html:not(.dark) .ez-pricing-grid-bulk-panel {
    background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%);
    border: 1px solid rgba(30, 60, 114, .12);
    border-radius: 12px;
}
html:not(.dark) .ez-pricing-grid-panel-heading {
    color: var(--ezt-body);
}
html:not(.dark) .ez-pricing-grid-segment {
    background: var(--ezt-line);
    border-radius: 999px;
}
html:not(.dark) .ez-pricing-grid-segment button {
    border-radius: 999px;
    color: var(--ezt-muted);
}
html:is(.dark, :not(.dark)) .ez-pricing-grid-segment button.is-active {
    background: linear-gradient(135deg, #1e3c72 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(37, 99, 235, .3);
}
html:is(.dark, :not(.dark)) .ez-pricing-grid-apply {
    border-radius: 999px;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    box-shadow: 0 6px 14px -4px rgba(5, 150, 105, .5);
}
html:not(.dark) .ez-pricing-grid-input {
    border-color: var(--ezt-line-2);
    border-radius: 6px;
}
html:not(.dark) .ez-pricing-grid-input:focus {
    border-color: var(--ezt-blue);
    box-shadow: var(--ezt-ring);
}
html:not(.dark) .ez-pricing-grid-table thead th {
    border-bottom: 2px solid var(--ezt-grid);
}
/* لون لكل نوع خانة (التصميم: .pp-input--*): الرسوم أزرق، الوزن كهرماني، نصيب المسافر
   أخضر. التمييز باسم الحقل في wire:model — بلا أي تعديل في القالب. */
html:not(.dark) .ez-pricing-grid-input[wire\:model*="service_fee"] {
    background: #eff6ff;
    border-color: #93c5fd;
}
html:not(.dark) .ez-pricing-grid-input[wire\:model*="weight"] {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #92400e;
    font-weight: 700;
}
html:not(.dark) .ez-pricing-grid-input[wire\:model*="traveler_share_percent"] {
    background: #f0fdf4;
    border-color: #86efac;
}
/* الأعمدة المحسوبة الثلاثة بالترتيب: الإجمالي · نصيب المسافر · نصيب المنصّة. */
html:not(.dark) td:not(.ez-pricing-grid-money) + td.ez-pricing-grid-money {
    color: #1e40af;
    background: #eff6ff !important;
}
html:not(.dark) td.ez-pricing-grid-money + td.ez-pricing-grid-money {
    color: #0f766e;
    background: #ecfdf5 !important;
}
html:not(.dark) td.ez-pricing-grid-money + td.ez-pricing-grid-money + td.ez-pricing-grid-money {
    color: #6d28d9;
    background: #f5f3ff !important;
}
html:not(.dark) .ez-pricing-grid-region-arab {
    background: linear-gradient(180deg, #d1fae5 0%, #a7f3d0 50%, #6ee7b7 100%) !important;
    color: #064e3b !important;
}
html:not(.dark) .ez-pricing-grid-region-foreign {
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%) !important;
    color: #1e3a8a !important;
}
html:not(.dark) th.ez-pricing-grid-arab {
    background: #ecfdf5 !important;
}
html:not(.dark) th.ez-pricing-grid-foreign {
    background: #eff6ff !important;
}
html:not(.dark) td.ez-pricing-grid-arab {
    background: rgba(236, 253, 245, .55) !important;
}
html:not(.dark) td.ez-pricing-grid-foreign {
    background: rgba(239, 246, 255, .7) !important;
}
/* فاصل كحلي بين المنطقتين (التصميم: .dash-pp-region-gap-cell). */
html:not(.dark) .ez-pricing-grid-arab + .ez-pricing-grid-foreign,
html:not(.dark) .ez-pricing-grid-region-arab + .ez-pricing-grid-region-foreign {
    border-inline-start: 4px solid #1e40af !important;
}
html:not(.dark) .ez-pricing-grid-table th:not(:last-child),
html:not(.dark) .ez-pricing-grid-table td:not(:last-child) {
    border-inline-end-color: var(--ezt-line-2);
}
html:not(.dark) .ez-region-badge-arab {
    color: #064e3b;
    border-color: #34d399;
    background: linear-gradient(145deg, #ecfdf5 0%, #a7f3d0 42%, #6ee7b7 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, .24), inset 0 1px 0 rgba(255, 255, 255, .6);
}
html:not(.dark) .ez-region-badge-foreign {
    color: #1e3a8a;
    border-color: #3b82f6;
    background: linear-gradient(145deg, #eff6ff 0%, #bfdbfe 42%, #93c5fd 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, .22), inset 0 1px 0 rgba(255, 255, 255, .6);
}
html:not(.dark) .ez-pricing-grid-mini-action {
    color: var(--ezt-blue);
    border-color: var(--ezt-line-2);
}
html:not(.dark) .ez-pricing-grid-mini-danger {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
}


/* ============================ 19) الوضع الليلي (بطلب المالك 2026-09-10) ============================ */
/* «خلفية الصفحات تبقى سوداء أو بلون القائمة علشان يبقى فيه فرق»: الغلاف شبه أسود، والمحتوى
   في كارت كحلي بلون القائمة الجانبية فيبرز عنه، والأقسام داخله أفتح درجة (ألوان Filament
   الليلية). هنا الغلاف والكارت والإطارات فقط — القائمة والكروت الملوّنة مشتركة أعلاه. */
html.dark {
    min-height: 100%;
    background: linear-gradient(160deg, #02040a 0%, #050a14 50%, #040b17 100%);
    background-color: #02040a;
}
html.dark .fi-body {
    background: transparent !important;
}
html.dark .fi-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 10%, rgba(139, 92, 246, .10), transparent 45%),
        radial-gradient(ellipse at 85% 20%, rgba(59, 130, 246, .09), transparent 40%),
        radial-gradient(ellipse at 70% 90%, rgba(16, 185, 129, .06), transparent 45%);
}
html.dark .fi-layout,
html.dark .fi-main-ctn,
html.dark .fi-main {
    background: transparent !important;
}
html.dark .fi-topbar-ctn {
    background: rgba(2, 4, 10, .6) !important;
}
/* كارت المحتوى: كحلي القائمة نفسه، بحافة فاتحة رفيعة تفصله عن الأسود. */
html.dark .fi-page-main {
    background: linear-gradient(180deg, #0f172a 0%, #0c1424 100%);
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
    padding: 22px 24px 28px;
}
html.dark .fi-page-main:has(.eazygo-hero) {
    padding: 26px 26px 32px;
}
@media (max-width: 40rem) {
    html.dark .fi-page-main {
        border-radius: 14px;
        padding: 14px 12px 18px;
    }
}
/* الأقسام والجداول داخل الكارت: حواف التصميم وحدّ هادئ. */
html.dark .fi-section:not(.fi-section-not-contained),
html.dark .fi-ta-ctn {
    border-radius: 14px !important;
}
html.dark .fi-ta-ctn,
html.dark .fi-section:not(.fi-section-not-contained) {
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .16) !important;
}
html.dark .fi-ta-table thead th:not(:last-child),
html.dark .fi-ta-table tbody td:not(:last-child) {
    border-inline-end: 1px solid rgba(148, 163, 184, .1);
}
html.dark .fi-tabs {
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
}
html.dark .fi-tabs-item {
    border-radius: 10px;
}
html.dark .fi-input-wrp {
    border-radius: 10px;
}
/* شبكة الأسعار: ألوانها في eazygo-ui.css نهارية فقط، فكانت خاناتها في الليلي نصًّا بلا
   إطار وأزرارها الدائرية بلا لون. الأزرار الملوّنة مشتركة أعلاه؛ هنا الخانات واللوحات. */
html.dark .ez-pricing-grid-default-bar,
html.dark .ez-pricing-grid-bulk-panel {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 12px;
}
html.dark .ez-pricing-grid-default-bar label,
html.dark .ez-pricing-grid-bulk-panel label,
html.dark .ez-pricing-grid-segment-group,
html.dark .ez-pricing-grid-panel-heading {
    color: #cbd5e1;
}
html.dark .ez-pricing-grid-input {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 6px;
    color: #e2e8f0;
}
html.dark .ez-pricing-grid-input:focus {
    outline: 0;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .25);
}
html.dark .ez-pricing-grid-segment {
    background: rgba(255, 255, 255, .06);
    border-radius: 999px;
}
html.dark .ez-pricing-grid-segment button {
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
}
html.dark .ez-pricing-grid-circle-danger {
    color: #e2e8f0;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(148, 163, 184, .3);
    box-shadow: none;
}
html.dark .ez-pricing-grid-status {
    background: rgba(255, 255, 255, .06);
    color: #94a3b8;
}
html.dark .ez-pricing-grid-status.is-active {
    background: rgba(16, 185, 129, .16);
    color: #6ee7b7;
}
html.dark .ez-pricing-grid-mini-action {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(148, 163, 184, .25);
    color: #93c5fd;
}
html.dark .ez-pricing-grid-mini-danger {
    color: #fca5a5;
}
/* صفحة الدخول: نفس الغلاف الأسود بهالاته. */
html.dark .fi-simple-layout {
    background:
        radial-gradient(ellipse at 15% 10%, rgba(139, 92, 246, .16), transparent 45%),
        radial-gradient(ellipse at 85% 20%, rgba(59, 130, 246, .12), transparent 40%),
        linear-gradient(160deg, #02040a 0%, #050a14 50%, #040b17 100%);
    background-color: #02040a;
}


/* ============================ 20) تقليل الحركة ============================ */
/* من يطلب تقليل الحركة من نظامه لا يرى زحزحة ولا ظهورًا متدرّجًا ولا قفزًا. */
@media (prefers-reduced-motion: reduce) {
    html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-btn,
    html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-btn:hover,
    html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat,
    html:is(.dark, :not(.dark)) .fi-wi-stats-overview-stat:hover,
    html:is(.dark, :not(.dark)) .fi-btn,
    html:is(.dark, :not(.dark)) .fi-btn:hover,
    html:is(.dark, :not(.dark)) .ezr-stat,
    html:is(.dark, :not(.dark)) .ezr-stat:hover {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ملاحظة العميل ٣٨ — موضع شريط تمرير القائمة الجانبية
   ───────────────────────────────────────────────────────────────────────
   في واجهة عربية (rtl) القائمة على اليمين، والمتصفّح يضع شريط تمريرها على
   **اليسار** — أي في منتصف الشاشة بين القائمة والمحتوى. العميل يريده على
   اليمين، ملتصقًا بحافّة النافذة.

   الحيلة الوحيدة المتاحة في CSS: نعكس اتجاه **حاوية التمرير** إلى ltr
   (فينتقل الشريط للجهة المقابلة) ونعيد الاتجاه rtl إلى **محتواها** حتى لا
   ينقلب النصّ ولا ترتيب الأيقونات.

   ⚠️ مقيَّدة بـ[dir="rtl"] عمدًا: في الإنجليزية القائمة على اليسار وشريطها
   على اليمين أصلًا — تطبيق الحيلة هناك يدفعه إلى حافّة الشاشة اليسرى، أي
   يعكس الصواب. والصفحات الداخلية تُترك كما هي: شريط تمرير المستند في rtl
   يظهر على اليسار تلقائيًّا، وهو ما طلبه العميل حرفيًّا.
   ═══════════════════════════════════════════════════════════════════════ */
html[dir="rtl"] .fi-sidebar-nav {
    direction: ltr;
}
html[dir="rtl"] .fi-sidebar-nav > * {
    direction: rtl;
}

/* ═══════════════════════════════════════════════════════════════════════
   ملاحظتا العميل ١٠ و٣٤ — زرّ إغلاق ✕ في كل صفحة داخلية
   ───────────────────────────────────────────────────────────────────────
   يجلس في شريط أفعال رأس الصفحة، فيبقى مرئيًّا بلا تمرير حتى في أطول
   الصفحات (صفحة الصلاحيات التي اشتكى العميل من طولها هي الحالة القصوى).

   محايد اللون عمدًا: الإغلاق ليس فعلًا مدمّرًا فلا يأخذ الأحمر، وليس الفعل
   الأساسيّ فلا يأخذ لون البراند — رماديٌّ يميل للأحمر عند المرور وحده.
   ═══════════════════════════════════════════════════════════════════════ */
html:is(.dark, :not(.dark)) .ez-close-page {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 10px;
    border: 1px solid var(--ezt-line, #dbe3ec);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
html:not(.dark) .ez-close-page {
    background: #fff;
    color: #5a7184;
}
html:not(.dark) .ez-close-page:hover {
    background: #fdecea;
    border-color: #f2b8b2;
    color: #b42318;
}
html:is(.dark, :not(.dark)) .ez-close-page-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
}
/* على الشاشات الضيّقة يبقى الرمز وحده: شريط الرأس هناك مزدحم أصلًا. */
@media (max-width: 640px) {
    html:is(.dark, :not(.dark)) .ez-close-page-label {
        display: none;
    }
    html:is(.dark, :not(.dark)) .ez-close-page {
        padding: 7px 9px;
    }
}