/**
 * PLN Multiguna - Midnight Electric Dark Mode Design System
 * PT PLN (Persero) UP3 Makassar Selatan
 * 
 * Aesthetic Reference: Deep Cosmic Navy Glow (#0f356f -> #030d1d)
 * with Glassmorphism (#0a1a36 / rgba(10,26,54,0.78)),
 * Electric Cyan (#38bdf8), Gradient Neon Buttons (#0ea5e9 -> #2563eb -> #4f46e5),
 * and Glowing PLN Golden Amber (#f6c928).
 */

/* ======================================================== */
/* 1. Base Document & Cosmic Radial Glow Background         */
/* ======================================================== */
html.dark {
    color-scheme: dark;
}

html.dark,
html.dark body {
    background: radial-gradient(ellipse at 50% 12%, #0e3061 0%, #071c3c 30%, #030d1d 70%, #020710 100%) fixed !important;
    background-color: #030d1d !important;
    color: #f1f5f9 !important;
    min-height: 100vh;
}

/* ======================================================== */
/* 2. Top Header & Mobile Navigation Bars                   */
/* ======================================================== */
html.dark header {
    background: rgba(7, 20, 42, 0.88) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(56, 189, 248, 0.16) !important;
    color: #f8fafc !important;
}

html.dark nav.fixed.bottom-0 {
    background: rgba(7, 20, 42, 0.95) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(56, 189, 248, 0.2) !important;
}

/* Sidebar Desktop & Mobile */
html.dark aside {
    background: linear-gradient(180deg, #07172e 0%, #030b17 100%) !important;
    border-right: 1px solid rgba(56, 189, 248, 0.15) !important;
}

html.dark aside a.bg-white {
    background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4) !important;
}

/* ======================================================== */
/* 3. Surface & Glassmorphism Card Containers               */
/* ======================================================== */
html.dark .bg-white,
html.dark .bg-white\/95,
html.dark .bg-white\/90,
html.dark .bg-white\/80,
html.dark .bg-white\/70,
html.dark .bg-white\/60 {
    background: rgba(10, 26, 54, 0.78) !important;
    background-color: rgba(10, 26, 54, 0.78) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: rgba(56, 189, 248, 0.2) !important;
    box-shadow: 0 12px 35px -10px rgba(0, 0, 0, 0.6) !important;
    color: #f8fafc !important;
}

html.dark .bg-slate-50,
html.dark .bg-slate-50\/40,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/70,
html.dark .bg-slate-50\/80,
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
    background: rgba(6, 17, 36, 0.85) !important;
    background-color: rgba(6, 17, 36, 0.85) !important;
}

html.dark .bg-slate-100 {
    background-color: rgba(4, 13, 29, 0.95) !important;
}

html.dark .bg-slate-100\/90 {
    background: rgba(6, 17, 36, 0.9) !important;
}

html.dark .bg-slate-200,
html.dark .bg-slate-200\/80,
html.dark .bg-slate-300 {
    background: rgba(15, 34, 68, 0.7) !important;
    border-color: rgba(56, 189, 248, 0.18) !important;
}

/* Override button/link yang memakai bg-white agar jadi dark navy glass */
html.dark button.bg-white,
html.dark a.bg-white:not(aside a.bg-white) {
    background: rgba(15, 34, 68, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    color: #f8fafc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

html.dark button.bg-white:hover,
html.dark a.bg-white:not(aside a.bg-white):hover {
    background: rgba(20, 48, 92, 0.95) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
}

/* ======================================================== */
/* 3.1. Transformasi Gradient Terang Menjadi Midnight Cosmic*/
/* ======================================================== */
/* Elemen Header Card & Banner dengan gradient terang (from-white, from-slate-50, etc.) */
html.dark [class*="bg-gradient-"][class*="from-white"],
html.dark [class*="bg-gradient-"][class*="from-slate-50"],
html.dark [class*="bg-gradient-"][class*="from-blue-50"],
html.dark [class*="bg-gradient-"][class*="from-violet-50"],
html.dark [class*="bg-gradient-"][class*="to-white"],
html.dark [class*="bg-gradient-"][class*="via-slate-50"],
html.dark [class*="bg-gradient-"][class*="via-white"] {
    background-image: linear-gradient(135deg, rgba(8, 23, 48, 0.96) 0%, rgba(5, 16, 36, 0.94) 50%, rgba(12, 33, 68, 0.9) 100%) !important;
    background-color: #071730 !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
    color: #f8fafc !important;
}

/* Override Stop Variables Gradient Tailwind */
html.dark .from-white,
html.dark .from-slate-50,
html.dark .from-blue-50,
html.dark .from-blue-50\/80,
html.dark .from-blue-50\/90,
html.dark .from-violet-50\/60 {
    --tw-gradient-from: rgba(8, 23, 48, 0.96) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(8, 23, 48, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html.dark .via-white,
html.dark .via-slate-50,
html.dark .via-blue-50\/40 {
    --tw-gradient-to: rgba(5, 16, 36, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), rgba(5, 16, 36, 0.95) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

html.dark .to-white,
html.dark .to-slate-50,
html.dark .to-blue-50\/40,
html.dark .to-amber-50\/20,
html.dark .to-purple-50\/30,
html.dark .to-purple-50\/40,
html.dark .to-indigo-50\/70,
html.dark .to-indigo-50\/50 {
    --tw-gradient-to: rgba(12, 33, 68, 0.95) var(--tw-gradient-to-position) !important;
}

/* Khusus Header Formulir (Ganti Meter, Clear Tamper, Lookup IDPEL) */
html.dark [class*="bg-gradient-to-r"][class*="from-slate-50"],
html.dark [class*="bg-gradient-to-r"][class*="from-blue-50"],
html.dark [class*="bg-gradient-to-r"][class*="via-slate-50"] {
    background: linear-gradient(90deg, rgba(8, 23, 48, 0.98) 0%, rgba(14, 38, 77, 0.95) 100%) !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
}

html.dark [class*="bg-gradient-to-r"][class*="from-slate-50"] h2,
html.dark [class*="bg-gradient-to-r"][class*="from-blue-50"] h2 {
    color: #ffffff !important;
}

html.dark [class*="bg-gradient-to-r"][class*="from-slate-50"] p,
html.dark [class*="bg-gradient-to-r"][class*="from-blue-50"] p {
    color: #94a3b8 !important;
}

/* Khusus Panel Notifikasi Internal Aplikasi (from-white via-blue-50/40 to-amber-50/20) */
html.dark .mb-8.overflow-hidden.rounded-3xl.border[class*="bg-gradient-to-br"] {
    background: radial-gradient(ellipse at 50% 0%, rgba(14, 45, 88, 0.88) 0%, rgba(7, 20, 42, 0.94) 60%, rgba(4, 12, 26, 0.98) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7) !important;
}

/* Skenario Uji Notifikasi (Tombol-tombol kartu skenario) */
html.dark .grid button[type="button"].rounded-2xl.border {
    background: rgba(6, 18, 38, 0.85) !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
    color: #f8fafc !important;
}

html.dark .grid button[type="button"].rounded-2xl.border:hover {
    background: rgba(10, 26, 54, 0.95) !important;
    border-color: #38bdf8 !important;
}

html.dark .grid button[type="button"].rounded-2xl.border[class*="bg-blue-50"],
html.dark .grid button[type="button"].rounded-2xl.border.ring-2 {
    background: rgba(14, 165, 233, 0.22) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.25) !important;
}

/* Indikator Dot Biru Header Form */
html.dark .h-2\.5.w-2\.5.rounded-full.bg-\[\#0B3A82\] {
    background-color: #38bdf8 !important;
    box-shadow: 0 0 8px #38bdf8 !important;
}

/* ======================================================== */
/* 4. Borders, Dividers & Rings                             */
/* ======================================================== */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/80,
html.dark .border-slate-200\/90,
html.dark .border-slate-300 {
    border-color: rgba(56, 189, 248, 0.18) !important;
}

html.dark .border-blue-100,
html.dark .border-blue-200,
html.dark .border-blue-200\/80,
html.dark .border-blue-200\/90,
html.dark .border-blue-300 {
    border-color: rgba(56, 189, 248, 0.22) !important;
}

html.dark .border-emerald-200,
html.dark .border-emerald-300 {
    border-color: rgba(16, 185, 129, 0.3) !important;
}

html.dark .border-amber-200,
html.dark .border-amber-300 {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark .border-red-200,
html.dark .border-rose-200 {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

html.dark .border-violet-100,
html.dark .border-violet-200 {
    border-color: rgba(139, 92, 246, 0.25) !important;
}

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(56, 189, 248, 0.14) !important;
}

html.dark .ring-slate-200,
html.dark .ring-1.ring-slate-200 {
    --tw-ring-color: rgba(56, 189, 248, 0.2) !important;
}

/* ======================================================== */
/* 5. Typography & High-Contrast Electric Accents           */
/* ======================================================== */
html.dark .text-slate-900,
html.dark .text-slate-800 {
    color: #f8fafc !important;
}

html.dark .text-slate-700 {
    color: #e2e8f0 !important;
}

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

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

html.dark .text-slate-400 {
    color: #64748b !important;
}

html.dark .text-sky-900,
html.dark .text-blue-900,
html.dark .text-emerald-950,
html.dark .text-amber-950,
html.dark .text-amber-900 {
    color: #f1f5f9 !important;
}

/* Brand Primary Text - High Contrast Electric Sky Blue in Dark Mode */
html.dark .text-\[\#063b75\],
html.dark .text-\[\#0B3A82\],
html.dark .text-\[\#1464b4\] {
    color: #38bdf8 !important;
}

html.dark a.text-\[\#063b75\]:hover,
html.dark a.text-\[\#0B3A82\]:hover,
html.dark a.text-\[\#1464b4\]:hover {
    color: #7dd3fc !important;
}

/* ======================================================== */
/* 6. Primary Action Buttons (Electric Gradient PLN)        */
/* ======================================================== */
html.dark button.bg-\[\#063b75\],
html.dark a.bg-\[\#063b75\],
html.dark button.bg-\[\#0B3A82\],
html.dark a.bg-\[\#0B3A82\],
html.dark .btn-primary {
    background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 50%, #4f46e5 100%) !important;
    box-shadow: 0 4px 18px rgba(14, 165, 233, 0.45) !important;
    border: none !important;
    color: #ffffff !important;
}

html.dark button.bg-\[\#063b75\]:hover,
html.dark a.bg-\[\#063b75\]:hover,
html.dark button.bg-\[\#0B3A82\]:hover,
html.dark a.bg-\[\#0B3A82\]:hover {
    box-shadow: 0 6px 24px rgba(14, 165, 233, 0.7) !important;
    transform: translateY(-1px);
}

/* ======================================================== */
/* 7. Form Controls in Dashboard & Operational Pages        */
/* ======================================================== */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="search"],
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.dark select,
html.dark textarea,
html.dark .login-input {
    background: rgba(6, 18, 38, 0.88) !important;
    background-color: #07152b !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    color: #f8fafc !important;
    font-weight: 500 !important;
}

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

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus,
html.dark .login-input:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35) !important;
    background: #0a1e3d !important;
    background-color: #0a1e3d !important;
    color: #ffffff !important;
}

/* Browser Autofill override (Cegah background putih/kuning bawaan Chrome) */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
html.dark textarea:-webkit-autofill,
html.dark select:-webkit-autofill {
    -webkit-text-fill-color: #f8fafc !important;
    -webkit-box-shadow: 0 0 0px 1000px #07152b inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
    caret-color: #f8fafc !important;
}

/* Checkbox & Radio */
html.dark input[type="checkbox"],
html.dark input[type="radio"] {
    background-color: #07152b !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

html.dark input[type="checkbox"]:checked,
html.dark input[type="radio"]:checked {
    background-color: #0284c7 !important;
    border-color: #38bdf8 !important;
}

/* ======================================================== */
/* 8. Tables                                                */
/* ======================================================== */
html.dark table thead tr {
    background: rgba(5, 16, 36, 0.95) !important;
    color: #94a3b8 !important;
}

html.dark table th {
    background: rgba(5, 16, 36, 0.95) !important;
    color: #94a3b8 !important;
    border-color: rgba(56, 189, 248, 0.12) !important;
}

html.dark table tbody tr {
    border-color: rgba(56, 189, 248, 0.1) !important;
}

html.dark table tbody tr:hover,
html.dark tr.hover\:bg-blue-50\/40:hover {
    background: rgba(14, 165, 233, 0.08) !important;
}

html.dark table td {
    color: #cbd5e1 !important;
    border-color: rgba(56, 189, 248, 0.1) !important;
}

/* ======================================================== */
/* 9. Badges, Banners & Alerts                              */
/* ======================================================== */
html.dark .bg-blue-50,
html.dark .bg-blue-50\/30,
html.dark .bg-blue-50\/40,
html.dark .bg-blue-50\/50,
html.dark .bg-blue-50\/60,
html.dark .bg-blue-50\/70,
html.dark .bg-blue-50\/80,
html.dark .bg-blue-50\/90,
html.dark .bg-sky-50\/70 {
    background-color: rgba(14, 165, 233, 0.12) !important;
    color: #7dd3fc !important;
}

html.dark .bg-blue-100,
html.dark .bg-blue-100\/70 {
    background-color: rgba(14, 165, 233, 0.2) !important;
    color: #38bdf8 !important;
}

html.dark .bg-emerald-50,
html.dark .bg-green-50,
html.dark .bg-emerald-50\/40,
html.dark .bg-emerald-50\/60,
html.dark .bg-emerald-50\/70 {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #6ee7b7 !important;
}

html.dark .bg-emerald-100,
html.dark .bg-green-100 {
    background-color: rgba(16, 185, 129, 0.22) !important;
    color: #a7f3d0 !important;
}

html.dark .bg-amber-50,
html.dark .bg-yellow-50,
html.dark .bg-\[\#fffbea\] {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fcd34d !important;
}

html.dark .bg-amber-100,
html.dark .bg-amber-200,
html.dark .bg-amber-300 {
    background-color: rgba(245, 158, 11, 0.22) !important;
    color: #fde68a !important;
}

html.dark .bg-red-50,
html.dark .bg-rose-50,
html.dark .bg-red-50\/50,
html.dark .bg-red-50\/70,
html.dark .bg-red-50\/80,
html.dark .bg-red-50\/90 {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
}

html.dark .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.22) !important;
    color: #fecaca !important;
}

html.dark .bg-violet-50,
html.dark .bg-purple-50,
html.dark .bg-indigo-50\/40,
html.dark .bg-indigo-50\/60,
html.dark .bg-violet-50\/40,
html.dark .bg-violet-100\/70 {
    background-color: rgba(139, 92, 246, 0.15) !important;
    color: #c4b5fd !important;
}

/* ======================================================== */
/* 10. Modals, Popovers & Dialogs                           */
/* ======================================================== */
html.dark [role="dialog"],
html.dark .modal-card,
html.dark .shadow-xl.bg-white,
html.dark .shadow-2xl.bg-white,
html.dark [x-show="notifDropdownOpen"] {
    background: rgba(10, 26, 54, 0.95) !important;
    background-color: #091a36 !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8) !important;
    color: #f8fafc !important;
}

/* Header User Profile Capsule */
html.dark header .bg-slate-50\/80 {
    background: rgba(6, 17, 36, 0.85) !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
}

/* Header Status Telegram Button */
html.dark #btn-telegram-session.border-amber-400 {
    background-color: rgba(245, 158, 11, 0.18) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
    color: #fcd34d !important;
}
html.dark #btn-telegram-session.border-emerald-300 {
    background-color: rgba(16, 185, 129, 0.18) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    color: #6ee7b7 !important;
}

/* ======================================================== */
/* 11. KHUSUS HALAMAN LOGIN (Sesuai Desain Rujukan 100%)    */
/* ======================================================== */

/* Logo Tile Glowing PLN Amber */
html.dark .logo-glow-tile {
    background: linear-gradient(135deg, #fde047 0%, #f6c928 50%, #eab308 100%) !important;
    box-shadow: 0 0 38px rgba(246, 201, 40, 0.45), 0 8px 24px -4px rgba(0, 0, 0, 0.4) !important;
    border-radius: 1.25rem !important;
}

/* Header Text */
html.dark .login-brand-title {
    color: #ffffff !important;
}

html.dark .login-brand-subtitle {
    color: #94a3b8 !important;
}

/* Floating Login Theme Toggle Button */
html.dark #loginThemeBtn {
    background: rgba(10, 26, 54, 0.85) !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
    color: #f8fafc !important;
}
html.dark #loginThemeBtn:hover {
    background: rgba(15, 34, 68, 0.95) !important;
    border-color: #38bdf8 !important;
}

/* Kartu Utama Login Form */
html.dark .login-card {
    background: rgba(10, 26, 54, 0.72) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html.dark .login-card-title {
    color: #ffffff !important;
}

html.dark .login-label {
    color: #cbd5e1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

/* Input Fields Gelap Transparan Sesuai Desain Midnight PLN */
html.dark .login-input {
    background: rgba(6, 18, 38, 0.88) !important;
    background-color: #07152b !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    color: #f8fafc !important;
    font-weight: 500 !important;
    border-radius: 0.85rem !important;
}

html.dark .login-input::placeholder {
    color: #64748b !important;
    font-weight: 400 !important;
}

html.dark .login-input:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35) !important;
    background: #0a1e3d !important;
    background-color: #0a1e3d !important;
    color: #ffffff !important;
}

html.dark .login-checkbox-label {
    color: #cbd5e1 !important;
}

html.dark .login-helper-text {
    color: #94a3b8 !important;
}

/* Tombol Masuk Sekarang (Gradient Biru Elektrik) */
html.dark .login-submit-btn {
    background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 50%, #4f46e5 100%) !important;
    box-shadow: 0 8px 24px -4px rgba(14, 165, 233, 0.5) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 0.85rem !important;
}

html.dark .login-submit-btn:hover {
    box-shadow: 0 12px 30px -4px rgba(14, 165, 233, 0.7) !important;
    transform: translateY(-1px);
}

/* Kartu Shortcut Akses Cepat */
html.dark .login-shortcut-card {
    background: rgba(5, 16, 36, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 1rem !important;
}

html.dark .login-shortcut-card:hover {
    border-color: #38bdf8 !important;
    background: rgba(7, 22, 48, 0.95) !important;
    box-shadow: 0 6px 18px -2px rgba(56, 189, 248, 0.2) !important;
}

html.dark .login-shortcut-card .shortcut-avatar {
    background: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4) !important;
}

html.dark .login-shortcut-card .shortcut-name {
    color: #ffffff !important;
    font-weight: 700 !important;
}

html.dark .login-shortcut-card .shortcut-desc {
    color: #94a3b8 !important;
}

html.dark .login-shortcut-card .shortcut-arrow {
    color: #38bdf8 !important;
}

html.dark .login-shortcut-card .shortcut-divider {
    border-color: rgba(56, 189, 248, 0.2) !important;
}

html.dark .login-shortcut-card .shortcut-trash {
    color: #64748b !important;
}

html.dark .login-shortcut-card .shortcut-trash:hover {
    color: #f87171 !important;
    background-color: rgba(239, 68, 68, 0.15) !important;
}

/* Kartu Unduh Aplikasi */
html.dark #downloadAppCard {
    background: rgba(10, 26, 54, 0.75) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.6) !important;
}
html.dark #downloadAppCard img.bg-white,
html.dark #pwaModal img.bg-white {
    background: rgba(10, 26, 54, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

/* Modals APK & PWA di Login */
html.dark #apkModal .bg-white,
html.dark #pwaModal .bg-white {
    background: #091a36 !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    color: #f8fafc !important;
}
html.dark #apkModal .bg-slate-50,
html.dark #pwaModal .bg-slate-50 {
    background: rgba(5, 16, 36, 0.9) !important;
    border-color: rgba(56, 189, 248, 0.15) !important;
}
html.dark #apkModal .bg-blue-100,
html.dark #pwaModal .bg-blue-100 {
    background: rgba(14, 165, 233, 0.2) !important;
    color: #38bdf8 !important;
}
html.dark #apkModal .text-slate-600,
html.dark #apkModal .text-slate-700,
html.dark #pwaModal .text-slate-500,
html.dark #pwaModal .text-slate-700 {
    color: #cbd5e1 !important;
}
html.dark #apkModal .text-slate-800,
html.dark #apkModal .text-slate-900,
html.dark #pwaModal .text-slate-900 {
    color: #ffffff !important;
}
html.dark #apkModal [style*="#fffbeb"],
html.dark [style*="#fffbeb"] {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fde68a !important;
}
html.dark #apkModal [style*="#fffbeb"] p,
html.dark [style*="#fffbeb"] p {
    color: #fde68a !important;
}
html.dark #apkModal [style*="#fffbeb"] span,
html.dark #apkModal [style*="#fffbeb"] em,
html.dark #apkModal [style*="#fffbeb"] strong {
    color: #fef08a !important;
}
html.dark #apkModal .bg-slate-200\/80 {
    background: rgba(15, 34, 68, 0.8) !important;
    color: #cbd5e1 !important;
}

/* ======================================================== */
/* 11b. Unduh Installer (.APK & .EXE) Sidebar, Mobile & Login */
/* ======================================================== */
html.dark aside .installer-download-sidebar,
html.dark aside .app-only-hide.bg-\[\#063b75\],
html.dark aside [class*="bg-[#063b75]"] {
    background: transparent !important;
    background-color: transparent !important;
    border-top: 1px solid rgba(56, 189, 248, 0.15) !important;
}

html.dark .installer-download-card {
    background: rgba(10, 26, 54, 0.75) !important;
    background-color: rgba(10, 26, 54, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5) !important;
}

html.dark .installer-download-title {
    color: #38bdf8 !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

html.dark .installer-btn-apk,
html.dark a[href*="unduh.apk"][style*="background: #f6c928"],
html.dark a[href*="unduh.apk"][style*="background:#f6c928"],
html.dark button[onclick*="handleApkClick"][style*="background: #f6c928"],
html.dark button[onclick*="handleApkClick"][style*="background:#f6c928"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    background-color: #d97706 !important;
    color: #030d1d !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3) !important;
    border: none !important;
}

html.dark .installer-btn-apk:hover,
html.dark a[href*="unduh.apk"][style*="background: #f6c928"]:hover,
html.dark button[onclick*="handleApkClick"][style*="background: #f6c928"]:hover {
    filter: brightness(1.15) !important;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.45) !important;
}

html.dark .installer-btn-exe,
html.dark a[href*="unduh.exe"] {
    background: rgba(56, 189, 248, 0.1) !important;
    background-color: rgba(56, 189, 248, 0.1) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #e0f2fe !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark .installer-btn-exe:hover,
html.dark a[href*="unduh.exe"]:hover {
    background: rgba(56, 189, 248, 0.22) !important;
    background-color: rgba(56, 189, 248, 0.22) !important;
    border-color: rgba(56, 189, 248, 0.55) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.3) !important;
}

html.dark .installer-mobile-drawer {
    border-top-color: rgba(56, 189, 248, 0.18) !important;
}

html.dark #downloadAppCard {
    background: linear-gradient(135deg, rgba(10, 26, 54, 0.88) 0%, rgba(6, 17, 36, 0.95) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.7) !important;
}

html.dark .installer-app-icon {
    background-color: rgba(15, 34, 68, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

html.dark #pwaModal > div {
    background-color: #07172e !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85) !important;
}

html.dark #pwaModal > div > div:first-child {
    background: linear-gradient(135deg, #0e2b5c 0%, #06152d 100%) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
}

html.dark #pwaModal .bg-slate-50 {
    background-color: rgba(10, 26, 54, 0.75) !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
    color: #cbd5e1 !important;
}

html.dark #pwaModal .bg-emerald-50 {
    background-color: rgba(6, 78, 59, 0.3) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
    color: #a7f3d0 !important;
}

html.dark #pwaModal .bg-blue-100 {
    background-color: rgba(14, 165, 233, 0.2) !important;
    color: #38bdf8 !important;
}

/* ======================================================== */
/* 12. Active Tab Segmented Control & Inline Overrides      */
/* ======================================================== */
html.dark [style*="background-color: #ffffff"],
html.dark [style*="background-color:#ffffff"],
html.dark [style*="background-color: white"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background:#ffffff"],
html.dark [style*="background: white"] {
    background: rgba(10, 26, 54, 0.95) !important;
    background-color: #0a1a36 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

html.dark .bg-slate-100\/90 button[type="button"][style*="background-color: #ffffff"],
html.dark .bg-slate-100\/90 button[type="button"][style*="background-color:#ffffff"] {
    background: rgba(10, 26, 54, 0.95) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5) !important;
}

html.dark .bg-slate-100\/90 button[type="button"][style*="color: #0b3a82"],
html.dark .bg-slate-100\/90 button[type="button"][style*="color:#0b3a82"] {
    color: #38bdf8 !important;
}

html.dark .bg-slate-100\/90 button[type="button"][style*="color: #047857"],
html.dark .bg-slate-100\/90 button[type="button"][style*="color:#047857"] {
    color: #34d399 !important;
}

html.dark .bg-slate-100\/90 button[type="button"][style*="color: #4338ca"],
html.dark .bg-slate-100\/90 button[type="button"][style*="color:#4338ca"] {
    color: #818cf8 !important;
}

html.dark .bg-slate-100\/90 button[type="button"][style*="color: #6d28d9"],
html.dark .bg-slate-100\/90 button[type="button"][style*="color:#6d28d9"] {
    color: #c084fc !important;
}

/* ======================================================== */
/* 13. Pagination & Code                                    */
/* ======================================================== */
html.dark .pagination a,
html.dark .pagination span {
    background: rgba(10, 26, 54, 0.8) !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
    color: #cbd5e1 !important;
}

html.dark pre,
html.dark code {
    background-color: #040914 !important;
    color: #e2e8f0 !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
}

/* ======================================================== */
/* 14. Leaflet Geospasial Map Styling                       */
/* ======================================================== */
html.dark .leaflet-container {
    background-color: #030d1d !important;
}

html.dark .leaflet-popup-content-wrapper,
html.dark .leaflet-popup-tip {
    background: rgba(10, 26, 54, 0.95) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

html.dark .leaflet-popup-content {
    color: #f8fafc !important;
}

/* ======================================================== */
/* 15. Smooth Theme Transitions                             */
/* ======================================================== */
body,
header,
main,
nav,
aside,
.bg-white,
.bg-slate-50,
.bg-slate-100,
.login-card,
.login-shortcut-card,
input,
select,
textarea {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease, box-shadow 0.2s ease;
}