/* ===== SETUP CSS VARIABLES ===== */
    :root {
        --bg-app: #f8fafc;
        --bg-panel: #ffffff;
        --text-main: #0f172a;
        --text-muted: #475569;
        --border-color: #e2e8f0;
        --hover-bg: #eff6ff;
        --shadow-color: rgba(0,0,0,0.1);
    }

    [data-theme="dark"] {
        --bg-app: #0f172a; /* Latar belakang luar */
        --bg-panel: #1e293b; /* Warna sidebar & topbar */
        /*--text-main: #f8fafc;*/
        --text-main: #cbd5e1;
        --text-muted: #94a3b8;
        --border-color: #334155;
        --hover-bg: #334155;
        --shadow-color: rgba(0,0,0,0.5);
    }

    .app-sidebar {
        background-color: #ffffff !important;
    }
    /* Override global agar class Bootstrap ikut menyesuaikan */

    /* 1. Paksa Background Utama */
    [data-theme="dark"] body,
    [data-theme="dark"] .app-wrapper,
    [data-theme="dark"] .app-content {
        background-color: var(--bg-app) !important;
        color: var(--text-main) !important;
    }

    /* 2. Paksa Elemen Kotak (Card, Topbar, Sidebar, Modal, dll) - VERSI REVISI */
    [data-theme="dark"] .app-sidebar,
    [data-theme="dark"] .app-topbar,
    [data-theme="dark"] .card,
    [data-theme="dark"] .card-header,
    [data-theme="dark"] .card-body,
    [data-theme="dark"] .card-footer,
    [data-theme="dark"] .bg-white,
    [data-theme="dark"] .bg-light,
    [data-theme="dark"] .list-group-item,
    [data-theme="dark"] .modal-content,
    [data-theme="dark"] .alert-light {
        background-color: var(--bg-panel) !important;
        border-color: var(--border-color) !important;
        color: var(--text-main) !important;
    }

    /* Tambahan untuk memastikan warna teks di dalam tabel atau elemen spesifik tidak ikut 'menghilang' */
    [data-theme="dark"] table,
    [data-theme="dark"] .table {
        color: var(--text-main) !important;
    }

    /* 3. Perbaiki Teks Sidebar Biar Kelihatan */
    [data-theme="dark"] .sidebar-nav .nav-link,
    [data-theme="dark"] .menu-text,
    [data-theme="dark"] .sidebar-nav .nav-link i {
        color: var(--text-muted) !important;
    }

    [data-theme="dark"] .sidebar-nav .nav-link:hover,
    [data-theme="dark"] .sidebar-nav .nav-link.active,
    [data-theme="dark"] .sidebar-nav .nav-link[aria-expanded="true"] {
        color: #4da3ff !important; /* Biru terang agar kontras di gelap */
        background-color: var(--hover-bg) !important;
        border-left-color: #4da3ff !important;
    }

    /* 4. Paksa Input Form & Dropdown */
    [data-theme="dark"] .form-control,
    [data-theme="dark"] .custom-select,
    [data-theme="dark"] select {
        background-color: var(--bg-app) !important;
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }

    [data-theme="dark"] .form-control:focus,
    [data-theme="dark"] .custom-select:focus {
        background-color: var(--bg-app) !important;
        color: var(--text-main) !important;
        border-color: #4da3ff !important;
    }

    /* 5. Amankan Semua Teks Hitam Bawaan Bootstrap */
    [data-theme="dark"] .text-dark {
        color: var(--text-main) !important;
    }

    [data-theme="dark"] .text-muted {
        color: var(--text-muted) !important;
    }

    [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
    [data-theme="dark"] h4, [data-theme="dark"] h5 {
        color: var(--text-main) !important;
    }

    /* 6. Perbaiki Dropdown Menu di Topbar */
    [data-theme="dark"] .dropdown-menu {
        background-color: var(--bg-panel) !important;
        border-color: var(--border-color) !important;
    }

    [data-theme="dark"] .dropdown-menu .dropdown-item {
        color: var(--text-main) !important;
    }

    [data-theme="dark"] .dropdown-menu .dropdown-item:hover {
        background-color: var(--hover-bg) !important;
    }
    /* 7. Paksa Tabel (Header, Baris Belang/Striped, dan Hover) */
    [data-theme="dark"] .table,
    [data-theme="dark"] .table th,
    [data-theme="dark"] .table td,
    [data-theme="dark"] .table thead th,
    [data-theme="dark"] .table tbody tr {
        background-color: var(--bg-panel) !important;
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }

    /* Mematikan warna belang bawaan .table-striped */
    [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
        background-color: var(--bg-panel) !important;
        color: var(--text-main) !important;
    }

    /* Efek saat baris disorot mouse (.table-hover) */
    [data-theme="dark"] .table-hover tbody tr:hover {
        background-color: var(--hover-bg) !important;
        color: #4da3ff !important; /* Supaya teks menonjol saat di-hover */
    }

    /* 8. Paksa Kontainer Pencarian / Input Group yang membungkus form */
    [data-theme="dark"] .input-group,
    [data-theme="dark"] .input-group-text,
    [data-theme="dark"] .search-bar-container { /* Sesuaikan jika kamu pakai class custom untuk bungkus form */
        background-color: var(--bg-app) !important;
        border-color: var(--border-color) !important;
        color: var(--text-main) !important;
    }
    /* 9. Paksa Tombol Filter & Badge (btn-light / btn-white) */
    [data-theme="dark"] .btn-light,
    [data-theme="dark"] .btn-white,
    [data-theme="dark"] .badge-light,
    [data-theme="dark"] .btn-atp,
    [data-theme="dark"] .btn-filter-reset {
        background-color: var(--bg-app) !important;
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }

    [data-theme="dark"] .status-pill {
        background-color: var(--bg-app) !important;
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }

    /* 10. Perbaiki Tombol Aksi Outline (Biar background-nya nembus / transparan) */
    [data-theme="dark"] .btn-outline-primary,
    [data-theme="dark"] .btn-outline-warning,
    [data-theme="dark"] .btn-outline-danger,
    [data-theme="dark"] .btn-outline-secondary,
    [data-theme="dark"] .btn-outline-success {
        background-color: transparent !important;
        /* Teks dan border biarkan mengikuti bawaan bootstrap */
    }

    /* Hover effect untuk tombol outline agar tetap terbaca */
    [data-theme="dark"] .btn-outline-primary:hover,
    [data-theme="dark"] .btn-outline-warning:hover,
    [data-theme="dark"] .btn-outline-danger:hover,
    [data-theme="dark"] .btn-outline-success:hover {
        color: #ffffff !important;
    }

    /* 11. Paksa Ekstrem Baris Tabel (Table Row / Cell) */
    [data-theme="dark"] tr,
    [data-theme="dark"] td {
        background-color: var(--bg-panel) !important;
        color: var(--text-main) !important;
    }

    /* 12. Fix tambahan untuk Dropdown Select (Semua Kelas / Terbaru Dulu) */
    [data-theme="dark"] select.form-control,
    [data-theme="dark"] select.custom-select {
        background-color: var(--bg-app) !important;
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }
    /* 13. Paksa List Activity (terutama jika menggunakan tag <a>) */
    [data-theme="dark"] .list-group-item,
    [data-theme="dark"] a.list-group-item,
    [data-theme="dark"] button.list-group-item {
        background-color: var(--bg-panel) !important;
        border-color: var(--border-color) !important;
        color: var(--text-main) !important;
    }

    [data-theme="dark"] a.list-group-item:hover,
    [data-theme="dark"] button.list-group-item:hover {
        background-color: var(--hover-bg) !important;
        color: #4da3ff !important;
    }

    /* 14. Target elemen kotak kustom yang mungkin luput dari class .card */
    [data-theme="dark"] .shadow-sm.rounded, /* Menargetkan kombinasi class shadow & rounded */
    [data-theme="dark"] .info-box,
    [data-theme="dark"] .stat-card, [data-theme="dark"] .card-header-custom {
    background-color: var(--bg-panel) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
    }

    /* ============================================================
    Override Dark Mode untuk Variabel ATP Custom
    ============================================================ */
    [data-theme="dark"] {
        /* Mengaitkan variabel ATP ke variabel global dark mode di _Layout */
        --atp-surface: var(--bg-app);
        --atp-surface-alt: var(--bg-panel);
        --atp-text: var(--text-main);
        --atp-border: var(--border-color);
        --atp-muted: var(--text-muted);
    }

    /* Override khusus untuk input yang readonly agar tidak silau */
    [data-theme="dark"] .modul-input[readonly],
    [data-theme="dark"] .modul-textarea[readonly] {
        background-color: rgba(0, 0, 0, 0.2) !important; /* Gelap transparan */
        color: var(--atp-muted) !important;
        border-color: var(--atp-border) !important;
    }

    /* Memperbaiki list modal master data agar teksnya tetap terbaca */
    [data-theme="dark"] .list-group-item {
        background-color: var(--bg-panel);
        color: var(--text-main);
        border-color: var(--border-color);
    }
    /* ============================================================
    Override Dark Mode untuk ATP Generator
    ============================================================ */
    [data-theme="dark"] {
        --atp-surface: var(--bg-app);
        --atp-border: var(--border-color);
    }

    /* Paksa input dan textarea menjadi gelap */
    [data-theme="dark"] .atp-input,
    [data-theme="dark"] .atp-textarea {
        background-color: var(--bg-app) !important;
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }

    [data-theme="dark"] .atp-input:focus,
    [data-theme="dark"] .atp-textarea:focus {
        background-color: var(--bg-app) !important;
        border-color: var(--atp-primary-light) !important;
    }

    /* Paksa Card dan kontainer Elemen */
    [data-theme="dark"] .atp-card,
    [data-theme="dark"] .elemen-item {
        background-color: var(--bg-panel) !important;
        border-color: var(--border-color) !important;
    }

    /* Perbaiki tombol Master yang aslinya putih */
    [data-theme="dark"] .atp-btn-icon,
    [data-theme="dark"] .atp-btn-close-modal {
        background-color: var(--bg-panel) !important;
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }

    [data-theme="dark"] .atp-btn-icon:hover {
        background-color: var(--hover-bg) !important;
        color: var(--atp-primary-light) !important;
    }

    /* Perbaiki item list di dalam Modal Master Data */
    [data-theme="dark"] .atp-modal-item {
        background-color: var(--bg-app) !important;
        border-color: var(--border-color) !important;
    }

    [data-theme="dark"] .atp-modal-item .item-title {
        color: var(--text-main) !important;
    }

    [data-theme="dark"] .atp-modal-item .item-preview {
        color: var(--text-muted) !important;
    }

    [data-theme="dark"] .atp-modal-item:hover {
        background-color: var(--hover-bg) !important;
    }

    /* 15. Paksa Area Footer Tabel & Pagination */
    [data-theme="dark"] .card-footer,
    [data-theme="dark"] .table-responsive + div, /* Biasanya div setelah tabel */
    [data-theme="dark"] .pagination-container {
        background-color: var(--bg-panel) !important;
        border-color: var(--border-color) !important;
        color: var(--text-main) !important;
    }

    /* 16. Paksa Tombol Pagination Bootstrap (.page-link) */
    [data-theme="dark"] .pagination .page-link {
        background-color: var(--bg-app) !important;
        border-color: var(--border-color) !important;
        color: var(--text-main) !important;
    }

    /* Efek saat tombol pagination disorot (Hover) */
    [data-theme="dark"] .pagination .page-link:hover {
        background-color: var(--hover-bg) !important;
        color: #4da3ff !important;
    }

    /* Tombol halaman aktif (Current Page) */
    [data-theme="dark"] .pagination .page-item.active .page-link {
        background-color: #4da3ff !important; /* Warna biru terang agar kontras */
        border-color: #4da3ff !important;
        color: #ffffff !important;
    }

    /* Tombol halaman yang tidak bisa diklik (Disabled - misal tombol Prev di halaman 1) */
    [data-theme="dark"] .pagination .page-item.disabled .page-link {
        background-color: var(--bg-panel) !important;
        color: var(--text-muted) !important;
        border-color: var(--border-color) !important;
    }
    /* 18. ZONA KEBAL DARK MODE UNTUK PREVIEW KERTAS A4 (.a4-inner-border) */
    [data-theme="dark"] .a4-inner-border {
        background-color: #ffffff !important; /* Paksa area dalam bingkai tetap putih */
        color: #000000 !important;
    }
    /* Bersihkan .table-rubrik (di halaman LKPD) dari efek gelap */
    [data-theme="dark"] .table-rubrik,
    [data-theme="dark"] .table-rubrik tr,
    [data-theme="dark"] .table-rubrik td,
    [data-theme="dark"] .table-rubrik th {
        background-color: transparent !important;
        color: #000000 !important;
        border-color: #000000 !important; /* Paksa garis tabel jadi hitam */
    }

    /* Opsional: Beri warna abu-abu sangat muda untuk header tabel rubrik agar rapi saat dicetak */
    [data-theme="dark"] .table-rubrik thead th {
        background-color: #f8f9fa !important;
    }

    /* Kembalikan semua teks (judul, paragraf, dll) di dalam bingkai jadi hitam */
    [data-theme="dark"] .a4-inner-border h1,
    [data-theme="dark"] .a4-inner-border h2,
    [data-theme="dark"] .a4-inner-border h3,
    [data-theme="dark"] .a4-inner-border h4,
    [data-theme="dark"] .a4-inner-border h5,
    [data-theme="dark"] .a4-inner-border h6,
    [data-theme="dark"] .a4-inner-border p,
    [data-theme="dark"] .a4-inner-border span,
    [data-theme="dark"] .a4-inner-border div,
    [data-theme="dark"] .a4-inner-border b,
    [data-theme="dark"] .a4-inner-border strong {
        color: #000000 !important;
    }

    /* Bersihkan .table-identitas beserta baris dan kolomnya dari efek gelap */
    [data-theme="dark"] .a4-inner-border table,
    [data-theme="dark"] .table-identitas,
    [data-theme="dark"] .table-identitas tr,
    [data-theme="dark"] .table-identitas td,
    [data-theme="dark"] .table-identitas th {
        background-color: transparent !important; /* Biarkan warna mengikuti kertas (putih) */
        color: #000000 !important;
        border-color: #000000 !important; /* Kalau ada garis, pastikan garisnya hitam */
    }

    /* 19. PERBAIKAN TAB MENU (DESAIN PILL/SEGMENTED MODERN) */

    /* Wadah luar tab di mode gelap */
    [data-theme="dark"] .nav-tabs-responsive {
        background-color: var(--bg-app) !important;
        border-color: transparent !important;
    }

    /* Tombol tidak aktif */
    [data-theme="dark"] .nav-tabs-responsive .nav-link {
        color: var(--text-muted) !important;
        background-color: transparent !important;
    }

    /* Tombol di-hover */
    [data-theme="dark"] .nav-tabs-responsive .nav-link:hover {
        color: var(--text-main) !important;
        background-color: var(--hover-bg) !important;
    }

    /* Tombol aktif */
    [data-theme="dark"] .nav-tabs-responsive .nav-link.active {
        background-color: var(--bg-panel) !important; /* Warna card gelap */
        color: #4da3ff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; /* Bayangan lebih pekat */
    }
    /* 20. PERBAIKAN CARD SOAL & MODAL ASESMEN */

    /* Hack untuk memaksa elemen div yang di-hardcode warna putih (inline style) agar jadi gelap */
    [data-theme="dark"] [style*="background-color: white"],
    [data-theme="dark"] [style*="background-color: #ffffff"],
    [data-theme="dark"] [style*="background-color: #fff"],
    [data-theme="dark"] [style*="background: white"],
    [data-theme="dark"] [style*="background: #ffffff"],
    [data-theme="dark"] [style*="background: #fff"] {
        background-color: var(--bg-panel) !important;
        border-color: var(--border-color) !important;
    }

    /* Memastikan area dalam Modal (termasuk Edit Soal) ikut gelap */
    [data-theme="dark"] .modal-content,
    [data-theme="dark"] .modal-header,
    [data-theme="dark"] .modal-body,
    [data-theme="dark"] .modal-footer {
        background-color: var(--bg-panel) !important;
        border-color: var(--border-color) !important;
        color: var(--text-main) !important;
    }

    /* Menggelapkan opsi jawaban (bg-light) di dalam form/modal */
    [data-theme="dark"] .bg-light {
        background-color: var(--bg-app) !important; /* Sengaja pakai bg-app agar sedikit berbeda dengan background modal */
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }

    /* Jika text area editor soalnya masih putih, kita paksa sekalian */
    [data-theme="dark"] .editor-teks-soal,
    [data-theme="dark"] .editor-opsi-soal {
        background-color: var(--bg-app) !important;
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }

    /* 21. FIX SUBMENU SIDEBAR BUNGCOLON */
    [data-theme="dark"] .sidebar-submenu {
        background-color: var(--bg-panel) !important; /* Samakan dengan warna latar sidebar utama */
        border-color: var(--border-color) !important;
    }

    /* Pastikan warna teks anak menu saat di-hover tetap nyaman dibaca */
    [data-theme="dark"] .sidebar-submenu .nav-link:hover,
    [data-theme="dark"] .sidebar-submenu .nav-link.active {
        background-color: var(--hover-bg) !important;
        border-left-color: #4da3ff !important;
    }

    [data-theme="dark"] .sidebar-submenu .nav-link:hover .menu-text,
    [data-theme="dark"] .sidebar-submenu .nav-link.active .menu-text {
        color: #4da3ff !important;
    }
    /* 22. ZONA KEBAL UNTUK TABEL LANGKAH PEMBELAJARAN (MODUL AJAR) */
    [data-theme="dark"] .table-modul,
    [data-theme="dark"] .table-modul tr,
    [data-theme="dark"] .table-modul td,
    [data-theme="dark"] .table-modul th {
        background-color: transparent !important; /* Biarkan mengikuti warna kertas putih */
        color: #000000 !important; /* Paksa teks jadi hitam */
        border-color: #000000 !important; /* Paksa garis tabel jadi hitam */
    }

    /* Kembalikan warna header tabel modul agar rapi seperti aslinya */
    [data-theme="dark"] .table-modul thead th {
        background-color: #f8f9fa !important; /* Abu-abu sangat muda khas header cetakan */
        color: #000000 !important;
    }

    /* 23. FIX HALAMAN PEMBAYARAN / CHECKOUT */

    /* Targetkan kotak info paket dan kotak metode pembayaran */
    [data-theme="dark"] .payment-card,
    [data-theme="dark"] .bank-card,
    [data-theme="dark"] .method-item,
    [data-theme="dark"] .payment-method-box,
    [data-theme="dark"] label.border.rounded, /* Jika bank-nya berupa radio button label */
    [data-theme="dark"] .card-body .bg-white.rounded {
        background-color: var(--bg-panel) !important;
        border-color: var(--border-color) !important;
        color: var(--text-main) !important;
    }

    /* Memastikan teks nama bank (yang biasanya abu-abu/hitam) jadi terang */
    [data-theme="dark"] .payment-card span,
    [data-theme="dark"] .payment-card div,
    [data-theme="dark"] label.border.rounded span,
    [data-theme="dark"] label.border.rounded div {
        color: var(--text-main) !important;
    }

    /* Efek saat metode pembayaran disorot (Hover) */
    [data-theme="dark"] .payment-card:hover,
    [data-theme="dark"] label.border.rounded:hover {
        background-color: var(--hover-bg) !important;
        border-color: #4da3ff !important;
    }

    /* Efek saat metode pembayaran DIPILIH / AKTIF (menjaga border biru terang) */
    [data-theme="dark"] .payment-card.active,
    [data-theme="dark"] .payment-card.selected,
    [data-theme="dark"] input[type="radio"]:checked + label.border.rounded {
        background-color: rgba(77, 163, 255, 0.1) !important; /* Latar biru sangat transparan */
        border-color: #4da3ff !important; /* Border biru terang */
    }
    /* 24. OVERRIDE CUSTOM BOX TOPUP POIN */

    /* Kotak Paket (Biru Gelap Transparan) */
    [data-theme="dark"] .info-box-package {
        background-color: rgba(13, 110, 253, 0.1) !important;
        border-color: rgba(13, 110, 253, 0.3) !important;
        color: var(--text-main) !important;
    }

    [data-theme="dark"] .info-box-package:hover {
        border-color: #4da3ff !important;
    }

    /* Lingkaran Ikon Paket (Biru Neon) */
    [data-theme="dark"] .info-box-package .icon-circle {
        background-color: rgba(13, 110, 253, 0.2) !important;
        color: #4da3ff !important;
    }


    /* Kotak Poin (Emas/Kuning Gelap Transparan) */
    [data-theme="dark"] .info-box-points {
        background-color: rgba(245, 158, 11, 0.1) !important;
        border-color: rgba(245, 158, 11, 0.3) !important;
        color: var(--text-main) !important;
    }

    [data-theme="dark"] .info-box-points:hover {
        border-color: #fbbf24 !important;
    }

    /* Lingkaran Ikon Poin (Kuning Neon) */
    [data-theme="dark"] .info-box-points .icon-circle {
        background-color: rgba(245, 158, 11, 0.2) !important;
        color: #fbbf24 !important;
    }
    /* ===== 25. FIX HIERARKI KEDALAMAN (ELEVATION) DARK MODE ===== */

    /* 1. Paksa lantai dasar halaman menjadi warna yang paling gelap */
    [data-theme="dark"] body,
    [data-theme="dark"] .app-wrapper,
    [data-theme="dark"] .app-main {
        background-color: var(--bg-app) !important;
    }

    /* 2. Angkat elemen Sidebar, Topbar, dan Card dengan warna yang sedikit lebih terang */
    [data-theme="dark"] .app-sidebar,
    [data-theme="dark"] .app-topbar,
    [data-theme="dark"] .card,
    [data-theme="dark"] .dropdown-menu-custom,
    [data-theme="dark"] .user-info-banner {
        background-color: var(--bg-panel) !important;
    }

    /* 3. Pertegas batas antara area dengan border tipis */
    [data-theme="dark"] .app-sidebar {
        border-right: 1px solid var(--border-color) !important;
    }

    [data-theme="dark"] .app-topbar {
        border-bottom: 1px solid var(--border-color) !important;
    }

    /* 4. Gelapkan sedikit kotak pencarian/filter agar seolah "masuk" ke dalam panel */
    [data-theme="dark"] input.form-control,
    [data-theme="dark"] select.form-control,
    [data-theme="dark"] .border.rounded {
        background-color: var(--bg-app) !important;
        border-color: var(--border-color) !important;
    }

    /* ===== KUNCI WARNA IKON KOIN DI SIDEBAR ===== */
    [data-theme="dark"] .sidebar-nav .nav-link i.text-warning,
    [data-theme="dark"] .sidebar-nav .nav-link i.fa-coins {
        color: #facc15 !important; /* Kuning emas terang yang menyala di mode gelap */
    }

        /* ===== 33. FIX INPUT, TEXTAREA, & SELECT MODUL AJAR ===== */

        /* Menggelapkan semua input modul ajar yang bisa diedit */
        [data-theme="dark"] .modul-input,
        [data-theme="dark"] .modul-textarea,
        [data-theme="dark"] .modul-select {
            background-color: var(--bg-app) !important; /* Memakai warna dasar agar seolah "masuk" ke dalam card */
            color: var(--text-main) !important;
            border-color: var(--border-color) !important;
        }

            /* Warna placeholder agar tidak terlalu mencolok */
            [data-theme="dark"] .modul-input::placeholder,
            [data-theme="dark"] .modul-textarea::placeholder {
                color: var(--text-muted) !important;
                opacity: 0.7;
            }

            /* Efek saat input sedang diklik/difokuskan */
            [data-theme="dark"] .modul-input:focus,
            [data-theme="dark"] .modul-textarea:focus,
            [data-theme="dark"] .modul-select:focus {
                background-color: var(--bg-app) !important;
                border-color: #4da3ff !important; /* Border biru terang saat aktif */
                color: var(--text-main) !important;
                outline: none !important;
                box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15) !important;
            }
        /* ===== 34. FIX STEP INDICATOR MODUL AJAR (ATP) DI DARK MODE ===== */

        /* 1. Sesuaikan warna garis penghubung dan pastikan posisinya pas di tengah (36px / 2 = 18px) */
        [data-theme="dark"] .step-indicator::before {
            background-color: var(--border-color) !important;
            top: 18px !important;
        }

        /* 2. Bersihkan kotak latar belakang tersembunyi di item */
        [data-theme="dark"] .step-item {
            background: transparent !important;
        }

        /* 3. Sesuaikan lingkaran default agar mengikuti warna panel gelap */
        [data-theme="dark"] .step-circle {
            background-color: var(--bg-panel) !important;
            border-color: var(--border-color) !important;
            color: var(--text-muted) !important;
        }

        /* 4. Pastikan lingkaran yang sedang Aktif menyala biru terang */
        [data-theme="dark"] .step-item.active .step-circle {
            background-color: #3b82f6 !important;
            border-color: #3b82f6 !important;
            color: #ffffff !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
        }

        /* 5. Pastikan lingkaran yang Sudah Selesai (Done) menyala hijau terang */
        [data-theme="dark"] .step-item.done .step-circle {
            background-color: #10b981 !important;
            border-color: #10b981 !important;
            color: #ffffff !important;
        }

        /* 6. Sesuaikan warna teks label di bawah lingkaran */
        [data-theme="dark"] .step-item {
            color: var(--text-muted) !important;
        }

            [data-theme="dark"] .step-item.active {
                color: #3b82f6 !important;
            }

            [data-theme="dark"] .step-item.done {
                color: #10b981 !important;
            }
        /* ===== 35. FIX KARTU REFERRAL DI DARK MODE ===== */

        /* 1. Paksa background card referral menjadi biru gelap transparan agar tetap terasa spesial */
        [data-theme="dark"] .referral-card {
            background-color: rgba(13, 110, 253, 0.1) !important;
            border-color: rgba(13, 110, 253, 0.3) !important;
        }

            /* 2. Terangkan judul "Program Referral" agar tidak tenggelam */
            [data-theme="dark"] .referral-card div[style*="color: #0d6efd"] {
                color: #4da3ff !important; /* Biru terang */
            }

            /* 3. Paksa warna teks deskripsi agar terbaca jelas */
            [data-theme="dark"] .referral-card p {
                color: var(--text-main) !important;
            }

            /* 4. Perbaiki kotak input link referral agar teksnya terang dan backgroundnya menyatu */
            [data-theme="dark"] .referral-card input {
                background-color: var(--bg-app) !important;
                color: #ffffff !important; /* Teks link dipaksa putih terang */
                border-color: var(--border-color) !important;
            }
/* ===== SIDEBAR LAYOUT LIGHT & MINI ===== */