/* ═══════════════════════════════════════════════════════════════
   light-theme.css — 4-level hierarchy light theme
   L1 Shell  (#ffffff)  — sidebar, header, modals, dialogs
   L2 Floor  (#d8e0ea)  — main page background
   L3 Cards  (#ffffff + border + shadow) — content panels
   L4 Inner  (#eef3f8 + border) — inputs, table rows, inner panels
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Custom Properties ── */
[data-theme="light"] {
    /* Surface levels */
    --lt-l1:        #ffffff;
    --lt-l1-border: #c4d0dd;
    --lt-l2:        #d8e0ea;
    --lt-l3:        #ffffff;
    --lt-l3-border: #b8cad8;
    --lt-l3-shadow: 0 2px 10px rgba(0,0,0,0.09), 0 1px 3px rgba(0,0,0,0.06);
    --lt-l4:        #eef3f8;
    --lt-l4-border: #9ab2c5;

    /* Text hierarchy */
    --lt-t1: #0f172a;   /* primary — headings, key values */
    --lt-t2: #1e293b;   /* body — regular text */
    --lt-t3: #475569;   /* muted — labels, metadata */
    --lt-t4: #7990a3;   /* faint — hints, placeholders */

    /* System colors (keep semantic colors same) */
    --primary:      #3b82f6;
    --primary-dark: #2563eb;
    --success:      #10b981;
    --danger:       #ef4444;
    --warning:      #f59e0b;

    /* Remap CSS variable aliases */
    --dark:         var(--lt-t1);
    --gray-100:     rgba(0,0,0,0.05);
    --gray-200:     rgba(0,0,0,0.10);
    --gray-300:     rgba(0,0,0,0.18);
    --gray-600:     var(--lt-t3);
    --gray-800:     var(--lt-l4);
    --glass-bg:     var(--lt-l3);
    --glass-border: var(--lt-l3-border);
    --shadow:       var(--lt-l3-shadow);
}

/* ── 2. Base ── */
[data-theme="light"] body {
    background: var(--lt-l2) !important;
    color: var(--lt-t2);
}

/* ── 3. L1 — Shell: Sidebar ── */
[data-theme="light"] .sidebar {
    background: var(--lt-l1);
    border-right: 1px solid var(--lt-l1-border);
}
[data-theme="light"] .sidebar-brand {
    border-bottom-color: var(--lt-l1-border);
}
[data-theme="light"] .sidebar-brand-sub { color: var(--lt-t4); }
[data-theme="light"] .nav-section-label { color: var(--lt-t4); }
[data-theme="light"] .sidebar .nav-item { color: var(--lt-t3); }
[data-theme="light"] .sidebar .nav-item:hover {
    color: var(--lt-t1);
    background: rgba(0,0,0,0.05);
}
[data-theme="light"] .sidebar .nav-item.active {
    color: #1e40af;
    background: rgba(59,130,246,0.1);
    font-weight: 600;
}
[data-theme="light"] .sidebar .nav-item .nav-icon { color: var(--lt-t4); }
[data-theme="light"] .sidebar .nav-item:hover .nav-icon { color: var(--lt-t3); }
[data-theme="light"] .sidebar .nav-item.active .nav-icon { color: #3b82f6; }
[data-theme="light"] .nav-badge {
    background: rgba(59,130,246,0.12);
    color: #2563eb;
}
[data-theme="light"] .sidebar-bottom { border-top-color: var(--lt-l1-border); }
[data-theme="light"] .router-status-card { background: var(--lt-l4); }
[data-theme="light"] .rs-name { color: var(--lt-t2); }
[data-theme="light"] .rs-meta { color: var(--lt-t4); }

/* ── 4. L1 — Shell: Header ── */
[data-theme="light"] .app-header {
    background: var(--lt-l1);
    border-bottom: 1px solid var(--lt-l1-border);
}
[data-theme="light"] .header-breadcrumb { color: var(--lt-t4); }
[data-theme="light"] .header-breadcrumb b { color: var(--lt-t2); }
[data-theme="light"] .header-search {
    background: var(--lt-l4);
    border: 1px solid var(--lt-l4-border);
}
[data-theme="light"] .header-search:hover { border-color: #7990a3; }
[data-theme="light"] .header-search i,
[data-theme="light"] .header-search span { color: var(--lt-t4); }
[data-theme="light"] .header-search kbd {
    color: var(--lt-t4);
    background: rgba(0,0,0,0.06);
    border-color: var(--lt-l4-border);
}
[data-theme="light"] .h-btn {
    background: var(--lt-l4);
    border: 1px solid var(--lt-l4-border);
    color: var(--lt-t3);
}
[data-theme="light"] .h-btn:hover {
    background: #dde7f0;
    color: var(--lt-t1);
    border-color: #7990a3;
}
[data-theme="light"] .h-btn-badge { border-color: var(--lt-l1); }
[data-theme="light"] .h-user {
    background: var(--lt-l4);
    border: 1px solid var(--lt-l4-border);
}
[data-theme="light"] .h-user:hover { background: #dde7f0; }
[data-theme="light"] .h-user-name { color: var(--lt-t1); }
[data-theme="light"] .h-user-role { color: var(--lt-t4); }

/* ── 5. L2 — Page content area ── */
[data-theme="light"] .page-content {
    scrollbar-color: var(--lt-l1-border) transparent;
}
[data-theme="light"] .page-content::-webkit-scrollbar-thumb {
    background: var(--lt-l1-border);
}
[data-theme="light"] .page-header h1 { color: var(--lt-t1); }

/* ── 6. L3 — Cards ── */
[data-theme="light"] .card {
    background: var(--lt-l3);
    border: 1px solid var(--lt-l3-border);
    box-shadow: var(--lt-l3-shadow);
}
[data-theme="light"] .card:hover {
    border-color: rgba(59,130,246,0.45);
    box-shadow: 0 4px 16px rgba(59,130,246,0.12), 0 1px 4px rgba(0,0,0,0.06);
}
/* Card text */
[data-theme="light"] .card-header h3 { color: var(--lt-t1); }
[data-theme="light"] .revenue-amount { color: var(--lt-t1); }
[data-theme="light"] .activity-name  { color: var(--lt-t1); }
[data-theme="light"] .activity-date  { color: var(--lt-t2); }
[data-theme="light"] .activity-time  { color: var(--lt-t4); }
[data-theme="light"] .activity-meta  { color: var(--lt-t4); }
[data-theme="light"] .info-label     { color: var(--lt-t3); }
[data-theme="light"] .info-value     { color: var(--lt-t1); }
[data-theme="light"] .total-balance  { color: var(--lt-t3); }
[data-theme="light"] .activity-item:hover { background: var(--lt-l4); }
[data-theme="light"] .chart-tabs { background: var(--lt-l4); }
[data-theme="light"] .tab-btn { color: var(--lt-t3); }

/* ── 7. L4 — Inner surfaces: Inputs & Forms ── */
[data-theme="light"] .form-group label { color: var(--lt-t3); }
[data-theme="light"] .form-group input {
    background: var(--lt-l4);
    border: 1px solid var(--lt-l4-border);
    color: var(--lt-t1);
}
[data-theme="light"] .form-group input::placeholder { color: var(--lt-t4); }
[data-theme="light"] .form-group input:focus {
    background: var(--lt-l3);
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* ── 8. Buttons ── */
[data-theme="light"] .btn.btn-secondary,
[data-theme="light"] .btn-secondary {
    background: var(--lt-l4);
    color: var(--lt-t2);
    border: 1px solid var(--lt-l4-border);
}
[data-theme="light"] .btn.btn-secondary:hover,
[data-theme="light"] .btn-secondary:hover {
    background: #dde7f0;
    color: var(--lt-t1);
    border-color: #7990a3;
}
[data-theme="light"] .icon-btn {
    background: var(--lt-l4);
    color: var(--lt-t3);
}
[data-theme="light"] .icon-btn:hover {
    background: #dde7f0;
    color: var(--lt-t1);
}

/* ── 9. Alerts ── */
[data-theme="light"] .alert.alert-error {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.2);
    color: #b91c1c;
}

/* ── 10. Custom Select (L4 surface) ── */
[data-theme="light"] .app-cs-trigger {
    background: var(--lt-l4);
    border: 1px solid var(--lt-l4-border);
    color: var(--lt-t1);
}
[data-theme="light"] .app-cs-trigger:hover,
[data-theme="light"] .app-cs-trigger.open {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
[data-theme="light"] .app-cs-trigger .cs-label.cs-placeholder { color: var(--lt-t4); }
[data-theme="light"] .app-cs-trigger .cs-arrow { border-color: var(--lt-t3); }
[data-theme="light"] .app-cs-menu {
    background: var(--lt-l3);
    border: 1px solid var(--lt-l3-border);
    box-shadow: 0 16px 48px rgba(0,0,0,0.14);
}
[data-theme="light"] .app-cs-option {
    color: var(--lt-t2);
    border-bottom-color: var(--lt-l4);
}
[data-theme="light"] .app-cs-option:hover {
    background: var(--lt-l4);
    color: var(--lt-t1);
}
[data-theme="light"] .app-cs-option.cs-selected {
    background: rgba(59,130,246,0.1);
    color: #2563eb;
    font-weight: 600;
}
[data-theme="light"] .app-cs-option.cs-disabled { color: var(--lt-t4); }

/* ── 11. Custom Number Input ── */
[data-theme="light"] .app-ni-btn {
    background: var(--lt-l4);
    border-color: var(--lt-l4-border);
    color: var(--lt-t3);
}
[data-theme="light"] .app-ni-btn:hover {
    background: rgba(59,130,246,0.1);
    color: #2563eb;
    border-color: rgba(59,130,246,0.4);
}

/* ── 12. Login Page ── */
[data-theme="light"] .login-page {
    background: var(--lt-l2) !important;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(59,130,246,0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(99,102,241,0.06) 0%, transparent 50%) !important;
}
[data-theme="light"] .login-card {
    background: var(--lt-l3);
    border: 1px solid var(--lt-l3-border);
    box-shadow: var(--lt-l3-shadow);
}
[data-theme="light"] .login-header h1 { color: var(--lt-t1); }
[data-theme="light"] .login-header p  { color: var(--lt-t3); }

/* ── 13. Global Layout (purple accent) ── */
html[data-theme="light"][data-layout="global"] .sidebar {
    background: #faf8ff;
    border-right-color: rgba(167,139,250,0.18);
}
html[data-theme="light"][data-layout="global"] .sidebar .nav-item:hover {
    color: #5b21b6;
    background: rgba(167,139,250,0.1);
}
html[data-theme="light"][data-layout="global"] .sidebar .nav-item.active {
    color: #4c1d95;
    background: rgba(167,139,250,0.14);
}
html[data-theme="light"][data-layout="global"] .sidebar .nav-item:hover .nav-icon,
html[data-theme="light"][data-layout="global"] .sidebar .nav-item.active .nav-icon {
    color: #7c3aed;
}
html[data-theme="light"][data-layout="global"] .header-breadcrumb b { color: #7c3aed; }
html[data-theme="light"][data-layout="global"] .global-mode-badge {
    background: rgba(167,139,250,0.14);
    border-color: rgba(167,139,250,0.3);
}
html[data-theme="light"][data-layout="global"] .back-to-router { color: var(--lt-t3); }
html[data-theme="light"][data-layout="global"] .back-to-router:hover {
    color: var(--lt-t1);
    background: rgba(0,0,0,0.05);
}
html[data-theme="light"][data-layout="global"] .header-actions span[style] {
    background: rgba(167,139,250,0.18) !important;
    border-color: rgba(167,139,250,0.35) !important;
}

/* ── 14. Akun Layout ── */
[data-theme="light"] .akun-mobile-nav {
    background: var(--lt-l1);
    border-bottom: 1px solid var(--lt-l1-border);
}
[data-theme="light"] .mob-nav-tab { color: var(--lt-t3); }
[data-theme="light"] .mob-nav-tab:hover { color: var(--lt-t1); background: rgba(0,0,0,0.05); }
[data-theme="light"] .mob-nav-tab.active {
    background: rgba(59,130,246,0.12);
    color: #2563eb;
    border-color: rgba(59,130,246,0.3);
}
[data-theme="light"] .akun-badge {
    color: #2563eb;
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.25);
}
[data-theme="light"] .btn-ghost {
    background: var(--lt-l4);
    border: 1px solid var(--lt-l4-border);
    color: var(--lt-t2);
}
[data-theme="light"] .btn-ghost:hover {
    background: #dde7f0;
    border-color: #7990a3;
}
[data-theme="light"] .input-premium {
    background: var(--lt-l4);
    border: 1px solid var(--lt-l4-border);
    color: var(--lt-t1);
}
[data-theme="light"] .input-premium:focus {
    background: var(--lt-l3);
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
[data-theme="light"] .input-premium::placeholder { color: var(--lt-t4); }
[data-theme="light"] .voucher-card {
    background: var(--lt-l3);
    border: 1px solid var(--lt-l3-border);
    box-shadow: var(--lt-l3-shadow);
}
[data-theme="light"] .voucher-card:hover { border-color: rgba(59,130,246,0.45); }
[data-theme="light"] .tx-card {
    background: var(--lt-l3);
    border: 1px solid var(--lt-l3-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .tx-card:hover { border-color: var(--lt-l4-border); }
[data-theme="light"] .divider { background: var(--lt-l1-border); }
[data-theme="light"] .customer-card {
    background: var(--lt-l4);
    border: 1px solid var(--lt-l4-border);
}
[data-theme="light"] .customer-card-name { color: var(--lt-t1); }
[data-theme="light"] .customer-card-phone { color: var(--lt-t4); }

/* ── 15. Portal Layout (.glass) ── */
[data-theme="light"] body {
    background-image:
        radial-gradient(ellipse at 20% 10%, rgba(59,130,246,0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(99,102,241,0.05) 0%, transparent 50%);
}
[data-theme="light"] .glass {
    background: var(--lt-l3);
    border: 1px solid var(--lt-l3-border);
    box-shadow: var(--lt-l3-shadow);
    backdrop-filter: none;
}
/* Portal text within .glass */
[data-theme="light"] .glass .text-white:not(.btn-premium) { color: var(--lt-t1) !important; }
[data-theme="light"] .glass .text-slate-200   { color: var(--lt-t2) !important; }
[data-theme="light"] .glass .text-slate-300   { color: var(--lt-t2) !important; }
[data-theme="light"] .glass .text-slate-400   { color: var(--lt-t3) !important; }
[data-theme="light"] .glass .text-slate-500   { color: var(--lt-t3) !important; }
[data-theme="light"] .glass .hover\:text-slate-200:hover { color: var(--lt-t1) !important; }
[data-theme="light"] .glass .hover\:text-white:hover      { color: var(--lt-t1) !important; }
/* Portal bg/border within .glass */
[data-theme="light"] .glass .bg-white\/5       { background-color: var(--lt-l4) !important; }
[data-theme="light"] .glass .hover\:bg-white\/5:hover { background-color: #dde7f0 !important; }
[data-theme="light"] .glass .border-white\/5   { border-color: var(--lt-l1-border) !important; }
[data-theme="light"] .glass .border-white\/10  { border-color: var(--lt-l4-border) !important; }
/* Portal layout header/footer text */
[data-theme="light"] .text-slate-400 { color: var(--lt-t3); }
[data-theme="light"] .text-slate-500 { color: var(--lt-t3); }
/* Portal .input-premium */
[data-theme="light"] .glass .input-premium {
    background: var(--lt-l4) !important;
    border-color: var(--lt-l4-border) !important;
    color: var(--lt-t1) !important;
}
/* Portal inline style="" overrides (needs !important) */
[data-theme="light"] #dropdown-trigger {
    background: var(--lt-l4) !important;
    border-color: var(--lt-l4-border) !important;
    color: var(--lt-t2) !important;
}
[data-theme="light"] #dropdown-menu {
    background: var(--lt-l3) !important;
    border: 1px solid var(--lt-l3-border) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.14) !important;
}
[data-theme="light"] #dropdown-menu > div:first-child {
    border-bottom-color: var(--lt-l1-border) !important;
}
[data-theme="light"] #dropdown-search {
    background: var(--lt-l4) !important;
    border-color: var(--lt-l4-border) !important;
    color: var(--lt-t1) !important;
}
[data-theme="light"] #login-btn {
    background: var(--lt-l4) !important;
    border-color: var(--lt-l4-border) !important;
    color: var(--lt-t3) !important;
}
[data-theme="light"] .glass .h-px { background: var(--lt-l1-border) !important; }
[data-theme="light"] .glass label[style]  { background: var(--lt-l4) !important; }
[data-theme="light"] .glass form button[style] {
    background: var(--lt-l4) !important;
    border-color: var(--lt-l4-border) !important;
    color: var(--lt-t2) !important;
}
[data-theme="light"] .glass [style*="border-top"] { border-top-color: var(--lt-l1-border) !important; }
[data-theme="light"] #dropdown-menu .text-slate-300 { color: var(--lt-t2) !important; }
[data-theme="light"] #dropdown-menu .text-slate-500 { color: var(--lt-t4) !important; }

/* ── 16. Router Selection Page ── */
/* Stat-bar: pakai L2 (background halaman) agar stat-card putih terlihat mengambang */
[data-theme="light"] .stat-bar {
    background: var(--lt-l2) !important;
    border-bottom: none;
    box-shadow: none;
}
[data-theme="light"] .stat-bar-header { border-bottom-color: transparent; }
[data-theme="light"] .stat-bar-title  { color: var(--lt-t3); }
/* Sidebar toggle button */
[data-theme="light"] .sidebar-toggle-btn {
    background: var(--lt-l3) !important;
    border: 1px solid var(--lt-l3-border) !important;
    color: var(--lt-t3) !important;
}
[data-theme="light"] .sidebar-toggle-btn:hover {
    background: #dde7f0 !important;
    color: var(--lt-t1) !important;
}
/* Stat cards — L3 (putih) di atas L2 (abu-abu) → semua sama, semua jelas */
[data-theme="light"] .stat-card {
    background: var(--lt-l3) !important;
    border: 1px solid var(--lt-l3-border) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
[data-theme="light"] .stat-number { color: var(--lt-t1) !important; }
[data-theme="light"] .stat-label  { color: var(--lt-t3); }
[data-theme="light"] .stat-sub    { color: var(--lt-t4) !important; }
/* Search box */
[data-theme="light"] .search-box input {
    background: var(--lt-l3);
    border-color: var(--lt-l3-border);
    color: var(--lt-t1);
}
[data-theme="light"] .search-box input::placeholder { color: var(--lt-t4); }
[data-theme="light"] .search-box input:focus {
    background: var(--lt-l3);
    border-color: #3b82f6;
}
[data-theme="light"] .search-box i { color: var(--lt-t4); }

/* Router cards — L3 surface */
[data-theme="light"] .router-card {
    background: var(--lt-l3) !important;
    border: 1px solid var(--lt-l3-border) !important;
    box-shadow: var(--lt-l3-shadow);
}
[data-theme="light"] .router-card:hover {
    background: #f0f5ff !important;
    border-color: rgba(59,130,246,0.5) !important;
    box-shadow: 0 8px 24px rgba(59,130,246,0.12) !important;
}
[data-theme="light"] .router-card.active-card {
    background: rgba(59,130,246,0.06) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.25) !important;
}
[data-theme="light"] .router-card.error-card {
    background: rgba(239,68,68,0.04) !important;
    border-color: rgba(239,68,68,0.35) !important;
}
[data-theme="light"] .router-name { color: var(--lt-t1) !important; }
[data-theme="light"] .router-host { color: var(--lt-t3) !important; }
[data-theme="light"] .router-note { color: var(--lt-t4) !important; }
/* Add card (dashed) */
[data-theme="light"] .add-card {
    background: rgba(0,0,0,0.02) !important;
    border-color: var(--lt-l3-border) !important;
    color: var(--lt-t4) !important;
}
[data-theme="light"] .add-card:hover {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
    background: rgba(59,130,246,0.05) !important;
}
/* Modal — L1 surface */
[data-theme="light"] .modal {
    background: var(--lt-l1) !important;
    border: 1px solid var(--lt-l3-border) !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.18) !important;
}
[data-theme="light"] .modal-overlay {
    background: rgba(15,23,42,0.5) !important;
}
/* Sidebar logout button */
[data-theme="light"] .sidebar-logout-btn {
    color: var(--lt-t3) !important;
}
[data-theme="light"] .sidebar-logout-btn:hover {
    color: var(--lt-t1) !important;
    background: rgba(0,0,0,0.05) !important;
}

/* ── 17. Dashboard View ── */
/* Cards: sc-dark, chart-card, rev-panel, health-item */
[data-theme="light"] .sc-dark {
    background: var(--lt-l3);
    border-color: var(--lt-l3-border);
    box-shadow: var(--lt-l3-shadow);
}
[data-theme="light"] .sc { border-color: var(--lt-l3-border); }
[data-theme="light"] .chart-card {
    background: var(--lt-l3);
    border-color: var(--lt-l3-border);
    box-shadow: var(--lt-l3-shadow);
}
[data-theme="light"] .rev-panel {
    background: var(--lt-l3);
    border-color: var(--lt-l3-border);
    box-shadow: var(--lt-l3-shadow);
}
[data-theme="light"] .health-item {
    background: var(--lt-l4);
    border-color: var(--lt-l1-border);
}
/* Text: semua warna terang → gelap */
[data-theme="light"] .rh-name      { color: var(--lt-t1); }
[data-theme="light"] .sc-number    { color: var(--lt-t1); }
[data-theme="light"] .sc-sub       { color: var(--lt-t4); }
[data-theme="light"] .chart-title  { color: var(--lt-t1); }
[data-theme="light"] .rev-amount   { color: var(--lt-t1); }
[data-theme="light"] .rev-row-val  { color: var(--lt-t2); }
[data-theme="light"] .rev-row-label { color: var(--lt-t3); }
[data-theme="light"] .health-item-val { color: var(--lt-t1); }
[data-theme="light"] .health-item-label { color: var(--lt-t3); }
/* Dividers & misc */
[data-theme="light"] .rev-row    { border-top-color: var(--lt-l1-border); }
[data-theme="light"] .period-tabs { background: var(--lt-l4); }
[data-theme="light"] .period-tab  { color: var(--lt-t3); }
[data-theme="light"] .progress-bar { background: var(--lt-l4); }
/* Winbox/Live buttons */
[data-theme="light"] .rh-btn-winbox {
    background: var(--lt-l4);
    border-color: var(--lt-l4-border);
    color: var(--lt-t3);
}
[data-theme="light"] .rh-btn-winbox:hover {
    background: #dde7f0;
    color: var(--lt-t1);
}
/* Inline: Revenue label span dengan color:#f1f5f9 */
[data-theme="light"] .rev-panel [style*="color:#f1f5f9"],
[data-theme="light"] .rev-panel [style*="color: #f1f5f9"] { color: var(--lt-t1) !important; }

/* ── 18. Hotspot View ── */
/* Tab bar */
[data-theme="light"] .hs-tabs {
    background: var(--lt-l4);
    border-color: var(--lt-l1-border);
}
[data-theme="light"] .hs-tab { color: var(--lt-t3); }
/* Cards menggunakan var(--glass-bg) → sudah di-override via variable */
/* Tapi heading di dalamnya masih putih */
[data-theme="light"] .table-card h3,
[data-theme="light"] .add-user-form h3 { color: var(--lt-t1); }
[data-theme="light"] .iface-name { color: var(--lt-t1); }
[data-theme="light"] .iface-row span:last-child { color: var(--lt-t2); }
[data-theme="light"] .iface-row { color: var(--lt-t3); }
/* Table */
[data-theme="light"] .data-table th {
    background: var(--lt-l4);
    color: var(--lt-t3);
}
[data-theme="light"] .data-table td {
    color: var(--lt-t2);
    border-top-color: var(--lt-l1-border);
}
[data-theme="light"] .data-table tr:hover td { background: rgba(59,130,246,0.04); }
/* Form inputs di hotspot */
[data-theme="light"] .form-row input,
[data-theme="light"] .form-row select {
    background: var(--lt-l4);
    border-color: var(--lt-l4-border);
    color: var(--lt-t1);
}
[data-theme="light"] .form-row label { color: var(--lt-t3); }

/* ── 19. General: Inline style override — inputs/selects pasti tidak boleh putih ── */
/* Semua input & select dengan inline color putih/terang → paksa gelap */
[data-theme="light"] input[style*="color:white"],
[data-theme="light"] input[style*="color: white"] { color: var(--lt-t1) !important; }
[data-theme="light"] input[style*="color:#f8fafc"],
[data-theme="light"] input[style*="color: #f8fafc"],
[data-theme="light"] input[style*="color:#e2e8f0"],
[data-theme="light"] input[style*="color: #e2e8f0"],
[data-theme="light"] input[style*="color:#f1f5f9"],
[data-theme="light"] input[style*="color: #f1f5f9"] { color: var(--lt-t1) !important; }
[data-theme="light"] select[style*="color:white"],
[data-theme="light"] select[style*="color: white"],
[data-theme="light"] select[style*="color:#f8fafc"],
[data-theme="light"] select[style*="color:#e2e8f0"],
[data-theme="light"] select[style*="color:#f1f5f9"] { color: var(--lt-t1) !important; }
/* Heading (h3, h2) dengan warna terang → gelap */
[data-theme="light"] h3[style*="color:#f8fafc"],
[data-theme="light"] h3[style*="color: #f8fafc"],
[data-theme="light"] h3[style*="color:#f1f5f9"],
[data-theme="light"] h3[style*="color: #f1f5f9"] { color: var(--lt-t1) !important; }
[data-theme="light"] h2[style*="color:#f8fafc"],
[data-theme="light"] h2[style*="color: #f8fafc"],
[data-theme="light"] h2[style*="color:#f1f5f9"] { color: var(--lt-t1) !important; }
/* Background glass di inline styles: override ke L3 */
[data-theme="light"] .page-content [style*="rgba(255,255,255,0.04)"],
[data-theme="light"] .page-content [style*="rgba(255, 255, 255, 0.04)"],
[data-theme="light"] .page-content [style*="rgba(255,255,255,0.03)"],
[data-theme="light"] .page-content [style*="rgba(255, 255, 255, 0.03)"] {
    background: var(--lt-l3) !important;
}
/* Border rgba putih → border abu gelap */
[data-theme="light"] .page-content [style*="border:1px solid rgba(255,255,255"],
[data-theme="light"] .page-content [style*="border: 1px solid rgba(255,255,255"] {
    border-color: var(--lt-l3-border) !important;
}

/* ── 20. Modal (router page & hotspot) ── */
[data-theme="light"] .modal-content,
[data-theme="light"] .modal-box {
    background: var(--lt-l1);
    border-color: var(--lt-l3-border);
}
/* Input & select di dalam modal dengan inline color */
[data-theme="light"] .modal input[style],
[data-theme="light"] .modal select[style] { color: var(--lt-t1) !important; }
[data-theme="light"] .modal h3,
[data-theme="light"] .modal h2,
[data-theme="light"] .modal p { color: var(--lt-t2); }

/* ══════════════════════════════════════════════════════
   COMPREHENSIVE VIEW-SPECIFIC OVERRIDES
   Semua class yang menggunakan warna terang/putih
   di dark theme, diubah jadi gelap di light theme
   ══════════════════════════════════════════════════════ */

/* ── 21. Tables — semua view ── */
[data-theme="light"] .data-table th {
    background: var(--lt-l4);
    color: var(--lt-t3);
    border-bottom: 1px solid var(--lt-l3-border);
}
[data-theme="light"] .data-table td,
[data-theme="light"] .cust-table td,
[data-theme="light"] .user-table td,
[data-theme="light"] .hist-table td,
[data-theme="light"] .voucher-table td {
    color: var(--lt-t2);
    border-color: var(--lt-l1-border);
}
[data-theme="light"] .data-table tr:hover td,
[data-theme="light"] .cust-table tr:hover td,
[data-theme="light"] .user-table tr:hover td,
[data-theme="light"] .voucher-table tr:hover td { background: rgba(59,130,246,0.04); }

/* ── 22. Forms & Inputs — semua view ── */
/* Class-based inputs */
[data-theme="light"] .search-input,
[data-theme="light"] .form-input {
    background: var(--lt-l4);
    border-color: var(--lt-l4-border);
    color: var(--lt-t1);
}
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
    background: var(--lt-l4);
    border-color: var(--lt-l4-border);
    color: var(--lt-t1);
}
[data-theme="light"] .filter-bar .fg select,
[data-theme="light"] .filter-bar .fg input {
    background: var(--lt-l4);
    border-color: var(--lt-l4-border);
    color: var(--lt-t1);
}
[data-theme="light"] .router-search-wrap input {
    background: var(--lt-l4);
    border-color: var(--lt-l4-border);
    color: var(--lt-t1);
}
[data-theme="light"] .stepper input { color: var(--lt-t1); }
[data-theme="light"] .stepper button:hover { color: var(--lt-t1); }
/* Textarea dengan background dark hardcoded */
[data-theme="light"] textarea[style*="background:#0f172a"],
[data-theme="light"] textarea[style*="background: #0f172a"] {
    background: var(--lt-l4) !important;
    border-color: var(--lt-l4-border) !important;
    color: var(--lt-t2) !important;
}
/* Select dengan background dark hardcoded (misal rgba(30,41,59)) */
[data-theme="light"] select[style*="rgba(30,41,59"],
[data-theme="light"] select[style*="rgba(30, 41, 59"] {
    background: var(--lt-l4) !important;
    border-color: var(--lt-l4-border) !important;
    color: var(--lt-t1) !important;
}

/* ── 23. Modal & Card Headings — semua view ── */
[data-theme="light"] .modal-title     { color: var(--lt-t1); }
[data-theme="light"] .modal-box h4    { color: var(--lt-t1); }
[data-theme="light"] .modal-box h3    { color: var(--lt-t1); }
[data-theme="light"] .settings-card h3 { color: var(--lt-t1); }
[data-theme="light"] .gen-form h3     { color: var(--lt-t1); }

/* ── 24. Settings views (settings & whatsapp) ── */
[data-theme="light"] .settings-card {
    background: var(--lt-l3);
    border-color: var(--lt-l3-border);
    box-shadow: var(--lt-l3-shadow);
}
[data-theme="light"] .info-row span:last-child { color: var(--lt-t1); }
[data-theme="light"] .info-row { border-color: var(--lt-l1-border); }

/* ── 25. Vouchers ── */
[data-theme="light"] .voucher-table th { background: var(--lt-l4); color: var(--lt-t3); }
[data-theme="light"] .pw-toggle        { color: var(--lt-t3); }
[data-theme="light"] .pw-toggle:hover  { color: var(--lt-t1); }

/* ── 26. Customers & Customer-show ── */
[data-theme="light"] .info-item span   { color: var(--lt-t2); }
[data-theme="light"] .btn-back         { color: var(--lt-t3); }
[data-theme="light"] .btn-back:hover   { color: var(--lt-t1); background: rgba(0,0,0,0.05); }
[data-theme="light"] .pagination-wrap a:hover {
    color: var(--lt-t1);
    background: rgba(0,0,0,0.05);
}

/* ── 27. Users ── */
[data-theme="light"] .router-pagination .rp-info span { color: var(--lt-t2); }
[data-theme="light"] .rp-btn:hover:not(:disabled)     { color: var(--lt-t1); }

/* ── 28. Reports (lokal & global) ── */
[data-theme="light"] .stat-value  { color: var(--lt-t1); }
/* .chart-title sudah di-cover di section dashboard */

/* ── 29. Dashboard — sc-tag & sc-icon dengan inline rgba putih ── */
/* sc-tag: selalu pakai !important untuk kalahkan inline style rgba(255,255,255,...) */
[data-theme="light"] .sc-dark .sc-tag { color: var(--lt-t3) !important; }
/* sc-icon: hanya yang pakai inline rgba(255,255,255) — bukan si-blue/si-green dll */
[data-theme="light"] .sc-icon[style*="rgba(255,255,255"],
[data-theme="light"] .sc-icon[style*="rgba(255, 255, 255"] {
    background: var(--lt-l4) !important;
    color: var(--lt-t3) !important;
}

/* ── 30. Global Dashboard ── */
/* sc-badge putih di atas card terang */
[data-theme="light"] .sc-badge[style*="rgba(255,255,255"] {
    background: var(--lt-l4) !important;
    color: var(--lt-t2) !important;
}
/* h1 inline color terang */
[data-theme="light"] h1[style*="color:#f1f5f9"],
[data-theme="light"] h1[style*="color: #f1f5f9"] { color: var(--lt-t1) !important; }

/* ── 31. Global Profiles ── */
[data-theme="light"] .modal-box { background: var(--lt-l1); border-color: var(--lt-l3-border); }
/* button glass putih di profiles router list */
[data-theme="light"] button[style*="rgba(255,255,255,0.03)"] {
    background: var(--lt-l4) !important;
    border-color: var(--lt-l4-border) !important;
    color: var(--lt-t2) !important;
}

/* ── 32. Inline style= — UNIVERSAL coverage ── */
/* Semua elemen (span, div, strong, label, td, p) dengan color terang → gelap */
[data-theme="light"] span[style*="color:#e2e8f0"],
[data-theme="light"] span[style*="color: #e2e8f0"]   { color: var(--lt-t2) !important; }
[data-theme="light"] strong[style*="color:#e2e8f0"],
[data-theme="light"] strong[style*="color: #e2e8f0"]  { color: var(--lt-t2) !important; }
[data-theme="light"] div[style*="color:#e2e8f0"],
[data-theme="light"] div[style*="color: #e2e8f0"]     { color: var(--lt-t2) !important; }
[data-theme="light"] td[style*="color:#e2e8f0"],
[data-theme="light"] td[style*="color: #e2e8f0"]      { color: var(--lt-t2) !important; }
[data-theme="light"] label[style*="color:#e2e8f0"],
[data-theme="light"] label[style*="color: #e2e8f0"]   { color: var(--lt-t2) !important; }
[data-theme="light"] p[style*="color:#e2e8f0"],
[data-theme="light"] p[style*="color: #e2e8f0"]       { color: var(--lt-t2) !important; }

[data-theme="light"] span[style*="color:#f1f5f9"],
[data-theme="light"] span[style*="color: #f1f5f9"]    { color: var(--lt-t1) !important; }
[data-theme="light"] div[style*="color:#f1f5f9"],
[data-theme="light"] div[style*="color: #f1f5f9"]     { color: var(--lt-t1) !important; }
[data-theme="light"] h3[style*="color:#f1f5f9"],
[data-theme="light"] h3[style*="color: #f1f5f9"]      { color: var(--lt-t1) !important; }

[data-theme="light"] div[style*="color:rgba(255,255,255"],
[data-theme="light"] span[style*="color:rgba(255,255,255"] { color: var(--lt-t3) !important; }

/* Inline h3 color:white di berbagai modal/card heading */
[data-theme="light"] h3[style*="color:white"],
[data-theme="light"] h3[style*="color: white"] { color: var(--lt-t1) !important; }
[data-theme="light"] h2[style*="color:white"],
[data-theme="light"] h2[style*="color: white"] { color: var(--lt-t1) !important; }
[data-theme="light"] div[style*="color:white"] { color: var(--lt-t1) !important; }

/* Inline color:#f8fafc */
[data-theme="light"] span[style*="color:#f8fafc"],
[data-theme="light"] div[style*="color:#f8fafc"],
[data-theme="light"] p[style*="color:#f8fafc"]  { color: var(--lt-t1) !important; }

/* ── 33. Border rgba putih — universal ── */
/* Label/card dengan border inline rgba putih → border gelap */
[data-theme="light"] label[style*="border-color: rgba(255,255,255"],
[data-theme="light"] label[style*="border-color:rgba(255,255,255"] {
    border-color: var(--lt-l3-border) !important;
}
/* Inline background rgba(255,255,255,0.05) dan sejenisnya di page-content */
[data-theme="light"] .page-content input[style*="rgba(255,255,255,0.05)"],
[data-theme="light"] .page-content input[style*="rgba(255, 255, 255, 0.05)"] {
    background: var(--lt-l4) !important;
    border-color: var(--lt-l4-border) !important;
}
[data-theme="light"] .page-content input[style*="rgba(255,255,255,0.12)"],
[data-theme="light"] .page-content input[style*="rgba(255, 255, 255, 0.12)"] {
    background: var(--lt-l4) !important;
    border-color: var(--lt-l4-border) !important;
}
/* Sidebar router section inline text */
[data-theme="light"] .page-content span[style*="color:#e2e8f0"] { color: var(--lt-t2) !important; }

/* ── 34. Card containers yang belum di-cover ── */
/* .gen-form (vouchers), .table-card (vouchers, reports), .chart-card, .add-user-form, dll */
[data-theme="light"] .gen-form,
[data-theme="light"] .table-card,
[data-theme="light"] .add-user-form,
[data-theme="light"] .iface-card,
[data-theme="light"] .rev-panel,
[data-theme="light"] .chart-card {
    background: var(--lt-l3);
    border-color: var(--lt-l3-border);
    box-shadow: var(--lt-l3-shadow);
}

/* ── 35. Vouchers — form input classes khusus (.fg, .form-list-input) ── */
[data-theme="light"] .fg input,
[data-theme="light"] .fg select,
[data-theme="light"] .fg textarea {
    background: var(--lt-l4);
    border-color: var(--lt-l4-border);
    color: var(--lt-t1);
}
[data-theme="light"] .fg label { color: var(--lt-t3); }
[data-theme="light"] .form-list-input input,
[data-theme="light"] .form-list-input select {
    background: var(--lt-l4);
    border-color: var(--lt-l4-border);
    color: var(--lt-t1);
}
/* Stepper container */
[data-theme="light"] .stepper {
    background: var(--lt-l4);
    border-color: var(--lt-l4-border);
}
[data-theme="light"] .stepper button { color: var(--lt-t3); }
/* Form tabs selector */
[data-theme="light"] .form-tabs {
    background: var(--lt-l4);
    border-color: var(--lt-l1-border);
}
[data-theme="light"] .form-tab { color: var(--lt-t3); }
[data-theme="light"] .form-tab.active { color: var(--primary); }
/* Form list row dividers */
[data-theme="light"] .form-list-row {
    border-bottom-color: var(--lt-l1-border);
}
[data-theme="light"] .form-list-label { color: var(--lt-t3); }

/* ── 36. Modal-box (hardcoded background:#1e293b) ── */
/* Customers, Users, Global */
[data-theme="light"] .modal-box {
    background: var(--lt-l1);
    border-color: var(--lt-l3-border);
    box-shadow: 0 24px 60px rgba(0,0,0,0.12);
}
[data-theme="light"] .modal-box h4,
[data-theme="light"] .modal-box h3 { color: var(--lt-t1); }
[data-theme="light"] .modal-box .form-label,
[data-theme="light"] .modal-box label { color: var(--lt-t3); }
/* .btn-cancel di dalam modal */
[data-theme="light"] .btn-cancel {
    border-color: var(--lt-l4-border);
    color: var(--lt-t3);
}
[data-theme="light"] .btn-cancel:hover {
    background: var(--lt-l4);
    color: var(--lt-t1);
}

/* ── 37. Table header borders & dividers ── */
[data-theme="light"] .cust-table th,
[data-theme="light"] .user-table th,
[data-theme="light"] .voucher-table th,
[data-theme="light"] .data-table th {
    border-color: var(--lt-l1-border);
}
/* Reports: profile legend divider */
[data-theme="light"] .prof-legend-row + .prof-legend-row {
    border-top-color: var(--lt-l1-border);
}
/* Pagination border */
[data-theme="light"] .pagination-wrap a,
[data-theme="light"] .pagination-wrap span:not(.active) {
    border-color: var(--lt-l3-border);
    color: var(--lt-t3);
}

/* ── 38. Reports — filter bar inline button ── */
/* CSV/Excel export buttons dengan glass bg inline */
[data-theme="light"] button[style*="rgba(255,255,255,0.05)"] {
    background: var(--lt-l4) !important;
    border-color: var(--lt-l4-border) !important;
    color: var(--lt-t3) !important;
}
[data-theme="light"] a[style*="rgba(255,255,255,0.05)"] {
    background: var(--lt-l4) !important;
    border-color: var(--lt-l4-border) !important;
}
/* Semua background rgba(255,255,255,0.05-0.08) di inline style → L4 */
[data-theme="light"] .page-content [style*="rgba(255,255,255,0.05)"],
[data-theme="light"] .page-content [style*="rgba(255, 255, 255, 0.05)"],
[data-theme="light"] .page-content [style*="rgba(255,255,255,0.06)"],
[data-theme="light"] .page-content [style*="rgba(255, 255, 255, 0.06)"],
[data-theme="light"] .page-content [style*="rgba(255,255,255,0.08)"],
[data-theme="light"] .page-content [style*="rgba(255, 255, 255, 0.08)"] {
    background: var(--lt-l4) !important;
    border-color: var(--lt-l3-border) !important;
}

/* ── 39. Theme Toggle Switch ── */
.theme-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}
.theme-switch input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.ts-track {
    width: 46px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    position: relative;
    transition: background .25s, border-color .25s;
    flex-shrink: 0;
}
.ts-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    transition: left .25s cubic-bezier(.4,0,.2,1), background .25s;
}
.ts-moon { color: #94a3b8; }
.ts-sun  { color: #facc15; display: none; }
.theme-switch input:checked + .ts-track {
    background: rgba(251,191,36,0.18);
    border-color: rgba(251,191,36,0.35);
}
.theme-switch input:checked + .ts-track .ts-thumb {
    left: 24px;
    background: #fbbf24;
}
.theme-switch input:checked + .ts-track .ts-moon { display: none; }
.theme-switch input:checked + .ts-track .ts-sun  { display: block; }
[data-theme="light"] .ts-track {
    background: var(--lt-l4);
    border-color: var(--lt-l4-border);
}
[data-theme="light"] .ts-thumb { background: #7990a3; }
/* Toggle baris atas halaman portal */
.theme-toggle-float {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}