@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="dark"] body{background:#0d1f22 !important;color:#cfe0e2 !important}
:root[data-theme="dark"] body::before{opacity:.5}
/* surface cards / panel / modal / drawer */
:root[data-theme="dark"] .card,:root[data-theme="dark"] .ccard,:root[data-theme="dark"] .kpi,:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .mc,:root[data-theme="dark"] .hc,:root[data-theme="dark"] .item,:root[data-theme="dark"] .set-card,
:root[data-theme="dark"] .vcard,:root[data-theme="dark"] .modal,:root[data-theme="dark"] .drawer,:root[data-theme="dark"] .set-card,
:root[data-theme="dark"] .box,:root[data-theme="dark"] .tile,:root[data-theme="dark"] .stat,:root[data-theme="dark"] .o3 .o,
:root[data-theme="dark"] .kb-card,:root[data-theme="dark"] .pcard,:root[data-theme="dark"] .col,:root[data-theme="dark"] .colcard{
  background:#14292d !important;border-color:#284a4f !important;color:#cfe0e2 !important}
:root[data-theme="dark"] .sheet,:root[data-theme="dark"] .wrap>section,:root[data-theme="dark"] .content{background:transparent !important}
/* text muted / headings */
:root[data-theme="dark"] .muted,:root[data-theme="dark"] .sub,:root[data-theme="dark"] .l,:root[data-theme="dark"] .hint,
:root[data-theme="dark"] label,:root[data-theme="dark"] .ol,:root[data-theme="dark"] th,:root[data-theme="dark"] small{color:#8fb1b5 !important}
:root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3,:root[data-theme="dark"] h4,
:root[data-theme="dark"] .v,:root[data-theme="dark"] b,:root[data-theme="dark"] .ov{color:#eef6f7 !important}
/* inputs */
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{
  background:#0f2528 !important;color:#e6f1f2 !important;border-color:#2f545a !important}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:#6f9297 !important}
/* tables */
:root[data-theme="dark"] table th{background:#112428 !important;color:#8fb1b5 !important;border-color:#284a4f !important}
:root[data-theme="dark"] table td{border-color:#213f43 !important;color:#cfe0e2 !important}
:root[data-theme="dark"] tr:hover td{background:#16302f !important}
/* topbar putih → gelap; topbar yg sudah gelap (immersif) biarkan */
:root[data-theme="dark"] .top{background:#102327 !important;border-color:#264449 !important}
:root[data-theme="dark"] .top h1{color:#eef6f7 !important}
/* buttons ghost & border lines */
:root[data-theme="dark"] .btn.ghost{background:#14292d !important;border-color:#2f545a !important;color:#cfe0e2 !important}
:root[data-theme="dark"] .bar,:root[data-theme="dark"] .filters,:root[data-theme="dark"] hr{border-color:#264449 !important}
/* toggle button */
#paiDark{position:fixed;bottom:20px;left:20px;z-index:99999;width:46px;height:46px;border-radius:50%;border:1px solid rgba(20,60,66,.18);
  background:#ffffff;color:#0e5a66;cursor:pointer;box-shadow:0 8px 22px -6px rgba(14,90,102,.4);font-size:20px;display:grid;place-items:center;transition:transform .15s,background .2s}
#paiDark:hover{transform:translateY(-2px) scale(1.05)}
:root[data-theme="dark"] #paiDark{background:#14292d;color:#F4A93C;border-color:#2f545a}
@media print{#paiDark{display:none}}
/* topbar polish di dark: logo putih, selector/company chip & avatar gelap */
:root[data-theme="dark"] .top img,:root[data-theme="dark"] .tlogo,:root[data-theme="dark"] .brand img{filter:brightness(0) invert(1)}
:root[data-theme="dark"] .top select,:root[data-theme="dark"] .cosel,:root[data-theme="dark"] .cochip,:root[data-theme="dark"] .company-select,:root[data-theme="dark"] .top .chip{background:#16302f !important;color:#e6f1f2 !important;border-color:#2f545a !important}
:root[data-theme="dark"] .top,:root[data-theme="dark"] header.top{background:linear-gradient(115deg,#0b2a30,#0e3a42) !important;border-bottom-color:#26474c !important}

/* ═══════════════════════════════════════════════════════════════════════
   PAI DARK MODE — GELOMBANG 2 (cakupan dalam-modul)
   Dibuat dari audit otomatis 6 modul: 113 permukaan terang + 40 selector campur.
   Aturan: permukaan netral digelapkan eksplisit; varian brand/aktif (.on, teal,
   orange, gold) TIDAK disentuh; chip pastel dibalik agar warnanya tetap bermakna.
   Palet: surface #14292d · surface-2 #16302f · input #0f2528 · border #2f545a
          teks #cfe0e2 · redup #8fb1b5 · judul #eef6f7
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Sidebar / navigasi dalam modul ───────────────────────────────── */
:root[data-theme="dark"] .sidenav,
:root[data-theme="dark"] .side{background:#102327 !important;border-color:#26474c !important;color:#cfe0e2 !important}
:root[data-theme="dark"] .sidenav a,
:root[data-theme="dark"] .sidenav button:not(.on),
:root[data-theme="dark"] .nav a:not(.on),
:root[data-theme="dark"] .lnk:not(.on),
:root[data-theme="dark"] .navtog,
:root[data-theme="dark"] .top .navtog,
:root[data-theme="dark"] .top .back{background:transparent !important;color:#cfe0e2 !important;border-color:#2f545a !important}
:root[data-theme="dark"] .sidenav a:hover,
:root[data-theme="dark"] .sidenav button:not(.on):hover,
:root[data-theme="dark"] .nav a:not(.on):hover,
:root[data-theme="dark"] .lnk:not(.on):hover{background:#16302f !important}
:root[data-theme="dark"] .sidenav .tabs button:not(.on),
:root[data-theme="dark"] .sidenav .viewtog button:not(.on),
:root[data-theme="dark"] .viewtog button:not(.on),
:root[data-theme="dark"] .stagebar button:not(.on),
:root[data-theme="dark"] .seg button:not(.on),
:root[data-theme="dark"] .fmode button:not(.on),
:root[data-theme="dark"] .rscope button:not(.on),
:root[data-theme="dark"] .pl-month button:not(.on){background:#14292d !important;color:#cfe0e2 !important;border-color:#2f545a !important}

/* ── 2. Permukaan / kartu / panel dalam modul ────────────────────────── */
:root[data-theme="dark"] .jn-card, :root[data-theme="dark"] .qh-card, :root[data-theme="dark"] .totbox,
:root[data-theme="dark"] .sbox,    :root[data-theme="dark"] .tlcard,  :root[data-theme="dark"] .kc,
:root[data-theme="dark"] .task,    :root[data-theme="dark"] .msec,    :root[data-theme="dark"] .divgrp,
:root[data-theme="dark"] .ecard,   :root[data-theme="dark"] .rrow,    :root[data-theme="dark"] .hotrow,
:root[data-theme="dark"] .qcat-modal, :root[data-theme="dark"] .updrop, :root[data-theme="dark"] .upsel,
:root[data-theme="dark"] .tabwrap, :root[data-theme="dark"] .loading-box, :root[data-theme="dark"] .empty,
:root[data-theme="dark"] .fempty,  :root[data-theme="dark"] .tl-empty, :root[data-theme="dark"] .aimsg.a,
:root[data-theme="dark"] .aihd,    :root[data-theme="dark"] .embedwrap, :root[data-theme="dark"] .daterange,
:root[data-theme="dark"] .imgcell, :root[data-theme="dark"] .doccell,  :root[data-theme="dark"] .att-row,
:root[data-theme="dark"] .tvdp-pay,:root[data-theme="dark"] .tvdp-coa, :root[data-theme="dark"] .tvpd-m,
:root[data-theme="dark"] .tvpd-flow, :root[data-theme="dark"] .tl-row, :root[data-theme="dark"] .tl-row.ev,
:root[data-theme="dark"] .dh,      :root[data-theme="dark"] .mh,      :root[data-theme="dark"] .docbar,
:root[data-theme="dark"] .pd-tip,  :root[data-theme="dark"] .prog,    :root[data-theme="dark"] .tgrow,
:root[data-theme="dark"] .qhero,   :root[data-theme="dark"] .qwc-item,:root[data-theme="dark"] .rovl,
:root[data-theme="dark"] .rtopic,  :root[data-theme="dark"] .ct,      :root[data-theme="dark"] .metr,
:root[data-theme="dark"] .rfc,     :root[data-theme="dark"] .qlc2,    :root[data-theme="dark"] .qwrow,
:root[data-theme="dark"] .qwt,     :root[data-theme="dark"] .kgo,     :root[data-theme="dark"] .lkwrap,
:root[data-theme="dark"] .set-logobox, :root[data-theme="dark"] .pl-month, :root[data-theme="dark"] .col-h,
:root[data-theme="dark"] .toast,   :root[data-theme="dark"] .help,    :root[data-theme="dark"] .jn-sum,
:root[data-theme="dark"] .rk-sum,  :root[data-theme="dark"] .qwrow.qw-subitem, :root[data-theme="dark"] .qwt-subitem,
:root[data-theme="dark"] .top .me{background:#14292d !important;border-color:#2f545a !important;color:#cfe0e2 !important}

/* wadah transparan (jangan jadi kotak gelap ganda) */
:root[data-theme="dark"] .kcol,   :root[data-theme="dark"] .divgrp > .task,
:root[data-theme="dark"] .stagebar,:root[data-theme="dark"] .toolbar{background:transparent !important}

/* ── 3. Input di dalam modul ─────────────────────────────────────────── */
:root[data-theme="dark"] .field input, :root[data-theme="dark"] .field select, :root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .view input,  :root[data-theme="dark"] .view select,  :root[data-theme="dark"] .view textarea,
:root[data-theme="dark"] .bar input,   :root[data-theme="dark"] .toolbar input,
:root[data-theme="dark"] .addtask input, :root[data-theme="dark"] .lkwrap input,
:root[data-theme="dark"] input[type=date], :root[data-theme="dark"] input[type=search]{
  background:#0f2528 !important;color:#e6f1f2 !important;border-color:#2f545a !important}
:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.7)}
/* Sebagian modul menata input lewat selector #id + !important (mis. #boardSearch, #boardStageFilter)
   yang mengalahkan aturan tema. `:is(#_pai_boost, input)` menaikkan bobot ke level id sambil tetap
   cocok ke SEMUA input — jadi satu aturan ini menang tanpa perlu tahu nama id tiap modul.
   Pakai background-COLOR (bukan shorthand) supaya ikon panah/kaca pembesar bawaan tidak hilang. */
:root[data-theme="dark"] :is(#_pai_boost, input),
:root[data-theme="dark"] :is(#_pai_boost, select),
:root[data-theme="dark"] :is(#_pai_boost, textarea){
  background-color:#0f2528 !important;color:#e6f1f2 !important;border-color:#2f545a !important}
:root[data-theme="dark"] :is(#_pai_boost, input)::placeholder,
:root[data-theme="dark"] :is(#_pai_boost, textarea)::placeholder{color:#6f9297 !important}
:root[data-theme="dark"] :is(#_pai_boost, option){background-color:#0f2528 !important;color:#e6f1f2 !important}

/* ── 4. Tabel khusus modul ───────────────────────────────────────────── */
:root[data-theme="dark"] .vtbl th, :root[data-theme="dark"] .ires th, :root[data-theme="dark"] .tvdp-jrtbl th{
  background:#112428 !important;color:#8fb1b5 !important;border-color:#284a4f !important}
:root[data-theme="dark"] .vtbl tbody tr, :root[data-theme="dark"] .ires tbody tr,
:root[data-theme="dark"] .rk-row-matched td, :root[data-theme="dark"] .rk-row-unmatched td,
:root[data-theme="dark"] .qover-sub td, :root[data-theme="dark"] .tvdp-jrtbl,
:root[data-theme="dark"] .tvdp-jrtbl tr.jrtot td{background:#14292d !important;color:#cfe0e2 !important;border-color:#213f43 !important}

/* ── 5. Tombol netral kecil (varian brand dilewati) ──────────────────── */
:root[data-theme="dark"] .mini:not(.teal):not(.orange):not(.gold):not(.danger),
:root[data-theme="dark"] .rmvar, :root[data-theme="dark"] .aiact, :root[data-theme="dark"] .x,
:root[data-theme="dark"] .xdel, :root[data-theme="dark"] .set-pen, :root[data-theme="dark"] .qact-more,
:root[data-theme="dark"] .iconbtn:not(.on), :root[data-theme="dark"] .co-addbtn, :root[data-theme="dark"] .print-btn,
:root[data-theme="dark"] .btn-g:not(.on), :root[data-theme="dark"] .r2-preset, :root[data-theme="dark"] .tsw,
:root[data-theme="dark"] .uchip, :root[data-theme="dark"] .uchip button, :root[data-theme="dark"] .xchip,
:root[data-theme="dark"] .wopt:not(.on), :root[data-theme="dark"] .fc:not(.on){
  background:#16302f !important;color:#cfe0e2 !important;border-color:#2f545a !important}

/* ── 6. Chip/badge status — latar gelap DITURUNKAN dari warna teksnya sendiri,
   jadi makna warna (hijau=lunas, amber=terkirim, merah=telat) tetap terbaca.
   JANGAN pakai filter:invert — elemen yang punya anak jadi kacau (anak ikut kebalik). */
:root[data-theme="dark"] .pill, :root[data-theme="dark"] .badge, :root[data-theme="dark"] .tag,
:root[data-theme="dark"] .s-sent, :root[data-theme="dark"] .s-followup, :root[data-theme="dark"] .s-lost,
:root[data-theme="dark"] .s-prospect, :root[data-theme="dark"] .t-government, :root[data-theme="dark"] .pri-high,
:root[data-theme="dark"] .pri-med, :root[data-theme="dark"] .badge-soon, :root[data-theme="dark"] .rk-badge,
:root[data-theme="dark"] .tl-badge, :root[data-theme="dark"] .chg, :root[data-theme="dark"] .task .asg,
:root[data-theme="dark"] .task .due, :root[data-theme="dark"] .gcr.today, :root[data-theme="dark"] .kcol.over,
:root[data-theme="dark"] .rep2-tie.bad, :root[data-theme="dark"] .banner.err, :root[data-theme="dark"] .hotrow .st,
:root[data-theme="dark"] .xchip, :root[data-theme="dark"] .eticker{
  color:color-mix(in srgb, currentColor 62%, #eaf6f7) !important;
  background:color-mix(in srgb, currentColor 16%, #12262a) !important;
  border-color:color-mix(in srgb, currentColor 34%, #12262a) !important}
/* browser tanpa color-mix → tetap terbaca (netral gelap) */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  :root[data-theme="dark"] .pill, :root[data-theme="dark"] .badge, :root[data-theme="dark"] .tag{
    background:#1b3438 !important;color:#dfeff1 !important;border-color:#2f545a !important}}

/* selector perusahaan di topbar: wadah + isian di dalamnya (kotak putih) */
:root[data-theme="dark"] .co-pill{background:#16302f !important;border-color:#2f545a !important;color:#e6f1f2 !important}
:root[data-theme="dark"] .co-pill select, :root[data-theme="dark"] .co-pill input,
:root[data-theme="dark"] .co-pill .cosel, :root[data-theme="dark"] .co-pill > *{
  background:transparent !important;color:#e6f1f2 !important;border-color:#2f545a !important}

/* ── 7. Pembungkus & garis ───────────────────────────────────────────── */
:root[data-theme="dark"] .o3 .o, :root[data-theme="dark"] .drawer, :root[data-theme="dark"] .modal{
  background:#14292d !important;border-color:#2f545a !important;color:#cfe0e2 !important}
:root[data-theme="dark"] .modal .x{background:transparent !important}
:root[data-theme="dark"] .ks{background:#14292d !important;border-color:#2f545a !important}
:root[data-theme="dark"] hr, :root[data-theme="dark"] .divider, :root[data-theme="dark"] .sep{border-color:#264449 !important;background:#264449 !important}
/* ikon/emblem netral biar tak jadi kotak putih */
:root[data-theme="dark"] .ico:not(.teal):not(.orange):not(.gold){background:#16302f !important;color:#cfe0e2 !important}

/* ── 8. Temuan pindai runtime (Marketing dll) ────────────────────────── */
:root[data-theme="dark"] .kstrip,
:root[data-theme="dark"] .recbox, :root[data-theme="dark"] .recbox h3,
:root[data-theme="dark"] .aihint{background:#14292d !important;border-color:#2f545a !important;color:#cfe0e2 !important}
:root[data-theme="dark"] .aichip{
  color:color-mix(in srgb, currentColor 62%, #eaf6f7) !important;
  background:color-mix(in srgb, currentColor 16%, #12262a) !important;
  border-color:color-mix(in srgb, currentColor 34%, #12262a) !important}
/* Sales: avatar bulat + banner demo (inline style).
   CATATAN: JANGAN pukul rata `[style*="background:#fff"]` — preview kertas A4 di quotation/invoice
   builder memang harus tetap putih. Target yang spesifik saja. */
:root[data-theme="dark"] .uav, :root[data-theme="dark"] [style*="background:#e7f2f3"]{
  background-color:#1b3438 !important;color:#8fd8e2 !important}
:root[data-theme="dark"] #demoBanner{
  background-color:#33280f !important;color:#f0b95a !important;border-color:#5a4718 !important}
:root[data-theme="dark"] #demoBanner button{
  background-color:#4a3a12 !important;color:#f6d78f !important;border-color:#7a5f1c !important}
/* track progress-bar yang ditulis lewat inline style terang (mis. height:8px;background:#eef3f4) */
:root[data-theme="dark"] [style*="background:#eef3f4"], :root[data-theme="dark"] [style*="background:#eef7f6"],
:root[data-theme="dark"] [style*="background:#eef2f3"], :root[data-theme="dark"] [style*="background:#f0f4f5"],
:root[data-theme="dark"] [style*="background:#f3f6f7"], :root[data-theme="dark"] [style*="background:#eaf0f1"]{
  background-color:#1b3438 !important}

/* ── 9. KERTAS DOKUMEN tetap PUTIH di dark mode ──────────────────────────
   Preview quotation/invoice (#sheet) adalah kertas yang akan dicetak/di-PDF.
   Tema lama memaksa .sheet transparan → kertas ikut gelap & teks dokumen jadi
   abu-di-gelap (tak terbaca). Kembalikan jadi kertas putih + palet teks dokumen. */
:root[data-theme="dark"] #sheet, :root[data-theme="dark"] .sheet.paper, :root[data-theme="dark"] .a4{
  background:#ffffff !important;color:#1a1a1a !important}
:root[data-theme="dark"] #sheet h1, :root[data-theme="dark"] #sheet h2, :root[data-theme="dark"] #sheet h3,
:root[data-theme="dark"] #sheet h4, :root[data-theme="dark"] #sheet b, :root[data-theme="dark"] #sheet strong{color:#0e2a30 !important}
:root[data-theme="dark"] #sheet .muted, :root[data-theme="dark"] #sheet small, :root[data-theme="dark"] #sheet .sub,
:root[data-theme="dark"] #sheet label, :root[data-theme="dark"] #sheet .l{color:#5b7a80 !important}
:root[data-theme="dark"] #sheet td, :root[data-theme="dark"] #sheet p, :root[data-theme="dark"] #sheet li,
:root[data-theme="dark"] #sheet div, :root[data-theme="dark"] #sheet span{color:inherit}
:root[data-theme="dark"] #sheet table th{background:#f3f6f7 !important;color:#5b7a80 !important;border-color:#e3e8ea !important}
:root[data-theme="dark"] #sheet table td{border-color:#e9edee !important}
:root[data-theme="dark"] #sheet .pill, :root[data-theme="dark"] #sheet .badge{
  background:#f1f5f6 !important;color:#3d5a60 !important;border-color:#e0e7e9 !important}

/* ── 10. SWITCHER TEMA DI HEADER (seragam semua halaman) ─────────────────
   #paiDark (melayang) sudah dipensiunkan; tombol kini di header. Modul yang punya .thmtog
   dipakai ulang; yang belum → disuntik .paithm dengan gaya setara. */
#paiDark{display:none !important}
.paithm{border:1px solid rgba(20,60,66,.18);background:#fff;border-radius:12px;width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#0e5a66;
  flex-shrink:0;padding:0;margin-left:8px;transition:.18s}
.paithm:hover{background:#0e5a66;color:#fff;border-color:#0e5a66}
.paithm .sun{display:none}
.paithm .moon{display:block}
:root[data-theme="dark"] .paithm{background:#16302f !important;color:#F4A93C !important;border-color:#2f545a !important}
:root[data-theme="dark"] .paithm:hover{background:#22363b !important}
:root[data-theme="dark"] .paithm .moon{display:none}
:root[data-theme="dark"] .paithm .sun{display:block}
.paithm-float{position:fixed;bottom:20px;left:20px;z-index:99999;border-radius:50%;
  box-shadow:0 8px 22px -6px rgba(14,90,102,.4)}
@media print{.paithm,.thmtog{display:none !important}}

/* ── 11. FONT SERAGAM: Plus Jakarta Sans di SELURUH ERP ──────────────────
   Sebelumnya campur: Inter (body) · Plus Jakarta Sans (heading) · Quicksand (wordmark)
   · JetBrains Mono (angka). Sekarang semua Plus Jakarta Sans.
   Variabel font tiap modul ditimpa, plus catch-all agar elemen yang menulis
   font-family langsung ikut berubah. Ikon semuanya SVG → tidak terpengaruh.
   (@import-nya ditaruh di BARIS PALING ATAS file oleh skrip deploy — wajib, kalau
   di tengah file @import diabaikan browser.) */
:root{
  --fh:'Plus Jakarta Sans',system-ui,sans-serif;--fb:'Plus Jakarta Sans',system-ui,sans-serif;
  --fq:'Plus Jakarta Sans',system-ui,sans-serif;--fm:'Plus Jakarta Sans',system-ui,sans-serif;
  --fd:'Plus Jakarta Sans',system-ui,sans-serif;--font:'Plus Jakarta Sans',system-ui,sans-serif;
  --f:'Plus Jakarta Sans',system-ui,sans-serif;--font-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-head:'Plus Jakarta Sans',system-ui,sans-serif;--ff:'Plus Jakarta Sans',system-ui,sans-serif;
}
html, body, button, input, select, textarea, optgroup, option,
h1, h2, h3, h4, h5, h6, p, span, div, a, li, td, th, label, small, strong, b, em,
.mono, .wm, .tool, .brand, .top, .sidenav, .card, .modal, .toast, .pill, .badge,
.aimsg, .aimodal, .paithm, [class*="btn"], [class*="chip"], [class*="title"]{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif !important}
/* angka tetap rata rapi di tabel & nominal (pengganti fungsi monospace) */
.mono, td, th, input[type=number], [class*="amt"], [class*="amount"], [class*="num"],
[class*="total"], [class*="rp"], [class*="price"], [class*="nominal"], [class*="value"]{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1}