/* =========================================================================
   SOCALII — تحسينات UI/UX للوحات (Filament) — واجهة فقط، قابلة لإعادة الاستخدام
   تنطبق على كل صفحات الأدمن ولوحة المستخدم (جداول/فلاتر/أقسام/سايدبار).
   لا تغيّر أي وظيفة — تحسينات بصرية وترتيب فقط.
   ========================================================================= */

/* 1) منطقة المحتوى: مسافات متّسقة وعرض مريح على الشاشات الكبيرة */
.fi-main { padding-top: 1.25rem; padding-bottom: 2.5rem; }
.fi-main > * + * { margin-top: 1.1rem; }

/* 1-ب) إصلاح تمرير RTL: نجعل منطقة المحتوى حاوية تمرير مستقلة بدل تمرير النافذة.
   السبب: تخطيط Filament يمرّر الصفحة عبر النافذة، وشريط تمرير النافذة في Chrome
   يبقى يميناً دائماً — ففي RTL يلتصق بالقائمة الجانبية (يمين) رغم أنه يمرّر المحتوى
   (يسار)، فيبدو معكوساً ومتداخلاً. بجعل .fi-main-ctn هو المُمرِّر يظهر شريطه بجانب
   المحتوى (يسار في RTL / يمين في LTR) وتُمرّر القائمة الجانبية وحدها. (سطح المكتب فقط) */
@media (min-width: 1024px) {
    html, body { height: 100% !important; overflow: hidden !important; }
    .fi-layout { height: 100vh !important; max-height: 100vh; }
    .fi-main-ctn {
        height: 100vh !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
    .fi-sidebar { height: 100vh !important; }
    .fi-sidebar-nav {
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* 2) الأقسام والجداول: حدود ناعمة + ظل خفيف + زوايا أنعم */
.fi-section,
.fi-ta {
    border-radius: 1rem !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05) !important;
    border: 1px solid rgba(124, 124, 140, .14) !important;
}
.dark .fi-section,
.dark .fi-ta {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
    border-color: rgba(255, 255, 255, .08) !important;
}

/* 3) شريط أدوات الجدول: مسافات أوضح بين البحث/الفلاتر/الأزرار */
.fi-ta-header-ctn { gap: .75rem; padding: .9rem 1rem; }
.fi-ta-search-field { min-width: 14rem; }

/* 4) رأس الجدول: أوضح + خط أعرض */
.fi-ta-header-cell {
    background: rgba(124, 58, 237, .045);
    font-weight: 700;
}
.dark .fi-ta-header-cell { background: rgba(124, 58, 237, .12); }

/* صفوف مريحة + إبراز عند المرور */
.fi-ta-row { transition: background-color .12s ease; }
.fi-ta-row:hover { background: rgba(124, 58, 237, .045); }
.dark .fi-ta-row:hover { background: rgba(124, 58, 237, .10); }
.fi-ta-cell, .fi-ta-header-cell { padding-top: .7rem; padding-bottom: .7rem; }

/* 5) الشارات Badges: توحيد الاستدارة والوزن */
.fi-badge {
    border-radius: 999px !important;
    font-weight: 700 !important;
}

/* 6) السايدبار: عنصر نشط أجمل + مسافات مريحة + أيقونات متناسقة */
.fi-sidebar-item-btn { border-radius: .7rem !important; margin-block: 1px; }
.fi-sidebar-item.fi-active .fi-sidebar-item-btn,
.fi-sidebar-item-btn.fi-active {
    background: linear-gradient(90deg, rgba(124, 58, 237, .18), rgba(124, 58, 237, .05)) !important;
    font-weight: 700 !important;
}
.fi-sidebar-group + .fi-sidebar-group { margin-top: .4rem; }
.fi-sidebar-group-label { letter-spacing: .02em; opacity: .7; font-size: .72rem; }
.fi-sidebar-nav { padding-inline: .4rem; }

/* 7) الترويسة والمسار */
.fi-breadcrumbs { opacity: .92; }
.fi-header-heading { letter-spacing: -0.01em; }

/* 8) RTL: محاذاة مريحة للأزرار والشارات داخل الجدول */
[dir="rtl"] .fi-ta-actions { justify-content: flex-start; }
[dir="rtl"] .fi-ta-header-cell,
[dir="rtl"] .fi-ta-cell { text-align: right; }

/* 9) لوحة الفلاتر المنظّمة (Dropdown) */
.fi-ta-filters { border-radius: .9rem; }

/* 10) كثافة العرض: وضع مدمّج (compact) — يبدّله المستخدم من زر الترويسة */
[data-density="compact"] .fi-ta-cell,
[data-density="compact"] .fi-ta-header-cell { padding-top: .35rem !important; padding-bottom: .35rem !important; }
[data-density="compact"] .fi-ta-cell .fi-ta-text-item-label { font-size: .8rem; }

/* زر تبديل الكثافة في الترويسة */
.socalii-density-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 2.25rem; width: 2.25rem; cursor: pointer;
    border: 1px solid rgba(124, 124, 140, .25); border-radius: .65rem;
    background: transparent; color: inherit; font-size: 1rem; line-height: 1;
    transition: background-color .12s ease;
}
.socalii-density-btn:hover { background: rgba(124, 58, 237, .10); }

/* 11) تبويبات النماذج عمودية (قائمة جانبية) — تشمل كل اللوحات، وتحترم اتجاه اللغة (RTL/LTR)
   ملاحظة: flex-direction:row يحترم dir تلقائياً، فتظهر القائمة يميناً في العربية ويساراً في الإنجليزية. */
@media (min-width: 768px) {
    .fi-fo-tabs,
    .fi-in-tabs {
        flex-direction: row !important;
        gap: 1.25rem;
        align-items: flex-start;
        background: transparent !important;
        box-shadow: none !important;
        --tw-ring-color: transparent !important;
        padding: 0 !important;
    }
    .fi-fo-tabs > .fi-tabs,
    .fi-in-tabs > .fi-tabs {
        flex: 0 0 240px;
        flex-direction: column !important;
        overflow: visible !important;
        gap: .25rem;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: 14px;
        padding: .5rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        position: sticky;
        top: 1rem;
    }
    .dark .fi-fo-tabs > .fi-tabs,
    .dark .fi-in-tabs > .fi-tabs { background: rgb(24 24 27); border-color: rgba(255, 255, 255, .08); }
    .fi-fo-tabs > .fi-tabs > *,
    .fi-in-tabs > .fi-tabs > * { width: 100%; justify-content: flex-start; border-radius: 10px; }
    .fi-fo-tabs > .fi-fo-tabs-tab,
    .fi-in-tabs > .fi-in-tabs-tab {
        flex: 1 1 auto; min-width: 0;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: 14px;
        padding: 1.25rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }
    .dark .fi-fo-tabs > .fi-fo-tabs-tab,
    .dark .fi-in-tabs > .fi-in-tabs-tab { background: rgb(24 24 27); border-color: rgba(255, 255, 255, .08); }
}