/* ============================================
   Mode gelap panel superadmin
   ============================================
   Halaman panel ditulis dengan kelas Tailwind warna terang. Daripada
   menambahkan varian dark: ke setiap halaman, berkas ini memetakan kelas
   warna yang dipakai ke padanan gelapnya saat <html> berkelas "dark".
   Selektor diawali "html.dark" agar spesifisitasnya mengalahkan kelas
   Tailwind aslinya. Berkas ini dihasilkan dari tabel palet Tailwind v3;
   bila halaman memakai kelas warna baru, tambahkan pemetaannya di sini.
   ============================================ */

html.dark { color-scheme: dark; }
html.dark body { background: #020617 !important; color: #e2e8f0; }

/* Garis default (border tanpa warna, divide, border-b baris tabel) */
html.dark *, html.dark ::before, html.dark ::after { border-color: #1e293b; }

/* Permukaan */
html.dark .bg-white { background-color: #0f172a; }
html.dark .bg-slate-50, html.dark .bg-gray-50 { background-color: #131c31; }
html.dark .bg-slate-100, html.dark .bg-gray-100 { background-color: #1e293b; }
html.dark .bg-slate-200, html.dark .bg-gray-200 { background-color: #273449; }
html.dark .bg-slate-300, html.dark .bg-gray-300 { background-color: #334155; }
html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-gray-50:hover { background-color: #162036; }
html.dark .hover\:bg-slate-100:hover, html.dark .hover\:bg-gray-100:hover { background-color: #1e293b; }
html.dark .hover\:bg-slate-200:hover, html.dark .hover\:bg-gray-200:hover { background-color: #273449; }
html.dark .from-slate-50 { --tw-gradient-from: #131c31 var(--tw-gradient-from-position); --tw-gradient-to: rgba(19, 28, 49, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }

/* Teks netral */
html.dark .text-slate-900, html.dark .text-gray-900, html.dark .text-slate-800, html.dark .text-gray-800 { color: #f1f5f9; }
html.dark .text-slate-700, html.dark .text-gray-700 { color: #e2e8f0; }
html.dark .text-slate-600, html.dark .text-gray-600 { color: #cbd5e1; }
html.dark .text-slate-500, html.dark .text-gray-500 { color: #94a3b8; }
html.dark .text-slate-400, html.dark .text-gray-400 { color: #7c8ba1; }
html.dark .text-slate-300, html.dark .text-gray-300 { color: #475569; }
html.dark .hover\:text-slate-600:hover, html.dark .hover\:text-slate-500:hover { color: #cbd5e1; }

/* Garis netral */
html.dark .border-slate-100, html.dark .border-gray-100, html.dark .border-slate-200, html.dark .border-gray-200 { border-color: #1e293b; }
html.dark .border-slate-300, html.dark .border-gray-300 { border-color: #334155; }

/* Form */
html.dark input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.dark select, html.dark textarea {
  background-color: #0b1324;
  color: #e2e8f0;
  border-color: #334155;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; }
html.dark input:disabled, html.dark select:disabled, html.dark textarea:disabled { background-color: #131c31; color: #7c8ba1; }
html.dark select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}
html.dark .file\:bg-blue-50::file-selector-button { background-color: rgba(59, 130, 246, 0.16); color: #93c5fd; }

/* Bayangan lebih pekat agar kartu tetap terpisah dari latar */
html.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
html.dark .shadow, html.dark .shadow-lg, html.dark .shadow-xl { --tw-shadow-color: rgba(0, 0, 0, 0.6); }

/* Warna aksen: latar transparan, teks lebih terang */
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1); }
html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.16); }
html.dark .bg-red-200 { background-color: rgba(239, 68, 68, 0.26); }
html.dark .hover\:bg-red-50:hover, html.dark .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, 0.24); }
html.dark .text-red-600, html.dark .text-red-700 { color: #fca5a5; }
html.dark .text-red-800, html.dark .text-red-900 { color: #fecaca; }
html.dark .hover\:text-red-700:hover, html.dark .hover\:text-red-800:hover { color: #fecaca; }
html.dark .border-red-100, html.dark .border-red-200, html.dark .border-red-300 { border-color: rgba(239, 68, 68, 0.35); }
html.dark .ring-red-100, html.dark .ring-red-200 { --tw-ring-color: rgba(239, 68, 68, 0.35); }
html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.1); }
html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.16); }
html.dark .bg-orange-200 { background-color: rgba(249, 115, 22, 0.26); }
html.dark .hover\:bg-orange-50:hover, html.dark .hover\:bg-orange-100:hover { background-color: rgba(249, 115, 22, 0.24); }
html.dark .text-orange-600, html.dark .text-orange-700 { color: #fdba74; }
html.dark .text-orange-800, html.dark .text-orange-900 { color: #fed7aa; }
html.dark .hover\:text-orange-700:hover, html.dark .hover\:text-orange-800:hover { color: #fed7aa; }
html.dark .border-orange-100, html.dark .border-orange-200, html.dark .border-orange-300 { border-color: rgba(249, 115, 22, 0.35); }
html.dark .ring-orange-100, html.dark .ring-orange-200 { --tw-ring-color: rgba(249, 115, 22, 0.35); }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1); }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.16); }
html.dark .bg-amber-200 { background-color: rgba(245, 158, 11, 0.26); }
html.dark .hover\:bg-amber-50:hover, html.dark .hover\:bg-amber-100:hover { background-color: rgba(245, 158, 11, 0.24); }
html.dark .text-amber-600, html.dark .text-amber-700 { color: #fcd34d; }
html.dark .text-amber-800, html.dark .text-amber-900 { color: #fde68a; }
html.dark .hover\:text-amber-700:hover, html.dark .hover\:text-amber-800:hover { color: #fde68a; }
html.dark .border-amber-100, html.dark .border-amber-200, html.dark .border-amber-300 { border-color: rgba(245, 158, 11, 0.35); }
html.dark .ring-amber-100, html.dark .ring-amber-200 { --tw-ring-color: rgba(245, 158, 11, 0.35); }
html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.1); }
html.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.16); }
html.dark .bg-yellow-200 { background-color: rgba(234, 179, 8, 0.26); }
html.dark .hover\:bg-yellow-50:hover, html.dark .hover\:bg-yellow-100:hover { background-color: rgba(234, 179, 8, 0.24); }
html.dark .text-yellow-600, html.dark .text-yellow-700 { color: #fde047; }
html.dark .text-yellow-800, html.dark .text-yellow-900 { color: #fef08a; }
html.dark .hover\:text-yellow-700:hover, html.dark .hover\:text-yellow-800:hover { color: #fef08a; }
html.dark .border-yellow-100, html.dark .border-yellow-200, html.dark .border-yellow-300 { border-color: rgba(234, 179, 8, 0.35); }
html.dark .ring-yellow-100, html.dark .ring-yellow-200 { --tw-ring-color: rgba(234, 179, 8, 0.35); }
html.dark .bg-lime-50 { background-color: rgba(132, 204, 22, 0.1); }
html.dark .bg-lime-100 { background-color: rgba(132, 204, 22, 0.16); }
html.dark .bg-lime-200 { background-color: rgba(132, 204, 22, 0.26); }
html.dark .hover\:bg-lime-50:hover, html.dark .hover\:bg-lime-100:hover { background-color: rgba(132, 204, 22, 0.24); }
html.dark .text-lime-600, html.dark .text-lime-700 { color: #bef264; }
html.dark .text-lime-800, html.dark .text-lime-900 { color: #d9f99d; }
html.dark .hover\:text-lime-700:hover, html.dark .hover\:text-lime-800:hover { color: #d9f99d; }
html.dark .border-lime-100, html.dark .border-lime-200, html.dark .border-lime-300 { border-color: rgba(132, 204, 22, 0.35); }
html.dark .ring-lime-100, html.dark .ring-lime-200 { --tw-ring-color: rgba(132, 204, 22, 0.35); }
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.1); }
html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.16); }
html.dark .bg-green-200 { background-color: rgba(34, 197, 94, 0.26); }
html.dark .hover\:bg-green-50:hover, html.dark .hover\:bg-green-100:hover { background-color: rgba(34, 197, 94, 0.24); }
html.dark .text-green-600, html.dark .text-green-700 { color: #86efac; }
html.dark .text-green-800, html.dark .text-green-900 { color: #bbf7d0; }
html.dark .hover\:text-green-700:hover, html.dark .hover\:text-green-800:hover { color: #bbf7d0; }
html.dark .border-green-100, html.dark .border-green-200, html.dark .border-green-300 { border-color: rgba(34, 197, 94, 0.35); }
html.dark .ring-green-100, html.dark .ring-green-200 { --tw-ring-color: rgba(34, 197, 94, 0.35); }
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.1); }
html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.16); }
html.dark .bg-emerald-200 { background-color: rgba(16, 185, 129, 0.26); }
html.dark .hover\:bg-emerald-50:hover, html.dark .hover\:bg-emerald-100:hover { background-color: rgba(16, 185, 129, 0.24); }
html.dark .text-emerald-600, html.dark .text-emerald-700 { color: #6ee7b7; }
html.dark .text-emerald-800, html.dark .text-emerald-900 { color: #a7f3d0; }
html.dark .hover\:text-emerald-700:hover, html.dark .hover\:text-emerald-800:hover { color: #a7f3d0; }
html.dark .border-emerald-100, html.dark .border-emerald-200, html.dark .border-emerald-300 { border-color: rgba(16, 185, 129, 0.35); }
html.dark .ring-emerald-100, html.dark .ring-emerald-200 { --tw-ring-color: rgba(16, 185, 129, 0.35); }
html.dark .bg-teal-50 { background-color: rgba(20, 184, 166, 0.1); }
html.dark .bg-teal-100 { background-color: rgba(20, 184, 166, 0.16); }
html.dark .bg-teal-200 { background-color: rgba(20, 184, 166, 0.26); }
html.dark .hover\:bg-teal-50:hover, html.dark .hover\:bg-teal-100:hover { background-color: rgba(20, 184, 166, 0.24); }
html.dark .text-teal-600, html.dark .text-teal-700 { color: #5eead4; }
html.dark .text-teal-800, html.dark .text-teal-900 { color: #99f6e4; }
html.dark .hover\:text-teal-700:hover, html.dark .hover\:text-teal-800:hover { color: #99f6e4; }
html.dark .border-teal-100, html.dark .border-teal-200, html.dark .border-teal-300 { border-color: rgba(20, 184, 166, 0.35); }
html.dark .ring-teal-100, html.dark .ring-teal-200 { --tw-ring-color: rgba(20, 184, 166, 0.35); }
html.dark .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.1); }
html.dark .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.16); }
html.dark .bg-cyan-200 { background-color: rgba(6, 182, 212, 0.26); }
html.dark .hover\:bg-cyan-50:hover, html.dark .hover\:bg-cyan-100:hover { background-color: rgba(6, 182, 212, 0.24); }
html.dark .text-cyan-600, html.dark .text-cyan-700 { color: #67e8f9; }
html.dark .text-cyan-800, html.dark .text-cyan-900 { color: #a5f3fc; }
html.dark .hover\:text-cyan-700:hover, html.dark .hover\:text-cyan-800:hover { color: #a5f3fc; }
html.dark .border-cyan-100, html.dark .border-cyan-200, html.dark .border-cyan-300 { border-color: rgba(6, 182, 212, 0.35); }
html.dark .ring-cyan-100, html.dark .ring-cyan-200 { --tw-ring-color: rgba(6, 182, 212, 0.35); }
html.dark .bg-sky-50 { background-color: rgba(14, 165, 233, 0.1); }
html.dark .bg-sky-100 { background-color: rgba(14, 165, 233, 0.16); }
html.dark .bg-sky-200 { background-color: rgba(14, 165, 233, 0.26); }
html.dark .hover\:bg-sky-50:hover, html.dark .hover\:bg-sky-100:hover { background-color: rgba(14, 165, 233, 0.24); }
html.dark .text-sky-600, html.dark .text-sky-700 { color: #7dd3fc; }
html.dark .text-sky-800, html.dark .text-sky-900 { color: #bae6fd; }
html.dark .hover\:text-sky-700:hover, html.dark .hover\:text-sky-800:hover { color: #bae6fd; }
html.dark .border-sky-100, html.dark .border-sky-200, html.dark .border-sky-300 { border-color: rgba(14, 165, 233, 0.35); }
html.dark .ring-sky-100, html.dark .ring-sky-200 { --tw-ring-color: rgba(14, 165, 233, 0.35); }
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1); }
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.16); }
html.dark .bg-blue-200 { background-color: rgba(59, 130, 246, 0.26); }
html.dark .hover\:bg-blue-50:hover, html.dark .hover\:bg-blue-100:hover { background-color: rgba(59, 130, 246, 0.24); }
html.dark .text-blue-600, html.dark .text-blue-700 { color: #93c5fd; }
html.dark .text-blue-800, html.dark .text-blue-900 { color: #bfdbfe; }
html.dark .hover\:text-blue-700:hover, html.dark .hover\:text-blue-800:hover { color: #bfdbfe; }
html.dark .border-blue-100, html.dark .border-blue-200, html.dark .border-blue-300 { border-color: rgba(59, 130, 246, 0.35); }
html.dark .ring-blue-100, html.dark .ring-blue-200 { --tw-ring-color: rgba(59, 130, 246, 0.35); }
html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.1); }
html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.16); }
html.dark .bg-indigo-200 { background-color: rgba(99, 102, 241, 0.26); }
html.dark .hover\:bg-indigo-50:hover, html.dark .hover\:bg-indigo-100:hover { background-color: rgba(99, 102, 241, 0.24); }
html.dark .text-indigo-600, html.dark .text-indigo-700 { color: #a5b4fc; }
html.dark .text-indigo-800, html.dark .text-indigo-900 { color: #c7d2fe; }
html.dark .hover\:text-indigo-700:hover, html.dark .hover\:text-indigo-800:hover { color: #c7d2fe; }
html.dark .border-indigo-100, html.dark .border-indigo-200, html.dark .border-indigo-300 { border-color: rgba(99, 102, 241, 0.35); }
html.dark .ring-indigo-100, html.dark .ring-indigo-200 { --tw-ring-color: rgba(99, 102, 241, 0.35); }
html.dark .bg-violet-50 { background-color: rgba(139, 92, 246, 0.1); }
html.dark .bg-violet-100 { background-color: rgba(139, 92, 246, 0.16); }
html.dark .bg-violet-200 { background-color: rgba(139, 92, 246, 0.26); }
html.dark .hover\:bg-violet-50:hover, html.dark .hover\:bg-violet-100:hover { background-color: rgba(139, 92, 246, 0.24); }
html.dark .text-violet-600, html.dark .text-violet-700 { color: #c4b5fd; }
html.dark .text-violet-800, html.dark .text-violet-900 { color: #ddd6fe; }
html.dark .hover\:text-violet-700:hover, html.dark .hover\:text-violet-800:hover { color: #ddd6fe; }
html.dark .border-violet-100, html.dark .border-violet-200, html.dark .border-violet-300 { border-color: rgba(139, 92, 246, 0.35); }
html.dark .ring-violet-100, html.dark .ring-violet-200 { --tw-ring-color: rgba(139, 92, 246, 0.35); }
html.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.1); }
html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.16); }
html.dark .bg-purple-200 { background-color: rgba(168, 85, 247, 0.26); }
html.dark .hover\:bg-purple-50:hover, html.dark .hover\:bg-purple-100:hover { background-color: rgba(168, 85, 247, 0.24); }
html.dark .text-purple-600, html.dark .text-purple-700 { color: #d8b4fe; }
html.dark .text-purple-800, html.dark .text-purple-900 { color: #e9d5ff; }
html.dark .hover\:text-purple-700:hover, html.dark .hover\:text-purple-800:hover { color: #e9d5ff; }
html.dark .border-purple-100, html.dark .border-purple-200, html.dark .border-purple-300 { border-color: rgba(168, 85, 247, 0.35); }
html.dark .ring-purple-100, html.dark .ring-purple-200 { --tw-ring-color: rgba(168, 85, 247, 0.35); }
html.dark .bg-fuchsia-50 { background-color: rgba(217, 70, 239, 0.1); }
html.dark .bg-fuchsia-100 { background-color: rgba(217, 70, 239, 0.16); }
html.dark .bg-fuchsia-200 { background-color: rgba(217, 70, 239, 0.26); }
html.dark .hover\:bg-fuchsia-50:hover, html.dark .hover\:bg-fuchsia-100:hover { background-color: rgba(217, 70, 239, 0.24); }
html.dark .text-fuchsia-600, html.dark .text-fuchsia-700 { color: #f0abfc; }
html.dark .text-fuchsia-800, html.dark .text-fuchsia-900 { color: #f5d0fe; }
html.dark .hover\:text-fuchsia-700:hover, html.dark .hover\:text-fuchsia-800:hover { color: #f5d0fe; }
html.dark .border-fuchsia-100, html.dark .border-fuchsia-200, html.dark .border-fuchsia-300 { border-color: rgba(217, 70, 239, 0.35); }
html.dark .ring-fuchsia-100, html.dark .ring-fuchsia-200 { --tw-ring-color: rgba(217, 70, 239, 0.35); }
html.dark .bg-pink-50 { background-color: rgba(236, 72, 153, 0.1); }
html.dark .bg-pink-100 { background-color: rgba(236, 72, 153, 0.16); }
html.dark .bg-pink-200 { background-color: rgba(236, 72, 153, 0.26); }
html.dark .hover\:bg-pink-50:hover, html.dark .hover\:bg-pink-100:hover { background-color: rgba(236, 72, 153, 0.24); }
html.dark .text-pink-600, html.dark .text-pink-700 { color: #f9a8d4; }
html.dark .text-pink-800, html.dark .text-pink-900 { color: #fbcfe8; }
html.dark .hover\:text-pink-700:hover, html.dark .hover\:text-pink-800:hover { color: #fbcfe8; }
html.dark .border-pink-100, html.dark .border-pink-200, html.dark .border-pink-300 { border-color: rgba(236, 72, 153, 0.35); }
html.dark .ring-pink-100, html.dark .ring-pink-200 { --tw-ring-color: rgba(236, 72, 153, 0.35); }
html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.1); }
html.dark .bg-rose-100 { background-color: rgba(244, 63, 94, 0.16); }
html.dark .bg-rose-200 { background-color: rgba(244, 63, 94, 0.26); }
html.dark .hover\:bg-rose-50:hover, html.dark .hover\:bg-rose-100:hover { background-color: rgba(244, 63, 94, 0.24); }
html.dark .text-rose-600, html.dark .text-rose-700 { color: #fda4af; }
html.dark .text-rose-800, html.dark .text-rose-900 { color: #fecdd3; }
html.dark .hover\:text-rose-700:hover, html.dark .hover\:text-rose-800:hover { color: #fecdd3; }
html.dark .border-rose-100, html.dark .border-rose-200, html.dark .border-rose-300 { border-color: rgba(244, 63, 94, 0.35); }
html.dark .ring-rose-100, html.dark .ring-rose-200 { --tw-ring-color: rgba(244, 63, 94, 0.35); }

/* Cincin badge notifikasi mengikuti warna header */
html.dark .ring-white { --tw-ring-color: #0f172a; }

/* Tombol aksi tabel (.btn-act, didefinisikan di partials/head.ejs) */
html.dark .btn-act-primary { color: #93c5fd; background: rgba(59, 130, 246, 0.16); }
html.dark .btn-act-primary:hover { background: rgba(59, 130, 246, 0.28); }
html.dark .btn-act-success { color: #86efac; background: rgba(34, 197, 94, 0.14); }
html.dark .btn-act-success:hover { background: rgba(34, 197, 94, 0.26); }
html.dark .btn-act-danger { color: #fca5a5; background: rgba(239, 68, 68, 0.14); }
html.dark .btn-act-danger:hover { background: rgba(239, 68, 68, 0.26); }

/* Garis antarbaris (divide-*). Selektor Tailwind-nya lebih spesifik
   daripada aturan border umum di atas, jadi perlu dipetakan sendiri. */
html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #1e293b; }
html.dark .border-gray-50, html.dark .border-slate-50 { border-color: #1e293b; }

/* Gradien latar terang (mis. kartu "Paket Aktif" CMS) */
html.dark .to-blue-50\/40 { --tw-gradient-to: rgba(59, 130, 246, 0.08) var(--tw-gradient-to-position); }