/* ==========================================================================
   1. VARIABLES & THEME SETUP
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* --- Light Mode (Default) --- */
    --bg-body: #f3f4f6;          /* Abu-abu sangat muda */
    --bg-card: #ffffff;          /* Putih bersih */
    --bg-sidebar: #ffffff;
    --text-main: #1f2937;        /* Hitam arang */
    --text-muted: #6b7280;       /* Abu-abu medium */
    --border-color: #e5e7eb;     /* Abu-abu border */
    
    /* Brand Colors (Emerald Tech) */
    --primary: #10b981;          /* Hijau segar */
    --primary-hover: #059669;
    --primary-light: #d1fae5;    /* Hijau sangat muda untuk background icon */
    --accent: #3b82f6;           /* Biru untuk info/chart */
    --danger: #ef4444;           /* Merah error/panas */
    --warning: #f59e0b;          /* Kuning warning */
    --success: #10b981;
    
    /* Dimensions & Effects */
    --sidebar-width-collapsed: 70px;
    --sidebar-width-expanded: 260px;
    --header-height: 60px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Dark Mode Variables --- */
[data-theme="dark"] {
    --bg-body: #0f172a;          /* Slate gelap */
    --bg-card: #1e293b;          /* Slate medium */
    --bg-sidebar: #1e293b;
    --text-main: #f3f4f6;        /* Putih abu */
    --text-muted: #9ca3af;
    --border-color: #374151;
    
    --primary-light: rgba(16, 185, 129, 0.2);
    --glass-bg: rgba(30, 41, 59, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   2. GLOBAL RESET & BASE STYLES
   ========================================================================== */
* {
    box-sizing: border-box;
    outline: none;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    transition: background-color var(--transition-smooth), color var(--transition-smooth);
    overflow-x: hidden; /* Mencegah scroll horizontal */
    padding-left: var(--sidebar-width-collapsed); /* Memberi ruang untuk sidebar icon */
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    opacity: 0.5;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

a { text-decoration: none; color: inherit; transition: var(--transition-fast); }
ul { list-style: none; padding: 0; margin: 0; }

/* Wrapper Utama agar konten tidak ketutup navbar mobile */
.main-content {
    padding: 2rem;
    min-height: 100vh;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

/* ==========================================================================
   3. SIDEBAR NAVIGATION (PC & MOBILE)
   ========================================================================== */

/* Navbar Container (Sidebar) */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width-collapsed);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    z-index: 1000;
    transition: width var(--transition-smooth);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Sembunyikan teks saat collapsed */
    box-shadow: var(--shadow-sm);
}

/* Logo Section */
.sidebar-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 0 0 18px; /* Center icon visual */
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.sidebar-logo-icon {
    min-width: 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-logo-text {
    margin-left: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary);
    opacity: 0; /* Hidden by default */
    transform: translateX(-10px);
    transition: all var(--transition-fast);
}

/* Menu Items */
.nav-list {
    flex: 1;
    padding: 1rem 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
}
.nav-item {
    margin-bottom: 4px;
}
.nav-link {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 12px; /* Padding agar icon di tengah */
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    white-space: nowrap;
    position: relative;
    transition: all var(--transition-fast);
}
.nav-link:hover, .nav-link.active {
    background-color: var(--primary-light);
    color: var(--primary);
}
.nav-icon {
    min-width: 24px;
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-text {
    margin-left: 12px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

/* User Profile (Bottom) */
.sidebar-footer {
    padding: 1rem 0.5rem;
    border-top: 1px solid var(--border-color);
}
.user-profile {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}
.user-profile:hover { background-color: var(--bg-body); }
.user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--primary);
    color: white;
    display: flex; justify-content: center; align-items: center;
    font-weight: bold;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.user-info {
    margin-left: 12px;
    opacity: 0;
    white-space: nowrap;
}

/* --- HOVER EFFECT & EXPANSION (PC) --- */
/* Saat kursor diarahkan ke sidebar, dia melebar */
.sidebar:hover {
    width: var(--sidebar-width-expanded);
    box-shadow: var(--shadow-lg);
}
.sidebar:hover .sidebar-logo-text,
.sidebar:hover .nav-text,
.sidebar:hover .user-info {
    opacity: 1;
    transform: translateX(0);
}

/* Overlay Blur Effect (PC) */
/* Kita akan inject div ini via JS atau HTML nanti */
#sidebar-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    z-index: 999; /* Di bawah sidebar, di atas konten */
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-fast);
    pointer-events: none; /* Klik tembus saat hidden */
}
/* Saat sidebar di hover, overlay muncul */
.sidebar:hover ~ #sidebar-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ==========================================================================
   4. MOBILE RESPONSIVENESS
   ========================================================================== */
@media (max-width: 768px) {
    body {
        padding-left: 0; /* Hapus padding sidebar di mobile */
        padding-bottom: 70px; /* Ruang untuk bottom nav jika mau pakai style bottom nav, tapi kita pakai sidebar toggle */
    }
    
    .main-content {
        padding: 1rem;
    }

    /* Sidebar di Mobile: Hidden by default (Offcanvas style) */
    .sidebar {
        width: var(--sidebar-width-expanded); /* Selalu lebar penuh saat muncul */
        transform: translateX(-100%); /* Sembunyi ke kiri */
        transition: transform var(--transition-smooth);
    }
    .sidebar.show {
        transform: translateX(0); /* Muncul */
    }
    
    /* Selalu tampilkan teks di mobile saat sidebar muncul */
    .sidebar-logo-text, .nav-text, .user-info {
        opacity: 1 !important;
        transform: none !important;
    }
    
    /* Tombol Toggle Mobile (Hamburger) */
    .mobile-nav-toggle {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px; height: 50px;
        background: var(--primary);
        color: white;
        border-radius: 50%;
        display: flex; justify-content: center; align-items: center;
        box-shadow: var(--shadow-lg);
        z-index: 1001; /* Di atas sidebar */
        border: none;
        font-size: 1.2rem;
    }

    /* Overlay Mobile Logic */
    .sidebar.show ~ #sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* ==========================================================================
   5. DARK MODE TOGGLE BUTTON
   ========================================================================== */
.theme-toggle-btn {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 48px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    margin-top: auto; /* Push to bottom of nav list if flex */
}
.theme-toggle-btn:hover {
    background-color: var(--bg-body);
    color: var(--warning); /* Kuning matahari */
}
[data-theme="dark"] .theme-toggle-btn:hover {
    color: var(--text-main); /* Putih bulan */
}
/* ==========================================================================
   6. CARDS & CONTAINERS (Modern Dashboard Style)
   ========================================================================== */
.card-modern {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    overflow: visible; /* <--- UBAH JADI VISIBLE */
    height: 100%; 
    display: flex;
    flex-direction: column;
}

/* Efek Hover pada Card Statistik (agar terasa interaktif) */
.card-modern:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.card-header-modern {
    padding: 1.25rem 1.5rem;
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-body-modern {
    padding: 1.5rem;
    flex: 1; /* Isi ruang kosong */
}

/* Dark Mode Override */
[data-theme="dark"] .card-modern {
    background: var(--bg-card); /* Warna slate gelap */
    border-color: var(--border-color);
}

/* ==========================================================================
   7. TABLES (Sticky Header & Responsive)
   ========================================================================== */
.table-responsive-custom {
    border-radius: var(--radius-lg);
    overflow-x: auto; /* Scroll horizontal di HP */
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    color: var(--text-main);
}

/* Table Header */
.table-modern thead th {
    background-color: #f9fafb; /* Abu sangat muda */
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 1.5rem;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap; /* Mencegah header turun baris */
}

/* Sticky Header Logic */
.table-modern thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Table Body */
.table-modern tbody td {
    padding: 1rem 1.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    transition: background-color var(--transition-fast);
}

.table-modern tbody tr:hover td {
    background-color: rgba(0, 0, 0, 0.02); /* Highlight baris saat kursor lewat */
}

/* Table Dark Mode */
[data-theme="dark"] .table-modern thead th {
    background-color: #1f293b;
    color: var(--text-muted);
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] .table-modern tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   8. FORMS & INPUTS
   ========================================================================== */
.form-control, .form-select {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    transition: all var(--transition-fast);
}

/* Focus State (Emerald Glow) */
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
    background-color: var(--bg-card);
    color: var(--text-main);
}

/* Input Group Text (Icon di sebelah input) */
.input-group-text {
    background-color: #f3f4f6;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

[data-theme="dark"] .input-group-text {
    background-color: #374151;
    color: var(--text-muted);
    border-color: var(--border-color);
}

/* ==========================================================================
   9. BUTTONS & ACTIONS
   ========================================================================== */
/* Override Bootstrap Btn */
.btn {
    font-weight: 500;
    border-radius: 50rem; /* Pill shape standard */
    padding: 0.5rem 1.25rem;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Jarak icon dan teks */
}

/* Primary Action Button */
.btn-primary, .btn-success {
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}
.btn-primary:hover, .btn-success:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
}

/* Secondary / Outline Button */
.btn-outline-secondary {
    border-color: var(--border-color);
    color: var(--text-muted);
}
.btn-outline-secondary:hover {
    background-color: #f3f4f6;
    color: var(--text-main);
}

/* Circle Action Buttons (Edit/Delete di tabel) */
.btn-circle {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Toggle Capsule (Pilihan Grafik/Tabel) */
.toggle-capsule {
    background-color: #e5e7eb;
    padding: 4px;
    border-radius: 50rem;
    display: inline-flex;
}
.toggle-capsule .btn {
    border-radius: 50rem;
    padding: 4px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
}
.toggle-capsule .btn.active {
    background-color: var(--bg-card);
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
[data-theme="dark"] .toggle-capsule { background-color: #374151; }
[data-theme="dark"] .toggle-capsule .btn.active { background-color: #1f293b; color: var(--primary); }

/* ==========================================================================
   10. MODALS & ALERTS (Glassmorphism)
   ========================================================================== */
.modal-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(0,0,0,0.02);
}
.modal-footer {
    border-top: 1px solid var(--border-color);
}
.btn-close {
    filter: grayscale(1); /* Agar netral */
}

/* Backdrop Blur (Efek kaca buram di belakang modal) */
.modal-backdrop.show {
    opacity: 0.5;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* SweetAlert / Notification Popup Style */
.swal2-popup {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-lg) !important;
}

/* ==========================================================================
   11. UTILITIES & BADGES
   ========================================================================== */
/* Badges (Status Pills) */
.badge {
    padding: 0.5em 0.8em;
    font-weight: 600;
    border-radius: 50rem;
    letter-spacing: 0.03em;
}
/* Soft Badge Colors (Background transparan) */
.bg-success-soft { background-color: rgba(16, 185, 129, 0.1); color: var(--success); }
.bg-danger-soft { background-color: rgba(239, 68, 68, 0.1); color: var(--danger); }
.bg-warning-soft { background-color: rgba(245, 158, 11, 0.1); color: var(--warning); }
.bg-info-soft { background-color: rgba(59, 130, 246, 0.1); color: var(--accent); }

/* Chart Wrapper (Menjaga rasio grafik) */
.chart-wrapper {
    position: relative;
    height: 350px; /* Tinggi default grafik */
    width: 100%;
}

/* Dropdown Menu Custom */
.dropdown-menu {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
}
.dropdown-item {
    color: var(--text-main);
    padding: 8px 16px;
}
.dropdown-item:hover {
    background-color: var(--primary-light);
    color: var(--primary);
}

/* Loading Spinner Color */
.spinner-border {
    border-color: var(--primary);
    border-right-color: transparent;
}

/* ==========================================================================
   FIX & PATCHES (Update Terbaru)
   ========================================================================== */

/* 1. FIX DROPDOWN TERPOTONG & BERKEDIP
   Masalah: Overflow hidden memotong menu, dan animasi hover membuat posisi tombol lari.
   Solusi: Matikan animasi gerak pada kartu yang memiliki dropdown filter.
*/
.card-modern {
    overflow: visible !important; /* Paksa agar dropdown bisa keluar batas kartu */
}

/* Opsional: Matikan efek kartu naik khusus untuk kartu filter agar tidak glitch saat klik menu */
.card-modern:has(.dropdown-menu.show) {
    transform: none !important;
}

/* Pastikan Dropdown selalu di atas (Z-Index Tinggi) */
.dropdown-menu {
    z-index: 1055 !important; 
    margin-top: 5px !important; /* Beri jarak sedikit agar tidak nempel tombol */
}

/* 2. FIX SELECT PANAH NABRAK TEKS
   Masalah: Teks "Semua Node" terlalu panjang, padding kanan kurang.
   Solusi: Tambah padding kanan agar teks tidak menabrak panah.
*/
.form-select {
    padding-right: 2.5rem !important; /* Perlebar area aman di kanan */
    text-overflow: ellipsis; /* Jika masih kepanjangan, potong jadi ... */
}

/* 3. FIX TABEL DARK MODE (PUTIH SILAU)
   Masalah: Bootstrap punya variabel --bs-table-bg yang defaultnya putih.
   Solusi: Reset variabel tersebut saat mode gelap.
*/
[data-theme="dark"] .table-modern {
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
    color: var(--text-muted);
}

[data-theme="dark"] .table-modern th,
[data-theme="dark"] .table-modern td {
    background-color: var(--bg-card) !important; /* Pakai warna kartu gelap */
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* Fix khusus untuk baris ganjil/genap (Striped) di Dark Mode */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--text-main);
}

/* ==========================================================================
   12. PAGE SPECIFIC STYLES (Dipindahkan dari file PHP)
   ========================================================================== */

/* --- AUTH PAGES (Login & Register) --- */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 0;
    background: linear-gradient(135deg, #e0f7fa 0%, #e8f5e9 100%); /* Opsional: Warna background khusus login */
}
.auth-container {
    width: 100%;
    max-width: 450px;
    padding: 1rem;
}
.auth-logo {
    width: 70px;
    height: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* --- PANEL OWNER (Avatar & Approval) --- */
.avatar-circle { 
    width: 40px; 
    height: 40px; 
    background: #e9ecef; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    color: #555; 
    text-transform: uppercase; 
    overflow: hidden; 
    flex-shrink: 0;
}
.avatar-circle img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}
.card-approval { 
    border-left: 4px solid #ffc107 !important; 
}

/* --- PUSAT INFORMASI (Thumbnail & FAB) --- */
.info-thumb { 
    height: 180px; 
    width: 100%; 
    object-fit: cover; 
    background-color: #f8f9fa; 
    border-bottom: 1px solid var(--border-color); 
}
.info-thumb-placeholder { 
    height: 180px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background-color: #e9ecef; 
    color: #adb5bd; 
    border-bottom: 1px solid var(--border-color); 
}
/* Tombol Tambah Melayang (Floating Action Button) */
.btn-fab {
    position: fixed; 
    bottom: 30px; 
    right: 30px;
    width: 60px; 
    height: 60px; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 24px; 
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    z-index: 1050; 
    transition: transform 0.2s; 
    background-color: var(--primary); 
    color: white; 
    border: none;
}
.btn-fab:hover { 
    transform: scale(1.1); 
    background-color: var(--primary-hover); 
    color: white;
}
.modal-hero-img { 
    width: 100%; 
    max-height: 300px; 
    object-fit: cover; 
    border-radius: var(--radius-md); 
}

/* --- LOG PERINGATAN (Row Colors) --- */
.row-alert-active { 
    background-color: rgba(239, 68, 68, 0.08) !important; /* Merah tipis */
}
.row-alert-resolved { 
    background-color: transparent !important; 
}
.badge-status { 
    font-size: 0.7rem; 
    letter-spacing: 0.5px; 
    padding: 5px 10px; 
}

/* --- DETAIL AREA & DATA (Filters) --- */
.filter-container { 
    background: var(--bg-card); 
    padding: 15px 20px; 
    border-radius: var(--radius-md); 
    box-shadow: var(--shadow-sm); 
    margin-bottom: 25px; 
    border: 1px solid var(--border-color);
}
.btn-custom-filter { 
    background: var(--bg-card); 
    border: 1px solid var(--border-color); 
    color: var(--text-muted); 
    border-radius: 50rem; 
    padding: 6px 20px; 
    font-weight: 600; 
    transition: all 0.2s; 
}
.btn-custom-filter:hover { 
    background-color: var(--primary); 
    color: white; 
    border-color: var(--primary); 
}

/* --- ANIMASI TAMBAHAN --- */
@keyframes flash-warning { 
    0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } 
}
.icon-blink { 
    animation: flash-warning 1s infinite; 
}

/* ==========================================================================
   13. FINAL POLISHING (Dark Mode Fix & Glassmorphism)
   ========================================================================== */

/* --- A. FIX TEKS GELAP DI DARK MODE --- */
/* Memaksa elemen yang punya class 'text-dark' berubah jadi putih saat dark mode */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body, 
[data-theme="dark"] .text-black {
    color: var(--text-main) !important;
}

/* Memperjelas teks muted (abu-abu) agar terbaca di background gelap */
[data-theme="dark"] .text-muted {
    color: #cbd5e1 !important; /* Abu-abu terang (Slate-300) */
}

/* Memastikan semua Heading (H1-H6) mengikuti warna tema */
[data-theme="dark"] h1, [data-theme="dark"] h2, 
[data-theme="dark"] h3, [data-theme="dark"] h4, 
[data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--text-main);
}

/* Fix khusus untuk input form di Dark Mode agar teks ketikan terlihat */
[data-theme="dark"] .form-control, 
[data-theme="dark"] .form-select {
    color: var(--text-main);
    background-color: var(--bg-card);
    border-color: var(--border-color);
}
[data-theme="dark"] .form-control::placeholder {
    color: #64748b; /* Placeholder abu-abu */
}

/* --- B. MODAL BACKDROP BLUR (Efek Kaca Buram) --- */
.modal-backdrop {
    /* Efek Blur */
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); /* Support Safari */
    
    /* Warna latar transparan hitam */
    background-color: rgba(0, 0, 0, 0.4); 
    
    /* Animasi halus saat muncul */
    transition: all 0.3s ease-in-out;
}

/* Khusus Dark Mode: Backdrop lebih gelap agar nyaman di mata */
[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   14. FIX FINAL (Patch Isu Kontras Dark Mode)
   ========================================================================== */

/* 1. FIX KARTU DETAIL AREA (Angka Hitam) 
   Masalah: Class 'text-dark' di elemen h3 menolak berubah warna.
   Solusi: Paksa elemen spesifik di dalam card-modern agar mengikuti warna teks utama.
*/
[data-theme="dark"] .card-modern .text-dark,
[data-theme="dark"] .card-modern h3.text-dark,
[data-theme="dark"] .card-modern .h3.text-dark {
    color: var(--text-main) !important;
}

/* 2. FIX TABEL STRIPED (Baris Terlalu Terang)
   Masalah: Tabel zebra (selang-seling) bawaan Bootstrap warnanya abu-abu terang.
   Solusi: Ubah warna baris ganjil menjadi transparan sangat tipis (5%).
*/
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-main) !important;
    box-shadow: none !important; /* Hilangkan shadow bawaan jika ada */
}

/* 3. FIX KOTAK SATUAN (mS, °C) di Konfigurasi
   Masalah: Class 'bg-white' membuat kotak menjadi putih silau.
   Solusi: Timpa 'bg-white' khusus di dalam input-group saat dark mode.
*/
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .input-group-text.bg-white {
    background-color: #2d3748 !important; /* Warna sedikit lebih terang dari background kartu */
    color: #e2e8f0 !important; /* Warna teks terang */
    border-color: var(--border-color) !important;
}

/* Opsional: Memastikan input form pasangannya juga menyatu */
[data-theme="dark"] .input-group .form-control {
    border-color: var(--border-color) !important;
}

/* ==========================================================================
   15. FIX FINAL TABEL (Soft Striped & Header Fix) - REVISI TOTAL
   ========================================================================== */

/* 1. Header Tabel (thead) - Ubah jadi Gelap */
[data-theme="dark"] .table-modern thead th,
[data-theme="dark"] .sticky-top.bg-light,
[data-theme="dark"] .modal-content .bg-light { 
    background-color: #1e293b !important; /* Slate Dark (Senada dengan kartu) */
    color: #cbd5e1 !important; /* Teks Abu Terang */
    border-bottom: 1px solid var(--border-color) !important;
}

/* 2. Baris Genap (Even) - Transparan/Gelap */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: var(--bg-card) !important; /* Ikut warna kartu */
    color: var(--text-main) !important;
    box-shadow: none !important;
}

/* 3. Baris Ganjil (Odd) - Transparan Sangat Tipis */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.03) !important; /* 3% Putih (Sangat halus) */
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
}

/* 4. Fix Borders di Dark Mode */
[data-theme="dark"] .table-bordered, 
[data-theme="dark"] .table-bordered td, 
[data-theme="dark"] .table-bordered th {
    border-color: var(--border-color) !important;
}