/* ── motion tokens ──────────────────────────────────────────
   Semua durasi/curve dari tabel, bukan dikira-kira.
   transform + opacity saja. Tidak ada transition:all.      */
:root{
  --dur-press:130ms;
  --dur-hover:130ms;
  --dur-state:180ms;
  --dur-view:220ms;
  --dur-drawer:300ms;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --stagger:34ms;
}
:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c232d;
  --line:#273040; --line-soft:#1e242e;
  --txt:#e6edf3; --muted:#8b98a9;
  --brand:#8fbc3d; --btn:#587d19; --btn-fg:#ffffff;
  --ok:#22c55e; --warn:#f59e0b; --danger:#f87171; --info:#38bdf8;
  --radius:14px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
html[data-theme="light"]{
  --bg:#f3f5f2; --panel:#ffffff; --panel2:#eaeFE8;
  --line:#d2dad0; --line-soft:#e4eae2;
  --txt:#131a14; --muted:#5a6a5d;
  --brand:#42600f; --btn:#42600f; --btn-fg:#ffffff;
  --ok:#146c34; --warn:#a34e08; --danger:#b91c1c; --info:#0369a1;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-gutter:stable}
body{
  background:var(--bg);color:var(--txt);min-height:100vh;
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--dur-state) var(--ease-out),
             color var(--dur-state) var(--ease-out);
}
a{color:var(--brand);text-decoration:none}
b,strong{font-weight:650}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ── shell ─────────────────────────────────────────────── */
.shell{display:flex;min-height:100vh}
.side{
  width:216px;flex:0 0 216px;background:var(--panel);
  border-right:1px solid var(--line);padding:16px 12px;
  display:flex;flex-direction:column;gap:16px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  transition:background-color var(--dur-state) var(--ease-out),
             border-color var(--dur-state) var(--ease-out);
}
.brand{display:flex;align-items:center;gap:10px;padding:0 4px}
.mark{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;
  background:linear-gradient(135deg,var(--brand),var(--btn));
  display:grid;place-items:center;font-weight:800;color:#fff;font-size:13px;
}
.brand strong{display:block;font-size:13.5px;letter-spacing:-.01em}
.brand small{display:block;color:var(--muted);font-size:10.5px;letter-spacing:.02em;margin-top:1px}
nav{display:flex;flex-direction:column;gap:1px}
nav .grp{
  color:var(--muted);font-size:9.6px;text-transform:uppercase;
  letter-spacing:.1em;padding:13px 9px 5px;font-weight:680;
}
nav a{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;
  color:var(--txt);font-size:13px;position:relative;
  transition:background-color var(--dur-hover) ease,
             color var(--dur-hover) ease;
}
nav a .dot{
  width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.4;
  transition:opacity var(--dur-hover) ease,
             transform var(--dur-state) var(--ease-out);
}
nav a.on{background:var(--btn);color:var(--btn-fg);font-weight:600}
nav a.on .dot{opacity:1;transform:scale(1.35)}
nav a .nbadge{
  margin-left:auto;font-family:var(--mono);font-size:9.8px;font-weight:700;
  padding:1px 5px;border-radius:20px;background:rgba(245,158,11,.18);color:var(--warn);
}
nav a.on .nbadge{background:rgba(0,0,0,.25);color:#fff}
.sidefoot{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:11px;color:var(--muted);line-height:1.55;
}
.sidefoot .sk{color:var(--brand);font-weight:650}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 22px;border-bottom:1px solid var(--line);
  background:var(--panel);position:sticky;top:0;z-index:12;
  transition:background-color var(--dur-state) var(--ease-out),
             border-color var(--dur-state) var(--ease-out);
}
.topbar h1{font-size:17px;letter-spacing:-.02em;font-weight:680}
.topbar .sub{color:var(--muted);font-size:11.4px;margin-top:1px}
.right{margin-left:auto;display:flex;align-items:center;gap:10px}
.who{display:flex;align-items:center;gap:8px;font-size:12.5px}
.avi{
  width:27px;height:27px;border-radius:50%;background:var(--panel2);
  border:1px solid var(--line);display:grid;place-items:center;
  font-size:10.5px;font-weight:700;color:var(--brand);
  transition:background-color var(--dur-state) ease,border-color var(--dur-state) ease;
}
.who .nm{font-weight:620}
.who .rl{font-size:10.4px;color:var(--muted);font-family:var(--mono)}
.content{padding:18px 22px 90px;display:flex;flex-direction:column;gap:16px;max-width:1480px;width:100%}

/* ── role switch ───────────────────────────────────────── */
.switch{display:flex;gap:3px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:3px}
.switch button{
  font:inherit;font-size:11.8px;font-weight:600;color:var(--muted);
  background:none;border:0;padding:5px 11px;border-radius:7px;cursor:pointer;
  transition:background-color var(--dur-state) var(--ease-out),
             color var(--dur-state) var(--ease-out);
}
.switch button.on{background:var(--btn);color:var(--btn-fg)}
.tbtn{
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  width:30px;height:30px;border-radius:8px;cursor:pointer;font:inherit;font-size:13px;
  display:grid;place-items:center;
  transition:background-color var(--dur-hover) ease,color var(--dur-hover) ease,
             border-color var(--dur-hover) ease,transform var(--dur-press) var(--ease-out);
}
.tbtn:active{transform:scale(.94)}
.burger{display:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ── view transition ───────────────────────────────────── */
.view{display:flex;flex-direction:column;gap:16px}
.view[hidden]{display:none}
@starting-style{
  .view{opacity:0;transform:translateY(9px)}
}
.view{
  opacity:1;transform:none;
  transition:opacity var(--dur-view) var(--ease-out),
             transform var(--dur-view) var(--ease-out);
}
/* stagger anak-anak view; keyframes hanya dipakai di sini karena
   pemicunya jarang (ganti peran), bukan aksi yang bisa di-spam */
@keyframes rise{
  from{opacity:0;transform:translateY(10px)}
}
.view.anim > *{
  animation:rise var(--dur-view) var(--ease-out) both;
  animation-delay:calc(var(--i,0) * var(--stagger));
}
@keyframes barGrow{ from{transform:scaleX(0)} }

/* ── cards ─────────────────────────────────────────────── */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
  transition:background-color var(--dur-state) var(--ease-out),
             border-color var(--dur-state) var(--ease-out);
}
.cardhead{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.cardhead h2{font-size:12.4px;font-weight:660;letter-spacing:.01em}
.cnt{
  font-family:var(--mono);font-size:10.4px;padding:1px 6px;border-radius:20px;
  background:var(--panel2);color:var(--muted);border:1px solid var(--line);
}
.cardhead .link{margin-left:auto;font-size:11.4px;font-weight:620}
.cardbody{padding:14px}
.cardbody.flush{padding:0}

/* ── kpi ───────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}
@media(max-width:1240px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;min-width:0;
  transition:border-color var(--dur-hover) ease;
}
@media(hover:hover) and (pointer:fine){
  .kpi:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
}
.kpi .lbl{color:var(--muted);font-size:10.3px;text-transform:uppercase;letter-spacing:.07em;font-weight:670}
.kpi .val{
  font-family:var(--mono);font-size:22px;font-weight:600;margin-top:5px;
  letter-spacing:-.03em;line-height:1.15;display:flex;align-items:baseline;gap:1px;
}
.kpi .val .u{font-size:.52em;color:var(--muted);font-family:inherit;font-weight:500;letter-spacing:0}
/* 5 kartu di grid 2 kolom menyisakan lubang; kartu terakhir melebar penuh */
@media(max-width:720px){
  .kpis > .kpi:last-child:nth-child(odd){grid-column:1/-1}
}
.kpi .delta{font-size:11px;margin-top:4px;color:var(--muted);line-height:1.35}
.kpi.warn .val{color:var(--warn)}
.kpi.danger .val{color:var(--danger)}
.kpi.ok .val{color:var(--ok)}

/* ── table ─────────────────────────────────────────────── */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12.6px}
th{
  text-align:left;padding:8px 14px;color:var(--muted);font-size:10.3px;
  text-transform:uppercase;letter-spacing:.06em;font-weight:670;
  border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel2);
  transition:background-color var(--dur-state) ease;
}
/* header tabel yang bisa di-scroll harus nempel di atas */
.tw th{position:sticky;top:0;z-index:2}
td{padding:9px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr{transition:opacity var(--dur-state) var(--ease-out),
                    transform var(--dur-state) var(--ease-out),
                    background-color var(--dur-hover) ease}
tbody tr:last-child td{border-bottom:0}
@media(hover:hover) and (pointer:fine){
  tbody tr:hover{background:var(--panel2)}
}
tbody tr.leaving{opacity:0;transform:translateX(-14px)}
td.r,th.r{text-align:right}
td.mono{font-family:var(--mono);font-size:11.4px}
.t1{font-weight:600}
.t2{color:var(--muted);font-size:11.2px}
.sku{font-family:var(--mono);font-size:10.9px;color:var(--muted)}

/* ── chips ─────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:5px;font-size:10.4px;font-weight:660;
  padding:2px 7px;border-radius:20px;border:1px solid var(--line);
  background:var(--panel2);color:var(--muted);white-space:nowrap;
  transition:background-color var(--dur-state) ease,color var(--dur-state) ease,
             border-color var(--dur-state) ease;
}
.chip .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.chip.ok{background:rgba(34,197,94,.13);color:var(--ok);border-color:rgba(34,197,94,.32)}
.chip.warn{background:rgba(245,158,11,.13);color:var(--warn);border-color:rgba(245,158,11,.32)}
.chip.danger{background:rgba(248,113,113,.13);color:var(--danger);border-color:rgba(248,113,113,.32)}
.chip.info{background:rgba(56,189,248,.13);color:var(--info);border-color:rgba(56,189,248,.3)}
.chip.brand{background:rgba(143,188,61,.15);color:var(--brand);border-color:rgba(143,188,61,.36)}

/* filter chips — state toggle */
.fchips{display:flex;gap:6px;flex-wrap:wrap}
.pager{display:flex;align-items:center;gap:8px}
.pager .btn{min-width:30px;padding:4px 8px}
.pager .btn:disabled{opacity:.35;cursor:not-allowed}
.fchip{
  font:inherit;font-size:11.4px;font-weight:620;color:var(--muted);
  background:none;border:1px solid var(--line);padding:4px 10px;border-radius:20px;
  cursor:pointer;
  transition:background-color var(--dur-hover) ease,color var(--dur-hover) ease,
             border-color var(--dur-hover) ease;
}
.fchip.on{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  font:inherit;font-size:12.2px;font-weight:620;padding:7px 13px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel2);color:var(--txt);cursor:pointer;
  transition:background-color var(--dur-hover) ease,border-color var(--dur-hover) ease,
             color var(--dur-hover) ease,transform var(--dur-press) var(--ease-out);
}
.btn:active{transform:scale(.975)}
.btn.pri{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.btn.sm{padding:4px 9px;font-size:11.2px;border-radius:7px}
.btn.gh{background:none}
.btn.done{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.4);color:var(--ok)}
.rowacts{display:flex;gap:5px;justify-content:flex-end}

/* ── alerts ────────────────────────────────────────────── */
.alerts{display:flex;flex-direction:column;gap:9px}
.alert{
  display:flex;gap:11px;padding:11px 13px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel2);align-items:flex-start;
  transition:border-color var(--dur-hover) ease,background-color var(--dur-hover) ease;
}
.alert .ic{
  width:22px;height:22px;flex:0 0 22px;border-radius:6px;display:grid;place-items:center;
  font-size:11px;font-weight:800;
}
.alert.danger{border-color:rgba(248,113,113,.32);background:rgba(248,113,113,.07)}
.alert.danger .ic{background:rgba(248,113,113,.18);color:var(--danger)}
.alert.warn{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.06)}
.alert.warn .ic{background:rgba(245,158,11,.16);color:var(--warn)}
.alert.info{border-color:rgba(56,189,248,.28);background:rgba(56,189,248,.06)}
.alert.info .ic{background:rgba(56,189,248,.16);color:var(--info)}
.alert .tt{font-weight:640;font-size:12.6px;line-height:1.35}
.alert .bb{color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.45}
.alert .go{margin-left:auto;flex:0 0 auto;align-self:center}

/* ── approval chain ────────────────────────────────────── */
.chain{display:flex;flex-direction:column}
.step{display:flex;gap:12px;position:relative;padding-bottom:15px}
.step:last-child{padding-bottom:0}
.step:not(:last-child)::before{
  content:"";position:absolute;left:11px;top:24px;bottom:0;width:1.5px;background:var(--line);
}
.step .n{
  width:23px;height:23px;flex:0 0 23px;border-radius:50%;z-index:1;
  display:grid;place-items:center;font-size:10.4px;font-weight:700;
  background:var(--panel2);border:1.5px solid var(--line);color:var(--muted);
  transition:background-color var(--dur-state) ease,border-color var(--dur-state) ease,
             color var(--dur-state) ease;
}
.step.done .n{background:var(--ok);border-color:var(--ok);color:#04140a}
.step.cur .n{background:var(--warn);border-color:var(--warn);color:#1a1000}
/* langkah notifikasi: bukan gate approval, jadi tidak diberi nomor */
.step.notify .n{border-style:dashed;color:var(--info);border-color:rgba(56,189,248,.5);background:none}
.step.notify:not(:last-child)::before{
  background:none;
  background-image:linear-gradient(var(--line) 55%,transparent 0);
  background-size:1.5px 6px;background-repeat:repeat-y;
}
.step .tx{flex:1;min-width:0;padding-top:1px}
.step .tx b{font-size:12.5px;display:block}
.step .tx .m{color:var(--muted);font-size:11.3px;margin-top:1px}
.step .tx .m em{font-style:normal;color:var(--info)}

/* ── bars ──────────────────────────────────────────────── */
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:98px 1fr 74px;gap:10px;align-items:center;font-size:12px}
.bar .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:560}
.bar .tr{height:7px;background:var(--panel2);border-radius:5px;overflow:hidden;border:1px solid var(--line-soft)}
.bar .fl{
  height:100%;background:var(--brand);border-radius:5px;transform-origin:left center;
  transform:scaleX(var(--w,.5));
}
.view.anim .bar .fl{animation:barGrow 420ms var(--ease-out) both;
  animation-delay:calc(.2s + var(--i,0) * var(--stagger))}
.bar .vl{text-align:right;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}

/* ── accordion (satu-satunya tempat height boleh ikut) ─── */
.acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-state) var(--ease-out)}
.acc.open{grid-template-rows:1fr}
.acc > .in{overflow:hidden}
.acc .body{
  padding:0 14px 0;opacity:0;
  transition:opacity var(--dur-state) var(--ease-out),padding var(--dur-state) var(--ease-out);
}
.acc.open .body{opacity:1;padding:0 14px 12px}
.detailgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px}
.detailgrid .k{color:var(--muted);font-size:10.3px;text-transform:uppercase;letter-spacing:.06em;font-weight:660}
.detailgrid .v{font-size:12.4px;margin-top:1px}
tr.exp td{background:var(--panel2);border-bottom:0}

/* ── drawer + scrim ────────────────────────────────────── */
.scrim{
  position:fixed;inset:0;background:rgba(6,9,12,.6);z-index:40;
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-drawer) var(--ease-out);
}
html[data-theme="light"] .scrim{background:rgba(20,28,20,.35)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(480px,94vw);
  background:var(--panel);border-left:1px solid var(--line);z-index:41;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform var(--dur-drawer) var(--ease-drawer);
  will-change:transform;
}
.drawer.on{transform:translateX(0)}
.drawer header{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line);flex:0 0 auto;
}
.drawer header h3{font-size:14px;font-weight:670}
.drawer header .x{
  margin-left:auto;background:none;border:1px solid var(--line);color:var(--muted);
  width:28px;height:28px;border-radius:8px;cursor:pointer;font:inherit;font-size:15px;
  transition:background-color var(--dur-hover) ease,color var(--dur-hover) ease;
}
.drawer .dbody{padding:16px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px}
.drawer footer{
  padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;
  justify-content:flex-end;flex:0 0 auto;
}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11px;color:var(--muted);font-weight:640}
.field input,.field select,.field textarea{
  font:inherit;font-size:12.6px;padding:8px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel2);color:var(--txt);
  transition:border-color var(--dur-hover) ease,background-color var(--dur-state) ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(143,188,61,.16);
}
.hint{font-size:10.8px;color:var(--muted)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:12.4px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .v{font-weight:600}

/* ── toast ─────────────────────────────────────────────── */
.toasts{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:9px;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--ok);
  border-radius:11px;padding:10px 14px;font-size:12.4px;font-weight:560;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  transform:translateY(14px);opacity:0;
  transition:transform var(--dur-state) var(--ease-out),
             opacity var(--dur-state) var(--ease-out);
  pointer-events:auto;max-width:min(360px,86vw);
}
.toast.on{transform:none;opacity:1}
.toast.warn{border-left-color:var(--warn)}
.toast.info{border-left-color:var(--info)}
.toast .ti{font-size:13px}

/* ── misc ──────────────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:stretch}
.grid2e{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:1080px){.grid2,.grid2e{grid-template-columns:1fr}}
.empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:12.2px}
.mocknote{
  font-size:11px;color:var(--muted);padding:9px 13px;border-radius:10px;
  background:rgba(56,189,248,.05);border:1px solid rgba(56,189,248,.22);
  line-height:1.55;
}
.mocknote b{color:var(--info)}
.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.toolbar .sp{margin-left:auto}
.kbd{
  font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:4px;
  border:1px solid var(--line);background:var(--panel2);color:var(--muted);
}

/* ── mobile ────────────────────────────────────────────── */
.mobnav{display:none}
@media(max-width:760px){
  .side{
    position:fixed;left:0;top:0;bottom:0;z-index:50;
    transform:translateX(-100%);height:100vh;
    transition:transform var(--dur-drawer) var(--ease-drawer);
    will-change:transform;width:250px;flex-basis:250px;
  }
  .side.on{transform:translateX(0)}
  .burger{display:grid}
  .content{padding:14px 13px 92px}
  .topbar{padding:10px 13px;gap:9px}
  .topbar h1{font-size:15px}
  .right{gap:7px}
  .switch{order:9;width:100%}
  .switch button{flex:1;font-size:11px;padding:6px 2px}
  .who .meta{display:none}
  .mobnav{
    display:flex;flex-direction:row;flex-wrap:nowrap;
    position:fixed;left:0;right:0;bottom:0;background:var(--panel);
    border-top:1px solid var(--line);z-index:20;
    padding:5px 4px calc(5px + env(safe-area-inset-bottom));
  }
  .mobnav a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    font-size:9.4px;color:var(--muted);padding:5px 2px;border-radius:8px;
    transition:color var(--dur-hover) ease;
  }
  .mobnav a.on{color:var(--brand)}
  .mobnav a b{font-size:15px;font-weight:500;line-height:1.1}
  .drawer{width:100%}
  .toasts{right:10px;left:10px;bottom:74px;align-items:stretch}
  .toast{max-width:none}
  .bar{grid-template-columns:76px 1fr 66px}
}
/* peran kelima bikin switch penuh di layar kecil */
@media(max-width:760px){
  .right{flex-wrap:wrap;justify-content:flex-end}
  .switch{flex:1 0 100%}
  .switch button{padding:6px 2px;font-size:10.6px;white-space:nowrap;letter-spacing:-.01em}
}
[hidden]{display:none!important}
body.lock{overflow:hidden}

/* ── reduced motion: kurangi gerak, jangan hapus makna ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .view{transition:opacity 120ms linear}
  .drawer,.side{transition:opacity 120ms linear}
  .drawer{transform:none;opacity:0;visibility:hidden}
  .drawer.on{opacity:1;visibility:visible}
  .side{transform:none}
}

/* ══════════════════════════════════════════════════════════
   MODUL — lapisan tambahan di atas token & komponen di atas
   ══════════════════════════════════════════════════════════ */

/* nav: modul yang belum dibangun */
nav a.soon{color:var(--muted);cursor:default}
nav a.soon:hover{background:none}
nav a.soon .nbadge{background:rgba(139,152,169,.14);color:var(--muted)}
nav .sep{height:1px;background:var(--line-soft);margin:8px 6px}

/* KPI yang bisa diklik / punya sumber */
.kpi[data-src]{cursor:help}
.kpi .src{font-size:10px;color:var(--muted);margin-top:3px;
  font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* dua kolom dengan rasio lain */
.split{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:16px;align-items:start}
@media(max-width:1180px){.split{grid-template-columns:1fr}}

/* ── kanban pipeline ─────────────────────────────────── */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
@media(max-width:1080px){.kanban{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.kanban{grid-template-columns:1fr}}
.kcol{
  background:var(--panel2);border:1px solid var(--line-soft);border-radius:11px;
  padding:8px;display:flex;flex-direction:column;gap:7px;min-height:132px;min-width:0;
  transition:border-color var(--dur-state) ease,background-color var(--dur-state) ease;
}
.kcol.drag{border-color:var(--brand);background:rgba(143,188,61,.07)}
.kcol h4{
  font-size:9.8px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:6px;font-weight:680;padding:1px 2px;
}
.kcol h4 .n{
  margin-left:auto;font-family:var(--mono);font-size:9.4px;background:var(--panel);
  border:1px solid var(--line);border-radius:20px;padding:0 5px;color:var(--muted);
}
.kcol .none{font-size:10.8px;color:var(--muted);opacity:1;padding:10px 4px;text-align:center;line-height:1.5}
.lead{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 9px;
  cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%;
  transition:transform var(--dur-hover) var(--ease-out),
             border-color var(--dur-hover) ease,background-color var(--dur-state) ease;
}
.lead:hover{transform:translateY(-1.5px);border-color:color-mix(in srgb,var(--brand) 42%,var(--line))}
.lead:active{transform:scale(.99)}
.lead .nm{font-size:11.7px;font-weight:620;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lead .amt{font-family:var(--mono);font-size:11.6px;color:var(--brand);margin-top:5px;letter-spacing:-.02em}
.lead .meta{font-size:10.2px;color:var(--muted);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap}

/* ── feed aktivitas ──────────────────────────────────── */
.feed{display:flex;flex-direction:column}
.feed .it{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;
  padding:9px 14px;border-bottom:1px solid var(--line-soft);
  transition:background-color var(--dur-hover) ease;
}
.feed .it:last-child{border-bottom:0}
@media(hover:hover){.feed .it:hover{background:var(--panel2)}}
.feed .tm{font-family:var(--mono);font-size:10.6px;color:var(--muted);padding-top:1px}
.feed .nm{font-size:12.2px;font-weight:620;line-height:1.3}
.feed .ds{font-size:11.2px;color:var(--muted);line-height:1.45;margin-top:1px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feed .dt{font-size:10.2px;color:var(--muted);text-align:right;white-space:nowrap;padding-top:2px}

/* ── tabel: sort + baris terpilih ────────────────────── */
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--txt)}
th.sortable .ar{opacity:.35;margin-left:4px;font-size:9px}
th.sortable.on .ar{opacity:1;color:var(--brand)}
tbody tr.sel{background:rgba(143,188,61,.09)}
tbody tr.sel td{box-shadow:inset 0 1px 0 rgba(143,188,61,.25),inset 0 -1px 0 rgba(143,188,61,.25)}
tbody tr{cursor:pointer}
tbody tr.noact{cursor:default}
.skel{
  height:10px;border-radius:4px;background:linear-gradient(90deg,var(--panel2),var(--line-soft),var(--panel2));
  background-size:200% 100%;animation:sh 1s linear infinite;
}
@keyframes sh{to{background-position:-200% 0}}

/* ── misc ────────────────────────────────────────────── */
.tag{
  display:inline-flex;align-items:center;gap:4px;font-size:9.9px;font-weight:650;
  font-family:var(--mono);padding:1px 6px;border-radius:5px;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);
}
.tag.brand{color:var(--brand);border-color:rgba(143,188,61,.35);background:rgba(143,188,61,.1)}
.tag.info{color:var(--info);border-color:rgba(56,189,248,.3);background:rgba(56,189,248,.08)}
.meter{height:6px;border-radius:4px;background:var(--panel2);overflow:hidden;border:1px solid var(--line-soft)}
.meter i{display:block;height:100%;background:var(--brand);border-radius:4px;
  transform:scaleX(var(--w,0));transform-origin:left center;
  transition:transform 480ms var(--ease-out)}
.view.anim .meter i{animation:barGrow 520ms var(--ease-out) both}
.mini{font-size:10.7px;color:var(--muted);line-height:1.5}
.hstack{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:2px}
.seg button{
  font:inherit;font-size:10.6px;font-weight:620;color:var(--muted);background:none;border:0;
  padding:3px 8px;border-radius:6px;cursor:pointer;
  transition:background-color var(--dur-state) ease,color var(--dur-state) ease;
}
.seg button.on{background:var(--btn);color:var(--btn-fg)}
.sel{
  font:inherit;font-size:11.4px;padding:5px 8px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel2);color:var(--txt);
}
.search{position:relative;min-width:190px;flex:1 1 190px;max-width:280px}
.search input{
  width:100%;font:inherit;font-size:11.8px;padding:6px 10px 6px 28px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel2);color:var(--txt);
  transition:border-color var(--dur-hover) ease,box-shadow var(--dur-hover) ease;
}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(143,188,61,.14)}
.search .ic{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:11px}
.emptybig{padding:26px 16px;text-align:center}
.emptybig .ic{font-size:26px;opacity:.5;margin-bottom:8px}
.emptybig .tt{font-weight:640;font-size:13px}
.emptybig .bb{color:var(--muted);font-size:11.6px;margin:4px auto 12px;max-width:340px;line-height:1.5}
.ghostadd{
  border:1px dashed var(--line);background:none;color:var(--muted);font:inherit;font-size:11px;
  padding:7px 8px;border-radius:8px;cursor:pointer;width:100%;
  transition:border-color var(--dur-hover) ease,color var(--dur-hover) ease,background-color var(--dur-hover) ease;
}
.ghostadd:hover{border-color:var(--brand);color:var(--brand);background:rgba(143,188,61,.06)}
details.src{
  border:1px solid var(--line);border-radius:10px;background:var(--panel);
  font-size:11.4px;overflow:hidden;
}
details.src summary{
  cursor:pointer;padding:9px 13px;color:var(--muted);font-weight:620;
  list-style:none;display:flex;align-items:center;gap:7px;
}
details.src summary::-webkit-details-marker{display:none}
details.src summary::before{content:"▸";font-size:9px;transition:transform var(--dur-state) var(--ease-out)}
details.src[open] summary::before{transform:rotate(90deg)}
details.src .in{padding:0 13px 13px;display:flex;flex-direction:column;gap:8px}
details.src code{
  font-family:var(--mono);font-size:10.4px;color:var(--brand);
  background:var(--panel2);border:1px solid var(--line-soft);border-radius:6px;
  padding:1px 5px;white-space:nowrap;
}
details.src .q{
  font-family:var(--mono);font-size:9.9px;color:var(--muted);line-height:1.55;
  background:var(--panel2);border:1px solid var(--line-soft);border-radius:7px;padding:7px 9px;
  white-space:pre-wrap;word-break:break-word;
}
.warnbox{
  border:1px solid rgba(245,158,11,.3);background:rgba(245,158,11,.06);
  border-radius:10px;padding:10px 12px;font-size:11.4px;line-height:1.5;color:var(--txt);
}
.warnbox b{color:var(--warn)}
.drawer.wide{width:min(600px,96vw)}
.drawer .dsec{border-top:1px solid var(--line-soft);padding-top:12px}
.drawer .dhead{display:flex;align-items:flex-start;gap:10px}
.lineitems{width:100%;font-size:11.6px}
.lineitems td,.lineitems th{padding:6px 8px}
.lineitems td:first-child,.lineitems th:first-child{padding-left:0}
.lineitems td:last-child,.lineitems th:last-child{padding-right:0}
.chip.flat{background:none}
@media(prefers-reduced-motion:reduce){
  .lead:hover{transform:none}
}