/* =====================================================
   NUSANTARA GAMES — LIGHT THEME (ADMIN)
   Override HANYA aktif saat <html data-theme="light">.
   Tema default (gelap) tidak diubah.
   ===================================================== */

/* =====================================================
   CSS VARIABLE ADMIN (Fase 6A — core layout)
   Nilai dark = warna asli admin.css -> mode gelap identik.
   Dipakai: sidebar, navbar/header, layout, container, card/panel.
   ===================================================== */
:root{
    --ng-admin-surface:#111827;   /* sidebar, header, card, panel */
    --ng-admin-hover:#1f2937;     /* menu hover bg */
    --ng-admin-accent:#ffd43b;    /* aksen (menu hover, card border-left) */
    --ng-admin-info:#38bdf8;      /* label user */
    --ng-admin-muted:#9ca3af;     /* teks sekunder card */
    /* Fase 6B-1: form field */
    --ng-admin-field:#1f2937;         /* bg input/select */
    --ng-admin-field-border:#334155;  /* border field */
    --ng-admin-field-text:#ffffff;    /* teks field */
    --ng-admin-field-focus:#38bdf8;   /* border saat focus */
    /* Fase 6B-2: field form lain (palet berbeda) */
    --ng-admin-field-deep:#0b1328;      /* harga field bg */
    --ng-admin-field-border-2:#374151;  /* harga field border */
    --ng-admin-field-focus-ok:#22c55e;  /* harga focus (hijau) */
    --ng-admin-field-focus-2:#2563eb;   /* laporan filter focus */
    --ng-admin-placeholder:#94a3b8;     /* placeholder filter */
    --ng-admin-filter-box:#1e293b;      /* container filter (bulk) */
    /* Fase 6C-1: table core */
    --ng-admin-th:#1e293b;                        /* bg header */
    --ng-admin-th-text:#ffd43b;                   /* teks header */
    --ng-admin-td-text:#e5e7eb;                   /* teks sel */
    --ng-admin-row-hover:#0f172a;                 /* baris hover */
    --ng-admin-table-border:rgba(255,255,255,.08);/* garis sel */
    /* Fase 6C-2: tabel tambahan (palet berbeda) */
    --ng-admin-thead:#1f2937;                       /* thead harga/laporan */
    --ng-admin-thead-2:#11162b;                     /* thead bulk (page belum bertema) */
    --ng-admin-th-text-2:#facc15;                   /* teks header (kuning alt) */
    --ng-admin-table-bg:#1a1f3a;                    /* bg table bulk */
    --ng-admin-table-line-2:#333333;                /* garis table bulk */
    --ng-admin-table-border-soft:rgba(255,255,255,.05);
    --ng-admin-row-hover-soft:rgba(255,255,255,.03);
    --ng-admin-row-hover-2:#18253b;                 /* hover laporan */
    /* Fase 6C-3: status semantic (dark = warna asli; hue dipertahankan) */
    --ng-success:#22c55e;   /* sukses / paid / active -> hijau */
    --ng-danger:#ef4444;    /* gagal / failed -> merah */
    --ng-warning:#facc15;   /* pending / menunggu -> kuning */
    --ng-info:#3b82f6;      /* proses / paid-badge -> biru */
    /* Fase 6D: button/action semantic (dark = warna asli tombol; DIPISAH dari status) */
    --ng-btn-success:#22c55e;         /* tombol tambah/simpan -> hijau */
    --ng-btn-success-hover:#16a34a;   /* hover tombol success */
    --ng-btn-primary:#3b82f6;         /* tombol aksi utama/edit -> biru */
    --ng-btn-danger:#ef4444;          /* tombol hapus -> merah */
    --ng-btn-secondary:#374151;       /* tombol kembali/netral -> abu */
}
html[data-theme="light"]{
    --ng-admin-surface:#ffffff;
    --ng-admin-hover:#f1f4f9;
    --ng-admin-accent:#d97706;
    --ng-admin-info:#0284c7;
    --ng-admin-muted:#5b6b7f;
    --ng-admin-field:#f1f4f9;
    --ng-admin-field-border:#dbe1ea;
    --ng-admin-field-text:#1a2233;
    --ng-admin-field-focus:#2563eb;
    --ng-admin-field-deep:#f1f4f9;
    --ng-admin-field-border-2:#dbe1ea;
    --ng-admin-field-focus-ok:#16a34a;
    --ng-admin-field-focus-2:#2563eb;
    --ng-admin-placeholder:#94a3b8;
    --ng-admin-filter-box:#eef2f8;
    --ng-admin-th:#eef2f8;
    --ng-admin-th-text:#b26a00;
    --ng-admin-td-text:#334155;
    --ng-admin-row-hover:#f1f4f9;
    --ng-admin-table-border:rgba(0,0,0,.08);
    --ng-admin-thead:#eef2f8;
    --ng-admin-thead-2:#11162b;                   /* bulk: pertahankan gelap (page belum bertema) */
    --ng-admin-th-text-2:#b26a00;
    --ng-admin-table-bg:#1a1f3a;                  /* bulk: pertahankan gelap */
    --ng-admin-table-line-2:#333333;              /* bulk: pertahankan gelap */
    --ng-admin-table-border-soft:rgba(0,0,0,.06);
    --ng-admin-row-hover-soft:rgba(0,0,0,.03);
    --ng-admin-row-hover-2:#f1f4f9;
    /* Fase 6C-3: status semantic (light = hue sama, kontras utk latar terang) */
    --ng-success:#16a34a;   /* sukses / paid / active -> hijau */
    --ng-danger:#dc2626;    /* gagal / failed -> merah */
    --ng-warning:#ca8a04;   /* pending / menunggu -> kuning tua */
    --ng-info:#2563eb;      /* proses / paid-badge -> biru */
    /* Fase 6D: button/action semantic (light = hue sama, kontras utk latar terang) */
    --ng-btn-success:#16a34a;
    --ng-btn-success-hover:#15803d;
    --ng-btn-primary:#2563eb;
    --ng-btn-danger:#dc2626;
    --ng-btn-secondary:#475569;
}

/* ---------- Tombol toggle (kedua tema) ---------- */
.ng-theme-toggle{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:9999;
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-size:20px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#1f2937;
    color:#ffd43b;
    box-shadow:0 6px 20px rgba(0,0,0,.35);
    transition:transform .2s ease, background .2s ease;
}
.ng-theme-toggle:hover{ transform:scale(1.08); }
html[data-theme="light"] .ng-theme-toggle{
    background:#ffffff;
    color:#d97706;
    box-shadow:0 6px 20px rgba(0,0,0,.15);
}

/* ---------- Variabel harga.css & sejenis ---------- */
html[data-theme="light"]{
    --bg:#eef1f7;
    --card:#ffffff;
    --card2:#f1f4f9;
    --text:#1a2233;
    --muted:#5b6b7f;
    --border:rgba(0,0,0,.08);
}

/* ---------- Dasar ---------- */
html[data-theme="light"] body{ background:#eef1f7; color:#1a2233; }
html[data-theme="light"] .main{ background:#eef1f7; }

/* ---------- Sidebar ---------- */
html[data-theme="light"] .sidebar{
    background:#ffffff;
    border-right:1px solid rgba(0,0,0,.08);
}
html[data-theme="light"] .menu a{ color:#1a2233; }
html[data-theme="light"] .menu a:hover{ background:#f1f4f9; color:#d97706; }
html[data-theme="light"] .dropdown-content{ background:#f6f8fc; }
html[data-theme="light"] .dropdown-content a{ color:#475569; }
html[data-theme="light"] .dropdown-content a:hover{ background:#eef2f7; color:#d97706; }
html[data-theme="light"] .sidebar a{ color:#1a2233; }
html[data-theme="light"] .sidebar a:hover{ background:#f1f4f9; }

/* ---------- Header ---------- */
html[data-theme="light"] .header{
    background:#ffffff;
    border-bottom:1px solid rgba(0,0,0,.08);
}
html[data-theme="light"] .header h2{ color:#1a2233; }
html[data-theme="light"] .user{ color:#0284c7; }

/* ---------- Kartu statistik ---------- */
html[data-theme="light"] .card{
    background:#ffffff;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 4px 14px rgba(0,0,0,.05);
}
html[data-theme="light"] .card h3{ color:#5b6b7f; }
html[data-theme="light"] .card h1{ color:#1a2233; }

/* ---------- Kontainer produk / transaksi ---------- */
html[data-theme="light"] #transaksi-content,
html[data-theme="light"] #produk-content{
    background:#ffffff;
    box-shadow:0 6px 20px rgba(0,0,0,.06);
}
html[data-theme="light"] #transaksi-content h2,
html[data-theme="light"] #produk-content h2{ color:#1a2233; }
html[data-theme="light"] #transaksi-content table th,
html[data-theme="light"] #produk-content table th{ background:#eef2f8; color:#b26a00; }
html[data-theme="light"] #transaksi-content table td,
html[data-theme="light"] #produk-content table td{ color:#334155; border-bottom:1px solid rgba(0,0,0,.08); }
html[data-theme="light"] #transaksi-content table tr:hover,
html[data-theme="light"] #produk-content table tr:hover{ background:#f1f4f9; }

/* ---------- Form & tabel (tambah_produk.css) ---------- */
html[data-theme="light"] .header h2{ color:#1a2233; }
html[data-theme="light"] .form-container{
    background:#ffffff;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}
html[data-theme="light"] .form-container h2{ color:#1a2233; }
html[data-theme="light"] .form-group label{ color:#334155; }
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select{
    background:#f1f4f9;
    color:#1a2233;
    border:1px solid #dbe1ea;
}
html[data-theme="light"] .table-card{
    background:#ffffff;
    border:1px solid rgba(0,0,0,.08);
}
html[data-theme="light"] .table-header h2{ color:#1a2233; }
html[data-theme="light"] #searchProduk,
html[data-theme="light"] #searchApi,
html[data-theme="light"] #searchKategori,
html[data-theme="light"] #searchAdmin,
html[data-theme="light"] #searchGagal{
    background:#f1f4f9;
    color:#1a2233;
    border:1px solid #dbe1ea;
}
html[data-theme="light"] .produk-table th{ background:#eef2f8; color:#b26a00; }
html[data-theme="light"] .produk-table td{ color:#334155; border-bottom:1px solid rgba(0,0,0,.08); }
html[data-theme="light"] .produk-table tr:hover{ background:#f1f4f9; }
html[data-theme="light"] .alert-success{ background:#dcfce7; color:#166534; }
html[data-theme="light"] .alert-error{ background:#fee2e2; color:#991b1b; }

/* ---------- Login ---------- */
html[data-theme="light"] .login-box{
    background:#ffffff;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}
html[data-theme="light"] .login-box h1{ color:#d97706; }
html[data-theme="light"] .login-box p{ color:#5b6b7f; }
html[data-theme="light"] .login-box input{ background:#f1f4f9; color:#1a2233; border:1px solid #dbe1ea; }

/* ---------- harga.css literal ---------- */
html[data-theme="light"] .table-card{ background:#ffffff; }
html[data-theme="light"] .modern-table thead,
html[data-theme="light"] .modern-table th{ background:#eef2f8; color:#b26a00; }
html[data-theme="light"] .modern-table td{ border-bottom:1px solid rgba(0,0,0,.06); }
html[data-theme="light"] .table-row:hover{ background:#f1f4f9; }
html[data-theme="light"] .input,
html[data-theme="light"] .select{ background:#f1f4f9; color:#1a2233; border:1px solid #dbe1ea; }
html[data-theme="light"] .top-title h2,
html[data-theme="light"] .page-title{ color:#1a2233; }
html[data-theme="light"] .price{ color:#b26a00; }
html[data-theme="light"] .product-id{ color:#5b6b7f; }

/* ---------- laporan_harian.css ---------- */
html[data-theme="light"] .lpage-wrapper{ color:#1a2233; }
html[data-theme="light"] .lheader-left h2{ color:#1a2233; }
html[data-theme="light"] .lheader-left p,
html[data-theme="light"] .lstat-card span{ color:#5b6b7f; }
html[data-theme="light"] .lstat-card{ background:#ffffff; border:1px solid rgba(0,0,0,.06); }
html[data-theme="light"] .lstat-card h2{ color:#1a2233; }
html[data-theme="light"] .ltoolbar input{ background:#f1f4f9; border:1px solid #dbe1ea; color:#1a2233; }
html[data-theme="light"] .ltable-card{ background:#ffffff; }
html[data-theme="light"] .lmodern-table thead,
html[data-theme="light"] .lmodern-table th{ background:#eef2f8; color:#b26a00; }
html[data-theme="light"] .lmodern-table td{ color:#334155; border-bottom:1px solid rgba(0,0,0,.06); }
html[data-theme="light"] .lmodern-table tbody tr:hover{ background:#f1f4f9; }
html[data-theme="light"] .lempty-data{ color:#5b6b7f; }

/* ---------- transaksi_sukses.css ---------- */
html[data-theme="light"] .stat-card{ background:#ffffff; border:1px solid rgba(0,0,0,.06); color:#1a2233; }
html[data-theme="light"] .stat-card h2,
html[data-theme="light"] .stat-card h4{ color:#1a2233; }
html[data-theme="light"] .table-header input{ background:#f1f4f9; color:#1a2233; border:1px solid #dbe1ea; }
html[data-theme="light"] .page-header h2{ color:#1a2233; }

/* ---------- Tabel generik dalam panel ---------- */
html[data-theme="light"] #prosesTable th,
html[data-theme="light"] #gagalTable th,
html[data-theme="light"] #suksesTable th{ background:#eef2f8; color:#b26a00; }
html[data-theme="light"] #prosesTable td,
html[data-theme="light"] #gagalTable td,
html[data-theme="light"] #suksesTable td{ color:#334155; border-bottom:1px solid rgba(0,0,0,.08); }

/* =====================================================
   PERBAIKAN KETERBACAAN TEKS (LIGHT)
   Elemen teks yang sebelumnya putih agar tidak samar/hilang
   di atas latar terang. Tombol/badge (punya background warna
   sendiri) sengaja TIDAK disentuh.
   ===================================================== */

/* Teks umum di area konten */
html[data-theme="light"] .page-wrapper,
html[data-theme="light"] .lpage-wrapper,
html[data-theme="light"] .container,
html[data-theme="light"] .main-content{ color:#1a2233; }

html[data-theme="light"] .form-container h2,
html[data-theme="light"] .top-title h2,
html[data-theme="light"] .page-title,
html[data-theme="light"] .page-header h2,
html[data-theme="light"] h2.produk-title{ color:#1a2233; }

/* Label form selalu gelap (aman, label bukan tombol) */
html[data-theme="light"] label,
html[data-theme="light"] .fitem label,
html[data-theme="light"] .form-group label{ color:#334155; }

/* Sel tabel & judul kolom (aman, td/th bukan tombol) */
html[data-theme="light"] td{ color:#334155; }
html[data-theme="light"] th{ background:#eef2f8; color:#b26a00; }
html[data-theme="light"] table{ background:#ffffff; }
html[data-theme="light"] .modern-table td,
html[data-theme="light"] .lmodern-table td{ color:#334155; }

/* Input di panel bulk / filter */
html[data-theme="light"] .filter-box{ background:#eef2f8; }
html[data-theme="light"] .filter-box input,
html[data-theme="light"] .filter-box select,
html[data-theme="light"] .fitem input,
html[data-theme="light"] .fitem select,
html[data-theme="light"] input[type="number"]{
    background:#f1f4f9;
    color:#1a2233;
    border:1px solid #dbe1ea;
}

/* Placeholder agar tetap terbaca */
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{ color:#94a3b8; }

/* ============= Modal (SweetAlert2) mengikuti tema ============= */
html[data-theme="dark"] .swal2-popup{ background:#1b2233; color:#e8ebf5; }
html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container{ color:#e8ebf5; }
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea{ background:#0f1220; color:#e8ebf5; border-color:#2a3358; }
html[data-theme="light"] .swal2-popup{ background:#ffffff; color:#1a2233; }

/* =====================================================
   Fase 8D — payment_gateway.php & payment_monitor.php (LIGHT)
   Kedua halaman punya <style> inline (palet gelap hardcoded).
   Override HANYA aktif saat data-theme=light; mode gelap tetap identik.
   Selector html[data-theme=light] .pg-*/.pm-* menang secara specificity
   atas aturan inline satu-kelas, jadi tidak perlu menyentuh <style> inline.
   Token dipakai ulang: --ng-admin-* (permukaan/form/tabel), --ng-btn-* (tombol),
   status pill pakai tint terang (button != status).
   ===================================================== */

/* --- Teks umum & permukaan --- */
html[data-theme="light"] .pg-wrap,
html[data-theme="light"] .pm-wrap{ color:var(--ng-admin-field-text,#1a2233); }
html[data-theme="light"] .pg-hint,
html[data-theme="light"] .pg-lc,
html[data-theme="light"] .pg-wrap label,
html[data-theme="light"] .pg-wrap th,
html[data-theme="light"] .pm-wrap th,
html[data-theme="light"] .pm-wrap h2,
html[data-theme="light"] .pm-lbl,
html[data-theme="light"] .pm-card .l{ color:var(--ng-admin-muted,#5b6b7f); }
html[data-theme="light"] .pm-wrap a{ color:var(--ng-btn-primary,#2563eb); }

/* --- Tabel --- */
html[data-theme="light"] .pg-wrap th,
html[data-theme="light"] .pg-wrap td,
html[data-theme="light"] .pm-wrap th,
html[data-theme="light"] .pm-wrap td{ border-bottom-color:var(--ng-admin-table-border,rgba(0,0,0,.08)); }

/* --- Card / form / input / code block --- */
html[data-theme="light"] .pg-card,
html[data-theme="light"] .pm-card{ background:var(--ng-admin-surface,#fff); border-color:var(--ng-admin-field-border,#dbe1ea); }
html[data-theme="light"] .pg-wrap input,
html[data-theme="light"] .pg-wrap select,
html[data-theme="light"] .pm-wrap input,
html[data-theme="light"] .pm-wrap select{
    background:var(--ng-admin-field,#f1f4f9);
    border-color:var(--ng-admin-field-border,#dbe1ea);
    color:var(--ng-admin-field-text,#1a2233);
}
html[data-theme="light"] #pgTestResult{ border-color:var(--ng-admin-field-border,#dbe1ea); }
html[data-theme="light"] #pgTestResult pre,
html[data-theme="light"] .pm-wrap pre{
    background:var(--ng-admin-field,#f1f4f9);
    border-color:var(--ng-admin-field-border,#dbe1ea);
    color:var(--ng-admin-field-text,#1a2233);
}

/* --- Status pill (status success/danger/warning terpisah dari button) --- */
html[data-theme="light"] .pg-pill.ACTIVE,
html[data-theme="light"] .pm-pill.PAID{ background:#dcfce7; color:#0f7a4d; }
html[data-theme="light"] .pg-pill.INACTIVE,
html[data-theme="light"] .pm-pill.PENDING{ background:#fef3c7; color:#92600f; }
html[data-theme="light"] .pm-pill.FAILED{ background:#fee2e2; color:#b91c1c; }
html[data-theme="light"] .pm-pill.EXPIRED{ background:#eef2f8; color:#5b6b7f; }
html[data-theme="light"] .pm-rev{ background:#fef3c7; color:#92600f; }

/* --- Kartu ringkas status (aksen border pm) --- */
html[data-theme="light"] .pm-card.pending{ border-color:#e0b34d; }
html[data-theme="light"] .pm-card.paid{ border-color:#5bbd85; }
html[data-theme="light"] .pm-card.failed{ border-color:#e88a8a; }
html[data-theme="light"] .pm-card.review{ border-color:#e0a24d; }

/* --- Tombol aksi (pakai --ng-btn-*; berbeda dari warna status) --- */
html[data-theme="light"] .pg-edit,
html[data-theme="light"] .pg-pri,
html[data-theme="light"] .pm-pri{ background:var(--ng-btn-primary,#2563eb); color:#fff; }
html[data-theme="light"] .pg-act,
html[data-theme="light"] .pm-rec{ background:var(--ng-btn-success,#16a34a); color:#fff; }
html[data-theme="light"] .pg-del{ background:var(--ng-btn-danger,#dc2626); color:#fff; }
html[data-theme="light"] .pg-test,
html[data-theme="light"] .pg-dis,
html[data-theme="light"] .pm-clr,
html[data-theme="light"] .pm-csv{ background:var(--ng-btn-secondary,#475569); color:#fff; }
/* .pm-sim (Simulasikan) sengaja tetap amber -> jelas beda dari aksi lain */

/* --- Footer admin (dashboard) — token dipakai ulang; footer publik (css/footer.css) TIDAK tersentuh --- */
html[data-theme="light"] .admin-footer{
    background:var(--ng-admin-surface,#fff);
    color:var(--ng-admin-muted,#5b6b7f);
    border-top-color:var(--ng-admin-table-border,rgba(0,0,0,.08));
}

/* =====================================================
   Fase 8E — Kontras teks LIGHT payment_monitor (aksesibilitas)
   Muted default (#5b6b7f) terlalu terang untuk beberapa teks.
   Hanya menaikkan kegelapan warna teks di .pm-* & footer saat light.
   TIDAK menyentuh: dark mode, status pill (Pending/Paid/Failed),
   warna tombol, atau .pg-* (payment_gateway). Placeholder di-scope ke .pm-wrap.
   ===================================================== */

/* 1. Judul section "Payment Monitor" + angka summary -> nyaris hitam */
html[data-theme="light"] .pm-wrap h1,
html[data-theme="light"] .pm-card .n{ color:#0f172a; }

/* 2. Label summary card (PENDING/PAID/FAILED/NEEDS REVIEW/TOTAL) -> slate gelap */
html[data-theme="light"] .pm-card .l{ color:#475569; }

/* 3. Label form (needs_review, Dari, s/d) -> muted lebih gelap */
html[data-theme="light"] .pm-lbl,
html[data-theme="light"] .pm-filters label{ color:#334155; }

/* 4. Placeholder input tanggal & pencarian (scope pm saja) -> tidak terlalu pucat */
html[data-theme="light"] .pm-wrap input::placeholder{ color:#64748b; }

/* 5. Footer admin (copyright & version) -> kontras dinaikkan */
html[data-theme="light"] .admin-footer{ color:#475569; }