/* EazyGo — طبقة تحسينات UI/UX للّوحة (نهاري فقط). تُحمّل عبر render hook في AdminPanelProvider.
   ملاحظة: كل القواعد مقيّدة بـ html:not(.dark) حتى لا تمسّ الوضع الليلي (قاعدة المشروع). */

:root{
  --ez-primary:#0E84B5; --ez-primary-dark:#06426D;
  --ez-navy:#083555; --ez-navy-deep:#081C45;
  --ez-accent:#288740; --ez-accent-light:#3FAE5E;
  --ez-warning:#E8A100; --ez-danger:#E23B3B;
  --ez-ink:#0B2233; --ez-body:#38536B; --ez-muted:#5A7184;
  --ez-canvas:#F3F8FB; --ez-surface:#FFFFFF; --ez-hairline:#E2EBF1;
  --ez-card-shadow:0 8px 24px rgba(14,132,181,.10);
}
/* حجم اللوحة كلها (طلب العميل 2026-09-28: «عند 80% كل شيء مضبوط»). تصغير الخط
   الأساسي لا zoom: قواعد Filament كلها rem فتصغر معه، بينما zoom يُفسد تموضع
   القوائم المنسدلة (floating-ui) ويقصّ رأس النوافذ لأن dvh لا يتبعه. يسري في
   الوضعين لأنه حجم لا لون. */
html{ font-size: 80%; }

/* ============================ صفحة تسجيل الدخول ============================ */
html:not(.dark) .fi-simple-layout {
    background:
        radial-gradient(1100px 560px at 82% -10%, rgba(14,132,181,.38), transparent 60%),
        radial-gradient(900px 520px at 10% 112%, rgba(8,28,69,.55), transparent 60%),
        linear-gradient(135deg, var(--ez-navy) 0%, var(--ez-navy-deep) 100%);
    background-color: var(--ez-navy);
}

/* بطاقة الدخول: أوسع، حواف ناعمة، ظل راقٍ، وحد خفيف */
html:not(.dark) .fi-simple-main {
    max-width: 27rem;
    border: 1px solid rgba(226, 235, 241, 0.7);
    border-radius: 18px !important;
    box-shadow: var(--ez-card-shadow);
    padding: 2.4rem 2.1rem 2.1rem;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    animation: eazygo-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* شريط علوي ملوّن رفيع يعطي هوية */
html:not(.dark) .fi-simple-main::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ez-navy), var(--ez-primary));
}

/* العلامة أكبر ومتوسّطة في صفحة الدخول */
html:not(.dark) .fi-simple-header {
    text-align: center;
}
/* شعار EazyGo الرسمي كبير فوق بطاقة الدخول — نكبّر الحاوية .fi-logo (ارتفاعها ثابت من brandLogoHeight) */
html:not(.dark) .fi-simple-header .fi-logo {
    height: 5.5rem !important;
    margin: 0 auto 1.1rem;
}
/* العلامة المجسّمة خلفيتها شفافة، فلا border-radius ولا box-shadow (كانا يرسمان صندوقًا
   مظلَّلًا حول فراغ حين لا تكون للصورة خلفية صلبة). الظل يتبع حدود الرسمة نفسها عبر
   drop-shadow، وخلفية الصفحة نيڤي داكن (.fi-simple-layout) فتقرأ حروف العلامة البيضاء. */
html:not(.dark) .fi-simple-header .eazygo-logo-img {
    height: 100% !important;
    width: auto;
    margin: 0 auto;
    filter: drop-shadow(0 10px 22px rgba(2, 12, 26, .55));
}
/* نفس طفو رأس القائمة، أبطأ (7s) لأن العلامة هنا أكبر بمرّة ونصف: السرعة نفسها على
   حجم أكبر تُقرأ اهتزازًا لا تنفّسًا. للوضعين معًا — الحركة هندسة لا لون. */
html .fi-simple-header .eazygo-logo-img {
    transform-origin: center center;
    animation: ez-brand-float 7s cubic-bezier(.45, .05, .55, .95) infinite;
    will-change: transform;
}
/* عنوان أهدأ */
html:not(.dark) .fi-simple-header .fi-simple-header-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ez-ink);
}
/* سطر تعريفي أسفل العنوان — النصّ والهندسة للوضعين (مصدر واحد لا نسختان
   تتباعدان)، واللون وحده محصور في النهاري التزامًا بقاعدة عدم مسّ الليلي. */
html .fi-simple-header::after {
    content: "منصة الشحن بين المسافرين — لوحة التحكم";
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
}
html:not(.dark) .fi-simple-header::after {
    color: var(--ez-muted);
}

/* الحقول: حدود متناسقة + حلقة تركيز أنيقة */
html:not(.dark) .fi-simple-main .fi-input-wrp {
    border-radius: 10px;
    border-color: var(--ez-hairline);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
html:not(.dark) .fi-simple-main .fi-input-wrp:focus-within {
    border-color: var(--ez-primary);
    box-shadow: 0 0 0 3px rgba(14,132,181,.16);
}

/* زر الدخول: تدرّج + رفعة عند المرور */
html:not(.dark) .fi-simple-main .fi-btn.fi-btn-color-primary,
html:not(.dark) .fi-simple-main button[type="submit"].fi-btn {
    background: linear-gradient(135deg, var(--ez-primary), var(--ez-primary-dark)) !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 16px -6px rgba(14,132,181,.45) !important;
    transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
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 {
    transform: translateY(-1px);
    /* نغمّق الخلفية صراحةً (بدل filter:brightness الذي يبهت النص الأبيض) ونلغي أي filter منافس. */
    filter: none !important;
    background: linear-gradient(135deg, #0a6a92, #052f4e) !important;
    box-shadow: 0 12px 24px -8px rgba(6,66,109,.6) !important;
}
/* النص وكل عناصره أبيض كامل الوضوح عند المرور مهما كانت بنية الزر (لا بهتان إطلاقًا). */
html:not(.dark) .fi-simple-main .fi-btn.fi-btn-color-primary:hover,
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,
html:not(.dark) .fi-simple-main button[type="submit"].fi-btn:hover * {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ── الوضع الليلي: نفس الترتيب والتناسب، وألوانه كما هي ──
   القواعد أعلاه محصورة في النهاري (قاعدة المشروع: لا يُمسّ لون الوضع الليلي).
   لكن الترتيب والمقاسات ليست لونًا: بدونها تظهر صفحة الدخول الليلية ببطاقة
   Filament الافتراضية — شعار صغير، عنوان بلا توسيط، وحواف مختلفة. هنا نكرّر
   الهندسة وحدها (عرض · حشو · انحناء · حجم الشعار · التوسيط · أحجام الخط)
   ولا نضبط أي خاصية لون أو خلفية أو ظلّ إطلاقًا. */
html.dark .fi-simple-main {
    max-width: 27rem;
    border-radius: 18px !important;
    padding: 2.4rem 2.1rem 2.1rem;
    position: relative;
    overflow: hidden;
    animation: eazygo-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.dark .fi-simple-header {
    text-align: center;
}
html.dark .fi-simple-header .fi-logo {
    height: 5.5rem !important;
    margin: 0 auto 1.1rem;
}
html.dark .fi-simple-header .eazygo-logo-img {
    height: 100% !important;
    width: auto;
    margin: 0 auto;
    border-radius: 14px;
}
html.dark .fi-simple-header .fi-simple-header-heading {
    font-size: 1.25rem;
    font-weight: 700;
}
html.dark .fi-simple-main .fi-input-wrp {
    border-radius: 10px;
}
html.dark .fi-simple-main .fi-btn.fi-btn-color-primary,
html.dark .fi-simple-main button[type="submit"].fi-btn {
    border-radius: 10px !important;
}

@keyframes eazygo-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* طفو العلامة أعلى القائمة الجانبية: دورة 5 ثوانٍ بميل ±1.6° وتنفّس بسيط في الحجم.
   المنحنى ease-in-out في الطرفين لا خطّي، فتُقرأ الحركة كتأرجح طبيعي لا كدوران آلي.
   القيم مقصودة صغيرة: العلامة في شريط ارتفاعه 64px، والمبالغة فيها تشوّش لا تبهر. */
@keyframes ez-brand-float {
    0%, 100% { transform: translateY(0)      rotate(0deg)    scale(1); }
    25%      { transform: translateY(-1.5px) rotate(-1.6deg) scale(1.02); }
    50%      { transform: translateY(1.5px)  rotate(0deg)    scale(1.04); }
    75%      { transform: translateY(-1.5px) rotate(1.6deg)  scale(1.02); }
}
/* من يطلب تقليل الحركة من نظام تشغيله لا يرى طفوًا — تبقى العلامة ساكنة وتحتفظ
   بردّ فعل المرور والضغط (وهما لمسة واحدة قصيرة لا حركة مستمرّة). */
@media (prefers-reduced-motion: reduce) {
    html .eazygo-logo-img {
        animation: none !important;
    }
}

/* ============================ لوحة التحكم (Dashboard) ============================ */
/* بانر ترحيبي (عنصر مستقل بتدرّجه الخاص — يظهر جيّدًا في الوضعين) */
.eazygo-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.6rem 1.9rem;
    /* يتبع نصف القطر الموحّد للمشروع (‎--radius-xl‎ في AdminPanelProvider) بدل 14px الثابت
       الشاذّ، فيتناسق مع كل البلوكات ويتغيّر معها تلقائيًا. */
    border-radius: var(--radius-xl, 0.5rem);
    color: #f8fafc;
    background:
        radial-gradient(700px 200px at 88% 0%, rgba(14,132,181,.5), transparent 70%),
        linear-gradient(135deg, var(--ez-navy) 0%, var(--ez-primary) 100%);
    box-shadow: 0 12px 30px -14px rgba(15, 23, 42, 0.55);
    overflow: hidden;
}
.eazygo-hero-greet {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.eazygo-hero-sub {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: rgba(226, 232, 240, 0.82);
    font-weight: 500;
}
.eazygo-hero-mark {
    color: rgba(255, 255, 255, 0.16);
    flex: 0 0 auto;
    margin-inline-end: 0.5rem;
}

/* بطاقات الإحصائيات: رفعة لطيفة عند المرور (نهاري فقط) */
html:not(.dark) .fi-wi-stats-overview-stat {
    transition: transform 0.14s ease, box-shadow 0.18s ease;
}
html:not(.dark) .fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--ez-card-shadow);
}
/* قيمة الإحصائية أبرز */
html:not(.dark) .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* ============================ الجداول ============================ */
/* إبراز صف الجدول عند المرور — يسهّل تتبّع الصف (نهاري فقط) */
html:not(.dark) .fi-ta-row {
    transition: background-color 0.12s ease;
}
html:not(.dark) .fi-ta-row:hover {
    background-color: #EEF5FA !important;
}

/* ============================ القائمة الجانبية ============================ */
/* خلفية القائمة: تدرّج براند (navy → أزرق) مطابق لصفحة الدخول والـ hero — نهاري فقط.
   ملاحظة: كلاسّات Filament هنا هي fi-sidebar-item-btn و fi-active (لا -button/-active). */
html .fi-sidebar,
html .fi-sidebar-nav {
    /* تدرّج هادئ: navy عميق ينساب إلى تيل مطفّي من هوية البراند (ثلاث محطات لانسيابية). */
    background: linear-gradient(180deg, #072639 0%, #0A4A6B 55%, #0C5C81 100%);
    border-inline-end: 0;
    /* منع تحديد نص عناوين/عناصر القائمة عند الضغط (كان يظهر تظليل أزرق افتراضي مزعج). */
    user-select: none;
    -webkit-user-select: none;
}

/* هرمية خط أنيقة: عناصر بوزن متوسط ولون أوف-وايت هادئ وظل خفيف جدًا. */
html .fi-sidebar .fi-sidebar-item-btn,
html .fi-sidebar .fi-sidebar-item-label,
html .fi-sidebar a {
    color: #E7EFF6;
    font-weight: 500;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}
/* الخلفية على المجموعة كلها (الرأس بالسهم + العناصر) خلفية واحدة موحّدة بلا أي فاصل.
   المجموعة المغلقة: تينت خفيف جدًا. */
html .fi-sidebar .fi-sidebar-group {
    background: rgba(255, 255, 255, .04);
}
/* المجموعة المفتوحة: خلفية موحّدة أبرز من المغلقة. نميّز الرئيسي عن الفرعي بأناقة —
   فاصل رفيع تحت العنوان + إزاحة (indent) للعناصر فتقرأ متداخلة تحته، بلا تلوين مزدوج. */
html .fi-sidebar .fi-sidebar-group.fi-collapsible:not(.fi-collapsed) {
    background: rgba(255, 255, 255, .09);
}
/* الفاصل تحت رأس القسم المفتوح: على زرّ الرأس (عرض كامل) لا على span العنوان، ويبدأ من
   56px حتى الحافة اليسرى — مطابق تمامًا لفواصل العناصر الفرعية (margin-inline-start:56px). */
html .fi-sidebar .fi-sidebar-group.fi-collapsible:not(.fi-collapsed) .fi-sidebar-group-btn::after {
    content: "";
    position: absolute;
    inset-inline: 56px 0;
    inset-block-end: 0;
    height: 1px;
    background: rgba(255, 255, 255, .03);
}
/* إزاحة العناصر الفرعية لتبدأ محاذية لبداية نص العنوان الرئيسي (بعد أيقونته مباشرة).
   الأيقونة الآن عند 20px بعرض 24 + فراغ ≈ نص العنوان عند 52px، فنطابقه. نستثني مجموعة
   لوحة التحكم (بلا رأس group-btn) عبر :has كي لا تُزاح أيقونتها. الإزاحة ثابتة بصرف
   النظر عن حالة الطي (لا نقيّدها بـ :not(.fi-collapsed)) حتى لا تقفز العناصر أفقيًا
   لحظة الضغط بينما يتحرك الارتفاع رأسيًا — الحركتان معًا كانتا تبدوان مشوّشتين. */
html .fi-sidebar .fi-sidebar-group.fi-collapsible:has(.fi-sidebar-group-btn) .fi-sidebar-group-items .fi-sidebar-item-btn {
    padding-inline-start: 56px !important;
}
/* عناوين الأقسام الرئيسية: أكبر وأبرز من العناصر الفرعية، بلون هادئ. شفافة الخلفية
   فتظهر خلفية المجموعة الموحّدة. (بلا letter-spacing حفاظًا على وصل الحروف العربية.) */
html .fi-sidebar .fi-sidebar-group-label {
    color: #9DBFD6;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
    background: transparent;
    padding-block: 4px !important;
}
/* أيقونة المجموعة (القسم الرئيسي) بلون العنوان المتناسق. */
html .fi-sidebar .fi-sidebar-group-label .fi-icon {
    color: #9DBFD6;
}
/* توحيد محاذاة الأيقونات: نجعل بادنج بداية رأس المجموعة = بادنج العناصر (20px) فتقف
   أيقونات الأقسام على نفس عمود أيقونة لوحة التحكم. */
html .fi-sidebar .fi-sidebar-group-btn {
    padding-inline-start: 20px !important;
    /* لازمة كي يتموضع فاصل ::after بالنسبة للزرّ (عرضه الكامل). */
    position: relative;
}
/* أيقونات العناصر الفرعية أُلغيت على مستوى Filament ($navigationIcon = null). نُخفي
   أيضًا موصّل التداخل (النقطة + الخط) الذي يرسمه Filament للعناصر بلا أيقونة. */
html .fi-sidebar .fi-sidebar-item-grouped-border {
    display: none !important;
}
/* العناصر الفرعية: خط أصغر من عناوين الأقسام الرئيسية. */
html .fi-sidebar .fi-sidebar-item-label {
    font-size: .82rem;
}
/* عناصر المستوى الأعلى (لوحة التحكم — مجموعة بلا رأس group-btn) تُعامَل كقسم رئيسي:
   نفس حجم ووزن ولون عناوين الأقسام للتوحيد الكامل. */
html .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item-label {
    font-size: .9rem !important;
    font-weight: 600 !important;
}
/* توحيد مقاس صفّ لوحة التحكم مع رؤوس الأقسام: نفس الارتفاع (بادنج رأسي 12px بدل 8px
   الموروث من قاعدة العناصر الفرعية) ونفس المحاذاة (بداية السطر لا توسيط). */
html .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item-btn {
    padding-block: 12px !important;
    justify-content: normal !important;
}
/* لوحة التحكم تُعامَل كباقي رؤوس الأقسام: خلفية هادئة ولون ستيل-بلو متطابق، بلا شريط
   الأكتيف الصارخ — فتبدو قسمًا رئيسيًا موحّدًا مع الباقي. */
html .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) {
    background: rgba(255, 255, 255, .04) !important;
}
html .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item-label,
html .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item-btn .fi-icon {
    color: #9DBFD6 !important;
    text-shadow: none !important;
}
/* لوحة التحكم عند التفعيل: نفس أكتيف باقي الأقسام تمامًا (تيل موحّد + نص أبيض). */
html .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item.fi-active > a.fi-sidebar-item-btn {
    background: #0F6E97 !important;
    box-shadow: inset -3px 0 0 0 #5CC4E6, 0 1px 6px rgba(4, 30, 48, .22) !important;
}
html .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item.fi-active .fi-icon {
    color: #FFFFFF !important;
}
/* تقليل المسافة بين العناصر الفرعية + فاصل خفيف بينها. */
html .fi-sidebar-group-items {
    gap: 0 !important;
    row-gap: 0 !important;
}
/* فاصل بين العناصر الفرعية عبر ::before مموضَع (لا border + margin) لأن قاعدة full-bleed
   تفرض margin-inline:0 !important فتُلغي أي إزاحة بالهامش. الـ ::before يبدأ من 56px
   (محاذاة اسم العنصر) حتى الحافة اليسرى — مطابق تمامًا لفاصل رأس القسم. */
html .fi-sidebar-group-items .fi-sidebar-item {
    position: relative;
}
html .fi-sidebar-group-items .fi-sidebar-item + .fi-sidebar-item::before {
    content: "";
    position: absolute;
    inset-inline: 56px 0;
    inset-block-start: 0;
    height: 1px;
    background: rgba(255, 255, 255, .03);
    z-index: 1;
}
html .fi-sidebar-group-items .fi-sidebar-item-btn {
    padding-block: 8px !important;
}
html .fi-sidebar .fi-sidebar-item-btn .fi-icon { color: #86AAC6; transition: color .15s ease; }
html .fi-sidebar .fi-sidebar-item-btn:hover { background: rgba(255, 255, 255, .055); border-radius: 0; }
html .fi-sidebar .fi-sidebar-item-btn:hover .fi-icon { color: #CFE3F1; }
/* أيقونات طيّ الأقسام (chevron) مطفّية لتهدأ الواجهة. */
html .fi-sidebar .fi-sidebar-group-collapse-btn .fi-icon,
html .fi-sidebar .fi-sidebar-group-label .fi-icon { color: #5E86A3; }

/* فاصل رفيع تحت رأس اللوجو يفصله عن التنقّل بأناقة. */
html .fi-sidebar .fi-sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* الأقسام الفرعية: شفافة الخلفية فتظهر خلفية المجموعة الموحّدة، بلا أي فاصل داخلي —
   فيقرأ القسم كله (رأس + عناصر) خلفية واحدة. */
html .fi-sidebar-group-items {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 0 6px;
    margin-top: 0;
    /* عرض القائمة كاملًا. بعد إخفاء حجز شريط التمرير (أدناه) لا يوجد gutter يمنع
       الخلفية من الوصول للحافتين. */
    margin-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
html .fi-sidebar .fi-sidebar-item-btn {
    margin-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* بادنج داخلي للمحتوى كي لا يلتصق بالحافة؛ الخلفية تظلّ واصلة للحافة. */
    padding-inline: 20px !important;
}
/* حركة فتح/طيّ الأقسام: أنيميشن Alpine الافتراضي يحرّك الارتفاع مع قصّ overflow، فيظهر
   نصّ العنصر مقطوعًا نصفيًا أثناء الكشف (شكل مزعج). نجعل الارتفاع لحظيًا (1ms — يكفي
   لإطلاق transitionend فيُنظّف Alpine الحالة) بلا أي انزلاق/قصّ. بلا تلاشٍ (opacity)
   حتى لا تُعاد الحركة مع كل تنقّل SPA (Livewire يعيد بناء القائمة فيُشغّل أي transition). */
html .fi-sidebar .fi-sidebar-group-items {
    transition: height 1ms linear !important;
}
/* القائمة full-bleed: صفر بادنج أفقي على الـ nav فتصل عناصر الأكتيف/الهوفر لحواف
   القائمة تمامًا. نُبقي بادنج أفقي على عناوين المجموعات فقط كي لا يلتصق نصّها بالحافة. */
html .fi-sidebar-nav { padding-inline: 0 !important; }
/* عناصر الـ nav (flex items) لها min-width:auto افتراضيًا فمحتواها يفرض عرضًا أكبر من
   القائمة ويتجاوز الحافة. نُثبّت العرض على 100% ونسمح بالتقلّص (min-width:0). */
html .fi-sidebar-nav > li,
html .fi-sidebar .fi-sidebar-nav-groups,
html .fi-sidebar .fi-sidebar-group,
html .fi-sidebar .fi-sidebar-group-items,
html .fi-sidebar .fi-sidebar-group-items > li,
html .fi-sidebar .fi-sidebar-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* تصفير أي بادنج/هامش أفقي من Filament يزيح المحتوى عن حافة القائمة. */
    padding-inline: 0 !important;
    margin-inline: 0 !important;
}
/* لا بادنج أفقي على عنوان المجموعة كي يبدأ نصّه بعد الأيقونة مباشرة (عند 56px)
   محاذيًا لنص لوحة التحكم — الأيقونة + الفراغ يوفّران المسافة. */
html .fi-sidebar .fi-sidebar-group-label { padding-inline: 0 !important; }

/* العنصر النشط: تيل البراند بتدرّج رأسي هادئ + حافة مضيئة رفيعة على جهة البداية
   (يمين في RTL) كلمسة أناقة، بلا زوايا (full-bleed). */
/* أكتيف موحّد لكل الأقسام (رئيسي وفرعي): تيل براند مطفّي هادئ + شريط جانبي مضيء + نص
   أبيض — أسلوب واحد متّسق في كل القائمة. */
html .fi-sidebar .fi-sidebar-item.fi-active > a.fi-sidebar-item-btn {
    background: #0F6E97;
    box-shadow: inset -3px 0 0 0 #5CC4E6, 0 1px 6px rgba(4, 30, 48, .22);
    border-radius: 0;
}
html .fi-sidebar .fi-sidebar-item.fi-active .fi-icon,
html .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #fff;
    text-shadow: none;
}

/* ===== لمسات أناقة إضافية ===== */
/* شارة العدّاد: لون براند مقصود (كهرماني للانتباه) بنص داكن — بدل الكريمي الباهت. */
html .fi-sidebar .fi-sidebar-item-badge,
html .fi-sidebar .fi-badge {
    background: #E8A100 !important;
    color: #0B2233 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}
html .fi-sidebar .fi-sidebar-item-badge .fi-badge-label,
html .fi-sidebar .fi-badge *{ color: #0B2233 !important; }
/* إيقاع رأسي مريح ومتّسق. */
html .fi-sidebar .fi-sidebar-item-label { line-height: 1.5; }
html .fi-sidebar .fi-sidebar-item-btn { transition: background .15s ease; }

/* شريط تمرير القائمة: صغير ورفيع (5px) بلون أبيض شفاف يتناسب مع القائمة، ومساره شفاف.
   لا نضبط scrollbar-width كي لا يُعطّل تخصيص ::-webkit في كروم. نخفي التجاوز الأفقي. */
html .fi-sidebar-nav {
    overflow-x: hidden;
    /* الشريط ظاهر دائمًا (لا يظهر/يختفي) فلا يتزحزح محتوى القائمة إطلاقًا. مساره شفاف
       وإبهامه لا يظهر إلا عند وجود تمرير، فلا يبدو أي شريط عند عدم الحاجة. */
    overflow-y: scroll;
    scrollbar-gutter: stable;
}
html .fi-sidebar-nav::-webkit-scrollbar { width: 5px; }
html .fi-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
html .fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22);
    border-radius: 999px;
}
html .fi-sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .40); }

/* الجزء العلوي (اللوجو) جزء من القائمة: خلفية شفافة فيظهر تدرّج القائمة الغامق وراء
   اللوجو (خلفيته navy فيندمج مع بداية التدرّج). */
html .fi-sidebar-header-ctn,
html .fi-sidebar-header {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* تقليل التباعد بين الأقسام الرئيسية خالص. */
html .fi-sidebar-nav {
    row-gap: 3px;
}
html .fi-sidebar .fi-sidebar-nav-groups {
    gap: 3px !important;
    row-gap: 3px !important;
}

/* حجز مكان شريط تمرير الصفحة العمودي دائمًا: القائمة position:fixed مثبّتة على الحافة،
   ولو ظهر/اختفى شريط التمرير حسب طول كل صفحة يضيق الإطار المرجعي فتتزحزح القائمة (هزة).
   scrollbar-gutter: stable يُبقي مكان الشريط محجوزًا دائمًا فلا يتغيّر العرض ولا تهتز. */
html { scrollbar-gutter: stable; overflow-y: scroll; }

/* التخطيط: القائمة تبدأ من أعلى الشاشة وتأخذ كامل الارتفاع على يمين الصفحة،
   والهيدر يقعد جنبها (فوق المحتوى فقط) بدل أن يمتدّ فوقها. ديسكتوب فقط —
   على الموبايل تبقى القائمة درجًا منزلقًا كما هي. */
@media (min-width: 64rem) {
    html .fi-sidebar.fi-main-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        inset-inline-start: 0 !important;   /* RTL: الحافة اليمنى */
        height: 100vh !important;
        margin: 0 !important;
        z-index: 30 !important;
    }
    /* الهيدر والمحتوى يفسحان مكان القائمة على اليمين (بعرض القائمة 16rem) فيقعد الهيدر جنبها. */
    html .fi-topbar-ctn,
    html .fi-main-ctn {
        padding-inline-start: 16rem !important;
    }

    /* تمرير الصفحة كلها كالمعتاد (شريط التمرير على يمين الشاشة). القائمة ثابتة
       full-height؛ الـ fixed positioning يجعلها تقف يسار شريط تمرير الصفحة بلا تصادم. */

    /* اللوجو واسم الموقع أعلى القائمة الجانبية: نُظهر رأس القائمة (كان height:0)
       ونُخفي اللوجو المكرّر في الهيدر. */
    html .fi-sidebar .fi-sidebar-header-ctn,
    html .fi-sidebar .fi-sidebar-header {
        display: flex !important;
        align-items: center;
        /* يبدأ من حافة البداية لا التوسيط. */
        justify-content: flex-start !important;
        height: 64px !important;
        min-height: 64px !important;
        /* خلفية الجزء العلوي = نفس نيڤي خلفية اللوجو (#083555) فيتوحّد اللوجو مع الرأس. */
        background: #083555 !important;
    }
    /* البادنج الأفقي على مستوى واحد فقط (الحاوية الخارجية) كي لا يتضاعف: بداية 20px =
       عمود أيقونات الأقسام تمامًا، والحاوية الداخلية بصفر بادنج أفقي. */
    html .fi-sidebar .fi-sidebar-header-ctn {
        padding-block: 0 !important;
        padding-inline: 20px 14px !important;
    }
    html .fi-sidebar .fi-sidebar-header {
        padding-inline: 0 !important;
    }
    html .fi-sidebar .fi-sidebar-header .fi-logo,
    html .fi-sidebar .fi-sidebar-header .eazygo-logo-img { display: block !important; }
    html .fi-topbar .fi-logo { display: none !important; }
    /* تصفير بادنج/هامش حاوية اللوجو (.fi-logo) كي تبدأ العلامة من 20px بالضبط (عمود
       أيقونات الأقسام) بلا إزاحة إضافية. الارتفاع تلقائي (لا 2.6rem الموروثة من
       brandLogoHeight) كي تلتفّ حول اللوجو الأكبر فيتوسّط رأسيًا بلا فيضان. */
    html .fi-sidebar .fi-sidebar-header .fi-logo {
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
    }
    html .fi-sidebar .fi-sidebar-header .eazygo-brand {
        display: flex !important;
        align-items: center;
        gap: 10px;
    }
    /* اللوجو الرسمي بحجم واضح. خلفيته شفافة والرأس نيڤي (#083555)، فتظهر الرسمة عائمة
       على الرأس بلا حدود بادج (لا نضع border-radius فلا حاجة له).

       الحركة: طفو دائم هادئ (ezBrandFloat) + وقفة عند المرور. الوقفة `animation-play-state`
       لا إلغاء الأنيميشن: الرسمة تتجمّد في اللحظة التي وقف عندها المؤشر ثم تكبر بمنحنى فيه
       ارتداد خفيف (السين فوق 1)، فتُقرأ كردّ فعل حيّ لا كأثر تزييني — وترجع من نفس النقطة
       عند إبعاد المؤشر بدل أن تقفز لبداية الدورة. */
    html .fi-sidebar .fi-sidebar-header .eazygo-logo-img {
        height: 58px !important;
        width: auto !important;
        /* نزول 6px مقيس لا مقدَّر: على لقطة المالك كان طرف العلامة العلوي ملاصقًا
           لحافة الرأس فيُقتطع منه نحو 3px، وكلمة EazyGo داخل العلامة تعلو الاسم
           المكتوب بجانبها بـ6px. النزول 6px يعالج الأمرين بقيمة واحدة: يدخل الطرف
           كاملًا (تحت العلامة ~9px فراغ يتّسع له) وتتحاذى الكلمتان أفقيًا.
           `top` لا `transform`: الأخيرة تملكها حركة الطفو فتُلغى كل إطار. */
        position: relative;
        top: 6px;
        transform-origin: center center;
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .38));
        animation: ez-brand-float 5s cubic-bezier(.45, .05, .55, .95) infinite;
        transition: transform .45s cubic-bezier(.34, 1.3, .58, 1), filter .3s ease;
        will-change: transform;
    }
    /* الرأس ارتفاعه 64px واللوجو 58px يكبر إلى 1.1 عند المرور (≈64px) — نمنع أي قصّ من
       الحاويات كي يفيض بأمان بدل أن يُقتطع طرفه. */
    html .fi-sidebar .fi-sidebar-header-ctn,
    html .fi-sidebar .fi-sidebar-header,
    html .fi-sidebar .fi-sidebar-header-logo-ctn,
    html .fi-sidebar .fi-sidebar-header .fi-logo,
    html .fi-sidebar .fi-sidebar-header .eazygo-brand {
        overflow: visible !important;
    }
    html .fi-sidebar .fi-sidebar-header .eazygo-brand:hover .eazygo-logo-img {
        animation-play-state: paused;
        transform: scale(1.1);
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45))
                drop-shadow(0 0 12px rgba(125, 211, 252, .45));
    }
    /* ضغطة ملموسة — :active وحده يكفي: لا مستمع جافاسكربت يتراكم مع تنقّل الـSPA. */
    html .fi-sidebar .fi-sidebar-header .eazygo-brand:active .eazygo-logo-img {
        transform: scale(.96);
        transition-duration: .12s;
    }
    /* رابط العلامة (يظهر بفضل homeUrl): حلقة تركيز واضحة لمن يتنقّل بالكيبورد. */
    html .fi-sidebar .fi-sidebar-header-logo-ctn > a {
        display: inline-flex;
        border-radius: 12px;
    }
    html .fi-sidebar .fi-sidebar-header-logo-ctn > a:focus-visible {
        outline: 2px solid #7dd3fc;
        outline-offset: 3px;
    }
    /* الاسم يلمع مع اللوجو فيُقرآن كعنصر واحد لا كصورة وكلمة متجاورتين. */
    html .fi-sidebar .fi-sidebar-header .eazygo-brand:hover .eazygo-brand-name {
        text-shadow: 0 0 14px rgba(125, 211, 252, .55), 0 1px 2px rgba(6, 20, 38, .45);
    }
    /* اسم الموقع بجانب اللوجو داخل القائمة. */
    html .fi-sidebar .fi-sidebar-header .eazygo-brand-name {
        transition: text-shadow .3s ease;
        color: #ffffff;
        font-weight: 800;
        font-size: 1.2rem;
        letter-spacing: .3px;
        text-shadow: 0 1px 2px rgba(6, 20, 38, .45);
    }
}

/* دون 64rem تختفي القائمة الجانبية وتظهر العلامة في الشريط العلوي — وخلفيته بيضاء.
   العلامة المجسّمة حروفها بيضاء، فبلا خلفية داكنة تذوب في الشريط وتختفي. نضع خلفها
   نفس نيڤي رأس القائمة كبادج، فتقرأ العلامة ويتوحّد شكلها بين المقاسين. */
@media (max-width: 63.999rem) {
    html .fi-topbar .eazygo-brand {
        background: #083555;
        border-radius: 12px;
        padding: 4px 10px 4px 6px;
        box-shadow: 0 2px 8px rgba(8, 53, 85, .28);
    }
    html .fi-topbar .eazygo-brand-name {
        color: #ffffff;
        font-weight: 800;
    }
    html .fi-topbar .eazygo-logo-img {
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35));
        transform-origin: center center;
        animation: ez-brand-float 5s cubic-bezier(.45, .05, .55, .95) infinite;
        transition: transform .45s cubic-bezier(.34, 1.3, .58, 1);
        will-change: transform;
    }
    /* الشريط العلوي يُلمس لا يُمرَّر عليه ⇒ ردّ الفعل على الضغط لا على المرور. */
    html .fi-topbar .eazygo-brand:active .eazygo-logo-img {
        animation-play-state: paused;
        transform: scale(.94);
        transition-duration: .12s;
    }
}

/* في صفحة الدخول: اللوجو كبير فوق البطاقة، ولا نُظهر نص الاسم بجانبه (البطاقة لها عنوانها
   الخاص «الدخول إلى حسابك»، والاسم مكتوب داخل اللوجو أصلًا) فيبقى الرأس نظيفًا.
   للوضعين لا للنهاري وحده: إخفاء عنصر هندسةٌ لا لون، وحصرُه في النهاري كان يترك
   الاسم ظاهرًا بالأبيض في الليلي بجوار اللوجو فيزيح اللوجو عن المنتصف. */
html .fi-simple-header .eazygo-brand-name { display: none; }
/* اللوجو وحده في المنتصف بعد إخفاء الاسم — الحاوية inline-flex فتتوسّط بمحاذاة
   الرأس، ونصفّر الفجوة كي لا تُزيحه مسافةُ عنصرٍ مخفيّ. */
html .fi-simple-header .eazygo-brand {
    justify-content: center;
    gap: 0;
}

/* حجم اللوجو الافتراضي في باقي الأماكن (صفحة الدخول) — يملأ ارتفاع حاويته. */
.eazygo-logo-img { height: 2.4rem; }
.eazygo-brand { display: inline-flex; align-items: center; gap: 10px; }

/* ============================ الفورم + عناصر عامة ============================ */
/* حلقة تركيز موحّدة بلون العلامة على كل حقول اللوحة (نهاري فقط) */
html:not(.dark) .fi-input-wrp:focus-within {
    border-color: var(--ez-primary);
    box-shadow: 0 0 0 3px rgba(14,132,181,.16);
}
/* رفعة خفيفة على الأزرار الأساسية عند المرور (نهاري فقط) */
html:not(.dark) .fi-btn.fi-btn-color-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    transition: transform 0.12s ease, filter 0.15s ease;
}

/* ============================ Tooltip براند EazyGo ============================ */
/* تلوين tooltips اللوحة (Tippy) بالأزرق الداكن — يشمل tooltip عمود «المسار». (نهاري فقط) */
html:not(.dark) .tippy-box {
    background-color: var(--ez-primary-dark);
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 10px 26px -10px rgba(14, 116, 144, 0.55);
}
html:not(.dark) .tippy-box > .tippy-arrow {
    color: var(--ez-primary-dark);
}
html:not(.dark) .tippy-box > .tippy-svg-arrow {
    fill: var(--ez-primary-dark);
}

/* ==================== إشعارات احترافية (toast) — نهاري فقط ==================== */
/* رسائل «تم الحفظ/الإضافة/الخطأ» كبطاقة نظيفة: ظل عميق، حواف مدوّرة، وشريط جانبي */
/* ملوّن حسب النوع (نجاح=أخضر/خطأ=أحمر/تحذير=أصفر) — أوضح وأكثر احترافية. */
html:not(.dark) .fi-no-notification {
    border: 1px solid var(--ez-hairline);
    border-radius: 0.85rem;
    box-shadow: 0 14px 34px -12px rgba(11, 34, 51, 0.26), 0 4px 10px -4px rgba(11, 34, 51, 0.12);
    border-inline-start-width: 4px;
    border-inline-start-color: var(--ez-primary);
}
/* شريط جانبي ملوّن حسب حالة الإشعار (Filament يضيف fi-status-* على البطاقة). */
html:not(.dark) .fi-no-notification.fi-status-success {
    border-inline-start-color: var(--ez-accent);
}
html:not(.dark) .fi-no-notification.fi-status-danger {
    border-inline-start-color: var(--ez-danger);
}
html:not(.dark) .fi-no-notification.fi-status-warning {
    border-inline-start-color: var(--ez-warning);
}
/* العنوان أغمق وأوضح، والنص الثانوي أهدأ. */
html:not(.dark) .fi-no-notification-title {
    font-weight: 700;
    color: var(--ez-ink);
}
html:not(.dark) .fi-no-notification-body {
    color: var(--ez-muted);
}

/* ==================== مودالات احترافية (تأكيد/حذف) — نهاري فقط ==================== */
/* نافذة المودال كبطاقة نظيفة: حواف مدوّرة، ظل عميق، حافة هادئة. */
html:not(.dark) .fi-modal-window {
    border-radius: 1rem;
    border: 1px solid var(--ez-hairline);
    box-shadow: 0 24px 60px -18px rgba(11, 34, 51, 0.35), 0 8px 20px -8px rgba(11, 34, 51, 0.16);
}
/* العنوان أغمق وأوضح. */
html:not(.dark) .fi-modal-heading {
    font-weight: 700;
    color: var(--ez-ink);
}
/* الوصف أهدأ وأوسع سطرًا، مع إظهار الأسطر (رسالة الحذف الجماعي: كل سجل في سطر). */
html:not(.dark) .fi-modal-description {
    color: var(--ez-muted);
    line-height: 1.7;
    white-space: pre-line;
}

/* ==================== زر طيّ/فتح القائمة (هامبرغر) جنب اللوجو ==================== */
/* Filament يضع زر الطيّ في الـ topbar لوجود topbar؛ نخفيه ونستخدم زرًّا مخصّصًا في رأس
   القائمة جنب اللوجو والاسم — أوضح وأكثر تناسقًا.
   ⚠️ على الشاشات الصغيرة فقط زرّ الـ topbar يفتح القائمة: القائمة off-canvas مخفيّة
   بالكامل، وزرّنا المخصّص يعيش داخلها فلا يُرى. إخفاء زرّ الـ topbar بلا حدّ مقاس
   كان يترك الموبايل بلا أي وسيلة لفتح القائمة إطلاقًا. لذا نقصر الإخفاء على
   الديسكتوب (64rem = نقطة lg في Filament حيث تصير القائمة ثابتة). */
@media (min-width: 64rem) {
    html .fi-topbar-collapse-sidebar-btn-ctn,
    html .fi-topbar-open-sidebar-btn,
    html .fi-topbar-close-sidebar-btn {
        display: none !important;
    }
}
/* رأس القائمة صفٌّ واحد بتوزيع متساوٍ: لوجو (يمين) — اسم (وسط) — هامبرغر (شمال)، والمسافات
   متساوية عبر space-between. padding 20px = padding أيقونات القائمة فيتحاذى اللوجو والهامبرغر
   مع الأيقونات تحتهما. */
html .fi-sidebar .fi-sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    /* اللوجو يمينًا (padding-start) والهامبرغر شمالًا (padding-end أصغر ⇒ أقرب لحافة القائمة). */
    padding-inline-start: 12px !important;
    padding-inline-end: 3px !important;
}
/* الاسم الأصلي مدفون داخل حاويات اللوجو المتداخلة فيصعب توسيطه؛ نخفيه ونعرض نسخة مستقلّة
   (ez-sidebar-name عبر render hook) عنصرًا مباشرًا في الرأس. فيصير الرأس ثلاثة عناصر:
   حاوية اللوجو (يمين) + الاسم (وسط) + الهامبرغر (شمال). */
html .fi-sidebar.fi-sidebar-open .fi-sidebar-header .eazygo-brand .eazygo-brand-name {
    display: none !important;
}
/* الاسم مثبَّت في منتصف الرأس تمامًا (position مطلق بالنسبة للرأس)، فيبقى وسطًا حقيقيًا
   بلا تأثّر باختلاف عرض اللوجو والهامبرغر. نفس تنسيق الاسم الأصلي. */
html .fi-sidebar .fi-sidebar-header .ez-sidebar-name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: .3px;
    text-shadow: 0 1px 2px rgba(6, 20, 38, .45);
    white-space: nowrap;
}
/* يظهر الاسم المستقلّ فقط والقائمة مفتوحة (يختفي عند الطيّ مثل اللوجو). */
html .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header .ez-sidebar-name {
    display: none !important;
}
/* اللوجو والهامبرغر بحجم ثابت لا ينضغط (الاسم يأخذ الوسط)، فلا يُقصّ اللوجو من حافته. */
html .fi-sidebar .fi-sidebar-header-logo-ctn,
html .fi-sidebar .fi-sidebar-header .ez-sidebar-toggle {
    flex: 0 0 auto !important;
}
/* مصدر الـ padding الفعلي هو الحاوية الخارجية .fi-sidebar-header-ctn (وليس .fi-sidebar-header)
   — نصفّرها ونتحكّم في الرأس مباشرة: اللوجو يمينًا (start)، والهامبرغر قرب حافة الشمال (end أصغر). */
html .fi-sidebar.fi-sidebar-open .fi-sidebar-header-ctn {
    padding: 0 !important;
}
html .fi-sidebar.fi-sidebar-open .fi-sidebar-header {
    /* الرأس مرجع تموضّع الاسم المطلق (relative). اللوجو أعرض من الهامبرغر بنحو 24px، فنعوّض
       الفرق في الـ padding (يمين أصغر/شمال أكبر) كي تتساوى المسافتان المرئيّتان حول الاسم
       الوسطيّ: حافة اللوجو الداخلية (start+عرض اللوجو) = حافة الهامبرغر الداخلية (end+عرضه). */
    position: relative;
    padding-inline-start: 6px !important;
    padding-inline-end: 30px !important;
    /* الرأس يملأ الحاوية بالكامل كي يلتصق اللوجو باليمين والهامبرغر بالشمال. */
    flex: 1 1 auto !important;
    width: 100% !important;
}
/* زر الهامبرغر: مربّع أنيق يتناسق مع أيقونات القائمة. */
html .ez-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    color: #86AAC6;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
html .ez-sidebar-toggle:hover {
    background: rgba(255, 255, 255, .08);
    color: #CFE3F1;
}
/* في الوضع المطويّ (القائمة بلا fi-sidebar-open): ضيّقة واللوجو مخفيّ، فنوسّط الهامبرغر. */
html .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
    justify-content: center !important;
    padding-inline: 0 !important;
}

/* زحزحة ناعمة لموضع المحتوى والـ topbar عند طيّ/فتح القائمة (كالمواقع الحديثة: يوتيوب). */
html .fi-main-ctn,
html .fi-main,
html .fi-topbar-ctn {
    transition: padding-inline-start .25s ease, padding-inline-end .25s ease !important;
}
/* عند طيّ القائمة: هامش الحاوية ناحية القائمة يقلّ لعرض القائمة المطوية (بدل بقائه 16rem
   بسبب تثبيت sidebarWidth)، فتتمدّد بلوكات المحتوى وتأخذ الفراغ ناحية القائمة — كيوتيوب. */
@media (min-width: 64rem) {
    html .fi-main-ctn:not(.fi-main-ctn-sidebar-open) {
        padding-inline-start: 4.25rem !important;
    }
    /* الـ topbar خارج main-ctn (يُرندر قبل الـ layout)، فنكشف حالة الطيّ عبر :has ونقلّل
       هامشه ليتحاذى مع المحتوى بدل بقائه بعيدًا عن القائمة. */
    html:has(.fi-main-ctn:not(.fi-main-ctn-sidebar-open)) .fi-topbar-ctn {
        padding-inline-start: 4.25rem !important;
    }
}

/* ===========================================================================
   طبقة تخطيط اللوحة (منقولة من AdminPanelProvider::boot inline — #47)
   جودة فقط: نفس القواعد بالضبط، بلا تغيير سلوك. كانت تُحقن بعد هذا الملف عبر
   render hook، فأُلحقت هنا آخر الملف حفاظًا على ترتيب الـ cascade نفسه.
   =========================================================================== */

/* هامش جانبي مريح من ناحية الشمال (inline-end في RTL) كي لا يلتصق المحتوى بحافة
   الشاشة، ومسافة مماثلة من ناحية القائمة (inline-start) كي لا تلتصق البلوكات
   بالـ sidebar/خط التمرير بينهما. */
.fi-main{padding-inline-start:1.5rem !important;padding-inline-end:1.5rem !important;padding-block:14px !important;}
/* تقليل زوايا التدوير في اللوحة كلها دفعة واحدة عبر متغيّرات Filament/Tailwind العامة
   (يستعملها الثيم في البطاقات/الأزرار/الحقول/البلوكات). الـ pills والأفاتار تستخدم
   rounded-full (قيمة ثابتة) فلا تتأثر وتبقى دائرية. */
:root{--radius-md:0.25rem !important;--radius-lg:0.375rem !important;--radius-xl:0.5rem !important;}
/* خلفية رمادية ناعمة لمنطقة المحتوى في الوضع النهاري فقط (لا تمسّ الوضع الليلي). */
html:not(.dark) .fi-body,html:not(.dark) .fi-main{background-color:var(--ez-canvas) !important;}
/* بطاقات/بلوكات بلون أبيض هادئ (off-white) بدل الأبيض الساطع — نهاري فقط. */
html:not(.dark) .fi-section:not(.fi-section-not-contained),html:not(.dark) .fi-wi-stats-overview-stat,html:not(.dark) .fi-ta-ctn{background-color:var(--ez-surface) !important;}
/* شريط عناوين الأعمدة في الجداول بتينت أزرق من البراند (نهاري فقط). نلوّن صف الـ thead
   نفسه (يمتدّ على كل عرض الجدول) إضافةً للخلايا، فتملأ الخلفية الشريط كله من الحافة للحافة. */
html:not(.dark) .fi-ta-table thead,html:not(.dark) .fi-ta-table thead tr,html:not(.dark) .fi-ta-header-cell{background-color:#E8F1F7 !important;}
/* كارت كودي الدولة/الاتصال أبيض ساطع مثل كارت الاسم بدل الأوف-وايت العام — نهاري فقط.
   الكارت المرئي هو .fi-section الجوّاني داخل الـ wrapper الحامل للكلاس، فنستهدفه هو. */
html:not(.dark) .fi-country-codes-card .fi-section{background-color:#fff !important;}
/* الـ breadcrumb بلا خلفية خاصة — يقعد مباشرة على باند الهيدر الملوّن. */
html:not(.dark) .fi-breadcrumbs{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;}
/* نصوص ووصلات الـ breadcrumb بدرجات نص البراند — الصفحة الحالية أغمق — نهاري فقط. */
html:not(.dark) .fi-breadcrumbs .fi-link{color:var(--ez-body) !important;}
html:not(.dark) .fi-breadcrumbs-item:last-child .fi-link{color:var(--ez-ink) !important;font-weight:600 !important;}
html:not(.dark) .fi-breadcrumbs .fi-icon{color:var(--ez-muted) !important;}
/* تصفير الهوامش حول الـ breadcrumb وحاوية الأزرار ليتوسّطا في الـ band بالظبط. */
.fi-breadcrumbs{margin:0 !important;}.fi-header-actions-ctn{margin:0 !important;}
/* مسافة بين الـ topbar والبلوك (حول شريط الهيدر). */
.fi-page-header-main-ctn{gap:14px !important;padding-top:0 !important;}
/* شريط الهيدر (breadcrumb + زر إضافة): توسيط رأسي ومسافة. */
.fi-header{align-items:center !important;padding:12px 16px !important;}
/* إنزال قائمة التنقّل قليلًا كي يحاذي أول عنصر ("لوحة التحكم") باند الهيدر أفقيًا،
   وتصغير الهامش الأفقي (الافتراضي 24px) كي يقترب صندوق عنصر القائمة من باند المحتوى. */
.fi-sidebar-nav{padding-block-start:20px !important;padding-inline:12px !important;}
/* إبعاد القائمة قليلًا عن الحافة اليمنى للشاشة (ديسكتوب فقط ≥64rem حيث يصبح الـ sidebar
   ثابتًا). على الموبايل الـ sidebar درج منزلق، وفرض inset/margin كان يكسر تموضّعه. */
@media (min-width:64rem){.fi-sidebar{margin-inline-start:16px !important;inset-inline-start:16px !important;}}
/* باند الهيدر كله: خلفية فاتحة بتدرّج براند ناعم + إطار وظل — نهاري فقط. */
html:not(.dark) .fi-header{background-image:linear-gradient(135deg,var(--ez-canvas) 0%,var(--ez-hairline) 100%) !important;border:1px solid var(--ez-hairline) !important;border-radius:7px !important;box-shadow:0 1px 3px rgba(51,65,85,0.12) !important;}
/* تصغير عنوان الهيدر ليتناسب مع خطوط الداشبورد بدل الحجم الكبير الافتراضي. */
.fi-header-heading{font-size:1.125rem !important;line-height:1.5rem !important;font-weight:600 !important;}
/* عنوان لوحة التحكم (هيدر بلا breadcrumbs) أهدأ: وزن أخف ولون رمادي أنعم — نهاري فقط. */
html:not(.dark) .fi-header:not(.fi-header-has-breadcrumbs) .fi-header-heading{font-weight:500 !important;color:var(--ez-body) !important;letter-spacing:0 !important;}
/* أزرار الفورم على الشمال مع الحفاظ على ترتيبها الأصلي (fi-align-end يعكسها بـ row-reverse). */
.fi-ac.fi-align-end{flex-direction:row !important;justify-content:flex-end !important;}
/* رفع صورة العلم: تنظيف مصادر الفراغ في ثيم Filament (هامش list-scroller و padding عنصر
   الملف) مع تدوير الحواف وقصّ ما يخرج. */
.fi-fo-file-upload.flag-upload-compact .filepond--root{margin:0 !important;border-radius:7px !important;overflow:hidden !important;}
/* معاينة العلم الحالي داخل الباند وقت التعديل: الصورة كخلفية مع طبقة بيضاء شفافة تُبقي
   نص "ارفع صورة" مقروءًا — نهاري فقط. عند رفع صورة جديدة تغطّيها معاينة FilePond. */
html:not(.dark) .fi-fo-file-upload.flag-upload-compact[data-current-flag] .filepond--root{position:relative !important;background-image:linear-gradient(rgba(247,248,251,0.10),rgba(247,248,251,0.10)),var(--current-flag) !important;background-size:cover,contain !important;background-position:center,center !important;background-repeat:no-repeat,no-repeat !important;}
/* نفس المعاينة في الوضع الليلي: طبقة تعتيم غامقة بدل الفاتحة كي يبقى النص مقروءًا. */
.dark .fi-fo-file-upload.flag-upload-compact[data-current-flag] .filepond--root{position:relative !important;background-image:linear-gradient(rgba(15,23,42,0.28),rgba(15,23,42,0.28)),var(--current-flag) !important;background-size:cover,contain !important;background-position:center,center !important;background-repeat:no-repeat,no-repeat !important;}
/* نص الرفع في منتصف الباند: خلفية pill غامقة شفافة + نص أبيض وظلّ، يبقى واضحًا فوق أي علم. */
.fi-fo-file-upload.flag-upload-compact .filepond--drop-label{z-index:2 !important;}
/* ثيم Filament يفرض لون نص الـ label عبر cascade layer، فنستخدم -webkit-text-fill-color لضمان الأبيض. */
.fi-fo-file-upload.flag-upload-compact .filepond--drop-label label,.fi-fo-file-upload.flag-upload-compact .filepond--drop-label label *{color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;}
.fi-fo-file-upload.flag-upload-compact .filepond--drop-label label{font-weight:600 !important;text-shadow:0 1px 3px rgba(0,0,0,0.85) !important;background:rgba(15,23,42,0.58) !important;padding:5px 12px !important;border-radius:8px !important;box-shadow:0 1px 3px rgba(0,0,0,0.4) !important;cursor:pointer !important;transition:background .15s ease,box-shadow .15s ease,transform .15s ease !important;}
.fi-fo-file-upload.flag-upload-compact .filepond--label-action{text-decoration-color:rgba(255,255,255,0.7) !important;}
/* تفاعل hover: الوقوف على العلم يُبرز الـ pill ويُظهر مؤشّر اليد (الضغط يفتح منتقي الملفات). */
.fi-fo-file-upload.flag-upload-compact .filepond--root{cursor:pointer !important;}
.fi-fo-file-upload.flag-upload-compact .filepond--root:hover .filepond--drop-label label{background:rgba(15,23,42,0.85) !important;box-shadow:0 0 0 2px rgba(255,255,255,0.6),0 2px 7px rgba(0,0,0,0.55) !important;transform:translateY(-1px) !important;}
/* تاج صغير "العلم الحالي" أعلى الباند للتوضيح (لا يعترض الضغط على منطقة الرفع). */
html:not(.dark) .fi-fo-file-upload.flag-upload-compact[data-current-flag] .filepond--root::after{content:"العلم الحالي" !important;position:absolute !important;top:6px !important;inset-inline-start:8px !important;z-index:2 !important;font-size:11px !important;line-height:1 !important;color:#475569 !important;background:rgba(255,255,255,0.88) !important;padding:3px 7px !important;border-radius:5px !important;pointer-events:none !important;box-shadow:0 1px 2px rgba(51,65,85,0.15) !important;}
/* نفس التاج في الوضع الليلي بخلفية غامقة ونص فاتح. */
.dark .fi-fo-file-upload.flag-upload-compact[data-current-flag] .filepond--root::after{content:"العلم الحالي" !important;position:absolute !important;top:6px !important;inset-inline-start:8px !important;z-index:2 !important;font-size:11px !important;line-height:1 !important;color:#e2e8f0 !important;background:rgba(15,23,42,0.85) !important;padding:3px 7px !important;border-radius:5px !important;pointer-events:none !important;box-shadow:0 1px 2px rgba(0,0,0,0.4) !important;}
/* قائمة الملفات فارغة فتعترض الضغط؛ pointer-events:none تمرّره للحقل تحتها، مع إبقاء عنصر
   الملف نفسه (عند وجود صورة) قابلًا للضغط لإظهار زر الحذف. */
.fi-fo-file-upload.flag-upload-compact .filepond--list-scroller{margin:0 !important;pointer-events:none !important;}
.fi-fo-file-upload.flag-upload-compact .filepond--item{margin:0 !important;pointer-events:auto !important;}
.fi-fo-file-upload.flag-upload-compact .filepond--file{padding:0 !important;}
/* ── معاينة الصورة بعد الرفع: صورة كاملة واضحة + letterbox أبيض + اسم/حجم أسفلها + زر حذف أعلى اليسار ── */
/* مساحة أسفل الصورة لشريط الاسم/الحجم (فقط عند وجود ملف) — على الحاوية الخارجية لأن
   FilePond يثبّت ارتفاع .filepond--root inline فلا يتمدّد بالـ padding. */
.fi-fo-file-upload.flag-upload-compact .fi-fo-file-upload-input-ctn:has(.filepond--item){padding-bottom:2.5rem !important;}
/* السماح للشريط بالظهور أسفل الصورة (بدل قصّه) — الحواف المدوّرة مصدرها طبقات المعاينة نفسها. */
.fi-fo-file-upload.flag-upload-compact .filepond--root:has(.filepond--item),.fi-fo-file-upload.flag-upload-compact .filepond--list-scroller,.fi-fo-file-upload.flag-upload-compact .filepond--list,.fi-fo-file-upload.flag-upload-compact .filepond--item,.fi-fo-file-upload.flag-upload-compact .filepond--file-wrapper,.fi-fo-file-upload.flag-upload-compact .filepond--file{overflow:visible !important;}
.fi-fo-file-upload.flag-upload-compact .filepond--panel-root{border-radius:7px !important;}
/* طبقات المعاينة بحواف مدوّرة، والصورة تُعرض كاملة (contain) بلا قصّ. */
.fi-fo-file-upload.flag-upload-compact .filepond--image-preview-wrapper,.fi-fo-file-upload.flag-upload-compact .filepond--image-preview,.fi-fo-file-upload.flag-upload-compact .filepond--image-preview-overlay{border-radius:7px !important;}
.fi-fo-file-upload.flag-upload-compact .filepond--image-preview img,.fi-fo-file-upload.flag-upload-compact .filepond--image-preview canvas{width:100% !important;height:100% !important;object-fit:contain !important;}
/* letterbox أبيض (نهاري فقط) بدل الأسود عند الصور الصغيرة/المختلفة النسبة. */
html:not(.dark) .fi-fo-file-upload.flag-upload-compact .filepond--image-preview,html:not(.dark) .fi-fo-file-upload.flag-upload-compact .filepond--image-preview-wrapper{background:#ffffff !important;}
/* في الوضع الليلي: letterbox شفاف ليأخذ لون الكارت/الصفحة الداكن فيندمج (بدل الأسود). */
.dark .fi-fo-file-upload.flag-upload-compact .filepond--image-preview,.dark .fi-fo-file-upload.flag-upload-compact .filepond--image-preview-wrapper,.dark .fi-fo-file-upload.flag-upload-compact .filepond--panel-root{background:transparent !important;}
/* إخفاء التدرّجات الداكنة ونص الحالة فوق الصورة (لا كلام فوق الصورة). */
.fi-fo-file-upload.flag-upload-compact .filepond--image-preview-overlay{display:none !important;}
.fi-fo-file-upload.flag-upload-compact .filepond--file-status{display:none !important;}
/* شريط الاسم/الحجم أسفل الصورة: نص داكن بلا خلفية فوق الصورة. */
.fi-fo-file-upload.flag-upload-compact .filepond--file-info{position:absolute !important;top:100% !important;inset-inline:0 !important;width:auto !important;max-width:none !important;margin:0 !important;padding:0.45rem 0.55rem !important;display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center !important;justify-content:space-between !important;gap:0.5rem !important;background:transparent !important;border-radius:0 !important;box-shadow:none !important;backdrop-filter:none !important;}
/* FilePond يحرّك الشريط بنابض inline `transform:translate3d(x,0,0)` يحسبه من عرض زرّ الحذف،
   ويُعيد الحساب كلّما تغيّر محتوى العنصر (وصول الحجم مثلًا) ⇒ الاسم والحجم ينزلقان يمينًا بعد
   ظهور الصورة. الشريط هنا مثبّت بـ inset-inline فلا يحتاج إزاحة أصلًا: نُلغي الـ transform على
   الحاوية نفسها لا على أبنائها فقط (‏`!important` في الستايل شيت يعلو على inline بلا important). */
.fi-fo-file-upload.flag-upload-compact .filepond--file-info,
.fi-fo-file-upload.flag-upload-compact .filepond--file-info *{text-shadow:none !important;transform:none !important;}
.fi-fo-file-upload.flag-upload-compact .filepond--file-info-main{position:static !important;min-width:0 !important;font-weight:600 !important;font-size:0.8rem !important;color:#334155 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;}
.fi-fo-file-upload.flag-upload-compact .filepond--file-info-sub{position:static !important;flex:none !important;opacity:1 !important;font-size:0.72rem !important;color:#64748b !important;white-space:nowrap !important;}
/* زر الحذف أعلى اليسار (بدل منتصف الصورة) — نستهدف remove و revert معًا. */
.fi-fo-file-upload.flag-upload-compact .filepond--action-remove-item,.fi-fo-file-upload.flag-upload-compact .filepond--action-revert-item-processing{top:0.4rem !important;left:0.4rem !important;right:auto !important;bottom:auto !important;transform:none !important;width:1.85em !important;height:1.85em !important;}
.fi-fo-file-upload.flag-upload-compact .fi-fo-file-upload-input-ctn{padding:0 !important;}

/* مؤشّر التكبير على كل صورة قابلة للمعاينة (eazygo-lightbox.js) — نفس مُحدِّد السكربت.
   يُستثنى حقل الرفع: معاينته ليست هدفًا للتكبير بل للحذف/الاستبدال. */
.fi-ta-image img,.fi-in-image img,img.eazygo-lightbox{cursor:zoom-in;}
.filepond--root .fi-ta-image img,.filepond--root .fi-in-image img{cursor:inherit;}

/* ── الصفحات: تكبير بلوك محتوى المحرّر (بنيوي فقط بلا ألوان) — page-body-editor على fi-fo-rich-editor-main. ── */
.fi-fo-rich-editor-main.page-body-editor .fi-fo-rich-editor-content{min-height:24rem !important;}
/* الصفحات: ألوان معاينة المحرّر في الوضع الفاتح فقط لتطابق شاشة التطبيق بلا كسر ألوان المستخدم. */
html:not(.dark) .fi-fo-rich-editor-main.page-body-editor .fi-fo-rich-editor-content :is(h1,h2,h3,h4,h5,h6){color:#0B2233;font-weight:700;font-size:15px;}
html:not(.dark) .fi-fo-rich-editor-main.page-body-editor .fi-fo-rich-editor-content p{color:#38536B;font-size:13px;line-height:1.7;}
html:not(.dark) .fi-fo-rich-editor-main.page-body-editor .fi-fo-rich-editor-content span.color{color:var(--color);}
html:not(.dark) .fi-fo-rich-editor-main.page-body-editor .fi-fo-rich-editor-content ul>li::marker{color:#2C7BE5;}

/* ═══════════ جداول التقارير — مطابقة لجداول Filament في اللوحة (page: table-report) ═══════════ */
/* بنيوي لكل الأوضاع؛ الألوان للوضع الفاتح فقط (html:not(.dark)) مطابقةً لجداول الموارد:
   header بتينت البراند #E8F1F7 · hover #EEF5FA · فواصل أعمدة الرأس · حاوية بيضاء. */
.eazygo-report-table-wrap{overflow-x:auto;border-radius:0.75rem;}
.eazygo-report-table{width:100%;border-collapse:collapse;font-size:0.875rem;line-height:1.5;}
.eazygo-report-table th,.eazygo-report-table td{padding:0.75rem 0.75rem;text-align:start;vertical-align:middle;}
.eazygo-report-table th:first-child,.eazygo-report-table td:first-child{padding-inline-start:1.5rem;}
.eazygo-report-table th:last-child,.eazygo-report-table td:last-child{padding-inline-end:1.5rem;}
.eazygo-report-table thead th{font-size:0.875rem;font-weight:600;}
.eazygo-report-table tbody td{border-top:1px solid transparent;}
.eazygo-report-table tfoot td{font-weight:700;border-top:1px solid transparent;}
/* عمود الترتيب (#) وعمود القيمة الرقمية — محاذاة وأرقام متساوية العرض للاحترافية والتناسق. */
.eazygo-report-table .ezr-idx{width:3.5rem;text-align:center;font-variant-numeric:tabular-nums;}
.eazygo-report-table .ezr-num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap;width:1%;}
.eazygo-report-table td.eazygo-report-empty{padding:2.75rem 1rem;text-align:center;border-top:0;}
.ezr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0.9rem;margin-bottom:1rem;}
.ezr-stat{display:flex;align-items:center;gap:0.85rem;padding:1rem;border-radius:0.75rem;}
.ezr-stat-ic{display:inline-flex;align-items:center;justify-content:center;width:2.65rem;height:2.65rem;border-radius:0.8rem;flex:0 0 auto;}
.ezr-stat-body{display:flex;min-width:0;flex-direction:column;gap:0.2rem;}
.ezr-stat-label{font-size:0.78rem;font-weight:600;line-height:1.3;}
.ezr-stat-value{font-size:1.4rem;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ezr-svg,.ezr-stat-svg{width:1.35rem;height:1.35rem;}
.ezr-bar-wrap{display:flex;align-items:center;gap:0.55rem;justify-content:flex-end;}
.ezr-bar-num{font-variant-numeric:tabular-nums;font-weight:600;min-width:2.5ch;text-align:end;}
.ezr-bar-track{width:120px;height:8px;border-radius:999px;overflow:hidden;flex:0 0 auto;}
.ezr-bar-fill{display:block;height:100%;border-radius:999px;}
.eazygo-report-table td.ezr-has-bar{width:200px;}

/* ألوان الوضع الفاتح فقط — نفس تينت جداول Filament؛ لا نمسّ الوضع الداكن (قاعدة المشروع). */
html:not(.dark) .ezr-stat{background:#ffffff;border:1px solid #e5e7eb;box-shadow:0 8px 22px rgba(14,132,181,.08);}
html:not(.dark) .ezr-stat-ic{background:#E8F1F7;color:var(--ez-primary);}
html:not(.dark) .ezr-stat-label{color:#5b6b78;}
html:not(.dark) .ezr-stat-value{color:#0b2233;}
html:not(.dark) .ezr-bar-track{background:#e8eef3;}
html:not(.dark) .ezr-bar-fill{background:linear-gradient(90deg,var(--ez-primary),#3aa7d4);}
html:not(.dark) .eazygo-report-table-wrap{border:1px solid #e5e7eb;background:#ffffff;}
html:not(.dark) .eazygo-report-table thead th{background-color:#E8F1F7;color:#0b2233;border-bottom:1px solid #d6e3ec;}
html:not(.dark) .eazygo-report-table thead th:not(:last-child){border-inline-end:1px solid #d6e3ec;}
html:not(.dark) .eazygo-report-table tbody td{border-top-color:#eceff2;color:#1f2937;}
html:not(.dark) .eazygo-report-table tbody tr{transition:background-color 0.12s ease;}
html:not(.dark) .eazygo-report-table tbody tr:hover{background-color:#EEF5FA;}
html:not(.dark) .eazygo-report-table .ezr-idx{color:#8a97a0;}
html:not(.dark) .eazygo-report-table tbody .ezr-num{color:#0b2233;font-weight:600;}
html:not(.dark) .eazygo-report-table tfoot tr{background-color:#E8F1F7;color:#0b2233;}
html:not(.dark) .eazygo-report-table tfoot td{border-top-color:#d6e3ec;}
html:not(.dark) .eazygo-report-table td.eazygo-report-empty{color:#6b7280;}

/* ==================== تثبيت عمود الإجراءات في الجداول العريضة ==================== */
/* يظل عمود الإجراءات (الأخير) مثبّتًا عند حافة القراءة أثناء التمرير الأفقي فلا يختفي،
   دون تغيير ترتيب أو محتوى بقية الأعمدة. يعمل RTL وLTR عبر inset-inline-end.
   الجداول بلا إجراءات (recordActions([])) لا تُطابَق (لا خلية fi-ta-actions تُرسم).
   :has() مدعوم في المتصفحات الحديثة (Chrome/Edge/Safari/Firefox). */
.fi-ta-table td.fi-ta-cell:has(> .fi-ta-actions),
.fi-ta-table thead .fi-ta-header-cell.fi-align-end,
.fi-ta-table thead .fi-ta-actions-header-cell{
    position: sticky;
    inset-inline-end: 0;
}
.fi-ta-table td.fi-ta-cell:has(> .fi-ta-actions){ z-index: 1; }
.fi-ta-table thead .fi-ta-header-cell.fi-align-end,
.fi-ta-table thead .fi-ta-actions-header-cell{ z-index: 2; }
/* عند فتح قائمة الإجراءات تبقى داخل خلية sticky؛ نرفع تلك الخلية وحدها حتى لا تغطيها
   خلايا الإجراءات في الصفوف التالية (ملاحظة العميل ٥). اللوحة المغلقة يخفيها x-show
   بـdisplay:none. قاعدتان منفصلتان عمدًا: ‎:has()‎ لا يُعشَّش داخل ‎:has()‎، وقائمة
   محدِّدات فيها محدِّد باطل تُسقط القاعدة كلها بما فيها الاحتياط. */
.fi-ta-table td.fi-ta-cell:has(> .fi-ta-actions .fi-dropdown-panel:not([style*="display: none"]):not([style*="display:none"])){ z-index: 30; }
.fi-ta-table td.fi-ta-cell:has(> .fi-ta-actions):focus-within{ z-index: 30; }

/* خلفية صلبة تمنع ظهور بقية الأعمدة أسفل الخلية المثبّتة — نهاري */
html:not(.dark) .fi-ta-table td.fi-ta-cell:has(> .fi-ta-actions){ background-color: var(--ez-surface); }
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{ background-color: #E8F1F7; }
html:not(.dark) .fi-ta-row:hover td.fi-ta-cell:has(> .fi-ta-actions){ background-color: #EEF5FA; }

/* ليلي: مطابقة سطح Filament عبر متغيّر الرمادي نفسه (خلفية وظيفية للتثبيت لا تزيين) */
html.dark .fi-ta-table td.fi-ta-cell:has(> .fi-ta-actions),
html.dark .fi-ta-table thead .fi-ta-header-cell.fi-align-end,
html.dark .fi-ta-table thead .fi-ta-actions-header-cell{ background-color: var(--gray-900); }

/* ==================== جداول التقارير — الوضع الليلي ==================== */
/* الفئات المخصّصة (.eazygo-report-table/.ezr-*) لها ألوان نهارية فقط، فتختفي أسطر
   الصفوف ومسار الأشرطة في الدارك (border-top شفّاف بلا لون ليلي). نضيف نسخة ليلية
   مقصورة على هذه العناصر المخصّصة كي تظهر الأسطر والمحتوى (المسافرون/العملاء). */
html.dark .ezr-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);}
html.dark .ezr-stat-ic{background:rgba(14,132,181,.18);color:#46B2DB;}
html.dark .ezr-stat-label{color:#93a4b3;}
html.dark .ezr-stat-value{color:#e8eef3;}
html.dark .ezr-bar-track{background:rgba(255,255,255,.12);}
html.dark .ezr-bar-fill{background:linear-gradient(90deg,#0E84B5,#46B2DB);}
html.dark .eazygo-report-table-wrap{border:1px solid rgba(255,255,255,.08);}
html.dark .eazygo-report-table thead th{background-color:rgba(255,255,255,.05);color:#e8eef3;border-bottom:1px solid rgba(255,255,255,.1);}
html.dark .eazygo-report-table thead th:not(:last-child){border-inline-end:1px solid rgba(255,255,255,.08);}
html.dark .eazygo-report-table tbody td{border-top-color:rgba(255,255,255,.09);color:#c7d4de;}
html.dark .eazygo-report-table tbody tr{transition:background-color 0.12s ease;}
html.dark .eazygo-report-table tbody tr:hover{background-color:rgba(255,255,255,.05);}
html.dark .eazygo-report-table .ezr-idx{color:#7d8f9d;}
html.dark .eazygo-report-table tbody .ezr-num{color:#e8eef3;font-weight:600;}
html.dark .eazygo-report-table tfoot tr{background-color:rgba(255,255,255,.05);color:#e8eef3;}
html.dark .eazygo-report-table tfoot td{border-top-color:rgba(255,255,255,.1);}
html.dark .eazygo-report-table td.eazygo-report-empty{color:#8a99a6;}

/* ============================ شبكة أسعار الطرود ============================ */
.ez-pricing-grid-page{display:grid;gap:1rem;max-width:100%;overflow-x:hidden;}
.ez-pricing-grid-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.ez-pricing-grid-header h1{margin:0;font-size:1.35rem;font-weight:800;line-height:1.25;letter-spacing:0;}
.ez-pricing-grid-header-actions{display:flex;align-items:center;gap:.55rem;}
.ez-pricing-grid-circle,.ez-pricing-grid-apply,.ez-pricing-grid-mini-action{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:transform .12s ease,box-shadow .15s ease;}
.ez-pricing-grid-circle{width:2.55rem;height:2.55rem;border-radius:999px;}
.ez-pricing-grid-action-icon{width:1.2rem;height:1.2rem;}
.ez-pricing-grid-default-bar,.ez-pricing-grid-bulk-panel{display:flex;align-items:end;gap:.75rem;flex-wrap:wrap;padding:.9rem 1rem;border-radius:.65rem;}
.ez-pricing-grid-default-bar label,.ez-pricing-grid-bulk-panel label,.ez-pricing-grid-segment-group{display:grid;gap:.35rem;font-size:.75rem;font-weight:700;}
.ez-pricing-grid-default-bar output{min-height:2.25rem;display:inline-flex;align-items:center;font-weight:800;font-variant-numeric:tabular-nums;}
.ez-pricing-grid-panel-heading{align-self:center;font-weight:800;}
.ez-pricing-grid-segment{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem;border-radius:.55rem;}
.ez-pricing-grid-segment button{min-height:2rem;border:0;border-radius:.4rem;padding:.35rem .7rem;font-size:.78rem;font-weight:700;cursor:pointer;}
.ez-pricing-grid-apply{width:2.35rem;height:2.35rem;border-radius:.55rem;}
.ez-pricing-grid-wrap{overflow-x:auto;max-width:100%;}
.ez-pricing-grid-table{min-width:0;width:100%;font-variant-numeric:tabular-nums;}
.ez-pricing-grid-table th,.ez-pricing-grid-table td{white-space:nowrap;}
.ez-pricing-grid-select-col{width:1.7rem;text-align:center !important;}
/* بلا `position:sticky`: هذا العمود يُقرأ كمرساة الصف، والخلفية المعتمة تكفي بصريًا
   دون إدخال طبقات sticky كانت تتداخل مع ألوان الجدول في الوضعين. */
.ez-pricing-grid-package{width:10.4rem;min-width:10.4rem;max-width:10.4rem;font-size:.72rem;font-weight:800;line-height:1.35;}
.ez-pricing-grid-region{text-align:center !important;font-weight:800 !important;}
.ez-pricing-grid-input{width:100%;min-width:4rem;max-width:5rem;min-height:1.8rem;border-radius:.4rem;padding:.2rem .15rem;font-size:.72rem;font-variant-numeric:tabular-nums;}
.ez-pricing-grid-input-wide{width:8rem;max-width:8rem;}
.ez-pricing-grid-toggle,.ez-pricing-grid-activation-col,.ez-pricing-grid-actions-col{text-align:center !important;}
.ez-pricing-grid-money{min-width:3.4rem;font-size:.72rem;font-weight:800;font-variant-numeric:tabular-nums;}
.ez-pricing-grid-default-name{display:grid;gap:.25rem;font-size:.78rem;line-height:1.45;}
.ez-pricing-grid-formula{font-weight:700;}
.ez-pricing-grid-status{display:inline-flex;align-items:center;gap:.45rem;min-width:5.6rem;justify-content:center;border:0;border-radius:999px;padding:.35rem .65rem;font-size:.78rem;font-weight:800;cursor:pointer;}
.ez-pricing-grid-status span{width:.55rem;height:.55rem;border-radius:999px;display:inline-block;}
.ez-pricing-grid-row-actions{display:inline-flex;align-items:center;gap:.35rem;}
.ez-pricing-grid-mini-action{width:2rem;height:2rem;border-radius:.45rem;}
.ez-pricing-grid-mini-icon{width:1rem;height:1rem;}
html:not(.dark) .ez-pricing-grid-header h1{color:var(--ez-ink);}
html:not(.dark) .ez-pricing-grid-circle{background:var(--ez-surface);color:var(--ez-navy);border:1px solid var(--ez-hairline);box-shadow:0 8px 18px rgba(14,132,181,.08);}
html:not(.dark) .ez-pricing-grid-circle:hover,.ez-pricing-grid-apply:hover,.ez-pricing-grid-mini-action:hover{transform:translateY(-1px);}
html:not(.dark) .ez-pricing-grid-circle-danger{color:var(--ez-warning);}
html:not(.dark) .ez-pricing-grid-circle-accent{color:var(--ez-accent);}
html:not(.dark) .ez-pricing-grid-default-bar{background:rgba(232,161,0,.12);border:1px solid var(--ez-hairline);}
html:not(.dark) .ez-pricing-grid-bulk-panel{background:var(--ez-surface);border:1px solid var(--ez-hairline);}
html:not(.dark) .ez-pricing-grid-default-bar label,html:not(.dark) .ez-pricing-grid-bulk-panel label,html:not(.dark) .ez-pricing-grid-segment-group{color:var(--ez-muted);}
html:not(.dark) .ez-pricing-grid-default-bar output,html:not(.dark) .ez-pricing-grid-panel-heading{color:var(--ez-navy);}
html:not(.dark) .ez-pricing-grid-segment{background:var(--ez-hairline);}
html:not(.dark) .ez-pricing-grid-segment button{background:transparent;color:var(--ez-muted);}
html:not(.dark) .ez-pricing-grid-segment button.is-active{background:var(--ez-surface);color:var(--ez-primary);box-shadow:0 1px 4px rgba(14,132,181,.12);}
html:not(.dark) .ez-pricing-grid-apply{background:var(--ez-primary);color:var(--ez-surface);box-shadow:0 8px 18px rgba(14,132,181,.22);}
html:not(.dark) .ez-pricing-grid-package{background:var(--ez-surface);color:var(--ez-navy);}
html:not(.dark) .ez-pricing-grid-input{background:var(--ez-surface);border:1px solid var(--ez-hairline);color:var(--ez-ink);}
html:not(.dark) .ez-pricing-grid-input:focus{border-color:var(--ez-primary);box-shadow:0 0 0 3px rgba(14,132,181,.14);outline:0;}
html:not(.dark) .ez-pricing-grid-region-arab,html:not(.dark) .ez-pricing-grid-arab{background:rgba(40,135,64,.11) !important;}
html:not(.dark) .ez-pricing-grid-region-foreign,html:not(.dark) .ez-pricing-grid-foreign{background:rgba(14,132,181,.10) !important;}
html:not(.dark) .ez-pricing-grid-region-arab{color:var(--ez-accent) !important;}
html:not(.dark) .ez-pricing-grid-region-foreign{color:var(--ez-primary) !important;}
html:not(.dark) .ez-pricing-grid-money{color:var(--ez-ink);}
html:not(.dark) .ez-pricing-grid-row-inactive{opacity:.58;}
html:not(.dark) .ez-pricing-grid-status{background:var(--ez-hairline);color:var(--ez-muted);}
html:not(.dark) .ez-pricing-grid-status span{background:var(--ez-muted);}
html:not(.dark) .ez-pricing-grid-status.is-active{background:rgba(40,135,64,.12);color:var(--ez-accent);}
html:not(.dark) .ez-pricing-grid-status.is-active span{background:var(--ez-accent);}
html:not(.dark) .ez-pricing-grid-mini-action{background:var(--ez-surface);color:var(--ez-primary);border:1px solid var(--ez-hairline);}
html:not(.dark) .ez-pricing-grid-mini-danger{color:var(--ez-warning);}

/* ══════ علم الدولة + محاذاة صفّ الجوال + بلوك صورة المستخدم ══════ */
/* علم كصورة SVG محلية لا إيموجي: ويندوز بلا خطّ أعلام فيعرض 🇪🇬 كحرفَي «EG». */
.eazygo-flag{width:1.35rem;height:1rem;object-fit:cover;border-radius:2px;flex:0 0 auto;
  display:inline-block;vertical-align:-2px;box-shadow:0 0 0 1px rgba(15,23,42,.12);}
/* بديل العلم حين لا يوجد ملف SVG للدولة: كود ISO في شارة بنفس مقاس العلم،
   فلا ينزاح الصفّ ولا يظهر فراغ. مقيَّد بالوضع الفاتح كبقية ألوان اللوحة. */
html:not(.dark) .eazygo-flag-fallback{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.5rem;font-weight:700;letter-spacing:.02em;line-height:1;
  background:#e2e8f0;color:#475569;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
/* العلم + الرقم صفّ واحد بفجوة ثابتة لا يلتفّ ولا يُقصّ.
   direction:ltr على المجموعة وحدها: العلم يسار الرقم دائمًا مهما كان اتجاه الصفحة.
   نضبطه هنا لا على الحقل كله — ضبطه على الحقل يجعل محاذاته يسارية فتنزاح القيمة
   بعيدًا عن عنوانها بدل أن تتراصّ تحته كبقية الحقول. */
.eazygo-phone{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;direction:ltr;}
/* خانة الجوال في الجداول: قصّ Filament الافتراضي كان يبتلع آخر رقم بعد أن زاد
   العلمُ عرضَ المحتوى — نلغيه لهذه الخانة وحدها فيتّسع العمود لسطره. */
.fi-ta-cell:has(.eazygo-phone),.fi-ta-cell:has(.eazygo-phone) .fi-ta-text-item-label,
.fi-ta-cell:has(.eazygo-phone) .fi-ta-text-item{overflow:visible !important;text-overflow:clip !important;}
/* القيمة تُحاذى إلى جهة عنوان الحقل مع بقاء ترتيب الأرقام LTR (dir=ltr على الحقل). */
.eazygo-input-end{text-align:end !important;}

/* بلوك صورة المستخدم: يرث تخطيط flag-upload-compact ويلغي حبّة النص الغامقة
   المصمَّمة لتُقرأ فوق صورة علم — فوق مربّع فارغ أبيض تبدو كأنها رسالة خطأ. */
.fi-fo-file-upload.avatar-upload-compact .filepond--drop-label label,
.fi-fo-file-upload.avatar-upload-compact .filepond--drop-label label *{
  background:transparent !important;box-shadow:none !important;text-shadow:none !important;
  font-weight:500 !important;padding:0 !important;}
html:not(.dark) .fi-fo-file-upload.avatar-upload-compact .filepond--drop-label label,
html:not(.dark) .fi-fo-file-upload.avatar-upload-compact .filepond--drop-label label *{
  color:#64748b !important;-webkit-text-fill-color:#64748b !important;}
.dark .fi-fo-file-upload.avatar-upload-compact .filepond--drop-label label,
.dark .fi-fo-file-upload.avatar-upload-compact .filepond--drop-label label *{
  color:#94a3b8 !important;-webkit-text-fill-color:#94a3b8 !important;}
.fi-fo-file-upload.avatar-upload-compact .filepond--root:hover .filepond--drop-label label{
  background:transparent !important;box-shadow:none !important;transform:none !important;
  text-decoration:underline !important;}

/* ── فترات جاهزة + بحث فوري في التقارير ─────────────────────────────── */
html:not(.dark) .ezr-periods{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.25rem;}
html:not(.dark) .ezr-period{padding:0.45rem 1rem;border-radius:999px;font-size:0.8rem;font-weight:600;
  border:1px solid var(--ez-hairline);background:var(--ez-surface);color:var(--ez-body);
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
html:not(.dark) .ezr-period:hover{border-color:var(--ez-primary);color:var(--ez-primary);}
html:not(.dark) .ezr-period-on{background:linear-gradient(135deg,var(--ez-primary),var(--ez-primary-dark));
  border-color:transparent;color:#fff;}
html:not(.dark) .ezr-period-custom{cursor:default;background:var(--ez-canvas);color:var(--ez-muted);}
html:not(.dark) .ezr-period-custom:hover{border-color:var(--ez-hairline);color:var(--ez-muted);}
html:not(.dark) .ezr-search{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.9rem;}
html:not(.dark) .ezr-search-input{flex:1;max-width:22rem;padding:0.55rem 0.9rem;border-radius:0.7rem;
  border:1px solid var(--ez-hairline);background:var(--ez-surface);color:var(--ez-ink);font-size:0.875rem;}
html:not(.dark) .ezr-search-input:focus{outline:none;border-color:var(--ez-primary);
  box-shadow:0 0 0 3px rgba(14,132,181,0.12);}
html:not(.dark) .ezr-search-count{font-size:0.78rem;font-weight:600;color:var(--ez-muted);}
[x-cloak]{display:none !important;}

/* ============ التقرير المالي: مسافات مطابقة لبقية التقارير ============
   الويدجت نفسه مستعمل في لوحة التحكم، فالمقاسات مقيَّدة بغلاف هذه الصفحة
   وحدها. القيم مأخوذة حرفيًا من `.ezr-stats`/`.ezr-stat` كي لا تختلف
   صفحة تقرير عن أخرى. لا ألوان هنا — مسافات فقط، فتسري على الوضعين. */
.ezr-fin-blocks{display:flex;flex-direction:column;gap:1.25rem;}
.ezr-fin-blocks .fi-wi-stats-overview .fi-grid{gap:0.9rem;}
.ezr-fin-blocks .fi-wi-stats-overview-stat{padding:1rem;border-radius:0.75rem;}
.ezr-fin-blocks .fi-section{padding-block:0.25rem;}

/* ===================== لون الوقت في الجداول (نهاري + ليلي) ===================== */
/* الوحيد في هذا الملف الذي يمسّ الوضع الليلي عمدًا — بطلب صريح من المالك
   2026-09-05: كان الوقت مطبوعًا بلون ثابت `--ez-primary` (#0E84B5) داخل
   style في PHP، وهو أزرق متوسّط يذوب في الخلفية الغامقة فيُقرأ باهتًا.
   القاعدة العامة (لا تلمس الوضع الليلي) تبقى سارية على كل ما عداه. */
html:not(.dark) .ez-time { color: var(--ez-primary); }

/* أفتح وأوضح على الغامق: نفس هوية الأزرق مع تباين كافٍ للقراءة. */
html.dark .ez-time { color: #6FC6EC; font-weight: 600; }

/* اسم الدولة مع علمها (الجنسية في المستخدمين والتوثيقات).
   كـ.eazygo-phone لكن بلا `direction:ltr`: الاسم مترجَم فيتبع اتجاه اللغة،
   بخلاف كود الاتصال الذي يبقى LTR دائمًا. */
.eazygo-country{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;}

/* ===== شبكة الأسعار: عرض المنطقتين معًا بلا تمرير (طلب المالك 2026-09-06) =====
   الجدول عشرون عمودًا، وكان `min-width:1820px` يفرض تمريرًا أفقيًا على أي شاشة.
   ضُيّقت الخانات والحشو والخط بقدرٍ يُبقي الأرقام مقروءة؛ وأسهم العدد تظهر دائمًا
   لا عند المرور وحده، وإلا بدت الخانة كما كانت. */
.ez-pricing-grid-table td{padding-inline:.15rem !important;padding-block:.22rem !important;font-size:.72rem;}
/* العناوين أصغر من الأرقام: صفّ الرؤوس مزدحم بعشرين عنوانًا ووحداتها، وتصغيره
   يجعله شريطًا خفيفًا فوق الأرقام لا منافسًا لها (طلب المالك 2026-09-06). */
.ez-pricing-grid-table th{padding-inline:.15rem !important;padding-block:.22rem !important;font-size:.63rem;letter-spacing:0;}
/* الأسهم عند الوقوف على الخانة أو الكتابة فيها فقط (قرار المالك 2026-09-06
   بعد تجربتها ظاهرةً دائمًا): عشرون عمودًا × كل نوع طرد تعني مئات الأسهم
   المعروضة معًا، وهي ضجيج بصري يزاحم الأرقام نفسها. */
/* ⚠️ بالشفافية لا بـ`appearance:none`: الأخيرة **تحذف** السهم من الرسم فلا
   يعيده `appearance:auto` عند المرور — جرّبتُها فاختفت الأسهم نهائيًا
   (لقطة المالك). الشفافية تُبقيه موجودًا محجوزَ المساحة، فيظهر بلا أن يقفز
   الرقم عن مركزه. */
.ez-pricing-grid-input[type="number"]::-webkit-inner-spin-button{
  opacity:0;transition:opacity .12s ease;}
.ez-pricing-grid-input[type="number"]:hover::-webkit-inner-spin-button,
.ez-pricing-grid-input[type="number"]:focus::-webkit-inner-spin-button{opacity:1;}
/* فايرفوكس لا يملك pseudo-element للسهم، فيُخفى بـtextfield ويُعاد بـnumber-input. */
.ez-pricing-grid-input[type="number"]{-moz-appearance:textfield;}
.ez-pricing-grid-input[type="number"]:hover,
.ez-pricing-grid-input[type="number"]:focus{-moz-appearance:number-input;}
/* وحدة العملة/الوزن بجانب عنوان العمود: أخفت وأصغر فلا تزاحم الاسم. */
.ez-pricing-grid-unit{font-weight:600;opacity:.72;font-size:.92em;}
/* عمود مقفول التعديل: الفلتر يحدّد ما يُعدَّل والعمودان يبقيان ظاهرين للمقارنة
   (طلب العميل 2026-09-19). الخفوت هنا وحده — التعطيل نفسه في الـblade. */
.ez-pricing-grid-locked{opacity:.6;}
.ez-pricing-grid-locked .ez-pricing-grid-input{background:rgba(0,0,0,.03);cursor:not-allowed;}

/* ضغط إضافي: أعمدة الدول الأجنبية كانت تُقصّ خارج الشاشة (لقطة المالك).
   الأسهم أصغر، والعناوين تلتفّ سطرين بدل أن تفرض عرضًا، والوحدة أخفت. */
.ez-pricing-grid-table th{white-space:normal !important;line-height:1.25;}
/* الحشو متساوٍ الآن لأن السهم مخفيّ افتراضيًا، فيبقى الرقم في وسط الخانة
   ولا يقفز حين يظهر السهم عند المرور (السهم يُرسم فوق الحشو لا يزيح النصّ). */
.ez-pricing-grid-input[type="number"]{padding-inline:.15rem !important;}
.ez-pricing-grid-input[type="number"]::-webkit-inner-spin-button{margin:0;}
.ez-pricing-grid-unit{display:block;font-size:.85em;}
.ez-pricing-grid-toggle input{width:.95rem;height:.95rem;}

/* الرقم في وسط الخانة لا ملتصقًا بحافّتها (طلب المالك): مع `type=number`
   يشغل سهما الزيادة جهةً، فيبدو الرقم مزاحًا. `text-align:center` يوسّطه
   داخل المساحة الباقية، والمبالغ المحسوبة تُوسَّط معه فيستقيم العمود. */
.ez-pricing-grid-input{text-align:center;}
.ez-pricing-grid-money{text-align:center !important;}
.ez-pricing-grid-table td{text-align:center;}
/* والرؤوس معها: توسيط الخلايا وحدها كان يترك العناوين ملتصقة بحافّة الجدول
   فوق أرقامٍ موسَّطة — عمودٌ مكسور بصريًا (لقطة المالك 2026-09-06). */
.ez-pricing-grid-table th{text-align:center !important;}
/* اسم النوع وحده يبدأ من الحافّة: نصّ يلتفّ سطرين، وتوسيطه يجعل قراءة القائمة
   الرأسية أصعب. ورأسه يبقى موسَّطًا كبقية الرؤوس. */
.ez-pricing-grid-table td.ez-pricing-grid-package,
.ez-pricing-grid-table th.ez-pricing-grid-package{
  /* `nowrap` من قاعدة الجدول العامة كان يفوز بالتخصيص على
     `.ez-pricing-grid-package` (0,1,1 مقابل 0,1,0)، فيخرج اسم النوع الطويل
     من خانته ويتداخل مع العمود المجاور (لقطة المالك). */
  white-space:normal !important;overflow-wrap:anywhere;
  /* وحشوٌ جانبيّ له وحده: الحشو العام ‎.15rem يكفي للأرقام الموسَّطة لكنه يترك
     الاسمَ لاصقًا بخطّ الفاصل (لقطة المالك). */
  padding-inline:.7rem !important;}
.ez-pricing-grid-table td.ez-pricing-grid-package{text-align:start !important;}

/* ===== خطوط فاصلة بين الأعمدة (طلب المالك 2026-09-06) =====
   الجدول عشرون عمودًا متلاصقة، فيصعب تتبّع الرقم إلى عموده. خطٌّ رفيع بين كل
   عمودين يفصلها بلا أن يزاحم الأرقام.
   `:last-child` يُستثنى كي لا يُرسم خطّ على حافّة الجدول الخارجية. */
.ez-pricing-grid-table th:not(:last-child),
.ez-pricing-grid-table td:not(:last-child){border-inline-end:1px solid;}

/* اللون في الوضعين: نهاري بالخيط الفاتح، وليلي بشفافية بيضاء خفيفة كي لا
   يختفي الخطّ على الخلفية الغامقة ولا يصرخ فوقها.

   ⚠️ ثاني استثناء لقاعدة «لا تلمس الوضع الليلي» في هذا الملف (الأول لون الوقت
   في الجداول). مبرَّر لأن الفاصل بلا لون ليلي إمّا يختفي تمامًا فلا يؤدّي
   غرضه، أو يرث لونًا فاتحًا فيشقّ الجدول الغامق بخطوط بيضاء. */
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:#B7C9D6;}
html.dark .ez-pricing-grid-table th:not(:last-child),
html.dark .ez-pricing-grid-table td:not(:last-child){border-inline-end-color:rgba(255,255,255,.28);}

/* وفاصل أوضح بين المنطقتين: حدُّ المنطقة يفصل مجموعتين لا عمودين. */
.ez-pricing-grid-table th.ez-pricing-grid-region:not(:last-child){border-inline-end-width:2px;}

/* ===== شارتا المنطقتين في رأس شبكة الأسعار (طلب المالك 2026-09-06) =====
   `inline-flex` لا `inline`: الأيقونة svg وTailwind يجعلها `block`، فكانت
   تأخذ سطرًا وتنزوي إلى حافّة العمود بعيدًا عن نصّها. وبالـflex تلتصق به
   ويتوسّطان معًا مهما اتّسع العمود.
   `width:fit-content` مع `margin-inline:auto` يضمنان التوسيط الحقيقي داخل
   خلية بـcolspan=8، حيث `text-align` وحده لا يكفي لعنصر flex. */
.ez-region-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  width:fit-content;margin-inline:auto;
  padding:.28rem .85rem;border-radius:999px;
  font-size:.76rem;font-weight:800;line-height:1.6;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease;}
.ez-region-badge:hover{transform:translateY(-1px);}
.ez-region-badge-icon{width:.95rem;height:.95rem;flex:0 0 auto;display:block;}

/* لون كل منطقة: خلفية فاتحة من لونها وحدٌّ منه أغمق قليلًا، فتُقرأ الشارة
   ككيان قائم لا كنصّ ملوّن — والظلّ خفيف يرفعها عن خلفية الرأس. */
html:not(.dark) .ez-region-badge-arab{
  background:#FFFFFF;border-color:rgba(40,135,64,.38);color:var(--ez-accent);
  box-shadow:0 1px 2px rgba(40,135,64,.12);}
html:not(.dark) .ez-region-badge-arab:hover{box-shadow:0 3px 8px rgba(40,135,64,.20);}
html:not(.dark) .ez-region-badge-foreign{
  background:#FFFFFF;border-color:rgba(14,132,181,.38);color:var(--ez-primary);
  box-shadow:0 1px 2px rgba(14,132,181,.12);}
html:not(.dark) .ez-region-badge-foreign:hover{box-shadow:0 3px 8px rgba(14,132,181,.20);}

/* الوضع الليلي: خلفية شفافة من لون المنطقة بدل الأبيض الذي يصرخ على الغامق. */
html.dark .ez-region-badge-arab{
  background:rgba(63,174,94,.16);border-color:rgba(63,174,94,.45);color:#7FD79A;}
html.dark .ez-region-badge-foreign{
  background:rgba(111,198,236,.14);border-color:rgba(111,198,236,.42);color:#8FD4EF;}

/* ==================== كروت العرض الصغيرة — العميل 2026-09-19 ====================
   «عايز كروت صغيره ومتناسقه، أي حاجة في الداشبورد فيها عرض يبقى الكارت بالشكل ده».

   كان كل حقل في صفحة/نافذة العرض سطرَ «عنوان فوق قيمة» بلا حدود، فالعين لا تجد
   أين ينتهي حقل ويبدأ آخر، والأقسام تطول فتصير جدارًا من النصّ.

   القاعدة على `.fi-in-entry` وحدها — وهي حكرٌ على مخطّطات **العرض** (الفورمات
   تستعمل `.fi-fo-field-wrp`) ⇒ لا تمسّ شاشة تعديل ولا إنشاء. وتُطبَّق على
   الصفحة والنافذة معًا فيتطابق ما يراه الأدمن في الاثنين. */
html:not(.dark) .fi-sc-section .fi-in-entry{
  background:#F7FAFC;
  border:1px solid var(--ez-hairline);
  border-radius:.75rem;
  padding:.625rem .75rem;
  transition:border-color .15s ease, box-shadow .15s ease;}
html:not(.dark) .fi-sc-section .fi-in-entry:hover{
  border-color:rgba(14,132,181,.32);
  box-shadow:0 2px 8px rgba(14,132,181,.10);}

/* العنوان صغير وهادئ فوق القيمة، والقيمة أغمق وأثقل — هرمية تُقرأ بلمحة. */
html:not(.dark) .fi-sc-section .fi-in-entry .fi-in-entry-label{
  font-size:.75rem;
  font-weight:600;
  color:var(--ez-muted);}
html:not(.dark) .fi-sc-section .fi-in-entry .fi-in-entry-content{
  font-weight:600;
  color:var(--ez-ink);}

/* بطاقة بلا قيمة (placeholder «—») تبقى هادئة فلا تنافس الممتلئة. */
html:not(.dark) .fi-sc-section .fi-in-entry:has(.fi-in-placeholder){
  background:var(--ez-surface);}

/* ==================== نافذة عرض السجلّ ==================== */
/* رأس متدرّج بهوية البراند (لقطة العميل): كان الرأس أبيض كجسم النافذة فلا
   يفصل بينهما شيء. الصنف من `RecordModal::viewAction` فلا يمسّ نوافذ
   التأكيد/الحذف. */
html:not(.dark) .ez-record-modal .fi-modal-header{
  background:linear-gradient(135deg, var(--ez-primary) 0%, var(--ez-navy) 100%);
  border-top-left-radius:1rem;
  border-top-right-radius:1rem;
  padding-top:1.1rem;
  padding-bottom:1.1rem;}
html:not(.dark) .ez-record-modal .fi-modal-heading,
html:not(.dark) .ez-record-modal .fi-modal-description{
  color:#FFFFFF;}
html:not(.dark) .ez-record-modal .fi-modal-description{
  color:rgba(255,255,255,.82);}
/* زرّ الإغلاق ✕ داخل الرأس المتدرّج: أبيض على دائرة شفافة. */
html:not(.dark) .ez-record-modal .fi-modal-close-btn{
  color:#FFFFFF;
  background:rgba(255,255,255,.16);
  border-radius:9999px;}
html:not(.dark) .ez-record-modal .fi-modal-close-btn:hover{
  background:rgba(255,255,255,.28);}
/* جسم النافذة بلون اللوحة لا أبيض، فتبرز البطاقات فوقه. */
html:not(.dark) .ez-record-modal .fi-modal-content{
  background:var(--ez-canvas);}

/* المودالات الطويلة: الرأس وأزرار الحفظ العلوية تبقى ظاهرة، والتمرير داخل النافذة.
   وكل نافذة في منتصف الشاشة تمامًا (طلب المالك 2026-09-29): الصفّان المتساويان يوسّطان
   القصيرة، والطويلة تملأ ما بين هامشَي padding-block كما كانت. */
.fi-modal:not(.fi-modal-slide-over) > .fi-modal-window-ctn{
  grid-template-rows:1fr auto 1fr !important;
  overflow-y:auto !important;
  padding-block:1.5rem !important;}
.fi-modal:not(.fi-modal-slide-over) > .fi-modal-window-ctn > .fi-modal-window{
  max-height:calc(100dvh - 3rem) !important;
  display:flex !important;
  flex-direction:column !important;}
/* relative: عناوين الخانات المخفية (fi-sr-only، absolute) كانت تخرج من تمرير المحتوى إلى
   النافذة فتصنع شريط تمرير ثانيًا ينزل إلى فراغ أبيض (نافذة الصلاحيات، 19 عنوانًا). */
.fi-modal:not(.fi-modal-slide-over) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-content{
  position:relative;
  overflow-y:auto !important;
  overscroll-behavior:contain;}
.ez-modal-top-actions{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
  justify-content:flex-start;
  padding:1rem 1.25rem 0;
  background:var(--ez-canvas);}

/* ============================ ضغط الجداول ============================
   طلب العميل 2026-09-28: «أي حد يفتح الصفحة يظهرله كل حاجة من غير سحب»، من
   شاشة 1366 فأكبر. Filament يرسم كل خلية وعنوان في سطر واحد لا ينكسر
   (`tbody{white-space:nowrap}`) بحشو 12×16، فيطول الجدول بطول أطول نصّ فيه.
   هنا: حشو أصغر وعناوين تنزل سطرًا. أمّا الخلايا فتبقى سطرًا واحدًا (المبلغ
   وعملته والتاريخ والشارة لا تُقسَم)، وينزل سطرًا عمودُ النصّ الحرّ وحده
   (الاسم/البريد/المسار) بـ->wrap() في مورده. وما لا يدخل بعد ذلك يُخفى
   بالعرض (visibleFrom) ويبقى في نافذة العرض. */
.fi-ta-table .fi-ta-text:not(.fi-inline){
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2.5);
}
.fi-ta-table .fi-ta-header-cell{
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2.5);
    white-space: normal;
}
.fi-ta-table .fi-ta-cell:has(.fi-ta-actions){
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2.5);
}
/* البريد وأمثاله بلا مسافات: يُكسَر عند أي حرف وإلا بقي سطرًا واحدًا عريضًا. */
.fi-ta-table .fi-ta-text-item-label{ overflow-wrap: anywhere; }
.fi-ta-table .fi-badge,
.fi-ta-table .fi-ta-actions,
.fi-ta-table time,
/* المبلغ وعملته وحدة واحدة (Money::formattedHtml يلفّهما في bdi): «ج.م» فوق الرقم يُقرأ خطأً. */
.fi-ta-table bdi{ white-space: nowrap; }
/* شبكة الأسعار جدول مخصّص (ليس جدول Filament): ٢٠ عمودًا فيها عشر خانات إدخال،
   وكانت تزيد ٧٤px عند 1366. خانات المال تبقى بعرضها («187.50» ضُيِّقت مرّةً فقُصّت
   إلى «37.50» فقُرئت رقمًا آخر)؛ التوفير من خانتَي الوزن والعمولة (رقم أو رقمان)
   واسم النوع الذي ينزل سطرًا. */
/* داخل الجدول وحده: خانة الشريط العلوي (defaults.platform_commission_percent) ينتهي اسمها
   بنفس اللاحقة فضاقت إلى 38px وقُصّ «26.00» (ملاحظة المالك 2026-09-29). */
.ez-pricing-grid-table .ez-pricing-grid-input[wire\:model\.blur$=".included_weight_kg"],
.ez-pricing-grid-table .ez-pricing-grid-input[wire\:model\.blur$=".platform_commission_percent"]{ min-width: 2.4rem; max-width: 3rem; }
.ez-pricing-grid-package{ width: 8rem; min-width: 8rem; max-width: 8rem; white-space: normal !important; }
.ez-pricing-grid-status{ min-width: 4.4rem; padding-inline: .45rem; }

/* ============================ محادثة الدعم في النافذة ============================
   فقاعات: العميل من جهة البداية، الفريق من جهة النهاية، والرسالة الآلية في الوسط رمادية. */
.ez-chat{ display:flex; flex-direction:column; gap:1rem; }
.ez-chat-empty{ color:var(--ez-muted); font-size:.85rem; }
.ez-chat-messages{ display:flex; flex-direction:column; gap:.6rem; max-height:24rem; overflow-y:auto; padding:.25rem; }
.ez-chat-msg{ max-width:80%; padding:.55rem .8rem; border-radius:.9rem; border:1px solid var(--ez-hairline); }
.ez-chat-msg-user{ align-self:flex-start; background:#FFFFFF; }
.ez-chat-msg-team{ align-self:flex-end; background:#E6F3FA; border-color:#BFE0F1; }
.ez-chat-msg-system{ align-self:center; background:#F1F5F9; color:var(--ez-muted); font-size:.8rem; }
.ez-chat-meta{ display:flex; gap:.75rem; justify-content:space-between; font-size:.72rem; color:var(--ez-muted); margin-bottom:.2rem; }
.ez-chat-sender{ font-weight:700; color:var(--ez-ink); }
.ez-chat-time{ white-space:nowrap; direction:ltr; }
.ez-chat-body{ white-space:pre-line; font-size:.88rem; color:var(--ez-ink); overflow-wrap:anywhere; }
.ez-chat-attachment{ display:inline-block; margin-top:.3rem; font-size:.8rem; color:var(--ez-primary); text-decoration:underline; }
.ez-chat-reply{ display:flex; flex-direction:column; gap:.5rem; border-top:1px solid var(--ez-hairline); padding-top:.9rem; }
.ez-chat-label{ font-size:.82rem; font-weight:700; color:var(--ez-ink); }
.ez-chat-textarea{ width:100%; min-height:5.5rem; resize:vertical; padding:.6rem .75rem; border:1px solid #CBD5E1; border-radius:.65rem; background:#FFFFFF; color:var(--ez-ink); font-size:.9rem; }
.ez-chat-textarea:focus{ outline:0; border-color:var(--ez-primary); box-shadow:0 0 0 3px rgba(14,132,181,.14); }
.ez-chat-actions{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; justify-content:space-between; }
.ez-chat-file{ display:flex; flex-direction:column; gap:.25rem; font-size:.78rem; color:var(--ez-muted); }
.ez-chat-send{ padding:.5rem 1.4rem; }
.ez-chat-error{ color:var(--ez-danger); font-size:.8rem; }
html.dark .ez-chat-msg-user,html.dark .ez-chat-textarea{ background:rgba(255,255,255,.04); color:inherit; }
html.dark .ez-chat-msg-team{ background:rgba(14,132,181,.18); }
html.dark .ez-chat-msg-system{ background:rgba(255,255,255,.06); }
html.dark .ez-chat-sender,html.dark .ez-chat-body,html.dark .ez-chat-label{ color:inherit; }