/* Layout: header gradasi biru + sidebar menu (desktop) / laci menu (HP), konten kartu putih di latar biru muda — mengikuti situs Dokter Android */
:root{
  --blue:#0073dd; --dark-blue:#004fb3; --yellow:#ffde59; --navy:#0b2348; --foot:#081226;
  --bg:#f4f8fd; --card:#ffffff; --text:#0f1c33; --muted:#5a6b85;
  --border:#e3ebf5; --shadow:0 12px 34px rgba(0,79,179,.10);
  --chip-bg:#e8f1fc; --link:#0073dd; --field:#f4f8fd;
  --ok-bg:#e7f9ee; --ok-bd:#9fe0b9; --ok-tx:#177a3d;
  --warn-bg:#fff7dc; --warn-bd:#f4dd7a; --warn-tx:#8a6d00;
  --bad-bg:#fdecec; --bad-bd:#f3b4b4; --bad-tx:#b42323; --red:#e24b4b;
  --header-grad:linear-gradient(135deg,var(--dark-blue),var(--blue));
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0b1220; --card:#131a2a; --text:#eef3fb; --muted:#93a4c0; --border:#22304a;
  --shadow:0 12px 34px rgba(0,0,0,.45); --chip-bg:#17223a; --link:#7db8f5; --field:#0f1626;
  --ok-bg:#0f2a1b; --ok-bd:#1f5c39; --ok-tx:#7fe0a5; --warn-bg:#2a2410; --warn-bd:#5c4d14; --warn-tx:#f4d46a;
  --bad-bg:#2e1414; --bad-bd:#6a2626; --bad-tx:#ff9b9b; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b1220; --card:#131a2a; --text:#eef3fb; --muted:#93a4c0; --border:#22304a;
  --shadow:0 12px 34px rgba(0,0,0,.45); --chip-bg:#17223a; --link:#7db8f5; --field:#0f1626;
  --ok-bg:#0f2a1b; --ok-bd:#1f5c39; --ok-tx:#7fe0a5; --warn-bg:#2a2410; --warn-bd:#5c4d14; --warn-tx:#f4d46a;
  --bad-bg:#2e1414; --bad-bd:#6a2626; --bad-tx:#ff9b9b; color-scheme:dark}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.55;font-size:14px;overflow-x:hidden}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3{line-height:1.2;text-wrap:balance}
.num,td.r,.money{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--header-grad);color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.18)}
.top-in{display:flex;align-items:center;gap:12px;height:64px;padding-inline:16px;max-width:1400px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;font-size:.98rem;line-height:1.1;min-width:0}
.brand .logo{height:46px;width:auto;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.login-head .brand .logo{height:58px}
.brand small{display:block;font-size:.6rem;font-weight:500;opacity:.85;letter-spacing:.14em;margin-top:2px}
.top-sp{flex:1}
.icon-btn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff;width:40px;height:40px;border-radius:12px;cursor:pointer;display:grid;place-items:center;flex:none;transition:background .2s}
.icon-btn:hover{background:rgba(255,255,255,.3)}
.icon-btn svg{width:20px;height:20px}
.outlet-pick{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:0 10px;height:40px;min-width:0}
.outlet-pick svg{width:16px;height:16px;flex:none}
.outlet-pick select{background:transparent;border:0;color:#fff;font-weight:600;font-size:.85rem;max-width:180px;cursor:pointer}
.outlet-pick select option{color:#0f1c33}
.outlet-pick .fixed{font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.user-chip{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;font-size:.8rem;font-weight:700;max-width:160px}
.user-chip span{font-size:.62rem;font-weight:600;color:var(--yellow);letter-spacing:.12em;text-transform:uppercase}
.hamb{display:none}

/* shell */
.shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;max-width:1400px;margin:0 auto;padding:24px 16px 60px}
.side{position:sticky;top:calc(88px + env(safe-area-inset-top,0px));align-self:start;background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:10px;max-height:calc(100vh - 110px);overflow:auto}
.nav-g{padding:6px 0}
.nav-g + .nav-g{border-top:1px solid var(--border)}
.nav-h{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:8px 12px 4px}
.nav-a{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:12px;padding:9px 12px;font-weight:500;font-size:.88rem;cursor:pointer;color:var(--text)}
.nav-a svg{width:18px;height:18px;color:var(--muted);flex:none}
.nav-a:hover{background:var(--chip-bg)}
.nav-a.on{background:var(--header-grad);color:#fff;font-weight:600;box-shadow:0 8px 18px rgba(0,115,221,.28)}
.nav-a.on svg{color:var(--yellow)}
.nav-a .lock{margin-left:auto;font-size:.62rem;font-weight:700;color:var(--muted);background:var(--chip-bg);padding:2px 7px;border-radius:99px}
.side-foot{border-top:1px solid var(--border);padding:10px 4px 2px;display:grid;gap:6px}
.scrim{display:none}

/* typo & bits */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.eyebrow{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--link);background:var(--chip-bg);padding:5px 12px;border-radius:99px;margin-bottom:8px}
.title{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800}
.sub{color:var(--muted);max-width:640px;margin-top:4px;font-size:.88rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:22px;min-width:0}
.card + .card{margin-top:18px}
.card h3{font-size:1rem;font-weight:700;margin-bottom:12px}
.stack{display:grid;gap:18px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row > .f{flex:1;min-width:180px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.muted{color:var(--muted)}
.small{font-size:.8rem}
.hint{font-size:.76rem;color:var(--muted);margin-top:6px}
.hint b{color:var(--text)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:14px;font-weight:600;font-size:.9rem;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s;white-space:nowrap;text-decoration:none}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--dark-blue));color:#fff;box-shadow:0 10px 24px rgba(0,115,221,.32)}
.btn-yellow{background:var(--yellow);color:#1a1a1a;box-shadow:0 10px 24px rgba(255,222,89,.35)}
.btn-outline{background:transparent;color:var(--link);border:2px solid var(--link);padding:10px 20px}
.btn-red{background:linear-gradient(135deg,#ef5a5a,#c62828);color:#fff;box-shadow:0 10px 24px rgba(198,40,40,.3)}
.btn-green{background:linear-gradient(135deg,#2bb673,#17844d);color:#fff;box-shadow:0 10px 24px rgba(23,132,77,.28)}
.btn-ghost{background:var(--chip-bg);color:var(--link)}
.btn-sm{padding:7px 12px;font-size:.78rem;border-radius:10px;box-shadow:none}
.btn-sm.btn-outline{padding:5px 10px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* form */
label.l{font-size:.78rem;font-weight:600;color:var(--muted);display:block;margin-bottom:6px}
.in,select.in,textarea.in{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--border);background:var(--field);color:var(--text);outline:none;font-size:.9rem}
.in:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,115,221,.15)}
.in:disabled{opacity:.55;cursor:not-allowed}
textarea.in{min-height:84px;resize:vertical}
.fld{margin-bottom:14px;min-width:0}
.req{color:var(--red)}
.ac{position:relative}
.ac-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;padding:6px;list-style:none;max-height:260px;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.ac-list li{padding:9px 12px;border-radius:8px;font-size:.88rem;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.ac-list li small{color:var(--muted);font-size:.74rem;white-space:nowrap}
.ac-list li:hover,.ac-list li.act{background:var(--chip-bg);color:var(--link)}
.ac-list li.empty{color:var(--muted);cursor:default;font-size:.8rem}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--chip-bg);border-radius:14px;padding:4px;gap:4px}
.seg button{border:0;background:transparent;border-radius:11px;padding:10px 8px;font-weight:600;font-size:.85rem;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--card);color:var(--link);box-shadow:0 4px 12px rgba(0,79,179,.14)}
.date-edit{display:flex;gap:8px}
.date-edit .in{flex:1}

/* chips & pills */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--chip-bg);color:var(--link);padding:7px 14px;border-radius:99px;font-size:.8rem;font-weight:500;border:0;cursor:pointer;transition:all .2s}
.chip:hover{transform:translateY(-2px)}
.chip.on{background:var(--blue);color:#fff}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;border:1px solid transparent}
.pill.ok{background:var(--ok-bg);color:var(--ok-tx);border-color:var(--ok-bd)}
.pill.warn{background:var(--warn-bg);color:var(--warn-tx);border-color:var(--warn-bd)}
.pill.bad{background:var(--bad-bg);color:var(--bad-tx);border-color:var(--bad-bd)}
.pill.info{background:var(--chip-bg);color:var(--link)}
.pill.mute{background:var(--chip-bg);color:var(--muted)}

/* table */
.table-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--border);background:var(--card)}
table{width:100%;border-collapse:collapse;min-width:560px}
th{background:var(--header-grad);color:#fff;text-align:left;padding:12px 14px;font-size:.78rem;letter-spacing:.03em;font-weight:600;white-space:nowrap}
td{padding:11px 14px;border-top:1px solid var(--border);font-size:.86rem;vertical-align:middle}
th.r,td.r{text-align:right}
tbody tr:hover td{background:var(--chip-bg)}
tr.click{cursor:pointer}
tr.a-ok td{background:var(--ok-bg)}
tr.a-bad td{background:var(--bad-bg)}
tr.a-ok:hover td{background:var(--ok-bg)} tr.a-bad:hover td{background:var(--bad-bg)}
tr.dim td{opacity:.55}
tfoot td{font-weight:700;background:var(--chip-bg)}
.empty-row td{text-align:center;color:var(--muted);padding:26px}
.price{font-weight:700;color:var(--link)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:18px}
.stat .k{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-size:1.4rem;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums}
.stat .d{font-size:.76rem;color:var(--muted);margin-top:2px}
.stat.hero{background:var(--header-grad);color:#fff;border:0}
.stat.hero .k,.stat.hero .d{color:rgba(255,255,255,.82)}
.stat.hero .v{color:var(--yellow)}

/* etalase */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar .search{flex:1;min-width:200px;position:relative}
.toolbar .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted)}
.toolbar .search .in{padding-left:40px}
.etalase{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.prod{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:var(--shadow);text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:10px;transition:transform .2s,border-color .2s;min-width:0}
.prod:hover{transform:translateY(-4px);border-color:var(--blue)}
.prod .cat{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--link)}
.prod .nm{font-weight:600;font-size:.92rem;line-height:1.3;flex:1}
.prod .qty{display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-top:1px dashed var(--border);padding-top:10px}
.prod .qty b{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.prod .qty span{font-size:.72rem;color:var(--muted)}
.prod.zero{opacity:.55}
.prod.low .qty b{color:#d98a00}

/* item rows (pembelian / transfer) */
.items{display:grid;gap:10px}
.item{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(70px,.7fr) minmax(110px,1.1fr) minmax(110px,1fr) 40px;gap:10px;align-items:start;background:var(--field);border:1px solid var(--border);border-radius:14px;padding:12px}
.item.tr{grid-template-columns:minmax(0,3fr) minmax(90px,.8fr) 40px}
.item label.l{margin-bottom:4px;font-size:.7rem}
.item .in{background:var(--card)}
.item .sub-t{padding-top:22px;font-weight:700;text-align:right}
.x-btn{margin-top:22px;width:40px;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--red);cursor:pointer;display:grid;place-items:center}
.x-btn svg{width:18px;height:18px}
.total-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--header-grad);color:#fff;border-radius:14px;padding:14px 18px;margin-top:14px;flex-wrap:wrap}
.total-bar b{font-size:1.3rem;color:var(--yellow);font-variant-numeric:tabular-nums}
.chg{display:inline-block;margin-top:5px;font-size:.68rem;font-weight:600;color:var(--warn-tx);background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:8px;padding:2px 7px}

/* placeholder box (gaya kotak Cek Status) */
.note-box{background:linear-gradient(135deg,#ffe98a,#ffd23f);border:2px solid #f2c200;color:#1d1a0a;border-radius:22px;padding:26px;box-shadow:0 16px 36px rgba(242,194,0,.25)}
.note-box .eyebrow{background:#fff;color:#0073dd}
.note-box h3{font-size:1.3rem;font-weight:800;margin:4px 0 6px}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px 12px}
.modal-bd{position:absolute;inset:0;background:rgba(6,18,40,.55);backdrop-filter:blur(3px);animation:fade .2s ease}
.modal-sheet{position:relative;width:min(640px,96vw);max-height:min(86vh,760px);background:var(--card);color:var(--text);border-radius:18px;box-shadow:0 24px 60px rgba(8,24,56,.4);display:flex;flex-direction:column;overflow:hidden;animation:pop .24s ease}
.modal-sheet.sm{width:min(440px,96vw)}
.modal-head{display:flex;align-items:center;gap:10px;justify-content:space-between;background:#1e6fd4;background:var(--header-grad);padding:14px 16px;flex:none}
.modal-head p{color:rgba(255,255,255,.85);font-size:.7rem;margin:0}
.modal-head h3{color:#fff;font-size:1.02rem;margin:0}
.modal-x{width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:1.25rem;cursor:pointer;flex:none;line-height:1}
.modal-body{padding:18px;overflow-y:auto;flex:1}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--border);flex-wrap:wrap}
.modal-foot .btn{flex:1;min-width:120px}
.confirm-q{font-size:1rem;text-align:center;line-height:1.5;padding:6px 4px}
.confirm-q b{display:block;font-size:1.6rem;font-weight:800;color:var(--link);margin-top:8px;font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.86rem}
.kv dt{color:var(--muted)}
.kv dd{font-weight:600;min-width:0;overflow-wrap:anywhere}
@keyframes pop{from{transform:translateY(8px) scale(.97);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:200;background:var(--foot);color:#fff;padding:12px 18px;border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.3);font-weight:600;font-size:.86rem;display:flex;gap:10px;align-items:center;animation:pop .25s ease;max-width:calc(100vw - 32px)}
.toast svg{width:18px;height:18px;color:#3dff8a;flex:none}
.toast.err svg{color:#ff8a8a}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;position:relative;overflow:hidden}
.login::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 12% 10%,rgba(0,115,221,.18),transparent),radial-gradient(500px 300px at 90% 90%,rgba(255,222,89,.2),transparent);pointer-events:none}
.login-card{position:relative;width:min(440px,100%);background:var(--card);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.login-head{background:var(--header-grad);color:#fff;padding:26px 24px 22px}
.login-head .brand{font-size:1.1rem}
.login-head h1{font-size:1.6rem;font-weight:900;margin-top:18px}
.login-head h1 span{color:var(--yellow)}
.login-head p{opacity:.85;font-size:.84rem;margin-top:4px}
.login-body{padding:22px 24px 24px}
.acc-list{display:grid;gap:8px;max-height:46vh;overflow:auto;margin-bottom:16px}
.acc{display:flex;align-items:center;gap:12px;border:1.5px solid var(--border);background:var(--field);border-radius:14px;padding:10px 12px;cursor:pointer;text-align:left}
.acc.on{border-color:var(--blue);background:var(--chip-bg)}
.acc .av{width:36px;height:36px;border-radius:50%;background:var(--header-grad);color:#fff;font-weight:700;display:grid;place-items:center;flex:none;font-size:.85rem}
.acc .who{flex:1;min-width:0;line-height:1.25}
.acc .who b{display:block;font-size:.88rem}
.acc .who small{color:var(--muted);font-size:.74rem}
.badge-dot{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);font-size:.74rem;font-weight:600;padding:6px 12px;border-radius:99px;margin-top:14px}
.badge-dot i{width:8px;height:8px;border-radius:50%;background:var(--yellow);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}

/* bars (laporan bulanan) */
.bars{display:flex;align-items:flex-end;gap:4px;height:160px;padding:10px 4px 0;border-bottom:1px solid var(--border);overflow-x:auto}
.bar{flex:1 0 14px;min-width:14px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.bar i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--blue),var(--dark-blue));min-height:2px}
.bar.today i{background:linear-gradient(180deg,#ffe98a,#f2c200)}
.bar small{font-size:.6rem;color:var(--muted);font-variant-numeric:tabular-nums}
.bar b{font-size:.6rem;font-weight:600;color:var(--muted)}
.split{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--chip-bg);margin-top:8px}
.split i{display:block;height:100%}

.tabs{display:flex;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:5px;margin-bottom:18px;width:max-content;max-width:100%;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:9px 16px;border-radius:10px;font-weight:600;font-size:.84rem;cursor:pointer;color:var(--muted);white-space:nowrap}
.tabs button.on{background:var(--header-grad);color:#fff}

.demo-flag{font-size:.7rem;color:var(--muted);text-align:center;margin-top:12px}

/* responsive */
@media (max-width:960px){
  .shell{grid-template-columns:minmax(0,1fr);padding-top:18px}
  .hamb{display:grid}
  .side{position:fixed;top:0;bottom:0;left:0;width:min(290px,84vw);max-height:none;border-radius:0 18px 18px 0;z-index:90;transform:translateX(-105%);transition:transform .25s ease;padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .side.open{transform:none}
  .scrim.open{display:block;position:fixed;inset:0;background:rgba(6,18,40,.5);z-index:80}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .top-in{gap:8px;height:60px;padding-inline:12px}
  .brand .txt{display:none}
  .user-chip{display:none}
  .outlet-pick{flex:1}
  .outlet-pick select,.outlet-pick .fixed{max-width:none;width:100%}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .card{padding:16px}
  .etalase{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .prod{padding:12px}
  .prod .nm{font-size:.84rem}
  .item{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .item > .ip{grid-column:1/-1}
  .item .sub-t{padding-top:0;text-align:left;align-self:center}
  .item .x-btn{margin-top:0;justify-self:end}
  .item.tr{grid-template-columns:minmax(0,1fr) 90px 40px}
  .item.tr > .ip{grid-column:auto}
  .modal-foot .btn{min-width:0}
  .stat .v{font-size:1.2rem}
}

/* catatan peringatan (sambungan / kode cabang) */
.note-warn{display:flex;gap:12px;align-items:flex-start;background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-tx);border-radius:14px;padding:14px 16px;font-size:.86rem;line-height:1.5}
.note-warn svg{width:20px;height:20px;flex:none;margin-top:1px}
.note-warn b{color:inherit}

/* ================= Kas: tambahan di atas gaya Stok ================= */
:root{--s1:#0073dd;--s2:#e8590c;--grid:#e3ebf5}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--s1:#3b8ae0;--s2:#d9742f;--grid:#22304a}}
:root[data-theme="dark"]{--s1:#3b8ae0;--s2:#d9742f;--grid:#22304a}

/* status sinkron di header */
.sync-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:0 12px;height:40px;color:#fff;font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap}
.sync-chip i{width:9px;height:9px;border-radius:50%;background:#3dff8a;flex:none}
.sync-chip.warn i{background:var(--yellow)}
.sync-chip.bad i{background:#ff8a8a}
.sync-chip.busy i{animation:pulse 1s infinite}

/* bilah saringan: periode + cabang */
.fbar{display:flex;gap:10px 12px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:10px 12px;margin-bottom:18px;box-shadow:var(--shadow)}
.fbar .chips{gap:6px}
.fbar .chip{padding:6px 12px;font-size:.78rem}
.fbar .chip:hover{transform:none}
.fbar .dates{display:flex;gap:6px;align-items:center;font-size:.8rem;color:var(--muted)}
.fbar .dates .in{padding:7px 10px;width:auto;font-size:.82rem}
.fbar .sp{flex:1}
.cab-pick{position:relative}
.cab-btn{display:inline-flex;align-items:center;gap:8px;background:var(--chip-bg);color:var(--link);border:0;border-radius:12px;padding:8px 14px;font-weight:600;font-size:.82rem;cursor:pointer;max-width:320px}
.cab-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cab-btn svg{width:16px;height:16px;flex:none}
.cab-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:min(320px,86vw);background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 60px rgba(8,24,56,.28);padding:12px}
.cab-pop .lst{max-height:300px;overflow:auto;display:grid;gap:2px;margin:8px 0}
.cab-pop label{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;font-size:.86rem;cursor:pointer}
.cab-pop label:hover{background:var(--chip-bg)}
.cab-pop label small{margin-left:auto;color:var(--muted);font-size:.7rem;font-weight:700}
.cab-pop input{width:16px;height:16px;accent-color:var(--blue)}
.cab-pop .acts{display:flex;gap:8px;justify-content:space-between;align-items:center}
.loading{opacity:.5;pointer-events:none;transition:opacity .15s}

/* angka */
.pos{color:var(--ok-tx)} .neg{color:var(--bad-tx)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat .v.neg{color:var(--bad-tx)}
.stat.hero .v.neg{color:#ffb3b3}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cols-2 > .card + .card{margin-top:0}

/* grafik batang berpasangan (masuk / keluar) */
.chart{position:relative}
.legend{display:flex;gap:16px;font-size:.78rem;color:var(--muted);margin-bottom:10px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;display:block}
.plot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px}
.yax{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;height:180px;font-size:.66rem;color:var(--muted);font-variant-numeric:tabular-nums}
.cols{position:relative;height:180px;display:flex;align-items:flex-end;border-bottom:1px solid var(--grid);background:linear-gradient(to bottom,var(--grid) 1px,transparent 1px) 0 0/100% 50% no-repeat,linear-gradient(to bottom,var(--grid) 1px,transparent 1px) 0 50%/100% 50% no-repeat}
.col{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:0 2px;cursor:default;outline:none;border-radius:6px 6px 0 0}
.col:hover,.col:focus-visible{background:var(--chip-bg)}
.col b{display:block;flex:1 1 0;max-width:22px;min-width:2px;border-radius:4px 4px 0 0}
.col b.a{background:var(--s1)} .col b.b{background:var(--s2)}
.xax{grid-column:2;display:flex;font-size:.64rem;color:var(--muted);padding-top:6px}
.xax span{flex:1 1 0;min-width:0;text-align:center;white-space:nowrap;overflow:visible}
.tip{position:absolute;z-index:5;pointer-events:none;background:var(--foot);color:#fff;border-radius:12px;padding:10px 12px;font-size:.76rem;box-shadow:0 14px 30px rgba(0,0,0,.3);min-width:150px;transform:translate(-50%,-100%)}
.tip h5{font-size:.7rem;font-weight:600;opacity:.8;margin-bottom:6px}
.tip div{display:flex;align-items:center;gap:8px;justify-content:space-between}
.tip div span{display:inline-flex;align-items:center;gap:6px;opacity:.85}
.tip div span::before{content:"";width:10px;height:3px;border-radius:2px;background:var(--c)}
.tip div b{font-variant-numeric:tabular-nums}

/* rincian per kategori */
.kat{display:grid;gap:12px}
.kat .r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;font-size:.86rem;align-items:baseline}
.kat .r b{font-variant-numeric:tabular-nums}
.kat .r .t{grid-column:1/-1;height:8px;border-radius:99px;background:var(--chip-bg);overflow:hidden}
.kat .r .t i{display:block;height:100%;border-radius:99px;background:var(--s1)}
.kat.out .r .t i{background:var(--s2)}

/* tabel transaksi */
td .ket{font-weight:500}
td .meta{display:block;font-size:.72rem;color:var(--muted);margin-top:2px}
.j-head td{background:var(--field);font-weight:600;border-top:2px solid var(--border)}
.j-line td{padding-top:6px;padding-bottom:6px;font-size:.82rem}
.j-line td:first-child{padding-left:34px}
.pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:12px;font-size:.82rem;color:var(--muted)}
.grp td{background:var(--chip-bg);font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.sum td{font-weight:700;background:var(--field)}
.grand td{font-weight:800;background:var(--chip-bg);font-size:.95rem}
.lr-wrap table{min-width:0}
.steps{margin:0 0 0 18px;display:grid;gap:6px;font-size:.86rem}
.dot-line{display:flex;align-items:center;gap:10px;font-weight:700}
.dot{width:10px;height:10px;border-radius:50%;background:#f0a500;box-shadow:0 0 0 3px rgba(240,165,0,.18);flex:none}
.dot.on{background:#1e9e5a;box-shadow:0 0 0 3px rgba(30,158,90,.18)}
.dot.bad{background:#e24b4b;box-shadow:0 0 0 3px rgba(226,75,75,.18)}
.cek-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 12px}
.cek-list label{display:flex;gap:8px;align-items:center;font-size:.86rem;padding:4px 0}
@media (max-width:960px){.cols-2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .sync-chip span{display:none}.sync-chip{padding:0 12px}
  .fbar .sp{display:none}.cab-pick{width:100%}.cab-btn{width:100%;max-width:none;justify-content:space-between}.cab-pop{left:0;right:auto}
  .yax{height:150px}.cols{height:150px}
}
@media print{.top,.side,.fbar,.toolbar,.pager,.btn,.scrim{display:none!important}.shell{display:block;padding:0}.card,.table-wrap,.stat{box-shadow:none}body{background:#fff}}