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

/* Custom Scrollbar - Light Mode (Liquid Glass) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 9999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
    border: 3px solid transparent;
    background-clip: padding-box;
}

/* Custom Scrollbar - Dark Mode */
.dark ::-webkit-scrollbar-track {
    background: transparent;
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border: 3px solid transparent;
    background-clip: padding-box;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
    border: 3px solid transparent;
    background-clip: padding-box;
}

/* Lightbox Modal Transitions */
#lightbox {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#lightbox.active {
    display: flex !important;
    opacity: 1 !important;
}

/* Reset Focus & Border Putar Tombol */
*:focus, button:focus, input:focus, a:focus {
    outline: none !important;
    box-shadow: none !important;
}

.nav-tab {
    outline: none !important;
    border: 1px solid transparent !important;
    color: #64748b;
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}

html.dark .nav-tab {
    color: #94a3b8;
}

.nav-tab:hover {
    color: #334155;
    background-color: rgba(255, 255, 255, 0.5);
}

html.dark .nav-tab:hover {
    color: #f1f5f9;
    background-color: rgba(30, 41, 59, 0.6);
}

.nav-tab.active {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #2563eb !important;
    outline: none !important;
}

html.dark .nav-tab.active {
    background-color: rgba(37, 99, 235, 0.15) !important;
    color: #60a5fa !important;
}

/* Layar Login Glassmorphism */
#login-screen {
    background-image: radial-gradient(circle at 50% 30%, rgba(37, 99, 235, 0.15), transparent 70%);
}

/* Liquid Glass Theme Styles */
body {
    background-color: #f8fafc;
    background-image: 
        radial-gradient(at 85% 5%, rgba(148, 163, 184, 0.25) 0px, transparent 50%),
        radial-gradient(at 5% 95%, rgba(125, 211, 252, 0.3) 0px, transparent 50%),
        radial-gradient(at 90% 90%, rgba(129, 140, 248, 0.25) 0px, transparent 50%),
        radial-gradient(at 10% 10%, rgba(226, 232, 240, 0.5) 0px, transparent 50%);
    background-attachment: fixed;
    background-size: cover;
}

html.dark body {
    background: #020617; /* bg-slate-950 */
    background-image: none;
}

/* Base Glass Panel for Light Mode (Liquid Glass Style) */
.glass-panel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.25) 100%) !important;
    backdrop-filter: blur(28px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(120%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 
        0 12px 40px 0 rgba(31, 38, 135, 0.05),
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        inset 0 -1px 2px rgba(255, 255, 255, 0.2) !important;
}

html.dark .glass-panel {
    background: rgba(30, 41, 59, 0.7) !important; /* slate-800 with opacity */
    backdrop-filter: blur(16px) saturate(100%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important;
}

/* Glass Button for Light Mode */
.glass-button {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 
        0 4px 15px rgba(0,0,0,0.05),
        inset 0 1px 1px rgba(255,255,255,1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-button:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6)) !important;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(0,0,0,0.08),
        inset 0 1px 1px rgba(255,255,255,1) !important;
}

html.dark .glass-button {
    background: rgba(51, 65, 85, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

html.dark .glass-button:hover {
    background: rgba(71, 85, 105, 0.8) !important;
}

/* Lightbox Modal Backgrounds */
.glass-overlay {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(25px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(150%) !important;
}

html.dark .glass-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}