/* Fallback KRITIS: jika Tailwind CDN gagal dimuat/offline, .hidden tetap
   menyembunyikan panel tab agar tidak semua tab menumpuk & seakan "tidak bisa diklik". */
.hidden { display: none !important; }

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

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

/* ============================================================
   LIGHT THEME — dasar
   ============================================================ */
body {
    /* Latar terang: gradasi lembut putih → indigo muda → fuchsia sangat tipis */
    background: linear-gradient(160deg, #f8fafc 0%, #eef2ff 45%, #fdf4ff 100%) !important;
    background-attachment: fixed;
    color: #1e293b;
}

.glass-panel { 
    background: rgba(255, 255, 255, 0.82); 
    backdrop-filter: blur(14px); 
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 10px 30px -12px rgba(79, 70, 229, 0.15), 0 2px 6px rgba(15, 23, 42, 0.04);
}

.glow-effect { 
    box-shadow: 0 12px 40px -10px rgba(99, 102, 241, 0.22), 0 2px 8px rgba(15, 23, 42, 0.05);
}

.custom-scrollbar::-webkit-scrollbar { 
    width: 6px; 
}

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

.custom-scrollbar::-webkit-scrollbar-thumb { 
    background: rgba(99, 102, 241, 0.35); 
    border-radius: 4px; 
}

.month-btn.active { 
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); 
    color: white !important; 
    border-color: rgba(99, 102, 241, 0.5); 
    box-shadow: 0 6px 18px -4px rgba(99, 102, 241, 0.45); 
}

.tab-btn.active {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: white !important;
    box-shadow: 0 6px 18px -4px rgba(99, 102, 241, 0.45);
}

/* Input / select terang dengan fokus ring lembut */
input, select, textarea {
    background-color: #ffffff !important;
    color: #1e293b !important;
}
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
input::placeholder { color: #94a3b8; }

/* ============================================================
   LIGHT THEME — lapisan override utilitas gelap
   (menangani kelas di index.html + markup dinamis dari trend.js)
   ============================================================ */

/* --- Teks --- */
.text-slate-100 { color: #1e293b !important; }
.text-slate-200 { color: #334155 !important; }
.text-slate-300 { color: #334155 !important; }
.text-slate-400 { color: #475569 !important; }
.text-slate-500 { color: #64748b !important; }

/* Judul putih di atas panel terang → gelap.
   Abaikan elemen yang punya latar berwarna sendiri (tombol gradasi/solid) agar tetap putih. */
.text-white:not([class*="bg-"]):not([class*="from-"]):not([class*="via-"]) {
    color: #0f172a !important;
}
/* Tombol dengan latar gelap yang kini terang → teks hover jangan putih */
.bg-slate-900.hover\:text-white:hover,
.bg-slate-950.hover\:text-white:hover { color: #0f172a !important; }

/* Aksen -300/-400 terlalu pucat di latar terang → versi pekat */
.text-indigo-300, .text-indigo-300.font-mono, .text-indigo-300.font-medium { color: #4f46e5 !important; }
.text-indigo-400 { color: #4f46e5 !important; }
.text-emerald-300 { color: #047857 !important; }
.text-amber-300 { color: #b45309 !important; }
.text-amber-400 { color: #d97706 !important; }
.text-purple-300 { color: #7e22ce !important; }
.text-fuchsia-300 { color: #a21caf !important; }
.text-rose-300 { color: #be123c !important; }
.text-rose-400 { color: #e11d48 !important; }
.text-sky-300 { color: #0369a1 !important; }
.text-pink-300 { color: #be185d !important; }
.text-red-400 { color: #dc2626 !important; }

/* --- Latar kartu / kotak --- */
.bg-slate-950 { background-color: transparent !important; }        /* kotak kecil di panel terang */
.bg-slate-900 { background-color: #ffffff !important; }
.bg-slate-900\/80 { background-color: #ffffff !important; }
.bg-slate-900\/50 { background-color: rgba(255, 255, 255, 0.72) !important; }
.bg-slate-900\/40 { background-color: rgba(255, 255, 255, 0.65) !important; }
.bg-slate-900\/30 { background-color: rgba(241, 245, 249, 0.75) !important; }
.bg-slate-900\/20 { background-color: #e0e7ff !important; }        /* spacer kalender */
.bg-slate-800 { background-color: #e2e8f0 !important; }            /* badge kecil */
.bg-slate-800\/60 { background-color: rgba(226, 232, 240, 0.6) !important; }

/* Overlay modal tetap gelap-tipis agar konten menonjol */
.bg-slate-950\/80 { background-color: rgba(15, 23, 42, 0.35) !important; }

/* --- Border --- */
.border-slate-900 { border-color: #e2e8f0 !important; }
.border-slate-800 { border-color: #e2e8f0 !important; }
.border-slate-800\/60, .border-slate-800\/80 { border-color: #e2e8f0 !important; }
.border-slate-700 { border-color: #cbd5e1 !important; }
.border-emerald-900\/50 { border-color: #a7f3d0 !important; }
.hover\:border-indigo-500:hover { border-color: #6366f1 !important; }

/* Kartu deadline hijau tua → tint hijau muda */
.bg-emerald-900\/50 { background-color: rgba(236, 253, 245, 0.8) !important; }

/* --- Pola kalender (dari JS) --- */
.text-amber-200 { color: #92400e !important; }                     /* sel peak date */
.bg-amber-500\/40.text-white, .bg-indigo-500\/30.text-white {
    color: #0f172a !important;                                     /* sel "hari ini": teks gelap di tint terang */
}
.month-btn { 
    background: rgba(255, 255, 255, 0.8); 
    color: #475569;
    border: 1px solid #e2e8f0;
    transition: all .2s ease;
}
.month-btn:hover { border-color: #818cf8; color: #4338ca; }