/* Mode gelap. Hanya untuk layar (cetak tetap terang). Token di bawah menimpa tema biru; aturan otomatis memetakan warna terang yang tertulis langsung di app.css. */
@media screen{
/* ===== MODE GELAP ===== */
html[data-theme="dark"]{color-scheme:dark;
 --bg:#0B1220;--card:#111A2E;--surface:#111A2E;--surface-2:#16213A;--tint:#17264A;
 --ink:#E2E8F5;--ink-2:#9AA8C2;--ink-3:#6F7E9A;--line:#223052;--line-2:#1A2644;
 --navy:#E8EEFB;--blue:#6BA6FF;--blue-light:#93C0FF;--blue-dark:#4F8EF7;
 --deep:#0F1A33;--deep-2:#1E3A8A;--teal:#2F6FEB;--teal-2:#6BA6FF;--mint:#17264A;--mint-2:#243C70;--sun:#6BA6FF;
 --green:#4ADE9A;--green-bg:#10281F;--red:#F58A8A;--red-bg:#36191C;--amber:#F5C25A;--amber-bg:#33270C;
 --warn-bg:#33270C;--bad-bg:#36191C;--active-bg:#1B2E5C;--plate:rgba(44,60,100,.55);--top-bg:rgba(11,18,32,.86);--scrim:rgba(2,6,16,.62);--tip-bg:#E8EEFB;--tip-ink:#0B1220;
 --shadow-card:0 10px 30px rgba(0,0,0,.4)}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .top{background:var(--top-bg)}
html[data-theme="dark"] .side{background:var(--surface);border-right-color:var(--line)}
html[data-theme="dark"] .layer{background:var(--scrim)}
html[data-theme="dark"] .pop{box-shadow:0 24px 60px rgba(0,0,0,.55)}
html[data-theme="dark"] .drawer{box-shadow:-24px 0 60px rgba(0,0,0,.5)}
@media (hover:hover) and (pointer:fine){html[data-theme="dark"] .icon-btn:hover,html[data-theme="dark"] .user-btn:hover{background:var(--tint);color:var(--blue)}}
@media (hover:hover) and (pointer:fine){html[data-theme="dark"] .nav a:hover,html[data-theme="dark"] .nav-parent:hover{background:transparent}}
html[data-theme="dark"] .btn.primary{background:var(--teal);color:#fff;border-color:var(--teal)}
html[data-theme="dark"] ::placeholder{color:var(--ink-3)}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea{color:var(--ink)}
html[data-theme="dark"] .brand-mark{background:#fff;border-color:var(--line)}

/* dihasilkan otomatis dari app.css + theme-biru.css: warna terang yang tertulis langsung dipetakan ke token gelap */
html[data-theme="dark"] .icon-btn{background:var(--surface)}
html[data-theme="dark"] .user-btn{background:var(--surface)}
html[data-theme="dark"] .pop{background:var(--surface)}
html[data-theme="dark"] .pop-item{background:var(--surface)}
html[data-theme="dark"] .notif.unread{background:var(--surface-2)}
html[data-theme="dark"] .strip{background:var(--surface)}
@media (hover:hover) and (pointer:fine){html[data-theme="dark"] .strip a:hover{background:var(--surface-2)}}
html[data-theme="dark"] .panel{background:var(--surface)}
html[data-theme="dark"] .pill.mute{background:var(--surface-2)}
html[data-theme="dark"] .btn{background:var(--surface)}
html[data-theme="dark"] .btn.danger{border-color:var(--line)}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea{border:1px solid var(--line);background:var(--surface)}
html[data-theme="dark"] .field input:disabled{background:var(--surface-2)}
html[data-theme="dark"] .seg{background:var(--surface-2)}
html[data-theme="dark"] .seg button[aria-pressed=true]{background:var(--surface)}
html[data-theme="dark"] .tbl-wrap{background:var(--surface)}
html[data-theme="dark"] th{background:var(--surface-2)}
@media (hover:hover) and (pointer:fine){html[data-theme="dark"] tbody tr:hover td{background:var(--surface-2)}}
html[data-theme="dark"] .drawer{background:var(--surface)}
html[data-theme="dark"] .modal{background:var(--surface)}
@media (hover:hover) and (pointer:fine){html[data-theme="dark"] .check:hover{background:var(--surface-2)}}
html[data-theme="dark"] .role-item{background:var(--surface)}
html[data-theme="dark"] .savebar{background:var(--surface)}
html[data-theme="dark"] .filters{background:var(--surface)}
html[data-theme="dark"] .notice{border:1px dashed var(--line)}
html[data-theme="dark"] .line-card{background:var(--surface-2)}
html[data-theme="dark"] .chip-next{background:var(--surface)}
html[data-theme="dark"] .print-head{border-bottom:2px solid var(--line)}
html[data-theme="dark"] .toolbar select{border:1px solid var(--line);background:var(--surface)}
html[data-theme="dark"] .bulk-bar{background:var(--surface)}
html[data-theme="dark"] .chip{background:var(--surface-2)}
html[data-theme="dark"] .kv-grid.summary{background:var(--surface-2)}
html[data-theme="dark"] .tag.src{background:var(--surface-2)}
html[data-theme="dark"] .tag.src.opt{background:var(--warn-bg)}
html[data-theme="dark"] .tag.src.entry{background:var(--surface-2)}
html[data-theme="dark"] .inv-line{background:var(--surface-2)}
html[data-theme="dark"] .inv-totals .trow input{border:1px solid var(--line)}
html[data-theme="dark"] .fmt-row.off{background:var(--surface-2)}
html[data-theme="dark"] .tag.src.ext{background:var(--tint);color:var(--ink)}
html[data-theme="dark"] tr.ev-head td{background:var(--surface-2)}
html[data-theme="dark"] .ag-h{background:var(--surface-2)}
html[data-theme="dark"] .ag-cal,html[data-theme="dark"] .ag-day,html[data-theme="dark"] .ag-side{background:var(--surface)}
html[data-theme="dark"] .ag-cell{background:var(--surface-2)}
html[data-theme="dark"] .reset-sum{border:1px solid var(--line)}
html[data-theme="dark"] .reset-confirm{background:var(--surface)}
html[data-theme="dark"] .npwp-opt{border:1px solid var(--warn,var(--line));background:var(--warn-bg)}
html[data-theme="dark"] .ctile{background:var(--surface)}
html[data-theme="dark"] .cell{border:1px solid var(--line);background:var(--surface)}
html[data-theme="dark"] .cell:disabled{background:var(--surface-2)}
html[data-theme="dark"] .side{background:var(--surface)}
html[data-theme="dark"] .nav a[aria-current=page]{background:var(--tint)}
html[data-theme="dark"] .soon{background:var(--surface-2)}
@media (hover:hover) and (pointer:fine){html[data-theme="dark"] .collapse-btn:hover{background:var(--surface-2)}}
@media (hover:hover) and (pointer:fine){html[data-theme="dark"] .icon-btn:hover,html[data-theme="dark"] .user-btn:hover{background:var(--tint)}}

html[data-theme="dark"]{--field:#0C1424}
html[data-theme="dark"] .field :is(input,select,textarea){background:var(--field);border-color:#2A3A63}
html[data-theme="dark"] .field :is(input,select,textarea):focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(107,166,255,.2);outline:none}
html[data-theme="dark"] .field input:disabled{background:var(--surface-2)}
html[data-theme="dark"] .dock-plate{background:rgba(44,60,100,.55)}
html[data-theme="dark"] .empty-partners{background:var(--surface);border-color:#2A3A63}
}