* { font-family: 'Inter', sans-serif; }
/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6366f1; }
/* Sidebar active */
.nav-active { background: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 4px 15px rgba(99,102,241,0.4); }
/* Glass card */
.glass { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(99,102,241,0.15); }
/* Toast animation */
.toast-enter { animation: slideInRight 0.4s ease-out; }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* Stat card hover */
.stat-card { transition: all 0.3s ease; }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
/* Badge pulse */
.badge-pulse { animation: pulse 2s infinite; }
/* Table row hover */
.table-row-hover { transition: background 0.15s ease; }
.table-row-hover:hover { background: rgba(99,102,241,0.08); }
/* Gradient text */
.gradient-text { background: linear-gradient(135deg, #6366f1, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
/* Dropdown */
.dropdown-menu { transform-origin: top right; transition: all 0.2s ease; }

/* ── RESPONSIVE SIDEBAR ─────────────────────────────── */
#sidebar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Mobile: sidebar hidden off-screen by default */
@media (max-width: 1023px) {
    #sidebar {
        transform: translateX(-100%);
    }
    #sidebar.sidebar-open {
        transform: translateX(0);
    }
}
/* Desktop: sidebar always visible */
@media (min-width: 1024px) {
    #sidebar {
        transform: translateX(0) !important;
    }
}
/* Sidebar overlay backdrop */
#sidebar-overlay {
    transition: opacity 0.3s ease;
}

/* ── CHROME AUTOFILL OVERRIDES ─────────────────────────────── */
/* Fixes issue where saved passwords make input background white in dark mode */
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover, 
.dark input:-webkit-autofill:focus, 
.dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1e293b inset !important; /* matches slate-800 */
    -webkit-text-fill-color: white !important;
    caret-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

html:not(.dark) input:-webkit-autofill,
html:not(.dark) input:-webkit-autofill:hover, 
html:not(.dark) input:-webkit-autofill:focus, 
html:not(.dark) input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #f8fafc inset !important; /* matches slate-50 */
    -webkit-text-fill-color: #0f172a !important; /* matches slate-900 */
    caret-color: #0f172a !important;
    transition: background-color 5000s ease-in-out 0s;
}