/*
 * MODE GELAP — dipakai saat <html class="dark"> (tombol bulan/matahari di top bar, sidebar & layar login).
 * Halaman lama memakai warna Tailwind tetap (bg-white, text-slate-800, ...); di sini warna-warna terang itu
 * dipetakan ke versi gelap supaya semua halaman ikut berubah tanpa mengubah HTML-nya.
 * Untuk elemen baru, boleh juga langsung memakai varian Tailwind "dark:" (darkMode: 'class' sudah aktif).
 * Hanya berlaku di layar (@media screen): hasil cetak (KK, PDF) tetap putih.
 *
 * Bagian "otomatis" dibuat dari daftar kelas yang dipakai di index.html & pages/*.php
 * (lihat tools/gen_theme_css.js). Jalankan ulang bila menambah warna baru.
 */
@media screen {
  html.dark { color-scheme: dark; }
  html.dark body { background-color: #020617 !important; color: #e2e8f0; }
  html.dark .card-soft { background: #0f172a; border-color: #1e293b; box-shadow: none; }
  html.dark :focus-visible { outline-color: #6f97cf; }

  /* Form: input tanpa warna latar khusus ikut gelap */
  html.dark :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea) {
    background-color: #0b1324; color: #e2e8f0; border-color: #334155;
  }
  html.dark :is(input, textarea)::placeholder { color: #64748b; }
  html.dark :is(input, select, textarea):disabled { background-color: #111a2b; color: #7c8ba1; }
  html.dark select option { background-color: #0f172a; color: #e2e8f0; }

  /* Bayangan & cincin lebih halus di latar gelap */
  html.dark :is(.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) { --tw-shadow-color: rgba(0,0,0,.5); }

  /* Tombol berwarna terang (kuning/amber) tetap memakai teks gelap agar terbaca */
  html.dark :is(.bg-amber-300, .bg-amber-400, .bg-amber-500, .bg-yellow-400):is(.text-purple-950, .text-purple-900, .text-slate-900, .text-slate-800, .text-amber-950) { color: #1c1917 !important; }
  html.dark :is(.bg-amber-300, .bg-amber-400, .bg-amber-500) :is(.text-purple-950, .text-purple-900) { color: #1c1917 !important; }
  /* Teks putih di atas latar yang sudah gelap tetap putih */
  html.dark :is(.bg-purple-700, .bg-purple-800, .bg-purple-900, .bg-purple-950, .bg-emerald-800, .bg-emerald-900) :is(.text-purple-900, .text-purple-950) { color: #e3ebf7 !important; }

  /* Pratinjau kertas (surat) tetap putih */
  html.dark .paper, html.dark .paper * { background-color: #fff !important; color: #000 !important; border-color: #000; }

  /* Scrollbar desktop */
  html.dark ::-webkit-scrollbar-thumb { background: #334155; background-clip: content-box; }
  html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; background-clip: content-box; }

  /* SweetAlert2 */
  html.dark .swal2-popup { background: #0f172a; color: #e2e8f0; }
  html.dark .swal2-title, html.dark .swal2-html-container { color: #e2e8f0; }
  html.dark .swal2-input, html.dark .swal2-select, html.dark .swal2-textarea { background: #0b1324; color: #e2e8f0; border-color: #334155; }

  /* ===== otomatis: pemetaan kelas Tailwind terang -> gelap ===== */
  html.dark .bg-amber-100 { background-color:rgba(245,158,11,0.200) !important; }
  html.dark .bg-amber-50 { background-color:rgba(245,158,11,0.120) !important; }
  html.dark .bg-amber-50\/60 { background-color:rgba(245,158,11,0.072) !important; }
  html.dark .bg-amber-50\/70 { background-color:rgba(245,158,11,0.084) !important; }
  html.dark .bg-blue-100 { background-color:rgba(59,130,246,0.200) !important; }
  html.dark .bg-blue-50 { background-color:rgba(59,130,246,0.120) !important; }
  html.dark .bg-emerald-100 { background-color:rgba(16,185,129,0.200) !important; }
  html.dark .bg-emerald-50 { background-color:rgba(16,185,129,0.120) !important; }
  html.dark .bg-emerald-50\/30 { background-color:rgba(16,185,129,0.060) !important; }
  html.dark .bg-fuchsia-100 { background-color:rgba(217,70,239,0.200) !important; }
  html.dark .bg-gray-100 { background-color:#1e293b !important; }
  html.dark .bg-gray-200 { background-color:#334155 !important; }
  html.dark .bg-gray-300 { background-color:#475569 !important; }
  html.dark .bg-gray-50 { background-color:#152033 !important; }
  html.dark .bg-gray-50\/70 { background-color:#152033 !important; }
  html.dark .bg-green-100 { background-color:rgba(34,197,94,0.200) !important; }
  html.dark .bg-indigo-50 { background-color:rgba(99,102,241,0.120) !important; }
  html.dark .bg-pink-100 { background-color:rgba(236,72,153,0.200) !important; }
  html.dark .bg-pink-50 { background-color:rgba(236,72,153,0.120) !important; }
  html.dark .bg-purple-100 { background-color:rgba(74,119,187,0.200) !important; }
  html.dark .bg-purple-200 { background-color:rgba(74,119,187,0.300) !important; }
  html.dark .bg-purple-50 { background-color:rgba(74,119,187,0.120) !important; }
  html.dark .bg-purple-50\/30 { background-color:rgba(74,119,187,0.060) !important; }
  html.dark .bg-purple-50\/40 { background-color:rgba(74,119,187,0.060) !important; }
  html.dark .bg-purple-50\/50 { background-color:rgba(74,119,187,0.060) !important; }
  html.dark .bg-purple-50\/60 { background-color:rgba(74,119,187,0.072) !important; }
  html.dark .bg-purple-50\/80 { background-color:rgba(74,119,187,0.096) !important; }
  html.dark .bg-red-100 { background-color:rgba(239,68,68,0.200) !important; }
  html.dark .bg-red-50 { background-color:rgba(239,68,68,0.120) !important; }
  html.dark .bg-rose-100 { background-color:rgba(244,63,94,0.200) !important; }
  html.dark .bg-rose-50 { background-color:rgba(244,63,94,0.120) !important; }
  html.dark .bg-rose-50\/50 { background-color:rgba(244,63,94,0.060) !important; }
  html.dark .bg-sky-100 { background-color:rgba(14,165,233,0.200) !important; }
  html.dark .bg-sky-50 { background-color:rgba(14,165,233,0.120) !important; }
  html.dark .bg-slate-100 { background-color:#1e293b !important; }
  html.dark .bg-slate-200 { background-color:#334155 !important; }
  html.dark .bg-slate-50 { background-color:#152033 !important; }
  html.dark .bg-teal-100 { background-color:rgba(20,184,166,0.200) !important; }
  html.dark .bg-white { background-color:rgba(15,23,42,1) !important; }
  html.dark .bg-white\/85 { background-color:rgba(15,23,42,0.85) !important; }
  html.dark .bg-white\/90 { background-color:rgba(15,23,42,0.9) !important; }
  html.dark .bg-white\/95 { background-color:rgba(15,23,42,0.95) !important; }
  html.dark .border-amber-100 { border-color:rgba(245,158,11,0.25) !important; }
  html.dark .border-amber-200 { border-color:rgba(245,158,11,0.4) !important; }
  html.dark .border-amber-300 { border-color:rgba(245,158,11,0.4) !important; }
  html.dark .border-amber-400\/30 { border-color:rgba(245,158,11,0.4) !important; }
  html.dark .border-black { border-color:#64748b !important; }
  html.dark .border-blue-100 { border-color:rgba(59,130,246,0.25) !important; }
  html.dark .border-blue-200 { border-color:rgba(59,130,246,0.4) !important; }
  html.dark .border-emerald-100 { border-color:rgba(16,185,129,0.25) !important; }
  html.dark .border-emerald-200 { border-color:rgba(16,185,129,0.4) !important; }
  html.dark .border-emerald-300 { border-color:rgba(16,185,129,0.4) !important; }
  html.dark .border-fuchsia-200 { border-color:rgba(217,70,239,0.4) !important; }
  html.dark .border-gray-100 { border-color:#1e293b !important; }
  html.dark .border-gray-200 { border-color:#334155 !important; }
  html.dark .border-gray-200\/50 { border-color:#334155 !important; }
  html.dark .border-gray-200\/60 { border-color:#334155 !important; }
  html.dark .border-gray-300 { border-color:#3b4a60 !important; }
  html.dark .border-gray-50 { border-color:#1e293b !important; }
  html.dark .border-indigo-200 { border-color:rgba(99,102,241,0.4) !important; }
  html.dark .border-pink-100 { border-color:rgba(236,72,153,0.25) !important; }
  html.dark .border-pink-200 { border-color:rgba(236,72,153,0.4) !important; }
  html.dark .border-purple-100 { border-color:rgba(74,119,187,0.25) !important; }
  html.dark .border-purple-100\/60 { border-color:rgba(74,119,187,0.25) !important; }
  html.dark .border-purple-200 { border-color:rgba(74,119,187,0.4) !important; }
  html.dark .border-purple-300 { border-color:rgba(74,119,187,0.4) !important; }
  html.dark .border-purple-400\/30 { border-color:rgba(74,119,187,0.4) !important; }
  html.dark .border-purple-50 { border-color:rgba(74,119,187,0.25) !important; }
  html.dark .border-red-200 { border-color:rgba(239,68,68,0.4) !important; }
  html.dark .border-rose-100 { border-color:rgba(244,63,94,0.25) !important; }
  html.dark .border-rose-200 { border-color:rgba(244,63,94,0.4) !important; }
  html.dark .border-rose-300\/30 { border-color:rgba(244,63,94,0.4) !important; }
  html.dark .border-sky-100 { border-color:rgba(14,165,233,0.25) !important; }
  html.dark .border-sky-200 { border-color:rgba(14,165,233,0.4) !important; }
  html.dark .border-slate-100 { border-color:#1e293b !important; }
  html.dark .border-slate-200 { border-color:#334155 !important; }
  html.dark .border-slate-200\/80 { border-color:#334155 !important; }
  html.dark .border-slate-300 { border-color:#3b4a60 !important; }
  html.dark .border-teal-200 { border-color:rgba(20,184,166,0.4) !important; }
  html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color:#1e293b !important; }
  html.dark .divide-purple-100 > :not([hidden]) ~ :not([hidden]) { border-color:rgba(74,119,187,0.25) !important; }
  html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color:#1e293b !important; }
  html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color:#334155 !important; }
  html.dark .focus\:bg-white:focus { background-color:rgba(15,23,42,1) !important; }
  html.dark .group:hover .group-hover\:text-purple-800 { color:#9fbbe0 !important; }
  html.dark .hover\:bg-amber-100:hover { background-color:rgba(245,158,11,0.200) !important; }
  html.dark .hover\:bg-emerald-100:hover { background-color:rgba(16,185,129,0.200) !important; }
  html.dark .hover\:bg-gray-200:hover { background-color:#334155 !important; }
  html.dark .hover\:bg-indigo-100:hover { background-color:rgba(99,102,241,0.200) !important; }
  html.dark .hover\:bg-purple-100:hover { background-color:rgba(74,119,187,0.200) !important; }
  html.dark .hover\:bg-purple-100\/70:hover { background-color:rgba(74,119,187,0.140) !important; }
  html.dark .hover\:bg-purple-200:hover { background-color:rgba(74,119,187,0.300) !important; }
  html.dark .hover\:bg-purple-50:hover { background-color:rgba(74,119,187,0.120) !important; }
  html.dark .hover\:bg-purple-50\/40:hover { background-color:rgba(74,119,187,0.060) !important; }
  html.dark .hover\:bg-purple-50\/50:hover { background-color:rgba(74,119,187,0.060) !important; }
  html.dark .hover\:bg-purple-50\/60:hover { background-color:rgba(74,119,187,0.072) !important; }
  html.dark .hover\:bg-red-50:hover { background-color:rgba(239,68,68,0.120) !important; }
  html.dark .hover\:bg-sky-100:hover { background-color:rgba(14,165,233,0.200) !important; }
  html.dark .hover\:bg-sky-50:hover { background-color:rgba(14,165,233,0.120) !important; }
  html.dark .hover\:bg-slate-100:hover { background-color:#1e293b !important; }
  html.dark .hover\:bg-slate-100\/80:hover { background-color:#1e293b !important; }
  html.dark .hover\:bg-slate-200:hover { background-color:#334155 !important; }
  html.dark .hover\:bg-slate-50:hover { background-color:#152033 !important; }
  html.dark .hover\:bg-slate-50\/80:hover { background-color:#152033 !important; }
  html.dark .hover\:text-gray-600:hover { color:#a3b1c6 !important; }
  html.dark .hover\:text-purple-700:hover { color:#9fbbe0 !important; }
  html.dark .hover\:text-purple-900:hover { color:#9fbbe0 !important; }
  html.dark .hover\:text-red-600:hover { color:#fca5a5 !important; }
  html.dark .hover\:text-slate-600:hover { color:#a3b1c6 !important; }
  html.dark .hover\:text-slate-700:hover { color:#cbd5e1 !important; }
  html.dark .hover\:text-slate-800:hover { color:#e2e8f0 !important; }
  html.dark .placeholder-slate-400::placeholder { color:#64748b !important; }
  html.dark .text-amber-600 { color:#fcd34d !important; }
  html.dark .text-amber-700 { color:#fcd34d !important; }
  html.dark .text-amber-800 { color:#fcd34d !important; }
  html.dark .text-amber-900 { color:#fcd34d !important; }
  html.dark .text-amber-950 { color:#fcd34d !important; }
  html.dark .text-black { color:#f1f5f9 !important; }
  html.dark .text-blue-600 { color:#93c5fd !important; }
  html.dark .text-blue-700 { color:#93c5fd !important; }
  html.dark .text-blue-800 { color:#93c5fd !important; }
  html.dark .text-emerald-600 { color:#6ee7b7 !important; }
  html.dark .text-emerald-700 { color:#6ee7b7 !important; }
  html.dark .text-emerald-800 { color:#6ee7b7 !important; }
  html.dark .text-emerald-900 { color:#6ee7b7 !important; }
  html.dark .text-fuchsia-800 { color:#f0abfc !important; }
  html.dark .text-gray-400 { color:#7c8ba1 !important; }
  html.dark .text-gray-500 { color:#94a3b8 !important; }
  html.dark .text-gray-600 { color:#a3b1c6 !important; }
  html.dark .text-gray-700 { color:#cbd5e1 !important; }
  html.dark .text-gray-800 { color:#e2e8f0 !important; }
  html.dark .text-gray-900 { color:#f1f5f9 !important; }
  html.dark .text-green-600 { color:#86efac !important; }
  html.dark .text-indigo-600 { color:#a5b4fc !important; }
  html.dark .text-indigo-700 { color:#a5b4fc !important; }
  html.dark .text-pink-600 { color:#f9a8d4 !important; }
  html.dark .text-pink-700 { color:#f9a8d4 !important; }
  html.dark .text-pink-800 { color:#f9a8d4 !important; }
  html.dark .text-purple-600 { color:#9fbbe0 !important; }
  html.dark .text-purple-700 { color:#9fbbe0 !important; }
  html.dark .text-purple-800 { color:#9fbbe0 !important; }
  html.dark .text-purple-900 { color:#9fbbe0 !important; }
  html.dark .text-purple-950 { color:#9fbbe0 !important; }
  html.dark .text-red-600 { color:#fca5a5 !important; }
  html.dark .text-red-700 { color:#fca5a5 !important; }
  html.dark .text-rose-600 { color:#fda4af !important; }
  html.dark .text-rose-700 { color:#fda4af !important; }
  html.dark .text-rose-800 { color:#fda4af !important; }
  html.dark .text-rose-900 { color:#fda4af !important; }
  html.dark .text-sky-600 { color:#7dd3fc !important; }
  html.dark .text-sky-700 { color:#7dd3fc !important; }
  html.dark .text-sky-800 { color:#7dd3fc !important; }
  html.dark .text-sky-900 { color:#7dd3fc !important; }
  html.dark .text-slate-400 { color:#7c8ba1 !important; }
  html.dark .text-slate-500 { color:#94a3b8 !important; }
  html.dark .text-slate-600 { color:#a3b1c6 !important; }
  html.dark .text-slate-700 { color:#cbd5e1 !important; }
  html.dark .text-slate-800 { color:#e2e8f0 !important; }
  html.dark .text-slate-900 { color:#f1f5f9 !important; }
  html.dark .text-teal-800 { color:#5eead4 !important; }
}