/* ==========================================================================
   🌓 PORTAL IGI (portal.igi.or.id) Dark Mode Stylesheet
   ========================================================================== */

body.dark-mode {
    background-color: #0f172a !important; /* Slate 900 */
    color: #cbd5e1 !important; /* Slate 300 */
}

/* 🏢 Header & Navigation */
body.dark-mode header {
    background-color: #0f172a !important;
    border-bottom: 1px solid #1e293b !important;
}

body.dark-mode #menu {
    background-color: #0f172a !important;
    border-bottom: 1px solid #1e293b !important;
}

/* 🃏 General Cards & Backgrounds */
body.dark-mode .bg-white,
body.dark-mode .bg-slate-100 {
    background-color: #1e293b !important; /* Slate 800 */
    color: #f1f5f9 !important;
}

body.dark-mode .bg-slate-50,
body.dark-mode .bg-blue-50 {
    background-color: #0f172a !important; /* Slate 900 */
    color: #cbd5e1 !important;
}

/* 🏷️ Border Overrides */
body.dark-mode .border,
body.dark-mode .border-b,
body.dark-mode .border-t,
body.dark-mode .border-l,
body.dark-mode .border-r,
body.dark-mode .border-slate-200,
body.dark-mode .border-slate-200\/80,
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300 {
    border-color: #334155 !important; /* Slate 700 */
}

/* 🎨 Text Colors */
body.dark-mode .text-slate-800,
body.dark-mode .text-gray-800,
body.dark-mode .text-slate-900,
body.dark-mode .text-blue-900,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
    color: #f8fafc !important; /* Slate 50 */
}

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

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

/* 🎯 Services Grid (Layanan Utama) */
body.dark-mode #layanan .w-14.h-14 {
    background-color: #0f172a !important; /* Slate 900 */
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

body.dark-mode #layanan a:hover {
    border-color: #3b82f6 !important;
}

body.dark-mode #layanan a:hover .w-14.h-14 {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* 📊 Statistics Cards */
body.dark-mode .stat-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .stat-card p {
    color: #cbd5e1 !important;
}

body.dark-mode .stat-card .text-gray-800 {
    color: #f8fafc !important;
}

/* 📢 Info Marquee */
body.dark-mode .bg-amber-100 {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

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

/* 🗺️ Leaflet Map Popups */
body.dark-mode .leaflet-popup-content-wrapper,
body.dark-mode .leaflet-popup-tip {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .leaflet-popup-content h4 {
    color: #60a5fa !important;
}

body.dark-mode .leaflet-popup-content p {
    color: #cbd5e1 !important;
}

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

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #3b82f6 !important;
}

/* 💬 Chat Bubble Bantuan (bantuan.php) Overrides */
body.dark-mode .bubble.bg-blue-100 {
    background-color: #1e3a8a !important; /* Deep Blue */
    color: #f1f5f9 !important;
}

body.dark-mode .bubble.bg-blue-100 span.text-blue-800 {
    color: #60a5fa !important; /* Light blue name */
}

body.dark-mode .bubble.bg-gray-200 {
    background-color: #334155 !important; /* Slate 700 */
    color: #f8fafc !important;
}

body.dark-mode .scrollbar-thin {
    scrollbar-color: #475569 transparent !important;
}

body.dark-mode .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #475569 !important;
}

/* 🔐 2FA Verifikasi (2fa.php) Overrides */
body.dark-mode .bg-animation {
    background: linear-gradient(-45deg, #0f172a, #1e1b4b, #1e293b, #111827) !important;
}

body.dark-mode .glow {
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.15) !important;
}