/* ==========================================================================
   نظام تصميم لوحة التحكم — تاخد كام؟ (admin-panel-design.md)
   ========================================================================== */

/* 1. الخطوط والأساس العام (Cairo Font & Base) */
html, body, button, input, select, textarea, .fi-body {
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px;
}

/* 2. القائمة الجانبية (Sidebar) — بعرض w-64 وخلفية slate-900 */
aside.fi-sidebar {
    width: 16rem !important; /* w-64 */
    min-width: 16rem !important;
    max-width: 16rem !important;
    background-color: #0f172a !important; /* bg-slate-900 */
    color: #e2e8f0 !important; /* text-slate-200 */
    border-left: 1px solid #1e293b !important;
    border-right: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
}

/* إخفاء الهيدر الافتراضي لفيلومنت تماماً */
.fi-sidebar-header,
header.fi-sidebar-header,
aside.fi-sidebar header,
aside.fi-sidebar > div > header {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* منطقة الروابط مع سكرول مرن */
aside.fi-sidebar .fi-sidebar-nav {
    flex: 1 1 0% !important;
    padding: 0 0.75rem 0.75rem 0.75rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* حاوية المجموعات في القائمة الجانبية — إزالة gap-y-7 وضبط مسافات متناسقة وأنيقة */
aside.fi-sidebar ul.fi-sidebar-nav-groups,
aside.fi-sidebar .fi-sidebar-nav-groups {
    gap: 0.5rem !important; /* تقليل المسافة بين المجموعات الرئيسية من 28px إلى 8px */
    row-gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

aside.fi-sidebar .fi-sidebar-nav-groups > li {
    margin: 0 !important;
    padding: 0 !important;
}

/* شريط اللوجو المخصص في أول السايدبار */
aside.fi-sidebar .fi-sidebar-nav > div:first-child {
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
    margin-bottom: 0.5rem !important; /* مسافة معتدلة بعد شريط اللوجو */
    width: 16rem !important;
    box-sizing: border-box !important;
}

/* المسافة بين المجموعات وعنوان المجموعة */
aside.fi-sidebar .fi-sidebar-nav .fi-sidebar-group {
    margin-top: 0.375rem !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

aside.fi-sidebar .fi-sidebar-nav .fi-sidebar-group:first-child {
    margin-top: 0 !important;
}

/* عناوين المجموعات: text-[10px] font-bold text-slate-500 uppercase tracking-wider */
.fi-sidebar-group-label,
.fi-sidebar-group-header,
.fi-sidebar-group-header button span,
aside.fi-sidebar [data-slot="group-label"],
aside.fi-sidebar .fi-sidebar-group-label span,
aside.fi-sidebar .fi-sidebar-group-header span {
    font-size: 0.65rem !important; /* 10px-11px */
    font-weight: 700 !important;
    color: #64748b !important; /* text-slate-500 */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.125rem 0.75rem !important; /* px-3 py-0.5 */
    margin-bottom: 0.125rem !important;
    margin-top: 0 !important;
}

/* إخفاء سهم الطي حتى تظل المجموعات مفتوحة دائماً */
aside.fi-sidebar .fi-sidebar-group-header button svg,
aside.fi-sidebar .fi-sidebar-group-collapse-button,
aside.fi-sidebar .fi-sidebar-group-header [data-slot="collapse-icon"] {
    display: none !important;
}

/* المسافة بين اللينكات gap صغير (حوالي 2px أو space-y-0.5) */
aside.fi-sidebar .fi-sidebar-group-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.125rem !important; /* 2px / space-y-0.5 */
    margin: 0 !important;
    padding: 0 !important;
}

aside.fi-sidebar .fi-sidebar-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* اللينك العادي: px-3 py-1.5 rounded-lg text-xs font-medium text-slate-300 hover:bg-slate-800 */
aside.fi-sidebar .fi-sidebar-item .fi-sidebar-item-button {
    padding: 0.375rem 0.75rem !important; /* py-1.5 px-3 لتقليل التمدد الرأسي */
    border-radius: 0.5rem !important; /* rounded-lg */
    font-size: 0.75rem !important; /* 12px */
    font-weight: 500 !important;
    background-color: transparent !important;
    color: #cbd5e1 !important;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
    gap: 0.625rem !important;
    min-height: 2.125rem !important;
}

aside.fi-sidebar .fi-sidebar-item:not(.fi-sidebar-item-active):not(.fi-active) .fi-sidebar-item-button:hover {
    background-color: #1e293b !important; /* hover:bg-slate-800 */
    color: #ffffff !important;
}

aside.fi-sidebar .fi-sidebar-item:not(.fi-sidebar-item-active):not(.fi-active) .fi-sidebar-item-label {
    color: #cbd5e1 !important; /* text-slate-300 */
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

aside.fi-sidebar .fi-sidebar-item:not(.fi-sidebar-item-active):not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: #ffffff !important;
}

aside.fi-sidebar .fi-sidebar-item:not(.fi-sidebar-item-active):not(.fi-active) .fi-sidebar-item-icon {
    color: #94a3b8 !important; /* نفس لون النص */
    width: 1rem !important;
    height: 1rem !important;
    transition: color 0.15s ease-in-out !important;
}

aside.fi-sidebar .fi-sidebar-item:not(.fi-sidebar-item-active):not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #ffffff !important;
}

/* اللينك النشط: bg-blue-600 text-white font-bold */
aside.fi-sidebar .fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-button,
aside.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: #2563eb !important; /* bg-blue-600 */
    color: #ffffff !important;
}

aside.fi-sidebar .fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-label,
aside.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
}

aside.fi-sidebar .fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-icon,
aside.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #ffffff !important;
    width: 1rem !important;
    height: 1rem !important;
}

/* كارت المستخدم في أسفل السايدبار */
.fi-sidebar-footer,
aside.fi-sidebar .fi-sidebar-footer {
    width: 16rem !important;
    max-width: 16rem !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 3. الهيدر العلوي (Top Header) — h-16 bg-white border-b border-slate-200 shadow-sm px-6 */
.fi-topbar {
    height: 4rem !important; /* h-16 */
    background-color: #ffffff !important; /* bg-white */
    border-bottom: 1px solid #e2e8f0 !important; /* border-slate-200 */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; /* shadow-sm */
    padding-left: 1.5rem !important; /* px-6 */
    padding-right: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
}

.fi-topbar nav {
    height: 100% !important;
    width: 100% !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
    gap: 1rem !important;
}

/* إخفاء القوائم الافتراضية غير المطلوبة من الهيدر */
.fi-user-menu,
.fi-topbar .fi-user-menu,
.fi-topbar-brand,
.fi-topbar-header,
.fi-breadcrumbs,
.fi-header-breadcrumbs {
    display: none !important;
}

div[x-persist="topbar.end.panel-admin"] {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    flex: 1 1 0% !important;
    justify-content: space-between !important;
}

/* عنوان الصفحة في الهيدر العلوي */
#custom-topbar-title {
    font-size: 1.125rem !important; /* text-lg */
    font-weight: 700 !important; /* font-bold */
    color: #1e293b !important; /* text-slate-800 */
    white-space: nowrap !important;
}

/* بحث عام في نص الهيدر (Global Search) */
.fi-global-search {
    flex: 1 1 0% !important;
    max-width: 32rem !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
}

.fi-global-search .fi-input-wrp {
    background-color: #f8fafc !important; /* bg-slate-50 */
    border: 1px solid #e2e8f0 !important; /* border-slate-200 */
    border-radius: 0.75rem !important; /* rounded-xl */
    width: 100% !important;
}

.fi-global-search input {
    font-size: 0.75rem !important; /* text-xs */
    padding: 0.5rem 0.75rem !important;
}

.fi-global-search-results-ctn {
    border-radius: 1rem !important; /* rounded-2xl */
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1) !important;
}

/* 4. إزالة الفراغ الرأسي الزائد: المحتوى يبدأ بـ p-6 مباشرة */
.fi-page > section,
.fi-page > section.py-8,
.fi-page > section[class*="py-"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.fi-header-heading,
.fi-header-subheading {
    display: none !important;
}

/* إخفاء هيدر الصفحة بالكامل إذا كان لا يحتوي على أزرار إجراءات (.fi-ac) */
header.fi-header:not(:has(.fi-ac a, .fi-ac button)),
.fi-header:not(:has(.fi-ac a, .fi-ac button)) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* عند وجود أزرار إجراءات: تصفير المسافات ومحاذاة الأزرار */
header.fi-header:has(.fi-ac a, .fi-ac button),
.fi-header:has(.fi-ac a, .fi-ac button) {
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
}

/* 5. منطقة المحتوى (Content Area) — تقليل الحواف لتجنب المساحات الفارغة الكبيرة */
main.fi-main {
    background-color: #f8fafc !important; /* bg-slate-50 */
    padding: 1rem 1.25rem !important; /* 16px 20px بدلاً من 24px */
}

.fi-page {
    gap: 1rem !important; /* مسافات محكمة بين الكروت */
}

/* 6. الكروت والجداول (Cards & Tables) */
.fi-ta-ctn,
.fi-section,
.fi-card {
    background-color: #ffffff !important;
    border-radius: 1rem !important; /* rounded-2xl أنيق ومتناسق */
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    overflow: hidden !important;
}

/* رأس الكارت وأدوات الجدول: ترويسة محكمة وغير ممتدة */
.fi-ta-header,
.fi-section-header {
    padding: 0.625rem 1rem !important; /* 10px 16px */
    border-bottom: 1px solid #f1f5f9 !important;
    background-color: rgba(248, 250, 252, 0.6) !important;
}

.fi-ta-header-heading,
.fi-section-header-heading {
    font-size: 0.8125rem !important; /* 13px */
    font-weight: 800 !important;
    color: #1e293b !important;
}

.fi-ta-header-toolbar,
.fi-ta-toolbar {
    gap: 0.5rem !important;
}

.fi-ta-search-field input {
    padding: 0.25rem 0.625rem !important;
    font-size: 0.75rem !important; /* 12px */
    height: 2rem !important;
}

/* رأس الجدول */
.fi-ta-table thead,
.fi-ta-table thead tr {
    background-color: #f8fafc !important;
    color: #64748b !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.fi-ta-table thead th {
    padding: 0 !important; /* تصفير الـ th الخارجي لمنع مضاعفة البادينج مع العناصر الداخلية */
    font-size: 0.6875rem !important; /* 11px */
    font-weight: 700 !important;
    color: #475569 !important;
    text-align: right !important;
}

.fi-ta-table thead th > div,
.fi-ta-table thead th button,
.fi-ta-table thead th .fi-ta-header-cell-label {
    padding: 0.375rem 0.625rem !important; /* 6px 10px بدلاً من 14px */
    font-size: 0.6875rem !important; /* 11px */
    font-weight: 700 !important;
    color: #475569 !important;
}

/* خلايا وصفوف الجدول: ضبط الارتفاع والمسافات لتكون مضغوطة ومريحة للقراءة */
.fi-ta-table tbody tr {
    border-top: 1px solid #f1f5f9 !important;
    transition: background-color 0.1s ease-in-out !important;
}

.fi-ta-table tbody tr:hover {
    background-color: #f8fafc !important;
}

.fi-ta-table tbody td {
    padding: 0 !important; /* تصفير بادينج الـ td الخارجي لمنع مضاعفة المسافات */
    font-size: 0.75rem !important; /* 12px */
    text-align: right !important;
    vertical-align: middle !important;
}

/* محتوى خلايا الجدول الداخلي (تقليل py-4 و px-3 الافتراضية في Filament) */
.fi-ta-table tbody td .fi-ta-text,
.fi-ta-table tbody td .fi-ta-col-wrp,
.fi-ta-table tbody td > div.px-3.py-4,
.fi-ta-table tbody td > div[class*="py-4"],
.fi-ta-table tbody td > div.whitespace-nowrap,
.fi-ta-table tbody td .fi-ta-actions {
    padding-top: 0.375rem !important;    /* 6px بدلاً من 16px */
    padding-bottom: 0.375rem !important; /* 6px بدلاً من 16px */
    padding-left: 0.625rem !important;   /* 10px بدلاً من 16px */
    padding-right: 0.625rem !important;  /* 10px بدلاً من 16px */
    gap: 0.25rem !important;
}

.fi-ta-table tbody td .fi-ta-text-item,
.fi-ta-table tbody td .fi-ta-text-item-label,
.fi-ta-table tbody td .fi-ta-col-wrp span,
.fi-ta-table tbody td .fi-ta-col-wrp a {
    font-size: 0.75rem !important; /* 12px */
    line-height: 1.25rem !important;
    color: #1e293b !important;
}

.fi-ta-actions {
    gap: 0.375rem !important;
}

.fi-ta-action,
.fi-ta-action span {
    font-size: 0.75rem !important;
}

/* 7. الشارات (Badges) */
.fi-badge {
    font-size: 10px !important; /* text-[10px] */
    font-weight: 800 !important; /* font-extrabold */
    padding: 0.25rem 0.625rem !important; /* px-2.5 py-1 */
    border-radius: 9999px !important; /* rounded-full */
    border: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* شارة «شغال» أو «اتضاف» بالأخضر (bg-emerald-100 text-emerald-800) */
.fi-badge.fi-color-success {
    background-color: #d1fae5 !important; /* bg-emerald-100 */
    color: #065f46 !important; /* text-emerald-800 */
}

/* شارة «متوقف» أو «اتحذف» بالأحمر (bg-rose-100 text-rose-800) */
.fi-badge.fi-color-danger {
    background-color: #ffe4e6 !important; /* bg-rose-100 */
    color: #9f1239 !important; /* text-rose-800 */
}

/* شارة «اتعدّل» بالكهرماني */
.fi-badge.fi-color-warning {
    background-color: #fef3c7 !important; /* bg-amber-100 */
    color: #92400e !important; /* text-amber-900 */
}

.fi-badge.fi-color-gray {
    background-color: #f1f5f9 !important; /* bg-slate-100 */
    color: #334155 !important; /* text-slate-700 */
}

/* شارة «اترجع» بالأزرق */
.fi-badge.fi-color-primary {
    background-color: #dbeafe !important; /* bg-blue-100 */
    color: #1e40af !important; /* text-blue-800 */
}

/* 8. الأزرار (Buttons) */
/* الزر الأساسي (أزرق) */
.fi-btn-color-primary:not(.fi-btn-outlined) {
    padding: 0.5rem 1rem !important; /* px-4 py-2 */
    background-color: #2563eb !important; /* bg-blue-600 */
    color: #ffffff !important; /* text-white */
    font-size: 0.75rem !important; /* text-xs */
    font-weight: 700 !important; /* font-bold */
    border-radius: 0.75rem !important; /* rounded-xl */
    border: none !important;
    box-shadow: 0 1px 2px 0 rgb(37 99 235 / 0.2) !important;
}

.fi-btn-color-primary:not(.fi-btn-outlined):hover {
    background-color: #1d4ed8 !important; /* hover:bg-blue-700 */
}

/* زرار الحفظ البارز في الفورمات:
   bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-extrabold px-8 py-3 rounded-2xl shadow-lg shadow-blue-500/25 */
.fi-form-actions button[type="submit"],
.fi-modal-footer-actions button[type="submit"],
.fi-ac-action[type="submit"] {
    padding: 0.75rem 2rem !important; /* px-8 py-3 */
    border-radius: 1rem !important; /* rounded-2xl */
    background: linear-gradient(to right, #2563eb, #4f46e5) !important;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.25) !important;
    font-weight: 800 !important; /* font-extrabold */
    color: #ffffff !important;
    border: none !important;
}

.fi-form-actions button[type="submit"]:hover,
.fi-modal-footer-actions button[type="submit"]:hover,
.fi-ac-action[type="submit"]:hover {
    background: linear-gradient(to right, #1d4ed8, #4338ca) !important;
}

/* الأزرار الثانوية (استيراد، تصدير، قالب، فلترة):
   بيضا بحدود رمادية رقيقة (border-slate-200 text-slate-700 bg-white hover:bg-slate-50) */
.fi-btn-color-gray,
.fi-btn-outlined,
.fi-ta-filter-trigger-action {
    background-color: #ffffff !important; /* bg-white */
    border: 1px solid #e2e8f0 !important; /* border border-slate-200 */
    color: #334155 !important; /* text-slate-700 */
    font-size: 0.75rem !important; /* text-xs */
    font-weight: 700 !important; /* font-bold */
    border-radius: 0.75rem !important; /* rounded-xl */
}

.fi-btn-color-gray:hover,
.fi-btn-outlined:hover,
.fi-ta-filter-trigger-action:hover {
    background-color: #f8fafc !important; /* hover:bg-slate-50 */
    color: #0f172a !important;
}

/* إخفاء شارة الـ 0 في الفلترة إذا كانت 0 */
.fi-btn-badge-ctn:has(.fi-badge span:empty),
.fi-icon-btn-badge-ctn:has(.fi-badge span:empty) {
    display: none !important;
}

/* 9. الفورمات وشاشات الإضافة والتعديل */
.fi-input-wrp {
    border-radius: 0.75rem !important; /* rounded-xl */
    border: 1px solid #e2e8f0 !important; /* border-slate-200 */
    box-shadow: none !important;
    font-size: 0.75rem !important; /* text-xs */
}

.fi-input-wrp:focus-within {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important; /* focus:ring-2 focus:ring-blue-500 */
}

/* العناوين فوق الحقول: text-xs font-extrabold text-slate-700 */
.fi-fo-field-wrp-label span {
    font-size: 0.75rem !important; /* text-xs */
    font-weight: 800 !important; /* font-extrabold */
    color: #334155 !important; /* text-slate-700 */
}

/* النصوص المساعدة: text-[11px] text-slate-400 */
.fi-fo-field-wrp-helper-text {
    font-size: 11px !important; /* text-[11px] */
    color: #94a3b8 !important; /* text-slate-400 */
    margin-top: 0.25rem !important;
}

/* 10. الإشعارات (Notifications) */
.fi-no-notification {
    border-radius: 1rem !important; /* rounded-2xl */
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border: 1px solid #e2e8f0 !important;
}