/* =========================================
   GLOBAL CSS - NERSTIZEN WEBINAR
   ========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* --- SCROLLBAR CANTIK GLOBAL --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* =========================================
   UI SEGMENTED CONTROL (TEMA / DARK MODE)
   ========================================= */
.theme-toggle-wrapper {
    padding: 5px 10px 15px 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #e2e8f0;
}
.theme-label {
    font-size: 10px; font-weight: 800; color: #64748b; margin-bottom: 8px;
    display: block; text-transform: uppercase; letter-spacing: 0.5px;
}
.theme-segmented-control {
    display: flex; position: relative; background: #f1f5f9;
    border-radius: 10px; padding: 4px; gap: 2px; z-index: 1;
}
.theme-segmented-control input[type="radio"] { display: none; }
.theme-btn {
    flex: 1; text-align: center; padding: 6px 0; font-size: 13px; color: #94a3b8;
    cursor: pointer; border-radius: 8px; position: relative; z-index: 2; transition: color 0.3s;
}
.theme-segmented-control input[type="radio"]:checked + .theme-btn { color: #4361ee; }
.theme-slider {
    position: absolute; top: 4px; bottom: 4px; width: calc(33.333% - 4px);
    background: white; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    z-index: 1; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#theme-light:checked ~ .theme-slider { transform: translateX(0); }
#theme-auto:checked ~ .theme-slider { transform: translateX(calc(100% + 3px)); }
#theme-dark:checked ~ .theme-slider { transform: translateX(calc(200% + 6px)); }

/* =========================================
   DARK MODE FIX: HEADER, PROFILE & KONTROL PENDAFTARAN
   ========================================= */

/* 1. Judul Header Utama */
[data-theme="dark"] #headerTitle {
    color: white !important;
}

/* 2. Tombol Hamburger (Garis Tiga) Kiri Atas */
[data-theme="dark"] .toggle-btn {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .toggle-btn:hover {
    background: var(--primary) !important;
    color: white !important;
}

/* 3. Kapsul (Pill) "Ditutup Dalam" / Status Pendaftaran */
[data-theme="dark"] .btn-global-reg {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] .btn-global-reg:hover {
    background: var(--card-bg) !important;
}
[data-theme="dark"] .reg-text-main {
    color: white !important;
}
[data-theme="dark"] .btn-global-reg i.fa-chevron-down {
    color: #94a3b8 !important;
}

/* 4. Profil Admin (Nama, Hover & Avatar) */
[data-theme="dark"] .profile-name {
    color: white !important;
}
[data-theme="dark"] .profile-trigger:hover {
    background: rgba(255, 255, 255, 0.05) !important; 
}
[data-theme="dark"] .profile-avatar {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: #60a5fa !important; 
}

/* 5. Dropdown Modal "Kontrol Pendaftaran" (Sesuai Gambar Terbaru) */
[data-theme="dark"] .global-reg-dropdown {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8) !important;
}
[data-theme="dark"] .global-reg-dropdown h4 {
    color: white !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .global-reg-dropdown div[style*="background: #f8fafc"] {
    background: var(--input-bg) !important;
}
[data-theme="dark"] .global-reg-dropdown span[style*="color: #475569"] {
    color: #cbd5e1 !important;
}

/* =========================================
   MASTER DARK MODE OVERRIDES (GLOBAL)
   ========================================= */
[data-theme="dark"] {
    --bg-body: #0f172a;
    --text-dark: #f8fafc;
    --text-grey: #94a3b8;
    --border-color: #334155;
    --card-bg: #1e293b;
    --input-bg: #0f172a;
}

[data-theme="dark"] body {
    background-color: var(--bg-body) !important;
    color: var(--text-dark) !important;
}

/* --- OVERRIDE KOMPONEN DASAR --- */
[data-theme="dark"] .top-bar,
[data-theme="dark"] .elegant-card,
[data-theme="dark"] .stat-card-mini,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .chart-box,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .maintenance-card,
[data-theme="dark"] .profile-dropdown,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .auth-box {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-dark) !important;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .custom-input-modal,
[data-theme="dark"] .est-form-input,
[data-theme="dark"] .bank-form-control,
[data-theme="dark"] .data-edit {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: white !important;
}

/* 12. Efek Fokus/Hover Input yang Elegan (Anti Garis Ganda) */
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .custom-input-modal:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] input[type="date"]:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
    outline: none !important; /* Kunci menghilangkan garis putih bawaan browser */
}

[data-theme="dark"] .theme-toggle-wrapper { border-color: var(--border-color); }
[data-theme="dark"] .theme-segmented-control { background: var(--input-bg); }
[data-theme="dark"] .theme-slider { background: var(--border-color); box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
[data-theme="dark"] .dropdown-user-info { border-color: var(--border-color); }
[data-theme="dark"] .dropdown-user-info span { color: white; }
[data-theme="dark"] .btn-change-pass, [data-theme="dark"] .btn-logout { background: transparent; color: #cbd5e1; }
[data-theme="dark"] .btn-change-pass:hover { background: var(--border-color); color: white; }
[data-theme="dark"] .btn-logout:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
[data-theme="dark"] .stat-mini-body h3, [data-theme="dark"] .m-info h3 { color: white !important; }


/* =========================================
   DARK MODE KHUSUS: HALAMAN VERIFIKASI DATA
   ========================================= */

/* 1. Area Filter & Search */
[data-theme="dark"] .input-group label { color: #cbd5e1; }
[data-theme="dark"] .btn-icon-only,
[data-theme="dark"] .btn-search-inline {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .btn-icon-only:hover,
[data-theme="dark"] .btn-search-inline:hover {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}
[data-theme="dark"] .pagination-group {
    background: var(--card-bg);
    border-color: var(--border-color);
}
[data-theme="dark"] .page-select { color: white; }
[data-theme="dark"] .page-select option { background: var(--card-bg); color: white; }
[data-theme="dark"] .btn-page { background: var(--input-bg); color: #cbd5e1; }
[data-theme="dark"] .btn-page:hover { background: #3b82f6; color: white; }

/* 2. Container Tabel Utama */
[data-theme="dark"] #tabel-container {
    background: var(--card-bg);
    border-color: var(--border-color);
}
[data-theme="dark"] .empty-state h3 { color: white; }

/* 3. Header Tabel (TH) & Cell Tabel (TD) */
[data-theme="dark"] th {
    background: var(--input-bg) !important;
    border-bottom: 2px solid var(--border-color) !important;
    color: #94a3b8 !important;
}
[data-theme="dark"] td {
    background: var(--card-bg) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    color: #e2e8f0 !important;
}

/* 4. Kolom Sticky (Kiri & Kanan) */
[data-theme="dark"] th.col-fix, 
[data-theme="dark"] th.col-action-fix {
    background: var(--input-bg) !important;
}
[data-theme="dark"] th.col-fix {
    border-right: 1px solid var(--border-color) !important;
}
[data-theme="dark"] th.col-action-fix {
    border-left: 1px solid var(--border-color) !important;
}

/* 5. Baris Terverifikasi (Hijau Glowing) */
[data-theme="dark"] tr.verified-row td {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #34d399 !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.15) !important;
}
[data-theme="dark"] tr.verified-row td.col-fix,
[data-theme="dark"] tr.verified-row td.col-action-fix {
    background-color: rgba(16, 185, 129, 0.1) !important;
}
[data-theme="dark"] tr.verified-row td.col-fix { border-right-color: rgba(16, 185, 129, 0.2) !important; }
[data-theme="dark"] tr.verified-row td.col-action-fix { border-left-color: rgba(16, 185, 129, 0.2) !important; }

/* 6. Baris Duplikat (Oranye Peringatan) */
[data-theme="dark"] tr.duplicate-row td {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #fbbf24 !important;
    border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
}
[data-theme="dark"] tr.duplicate-row td.col-fix,
[data-theme="dark"] tr.duplicate-row td.col-action-fix {
    background-color: rgba(245, 158, 11, 0.1) !important;
}

/* 7. Efek Hover Baris Biasa */
[data-theme="dark"] tr:not(.verified-row):not(.duplicate-row):hover td {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 8. Tombol Aksi di dalam Tabel (Edit, Hapus, Lihat) */
[data-theme="dark"] .btn-icon {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: #94a3b8;
}
[data-theme="dark"] .btn-icon.btn-edit:hover { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border-color: rgba(245, 158, 11, 0.4); }
[data-theme="dark"] .btn-icon.btn-delete:hover { background: rgba(239, 68, 68, 0.2); color: #f87171; border-color: rgba(239, 68, 68, 0.4); }

[data-theme="dark"] .btn-link {
    background: var(--input-bg);
    border-color: var(--border-color) !important;
    color: #60a5fa;
}
[data-theme="dark"] .btn-link:hover { background: #3b82f6; color: white; border-color: #3b82f6 !important; }

/* 9. Checkbox Custom di Dark Mode */
[data-theme="dark"] .custom-checkbox {
    background: var(--input-bg);
    border-color: #475569;
}
[data-theme="dark"] .custom-checkbox:checked {
    background: #10b981; border-color: #10b981;
}
[data-theme="dark"] tr.verified-row .custom-checkbox {
    background: #059669; border-color: #059669;
}

/* 10. Perbaikan Dropdown Atur Kolom di Dark Mode */
[data-theme="dark"] .col-dropdown {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] .col-dropdown div:first-child {
    border-bottom-color: var(--border-color) !important;
    color: #94a3b8 !important; /* Warna teks "Tampilkan Kolom:" */
}
[data-theme="dark"] .col-option {
    color: var(--text-dark) !important;
}
[data-theme="dark"] .col-option:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* 11. Perbaikan Ikon Kalender Bawaan Browser agar Putih */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.8); /* Membalik warna hitam menjadi putih/abu terang */
    cursor: pointer;
}


/* 12. Percantik Badge Status (Pribadi, Ketua, Anggota) di Dark Mode */
/* Badge Pribadi (Warna Biru Neon) */
[data-theme="dark"] td span[style*="#eff6ff"] {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

/* Badge Ketua (Warna Emas/Oranye Neon) */
[data-theme="dark"] td span[style*="#f59e0b"] {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

/* Badge Anggota (Warna Abu-abu Elegan) */
[data-theme="dark"] td span[style*="#e2e8f0"] {
    background: rgba(148, 163, 184, 0.15) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
}

/* --- DARK MODE UNTUK NOTE --- */
[data-theme="dark"] .btn-admin-note { background: var(--input-bg); border-color: var(--border-color); color: #64748b; }
[data-theme="dark"] .btn-admin-note:hover { background: var(--border-color); color: white; }
[data-theme="dark"] .btn-admin-note.has-note { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.4); color: #fbbf24; box-shadow: 0 2px 10px rgba(245, 158, 11, 0.1); }
[data-theme="dark"] .btn-admin-note.has-note:hover { background: #fbbf24; color: white; }
[data-theme="dark"] .btn-admin-note::after { background: #0f172a; border: 1px solid var(--border-color); }

[data-theme="dark"] .note-popover-box { background: var(--card-bg); border-color: var(--border-color); box-shadow: 0 15px 35px rgba(0,0,0,0.5); }
[data-theme="dark"] .note-pop-header { background: var(--input-bg); border-color: var(--border-color); color: white; }
[data-theme="dark"] .note-pop-body textarea { background: var(--input-bg); border-color: var(--border-color); color: white; }
[data-theme="dark"] .note-pop-footer { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .btn-note-cancel { background: var(--input-bg); border-color: var(--border-color); color: #cbd5e1; }
[data-theme="dark"] .btn-note-cancel:hover { background: var(--border-color); color: white; }

/* --- KOTAK POP-UP / MODAL GLOBAL --- */
.modal-overlay { 
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(15, 23, 42, 0.7); 
    backdrop-filter: blur(5px); 
    z-index: 9999; 
    display: none; 
    align-items: center; justify-content: center; 
    opacity: 0; transition: opacity 0.3s ease; 
}
.modal-overlay.show, .modal-overlay.active { opacity: 1; display: flex; }

.auth-box, .modal-box { 
    background: #ffffff; 
    width: 90%; /* KUNCI PROPORSI */
    max-width: 420px; /* KUNCI PROPORSI */
    padding: 40px; /* KUNCI RUANG LEGA */
    border-radius: 24px; 
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); 
    position: relative; 
    transform: scale(0.95) translateY(10px); 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}
.modal-overlay.show .auth-box, .modal-overlay.active .modal-box { transform: scale(1); }

/* Tombol Silang Global */
.close-modal, .btn-close-modal, .close-btn { 
    position: absolute; top: 20px; right: 20px; 
    background: #f1f5f9; border: none; width: 35px; height: 35px; 
    border-radius: 50%; cursor: pointer; color: #64748b; 
    transition: 0.2s; display: flex; align-items: center; justify-content: center;
}
.close-modal:hover, .btn-close-modal:hover, .close-btn:hover { background: #fee2e2; color: #ef4444; }

/* --- ANIMASI LOADING GLOBAL --- */
.loader-overlay { 
    position: fixed; inset: 0; background: rgba(255,255,255,0.8); 
    z-index: 99999; display: none; align-items: center; justify-content: center; flex-direction: column; 
}
.spinner, .loader-spinner { 
    width: 50px; height: 50px; border: 4px solid #f1f5f9; border-top-color: #4361ee; 
    border-radius: 50%; animation: spin 1s linear infinite; 
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- UTILITAS GLOBAL --- */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px; text-align: center; color: #94a3b8;
}

/* =========================================
   BRANDING HEADER MODAL (NAVY #020832) - REVISI 2
   ========================================= */
.modal-brand-header {
    background-color: #020832; 
    
    /* Margin bawah dinaikkan sedikit agar tidak terlalu jauh dari judul */
    margin: -40px -40px 20px -40px; 
    
    /* 👇 KUNCI GEPENG: Padding atas-bawah dikurangi drastis 👇 */
    padding: -20px -40px; 
    
    border-radius: 24px 24px 0 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-bottom: 2px solid #10b981; 
    box-shadow: 0 10px 20px rgba(2, 8, 50, 0.15);
}

.modal-brand-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Sedikit margin agar logo aman dari tombol silang */
    padding: 5px 0; 
}

/* 👇 KUNCI LOGO BESAR 👇 */
.modal-brand-logo img {
    display: block;
    width: 100%; /* Penuhi hampir seluruh lebar yang tersedia */
    max-width: 320px; /* Diperbesar drastis (sebelumnya 250px) */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); 
}

.modal-brand-header .close-btn-absolute {
    position: absolute;
    /* Posisinya ditarik ke atas sedikit karena headernya sekarang gepeng */
    top: 12px; 
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: none;
    width: 30px; /* Dikecilkan sedikit agar proporsional dengan header gepeng */
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}

.modal-brand-header .close-btn-absolute:hover {
    background: #ef4444;
    transform: rotate(90deg); 
}

/* Penyesuaian super gepeng untuk HP */
@media screen and (max-width: 768px) {
    .auth-box .modal-brand-header,
    .modal-box .modal-brand-header {
        margin: -25px -15px 15px -15px; 
        border-radius: 20px 20px 0 0;
        /* 👇 Sangat gepeng di HP 👇 */
        padding: 12px 15px; 
    }
    
    .modal-brand-logo img { 
        width: 95%;
        max-width: 250px; /* Lebih besar dari sebelumnya untuk ukuran layar HP */
    }
}

/* =========================================
   GLOBAL CUSTOM SUCCESS MODAL
   ========================================= */
.global-success-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px); /* Efek blur ala iOS/Mac */
    z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: all 0.3s ease;
}
.global-success-overlay.show {
    opacity: 1; visibility: visible;
}
.global-success-box {
    background: white;
    border-radius: 24px;
    padding: 40px 30px;
    width: 90%; max-width: 400px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efek membal (bouncy) */
}
.global-success-overlay.show .global-success-box {
    transform: translateY(0) scale(1);
}
.global-success-icon {
    width: 80px; height: 80px;
    background: #dcfce7;
    color: #10b981;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; margin: 0 auto 20px auto;
    box-shadow: 0 0 0 10px rgba(220, 252, 231, 0.5); /* Cincin hijau tipis */
}
.global-success-title {
    color: #1e293b; font-size: 24px; font-weight: 800; margin: 0 0 12px 0;
}
.global-success-desc {
    color: #64748b; font-size: 15px; line-height: 1.6; margin: 0 0 30px 0;
    white-space: pre-line; /* Mempertahankan enter/baris baru */
}
.global-success-btn {
    background: #4361ee; color: white;
    border: none; border-radius: 50px;
    padding: 14px 30px; font-size: 15px; font-weight: 700;
    width: 100%; cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 10px 20px -10px rgba(67, 97, 238, 0.5);
}
.global-success-btn:hover {
    background: #3a56d4; transform: translateY(-2px);
    box-shadow: 0 14px 25px -10px rgba(67, 97, 238, 0.6);
}

/* =========================================
   DARK MODE KHUSUS MODAL LINK VENDOR & COPY BUTTON
   ========================================= */
/* Wrapper Input PIN agar tombol copy bisa di dalam */
.pin-vendor-wrapper {
    position: relative;
    width: 100%;
}
/* Penyesuaian Komponen Modal di Dark Mode */
[data-theme="dark"] .modal-vendor-desc {
    color: #94a3b8 !important; /* Teks deskripsi agar tidak gelap */
}
[data-theme="dark"] .pin-vendor-wrapper input {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: white !important;
    letter-spacing: 10px !important;
}
[data-theme="dark"] select#vendorMasaBerlaku {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: white !important;
}
[data-theme="dark"] .btn-vendor-batal {
    background: var(--input-bg) !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .btn-vendor-batal:hover {
    background: #ef4444 !important; /* Merah menyala saat dihover */
    color: white !important;
}

/* =========================================
   DARK MODE KHUSUS: MODAL BUAT LINK VENDOR
   ========================================= */

/* 1. Paksa Background Modal menjadi Gelap */
[data-theme="dark"] #modalBuatLink > div {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color);
}

/* 2. Paksa Warna Teks Judul dan Label menjadi Terang */
[data-theme="dark"] #modalBuatLink h3 { 
    color: white !important; 
}
[data-theme="dark"] #modalBuatLink label { 
    color: #cbd5e1 !important; 
}

/* 3. Paksa Warna Kotak Select Masa Berlaku */
#masaBerlakuLink {
    height: 46px !important; /* Paksa tinggi mutlak agar tidak gepeng */
    padding: 0 15px !important; /* Jarak kiri-kanan yang lega */
    font-size: 14px !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
}

/* Pastikan di Dark Mode tingginya juga tetap dipertahankan */
[data-theme="dark"] #masaBerlakuLink {
    height: 46px !important;
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: white !important;
}

/* 4. Paksa Tombol "Batal" / "Tutup" (yang tadinya abu-abu) */
[data-theme="dark"] #modalBuatLink button[style*="background:#f1f5f9"] {
    background: var(--input-bg) !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] #modalBuatLink button[style*="background:#f1f5f9"]:hover {
    background: #ef4444 !important; /* Merah menyala saat disorot kursor */
    color: white !important;
}

/* 5. Paksa Tampilan Tahap 2 (Hasil Link) */
[data-theme="dark"] #step2Hasil p { 
    color: #94a3b8 !important; 
}
[data-theme="dark"] #hasilLinkUrl {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: #60a5fa !important; /* Warna link biru terang */
}

/* =========================================
   FLOATING MENU & MANAJER LINK VENDOR
   ========================================= */
.btn-link-wrapper {
    position: relative;
    display: inline-block;
}

/* Menu Mengambang (Floating Dropdown) */
.floating-link-menu {
    position: absolute; top: 120%; left: 0; background: white; border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15); width: 200px; padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1000;
    border: 1px solid #e2e8f0;
}
.floating-link-menu.show {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.flm-item {
    padding: 12px 15px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; color: #475569; transition: 0.2s;
}
.flm-item:hover { background: #f8fafc; color: #1e293b; transform: translateX(5px); }

/* Kartu Daftar Link Aktif */
.link-aktif-card {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 15px;
    display: flex; flex-direction: column; gap: 10px; transition: 0.2s;
}
.link-aktif-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.link-aktif-header { display: flex; justify-content: space-between; align-items: center; }
.link-aktif-token { 
    font-family: monospace; font-size: 13px; font-weight: 800; color: #4361ee; 
    background: #eff6ff; padding: 6px 10px; border-radius: 6px; letter-spacing: 2px;
}
.link-aktif-timer { font-size: 12px; font-weight: 700; color: #f59e0b; display: flex; align-items: center; gap: 5px; }
.link-aktif-timer.expired { color: #ef4444; }

/* Tombol Aksi Mini */
.btn-mini-action {
    background: transparent; border: none; width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; font-size: 14px;
}
.btn-mini-action.copy { color: #3b82f6; }
.btn-mini-action.copy:hover { background: #eff6ff; }
.btn-mini-action.delete { color: #ef4444; }
.btn-mini-action.delete:hover { background: #fef2f2; }

/* 🌙 DARK MODE SUPPORT 🌙 */
[data-theme="dark"] .floating-link-menu { background: var(--card-bg); border-color: var(--border-color); box-shadow: 0 15px 35px rgba(0,0,0,0.8); }
[data-theme="dark"] .flm-item { color: #cbd5e1; }
[data-theme="dark"] .flm-item:hover { background: var(--input-bg); color: white; }
[data-theme="dark"] #modalDaftarLink h3 { color: white !important; }
[data-theme="dark"] .link-aktif-card { background: var(--input-bg); border-color: var(--border-color); }
[data-theme="dark"] .link-aktif-token { background: rgba(59,130,246,0.15); color: #60a5fa; }
[data-theme="dark"] .btn-mini-action.copy:hover { background: rgba(59, 130, 246, 0.2); }
[data-theme="dark"] .btn-mini-action.delete:hover { background: rgba(239, 68, 68, 0.2); }

/* =========================================
   GLOBAL CONFIRM & INPUT MODAL
   ========================================= */
.global-confirm-box {
    background: white; border-radius: 20px; padding: 30px; width: 90%; max-width: 400px;
    text-align: center; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(20px) scale(0.95); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.global-success-overlay.show .global-confirm-box { transform: translateY(0) scale(1); }

.g-modal-icon {
    width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 30px; margin: 0 auto 15px auto;
}
.g-modal-icon.warning { background: #fef2f2; color: #ef4444; }
.g-modal-icon.info { background: #eff6ff; color: #3b82f6; }

.g-modal-title { color: #1e293b; font-size: 20px; font-weight: 800; margin: 0 0 10px 0; }
.g-modal-desc { color: #64748b; font-size: 14px; line-height: 1.5; margin: 0 0 25px 0; }
.g-modal-input {
    width: 100%; text-align: center; font-size: 24px; letter-spacing: 15px; padding: 15px;
    border-radius: 10px; border: 2px solid #cbd5e1; outline: none; margin-bottom: 25px;
    font-weight: bold; font-family: monospace; box-sizing: border-box;
}
.g-modal-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }

.g-btn-group { display: flex; gap: 10px; }
.g-btn { flex: 1; padding: 12px; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; transition: 0.2s; }
.g-btn.cancel { background: #f1f5f9; color: #475569; }
.g-btn.cancel:hover { background: #e2e8f0; }
.g-btn.danger { background: #ef4444; color: white; box-shadow: 0 4px 10px rgba(239,68,68,0.3); }
.g-btn.danger:hover { background: #dc2626; transform: translateY(-2px); }
.g-btn.primary { background: #3b82f6; color: white; box-shadow: 0 4px 10px rgba(59,130,246,0.3); }
.g-btn.primary:hover { background: #2563eb; transform: translateY(-2px); }

/* Link Manager Checkbox & Toolbar */
.link-toolbar { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; padding: 10px 15px; border-radius: 10px; margin-bottom: 15px; border: 1px solid #e2e8f0; }
.link-checkbox { width: 18px; height: 18px; accent-color: #ef4444; cursor: pointer; }

/* 🌙 DARK MODE OVERRIDES */
[data-theme="dark"] .global-confirm-box { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .g-modal-title { color: white; }
[data-theme="dark"] .g-modal-desc { color: #94a3b8; }
[data-theme="dark"] .g-modal-input { background: var(--input-bg); border-color: var(--border-color); color: white; }
[data-theme="dark"] .g-btn.cancel { background: var(--input-bg); color: #cbd5e1; }
[data-theme="dark"] .g-btn.cancel:hover { background: var(--border-color); color: white; }
[data-theme="dark"] .link-toolbar { background: var(--input-bg); border-color: var(--border-color); }

/* =========================================
   DARK MODE KHUSUS: HALAMAN KEUANGAN
   ========================================= */

/* 1. Baris "Rasio Keuangan" (Progress Bar Margin Profit) */
[data-theme="dark"] .fin-progress-wrapper {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .fin-label-row {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .fin-progress-bar {
    background: var(--input-bg) !important;
}

/* 2. Kotak Utama Kiri (Catat Pendapatan, Pengeluaran, Alokasi) */
[data-theme="dark"] .fin-box {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .fin-box h4 {
    color: white !important;
    border-bottom-color: var(--border-color) !important;
}

/* 3. Penjinak Warna Hijau Muda (Pada Kotak Pendapatan Lain) */
[data-theme="dark"] .fin-box .expense-tool-box[style*="background: #f0fdf4"] {
    background: rgba(16, 185, 129, 0.05) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}
[data-theme="dark"] .fin-box .expense-tool-box[style*="background: #f0fdf4"] label {
    color: #34d399 !important;
}

/* 4. Kotak Abu-Abu Dashed (Pada Pengeluaran & Alokasi) */
[data-theme="dark"] .expense-tool-box {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .est-input-group label {
    color: #94a3b8 !important;
}

/* 5. Kotak Hijau Preview Total Akhir */
[data-theme="dark"] .calc-preview {
    background: rgba(16, 185, 129, 0.05) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}
[data-theme="dark"] #preview-total {
    color: #10b981 !important;
}

/* 6. Tombol Refresh di Header */
[data-theme="dark"] .btn-refresh-fin {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .btn-refresh-fin:hover {
    background: var(--input-bg) !important;
    color: white !important;
}

/* 7. Penyesuaian Kolom Kanan (Hasil Real & Distribusi Berjenjang) */
[data-theme="dark"] .real-summary-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] .summary-row {
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .summary-final {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* 8. Kotak-Kotak Alokasi Distribusi */
[data-theme="dark"] .alloc-row-modern {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .alloc-row-modern[style*="rgba(245, 158, 11, 0.1)"] {
    background: rgba(245, 158, 11, 0.05) !important; /* Meredupkan warna oranye Kas Panitia */
}
[data-theme="dark"] .alloc-divider {
    background: var(--border-color) !important;
}

/* =========================================
   DARK MODE FIX: INVOICE / FINANCIAL REPORT
   ========================================= */

/* 1. Ubah Latar Utama Invoice menjadi Gelap */
[data-theme="dark"] #invoice-printable-area {
    background: var(--card-bg) !important;
    color: #f8fafc !important;
}

/* 2. Sesuaikan Warna Judul & Teks Penjelasan */
[data-theme="dark"] #invoice-printable-area h1 {
    color: #60a5fa !important; /* Biru terang agar kontras */
}
[data-theme="dark"] #invoice-printable-area p,
[data-theme="dark"] #invoice-printable-area span[style*="color: #64748b"] {
    color: #94a3b8 !important; /* Abu-abu terang */
}

/* 3. Netralkan Tabel agar Tidak Belang (Transparan) */
[data-theme="dark"] #invoice-printable-area td,
[data-theme="dark"] #invoice-printable-area th {
    background: transparent !important;
    color: #f8fafc !important;
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* 4. Sesuaikan Garis Bawah (Border) pada Baris Tabel */
[data-theme="dark"] #invoice-printable-area tr[style*="border-bottom: 1px solid #f1f5f9;"],
[data-theme="dark"] #invoice-printable-area tr[style*="border-bottom: 1px solid #eee;"] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 5. Gelapkan Kotak Summary (Total & Saldo Bersih) */
[data-theme="dark"] #invoice-printable-area div[style*="background:#f8fafc"] {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}

/* 6. Gelapkan Header Tabel Distribusi Hasil */
[data-theme="dark"] #invoice-printable-area thead {
    background: var(--input-bg) !important;
}

/* 7. Sesuaikan Garis Dashed di Kotak Summary */
[data-theme="dark"] #invoice-printable-area div[style*="border-top:2px dashed #cbd5e1"] {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* =========================================
   DARK MODE KHUSUS: ESTIMASI PENDAPATAN
   ========================================= */

/* 1. Latar Belakang Kartu Kiri (Parameter, Pengeluaran, Alokasi) */
[data-theme="dark"] .est-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* 2. Header Kartu & Teks Judul */
[data-theme="dark"] .est-card-header {
    background: transparent !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .est-card-header h4 {
    color: white !important;
}

/* 3. Kotak Form Dalam (Profesi & Tool Box) */
[data-theme="dark"] .est-form-profesi,
[data-theme="dark"] .expense-tool-box {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}

/* 4. Daftar Item Pengeluaran/Alokasi yang Ditambahkan */
[data-theme="dark"] .exp-item {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .exp-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .exp-details h5 {
    color: white !important;
}
[data-theme="dark"] .exp-total {
    color: #34d399 !important; /* Hijau terang agar kontras */
}

/* 5. Teks Label, Unit (%), dan Garis Pemisah (Divider) */
[data-theme="dark"] .est-input-group label,
[data-theme="dark"] .est-input-group .unit {
    color: #94a3b8 !important;
}
[data-theme="dark"] hr[style*="border-top: 1px dashed #e2e8f0"] {
    border-top-color: var(--border-color) !important;
}

/* 6. Subtotal dan Nilai Total Peserta */
[data-theme="dark"] .sub-val {
    color: white !important;
}
[data-theme="dark"] #total-qty-all {
    color: #60a5fa !important; /* Biru terang untuk Total Peserta */
}

/* =========================================
   DARK MODE KHUSUS: MANAJEMEN WEBINAR (MATERI)
   ========================================= */

/* 1. Bar Pencarian (Search Bar) di Atas */
[data-theme="dark"] #glass-search-wrapper {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #searchWebinar {
    color: white !important;
}
[data-theme="dark"] #searchWebinar::placeholder {
    color: #64748b !important;
}

/* 2. Kotak "Views & Downloads" di Kiri Atas Kartu */
[data-theme="dark"] .webinar-card-left > div > div[style*="background: #f8fafc"] {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}

/* 3. Teks Judul Webinar Utama */
[data-theme="dark"] .webinar-card-left h4 {
    color: white !important;
}

/* 4. Label "Daftar Materi & Pembicara" */
[data-theme="dark"] .webinar-card-left div[style*="background: #f8fafc"][style*="z-index: 2"] {
    background: var(--card-bg) !important; /* Menyesuaikan dengan latar belakang kartu utama */
    color: white !important;
}
[data-theme="dark"] .webinar-card-left button[onclick^="toggleMateriClip"] {
    background: var(--input-bg) !important;
    border-color: var(--primary) !important;
}

/* 5. KARTU DAFTAR MATERI (Yang sebelumnya putih terang) */
[data-theme="dark"] .materi-card {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .materi-card > div[style*="background: white"] {
    background: transparent !important; /* Hilangkan putih bawaan JS */
}
[data-theme="dark"] .materi-card div[style*="color: #1e293b"] {
    color: white !important; /* Judul Materi */
}
[data-theme="dark"] .materi-card div[style*="color: #64748b"] {
    color: #94a3b8 !important; /* Nama Pemateri */
}

/* 6. Mode Edit di Dalam Kartu Materi (Saat ikon pensil diklik) */
[data-theme="dark"] div[id^="edit-mode-"] {
    background: var(--card-bg) !important;
    border-top-color: var(--border-color) !important;
}
[data-theme="dark"] div[id^="edit-mode-"] label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] div[id^="edit-mode-"] input[type="text"] {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: white !important;
}

/* Kotak Upload (Ganti Foto, PDF, CV) di Mode Edit */
[data-theme="dark"] div[id^="edit-mode-"] div[style*="background: white"] {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] div[id^="edit-mode-"] div[style*="background: #f0fdf4"] {
    background: rgba(16, 185, 129, 0.05) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}
[data-theme="dark"] div[id^="edit-mode-"] div[style*="background: #fffbeb"] {
    background: rgba(245, 158, 11, 0.05) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

/* 7. MEDIA VIEWER (Panel Sebelah Kanan) */
[data-theme="dark"] .elegant-viewer {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .elegant-viewer > div:first-child {
    background: var(--input-bg) !important; /* Header Viewer */
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .elegant-viewer h4 {
    color: white !important;
}

/* =========================================
   DARK MODE FIX: TOMBOL & LENCANA MANAJEMEN WEBINAR
   ========================================= */

/* 1. Grup Tombol Aksi di Daftar Materi (Lihat, Edit) & Tombol Edit Webinar */
[data-theme="dark"] .materi-card button[style*="background: #e0e7ff"],
[data-theme="dark"] .webinar-card-left button[onclick^="editWebinar"][style*="background: #e0e7ff"] {
    background: rgba(67, 97, 238, 0.15) !important; /* Biru Transparan */
}

[data-theme="dark"] .materi-card button[style*="background: #fff7ed"] {
    background: rgba(249, 115, 22, 0.15) !important; /* Oranye Transparan */
}

/* 2. Tombol Download Materi (Biru Muda) */
[data-theme="dark"] .materi-card a[style*="background: #eff6ff"] {
    background: rgba(59, 130, 246, 0.15) !important; /* Biru Muda Transparan */
}

/* 3. Tombol Hapus (Merah) di Daftar Materi & Webinar */
[data-theme="dark"] .materi-card button[style*="background: #fef2f2"],
[data-theme="dark"] .webinar-card-left button[onclick^="hapusWebinar"][style*="background: #fee2e2"] {
    background: rgba(239, 68, 68, 0.15) !important; /* Merah Transparan */
}

/* 4. Tombol Publish/Sembunyikan (Mata Hijau / Abu-abu) */
[data-theme="dark"] .webinar-card-left button[style*="background: #ecfdf5"] {
    background: rgba(16, 185, 129, 0.15) !important; /* Hijau Transparan */
}
[data-theme="dark"] .webinar-card-left button[style*="background: #e2e8f0"] {
    background: rgba(148, 163, 184, 0.15) !important; /* Abu-abu Transparan */
}

/* 5. Lencana (Pill) "Pelaksanaan" (Waktu & Tanggal) */
[data-theme="dark"] .webinar-card-left div[style*="background: #eff6ff"] {
    background: rgba(67, 97, 238, 0.15) !important;
    border-color: rgba(67, 97, 238, 0.3) !important;
}

/* 6. Kotak Lencana "Views & Downloads" Kiri Atas */
[data-theme="dark"] .webinar-card-left div[style*="background: #f8fafc"] {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}

/* =========================================
   DARK MODE FIX: BADGE PUBLISH & SOSIAL MEDIA
   ========================================= */

/* 1. Lencana (Badge) PUBLISHED / HIDDEN */
[data-theme="dark"] .webinar-card-left span[style*="background: #ecfdf5"] {
    background: rgba(16, 185, 129, 0.15) !important; /* Hijau Transparan */
    border-color: rgba(16, 185, 129, 0.4) !important;
}
[data-theme="dark"] .webinar-card-left span[style*="background: #e2e8f0"] {
    background: rgba(100, 116, 139, 0.15) !important; /* Abu-abu Transparan */
    border-color: rgba(100, 116, 139, 0.4) !important;
    color: #cbd5e1 !important;
}

/* 2. Ikon Sosial Media (WA, Youtube, Zoom, dll) di Bawah Flyer */
[data-theme="dark"] .soc-icon {
    box-shadow: none !important;
    border: 1px solid transparent;
}
/* WhatsApp */
[data-theme="dark"] .soc-icon.wa { background: rgba(16, 185, 129, 0.15) !important; color: #10b981 !important; border-color: rgba(16, 185, 129, 0.3); }
[data-theme="dark"] .soc-icon.wa:hover { background: #10b981 !important; color: white !important; }
/* YouTube */
[data-theme="dark"] .soc-icon.yt { background: rgba(239, 68, 68, 0.15) !important; color: #ef4444 !important; border-color: rgba(239, 68, 68, 0.3); }
[data-theme="dark"] .soc-icon.yt:hover { background: #ef4444 !important; color: white !important; }
/* Zoom */
[data-theme="dark"] .soc-icon.zoom { background: rgba(59, 130, 246, 0.15) !important; color: #3b82f6 !important; border-color: rgba(59, 130, 246, 0.3); }
[data-theme="dark"] .soc-icon.zoom:hover { background: #3b82f6 !important; color: white !important; }
/* TikTok */
[data-theme="dark"] .soc-icon.tt { background: rgba(255, 255, 255, 0.1) !important; color: #e2e8f0 !important; border-color: rgba(255, 255, 255, 0.2); }
[data-theme="dark"] .soc-icon.tt:hover { background: white !important; color: black !important; }
/* Instagram */
[data-theme="dark"] .soc-icon.ig { background: rgba(219, 39, 119, 0.15) !important; color: #f472b6 !important; border-color: rgba(219, 39, 119, 0.3); }
[data-theme="dark"] .soc-icon.ig:hover { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4) !important; color: white !important; border-color: transparent !important; }

/* =========================================
   DARK MODE KHUSUS: PENDAFTARAN & HARGA
   ========================================= */

/* 1. Latar Kartu Utama (Mengganti inline style putih) */
[data-theme="dark"] #page-harga .elegant-card[style*="background: white"] {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* 2. Judul & Ikon di Header Kartu */
[data-theme="dark"] #page-harga .elegant-card h3 {
    color: white !important;
}
[data-theme="dark"] #page-harga .elegant-card > div[style*="border-bottom: 1px dashed #cbd5e1"] {
    border-bottom-color: var(--border-color) !important;
}

/* ================== KOLOM KIRI (PROMO & KUPON) ================== */

/* 3. Kotak Promo Grup (Beli 2 Gratis 1, dll) */
[data-theme="dark"] div[id^="box-b"][style*="background: #ffffff"],
[data-theme="dark"] div[id^="box-b"][style*="background: rgb(255, 255, 255)"] {
    background: var(--card-bg) !important;
    border-color: var(--primary) !important;
}
[data-theme="dark"] div[id^="box-b"][style*="background: #f8fafc"],
[data-theme="dark"] div[id^="box-b"][style*="background: rgb(248, 250, 252)"] {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] div[id^="box-b"] span[style*="color: #64748b"] {
    color: #94a3b8 !important;
}

/* 4. Kotak Kupon Diskon Global (Merah Muda) */
[data-theme="dark"] #page-harga div[style*="background: #fff1f2"] {
    background: rgba(225, 29, 72, 0.05) !important;
    border-color: rgba(225, 29, 72, 0.2) !important;
}

/* 5. Kotak Segmentasi Instansi VIP (Biru Muda) */
[data-theme="dark"] #page-harga div[style*="background: #eff6ff"] {
    background: rgba(59, 130, 246, 0.05) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}
[data-theme="dark"] #page-harga div[style*="background: white"][style*="border: 1px solid #a7f3d0"],
[data-theme="dark"] #page-harga div[style*="background: white"][style*="border: 1px solid #bfdbfe"] {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}

/* 6. Input di dalam Kotak Berwarna (Memaksa background putih jadi gelap) */
[data-theme="dark"] #page-harga input[style*="background: white"],
[data-theme="dark"] #page-harga input[style*="background: #ecfdf5"] {
    background: var(--input-bg) !important;
    color: white !important;
}
[data-theme="dark"] #text_status_kupon[style*="color: #64748b"],
[data-theme="dark"] #text_status_vip[style*="color: #64748b"],
[data-theme="dark"] #page-harga small[style*="color: #64748b"] {
    color: #94a3b8 !important;
}

/* ================== KOLOM TENGAH (TARGET & REKENING) ================== */

/* 7. Kartu Target Peserta (Kaca Putih) */
[data-theme="dark"] .target-card {
    background: rgba(30, 41, 59, 0.8) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .target-card:hover {
    border-color: var(--primary) !important;
}
[data-theme="dark"] .detail-value,
[data-theme="dark"] .capaian-main {
    color: white !important;
}

/* 8. Kotak Estimasi Omzet Kasar */
[data-theme="dark"] #page-harga div[style*="background: #f8fafc"][style*="text-align: center"] {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}

/* 9. Kotak Rekening Pembayaran (Hijau Muda) */
[data-theme="dark"] .admin-bank-box {
    background: rgba(34, 197, 94, 0.05) !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
}
[data-theme="dark"] .admin-bank-header {
    border-bottom-color: rgba(34, 197, 94, 0.2) !important;
}
[data-theme="dark"] .admin-bank-box input {
    background: var(--input-bg) !important;
    color: white !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

/* ================== BAWAH (MANAJEMEN HARGA PROFESI) ================== */

/* 10. Baris Profesi yang di-generate JS */
[data-theme="dark"] .inner-box-profesi[style*="background: white"],
[data-theme="dark"] .inner-box-profesi[style*="background: rgb(255, 255, 255)"] {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .inner-box-profesi[style*="background: #f8fafc"],
[data-theme="dark"] .inner-box-profesi[style*="background: rgb(248, 250, 252)"] {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .inner-box-profesi label[style*="color: #64748b"] {
    color: #94a3b8 !important;
}
[data-theme="dark"] .inner-box-profesi input {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: white !important;
}

/* 11. Kotak Hasil Netto */
[data-theme="dark"] .inner-box-profesi div[style*="background: #f0fdf4"] {
    background: rgba(22, 163, 74, 0.1) !important;
    border-color: rgba(22, 163, 74, 0.3) !important;
}

/* 12. Empty State Profesi */
[data-theme="dark"] #empty-profesi-state {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #empty-profesi-state h3 {
    color: white !important;
}

/* =========================================
   DARK MODE FIX: DATE INPUT & KACA TABUNG AIR
   ========================================= */

/* 1. Gelapkan Semua Kolom Tanggal (Datetime-Local) & Form Control */
[data-theme="dark"] #page-harga input[type="datetime-local"],
[data-theme="dark"] #page-harga .form-control {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: white !important;
}

/* Pastikan Ikon Kalender Bawaan Browser Tetap Putih */
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.8) !important;
}

/* 2. Jadikan Gelas Tabung Air Sangat Transparan (Real Glassmorphism) */
[data-theme="dark"] .tube-glass {
    background: rgba(255, 255, 255, 0.02) !important; /* Hampir tembus pandang 100% */
    border-color: rgba(255, 255, 255, 0.15) !important; /* Pinggiran kaca tipis bercahaya */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

/* 3. Penyesuaian Kilauan Cahaya Kaca (Reflection) di Dalam Tabung */
[data-theme="dark"] .tube-glass::before {
    box-shadow: 
        inset 0 10px 20px -5px rgba(255, 255, 255, 0.1),
        inset 0 -10px 20px -5px rgba(0, 0, 0, 0.5) !important;
}

/* Garis Pantulan Cahaya (Highlight Tipis di Kiri) */
[data-theme="dark"] .tube-glass::after {
    background: rgba(255, 255, 255, 0.15) !important; 
}

/* Saat Kartu Di-Hover, Kaca Sedikit Menyala Biru */
[data-theme="dark"] .target-card:hover .tube-glass {
    border-color: rgba(59, 130, 246, 0.5) !important;
    background: rgba(59, 130, 246, 0.05) !important;
}

/* =========================================
   DARK MODE FIX: PENGATURAN LANDING PAGE
   ========================================= */

/* 1. Baris Item Foto Banner & Review Testimoni */
[data-theme="dark"] .hero-row-item,
[data-theme="dark"] .testi-row-item {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}

/* 2. Teks Penjelasan & Label Input */
[data-theme="dark"] .hero-row-item span,
[data-theme="dark"] .testi-row-item label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .hero-row-item p {
    color: #94a3b8 !important;
}

/* 3. Kotak Upload Mini & Ikon Default (Kamera/User) */
[data-theme="dark"] #page-landing .upload-box {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #page-landing .upload-box i {
    color: #64748b !important;
}

/* 4. Tombol Hapus Banner (Kotak Merah Pudar) */
[data-theme="dark"] .hero-row-item button[style*="background: #fee2e2"] {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

/* 5. Input Angka Bintang Rating (Biar tetap emas/kuning) */
[data-theme="dark"] .inp-testi-bintang {
    color: #fbbf24 !important;
}

/* 6. Judul H3 di dalam Kartu */
[data-theme="dark"] #page-landing .elegant-card h3 {
    color: white !important;
}

/* =========================================
   DARK MODE FIX: EVALUASI & ULASAN
   ========================================= */

/* 1. Header Utama & Judul */
[data-theme="dark"] #page-evaluasi > div[style*="background: white"] {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #page-evaluasi h2 {
    color: white !important;
}

/* Dropdown Pilihan Webinar & Filter Rating */
[data-theme="dark"] #selectAdminUlasan {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: white !important;
}
[data-theme="dark"] #filterBintangUlasan {
    background: rgba(245, 158, 11, 0.05) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

/* 2. Kartu Statistik Utama (Angka Besar) & Rata-rata Pemateri */
[data-theme="dark"] #area-statistik-ulasan div[style*="background: white"] {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #area-statistik-ulasan div[style*="font-size: 38px"] {
    color: white !important;
}

/* 3. Kartu List Pemateri (Render JS) */
[data-theme="dark"] #avg-list-pemateri > div {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #avg-list-pemateri span[style*="color: var(--dark)"],
[data-theme="dark"] #avg-list-pemateri span[style*="color: black"] {
    color: white !important;
}

/* 4. Empty State (Belum Ada Data) */
[data-theme="dark"] #area-kartu-ulasan > div[style*="text-align: center"] {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #area-kartu-ulasan > div[style*="text-align: center"] h3 {
    color: white !important;
}

/* ================== KARTU ULASAN PESERTA (RENDER JS) ================== */

/* 5. Background Utama Kartu Ulasan */
[data-theme="dark"] #area-kartu-ulasan > div[style*="background:white"] {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #area-kartu-ulasan > div[style*="background:white"] h4 {
    color: white !important;
}

/* 6. Kotak Teks "Pesan & Kesan" */
[data-theme="dark"] #area-kartu-ulasan div[style*="background:#f8fafc"] {
    background: var(--input-bg) !important;
    color: #e2e8f0 !important;
}

/* 7. Kotak Rating Materi (Kuning) & Web (Hijau) */
[data-theme="dark"] #area-kartu-ulasan div[style*="background:#fffbeb"] {
    background: rgba(245, 158, 11, 0.05) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}
[data-theme="dark"] #area-kartu-ulasan div[style*="background:#f0fdf4"] {
    background: rgba(16, 185, 129, 0.05) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

/* 8. Kotak Rincian Rating Tiap Pemateri */
[data-theme="dark"] #area-kartu-ulasan div[style*="background:white"][style*="border-radius:10px"] {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #area-kartu-ulasan div[style*="border-bottom:1px dashed #e2e8f0"] {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] #area-kartu-ulasan span[style*="color:#475569"] {
    color: #cbd5e1 !important;
}

/* =========================================
   DARK MODE FIX: ADMINISTRATOR PANEL
   ========================================= */

/* 1. Header Premium (Firewall Theme) */
[data-theme="dark"] .firewall-theme {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .firewall-theme h1 {
    color: white !important;
}
[data-theme="dark"] .firewall-theme .badge-terenkripsi {
    color: #94a3b8 !important;
}

/* 2. Judul Section (Status Website Publik, Kendali Staf) */
[data-theme="dark"] .section-title {
    color: white !important;
}

/* 3. Kartu Mode Maintenance & Form Input */
[data-theme="dark"] .m-info p {
    color: #94a3b8 !important;
}
[data-theme="dark"] .m-config-container {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .config-label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .m-pesan-textarea,
[data-theme="dark"] .input-modern {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: white !important;
}

/* 4. Kartu Kendali Akses Staf */
[data-theme="dark"] .card-user-info {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .avatar-mini {
    background: var(--input-bg) !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .card-user-info div[style*="color:#1e293b"] {
    color: white !important; /* Mencerahkan Nama Staf */
}
[data-theme="dark"] .category-label {
    color: #94a3b8 !important;
}
[data-theme="dark"] .label-text {
    color: #cbd5e1 !important; /* Mencerahkan Teks Label Menu */
}
[data-theme="dark"] .access-row:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .access-row[style*="border-left: 2px solid #e2e8f0"] {
    border-left-color: var(--border-color) !important; /* Garis Sub-menu */
}
/* 5. Perbaikan Tombol "Simpan Perubahan" (Kendali Staf) */
[data-theme="dark"] .btn-save-mini {
    background: rgba(255, 255, 255, 0.03) !important; /* Latar sedikit transparan */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Garis tepi putih pudar yang elegan */
    color: #cbd5e1 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

/* Efek menyala saat disorot kursor (Hover) */
[data-theme="dark"] .btn-save-mini:hover {
    background: var(--primary) !important; /* Berubah biru Nerstizen */
    border-color: var(--primary) !important;
    color: white !important;
    box-shadow: 0 6px 15px rgba(67, 97, 238, 0.3) !important; /* Bayangan biru memancar */
}

/* =========================================
   DARK MODE FIX: DASHBOARD OVERVIEW & CHARTS
   ========================================= */

/* 1. Header Dashboard (Dashboard Overview & Total Omzet) */
[data-theme="dark"] .dash-header {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] .welcome-text p,
[data-theme="dark"] .omzet-badge span {
    color: #94a3b8 !important; /* Abu-abu terang */
}

/* 2. Baris Kontrol Grafik (Periode Harian, Mingguan, Bulanan) */
[data-theme="dark"] .chart-control-bar {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .control-label {
    color: #cbd5e1 !important;
}

/* Kotak Pilihan Waktu (Toggle Buttons) */
[data-theme="dark"] .time-selector {
    background: var(--input-bg) !important; /* Gelap ke dalam */
}
[data-theme="dark"] .time-btn {
    color: #64748b !important;
}
[data-theme="dark"] .time-btn:hover {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .time-btn.active {
    background: var(--card-bg) !important; /* Menonjol keluar */
    color: #60a5fa !important; /* Biru terang menyala */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

/* 3. Ikon Transparan di Kotak Statistik (Data Terverifikasi) */
[data-theme="dark"] .verif-card .card-icon {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    opacity: 1 !important; /* Membatalkan opacity bawaan agar lebih terang di mode gelap */
}
[data-theme="dark"] .unverif-card .card-icon {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    opacity: 1 !important;
}

/* 4. Judul di atas Grafik */
[data-theme="dark"] .chart-header {
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .chart-header h4 {
    color: #cbd5e1 !important;
}

/* 5. FIX GRAFIK APEXCHARTS (Sumbu X, Y, dan Garis Kisi) */
[data-theme="dark"] .apexcharts-text tspan,
[data-theme="dark"] .apexcharts-text {
    fill: #94a3b8 !important; /* Mengubah warna teks angka di grafik menjadi abu-abu terang */
}
[data-theme="dark"] .apexcharts-legend-text {
    color: #cbd5e1 !important; /* Teks legenda di bawah grafik donut */
}
[data-theme="dark"] .apexcharts-gridline {
    stroke: rgba(255, 255, 255, 0.05) !important; /* Garis kisi-kisi latar belakang grafik agar sangat tipis */
}
[data-theme="dark"] .apexcharts-tooltip {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important;
    color: white !important;
}
[data-theme="dark"] .apexcharts-tooltip-title {
    background: var(--input-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* 6. Menjinakkan Garis Putih pada Grafik Lingkaran (Donut Chart) */
[data-theme="dark"] .apexcharts-pie-series path {
    stroke: var(--card-bg) !important; /* Mengubah garis putih menjadi warna latar gelap kartu */
    stroke-width: 2px !important; /* Ketebalan garis pembatas antar potongan */

}

/* 7. Memperjelas Angka Data (Data Labels) di atas Grafik Batang */
[data-theme="dark"] text.apexcharts-datalabel,
[data-theme="dark"] .apexcharts-datalabel-value {
    fill: #ffffff !important; /* Paksa warna SVG menjadi putih bersih */
    font-weight: 900 !important; /* Cetak sangat tebal */
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.8)) !important; /* Efek bayangan gelap agar angka "mengambang" */
}
/* 8. Memperjelas Angka Persentase di Dalam Grafik Lingkaran (Donut/Pie) */
[data-theme="dark"] .apexcharts-pie-label {
    fill: #ffffff !important; /* Paksa warna menjadi putih bersih */
    font-weight: 900 !important; /* Cetak sangat tebal */
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.8)) !important; /* Tambahkan bayangan hitam pekat agar "mengambang" */
}

/* =========================================
   UI TREND BADGES (LIGHT & DARK MODE)
   ========================================= */

/* Base Style (Light Mode Defaults) */
.trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    cursor: help; /* Kursor tanda tanya untuk menandakan bisa di-hover */
}

.trend-badge.up {
    background: #ecfdf5;
    color: #10b981;
    border: 1px solid #a7f3d0;
}
.trend-badge.down {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
}
.trend-badge.neutral {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* 🌙 Dark Mode Overrides (Glassmorphism Effects) 🌙 */
[data-theme="dark"] .trend-badge.up {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.1);
}
[data-theme="dark"] .trend-badge.down {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.1);
}
[data-theme="dark"] .trend-badge.neutral {
    background: rgba(148, 163, 184, 0.15) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: #cbd5e1 !important;
}

/* =========================================
   UI ANALITIK CERDAS (CHART ADVANCED STATS)
   ========================================= */

/* Wadah Pita Statistik */
.chart-advanced-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    flex-wrap: wrap; /* Mencegah pecah di layar HP */
}

/* Khusus Lencana Trend Utama (Panah) */
.stat-pill {
    display: flex !important;
    flex-direction: column !important; /* PAKSA WAJIB ATAS-BAWAH */
    align-items: flex-start !important; /* Paksa Rata Kiri */
    justify-content: center !important;
    gap: 4px !important; /* Jarak antara GROWTH TREN dan Angka */
}

/* Penyesuaian font di dalam lencana khusus ini */
.stat-pill strong { font-size: 14px !important; line-height: 1 !important; } 
.stat-pill > div > span { font-size: 10px !important; opacity: 0.9 !important; text-align: left !important; }

.stat-pill.trend-green { background: #dcfce7; color: #059669; border: 1px solid #bbf7d0; box-shadow: 0 2px 10px rgba(16, 185, 129, 0.1); }
.stat-pill.trend-green span { color: #10b981; font-weight: 600; font-size: 10px; }

.stat-pill.trend-red { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; box-shadow: 0 2px 10px rgba(239, 68, 68, 0.1); }
.stat-pill.trend-red span { color: #ef4444; font-weight: 600; font-size: 10px; }

.stat-pill.trend-gray { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

/* Garis Pemisah Antar Info */
.stat-divider { width: 2px; height: 25px; background: #cbd5e1; border-radius: 2px; }

/* Info Mikro (Rata-rata, Max, Min) */
.stat-micro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: help;
}
.stat-micro .lbl { font-size: 9px; color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-micro .val { font-size: 13px; color: #1e293b; font-weight: 900; line-height: 1.2; }

/* Teks Penyorot */
.text-highlight { color: #3b82f6 !important; }
.text-danger-soft { color: #f59e0b !important; }

/* Sembunyikan info Min di Layar HP agar tidak sesak */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .chart-advanced-stats { padding: 8px; gap: 8px; justify-content: space-between; }
    .stat-pill { padding: 4px 8px; }
}

/* =========================================
   UI ANALITIK CERDAS (GRID PRESISI ABSOLUT)
   ========================================= */

/* Pembungkus Utama menggunakan GRID */
.chart-badges-wrapper {
    display: grid;
    /* Membagi menjadi 6 kolom: Kolom pertama (Panah) ambil porsi 1.3, sisanya dibagi rata 1 */
    grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1fr;
    gap: 8px; 
    margin-bottom: 12px;
    width: 100%;
}

/* Base Kapsul / Badge */
.stat-pill,
.stat-badge {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    min-width: 0; /* Mencegah elemen jebol ke luar */
}

/* Khusus Lencana Trend Utama (Panah) */
.stat-pill {
    flex-direction: row; 
    align-items: center;
    justify-content: space-between; /* Teks otomatis ke ujung */
    gap: 5px;
}

.stat-pill strong { font-size: 13px; } 
.stat-pill span { font-size: 10px; opacity: 0.8; text-align: right; }

/* Efek Melayang saat Disorot Kursor */
.stat-pill:hover,
.stat-badge:hover {
    transform: translateY(-3px);
    z-index: 2;
}

/* Penataan Teks Label Atas */
.badge-lbl {
    font-size: 8.5px; 
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px; 
    
    /* KUNCI PERBAIKAN: Potong Elegan dengan Titik-titik (...) */
    display: block; /* Diubah dari flex menjadi block */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-lbl small { 
    font-weight: 600; 
    opacity: 0.7; 
    font-size: 8px; 
    margin-left: 4px; /* Memberi sedikit jarak bernapas antara MIN/MAX dan tanggal */
}

/* Teks Angka Utama (Bawah) */
.badge-val {
    font-size: 13px; 
    font-weight: 900;
    line-height: 1.2;
    
    /* Pastikan angka juga anti-patah */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- RESPONSIVE UNTUK TABLET & HP --- */
@media (max-width: 1200px) {
    .chart-badges-wrapper { grid-template-columns: repeat(3, 1fr); }
    .stat-pill { grid-column: span 3; } /* Panah ambil 1 baris penuh di tablet */
}
@media (max-width: 768px) {
    .chart-badges-wrapper { grid-template-columns: repeat(2, 1fr); }
    .stat-pill { grid-column: span 2; } /* Panah ambil 1 baris penuh di HP */
}

/* =========================================
   🌙 DARK MODE: GRID BADGES & GLOW 🌙
   ========================================= */

/* 1. Kotak Normal */
[data-theme="dark"] .stat-badge.normal {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .stat-badge.normal .badge-lbl { color: #94a3b8 !important; }
[data-theme="dark"] .stat-badge.normal .badge-val { color: white !important; }

[data-theme="dark"] .stat-badge.normal:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* 2. Kotak Highlight MAX (Biru) */
[data-theme="dark"] .stat-badge.max {
    background: rgba(59, 130, 246, 0.08) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
}
[data-theme="dark"] .stat-badge.max .badge-val { color: #60a5fa !important; }
[data-theme="dark"] .stat-badge.max .badge-lbl { color: #93c5fd !important; }

[data-theme="dark"] .stat-badge.max:hover {
    background: rgba(59, 130, 246, 0.15) !important;
}

/* 3. Kotak Highlight MIN (Oranye) */
[data-theme="dark"] .stat-badge.min {
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
}
[data-theme="dark"] .stat-badge.min .badge-val { color: #fbbf24 !important; }
[data-theme="dark"] .stat-badge.min .badge-lbl { color: #fcd34d !important; }

[data-theme="dark"] .stat-badge.min:hover {
    background: rgba(245, 158, 11, 0.15) !important;
}

/* 4. Lencana Trend (Panah Naik/Turun) */
[data-theme="dark"] .stat-pill.trend-green { background: rgba(16, 185, 129, 0.1) !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; }
[data-theme="dark"] .stat-pill.trend-green span, [data-theme="dark"] .stat-pill.trend-green i, [data-theme="dark"] .stat-pill.trend-green strong { color: #34d399 !important; }

[data-theme="dark"] .stat-pill.trend-red { background: rgba(239, 68, 68, 0.1) !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; }
[data-theme="dark"] .stat-pill.trend-red span, [data-theme="dark"] .stat-pill.trend-red i, [data-theme="dark"] .stat-pill.trend-red strong { color: #f87171 !important; }

[data-theme="dark"] .stat-pill.trend-gray { background: rgba(148, 163, 184, 0.1) !important; border: 1px solid rgba(148, 163, 184, 0.3) !important; color: #cbd5e1 !important; }

/* =========================================
   FIX 1: HEADER DROPDOWN "TAMPILKAN KOLOM" (STICKY & DARK MODE)
   ========================================= */
.col-dropdown div:first-child {
    position: sticky !important;
    top: -15px !important;
    left: -15px !important; /* Tarik ke kiri menutupi padding */
    width: calc(100% + 30px) !important; /* Penuhi lebar sampai ke ujung kanan */
    margin-top: -15px !important;
    margin-left: -15px !important;
    padding: 15px 15px 10px 15px !important; /* Kembalikan jarak teks */
    background: white !important;
    z-index: 10 !important;
    border-radius: 8px 8px 0 0 !important; /* Samakan kelengkungan sudut atas */
    box-sizing: border-box !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* Wajib Hitam di Dark Mode */
[data-theme="dark"] .col-dropdown div:first-child {
    background: var(--card-bg) !important;
    border-bottom-color: var(--border-color) !important;
    color: #94a3b8 !important;
}


/* =========================================
   FIX 2: KOLOM TANGGAL DI HP AGAR TIDAK MELUBER KANAN
   ========================================= */
@media screen and (max-width: 768px) {
    #page-verifikasi .input-group {
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
    
    /* Paksa Input Tanggal Menciut Sesuai Layar */
    #page-verifikasi .input-group input[type="date"] {
        width: 100% !important;
        max-width: 100% !important; /* Kunci penahan meluber */
        height: 42px !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        background: white !important;
        padding: 0 15px !important;
    }
    
    [data-theme="dark"] #page-verifikasi .input-group input[type="date"] {
        background: var(--input-bg) !important;
        border-color: var(--border-color) !important;
    }

    #page-verifikasi .input-group > div[style*="display: flex"] {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }
    
    #page-verifikasi .input-group > div[style*="display: flex"] input {
        flex-grow: 1 !important;
        width: auto !important;
    }

    #page-verifikasi .btn-search-inline {
        flex-shrink: 0 !important;
        width: 42px !important;
        height: 42px !important;
    }
}

/* =========================================
   FIX: DARK MODE MODAL (UBAH PASSWORD & GLOBAL)
   ========================================= */

/* 1. Paksa Header dan Footer Modal menjadi Gelap */
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* 2. Ubah Warna Teks Judul menjadi Putih */
[data-theme="dark"] .modal-header h3,
[data-theme="dark"] #modalPassword h3 {
    color: white !important;
}

/* 3. Sesuaikan Kotak Input Password */
[data-theme="dark"] #modalPassword .pass-input-container input {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: white !important;
}
[data-theme="dark"] #modalPassword .pass-input-container input:focus {
    border-color: #3b82f6 !important;
}
[data-theme="dark"] #modalPassword .pass-input-container i {
    color: #94a3b8 !important;
}

/* 4. Sesuaikan Tombol Batal & Tombol Silang (X) */
[data-theme="dark"] .btn-cancel-modal {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .btn-cancel-modal:hover {
    background: rgba(239, 68, 68, 0.15) !important; /* Merah transparan */
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

[data-theme="dark"] .close-btn {
    background: var(--input-bg) !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .close-btn:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

/* --- SUPPORT DARK MODE KHUSUS MODAL PASSWORD --- */
[data-theme="dark"] #modalPassword .modal-header h3 { color: white; }
[data-theme="dark"] #modalPassword .form-group label { color: #94a3b8; }
[data-theme="dark"] #modalPassword .header-icon-box { 
    background: rgba(59, 130, 246, 0.15); color: #60a5fa; 
}
[data-theme="dark"] #modalPassword .pass-input-container input {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: white;
}
[data-theme="dark"] #modalPassword .pass-input-container input:focus {
    border-color: #3b82f6;
}