* { font-family: 'Plus Jakarta Sans', sans-serif; }

/* SIDEBAR */
.sidebar { background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%); }
.sidebar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent); }
.nav-item { transition: all .25s cubic-bezier(0.4, 0, 0.2, 1); margin-bottom: 2px; }
.nav-item:hover { background: rgba(255,255,255,.05); transform: translateX(4px); }
.nav-item.active { background: rgba(255,255,255,.1); backdrop-filter: blur(10px); border-left: 4px solid #3b82f6; box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.1); color: #fff !important; }
.nav-item.active i { color: #3b82f6 !important; }
.submenu-item { position: relative; transition: all 0.2s ease; }
.submenu-item::before { content: ''; width: 5px; height: 5px; background: rgba(255,255,255,.3); border-radius: 999px; display: inline-block; margin-right: 0.75rem; vertical-align: middle; transition: all 0.2s ease; }
.submenu-item:hover { background: rgba(255,255,255,.04); padding-left: 1rem !important; }
.submenu-item:hover::before { background: #3b82f6; transform: scale(1.3); }

.sidebar-toggle-edge { position: absolute; top: 1.25rem; right: -1.1rem; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: linear-gradient(to right, #ffffff 50%, #1e293b 50%); box-shadow: 0 4px 12px rgba(15,23,42,.15); z-index: 30; transition: transform .2s ease; border: none; cursor: pointer; }
.sidebar-toggle-edge:hover { transform: scale(1.05); }
.sidebar-toggle-edge i { background: linear-gradient(to right, #1e293b 50%, #ffffff 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: transform .2s ease; }

@media (min-width: 1024px) {
    .sidebar-collapsed { width: 5.5rem !important; }
    
    /* Sesuaikan header, nav-item, & footer saat COLLAPSED (Mini) */
    .sidebar-collapsed .px-5,
    .sidebar-collapsed .nav-item,
    .sidebar-collapsed .sidebar-footer { 
        padding-left: 0 !important; 
        padding-right: 0 !important; 
        justify-content: center !important; 
    }
    
    .sidebar-collapsed .nav-item { font-size: 0 !important; gap: 0 !important; }
    .sidebar-collapsed .nav-item i { font-size: 1.1rem !important; margin: 0 !important; }
    
    /* Sembunyikan elemen teks */
    .sidebar-collapsed .sidebar-hide-on-collapsed { display: none !important; }
    
    /* Paksa sembunyi sub-menu saat sedang kecil (biar cuma icon saja) */
    .sidebar-collapsed:not(:hover) [id^="sub-"] { display: none !important; }

    /* ✨ HOVER EXPAND FUNCTIONALITY ✨ */
    .sidebar-collapsed:hover { width: 15rem !important; box-shadow: 10px 0 30px rgba(0,0,0,0.2) !important; z-index: 100; }
    
    /* Munculkan kembali teks saat hover */
    .sidebar-collapsed:hover .sidebar-hide-on-collapsed { display: block !important; }
    
    /* Kembalikan padding & alignment saat hover */
    .sidebar-collapsed:hover .px-5,
    .sidebar-collapsed:hover .nav-item,
    .sidebar-collapsed:hover .sidebar-footer { 
        padding-left: 1.25rem !important; 
        padding-right: 1.25rem !important; 
        justify-content: flex-start !important; 
    }
    
    .sidebar-collapsed:hover .nav-item { font-size: 0.8125rem !important; gap: 0.75rem !important; }
    .sidebar-collapsed:hover .nav-item i { font-size: 1rem !important; }
}

/* NAVBAR */
header { background: rgba(255, 255, 255, 0.8) !important; backdrop-filter: blur(12px); border-bottom: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01); }
.dark header { background: rgba(17, 24, 39, 0.8) !important; border-bottom: 1px solid rgba(31, 41, 55, 0.8); }

.nav-icon-btn { width: 38px; height: 38px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; cursor: pointer; color: #64748b; }
.nav-icon-btn:hover { background: #fff; border-color: #3b82f6; color: #3b82f6; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1); }
.dark .nav-icon-btn { background: #1f2937; border-color: #374151; color: #94a3b8; }
.dark .nav-icon-btn:hover { background: #374151; border-color: #3b82f6; color: #fff; }

#profile-dropdown { transform-origin: top right; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; transform: scale(0.95) translateY(-10px); pointer-events: none; visibility: hidden; display: block !important; }
#profile-dropdown:not(.hidden) { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; visibility: visible; }

/* UI COMPONENTS */
::-webkit-scrollbar { width: 4px; height: 4px;}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #bfd4f8; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
.notif-dot { width:8px; height:8px; background:#ef4444; border-radius:50%; position:absolute; top:6px; right:6px; border:2px solid #fff; }

/* =========================================
   🔥 DARK MODE OVERRIDES (GLOBAL)
   ========================================= */
/* =========================================
   🔥 DARK MODE OVERRIDES (GLOBAL)
   ========================================= */
/* Transisi yang lebih ringan & gesit (Saset) */
body, header, footer, main, .nav-item, .nav-icon-btn, .bg-white { 
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease !important; 
}

.dark body, .dark .bg-slate-50, .dark main { background-color: #0b1120 !important; color: #f8fafc !important; }
.dark header, .dark footer, .dark .bg-white { background-color: #111827 !important; border-color: #1f2937 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important; }
.dark .text-gray-900, .dark .text-gray-800 { color: #f8fafc !important; }
.dark .text-gray-700 { color: #e2e8f0 !important; }
.dark .text-gray-600 { color: #cbd5e1 !important; }
.dark .text-gray-500, .dark .text-gray-400 { color: #94a3b8 !important; }
.dark .border-slate-100, .dark .border-slate-200, .dark .border-slate-50, .dark .border-gray-100, .dark .border-gray-200 { border-color: rgba(255,255,255,0.08) !important; }
.dark .divide-gray-100 > * + *, .dark .divide-gray-50 > * + * { border-color: rgba(255,255,255,0.08) !important; }

.dark .bg-slate-100, .dark .bg-gray-100 { background-color: rgba(255,255,255,0.05) !important; }
.dark .bg-blue-100, .dark .bg-purple-100, .dark .bg-orange-100, .dark .bg-yellow-100, .dark .bg-indigo-100, .dark .bg-green-100 { 
    background-color: rgba(255,255,255,0.1) !important; 
    color: #60a5fa !important; 
}
.dark .notif-dot { border-color: #111827; }

/* Dashboard Card Specifics in Dark Mode */
.dark .shadow-md, .dark .shadow-sm { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
.dark .bg-blue-50, .dark .bg-green-50, .dark .bg-yellow-50, .dark .bg-red-50 { background-color: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.05); }

/* Input & Dropdown in Dark Mode */
.dark input, .dark select, .dark textarea { background-color: #1f2937 !important; border-color: #374151 !important; color: #f8fafc !important; }
.dark input::placeholder { color: #64748b; }
.dark #profile-dropdown { background-color: #111827 !important; border-color: #1f2937 !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important; }
.dark #profile-dropdown a:hover { background-color: #1f2937 !important; color: #60a5fa !important; }
.dark #profile-dropdown .border-slate-100 { border-color: #1f2937 !important; }

/* Table Hover in Dark Mode */
.dark tr.hover\:bg-gray-50:hover { background-color: rgba(255, 255, 255, 0.03) !important; }
.dark .hover\:bg-slate-50:hover { background-color: rgba(255, 255, 255, 0.03) !important; }

/* 🛑 GLOBAL PAGINATION FLAT STYLE (No Shadow) */
nav[role="navigation"] span, 
nav[role="navigation"] a {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

nav[role="navigation"] .z-10 {
    box-shadow: none !important;
    border-color: transparent !important;
}

/* 🛑 GLOBAL INPUT FLAT STYLE (No Shadow / No Ring) */
input:not([type="checkbox"]):not([type="radio"]), 
select, 
textarea {
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

.dark input:not([type="checkbox"]):not([type="radio"]), 
.dark select, 
.dark textarea {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
    color: #ffffff !important;
}

.dark input::placeholder, .dark textarea::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus, 
select:focus, 
textarea:focus {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: none !important;
    outline: none !important;
}

.dark input:not([type="checkbox"]):not([type="radio"]):focus, 
.dark select:focus, 
.dark textarea:focus {
    background-color: #1f2937 !important;
    border-color: #3b82f6 !important;
}