/* Neraca — lembar gaya aplikasi. Lihat tokens.css untuk variabel warna & ukuran.
   Struktur berbeda sengaja dari "Rel" (lrt-app): rail channel ikon-saja di kiri +
   sidebar kontekstual yang berganti isi per channel, bukan satu sidebar datar. */

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Pertahanan global: atribut [hidden] harus SELALU menang, apa pun aturan display
   lain yang menimpanya di tempat lain (inline style atau kelas dengan display
   eksplisit). Tanpa ini, elemen yang "disembunyikan" lewat .hidden=true bisa tetap
   tampil DAN tetap menghalangi klik — ditemukan pada overlay loading yang diam-diam
   memblokir seluruh halaman di baliknya walau terlihat kosong. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--canvas); color: var(--ink-700);
  font: 400 13px/1.55 var(--font-ui); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4,p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
svg { display: block; }
::selection { background: var(--brand-100); }

.ico-svg { width: 16px; height: 16px; flex: none; display: block; }
.ico-sm { width: 14px; height: 14px; }
.ico-lg { width: 20px; height: 20px; }
.ico-xl { width: 28px; height: 28px; }

/* ── angka ─────────────────────────────────────────────────────── */
.n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.n.dim { color: var(--ink-500); }
.n.neg { color: var(--st-risk); }
.n.pos { color: var(--st-ok); }

/* ══════════════════════════════════════════════════════════════
   SHELL — rail channel + sidebar kontekstual + topbar + main
   ══════════════════════════════════════════════════════════════ */
.shell { display: grid; grid-template-columns: var(--rail-w) var(--side-w) 1fr; height: 100vh; }

/* rail: ikon-saja, kelompok channel + kelompok lintas-modul */
.rail {
  background: var(--brand-900); display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-3) 0; gap: var(--sp-1); position: relative; z-index: 3;
}
[data-theme="dark"] .rail, @media (prefers-color-scheme:dark) { }
.rail .mark { width: 36px; height: 36px; border-radius: 8px; background: var(--surface);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); flex: none; }
.rail .mark img { width: 24px; height: auto; display: block; }
.rail .grp { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) 0;
  border-top: 1px solid rgba(255,255,255,.09); width: 100%; align-items: center; }
.rail .grp:first-of-type { border-top: 0; }
/* Rail ikon: tile TIDAK membesar (versi Dock macOS dicabut — berlebihan dan tile-nya
   saling tabrak). Sama seperti sub-menu: yang bergerak hanya ikonnya (geser + membesar
   halus), tile-nya menjadi lebih terang saat hover dan paling terang saat aktif. */
.rail .item {
  width: 44px; height: 44px; border-radius: 10px; border: 0; background: transparent;
  color: rgba(255,255,255,.62); display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.rail .item .ico-svg { transition: transform 160ms var(--ease); }
.rail .item:hover { background: rgba(255,255,255,.14); color: #fff; }
.rail .item:hover .ico-svg { transform: translateX(2px) scale(1.12); }
.rail .item.aktif { background: rgba(255,255,255,.2); color: #fff; }
.rail .item.aktif .ico-svg { transform: scale(1.12); }
.rail .item.aktif:hover .ico-svg { transform: translateX(2px) scale(1.18); }
.rail .item:active .ico-svg { transform: scale(.96); }
.rail .item.aktif::before {
  content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 2px; background: var(--accent-500);
}
.rail .item .badge {
  position: absolute; top: 5px; right: 5px; min-width: 8px; height: 8px; border-radius: 5px;
  background: var(--accent-500); border: 1.5px solid var(--brand-900);
}
.rail .tip {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--ink-900); color: var(--canvas); font-size: 12px; padding: 5px 9px; border-radius: 5px;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--dur-2) var(--ease);
  box-shadow: var(--shadow-2); z-index: 20;
}
.rail .item:hover .tip { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rail .item .ico-svg { transform: none !important; transition: none; } }

/* sidebar kontekstual */
.side {
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow-y: auto; position: relative; z-index: 2;
}
.side .grp-title {
  font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink-400);
  padding: var(--sp-4) var(--sp-4) var(--sp-1);
}
.side .grp-title:first-child { padding-top: var(--sp-4); }
.side nav { display: flex; flex-direction: column; padding: 0 var(--sp-2) var(--sp-3); gap: 1px; }
.side .lnk {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-input);
  color: var(--ink-700); text-decoration: none; font-size: 13px; cursor: pointer; border: 0; background: none;
  width: 100%; text-align: left;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.side .lnk .ico-svg { color: var(--ink-400); transition: transform 160ms var(--ease), color var(--dur-2) var(--ease); }
.side .lnk:hover { background: color-mix(in srgb, var(--brand-050) 70%, var(--surface)); color: var(--ink-900); }
.side .lnk:hover .ico-svg { color: var(--brand-700); transform: translateX(2px) scale(1.12); }
.side .lnk:active { transform: scale(.985); }
.side .lnk.aktif { background: var(--brand-050); color: var(--brand-700); font-weight: 550; box-shadow: inset 0 0 0 1px var(--brand-100); }
.side .lnk.aktif .ico-svg { color: var(--brand-700); transform: scale(1.12); }
.side .lnk.aktif:hover .ico-svg { transform: translateX(2px) scale(1.18); }
/* sub-menu masuk bertahap saat grup diganti; ikon item yang baru diklik "meloncat" sekali */
.side nav .lnk.masuk { animation: lnkMasuk 220ms var(--ease) both; }
@keyframes lnkMasuk { from { opacity: 0; transform: translateX(-10px); } }
.side .lnk.pop .ico-svg { animation: icoPop 300ms var(--ease); }
@keyframes icoPop { 0% { transform: scale(1); } 45% { transform: scale(1.35) rotate(-10deg); } 100% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .side nav .lnk.masuk, .side .lnk.pop .ico-svg { animation: none; }
  .side .lnk .ico-svg, .side .lnk:active { transform: none !important; }
}
.side .lnk .n-mini {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-400);
  background: var(--surface-3); padding: 1px 6px; border-radius: 8px;
}
.side .lnk.aktif .n-mini { background: var(--brand-100); color: var(--brand-700); }
.side .foot {
  margin-top: auto; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-500); display: flex; flex-direction: column; gap: 4px;
}
.side .foot .row { display: flex; align-items: center; gap: 6px; }
.side .foot .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--st-ok); flex: none; }

/* main + topbar */
.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; }
.top {
  height: 56px; flex: none; display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-5); border-bottom: 1px solid var(--line); background: var(--surface);
}
.top h1 { font-size: 16px; font-weight: 600; color: var(--ink-900); white-space: nowrap; }
.top .crumb { color: var(--ink-500); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.top .crumb .sep { color: var(--ink-400); }
.sp { flex: 1; }
.ctl {
  height: 34px; padding: 0 12px; border-radius: var(--r-input); border: 1px solid var(--line-strong);
  background: var(--surface); display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--ink-700); cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.ctl:hover { border-color: var(--ink-400); background: var(--surface-2); }
.ctl:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px;
}
.ctl.icon { width: 34px; padding: 0; justify-content: center; }
.ctl.aktif { border-color: var(--brand-600); color: var(--brand-700); background: var(--brand-050); }
.searchjump {
  height: 34px; width: 260px; border-radius: var(--r-input); border: 1px solid var(--line-strong);
  background: var(--surface-2); display: flex; align-items: center; gap: 8px; padding: 0 10px;
  color: var(--ink-500); font-size: 12.5px; cursor: pointer;
}
.searchjump kbd {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; background: var(--surface-3);
  border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 5px; color: var(--ink-500);
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand-700); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line-strong); cursor: pointer;
}
.bell-dot { position: relative; }
.bell-dot::after {
  content: ''; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 4px;
  background: var(--accent-500); border: 1.5px solid var(--surface);
}

.view { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.view-head h2 { font-size: 20px; font-weight: 600; color: var(--ink-900); letter-spacing: -.01em; }
.view-head .sub { font-size: 12.5px; color: var(--ink-500); margin-top: 3px; max-width: 62ch; }
.view-actions { display: flex; gap: var(--sp-2); flex: none; }

/* ══════════════════════════════════════════════════════════════
   CARD
   ══════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--card-pad);
}
.card.pad-0 { padding: 0; }
.card-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.card-head h3 { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.card-head .d { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); }
.col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }
.col-3 { grid-column: span 3; } .col-9 { grid-column: span 9; }
@media (max-width: 1180px) { .grid-12 > [class*="col-"] { grid-column: span 12; } }

/* ══════════════════════════════════════════════════════════════
   STAT RAIL — deretan angka dipisah hairline
   ══════════════════════════════════════════════════════════════ */
.statrail { display: flex; }
.statrail .st { flex: 1; padding: 0 var(--sp-5); border-left: 1px solid var(--line); min-width: 0; }
.statrail .st:first-child { border-left: 0; padding-left: 0; }
.statrail .lab { font-size: 11.5px; color: var(--ink-500); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.statrail .val { font-family: var(--font-mono); font-size: 24px; font-weight: 500; color: var(--ink-900);
  letter-spacing: -.01em; display: flex; align-items: baseline; gap: 6px; }
.statrail .val .unit { font-size: 12px; font-weight: 400; color: var(--ink-500); }
.statrail .val.accent { color: var(--accent-700); }
[data-theme="dark"] .statrail .val.accent { color: var(--accent-500); }
.statrail .delta { font-size: 11.5px; margin-top: 5px; display: flex; align-items: center; gap: 4px; }
.statrail .delta.up { color: var(--st-ok); } .statrail .delta.down { color: var(--st-risk); }
@media (max-width: 1180px) { .statrail { flex-wrap: wrap; gap: var(--sp-4); } .statrail .st { flex: 1 1 45%; border-left: 0; padding-left: 0; } }

/* ══════════════════════════════════════════════════════════════
   TRIPTYCH — motif khas: KAI · Mitra · Settlement berdampingan
   ══════════════════════════════════════════════════════════════ */
.triptych { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; }
.triptych.dua { grid-template-columns: 1fr 28px 1fr; }
.triptych .leg { padding: 0 var(--sp-4); min-width: 0; }
.triptych .leg:first-child { padding-left: 0; }
.triptych .leg:last-child { padding-right: 0; }
.triptych .leg .tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-400); margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
}
.triptych .leg .tag i { width: 6px; height: 6px; border-radius: 2px; flex: none; }
.triptych .leg .amt { font-family: var(--font-mono); font-size: 19px; color: var(--ink-900); font-weight: 500; }
.triptych .leg .sub { font-size: 11.5px; color: var(--ink-500); margin-top: 3px; }
.triptych .leg.off { opacity: .4; }
.triptych .gap { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; }
.triptych .gap .ln { width: 1px; flex: 1; background: var(--line-strong); }
.triptych .gap .ico-svg { color: var(--ink-400); flex: none; margin: 4px 0; }
.triptych .gap.risk .ico-svg { color: var(--st-risk); }
.triptych .gap.ok .ico-svg { color: var(--st-ok); }
@media (max-width: 1180px) {
  .triptych, .triptych.dua { grid-template-columns: 1fr; gap: var(--sp-3); }
  .triptych .gap { flex-direction: row; height: 1px; }
  .triptych .gap .ln { height: 1px; width: auto; }
}

/* ══════════════════════════════════════════════════════════════
   BAR SETTLEMENT (progress) — netral, tanpa gradasi
   ══════════════════════════════════════════════════════════════ */
.settlebar { height: 8px; border-radius: 4px; background: var(--surface-3); position: relative; overflow: visible; }
.settlebar i { display: block; height: 100%; border-radius: 4px; background: var(--ink-700); transition: width var(--dur-3) var(--ease); }
.settlebar .mark100 { position: absolute; top: -3px; bottom: -3px; right: 0; width: 2px; background: var(--line-strong); }
.settlebar-cap { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-500); margin-top: 6px; }
.settlebar-cap b { color: var(--ink-900); font-family: var(--font-mono); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════
   METER DEPOSIT — dengan garis ambang & margin
   ══════════════════════════════════════════════════════════════ */
.depometer { height: 10px; border-radius: 5px; background: var(--surface-3); position: relative; margin: 10px 0 4px; }
.depometer i { display: block; height: 100%; border-radius: 5px; background: var(--st-ok); transition: width var(--dur-3) var(--ease); }
.depometer.warn i { background: var(--st-warn); } .depometer.risk i { background: var(--st-risk); }
.depometer .thresh { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink-700); }
.depometer .thresh::after {
  content: attr(data-lab); position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--ink-500); white-space: nowrap; font-family: var(--font-mono);
}

/* ══════════════════════════════════════════════════════════════
   CHIP status
   ══════════════════════════════════════════════════════════════ */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 8px 2px 6px;
  border-radius: var(--r-chip); font-weight: 500; white-space: nowrap; }
.chip i { width: 6px; height: 6px; border-radius: 3px; flex: none; }
.chip.ok { color: var(--st-ok); background: var(--st-ok-bg); } .chip.ok i { background: var(--st-ok); }
.chip.risk { color: var(--st-risk); background: var(--st-risk-bg); } .chip.risk i { background: var(--st-risk); }
.chip.warn { color: var(--st-warn); background: var(--st-warn-bg); } .chip.warn i { background: var(--st-warn); }
.chip.prog { color: var(--st-progress); background: var(--st-progress-bg); } .chip.prog i { background: var(--st-progress); }
.chip.neu { color: var(--st-neutral); background: var(--st-neutral-bg); } .chip.neu i { background: var(--st-neutral); }
.chip.done { color: var(--st-done); background: var(--st-done-bg); } .chip.done i { background: var(--st-done); }
.chip.bare { background: none; padding-left: 0; }

/* badge channel kecil */
.chdot { width: 7px; height: 7px; border-radius: 2px; flex: none; display: inline-block; }

/* ══════════════════════════════════════════════════════════════
   TOMBOL
   ══════════════════════════════════════════════════════════════ */
.btn {
  height: 34px; padding: 0 14px; border-radius: var(--r-input); border: 1px solid transparent;
  font-size: 12.5px; font-weight: 550; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--action); color: #fff; }
.btn.primary:hover { background: var(--action-h); }
[data-theme="dark"] .btn.primary { color: var(--brand-900); }
.btn.secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink-700); }
.btn.secondary:hover { background: var(--surface-3); border-color: var(--ink-400); }
.btn.ghost { background: none; color: var(--ink-700); }
.btn.ghost:hover { background: var(--surface-3); }
.btn.danger { background: var(--st-risk-bg); color: var(--st-risk); }
.btn.danger:hover { background: var(--st-risk); color: #fff; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.block { width: 100%; justify-content: center; }

/* ══════════════════════════════════════════════════════════════
   BILAH SARINGAN + input + combobox
   ══════════════════════════════════════════════════════════════ */
.filterbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
.filterbar .grp { display: flex; align-items: center; gap: 6px; }
.filterbar label { font-size: 11.5px; color: var(--ink-500); white-space: nowrap; }
.fld {
  height: 34px; min-width: 160px; padding: 0 10px; border-radius: var(--r-input); border: 1px solid var(--line-strong);
  background: var(--surface); font-size: 12.5px; color: var(--ink-900);
}
.fld:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: transparent; }
input.fld[type="text"], input.fld[type="number"] { width: 100%; }
.combo {
  height: 34px; min-width: 170px; padding: 0 10px; border-radius: var(--r-input); border: 1px solid var(--line-strong);
  background: var(--surface); font-size: 12.5px; color: var(--ink-900); display: flex; align-items: center;
  gap: 8px; cursor: pointer; text-align: left; width: 100%;
}
.combo:hover { border-color: var(--ink-400); }
.combo[aria-expanded="true"] { border-color: var(--brand-600); outline: 2px solid var(--brand-100); outline-offset: -1px; }
.combo .teks { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo .ph { color: var(--ink-400); }
.combo .chev { color: var(--ink-400); transition: transform var(--dur-2) var(--ease); flex: none; }
.combo[aria-expanded="true"] .chev { transform: rotate(180deg); }
.combo.nonaktif { opacity: .5; cursor: not-allowed; }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; background: var(--brand-050);
  color: var(--brand-700); padding: 3px 4px 3px 9px; border-radius: 12px; border: 1px solid var(--brand-200);
}
.fchip button { width: 16px; height: 16px; border-radius: 50%; border: 0; background: none; color: inherit;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fchip button:hover { background: var(--brand-200); }

.combopop {
  position: fixed; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card);
  box-shadow: var(--shadow-3); z-index: 1000; overflow: hidden; display: flex; flex-direction: column;
}
.combopop-cari { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line);
  color: var(--ink-400); }
.combopop-cari input { border: 0; outline: 0; background: none; font: inherit; color: var(--ink-900); flex: 1; font-size: 13px; }
.combopop-list { overflow-y: auto; padding: 4px; max-height: 280px; }
.combopop-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none;
  padding: 7px 8px; border-radius: 5px; font-size: 12.5px; color: var(--ink-700); cursor: pointer;
}
.combopop-opt .tanda { width: 15px; flex: none; color: var(--brand-600); display: flex; }
.combopop-opt .lbl { display: flex; flex-direction: column; min-width: 0; }
.combopop-opt .lbl small { color: var(--ink-500); font-size: 11px; }
.combopop-opt mark { background: var(--accent-100); color: inherit; border-radius: 2px; }
.combopop-opt.sorot { background: var(--surface-3); }
.combopop-opt.pilih { color: var(--brand-700); font-weight: 550; }
.combopop-kosong { padding: 16px; text-align: center; color: var(--ink-500); font-size: 12.5px; }
.combopop-kaki { border-top: 1px solid var(--line); padding: 6px 8px; }
.combopop.atas { flex-direction: column-reverse; }

/* popover tanggal */
.datepop { padding: var(--sp-3); width: 300px; }
.datepop .quick { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--sp-2); }
.datepop .quick button { font-size: 11.5px; padding: 4px 9px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--surface); cursor: pointer; color: var(--ink-700); }
.datepop .quick button:hover { background: var(--surface-3); }
.datepop .cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.datepop .cal-head b { flex: 1; text-align: center; font-size: 12.5px; }
.datepop .cal-nav { width: 26px; height: 26px; border-radius: 5px; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ink-500); }
.datepop .cal-nav:hover { background: var(--surface-3); }
.datepop .grid7 { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; text-align: center; }
.datepop .dow { font-size: 10px; color: var(--ink-400); padding-bottom: 4px; }
.datepop .day { height: 28px; border: 0; background: none; border-radius: 5px; font-size: 12px; color: var(--ink-700);
  cursor: pointer; font-family: var(--font-mono); }
.datepop .day:hover { background: var(--surface-3); }
.datepop .day.luar { color: var(--ink-400); opacity: .5; }
.datepop .day.hari-ini { border: 1px solid var(--brand-600); }
.datepop .day.dipilih { background: var(--brand-700); color: #fff; }
.datepop .day.rentang { background: var(--brand-050); border-radius: 0; }
.datepop .day.rentang-mulai { border-radius: 5px 0 0 5px; }
.datepop .day.rentang-akhir { border-radius: 0 5px 5px 0; }
.datepop .kaki { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--line); }

/* ══════════════════════════════════════════════════════════════
   TABEL — DataTable kustom (bukan AG Grid): ringan, bertema penuh
   ══════════════════════════════════════════════════════════════ */
.tablewrap { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.tscroll { overflow-x: auto; }
table.dtab { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
table.dtab thead th {
  position: sticky; top: 0; background: var(--surface-2); z-index: 1; text-align: left; font-weight: 600;
  color: var(--ink-500); font-size: 11px; letter-spacing: .01em; text-transform: uppercase;
  padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; cursor: default;
}
table.dtab thead th.num { text-align: right; }
table.dtab thead th.srt { cursor: pointer; user-select: none; }
table.dtab thead th.srt:hover { color: var(--ink-700); }
table.dtab thead th .arr { margin-left: 4px; opacity: .5; }
table.dtab thead th.srt.aktif .arr { opacity: 1; color: var(--brand-600); }
table.dtab tbody td { padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink-700); vertical-align: middle; }
table.dtab tbody td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-900); }
table.dtab tbody tr:last-child td { border-bottom: 0; }
table.dtab tbody tr.klik { cursor: pointer; }
table.dtab tbody tr.klik:hover td { background: var(--surface-2); }
table.dtab tbody tr.tanda td:first-child { box-shadow: inset 3px 0 0 var(--accent-500); }
table.dtab tfoot td {
  padding: 9px 12px; font-weight: 600; color: var(--ink-900); background: var(--surface-2);
  border-top: 1px solid var(--line-strong); position: sticky; bottom: 0;
}
table.dtab tfoot td.num { text-align: right; font-family: var(--font-mono); }
.cellsub { display: block; font-size: 11px; color: var(--ink-500); margin-top: 1px; }
.tab-toolbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-500); flex-wrap: wrap; }
.tab-toolbar .sp { flex: 1; }
.pager { display: flex; align-items: center; gap: 4px; }
.pager button { width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--surface);
  cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-700); }
.pager button:hover:not([disabled]) { background: var(--surface-3); }
.pager button[disabled] { opacity: .4; cursor: not-allowed; }
.pager .pos { font-family: var(--font-mono); font-size: 12px; padding: 0 6px; }

.rowflag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--st-warn); }

/* ══════════════════════════════════════════════════════════════
   TAB (segmented)
   ══════════════════════════════════════════════════════════════ */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs button {
  padding: 9px 4px; margin-right: var(--sp-5); border: 0; background: none; cursor: pointer;
  font-size: 13px; color: var(--ink-500); border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 6px;
}
.tabs button:hover { color: var(--ink-900); }
.tabs button.aktif { color: var(--brand-700); border-bottom-color: var(--brand-700); font-weight: 600; }
.tabs button .n-mini { font-family: var(--font-mono); font-size: 10.5px; background: var(--surface-3); color: var(--ink-500);
  padding: 1px 6px; border-radius: 8px; }
.tabs button.aktif .n-mini { background: var(--brand-100); color: var(--brand-700); }

/* ══════════════════════════════════════════════════════════════
   DRAWER + SCRIM + MODAL
   ══════════════════════════════════════════════════════════════ */
.scrim { position: fixed; inset: 0; background: rgba(14,15,20,.42); z-index: 60; animation: fadeIn var(--dur-3) var(--ease); }
[data-theme="dark"] .scrim { background: rgba(0,0,0,.6); }
@keyframes fadeIn { from { opacity: 0; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 640px; max-width: 92vw; background: var(--surface);
  border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-3); z-index: 61; display: flex; flex-direction: column;
  animation: slideIn var(--dur-3) var(--ease);
}
@keyframes slideIn { from { transform: translateX(24px); opacity: 0; } }
.drawer header { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line); flex: none; }
.drawer header h3 { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.drawer header .d { font-size: 12px; color: var(--ink-500); margin-top: 3px; }
.drawer .body { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.drawer footer { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); display: flex; justify-content: flex-end;
  gap: var(--sp-2); flex: none; background: var(--surface-2); }

.modal-wrap { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
.modal {
  background: var(--surface); border-radius: var(--r-modal); box-shadow: var(--shadow-3); width: 520px; max-width: 100%;
  max-height: 86vh; display: flex; flex-direction: column; animation: pop var(--dur-3) var(--ease);
}
@keyframes pop { from { transform: scale(.97); opacity: 0; } }
.modal header { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.modal header h3 { font-size: 15px; font-weight: 600; }
.modal .body { padding: var(--sp-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-4); }
.modal footer { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* ══════════════════════════════════════════════════════════════
   FORM
   ══════════════════════════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 550; color: var(--ink-700); }
.field label .req { color: var(--st-risk); margin-left: 2px; }
.field .hint { font-size: 11.5px; color: var(--ink-500); }
.field textarea.fld { height: 84px; padding: 8px 10px; resize: vertical; width: 100%; font: inherit; }
.field .err { font-size: 11.5px; color: var(--st-risk); }
.field.invalid .fld { border-color: var(--st-risk); }
.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 700px) { .formrow { grid-template-columns: 1fr; } }
.switch { width: 36px; height: 20px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--line-strong);
  position: relative; cursor: pointer; flex: none; }
.switch i { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface);
  box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease); }
.switch.on { background: var(--accent-500); border-color: var(--accent-500); }
.switch.on i { transform: translateX(16px); }

/* ══════════════════════════════════════════════════════════════
   WIZARD — stepper bernomor di kiri drawer (S-16)
   ══════════════════════════════════════════════════════════════ */
.wizard { display: grid; grid-template-columns: 180px 1fr; gap: var(--sp-5); flex: 1; min-height: 0; }
.wizard-steps { display: flex; flex-direction: column; gap: 2px; }
.wizard-steps .ws {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: var(--r-input);
  color: var(--ink-500); font-size: 12.5px; position: relative;
}
.wizard-steps .ws .num {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; flex: none;
}
.wizard-steps .ws.aktif { color: var(--brand-700); font-weight: 600; background: var(--brand-050); }
.wizard-steps .ws.aktif .num { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.wizard-steps .ws.selesai .num { background: var(--st-ok-bg); border-color: var(--st-ok); color: var(--st-ok); }
.wizard-body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 720px) { .wizard { grid-template-columns: 1fr; } .wizard-steps { flex-direction: row; overflow-x: auto; } }

/* ══════════════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════════════ */
.toasts { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: flex-start; gap: 10px; background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-3); border-radius: var(--r-card); padding: 12px 14px; width: 320px; font-size: 12.5px;
  color: var(--ink-700); animation: pop var(--dur-3) var(--ease); }
.toast b { display: block; color: var(--ink-900); margin-bottom: 2px; }
.toast.ok .ico-svg { color: var(--st-ok); } .toast.risk .ico-svg { color: var(--st-risk); } .toast.info .ico-svg { color: var(--brand-600); }

/* ══════════════════════════════════════════════════════════════
   KEADAAN kosong / galat / memuat
   ══════════════════════════════════════════════════════════════ */
.state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: var(--sp-7) var(--sp-5); color: var(--ink-500); gap: var(--sp-2); }
.state .ico-svg { width: 32px; height: 32px; color: var(--ink-400); margin-bottom: 6px; }
.state b { color: var(--ink-900); font-size: 13.5px; }
.state p { max-width: 46ch; font-size: 12.5px; }
.state.warn .ico-svg { color: var(--st-warn); } .state.risk .ico-svg { color: var(--st-risk); }
.skel { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) { .skel { background-size: 400% 100%; animation: shimmer 1.4s ease infinite; } }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.disclaimer {
  display: flex; gap: 10px; padding: 12px 14px; background: var(--st-neutral-bg); border: 1px solid var(--line);
  border-radius: var(--r-card); font-size: 12px; color: var(--ink-700); line-height: 1.6;
}
.disclaimer .ico-svg { color: var(--ink-500); flex: none; margin-top: 1px; }

.notice-stale {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--st-warn);
  background: var(--st-warn-bg); padding: 2px 7px; border-radius: 10px;
}
.asumsi { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--accent-700);
  background: var(--accent-100); padding: 1px 6px; border-radius: 8px; font-weight: 600; letter-spacing: .01em; }
[data-theme="dark"] .asumsi { color: var(--accent-500); }

/* ══════════════════════════════════════════════════════════════
   PANEL "yang perlu dilihat" / kartu ringkas kecil
   ══════════════════════════════════════════════════════════════ */
.miniline { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.miniline:last-child { border-bottom: 0; }
.miniline .ch { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex: none; }
.miniline .txt { flex: 1; min-width: 0; }
.miniline .txt b { color: var(--ink-900); display: block; }
.miniline .txt small { color: var(--ink-500); }
.miniline .v { font-family: var(--font-mono); color: var(--ink-900); text-align: right; }

/* sparkline small-multiple */
.spark { display: block; }

/* command palette */
.cmdk-wrap { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh; }
.cmdk { width: 560px; max-width: 92vw; background: var(--surface); border-radius: var(--r-modal); box-shadow: var(--shadow-3);
  border: 1px solid var(--line-strong); overflow: hidden; animation: pop var(--dur-2) var(--ease); }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink-400); }
.cmdk-in input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--ink-900); }
.cmdk-list { max-height: 360px; overflow-y: auto; padding: 6px; }
.cmdk-grp { font-size: 10.5px; color: var(--ink-400); padding: 8px 10px 4px; text-transform: uppercase; letter-spacing: .03em; }
.cmdk-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.cmdk-opt .ico-svg { color: var(--ink-400); }
.cmdk-opt.sorot { background: var(--surface-3); }
.cmdk-opt small { margin-left: auto; color: var(--ink-500); font-size: 11px; }

/* ══════════════════════════════════════════════════════════════
   LOGIN
   ══════════════════════════════════════════════════════════════ */
.loginpage { min-height: 100vh; display: grid; grid-template-columns: 1fr 460px; background: var(--canvas); }
.loginpage .art {
  background: var(--brand-navy); position: relative; overflow: hidden; display: flex; flex-direction: column;
  justify-content: space-between; padding: 30px var(--sp-7);
}
.loginpage .art .top-mark { display: flex; align-items: center; gap: 12px; }
.loginpage .art .top-mark .chip-mark { width: 44px; height: 44px; border-radius: 10px; background: var(--surface);
  display: flex; align-items: center; justify-content: center; }
.loginpage .art .top-mark .chip-mark img { width: 30px; }
.loginpage .art .top-mark span { color: rgba(255,255,255,.7); font-size: 13px; border-left: 1px solid rgba(255,255,255,.2);
  padding-left: 12px; }
.loginpage .art .headline { color: #fff; max-width: 46ch; margin-top: 24px; }
.loginpage .art .headline h2 { font-size: 29px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; max-width: 26ch; }
.loginpage .art .headline h2 .hl { color: var(--accent-500); }
.loginpage .art .headline p { color: rgba(255,255,255,.62); font-size: 13.5px; margin-top: 14px; line-height: 1.75; }

/* orkestrasi masuk panel kiri — ditunda sampai splash mulai memudar, supaya logo+nama
   PT KAI di splash (besar, tengah) dan di top-mark (kecil, pojok) tidak pernah terlihat
   penuh berbarengan ("numpuk") saat berpindah dari splash ke halaman login. */
.loginpage .art .top-mark,
.loginpage .art .headline,
.loginpage .art .flow-wrap,
.loginpage .art .ticker,
.loginpage .art .ledger {
  opacity: 0; transform: translateY(8px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.loginpage .art.siap .top-mark { opacity: 1; transform: none; }
.loginpage .art.siap .headline { opacity: 1; transform: none; transition-delay: 70ms; }
.loginpage .art.siap .flow-wrap { opacity: 1; transform: none; transition-delay: 150ms; }
.loginpage .art.siap .ticker { opacity: 1; transform: none; transition-delay: 220ms; }
.loginpage .art.siap .ledger { opacity: 1; transform: none; transition-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  .loginpage .art .top-mark, .loginpage .art .headline, .loginpage .art .flow-wrap,
  .loginpage .art .ticker, .loginpage .art .ledger { transition: none; }
}
.loginpage .art .ledger { display: flex; gap: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--sp-4); }
.loginpage .art .ledger .lg { flex: 1; padding: 0 var(--sp-4); border-left: 1px solid rgba(255,255,255,.14); }
.loginpage .art .ledger .lg:first-child { border-left: 0; padding-left: 0; }
.loginpage .art .ledger .lg b { display: block; color: #fff; font-family: var(--font-mono); font-size: 18px; margin-bottom: 3px; }
.loginpage .art .ledger .lg span { color: rgba(255,255,255,.55); font-size: 11.5px; }
.loginpage .art .stripe { position: absolute; right: -60px; bottom: -80px; width: 340px; height: 340px; opacity: .5;
  background: conic-gradient(from 200deg, var(--accent-500), transparent 35%); border-radius: 50%; filter: blur(50px); }
.loginpage .panel { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-7); background: var(--surface); }
.loginpage .panel .lead { margin-bottom: var(--sp-6); }
.loginpage .panel .lead h1 { font-size: 21px; font-weight: 600; color: var(--ink-900); }
.loginpage .panel .lead p { font-size: 12.5px; color: var(--ink-500); margin-top: 6px; }
.loginpage form { display: flex; flex-direction: column; gap: var(--sp-4); }
.loginpage .fld-lg { height: 42px; }
.loginpage .row-between { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.loginpage .divider { display: flex; align-items: center; gap: 10px; color: var(--ink-400); font-size: 11.5px; margin: 4px 0; }
.loginpage .divider::before, .loginpage .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.loginpage .foot-note { margin-top: var(--sp-6); font-size: 11.5px; color: var(--ink-400); text-align: center; }
@media (max-width: 980px) { .loginpage { grid-template-columns: 1fr; } .loginpage .art { display: none; } }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE shell — 1024 & 768
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .shell { grid-template-columns: var(--rail-w) 1fr; }
  .side { position: fixed; left: var(--rail-w); top: 0; bottom: 0; width: var(--side-w); z-index: 40;
    transform: translateX(-100%); transition: transform var(--dur-3) var(--ease); box-shadow: var(--shadow-3); }
  .side.buka { transform: translateX(0); }
}
@media (max-width: 860px) {
  .top { padding: 0 var(--sp-4); gap: 6px; }
  .top .ctl span.lbl-full { display: none; }
  .view { padding: var(--sp-4); }
}

/* util */
.menu-toggle { display: none; }
@media (max-width: 1180px) { .menu-toggle { display: inline-flex; } }
.flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.tright { text-align: right; } .muted { color: var(--ink-500); } .w-full { width: 100%; }

/* ══════════════════════════════════════════════════════════════
   VIZ — komponen grafik (charts.js). Mengikuti skill dataviz:
   grid/axis hairline recessive, legenda selalu ada untuk ≥2 seri,
   tooltip mengambang bersama, tanpa border di sekeliling mark.
   ══════════════════════════════════════════════════════════════ */
.viz-svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz-grid { stroke: var(--line); stroke-width: 1; }
.viz-axis-line { stroke: var(--line-strong); stroke-width: 1; }
.viz-axis { font: 10.5px var(--font-mono); fill: var(--ink-500); }
.viz-axis-sm { font: 9.5px var(--font-mono); fill: var(--ink-500); }
.viz-endlabel { font: 600 11px var(--font-mono); }
.viz-donut-val { font: 600 20px var(--font-ui); fill: var(--ink-900); }
.viz-donut-lbl { font: 11px var(--font-ui); fill: var(--ink-500); }
.viz-donut-seg { cursor: pointer; transition: opacity var(--dur-1) var(--ease); }
.viz-donut-seg:hover { opacity: .85; }
.viz-pt { cursor: pointer; transition: r var(--dur-1) var(--ease); }
.viz-pt:hover { r: 7; }
.viz-cal-cell { cursor: pointer; }
.viz-cal-cell:hover { stroke: var(--ink-700); stroke-width: 1.5; }
.viz-cal-today { stroke: var(--ink-900); stroke-width: 1.5; }
.viz-note { font-size: 11px; color: var(--ink-500); margin-top: 10px; line-height: 1.5; }

/* bar list / bullet — batang per entitas + garis acuan (ambang) */
.viz-bars { display: flex; flex-direction: column; gap: 9px; }
.viz-bar-row { display: grid; grid-template-columns: minmax(150px, 34%) 1fr 86px; align-items: center; gap: 10px; }
.viz-bar-lbl { font-size: 12px; color: var(--ink-700); line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* sub-label boleh melipat ke baris kedua — dipotong "…" membuat angka pentingnya hilang */
.viz-bar-lbl small { display: block; font-size: 10.5px; color: var(--ink-500); white-space: normal; line-height: 1.3; }
.viz-bar-track { position: relative; height: 14px; background: var(--surface-3); border-radius: 4px; }
.viz-bar-fill { height: 100%; border-radius: 4px; transition: width var(--dur-3) var(--ease); }
.viz-bar-band { position: absolute; top: -3px; bottom: -3px; background: color-mix(in srgb, var(--st-warn) 16%, transparent); border-radius: 3px; }
.viz-bar-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; transform: translateX(-1px); }
.viz-bar-val { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.viz-bar-key { display: flex; gap: 12px; font-size: 11px; color: var(--ink-500); margin-left: auto; align-items: center; }
.viz-bar-key i { display: inline-block; width: 2px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 1px; }

/* kartu per mitra deposit — gauge + sparkline + perkiraan */
/* 4 kolom tetap: 8 mitra = dua baris penuh, bukan 6+2 yang menyisakan baris bolong */
.dep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 1180px) { .dep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dep-grid { grid-template-columns: 1fr; } }
.dep-card { border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dep-card .dep-nm { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-900); }
.dep-card .dep-nm > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-card .dep-spark { display: flex; align-items: center; justify-content: center; }
.dep-card .dep-foot { font-size: 11px; color: var(--ink-500); line-height: 1.55; }
.dep-card .dep-foot b { color: var(--ink-700); font-weight: 550; font-family: var(--font-mono); }
.dep-card .dep-foot .neg { color: var(--st-risk); }
.card-sep { height: 1px; background: var(--line); margin: 12px 0; }
.mono { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
/* pipeline — tahapan dengan satuan yang bisa berganti */
.viz-pipe { display: flex; align-items: stretch; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.viz-pipe-st { flex: 1 1 0; min-width: 104px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.viz-pipe-st .v { font-family: var(--font-mono); font-size: 18px; color: var(--ink-900); display: flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; }
.viz-pipe-st .v span { font-size: 10.5px; color: var(--ink-500); font-family: var(--font-ui); }
.viz-pipe-st .l { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.viz-pipe-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-400); min-width: 46px; }
.viz-pipe-arrow b { font-family: var(--font-mono); font-size: 11px; color: var(--ink-700); font-weight: 500; }
.viz-pipe-arrow b.neg { color: var(--st-risk); }
.viz-pipe-arrow small { font-size: 10px; color: var(--ink-400); }
.dq-cal-row { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.dq-cal-row > div:first-child { flex: none; max-width: 300px; }   /* kalender: judulnya boleh melipat, jangan melebar */
.dq-cal-row > div:last-child { flex: 1; min-width: 280px; }

.viz-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.viz-head b { font-size: 12.5px; color: var(--ink-900); font-weight: 600; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.viz-legend-it { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-700); }
.viz-legend-it i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.viz-head .viz-legend { margin-left: 0; }
.viz-head > .viz-legend + .viz-tbl-btn, .viz-head b + .viz-tbl-btn { margin-left: auto; }

.viz-tbl-btn {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-500);
  background: none; border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 9px; cursor: pointer;
}
.viz-tbl-btn:hover { background: var(--surface-3); color: var(--ink-900); }

.viz-tooltip {
  position: fixed; z-index: 200; display: none; pointer-events: none; background: var(--ink-900); color: var(--canvas);
  font-size: 11.5px; line-height: 1.6; padding: 8px 10px; border-radius: 6px; box-shadow: var(--shadow-3); max-width: 240px;
}
[data-theme="dark"] .viz-tooltip { background: var(--surface-2); color: var(--ink-900); border: 1px solid var(--line-strong); }

.viz-radar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px 20px; }
.viz-scatter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.viz-radar-one, .viz-scatter-one { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.viz-radar-cap, .viz-scatter-cap { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-700); font-weight: 550; }
.viz-radar-cap i, .viz-scatter-cap i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.viz-scatter-cap { align-self: flex-start; }

.viz-cal-legend { display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--ink-500); margin-left: auto; }
.viz-cal-legend i { width: 9px; height: 9px; border-radius: 2px; }

.viz-funnel { display: flex; flex-direction: column; gap: 10px; }
.viz-funnel-row { display: grid; grid-template-columns: 130px 1fr 70px; align-items: center; gap: 10px; }
.viz-funnel-lbl { font-size: 12px; color: var(--ink-700); }
.viz-funnel-track { height: 22px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.viz-funnel-fill { height: 100%; border-radius: 5px; transition: width var(--dur-3) var(--ease); }
.viz-funnel-val { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--ink-900); }

/* flex:none WAJIB — .view adalah flex kolom dengan tinggi terbatas; item yang punya
   overflow:auto boleh menyusut sampai 0 saat isi halaman lebih tinggi dari layar,
   sehingga deretan tab ini pernah "hilang" jadi garis 2px di dashboard yang panjang. */
.dash-tabs { display: flex; flex: none; gap: 4px; overflow-x: auto; padding-bottom: 2px; margin-bottom: var(--sp-2); }
.dash-tabs button {
  flex: none; display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid transparent; background: none; color: var(--ink-500); font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.dash-tabs button:hover { background: var(--surface-3); color: var(--ink-900); }
.dash-tabs button.aktif { background: var(--brand-050); color: var(--brand-700); border-color: var(--brand-200); font-weight: 600; }
.dash-tabs button .ico-svg { color: inherit; }