/* ==========================================================================
   SISTEM PENCAHAYAAN PROFESIONAL (DARK & LIGHT MODE) - DESA PAPAYAN
   Desain Ergonomis Anti-Silau (Eye-Friendly Obsidian & Deep Navy Palette)
   ========================================================================== */

/* Transisi Halus (Smooth Transitions) */
html, body, div, section, header, nav, footer, button, input, select, textarea, .card, article {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}

/* ==========================================================================
   DARK MODE RULES (Ketika class "dark" aktif pada <html>)
   ========================================================================== */
html.dark {
  color-scheme: dark;
}

/* 1. Latar Belakang Utama (Canvas Obsidian) */
html.dark body {
  background-color: #070b14 !important;
  color: #e2e8f0 !important;
}

/* Seluruh Section Kontainer */
html.dark section,
html.dark .page-view-container,
html.dark main {
  background-color: transparent !important;
}

/* ==========================================================================
   2. PERLINDUNGAN MUTLAK OVERLAY FOTO & BANNER HERO (TIDAK BOLEH DITUTUP)
   ========================================================================== */
html.dark .carousel-slide > div,
html.dark .carousel-slide [class*="bg-gradient-to-"],
html.dark [class*="absolute"][class*="bg-gradient-to-"],
html.dark [class*="inset-0"][class*="bg-gradient-to-"],
html.dark [class*="inset-x-0"][class*="bg-gradient-to-"],
html.dark [class*="bottom-0"][class*="bg-gradient-to-"],
html.dark .group [class*="absolute"][class*="bg-gradient-to-"] {
  background-color: transparent !important;
}

/* Pastikan foto profil dan gambar banner selalu tampil jernih */
html.dark img {
  opacity: 1 !important;
  filter: none !important;
}

/* ==========================================================================
   3. KARTU & KONTAINER ELEMEN (Dark Slate Cards)
   ========================================================================== */
html.dark .bg-white {
  background-color: #0e172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.45) !important;
}

html.dark .bg-slate-50,
html.dark .bg-gray-50,
html.dark .bg-slate-100,
html.dark .bg-gray-100 {
  background-color: #0a1120 !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

html.dark .bg-slate-200,
html.dark .bg-gray-200 {
  background-color: #162035 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .bg-slate-900 {
  background-color: #070b14 !important;
}

/* ==========================================================================
   4. PENYESUAIAN KARTU BERGRADASI TERANG (HANYA KARTU PUTIH/PASTEL)
   ========================================================================== */
html.dark [class*="bg-gradient-to-br"][class*="from-white"],
html.dark [class*="bg-gradient-to-b"][class*="from-white"],
html.dark [class*="bg-gradient-to-r"][class*="from-white"] {
  background-image: none !important;
  background-color: #0e172a !important;
}

/* Background section Sejarah & Bagan Kelembagaan */
html.dark section[class*="from-amber-50"],
html.dark section[class*="from-slate-50"] {
  background: #070b14 !important;
  background-image: none !important;
}

/* ==========================================================================
   5. MENU BERANDA: SAMBUTAN KADES & 8 KARTU MENU UTAMA
   ========================================================================== */
/* Kartu Sambutan Kades di Beranda */
html.dark [class*="from-white"][class*="to-emerald-50"] {
  background-color: #0e172a !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 8 Kartu Menu Navigasi Utama */
html.dark .grid > [onclick*="navigateToView"] {
  background-color: #0e172a !important;
  background-image: none !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.45) !important;
}

html.dark .grid > [onclick*="navigateToView"] h3 {
  color: #f8fafc !important;
}

html.dark .grid > [onclick*="navigateToView"] p {
  color: #94a3b8 !important;
}

html.dark .grid > [onclick*="navigateToView"] ul,
html.dark .grid > [onclick*="navigateToView"] li {
  color: #cbd5e1 !important;
}

html.dark .grid > [onclick*="navigateToView"] .border-t {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   6. MENU PROFIL: KARTU VISI & MISI KEPALA DESA
   ========================================================================== */
/* Kartu Visi */
html.dark [class*="from-emerald-50"][class*="via-teal-50"] {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.45) 0%, #0d1527 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 10px 25px -5px rgba(6, 78, 59, 0.25) !important;
}

html.dark [class*="from-emerald-50"][class*="via-teal-50"] h4 {
  color: #34d399 !important;
}

html.dark [class*="from-emerald-50"][class*="via-teal-50"] p {
  color: #f8fafc !important;
}

/* Kartu Misi */
html.dark [class*="from-white"][class*="to-blue-50"] {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.35) 0%, #0d1527 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 10px 25px -5px rgba(30, 58, 138, 0.2) !important;
}

html.dark [class*="from-white"][class*="to-blue-50"] h4 {
  color: #60a5fa !important;
}

html.dark [class*="from-white"][class*="to-blue-50"] li,
html.dark [class*="from-white"][class*="to-blue-50"] span {
  color: #e2e8f0 !important;
}

/* ==========================================================================
   7. TIPOGRAFI & KONTRAS TEKS
   ========================================================================== */
/* Judul & Headings */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-gray-900,
html.dark .text-gray-800 {
  color: #f8fafc !important;
}

/* Teks Paragraf & Isi Konten */
html.dark p,
html.dark .text-slate-700,
html.dark .text-slate-600,
html.dark .text-gray-700,
html.dark .text-gray-600 {
  color: #cbd5e1 !important;
}

/* Teks Keterangan & Subtitle */
html.dark .text-slate-500,
html.dark .text-slate-400,
html.dark .text-gray-500,
html.dark .text-gray-400 {
  color: #94a3b8 !important;
}

/* Inversi Warna Teks Gelap ke Warna Terang Sejuk */
html.dark .text-emerald-950,
html.dark .text-emerald-900,
html.dark .text-emerald-800,
html.dark .text-emerald-700,
html.dark .text-brand-900,
html.dark .text-brand-800,
html.dark .text-brand-700 {
  color: #34d399 !important;
}

html.dark .text-amber-950,
html.dark .text-amber-900,
html.dark .text-amber-800,
html.dark .text-amber-700 {
  color: #fbbf24 !important;
}

html.dark .text-blue-950,
html.dark .text-blue-900,
html.dark .text-blue-800,
html.dark .text-blue-700 {
  color: #60a5fa !important;
}

html.dark .text-teal-950,
html.dark .text-teal-900,
html.dark .text-teal-800,
html.dark .text-teal-700 {
  color: #2dd4bf !important;
}

html.dark .text-purple-950,
html.dark .text-purple-900,
html.dark .text-purple-800,
html.dark .text-purple-700 {
  color: #c084fc !important;
}

html.dark .text-indigo-950,
html.dark .text-indigo-900,
html.dark .text-indigo-800,
html.dark .text-indigo-700 {
  color: #818cf8 !important;
}

html.dark .text-rose-950,
html.dark .text-rose-900,
html.dark .text-rose-800,
html.dark .text-rose-700,
html.dark .text-red-800,
html.dark .text-red-900 {
  color: #fb7185 !important;
}

/* ==========================================================================
   8. LENCANA & BADGE SOFT ACCENT
   ========================================================================== */
html.dark .bg-emerald-50,
html.dark .bg-emerald-100,
html.dark [class*="bg-emerald-50/"],
html.dark [class*="bg-emerald-100/"],
html.dark .bg-brand-50,
html.dark .bg-brand-100 {
  background-color: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #34d399 !important;
}

html.dark .bg-amber-50,
html.dark .bg-amber-100,
html.dark [class*="bg-amber-50/"],
html.dark [class*="bg-amber-100/"] {
  background-color: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fbbf24 !important;
}

html.dark .bg-blue-50,
html.dark .bg-blue-100,
html.dark [class*="bg-blue-50/"],
html.dark [class*="bg-blue-100/"] {
  background-color: rgba(59, 130, 246, 0.16) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

html.dark .bg-teal-50,
html.dark .bg-teal-100,
html.dark [class*="bg-teal-50/"],
html.dark [class*="bg-teal-100/"] {
  background-color: rgba(20, 184, 166, 0.16) !important;
  border-color: rgba(20, 184, 166, 0.3) !important;
  color: #2dd4bf !important;
}

html.dark .bg-purple-50,
html.dark .bg-purple-100,
html.dark [class*="bg-purple-50/"],
html.dark [class*="bg-purple-100/"] {
  background-color: rgba(168, 85, 247, 0.16) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
  color: #c084fc !important;
}

html.dark .bg-rose-50,
html.dark .bg-rose-100 {
  background-color: rgba(244, 63, 94, 0.16) !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
  color: #fb7185 !important;
}

/* ==========================================================================
   9. BORDER & GARIS PEMBATAS
   ========================================================================== */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-emerald-100,
html.dark .border-emerald-200,
html.dark .border-amber-100,
html.dark .border-amber-200,
html.dark .border-blue-100,
html.dark .border-blue-200 {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   10. BAGAN STRUKTUR ORGANISASI & TAB SWITCHER
   ========================================================================== */
html.dark #tab-btn-bagan-pemdes.bg-white {
  background-color: #1e293b !important;
  color: #34d399 !important;
}

html.dark #tab-btn-bagan-bpd.bg-white {
  background-color: #1e293b !important;
  color: #818cf8 !important;
}

/* ==========================================================================
   11. FORMULIR & INPUT
   ========================================================================== */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.dark textarea,
html.dark select {
  background-color: #0b1120 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}

/* ==========================================================================
   12. MODALS & POPUPS
   ========================================================================== */
html.dark .modal-container,
html.dark [id^="modal"],
html.dark [id^="lightbox"] {
  border-color: #334155 !important;
}

/* ==========================================================================
   13. LEAFLET & PETA
   ========================================================================== */
html.dark .leaflet-container {
  background: #070b14 !important;
}

html.dark .leaflet-popup-content-wrapper,
html.dark .leaflet-popup-tip {
  background: #0e172a !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7) !important;
}

html.dark .leaflet-popup-content h4,
html.dark .leaflet-popup-content div,
html.dark .leaflet-popup-content p,
html.dark .leaflet-popup-content span {
  color: #f8fafc !important;
}

/* ==========================================================================
   14. FLOATING QUICK TOGGLE PILL
   ========================================================================== */
.floating-theme-toggle {
  position: fixed;
  bottom: 84px;
  right: 20px;
  z-index: 45;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spinSlow 12s linear infinite;
}

/* ==========================================================================
   15. PENYESUAIAN KARTU PIAGAM & PRESTASI (DARK MODE)
   ========================================================================== */
html.dark .card-piagam {
  background-color: #0f172a !important;
  background-image: none !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7) !important;
}

html.dark .card-piagam:hover {
  border-color: rgba(245, 158, 11, 0.75) !important;
  box-shadow: 0 16px 32px -4px rgba(245, 158, 11, 0.2) !important;
}

html.dark .card-piagam .piagam-instansi {
  color: #fbbf24 !important; /* Gold Amber 400 */
}

html.dark .card-piagam .piagam-instansi i {
  color: #f59e0b !important;
}

html.dark .card-piagam .piagam-judul {
  color: #ffffff !important; /* Crisp pure white */
}

html.dark .card-piagam:hover .piagam-judul {
  color: #fbbf24 !important;
}

html.dark .card-piagam .piagam-deskripsi {
  color: #cbd5e1 !important; /* Slate 300, clear & high contrast */
}

html.dark .card-piagam .piagam-footer {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #fbbf24 !important;
}

html.dark .card-piagam .piagam-tanggal {
  color: #94a3b8 !important; /* Slate 400 */
}

/* Bar Ringkasan Prestasi di Mode Gelap */
html.dark .bar-ringkasan-prestasi {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .bar-ringkasan-prestasi .piagam-bar-label {
  color: #fbbf24 !important;
}

html.dark .bar-ringkasan-prestasi .piagam-badge-count {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fde68a !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
}

html.dark .bar-ringkasan-prestasi .piagam-badge-status {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #a7f3d0 !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}


/* ==========================================================================
   16. PANEL ADMIN TERPADU - MODE GELAP ERGONOMIS & GRADASI WARNA HARMONIS (V2)
   Desain Anti-Silau, Kontras Tinggi, dan Gradasi Harmonis untuk Semua Menu Admin
   ========================================================================== */

/* Canvas & Kontainer Utama Admin */
html.dark body {
  background-color: #070b14 !important;
  color: #e2e8f0 !important;
}

html.dark header.bg-white,
html.dark header[class*="bg-white"] {
  background: linear-gradient(90deg, #090e1c 0%, #0d1527 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.6) !important;
}

html.dark aside.bg-slate-900 {
  background: #060a12 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 1. KARTU UTAMA ADMIN (Card Containers) */
html.dark main .bg-white,
html.dark .admin-card {
  background: linear-gradient(145deg, #0d1527 0%, #111e38 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.55) !important;
}

/* 2. SUB-KARTU & ELEMEN NESTED (SEMUA VARIASI OPASITAS ANTI-SILAU) */
html.dark main [class*="bg-slate-50"],
html.dark main [class*="bg-gray-50"],
html.dark main [class*="bg-slate-100"],
html.dark main [class*="bg-gray-100"] {
  background-color: #080d19 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

html.dark main [class*="bg-slate-200"],
html.dark main [class*="bg-gray-200"],
html.dark main [class*="bg-slate-300"] {
  background-color: #0f182d !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Hover States pada Sub-kartu & List Items */
html.dark main [class*="hover:bg-white"]:hover,
html.dark main [class*="hover:bg-slate-50"]:hover,
html.dark main [class*="hover:bg-slate-100"]:hover {
  background-color: #121e36 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* 3. LENCANA & BADGE STATUS DENGAN WARNA SEJUK HARMONIS (ANTI-SILAU) */
/* Brand / Emerald (Status Aktif / Selesai / Disetujui) */
html.dark main [class*="bg-brand-50"],
html.dark main [class*="bg-brand-100"],
html.dark main [class*="bg-emerald-50"],
html.dark main [class*="bg-emerald-100"] {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #6ee7b7 !important;
}

/* Amber / Orange (Status Menunggu / Pending / Berjalan) */
html.dark main [class*="bg-amber-50"],
html.dark main [class*="bg-amber-100"],
html.dark main [class*="bg-amber-200"],
html.dark main [class*="bg-orange-50"],
html.dark main [class*="bg-orange-100"] {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fcd34d !important;
}

/* Sky / Blue / Cyan (Proses / Info / Verifikasi) */
html.dark main [class*="bg-sky-50"],
html.dark main [class*="bg-sky-100"],
html.dark main [class*="bg-blue-50"],
html.dark main [class*="bg-blue-100"],
html.dark main [class*="bg-cyan-50"] {
  background-color: rgba(14, 165, 233, 0.15) !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
  color: #7dd3fc !important;
}

/* Rose / Red (Ditolak / Hapus / Belum Ditanggapi) */
html.dark main [class*="bg-rose-50"],
html.dark main [class*="bg-rose-100"],
html.dark main [class*="bg-red-50"],
html.dark main [class*="bg-red-100"] {
  background-color: rgba(244, 63, 94, 0.15) !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
  color: #fda4af !important;
}

/* Purple / Indigo (Aspirasi / Dokumen / Publikasi) */
html.dark main [class*="bg-purple-50"],
html.dark main [class*="bg-purple-100"],
html.dark main [class*="bg-indigo-50"],
html.dark main [class*="bg-indigo-100"] {
  background-color: rgba(168, 85, 247, 0.15) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
  color: #d8b4fe !important;
}

/* Teal (Statistik / Wisata / Peta) */
html.dark main [class*="bg-teal-50"],
html.dark main [class*="bg-teal-100"] {
  background-color: rgba(20, 184, 166, 0.15) !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
  color: #5eead4 !important;
}

/* 4. TOMBOL AKSI ADMIN (HOVER STATES) */
html.dark main button[class*="bg-sky-50"]:hover,
html.dark main button[class*="bg-sky-100"]:hover,
html.dark main a[class*="bg-sky-50"]:hover {
  background-color: rgba(14, 165, 233, 0.28) !important;
  color: #ffffff !important;
}

html.dark main button[class*="bg-rose-50"]:hover,
html.dark main button[class*="bg-rose-100"]:hover,
html.dark main a[class*="bg-rose-50"]:hover {
  background-color: rgba(244, 63, 94, 0.28) !important;
  color: #ffffff !important;
}

html.dark main button[class*="bg-amber-100"]:hover,
html.dark main button[class*="bg-amber-50"]:hover,
html.dark main a[class*="bg-amber-50"]:hover {
  background-color: rgba(245, 158, 11, 0.28) !important;
  color: #ffffff !important;
}

html.dark main button[class*="bg-emerald-50"]:hover,
html.dark main button[class*="bg-emerald-100"]:hover,
html.dark main a[class*="bg-emerald-50"]:hover {
  background-color: rgba(16, 185, 129, 0.28) !important;
  color: #ffffff !important;
}

/* 5. FORMULIR, INPUT, SELECT, TEXTAREA */
html.dark main input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
html.dark main textarea,
html.dark main select {
  background-color: #070c18 !important;
  border-color: #223049 !important;
  color: #f8fafc !important;
}

html.dark main input:focus,
html.dark main textarea:focus,
html.dark main select:focus {
  border-color: #10b981 !important;
  background-color: #091122 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}

html.dark main input::placeholder,
html.dark main textarea::placeholder {
  color: #64748b !important;
}

html.dark main select option {
  background-color: #0d1527 !important;
  color: #f8fafc !important;
}

html.dark main input[type="file"]::file-selector-button {
  background-color: #164e63 !important;
  color: #e0f2fe !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 6. TABEL ADMIN */
html.dark main table thead th {
  background-color: #070c17 !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark main table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html.dark main table tbody tr:hover,
html.dark main table tbody tr.hover\:bg-slate-50:hover {
  background-color: rgba(255, 255, 255, 0.035) !important;
}

html.dark main table tbody td {
  color: #e2e8f0 !important;
}

/* 7. MODAL DIALOG */
html.dark [id^="modal"] > div {
  background: linear-gradient(145deg, #0d1527 0%, #111e38 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85) !important;
}

/* 8. TIPOGRAFI & KONTRAS BACA TINGGI */
html.dark main h1, 
html.dark main h2, 
html.dark main h3, 
html.dark main h4, 
html.dark main h5, 
html.dark main h6 {
  color: #ffffff !important;
}

html.dark main .text-slate-900,
html.dark main .text-slate-800 {
  color: #f8fafc !important;
}

html.dark main .text-slate-700,
html.dark main .text-slate-600 {
  color: #cbd5e1 !important;
}

html.dark main .text-slate-500,
html.dark main .text-slate-400 {
  color: #94a3b8 !important;
}

/* Garis Pembatas / Dividers */
html.dark main [class*="border-slate-100"],
html.dark main [class*="border-slate-200"],
html.dark main [class*="border-slate-300"],
html.dark main [class*="border-gray-100"],
html.dark main [class*="border-gray-200"] {
  border-color: rgba(255, 255, 255, 0.07) !important;
}


/* ==========================================================================
   9. ANTI-SILAU (GLARE NEUTRALIZATION & ERGONOMIC DARK MODE)
   Menghilangkan seluruh gradasi pastel terang, background krim/putih/mint/kuning
   pada Mode Gelap agar tidak menyilaukan mata dan teks sangat mudah terbaca.
   ========================================================================== */

/* A. Seluruh variasi background bg-slate-50, bg-gray-50 dengan opacity (/50, /60, /70, /80, /90) */
html.dark [class*="bg-slate-50"],
html.dark [class*="bg-gray-50"],
html.dark [class*="bg-slate-100"],
html.dark [class*="bg-gray-100"] {
  background-color: #0b1325 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Hover state pada baris tabel atau kartu */
html.dark tr[class*="hover:bg-slate-50"]:hover,
html.dark [class*="hover:bg-slate-50"]:hover,
html.dark [class*="hover:bg-white"]:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* B. Netralisasi Seluruh Gradasi Pastel Terang (from-*-50, to-white, via-white) */
html.dark main [class*="bg-gradient-"][class*="to-white"],
html.dark main [class*="bg-gradient-"][class*="via-white"],
html.dark main [class*="bg-gradient-"][class*="from-red-50"],
html.dark main [class*="bg-gradient-"][class*="from-amber-50"],
html.dark main [class*="bg-gradient-"][class*="from-orange-50"],
html.dark main [class*="bg-gradient-"][class*="from-emerald-50"],
html.dark main [class*="bg-gradient-"][class*="from-teal-50"],
html.dark main [class*="bg-gradient-"][class*="from-blue-50"],
html.dark main [class*="bg-gradient-"][class*="from-sky-50"],
html.dark main [class*="bg-gradient-"][class*="from-cyan-50"],
html.dark main [class*="bg-gradient-"][class*="from-purple-50"],
html.dark main [class*="bg-gradient-"][class*="from-indigo-50"],
html.dark main [class*="bg-gradient-"][class*="from-rose-50"],
html.dark main [class*="bg-gradient-"][class*="from-brand-50"],
html.dark main [class*="bg-gradient-"][class*="from-slate-50"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="to-white"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="via-white"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="from-red-50"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="from-amber-50"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="from-orange-50"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="from-emerald-50"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="from-teal-50"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="from-blue-50"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="from-sky-50"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="from-cyan-50"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="from-purple-50"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="from-indigo-50"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="from-rose-50"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="from-brand-50"],
html.dark [id^="modal"] [class*="bg-gradient-"][class*="from-slate-50"] {
  background-image: none !important;
  background-color: #0b1325 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* C. Kustom Khusus: Banner Maintenance Layanan Surat di Dark Mode (Elegan, Teduh, Anti-Silau) */
html.dark [class*="from-red-50"][class*="via-amber-50"] {
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.4) 0%, #0d1527 100%) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

html.dark [class*="from-emerald-50"][class*="via-teal-50"][class*="to-slate-50"] {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.4) 0%, #0d1527 100%) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

/* D. Kustom Khusus: Kotak Penentuan Titik Koordinat Peta & Waktu Tayang Pop-up */
html.dark [class*="from-emerald-50/80"][class*="to-teal-50/80"],
html.dark [class*="from-amber-50/70"][class*="to-emerald-50/40"] {
  background: #0b1325 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* E. Tipografi Warna Gelap (Dark Text) di atas latar gelap diubah menjadi terang kontras tinggi */
html.dark main [class*="text-emerald-950"],
html.dark main [class*="text-emerald-900"],
html.dark main [class*="text-teal-950"],
html.dark main [class*="text-teal-900"],
html.dark main [class*="text-amber-950"],
html.dark main [class*="text-amber-900"],
html.dark main [class*="text-blue-950"],
html.dark main [class*="text-blue-900"],
html.dark main [class*="text-rose-950"],
html.dark main [class*="text-rose-900"],
html.dark main [class*="text-red-950"],
html.dark main [class*="text-red-900"],
html.dark [id^="modal"] [class*="text-emerald-950"],
html.dark [id^="modal"] [class*="text-emerald-900"],
html.dark [id^="modal"] [class*="text-teal-950"],
html.dark [id^="modal"] [class*="text-teal-900"],
html.dark [id^="modal"] [class*="text-amber-950"],
html.dark [id^="modal"] [class*="text-amber-900"],
html.dark [id^="modal"] [class*="text-blue-950"],
html.dark [id^="modal"] [class*="text-blue-900"],
html.dark [id^="modal"] [class*="text-rose-950"],
html.dark [id^="modal"] [class*="text-rose-900"],
html.dark [id^="modal"] [class*="text-red-950"],
html.dark [id^="modal"] [class*="text-red-900"] {
  color: #f8fafc !important;
}

html.dark main [class*="text-emerald-800"],
html.dark main [class*="text-teal-800"],
html.dark [id^="modal"] [class*="text-emerald-800"],
html.dark [id^="modal"] [class*="text-teal-800"] {
  color: #6ee7b7 !important;
}

html.dark main [class*="text-amber-800"],
html.dark [id^="modal"] [class*="text-amber-800"] {
  color: #fcd34d !important;
}

html.dark main [class*="text-blue-800"],
html.dark [id^="modal"] [class*="text-blue-800"] {
  color: #93c5fd !important;
}

html.dark main [class*="text-rose-800"],
html.dark main [class*="text-red-800"],
html.dark [id^="modal"] [class*="text-rose-800"],
html.dark [id^="modal"] [class*="text-red-800"] {
  color: #fda4af !important;
}

/* F. Input, Textarea & Select di seluruh Dark Mode */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
html.dark textarea,
html.dark select {
  background-color: #070c18 !important;
  border-color: #223049 !important;
  color: #f8fafc !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748b !important;
}