:root{--bg:#f4f6f9;--card:#fff;--ink:#1d2433;--muted:#6b7385;--line:#e3e7ee;--pri:#1f5fbf;--pri-soft:#e8f0fc;
--ok:#1a8f5a;--warn:#c27c0e;--bad:#c23b3b;--side:#14213d;--b1:#3b82c4;--b2:#e2a93b;--b3:#e07b39;--b4:#c23b3b}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
a{color:var(--pri);text-decoration:none}a:hover{text-decoration:underline}
.layout{display:flex;min-height:100vh}
.side{width:236px;background:var(--side);color:#cdd5e4;flex-shrink:0;padding:18px 0;position:sticky;top:0;height:100vh;overflow:auto}
.brand{color:#fff;font-weight:700;font-size:16px;padding:0 20px 18px;border-bottom:1px solid #26365b;margin-bottom:10px}
.brand small{display:block;font-weight:400;color:#8f9bb5;font-size:12px;margin-top:3px}
.side h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7d89a6;margin:16px 20px 6px}
.side a{display:block;color:#cdd5e4;padding:8px 20px;border-left:3px solid transparent}
.side a:hover{background:#1c2c4f;text-decoration:none}
.side a.on{background:#1c2c4f;color:#fff;border-left-color:#5b9cf0}
.main{flex:1;min-width:0}
.top{background:var(--card);border-bottom:1px solid var(--line);padding:12px 24px;display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap}
.top h1{font-size:18px;margin:0}
.who{color:var(--muted);font-size:13px}.who b{color:var(--ink)}
.content{padding:22px 24px 40px}
.grid{display:grid;gap:16px}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.card h3{margin:0 0 12px;font-size:15px}
.kpi .lbl{color:var(--muted);font-size:13px}.kpi .val{font-size:24px;font-weight:700;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:12px;color:var(--muted)}.kpi.bad .val{color:var(--bad)}.kpi.ok .val{color:var(--ok)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:600;background:#fafbfd;white-space:nowrap}
td.n,th.n{text-align:right;white-space:nowrap}
tr.tot td{font-weight:700;background:#fafbfd}
tbody tr:hover{background:#f7f9fc}
.tw{overflow-x:auto}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap}
.p-ok{background:#e3f4ec;color:var(--ok)}.p-warn{background:#fbf0dc;color:var(--warn)}.p-bad{background:#fbe5e5;color:var(--bad)}.p-mut{background:#eef0f4;color:var(--muted)}.p-pri{background:var(--pri-soft);color:var(--pri)}
form.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-bottom:14px}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:3px}
input,select{font:inherit;padding:7px 9px;border:1px solid #cfd5df;border-radius:6px;background:#fff;color:var(--ink)}
.btn{display:inline-block;font:inherit;padding:7px 14px;border-radius:6px;border:1px solid var(--pri);background:var(--pri);color:#fff;cursor:pointer;font-weight:600}
.btn:hover{text-decoration:none;filter:brightness(1.07)}
.btn.sec{background:#fff;color:var(--pri)}.btn.sm{padding:4px 10px;font-size:12px}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:14px;border:1px solid}
.flash.success{background:#e3f4ec;border-color:#b7e0cb;color:#135f3d}.flash.error{background:#fbe5e5;border-color:#efc0c0;color:#8a2323}.flash.warning{background:#fbf0dc;border-color:#ecd3a3;color:#7a4e07}
.muted{color:var(--muted)}.small{font-size:12px}
.pager{display:flex;gap:6px;align-items:center;margin-top:12px}
.note{background:#f7f9fc;border:1px dashed #cfd5df;border-radius:8px;padding:10px 12px;color:var(--muted);font-size:12px;margin-top:12px}
.bar{height:8px;border-radius:4px;background:#eef0f4;overflow:hidden;display:flex}
.bar span{display:block;height:100%}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#14213d,#1f5fbf)}
.login{background:#fff;border-radius:12px;padding:32px;width:360px;max-width:calc(100% - 32px)}
.login h2{margin:0 0 4px}.login input{width:100%;margin-bottom:12px}.login .btn{width:100%}
dl.kv{display:grid;grid-template-columns:200px 1fr;gap:6px 14px;margin:0}dl.kv dt{color:var(--muted)}dl.kv dd{margin:0}
.chartbox{position:relative;height:280px}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:1fr}}
@media(max-width:760px){.layout{display:block}.side{width:auto;height:auto;position:static;padding:8px 0}.side h4{display:none}.side nav{display:flex;flex-wrap:wrap}.side a{border-left:0;padding:6px 12px}
.g4,.g2{grid-template-columns:1fr}.content{padding:16px}dl.kv{grid-template-columns:1fr}}
td:first-child{white-space:nowrap}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.form-grid input,.form-grid select,.form-grid textarea{width:100%}
textarea{font:inherit;padding:7px 9px;border:1px solid #cfd5df;border-radius:6px;min-height:60px}
.field.auto input{background:#fffbea;border-color:#e6c766}
.ro{background:#f4f6f9;color:var(--muted)}
.tl{list-style:none;margin:0;padding:0}.tl li{border-left:2px solid var(--line);padding:0 0 14px 14px;position:relative}
.tl li:before{content:"";position:absolute;left:-6px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--pri)}
.tl li.imp:before{background:#9aa3b5}
.tl .meta{font-size:12px;color:var(--muted)}.tl .chg{font-size:13px;margin-top:3px}
.tl del{color:var(--bad)}.tl ins{color:var(--ok);text-decoration:none;font-weight:600}
@media(max-width:760px){.form-grid{grid-template-columns:1fr}}
.compact th,.compact td{padding:8px 6px;font-size:13px}.compact th{font-size:11px;white-space:normal}
/* ---- filter atas, menu HP, pencarian otomatis ---- */
.top-right{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.scope{display:flex;gap:6px;flex-wrap:wrap}
.burger{display:none;font-size:22px;background:none;border:0;cursor:pointer;color:var(--ink);padding:2px 6px}
.scrim{display:none}
#results.loading{opacity:.5;transition:opacity .15s}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.seg a{padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:13px}
.seg a.on{background:var(--pri);border-color:var(--pri);color:#fff}
.seg a:hover{text-decoration:none}
.dok td.n{white-space:nowrap}
.dok tr.sub td:first-child{padding-left:22px;color:var(--muted)}
.hide-d{display:none}
@media(max-width:760px){
  body{font-size:14px}
  .layout{display:block}
  .side{position:fixed;left:0;top:0;bottom:0;width:250px;height:100vh;z-index:50;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none}
  .side h4{display:block}.side nav{display:block}.side a{border-left:3px solid transparent;padding:10px 20px}
  .scrim.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}
  .burger{display:block}
  .top{padding:10px 16px;gap:8px;position:sticky;top:0;z-index:30}
  .top h1{font-size:16px;flex:1;min-width:0}
  .top-right{width:100%}
  .scope{width:100%}.scope select{flex:1;min-width:0}
  .content{padding:14px 12px 30px}
  .card{padding:14px}
  .kpi .val{font-size:22px}
  .hide-m{display:none}.hide-d{display:revert}
  form.filters > div{flex:1 1 140px}
  form.filters input,form.filters select{width:100%}
  .chartbox{height:230px}
  th,td{padding:7px 8px}
  .grid[style*="grid-template-columns:minmax(0,1.5fr)"]{grid-template-columns:1fr !important}
}
@media(max-width:760px){
  table.cards thead{display:none}
  table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;width:100%}
  table.cards tr{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:8px 10px;background:#fff}
  table.cards td{border:0;padding:4px 0;text-align:left !important;white-space:normal}
  table.cards td.hide-m{display:none}
  table.cards td[data-label]{display:flex;gap:10px;justify-content:space-between}
  table.cards td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:12px;flex:0 0 78px}
  table.cards td[data-label] > *{text-align:right}
  table.cards td[data-label="Customer"]{display:block}
  table.cards td[data-label="Customer"]::before{display:block;margin-bottom:2px}
  table.cards td.pi{font-weight:600;word-break:break-all;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:4px}
  table.cards tbody tr:hover{background:#fff}
}
@media(max-width:760px){
  table.cards td[data-label="Customer"] > *{text-align:left}
  table.cards .v{text-align:right}
}

/* Ganti status langsung di daftar */
select.stsel{font-size:12px;padding:3px 6px;margin-top:4px;max-width:150px}
select.stsel.saving{opacity:.5}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(20px);background:#1f7a4d;color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:.2s;max-width:90vw;z-index:99}
#toast.show{opacity:1;transform:translateX(-50%)}
#toast.bad{background:#b42318}
/* Simpan otomatis Input SA & PO */
input.as.saving{background:#fffbe6}
input.as.ok{border-color:#1f7a4d;box-shadow:0 0 0 1px #1f7a4d inset}
input.as.err{border-color:#b42318;box-shadow:0 0 0 1px #b42318 inset}
/* Grid tidak boleh melebar melebihi layar (HP) */
.grid>*{min-width:0}
@media(max-width:760px){.g4,.g3,.g2{grid-template-columns:minmax(0,1fr)}.chartbox{position:relative;width:100%}.chartbox canvas{max-width:100%}}

/* Daftar PI padat: muat di layar 100% tanpa geser */
table.pilist{font-size:13px}
table.pilist th,table.pilist td{padding:8px 7px}
table.pilist td.pi{max-width:190px;overflow-wrap:anywhere}
table.pilist td.cust{min-width:200px;max-width:320px}
table.pilist td[data-label="Invoice"]{max-width:180px;overflow-wrap:anywhere}
table.pilist td[data-label="Nilai Real"] .small{white-space:normal;max-width:170px;margin-left:auto}
table.pilist select.stsel{max-width:130px}
@media(max-width:760px){table.pilist td.cust{max-width:none;min-width:0}table.pilist td.pi{max-width:none}}
table.pilist td.pi{min-width:175px}
table.pilist td[data-label="Invoice"]{min-width:150px}
table.pilist td.cust{min-width:170px}
@media(max-width:760px){table.pilist td.pi,table.pilist td[data-label="Invoice"],table.pilist td.cust{min-width:0}}