/* 
 * 🌓 dark.css - SIM IGI Dark Mode Overrides
 * Desain Dark Mode Premium, Profesional, dan Modern ala Google.
 */

/* Efek Transisi Transisi Warna Halus */
body, body *, .card, header, div, p, span, a, input, select, textarea, button {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Tema Gelap Utama */
body.dark-mode {
    background-color: #0f172a !important; /* Slate 900 */
    color: #f1f5f9 !important; /* Slate 100 */
}

/* Header & Navigasi */
body.dark-mode header,
body.dark-mode nav {
    background-color: #1e293b !important; /* Slate 800 */
    border-bottom: 1px solid #334155 !important; /* Slate 700 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2) !important;
}

/* Kartu & Container Putih */
body.dark-mode .bg-white,
body.dark-mode .bg-slate-50,
body.dark-mode .bg-gray-50,
body.dark-mode .card,
body.dark-mode .bg-white\/80 {
    background-color: #1e293b !important; /* Slate 800 */
    border-color: #334155 !important;
}

/* Latar Belakang Abu-Abu Ringan */
body.dark-mode .bg-gray-100,
body.dark-mode .bg-slate-100 {
    background-color: #0f172a !important; /* Slate 900 */
}

/* Teks Utama & Judul */
body.dark-mode .text-slate-800,
body.dark-mode .text-slate-900,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-900,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #f8fafc !important; /* Slate 50 */
}

/* Teks Menengah / Abu-Abu */
body.dark-mode .text-slate-700,
body.dark-mode .text-gray-700,
body.dark-mode .text-slate-600,
body.dark-mode .text-gray-600 {
    color: #cbd5e1 !important; /* Slate 300 */
}

/* Teks Pendukung / Muted */
body.dark-mode .text-slate-500,
body.dark-mode .text-gray-500,
body.dark-mode .text-slate-400,
body.dark-mode .text-gray-400 {
    color: #94a3b8 !important; /* Slate 400 */
}

/* Garis Pembatas (Borders) */
body.dark-mode .border-slate-200,
body.dark-mode .border-gray-200,
body.dark-mode .border-slate-100,
body.dark-mode .border-gray-100 {
    border-color: #334155 !important; /* Slate 700 */
}

/* Form Inputs, Selects & Textareas */
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode select,
body.dark-mode textarea {
    background-color: #0f172a !important; /* Slate 900 */
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #3b82f6 !important; /* Blue 500 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

/* Badge & Status Kustom */
body.dark-mode .bg-blue-50 {
    background-color: rgba(30, 41, 59, 0.8) !important; /* Translucent Slate 800 */
    border-color: #1e3a8a !important; /* Deep Blue border */
}
body.dark-mode .text-blue-700 {
    color: #60a5fa !important; /* Blue 400 */
}

body.dark-mode .bg-green-50 {
    background-color: rgba(6, 78, 59, 0.3) !important;
    border-color: #065f46 !important;
}
body.dark-mode .text-green-700 {
    color: #34d399 !important;
}

body.dark-mode .bg-amber-50 {
    background-color: rgba(120, 53, 4, 0.2) !important;
    border-color: #78350f !important;
}
body.dark-mode .text-amber-700,
body.dark-mode .text-amber-800 {
    color: #fbbf24 !important;
}

/* Info Banner Pengumuman */
body.dark-mode .bg-amber-100 {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-mode .text-amber-900,
body.dark-mode .text-amber-800 {
    color: #fbbf24 !important;
}

/* Kustomisasi Scrollbar Dark Mode */
body.dark-mode::-webkit-scrollbar {
    width: 12px;
}
body.dark-mode::-webkit-scrollbar-track {
    background: #0f172a;
}
body.dark-mode::-webkit-scrollbar-thumb {
    background-color: #334155;
    border-radius: 6px;
    border: 3px solid #0f172a;
}

/* Modals */
body.dark-mode .modal-content,
body.dark-mode div[role="dialog"] {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #334155 !important;
}

/* Area Quote / Kutipan Harian (Solid Slate 700 untuk Render Screenshot Sempurna) */
body.dark-mode #quoteArea {
    background-image: none !important; /* Mematikan gradien Tailwind */
    background-color: #334155 !important; /* Warna Solid Slate 700 (Satu Warna Opaque) */
    background: #334155 !important;
    border: 1px solid #475569 !important; /* Border Slate 600 */
    box-shadow: none !important; /* Matikan bayangan agar tidak merusak render html2canvas */
}
body.dark-mode #quoteArea p {
    color: #f1f5f9 !important; /* Slate 100 for maximum readability */
}
body.dark-mode #quoteArea i.fa-quote-left,
body.dark-mode #quoteArea i.fa-quote-right {
    color: rgba(255, 255, 255, 0.2) !important; /* Soft white quote marks */
}

/* ==========================================================================
   👥 Kabar Guru (Sosial Post) Dark Mode Overrides
   ========================================================================== */

/* Container Action Bar (Suka, Pesan, Komentar) & List Komentar */
body.dark-mode .bg-slate-50\/50 {
    background-color: rgba(30, 41, 59, 0.4) !important; /* Semi-transparent Slate 800 */
    border-color: #334155 !important;
}

body.dark-mode .bg-slate-50\/80 {
    background-color: rgba(30, 41, 59, 0.6) !important;
    border-color: #334155 !important;
}

/* Edit Box Post */
body.dark-mode .bg-amber-50\/50 {
    background-color: rgba(120, 53, 4, 0.15) !important;
    border-color: #78350f !important;
}

/* Tombol Aksi di dalam Post */
body.dark-mode .btn-like,
body.dark-mode .btn-tampil-komentar,
body.dark-mode .btn-like + a,
body.dark-mode .btn-tampil-komentar + a,
body.dark-mode a[href^="chat.php"] {
    color: #cbd5e1 !important; /* Slate 300 */
}

/* Status Sudah Menyukai (Blue Active state) */
body.dark-mode .btn-like.text-blue-700 {
    color: #60a5fa !important; /* Blue 400 */
}

/* Efek Hover Tombol Aksi */
body.dark-mode .btn-like:hover,
body.dark-mode .btn-tampil-komentar:hover,
body.dark-mode a[href^="chat.php"]:hover {
    background-color: rgba(51, 65, 85, 0.5) !important; /* Slate 700 dengan opacity */
    color: #f8fafc !important;
}

/* Lencana Hitung Angka (Like / Komentar Counter Badge) */
body.dark-mode span[id^="like-count-"],
body.dark-mode span[id^="count-"] {
    background-color: #334155 !important; /* Slate 700 */
    color: #cbd5e1 !important; /* Slate 300 */
    border: 1px solid #475569 !important; /* Slate 600 */
}

/* ==========================================================================
   📅 Agenda & Kalender (portal_agenda.php) Dark Mode Overrides
   ========================================================================== */

/* Hero Section & Fade Gradient */
body.dark-mode .hero-pattern {
    background-color: #0f172a !important; /* Slate 900 */
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231e3a8a' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}

body.dark-mode .hero-pattern div[class*="from-slate-50"] {
    background-image: linear-gradient(to top, #0f172a, transparent) !important;
}

/* Kalender Container */
body.dark-mode .calendar-container {
    background: #1e293b !important; /* Slate 800 */
    border-color: #334155 !important; /* Slate 700 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .calendar-weekdays {
    border-bottom-color: #334155 !important;
    color: #94a3b8 !important; /* Slate 400 */
}

/* Sel Tanggal */
body.dark-mode .day-cell {
    background: #0f172a !important; /* Slate 900 */
    border-color: #1e293b !important;
}

body.dark-mode .day-cell:hover:not(.empty) {
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .day-date-nasional {
    color: #f8fafc !important; /* Slate 50 */
}

body.dark-mode .day-hijriyah {
    color: #475569 !important; /* Slate 600 */
}

body.dark-mode .day-jawa {
    color: #64748b !important; /* Slate 500 */
}

/* Penanda Khusus Kalender */
body.dark-mode .day-cell.today {
    border: 2px solid #3b82f6 !important;
    background: rgba(59, 130, 246, 0.15) !important;
}

body.dark-mode .day-cell.holiday-masehi {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
}

body.dark-mode .day-cell.academic-event {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: #10b981 !important;
}

body.dark-mode .day-cell.has-agenda {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: #3b82f6 !important;
}

body.dark-mode .day-cell.has-agenda::after {
    background: #1e293b !important;
    color: #fbbf24 !important;
}

body.dark-mode .day-cell.has-personal-agenda::before {
    background: #1e293b !important;
    color: #34d399 !important;
}

/* ==========================================================================
   ♟️ Arena Catur (catur/*) Dark Mode Overrides
   ========================================================================== */

/* Bracket Turnamen Catur */
body.dark-mode .jQBracket .team {
    background-color: #1e293b !important; /* Slate 800 */
    border-color: #334155 !important; /* Slate 700 */
}
body.dark-mode .jQBracket .team .label {
    color: #cbd5e1 !important; /* Slate 300 */
}
body.dark-mode .jQBracket .team.win .score {
    background-color: #fbbf24 !important; /* Golden Yellow */
    color: #0f172a !important; /* Slate 900 */
}
body.dark-mode .jQBracket .score {
    background-color: #475569 !important; /* Slate 600 */
    color: #f8fafc !important;
}
body.dark-mode .jQBracket .team.lose .label {
    color: #fca5a5 !important; /* Red 300 */
}

/* Giliran Melangkah */
body.dark-mode .active-turn-w {
    background-color: rgba(234, 179, 8, 0.15) !important;
    border-left: 6px solid #eab308 !important;
    color: #fef9c3 !important;
}
body.dark-mode .active-turn-b {
    background-color: rgba(220, 38, 38, 0.15) !important;
    border-left: 6px solid #dc2626 !important;
    color: #fee2e2 !important;
}

/* Kustomisasi Tambahan Lobby Catur */
body.dark-mode .list-group-item {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .bg-white.rounded-2xl.shadow-xl.border {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
body.dark-mode .text-gray-800 {
    color: #f1f5f9 !important;
}
body.dark-mode .text-gray-600 {
    color: #94a3b8 !important;
}
body.dark-mode .text-gray-500 {
    color: #64748b !important;
}
body.dark-mode .bg-gray-50 {
    background-color: #0f172a !important;
}
body.dark-mode .border-gray-200 {
    border-color: #334155 !important;
}
body.dark-mode .border-gray-100 {
    border-color: #1e293b !important;
}
body.dark-mode .table th {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}
body.dark-mode .table td {
    border-color: #334155 !important;
}

/* ==========================================================================
   🎛️ Dashboard Menu Icons Dark Mode Overrides (Premium & Consistent)
   ========================================================================== */

/* Set a consistent dark background and border for all menu icon containers */
body.dark-mode .card div.w-14.h-14,
body.dark-mode .card div.w-12.h-12 {
    background-color: #1e293b !important; /* Slate 800 */
    border: 1px solid #334155 !important; /* Slate 700 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Specific icon colors inside containers in dark mode (Un-hovered state) */
body.dark-mode .card div.w-14.h-14.text-purple-600,
body.dark-mode .card div.w-14.h-14 .text-purple-600,
body.dark-mode .card div.w-12.h-12 .text-purple-600,
body.dark-mode .card div.w-14.h-14.text-purple-500,
body.dark-mode .card div.w-14.h-14 .text-purple-500,
body.dark-mode .card div.w-12.h-12 .text-purple-500 { color: #c084fc !important; }

body.dark-mode .card div.w-14.h-14.text-blue-600,
body.dark-mode .card div.w-14.h-14 .text-blue-600,
body.dark-mode .card div.w-12.h-12 .text-blue-600,
body.dark-mode .card div.w-14.h-14.text-blue-500,
body.dark-mode .card div.w-14.h-14 .text-blue-500,
body.dark-mode .card div.w-12.h-12 .text-blue-500 { color: #60a5fa !important; }

body.dark-mode .card div.w-14.h-14.text-amber-600,
body.dark-mode .card div.w-14.h-14 .text-amber-600,
body.dark-mode .card div.w-12.h-12 .text-amber-600,
body.dark-mode .card div.w-14.h-14.text-amber-500,
body.dark-mode .card div.w-14.h-14 .text-amber-500,
body.dark-mode .card div.w-12.h-12 .text-amber-500 { color: #fbbf24 !important; }

body.dark-mode .card div.w-14.h-14.text-red-600,
body.dark-mode .card div.w-14.h-14 .text-red-600,
body.dark-mode .card div.w-12.h-12 .text-red-600,
body.dark-mode .card div.w-14.h-14.text-red-500,
body.dark-mode .card div.w-14.h-14 .text-red-500,
body.dark-mode .card div.w-12.h-12 .text-red-500 { color: #f87171 !important; }

body.dark-mode .card div.w-14.h-14.text-orange-600,
body.dark-mode .card div.w-14.h-14 .text-orange-600,
body.dark-mode .card div.w-12.h-12 .text-orange-600,
body.dark-mode .card div.w-14.h-14.text-orange-500,
body.dark-mode .card div.w-14.h-14 .text-orange-500,
body.dark-mode .card div.w-12.h-12 .text-orange-500 { color: #fb923c !important; }

body.dark-mode .card div.w-14.h-14.text-emerald-600,
body.dark-mode .card div.w-14.h-14 .text-emerald-600,
body.dark-mode .card div.w-12.h-12 .text-emerald-600,
body.dark-mode .card div.w-14.h-14.text-emerald-500,
body.dark-mode .card div.w-14.h-14 .text-emerald-500,
body.dark-mode .card div.w-12.h-12 .text-emerald-500 { color: #34d399 !important; }

body.dark-mode .card div.w-14.h-14.text-green-600,
body.dark-mode .card div.w-14.h-14 .text-green-600,
body.dark-mode .card div.w-12.h-12 .text-green-600,
body.dark-mode .card div.w-14.h-14.text-green-500,
body.dark-mode .card div.w-14.h-14 .text-green-500,
body.dark-mode .card div.w-12.h-12 .text-green-500 { color: #4ade80 !important; }

body.dark-mode .card div.w-14.h-14.text-indigo-600,
body.dark-mode .card div.w-14.h-14 .text-indigo-600,
body.dark-mode .card div.w-12.h-12 .text-indigo-600,
body.dark-mode .card div.w-14.h-14.text-indigo-500,
body.dark-mode .card div.w-14.h-14 .text-indigo-500,
body.dark-mode .card div.w-12.h-12 .text-indigo-500 { color: #818cf8 !important; }

body.dark-mode .card div.w-14.h-14.text-pink-600,
body.dark-mode .card div.w-14.h-14 .text-pink-600,
body.dark-mode .card div.w-12.h-12 .text-pink-600,
body.dark-mode .card div.w-14.h-14.text-pink-500,
body.dark-mode .card div.w-14.h-14 .text-pink-500,
body.dark-mode .card div.w-12.h-12 .text-pink-500 { color: #f472b6 !important; }

body.dark-mode .card div.w-14.h-14.text-teal-600,
body.dark-mode .card div.w-14.h-14 .text-teal-600,
body.dark-mode .card div.w-12.h-12 .text-teal-600,
body.dark-mode .card div.w-14.h-14.text-teal-500,
body.dark-mode .card div.w-14.h-14 .text-teal-500,
body.dark-mode .card div.w-12.h-12 .text-teal-500 { color: #2dd4bf !important; }

body.dark-mode .card div.w-14.h-14.text-slate-600,
body.dark-mode .card div.w-14.h-14 .text-slate-600,
body.dark-mode .card div.w-12.h-12 .text-slate-600,
body.dark-mode .card div.w-14.h-14.text-slate-500,
body.dark-mode .card div.w-14.h-14 .text-slate-500,
body.dark-mode .card div.w-12.h-12 .text-slate-500 { color: #94a3b8 !important; }

body.dark-mode .card div.w-14.h-14.text-cyan-600,
body.dark-mode .card div.w-14.h-14 .text-cyan-600,
body.dark-mode .card div.w-12.h-12 .text-cyan-600,
body.dark-mode .card div.w-14.h-14.text-cyan-500,
body.dark-mode .card div.w-14.h-14 .text-cyan-500,
body.dark-mode .card div.w-12.h-12 .text-cyan-500 { color: #22d3ee !important; }

body.dark-mode .card div.w-14.h-14.text-yellow-600,
body.dark-mode .card div.w-14.h-14 .text-yellow-600,
body.dark-mode .card div.w-12.h-12 .text-yellow-600,
body.dark-mode .card div.w-14.h-14.text-yellow-500,
body.dark-mode .card div.w-14.h-14 .text-yellow-500,
body.dark-mode .card div.w-12.h-12 .text-yellow-500 { color: #facc15 !important; }

/* Keep hover states rich and beautiful by letting them transition to solid backgrounds with white text */
body.dark-mode .card:hover div.w-14.h-14.group-hover\:bg-purple-600,
body.dark-mode .card:hover div.w-12.h-12.group-hover\:bg-purple-600 { background-color: #9333ea !important; color: #ffffff !important; }

body.dark-mode .card:hover div.w-14.h-14.group-hover\:bg-blue-600,
body.dark-mode .card:hover div.w-12.h-12.group-hover\:bg-blue-600 { background-color: #2563eb !important; color: #ffffff !important; }

body.dark-mode .card:hover div.w-14.h-14.group-hover\:bg-amber-600,
body.dark-mode .card:hover div.w-12.h-12.group-hover\:bg-amber-600 { background-color: #d97706 !important; color: #ffffff !important; }

body.dark-mode .card:hover div.w-14.h-14.group-hover\:bg-red-600,
body.dark-mode .card:hover div.w-12.h-12.group-hover\:bg-red-600 { background-color: #dc2626 !important; color: #ffffff !important; }

body.dark-mode .card:hover div.w-14.h-14.group-hover\:bg-orange-600,
body.dark-mode .card:hover div.w-12.h-12.group-hover\:bg-orange-600 { background-color: #ea580c !important; color: #ffffff !important; }

body.dark-mode .card:hover div.w-14.h-14.group-hover\:bg-emerald-600,
body.dark-mode .card:hover div.w-12.h-12.group-hover\:bg-emerald-600 { background-color: #059669 !important; color: #ffffff !important; }

body.dark-mode .card:hover div.w-14.h-14.group-hover\:bg-green-600,
body.dark-mode .card:hover div.w-12.h-12.group-hover\:bg-green-600 { background-color: #16a34a !important; color: #ffffff !important; }

body.dark-mode .card:hover div.w-14.h-14.group-hover\:bg-indigo-600,
body.dark-mode .card:hover div.w-12.h-12.group-hover\:bg-indigo-600 { background-color: #4f46e5 !important; color: #ffffff !important; }

body.dark-mode .card:hover div.w-14.h-14.group-hover\:bg-pink-600,
body.dark-mode .card:hover div.w-12.h-12.group-hover\:bg-pink-600 { background-color: #db2777 !important; color: #ffffff !important; }

body.dark-mode .card:hover div.w-14.h-14.group-hover\:bg-teal-600,
body.dark-mode .card:hover div.w-12.h-12.group-hover\:bg-teal-600 { background-color: #0d9488 !important; color: #ffffff !important; }

body.dark-mode .card:hover div.w-14.h-14.group-hover\:bg-slate-600,
body.dark-mode .card:hover div.w-12.h-12.group-hover\:bg-slate-600 { background-color: #475569 !important; color: #ffffff !important; }

body.dark-mode .card:hover div.w-14.h-14.group-hover\:bg-cyan-600,
body.dark-mode .card:hover div.w-12.h-12.group-hover\:bg-cyan-600 { background-color: #0891b2 !important; color: #ffffff !important; }

body.dark-mode .card:hover div.w-14.h-14.group-hover\:bg-yellow-500,
body.dark-mode .card:hover div.w-12.h-12.group-hover\:bg-yellow-500 { background-color: #eab308 !important; color: #ffffff !important; }

/* Read More & Fade Overlay untuk Postingan Panjang */
body.dark-mode div[id^="fade-"] {
    background-image: linear-gradient(to top, #1e293b, transparent) !important; /* Memudar ke warna Slate 800 (Card BG) */
}
body.dark-mode button[id^="btn-readmore-"] {
    color: #60a5fa !important; /* Biru cerah (Blue 400) agar mudah dibaca */
}
body.dark-mode button[id^="btn-readmore-"]:hover {
    color: #93c5fd !important; /* Blue 300 saat hover */
}