/* ==========================================================
   1. BACKGROUND & STRUKTUR SIDEBAR (Light & Dark Mode)
   ================================================---------- */
.fi-sidebar,
.fi-sidebar-nav,
.fi-sidebar-header {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Otomatis jadi gelap saat Dark Mode aktif */
.dark .fi-sidebar,
.dark .fi-sidebar-nav,
.dark .fi-sidebar-header {
    background-color: #0f172a !important; /* Warna gelap senada dengan background panel */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================
   2. STATE BIASA (INAKTIF)
   ================================================---------- */
.fi-sidebar .fi-sidebar-item-btn {
    background-color: transparent !important;
    transition: all 0.2s ease-in-out;
    border-radius: 0.5rem;
}

.fi-sidebar .fi-sidebar-item-label,
.fi-sidebar-header * {
    color: #334155 !important;
}
.dark .fi-sidebar .fi-sidebar-item-label,
.dark .fi-sidebar-header * {
    color: #cbd5e1 !important; /* Teks abu-abu terang untuk dark mode */
}

.fi-sidebar .fi-sidebar-group-label {
    color: #0f172a !important;
    font-weight: 600;
}
.dark .fi-sidebar .fi-sidebar-group-label {
    color: #f8fafc !important; /* Teks putih untuk grup label di dark mode */
}

.fi-sidebar .fi-sidebar-item-icon {
    color: #0f172a !important;
    transition: color 0.2s ease-in-out;
}
.dark .fi-sidebar .fi-sidebar-item-icon {
    color: #94a3b8 !important; /* Ikon abu-abu terang di dark mode */
}

/* ==========================================================
   3. STATE HOVER
   ================================================---------- */
.fi-sidebar .fi-sidebar-item-btn:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}
.dark .fi-sidebar .fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: #9333ea !important; /* Ungu terang saat di-hover */
}
.dark .fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.dark .fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: #c084fc !important;
}

/* ==========================================================
   4. STATE ACTIVE (MENU YANG SEDANG DIPILIH)
   ================================================---------- */
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-image: linear-gradient(135deg, #9333ea 0%, #c084fc 100%) !important;
    background-color: transparent !important;
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.25);
}

.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Hover pada item Active */
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn:hover {
    background-image: linear-gradient(135deg, #7e22ce 0%, #a855f7 100%) !important;
}