/* ================================================================
   01-variabel-tema.css
   Variabel warna tema terang (:root) dan tema gelap (html[data-theme=dark])
   ================================================================ */

  :root {
    /* ── Brand ─────────────────────────────── */
    --navy: #0F1B35;
    --slate: #1E3A5F;
    --gold: #C8952E;
    --gold-light: #E8B84B;
    /* ── Surface ────────────────────────────── */
    --bg: #EEF1F8;
    --surface: #FFFFFF;
    --surface2: #F4F6FB;
    --border: #D5DCE8;
    /* ── Text ───────────────────────────────── */
    --text: #111827;
    --muted: #4B5563;
    /* ── Semantic ───────────────────────────── */
    --success: #059669;
    --danger: #DC2626;
    --info: #2563EB;
    --warn: #D97706;
    /* ── Misc ───────────────────────────────── */
    --sidebar-w: 260px;
    --total-row-bg: #E8EEFF;
    --hover-row-bg: #EBF0FF;
    --dd-surface: #FFFFFF;
    --modal-overlay-bg: rgba(0,0,0,.45);
    --scrollbar-thumb: #B0BAC8;
    --shadow-color: rgba(0,0,0,.09);
    /* ── Badges ─────────────────────────────── */
    --badge-success-bg: #D1FAE5; --badge-success-fg: #065F46;
    --badge-danger-bg:  #FEE2E2; --badge-danger-fg:  #991B1B;
    --badge-info-bg:    #DBEAFE; --badge-info-fg:    #1D4ED8;
    --badge-warn-bg:    #FEF3C7; --badge-warn-fg:    #92400E;
    /* ── Alerts ─────────────────────────────── */
    --alert-info-bg:    #EFF6FF; --alert-info-fg:    #1E40AF;
    --alert-success-bg: #ECFDF5; --alert-success-fg: #065F46;
    --alert-warn-bg:    #FFFBEB; --alert-warn-fg:    #92400E;
  }

  /* ==================== DARK THEME ==================== */
  html[data-theme="dark"] {
    /* ── Brand (dark) ───────────────────────── */
    --navy: #3B82F6;          /* bright blue — readable on dark bg */
    --slate: #60A5FA;
    --gold: #FBBF24;          /* amber — pops on dark */
    --gold-light: #FDE68A;
    /* ── Surface (dark) ─────────────────────── */
    --bg: #0D1117;
    --surface: #161B22;
    --surface2: #1C2230;
    --border: #2D3748;
    /* ── Text (dark) ────────────────────────── */
    --text: #F0F4FF;
    --muted: #94A3B8;
    /* ── Semantic (dark) ────────────────────── */
    --success: #34D399;
    --danger: #F87171;
    --info: #60A5FA;
    --warn: #FBBF24;
    /* ── Misc (dark) ─────────────────────────── */
    --total-row-bg: #1A2744;
    --hover-row-bg: #1A2744;
    --dd-surface: #1C2230;
    --modal-overlay-bg: rgba(0,0,0,.72);
    --scrollbar-thumb: #374151;
    --shadow-color: rgba(0,0,0,.55);
    /* ── Badges (dark) ──────────────────────── */
    --badge-success-bg: rgba(52,211,153,.18);  --badge-success-fg: #6EE7B7;
    --badge-danger-bg:  rgba(248,113,113,.18); --badge-danger-fg:  #FCA5A5;
    --badge-info-bg:    rgba(96,165,250,.18);  --badge-info-fg:    #93C5FD;
    --badge-warn-bg:    rgba(251,191,36,.18);  --badge-warn-fg:    #FDE68A;
    /* ── Alerts (dark) ──────────────────────── */
    --alert-info-bg:    rgba(96,165,250,.12);  --alert-info-fg:    #93C5FD;
    --alert-success-bg: rgba(52,211,153,.12);  --alert-success-fg: #6EE7B7;
    --alert-warn-bg:    rgba(251,191,36,.12);  --alert-warn-fg:    #FDE68A;
  }
  html[data-theme="dark"] body { background: var(--bg); }
  html[data-theme="dark"] #login-overlay { background: var(--bg); }
  html[data-theme="dark"] .login-card,
  html[data-theme="dark"] .modal,
  html[data-theme="dark"] .card,
  html[data-theme="dark"] #topbar { box-shadow: 0 4px 20px var(--shadow-color); }
  html[data-theme="dark"] .stat-card .stat-value { color: var(--text); }
  html[data-theme="dark"] thead th { color: var(--muted); }
  html[data-theme="dark"] .topbar-title { color: var(--text); }
  html[data-theme="dark"] .card-header h3 { color: var(--text); }
  html[data-theme="dark"] .modal-header h3 { color: var(--text); }
  html[data-theme="dark"] .lk-section-title { color: var(--text); border-bottom-color: var(--border); }
  html[data-theme="dark"] .lk-row.total { border-top-color: var(--border); border-bottom-color: var(--border); }
  html[data-theme="dark"] .lk-header h2 { color: var(--text); }
  html[data-theme="dark"] .wizard-step.active .step-num { background: var(--navy); border-color: var(--navy); }
  html[data-theme="dark"] .wizard-step.active .step-label { color: var(--navy); }
  html[data-theme="dark"] .je-total-val { color: var(--text); }
  html[data-theme="dark"] .login-brand { color: var(--text); }
  html[data-theme="dark"] .form-control { background: var(--surface2); border-color: var(--border); color: var(--text); }
  html[data-theme="dark"] .form-control:focus { border-color: var(--navy); }
  html[data-theme="dark"] select.form-control option { background: var(--surface2); color: var(--text); }
  html[data-theme="dark"] .pagesize-select { background: var(--surface2); border-color: var(--border); color: var(--text); }
  html[data-theme="dark"] .pagesize-select option { background: var(--surface2); color: var(--text); }
  html[data-theme="dark"] .topbar-period select { color: var(--text); }
  html[data-theme="dark"] .tab.active { color: var(--navy); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
  html[data-theme="dark"] .akun-opt:hover, html[data-theme="dark"] .akun-opt.selected { background: var(--hover-row-bg); color: var(--gold); }
  html[data-theme="dark"] #company-dropdown { background: var(--dd-surface); box-shadow: 0 8px 32px var(--shadow-color); border-color: var(--border); }
  html[data-theme="dark"] .dd-item { background: var(--dd-surface); border-color: var(--border); }
  html[data-theme="dark"] .dd-item:hover { background: var(--surface2); }
  html[data-theme="dark"] .dd-item.active { background: var(--hover-row-bg); }
  html[data-theme="dark"] .dd-item-name { color: var(--text); }
  html[data-theme="dark"] .dd-add { color: var(--navy); background: var(--surface2); border-color: var(--border); }
  html[data-theme="dark"] .dd-add:hover { background: var(--border); }
  html[data-theme="dark"] .dd-section-title { background: var(--surface2); border-color: var(--border); }
  html[data-theme="dark"] .modal-overlay { background: var(--modal-overlay-bg); }
  html[data-theme="dark"] .modal-close { background: var(--surface2); color: var(--text); }
  html[data-theme="dark"] .modal-close:hover { background: var(--border); }
  html[data-theme="dark"] .icon-btn { background: var(--surface2); border-color: var(--border); color: var(--text); }
  html[data-theme="dark"] .icon-btn:hover { background: var(--border); }
  html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
  html[data-theme="dark"] .import-error-detail { color: var(--text); background: var(--surface2); border-color: var(--border); }
  html[data-theme="dark"] mark { background: #6B5A1A !important; color: var(--text) !important; }
  html[data-theme="dark"] .btn-outline { border-color: var(--border); color: var(--text); }
  html[data-theme="dark"] .btn-outline:hover { border-color: var(--navy); color: var(--navy); }
  html[data-theme="dark"] .btn-primary { background: var(--navy); }
  html[data-theme="dark"] .btn-gold { background: var(--gold); color: #111; }
  html[data-theme="dark"] .nav-item.active { background: linear-gradient(135deg, var(--gold) 0%, #D97706 100%); color: #111; }
  html[data-theme="dark"] .akun-dropdown { background: var(--surface); border-color: var(--navy); }
  html[data-theme="dark"] .akun-search-input { background: var(--surface2); border-color: var(--border); color: var(--text); }
  html[data-theme="dark"] .akun-search-input:focus { border-color: var(--navy); }
  html[data-theme="dark"] .stat-card { background: var(--surface); border-color: var(--border); }
  html[data-theme="dark"] .stat-card::before { background: var(--accent, var(--navy)); }
  html[data-theme="dark"] tbody tr:hover { background: var(--surface2); }
  html[data-theme="dark"] .pass-toggle:hover { color: var(--navy); }