/* Mobile sidebar scrollable nav - scrollbar visibility */
.fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 transparent;
}

.fi-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: #94a3b8;
    border-radius: 4px;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: #64748b;
}

/* ========================================
   🎨 خلفية غامقة للـ Sidebar
   ======================================== */
.fi-sidebar {
    background: linear-gradient(180deg, #1e3a5f 0%, #12264a 100%) !important;
}

/* ========================================
   🔝 توحيد لون الـ Topbar مع الـ Sidebar
   ======================================== */
.fi-topbar {
    background: linear-gradient(180deg, #1e4080 0%, #12264a 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.fi-sidebar-header {
    background: rgba(0, 0, 0, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.fi-sidebar-nav-item,
.fi-sidebar-item,
.fi-sidebar-item-label,
.fi-sidebar-item-button {
    color: #F3F4F6 !important;
    transition: all 0.2s ease !important;
}

.fi-sidebar-nav-item:hover,
.fi-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1E40AF !important;
    transform: translateX(-2px) !important;
}

.fi-sidebar-nav-item[data-active="true"],
.fi-sidebar-item[data-active="true"] {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1D4ED8 !important;
    border-right: 3px solid #4DB6AC !important;
}

.fi-sidebar-group-label,
.fi-sidebar-group-heading {
    color: #D1D5DB !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 800 !important;
}

.fi-sidebar-item-icon,
.fi-sidebar-nav-item svg {
    color: #E5E7EB !important;
}

/* Logo في الـ Sidebar */
.fi-sidebar-header .fi-logo,
.fi-sidebar .fi-brand {
    filter: brightness(1.2) !important;
}

/* تحسين وضوح كل النصوص في الـ Sidebar */
.fi-sidebar * {
    color: #F3F4F6 !important;
}

.fi-sidebar a,
.fi-sidebar button {
    color: #F3F4F6 !important;
}

.fi-sidebar .fi-sidebar-nav-item:hover *,
.fi-sidebar .fi-sidebar-item:hover *,
.fi-sidebar a:hover,
.fi-sidebar button:hover {
    color: #1E40AF !important;
}

.fi-sidebar .fi-sidebar-nav-item[data-active="true"] *,
.fi-sidebar .fi-sidebar-item[data-active="true"] *,
.fi-sidebar a[data-active="true"],
.fi-sidebar button[data-active="true"] {
    color: #1D4ED8 !important;
}

/* ========================================
   🔘 زر فتح/إغلاق الـ Sidebar - أبيض
   ======================================== */
.fi-sidebar-collapse-button,
.fi-sidebar-collapse-btn,
[data-sidebar-collapse-button],
button[x-on\:click*="toggleSidebarCollapse"] {
    color: #FFFFFF !important;
}

.fi-sidebar-collapse-button svg,
.fi-sidebar-collapse-btn svg,
[data-sidebar-collapse-button] svg,
button[x-on\:click*="toggleSidebarCollapse"] svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

.fi-sidebar-collapse-button:hover,
.fi-sidebar-collapse-btn:hover,
[data-sidebar-collapse-button]:hover {
    color: #E5E7EB !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.fi-sidebar-collapse-button:hover svg,
.fi-sidebar-collapse-btn:hover svg,
[data-sidebar-collapse-button]:hover svg {
    color: #E5E7EB !important;
}

/* تأكيد إضافي للعنصر النشط */
.fi-sidebar-nav-item[aria-current="page"],
.fi-sidebar-nav-item[aria-current="page"] *,
.fi-sidebar-nav-item.active,
.fi-sidebar-nav-item.active *,
.fi-sidebar-item.active,
.fi-sidebar-item.active * {
    color: #1D4ED8 !important;
}

.fi-sidebar .fi-sidebar-item-label[data-active="true"],
.fi-sidebar span[data-active="true"],
.fi-sidebar-nav-item[data-active="true"] .fi-sidebar-item-label,
.fi-sidebar-nav-item[data-active="true"] span,
.fi-sidebar-item[data-active="true"] .fi-sidebar-item-label,
.fi-sidebar-item[data-active="true"] span {
    color: #1D4ED8 !important;
}

/* لون الأيقونات للعنصر النشط */
.fi-sidebar-nav-item[data-active="true"] .fi-sidebar-item-icon,
.fi-sidebar-nav-item[data-active="true"] svg,
.fi-sidebar-item[data-active="true"] .fi-sidebar-item-icon,
.fi-sidebar-item[data-active="true"] svg,
.fi-sidebar-nav-item[aria-current="page"] .fi-sidebar-item-icon,
.fi-sidebar-nav-item[aria-current="page"] svg {
    color: #1D4ED8 !important;
}

/* تحسين وضوح الـ Badges */
.fi-sidebar .fi-badge,
.fi-sidebar .fi-sidebar-item-badge,
.fi-badge {
    background: #EF4444 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    min-width: 1.5rem !important;
    text-align: center !important;
}

.fi-badge-success {
    background: #10B981 !important;
}

.fi-badge-warning {
    background: #F59E0B !important;
}

.fi-badge-info {
    background: #3B82F6 !important;
}

/* إخفاء البحث */
.fi-global-search,
[role="search"],
.fi-topbar-end .fi-global-search-field {
    display: none !important;
}

/* ========================================
   🎨 ألوان هادئة ورقيقة
   ======================================== */
:root {
    --calm-blue: #E3F2FD;
    --calm-blue-dark: #90CAF9;
    --calm-teal: #B2DFDB;
    --calm-teal-dark: #4DB6AC;
    --calm-purple: #E1BEE7;
    --calm-green: #C8E6C9;
    --calm-yellow: #FFF9C4;
    --calm-rose: #F8BBD0;
    --calm-grey: #F5F5F5;
}


/* تصميم الجداول */
.fi-ta,
.fi-ta-table {
    border: 2px solid var(--calm-grey) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.fi-ta-header-ctn,
.fi-ta-header {
    background: linear-gradient(135deg, var(--calm-teal) 0%, var(--calm-blue) 100%) !important;
    color: #37474F !important;
}

.fi-ta-row:nth-child(even) .fi-ta-cell {
    background: var(--calm-blue) !important;
}

.fi-ta-row:hover .fi-ta-cell {
    background: var(--calm-teal) !important;
    transition: all 0.2s ease !important;
}

/* تصميم الأزرار */
.fi-btn-primary {
    background: linear-gradient(135deg, var(--calm-teal-dark) 0%, var(--calm-blue-dark) 100%) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(77, 182, 172, 0.25) !important;
}



/* ========================================
   📋 تنسيق القائمة المنسدلة الفرعية (Dropdown)
   ======================================== */
.fi-topbar .fi-dropdown-panel {
    background-color: #f8fafc !important; /* خلفية رمادي فاتح مائل للأزرق */
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.fi-dropdown-list-item-label {
    color: #1e293b !important;
    font-weight: 500 !important;
}

/* أيقونات الـ dropdown (القائمة المنسدلة) بلون مناسب للخلفية الفاتحة */
.fi-dropdown-list svg,
.fi-dropdown-list-item svg,
.fi-dropdown-list a svg,
.fi-dropdown-list button svg {
    color: #475569 !important;
    opacity: 0.8 !important;
}

.fi-dropdown-list a:hover,
.fi-dropdown-list button:hover,
.fi-dropdown-list-item:hover {
    background-color: #e2e8f0 !important;
    border-radius: 0.5rem !important;
}

.fi-dropdown-list a:hover svg,
.fi-dropdown-list button:hover svg,
.fi-dropdown-list-item:hover svg,
.fi-dropdown-list a:hover .fi-dropdown-list-item-label,
.fi-dropdown-list button:hover .fi-dropdown-list-item-label,
.fi-dropdown-list-item:hover .fi-dropdown-list-item-label {
    opacity: 1 !important;
    color: #0f172a !important;
}

/* =====================================================
   🔐 شاشة تسجيل الدخول
   ===================================================== */
/* إزالة اللون الغامق من الحاوية الخارجية ليظهر شكل حبوب القهوة أكثر */
.fi-simple-main {
    background: transparent !important;
    box-shadow: none !important;
}

/* جعل الكارت الداخلي أزرق فاتح وشفاف (Glassmorphism) */
.fi-simple-main .fi-card,
.fi-simple-page {
    background: rgba(14, 165, 233, 0.25) !important; /* أزرق سماوي شفاف جداً */
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* جعل كافة النصوص في شاشة الدخول بيضاء وواضحة (بما فيها اللوجو) */
.fi-simple-main h1,
.fi-simple-main h2,
.fi-simple-main h3,
.fi-simple-main p,
.fi-simple-main span,
.fi-simple-main label,
.fi-simple-main a,
.fi-simple-main div,
.fi-simple-main .fi-logo {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
}

/* الحفاظ على وضوح الحقول */
.fi-simple-main input {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    text-shadow: none !important;
}

.fi-simple-main input:focus {
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5) !important;
}