/* ============================================================
   MODE MALAM — penyesuaian tambahan (aktif: html[data-theme="dark"])
   Permukaan & teks utama sudah lewat token di variables.css.
   File ini hanya merapikan elemen ber-tint terang & detail UI.
============================================================ */

/* ── Ikon tombol toggle (matahari saat gelap) ── */
html[data-theme="dark"] .theme-toggle .theme-icon-dark  { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-light { display: inline; color: #fbbf24; }
html[data-theme="dark"] .theme-toggle { color: #fbbf24; }

/* ── Notifikasi: item belum dibaca (base, dipakai bareng Notification Center) ── */
html[data-theme="dark"] .notif-item.unread       { background: rgba(59,130,246,.14); }
html[data-theme="dark"] .notif-item.unread:hover { background: rgba(59,130,246,.20); }
html[data-theme="dark"] .notif-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
/* Redesign kartu — cuma popup dropdown navbar (lihat scoping sama di navbar.css) */
html[data-theme="dark"] .notif-dropdown .notif-item.unread { border-color: rgba(59,130,246,.3); }

/* ── Chip ikon ber-tint (sidebar/finance/navbar) jadi lebih kalem ── */
html[data-theme="dark"] .fn-head h1 i,
html[data-theme="dark"] .fn-stat-icon,
html[data-theme="dark"] .fn-help > summary .fn-help-ico,
html[data-theme="dark"] .notif-akun .notif-icon { background: rgba(59,130,246,.16); color: #93c5fd; }

/* ── Notifikasi: warna ikon-chip per tipe, versi gelap (7 tipe lain — akun sudah di atas) ── */
html[data-theme="dark"] .notif-stok     .notif-icon { background: rgba(239,68,68,.16);  color: #f87171; }
html[data-theme="dark"] .notif-finance  .notif-icon { background: rgba(34,197,94,.16);  color: #4ade80; }
html[data-theme="dark"] .notif-gudang   .notif-icon { background: rgba(234,179,8,.16);  color: #fbbf24; }
html[data-theme="dark"] .notif-produksi .notif-icon { background: rgba(99,102,241,.18); color: #a5b4fc; }
html[data-theme="dark"] .notif-bug      .notif-icon { background: rgba(219,39,119,.18); color: #f0abfc; }
html[data-theme="dark"] .notif-gaji     .notif-icon { background: rgba(13,148,136,.18); color: #5eead4; }
html[data-theme="dark"] .notif-permintaan_vendor .notif-icon { background: rgba(234,88,12,.16); color: #fb923c; }

/* ── Notifikasi: priority rail, dismiss, aksi inline, skeleton (versi gelap) ── */
html[data-theme="dark"] .notif-item.severity-info { border-left-color: #475569; }
html[data-theme="dark"] .notif-dropdown .notif-item.severity-info::before { background: #475569; }
html[data-theme="dark"] .notif-dismiss:hover { background: rgba(239,68,68,.18); color: #f87171; }
html[data-theme="dark"] .notif-act { background: var(--surface-2); }
html[data-theme="dark"] .notif-act-approve { color: #4ade80; }
html[data-theme="dark"] .notif-act-approve:hover:not(:disabled) { background: #16a34a; color: #fff; border-color: #16a34a; }
html[data-theme="dark"] .notif-act-reject { color: #f87171; }
html[data-theme="dark"] .notif-act-reject:hover:not(:disabled) { background: #dc2626; color: #fff; border-color: #dc2626; }
html[data-theme="dark"] .notif-urgent-dot { border-color: var(--surface); }
html[data-theme="dark"] .fn-stat.green  .fn-stat-icon { background: rgba(34,197,94,.16);  color: #4ade80; }
html[data-theme="dark"] .fn-stat.orange .fn-stat-icon { background: rgba(234,88,12,.16);  color: #fb923c; }
html[data-theme="dark"] .fn-stat.red    .fn-stat-icon { background: rgba(239,68,68,.16);  color: #f87171; }
html[data-theme="dark"] .fn-stat.purple .fn-stat-icon { background: rgba(124,58,237,.18); color: #c4b5fd; }

/* ── Baris tabel aktif / highlight biru ── */
html[data-theme="dark"] .fn-table tbody tr.fn-row-active td { background: rgba(59,130,246,.12); }

/* ── Badge & tint status (finance) — versi gelap ── */
html[data-theme="dark"] .fn-badge.selesai,
html[data-theme="dark"] .fn-badge.aman,
html[data-theme="dark"] .fn-badge.pemasukan,
html[data-theme="dark"] .fn-badge.prioritas { background: rgba(34,197,94,.16);  color: #4ade80; }
html[data-theme="dark"] .fn-badge.pending,
html[data-theme="dark"] .fn-badge.akanjatuh,
html[data-theme="dark"] .fn-badge.jatuhtempo,
html[data-theme="dark"] .fn-badge.tariktunai,
html[data-theme="dark"] .fn-badge.adjustment { background: rgba(234,179,8,.16);  color: #fbbf24; }
html[data-theme="dark"] .fn-badge.dibatalkan,
html[data-theme="dark"] .fn-badge.lewattempo,
html[data-theme="dark"] .fn-badge.pengeluaran { background: rgba(239,68,68,.16);  color: #f87171; }
html[data-theme="dark"] .fn-badge.aktif,
html[data-theme="dark"] .fn-badge.utama,
html[data-theme="dark"] .fn-badge.transfer   { background: rgba(59,130,246,.16); color: #93c5fd; }
html[data-theme="dark"] .fn-badge.lunas,
html[data-theme="dark"] .fn-badge.prediksi,
html[data-theme="dark"] .fn-badge.support,
html[data-theme="dark"] .fn-badge.nonaktif   { background: rgba(148,163,184,.18); color: #cbd5e1; }
html[data-theme="dark"] .fn-badge.setortunai { background: rgba(124,58,237,.18); color: #c4b5fd; }

/* ── Banner & note kuning ── */
html[data-theme="dark"] .fn-banner {
    background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3);
}
html[data-theme="dark"] .fn-banner-text strong { color: #fcd34d; }
html[data-theme="dark"] .fn-banner-text span   { color: #fbbf24; }
html[data-theme="dark"] .fn-help-note {
    background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.28); color: #fcd34d;
}

/* ── Closing preview ── */
html[data-theme="dark"] .fn-closing-preview { background: var(--surface-2); border-color: var(--border); border-top-color: var(--border); }

/* ── Badge manajemen akun (setting) ── */
html[data-theme="dark"] .set-badge.owner          { background: rgba(59,130,246,.16); color: #93c5fd; }
html[data-theme="dark"] .set-badge.financemanager { background: rgba(6,182,212,.18);  color: #67e8f9; }
html[data-theme="dark"] .set-badge.finance        { background: rgba(34,197,94,.16);  color: #4ade80; }
html[data-theme="dark"] .set-badge.gudang         { background: rgba(234,88,12,.16);  color: #fb923c; }
html[data-theme="dark"] .set-badge.produksi       { background: rgba(124,58,237,.18); color: #c4b5fd; }
html[data-theme="dark"] .set-msg.ok  { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: #4ade80; }
html[data-theme="dark"] .set-msg.err { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #f87171; }

/* ── Ikon chip judul kartu (setting) jadi lebih kalem ── */
html[data-theme="dark"] .set-card-ico.blue  { background: rgba(59,130,246,.16); color: #93c5fd; }
html[data-theme="dark"] .set-card-ico.green { background: rgba(34,197,94,.16);  color: #4ade80; }
html[data-theme="dark"] .set-card-ico.amber { background: rgba(234,179,8,.16);  color: #fbbf24; }
html[data-theme="dark"] .set-count { background: rgba(59,130,246,.16); color: #93c5fd; }
html[data-theme="dark"] .set-notif-tag { background: rgba(59,130,246,.16); color: #93c5fd; }
html[data-theme="dark"] .set-notif-reset:hover { background: var(--primary); }

/* ── Beranda ──
   Beranda (React island react/beranda/ + assets/css/beranda.css) mengurus
   tema-nya SENDIRI di dalam beranda.css: palet lokal (var --bp-*) dengan
   default terang + blok override `html[data-theme="dark"] .bp-page` dan
   `html[data-theme="dark"] .accent-*` di file itu. Jadi tidak ada aturan
   beranda di sini — sengaja, supaya semua warna halaman itu terpusat. */

/* ── Finance msg ── */
html[data-theme="dark"] .fn-msg.ok   { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: #4ade80; }
html[data-theme="dark"] .fn-msg.err  { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #f87171; }
html[data-theme="dark"] .fn-msg.info { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.30); color: #93c5fd; }

/* ── Master Produk ──
   .mp-warna-chip/.mp-warna-more/.mp-vendor-name-pill/.mp-harga-pill/
   .mp-adj-badge/.mp-adj-tag/.mp-adj-tag-nama/.mp-adj-tag-price used to be
   solid-filled pills here, styled from this file since assets/css/
   master-produk.css didn't handle its own dark mode yet. The 2026-07-11
   "Premium Catalog" redesign + declutter pass made master-produk.css fully
   dark-mode-aware on its own (theme-safe --mp-*/--text-muted/--green-text/
   --orange tokens) and turned these into plain/lightly-tinted text — but
   these rules, having one extra `html` type selector, still outrank
   master-produk.css's own class-only selectors and silently forced the
   OLD filled-pill colors back on top in dark mode. Removed; dark mode for
   these now comes entirely from master-produk.css's own rules.
   (.mp-warna-more no longer exists in any markup at all — also just dead.)
   .mp-btn-edit/.mp-btn-foto/.mp-btn-adj below are a separate, still-dead
   leftover (no live row markup instantiates those classes either) — left
   alone, matching this page's established "keep dead selectors at zero
   cost" convention. */
html[data-theme="dark"] .mp-stat-card.accent-green h2 { color: #4ade80; }
html[data-theme="dark"] .mp-stat-card.accent-orange h2 { color: #fb923c; }
html[data-theme="dark"] .mp-btn-edit { background: rgba(59,130,246,.16); color: #93c5fd; }
html[data-theme="dark"] .mp-btn-foto { background: rgba(34,197,94,.16); color: #4ade80; }
html[data-theme="dark"] .mp-btn-adj  { background: rgba(234,88,12,.16); color: #fb923c; }

/* ── Produksi: status badge (.pr-badge) versi gelap ── */
html[data-theme="dark"] .pr-badge.draft    { background: rgba(148,163,184,.18); color: #cbd5e1; }
html[data-theme="dark"] .pr-badge.dikirim  { background: rgba(59,130,246,.16);  color: #93c5fd; }
html[data-theme="dark"] .pr-badge.produksi,
html[data-theme="dark"] .pr-badge.berjalan { background: rgba(234,179,8,.16);   color: #fbbf24; }
html[data-theme="dark"] .pr-badge.sebagian { background: rgba(234,88,12,.16);   color: #fb923c; }
html[data-theme="dark"] .pr-badge.lengkap,
html[data-theme="dark"] .pr-badge.closed,
html[data-theme="dark"] .pr-badge.selesai  { background: rgba(34,197,94,.16);   color: #4ade80; }
html[data-theme="dark"] .pr-badge.dibayar  { background: rgba(124,58,237,.18);  color: #c4b5fd; }
/* Inisial avatar vendor — teks gelap di atas surface gelap jadi tak terbaca */
html[data-theme="dark"] .pr-vc-initial { color: #cbd5e1; }

/* ── Badge admin (manajemen akun) ── */
html[data-theme="dark"] .set-badge.admin { background: rgba(148,163,184,.18); color: #cbd5e1; }

/* ── Data Gudang: form card header & tint terang (Pemasukan/Pengeluaran) ── */
html[data-theme="dark"] .dp-form-card-header {
    background: rgba(59,130,246,.12);
    border-bottom-color: rgba(59,130,246,.28);
}
html[data-theme="dark"] .dp-form-card-header i { color: #93c5fd; }
html[data-theme="dark"] .dp-form-card-header.out {
    background: rgba(234,88,12,.12);
    border-bottom-color: rgba(234,88,12,.30);
}
html[data-theme="dark"] .dp-form-card-header.out i { color: #fb923c; }

/* Tombol & opsi ber-hover tint biru */
html[data-theme="dark"] .dp-export-btn:hover,
html[data-theme="dark"] .dp-btn-add:hover,
html[data-theme="dark"] .produk-option:hover { background: rgba(59,130,246,.16); }
html[data-theme="dark"] .produk-option:hover  { color: #93c5fd; }

/* Tombol hapus baris (tint merah) */
html[data-theme="dark"] .dp-remove-row {
    background: rgba(239,68,68,.16); color: #f87171;
}
html[data-theme="dark"] .dp-remove-row:hover { background: rgba(239,68,68,.26); }

/* Ikon modal Tambah Nama */
html[data-theme="dark"] .dp-modal-icon { background: rgba(59,130,246,.16); color: #93c5fd; }

/* ── Data Display: ikon ringkasan ber-tint terang jadi lebih kalem ── */
html[data-theme="dark"] .dd-stat-icon.blue  { background: rgba(59,130,246,.16); color: #93c5fd; }
html[data-theme="dark"] .dd-stat-icon.green { background: rgba(34,197,94,.16);  color: #4ade80; }

/* ── Sales Analytics (dashboard): tint status & growth ── */
html[data-theme="dark"] .dashboard-page .card-growth.positive { background: rgba(34,197,94,.16); color: #4ade80; }
html[data-theme="dark"] .dashboard-page .card-growth.negative { background: rgba(239,68,68,.16); color: #f87171; }
html[data-theme="dark"] .dashboard-page .status-online        { background: rgba(34,197,94,.16); color: #4ade80; }

/* ── Finance — audit dark mode: sisa elemen ber-tint terang ── */
/* Grand total Laporan (NET PROFIT / TOTAL LIABILITIES+EQUITY) — hijau pucat -> tint gelap */
html[data-theme="dark"] .fn-stmt-row.grand      { background: rgba(34,197,94,.12); }
html[data-theme="dark"] .fn-stmt-row.grand .amt { color: #4ade80; }
/* Hover tombol close (merah pucat) */
html[data-theme="dark"] .fn-modal-close:hover,
html[data-theme="dark"] .fn-panel-close:hover   { background: rgba(239,68,68,.18); color: #f87171; }
/* Ikon kartu rekening — teks gelap di atas surface gelap jadi tak terbaca */
html[data-theme="dark"] .fn-rek-card-icon       { color: #cbd5e1; }
/* Pill trend saldo kartu rekening (naik/turun/datar) */
html[data-theme="dark"] .fn-rek-card-change.up   { background: rgba(34,197,94,.16);  color: #4ade80; }
html[data-theme="dark"] .fn-rek-card-change.down { background: rgba(239,68,68,.16);  color: #f87171; }
html[data-theme="dark"] .fn-rek-card-change.flat { background: var(--surface-3);     color: var(--text-light); }
/* Ikon "info cepat" (quick) */
html[data-theme="dark"] .fn-quick-icon          { background: rgba(59,130,246,.16); color: #93c5fd; }
html[data-theme="dark"] .fn-quick-icon.green    { background: rgba(34,197,94,.16);  color: #4ade80; }
html[data-theme="dark"] .fn-quick-icon.orange   { background: rgba(234,88,12,.16);  color: #fb923c; }
html[data-theme="dark"] .fn-quick-icon.purple   { background: rgba(124,58,237,.18); color: #c4b5fd; }
/* Cash Allocation: bar track & pemisah baris */
html[data-theme="dark"] .fn-alloc-bar           { background: var(--surface-3); }
html[data-theme="dark"] .fn-alloc-row           { border-bottom-color: var(--border); }
/* Sisa border/elemen terang */
html[data-theme="dark"] .fn-cp-grand            { border-top-color: var(--border); }
html[data-theme="dark"] .vp-tl-item::before     { background: var(--surface); }
html[data-theme="dark"] .fn-rek-card:hover,
html[data-theme="dark"] .fn-pill:hover          { border-color: var(--text-light); }
/* Angka plus/minus — versi lebih terang agar jelas di latar gelap */
html[data-theme="dark"] .fn-table .plus,
html[data-theme="dark"] .fn-info-row span.plus,
html[data-theme="dark"] .fn-tl-row .val.plus,
html[data-theme="dark"] .fn-stat-sub.up,
html[data-theme="dark"] .fn-stat-trend.up,
html[data-theme="dark"] .fn-rek-card-change.up   { color: #4ade80; }
html[data-theme="dark"] .fn-table .minus,
html[data-theme="dark"] .fn-info-row span.minus,
html[data-theme="dark"] .fn-tl-row .val.minus,
html[data-theme="dark"] .fn-stmt-row .amt.minus,
html[data-theme="dark"] .fn-stat-sub.down,
html[data-theme="dark"] .fn-stat-trend.down,
html[data-theme="dark"] .fn-rek-card-change.down { color: #f87171; }
/* Monthly Closing — ikon checklist (ck-ico) */
html[data-theme="dark"] .ck-ico.ok     { background: rgba(34,197,94,.16);  color: #4ade80; }
html[data-theme="dark"] .ck-ico.fail   { background: rgba(239,68,68,.16);  color: #f87171; }
html[data-theme="dark"] .ck-ico.manual { background: rgba(234,179,8,.16);   color: #fbbf24; }

/* ── Scrollbar ── */
html[data-theme="dark"] ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--background); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; border: 2px solid var(--background); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; }