*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f0ede7;--sur:#fff;--sur2:#f6f4f0;--sur3:#edeae4;
  --bor:#e0dbd2;--bor2:#ccc7bc;
  --tx:#17160e;--tx2:#6a6560;--tx3:#9a9590;
  --gold:#9a7010;--gb:#fdf5e0;--gbo:#e5cc78;
  --grn:#166534;--gnb:#edf7f0;--gbo2:#86c9a0;
  --red:#8b1a1a;--rb:#fdf0f0;--rbo:#e8a0a0;
  --blu:#1e3a6b;--bb:#eef2fc;--bbo:#9ab0e0;
  --ora:#7a3a0a;--ob:#fdf2e8;--obo:#e0b080;
  --pur:#4a1a6b;--pb:#f4eefb;--pbo:#b090d8;
  --sh:0 1px 3px rgba(0,0,0,0.07);--shm:0 4px 20px rgba(0,0,0,0.12);
}
html,body{height:100%;font-family:'IBM Plex Sans',sans-serif;background:var(--bg);color:var(--tx);font-size:13px;line-height:1.5;overflow:hidden;}
.mono{font-family:'IBM Plex Mono',monospace;}

/* ── SHELL ── */
.shell{display:grid;grid-template-columns:188px 1fr;grid-template-rows:50px 1fr;height:100vh;}
.shell.auth-locked{display:none;}
.auth-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px;z-index:200;}
.auth-screen.hide{display:none;}
.login-card{width:min(360px,100%);background:var(--sur);border:1px solid var(--bor);border-radius:8px;box-shadow:var(--shm);padding:22px;}
.login-title{font-size:18px;font-weight:600;margin-bottom:3px;}
.login-sub{font-size:12px;color:var(--tx3);margin-bottom:18px;}
.login-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;}
.login-error{font-size:11px;color:var(--red);min-height:16px;margin-top:10px;}
.role-hidden{display:none!important;}
.topbar{grid-column:1/-1;background:var(--sur);border-bottom:1px solid var(--bor);display:flex;align-items:center;padding:0 16px;gap:12px;z-index:50;flex-shrink:0;}
.logo{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;letter-spacing:-0.5px;}
.logo em{color:var(--gold);font-style:normal;}
.tb-sep{width:1px;height:16px;background:var(--bor);}
.tb-page{font-size:12px;color:var(--tx3);}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:6px;}

/* status pills */
.pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500;border:1px solid;white-space:nowrap;}
.p-pending{background:var(--gb);color:var(--gold);border-color:var(--gbo);}
.p-stock-check{background:var(--pb);color:var(--pur);border-color:var(--pbo);}
.p-stock-ok{background:var(--gnb);color:var(--grn);border-color:var(--gbo2);}
.p-stock-partial{background:var(--ob);color:var(--ora);border-color:var(--obo);}
.p-dc-ready{background:var(--bb);color:var(--blu);border-color:var(--bbo);}
.p-in-transit{background:var(--ob);color:var(--ora);border-color:var(--obo);}
.p-delivered{background:var(--gnb);color:var(--grn);border-color:var(--gbo2);}
.p-unconfirmed{background:var(--rb);color:var(--red);border-color:var(--rbo);}
.p-closed{background:var(--sur3);color:var(--tx3);border-color:var(--bor2);}
.p-partial{background:var(--ob);color:var(--ora);border-color:var(--obo);}

/* ── SIDEBAR ── */
.sidebar{background:var(--sur);border-right:1px solid var(--bor);overflow-y:auto;padding:10px 6px;}
.sb-sec{margin-bottom:18px;}
.sb-lbl{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--tx3);padding:0 8px;margin-bottom:4px;}
.ni{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:5px;cursor:pointer;font-size:12px;color:var(--tx2);border:1px solid transparent;margin-bottom:1px;transition:all .12s;user-select:none;}
.ni:hover{background:var(--sur2);color:var(--tx);}
.ni.on{background:var(--gb);color:var(--gold);border-color:var(--gbo);font-weight:500;}
.ni svg{width:13px;height:13px;flex-shrink:0;opacity:.65;}
.ni.on svg{opacity:1;}
.nb{margin-left:auto;font-size:10px;font-weight:600;padding:1px 5px;border-radius:8px;}
.nb-r{background:var(--rb);color:var(--red);}
.nb-g{background:var(--gb);color:var(--gold);}
.nb-b{background:var(--bb);color:var(--blu);}

/* ── MAIN ── */
.main{overflow:hidden;display:flex;flex-direction:column;background:var(--bg);}
.view{display:none;flex-direction:column;height:100%;overflow:hidden;}
.view.on{display:flex;}

/* page header */
.ph{padding:12px 20px;background:var(--sur);border-bottom:1px solid var(--bor);display:flex;align-items:center;gap:12px;flex-shrink:0;}
.ph-t{font-size:15px;font-weight:600;}
.ph-s{font-size:11px;color:var(--tx3);margin-top:1px;}
.ph-r{margin-left:auto;display:flex;gap:6px;align-items:center;}

/* scroll area */
.scr{flex:1;overflow-y:auto;padding:16px 20px;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:5px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid;transition:all .12s;font-family:'IBM Plex Sans',sans-serif;line-height:1;white-space:nowrap;}
.b-dark{background:var(--tx);color:#fff;border-color:var(--tx);}
.b-dark:hover{opacity:.82;}
.b-ghost{background:transparent;color:var(--tx2);border-color:var(--bor);}
.b-ghost:hover{background:var(--sur2);color:var(--tx);}
.b-gold{background:var(--gb);color:var(--gold);border-color:var(--gbo);}
.b-gold:hover{background:#f8edcc;}
.b-grn{background:var(--gnb);color:var(--grn);border-color:var(--gbo2);}
.b-grn:hover{background:#d0eedd;}
.b-red{background:var(--rb);color:var(--red);border-color:var(--rbo);}
.b-blu{background:var(--bb);color:var(--blu);border-color:var(--bbo);}
.b-sm{padding:4px 9px;font-size:11px;}
.b-xs{padding:2px 7px;font-size:10px;}

/* ── CARDS ── */
.card{background:var(--sur);border:1px solid var(--bor);border-radius:7px;overflow:hidden;}
.ch{padding:9px 14px;background:var(--sur2);border-bottom:1px solid var(--bor);display:flex;align-items:center;justify-content:space-between;}
.ch-t{font-size:10px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--tx2);}
.cb{padding:14px;}

/* fields */
.field{display:flex;flex-direction:column;gap:3px;}
.field label{font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--tx3);}
.field input,.field select,.field textarea{padding:6px 9px;border:1px solid var(--bor);border-radius:4px;font-size:12px;font-family:'IBM Plex Sans',sans-serif;color:var(--tx);background:var(--sur);outline:none;transition:border-color .12s;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(154,112,16,.1);}
.field textarea{resize:vertical;min-height:48px;}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.fg4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;}

/* tables */
table.t{width:100%;border-collapse:collapse;}
table.t th{font-size:9px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--tx3);padding:7px 10px;background:var(--sur2);border-bottom:1px solid var(--bor);text-align:left;white-space:nowrap;}
table.t td{padding:7px 10px;border-bottom:1px solid var(--bor);font-size:12px;vertical-align:middle;}
table.t tr:last-child td{border-bottom:none;}
table.t tbody tr:hover td{background:var(--sur2);}

/* ── DASHBOARD ── */
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px;}
.kpi{background:var(--sur);border:1px solid var(--bor);border-radius:7px;padding:14px 16px;position:relative;overflow:hidden;}
.kpi-n{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:500;line-height:1;margin-bottom:4px;}
.kpi-l{font-size:11px;color:var(--tx3);}
.kpi-d{font-size:10px;margin-top:4px;}
.kpi-bar{position:absolute;bottom:0;left:0;right:0;height:3px;}
.dash-2{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;margin-bottom:14px;}
.dash-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}

/* flow tracker */
.flow{display:flex;align-items:center;gap:0;padding:16px 14px;overflow-x:auto;}
.flow-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;}
.flow-dot{width:32px;height:32px;border-radius:50%;border:2px solid var(--bor2);background:var(--sur2);display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;}
.flow-dot.done{background:var(--gnb);border-color:var(--gbo2);}
.flow-dot.active{background:var(--gb);border-color:var(--gbo);box-shadow:0 0 0 4px rgba(154,112,16,.15);}
.flow-dot.warn{background:var(--rb);border-color:var(--rbo);}
.flow-lbl{font-size:9px;color:var(--tx3);text-align:center;max-width:60px;font-weight:500;letter-spacing:.3px;}
.flow-line{width:36px;height:2px;background:var(--bor);flex-shrink:0;margin-bottom:20px;}
.flow-line.done{background:var(--gbo2);}

/* alert list */
.al{list-style:none;}
.al li{display:flex;align-items:flex-start;gap:9px;padding:9px 14px;border-bottom:1px solid var(--bor);font-size:12px;}
.al li:last-child{border-bottom:none;}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:3px;}
.dr{background:var(--red);}
.dg{background:var(--grn);}
.dy{background:var(--gold);}
.db{background:var(--blu);}
.dp{background:var(--pur);}

/* staff bar */
.sbar{height:5px;background:var(--bor);border-radius:3px;margin-top:4px;width:100px;display:inline-block;vertical-align:middle;}
.sbar-f{height:100%;border-radius:3px;}

/* ── PI / ORDER CARDS ── */
.pi-card{background:var(--sur);border:1px solid var(--bor);border-radius:7px;margin-bottom:10px;overflow:hidden;transition:box-shadow .12s;}
.pi-card:hover{box-shadow:var(--sh);}

.pi-top{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:start;padding:12px 16px;}
.pi-id-blk{}
.pi-main-id{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;color:var(--gold);}
.pi-cid{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--tx3);margin-top:1px;}
.pi-cname{font-size:14px;font-weight:600;}
.pi-meta{font-size:11px;color:var(--tx3);margin-top:2px;}
.pi-val{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;text-align:right;}
.pi-vmeta{font-size:10px;color:var(--tx3);margin-top:2px;text-align:right;}

/* stock confirmation bar */
.pi-stock-bar{padding:8px 16px;border-top:1px solid var(--bor);display:flex;align-items:center;gap:8px;background:var(--pb);flex-wrap:wrap;}
.pi-stock-bar.ok{background:var(--gnb);}
.pi-stock-bar.partial{background:var(--ob);}

/* DC section inside PI card */
.pi-dc-sec{border-top:1px solid var(--bor);}
.pi-dc-head{padding:7px 16px;background:var(--sur2);border-bottom:1px solid var(--bor);display:flex;align-items:center;gap:10px;}
.pi-dc-head-lbl{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--tx3);}
/* flex-wrap, not a fixed grid — a rigid column layout forces horizontal
   overflow the moment content (long DC numbers, product lists) doesn't
   fit a narrow container like a modal; wrapping never does. */
.dc-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:9px 16px;border-bottom:1px solid var(--bor);}
.dc-row:last-child{border-bottom:none;}
.dc-row>*{min-width:0;}
.dc-id{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--blu);font-weight:500;word-break:break-word;}
.dc-info{font-size:12px;flex:1 1 160px;word-break:break-word;}
.dc-meta{font-size:10px;color:var(--tx3);margin-top:1px;word-break:break-word;}

.pi-actions{padding:8px 16px;border-top:1px solid var(--bor);display:flex;gap:6px;align-items:center;background:var(--sur2);}

/* ── NEW PI LAYOUT ── */
.pi-layout{display:grid;grid-template-columns:1fr 286px;flex:1;overflow:hidden;}
.pi-l{overflow-y:auto;padding:14px;}
.pi-r{border-left:1px solid var(--bor);background:var(--sur);overflow-y:auto;display:flex;flex-direction:column;}

/* product search */
.psr{position:relative;}
.pdd{position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--sur);border:1px solid var(--bor);border-radius:5px;box-shadow:var(--shm);z-index:100;max-height:180px;overflow-y:auto;display:none;}
.pdd.open{display:block;}
.pdi{padding:7px 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--bor);}
.pdi:last-child{border-bottom:none;}
.pdi:hover{background:var(--sur2);}
.pdi.hi{background:var(--sur2);outline:1px solid var(--gold);outline-offset:-1px;}

/* Shared "highlighted note/instruction" treatment — used anywhere a PI/DC
   note, special instruction, or pending item needs to stand out rather than
   blend into surrounding metadata (phase 4 items #6/#14/#16/#22). */
.dc-note-highlight{margin-top:5px;padding:5px 8px;background:var(--gb);border:1px solid var(--gbo);border-radius:4px;font-size:11px;color:var(--gold);font-weight:500;line-height:1.4;}
.pending-highlight{outline:1px solid var(--gold);outline-offset:-1px;background:var(--gb);}
.pdi-n{font-size:12px;font-weight:500;}
.pdi-m{font-size:10px;color:var(--tx3);}
.pdi-s{font-size:11px;font-weight:600;}
.pt-in{width:100%;padding:4px 7px;border:1px solid transparent;border-radius:3px;font-size:12px;font-family:'IBM Plex Sans',sans-serif;color:var(--tx);background:transparent;outline:none;}
.pt-in:hover{border-color:var(--bor);}
.pt-in:focus{border-color:var(--gold);background:var(--sur);}
.pt-in.r{text-align:right;}

.sc{display:inline-flex;align-items:center;font-size:10px;padding:1px 6px;border-radius:8px;border:1px solid;white-space:nowrap;}
.sc-ok{background:var(--gnb);color:var(--grn);border-color:var(--gbo2);}
.sc-lo{background:var(--ob);color:var(--ora);border-color:var(--obo);}
.sc-out{background:var(--rb);color:var(--red);border-color:var(--rbo);}

/* PI right summary */
.pi-rh{padding:14px;border-bottom:1px solid var(--bor);background:var(--sur2);}
.pi-rl{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--tx3);margin-bottom:2px;}
.pi-rn{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:500;}
.pi-rc{font-size:11px;color:var(--tx3);margin-top:2px;}
.pi-rb{padding:14px;flex:1;}
.srow{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--bor);}
.srow:last-of-type{border-bottom:none;}
.srow .sl{font-size:12px;color:var(--tx2);}
.srow .sv{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;}
.stot{background:var(--tx);color:#fff;border-radius:5px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.stot .stl{font-size:10px;opacity:.6;}
.stot .stv{font-family:'IBM Plex Mono',monospace;font-size:16px;}
.pi-rf{padding:12px 14px;border-top:1px solid var(--bor);display:flex;flex-direction:column;gap:6px;}
.pi-rf .btn{justify-content:center;}

.sal-box{background:var(--rb);border:1px solid var(--rbo);border-radius:5px;padding:9px;margin-top:10px;}
.sal-t{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--red);margin-bottom:4px;}
.sal-i{font-size:11px;color:var(--red);padding:2px 0;}

/* cust selector */
.cs{background:var(--sur2);border:1px solid var(--bor);border-radius:5px;padding:9px 12px;display:flex;align-items:center;gap:9px;cursor:pointer;margin-bottom:12px;transition:border-color .12s;}
.cs:hover{border-color:var(--gold);}
.cs-info{flex:1;}
.cs-name{font-size:13px;font-weight:600;}
.cs-id{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--gold);}
.cs-empty{font-size:12px;color:var(--tx3);}

/* ── DC CREATOR ──
   This view scrolls as a single normal page (not two independent
   nested-scroll panes) so long item lists never get visually squeezed
   into a fixed viewport height — the reference/action panel just stays
   pinned via position:sticky while the left column scrolls past it. */
#view-new-dc.on{overflow-y:auto;overflow-x:hidden;display:block;}
.dc-layout{display:grid;grid-template-columns:1fr 300px;align-items:start;}
.dc-l{padding:14px;display:flex;flex-direction:column;gap:12px;}
.dc-r{border-left:1px solid var(--bor);padding:14px;display:flex;flex-direction:column;gap:12px;position:sticky;top:0;}

.dc-item-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--bor);flex-wrap:wrap;}
.dc-item-row:last-child{border-bottom:none;}
.dc-item-stats{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px;}
.dc-item-stat{font-size:11px;color:var(--tx3);white-space:nowrap;}
.dc-item-stat b{color:var(--tx);font-family:'IBM Plex Mono',monospace;font-weight:500;}
.dc-qty-in{width:90px;padding:6px 8px;border:1px solid var(--bor);border-radius:4px;font-size:13px;font-family:'IBM Plex Mono',monospace;text-align:right;outline:none;background:var(--sur);}
.dc-qty-in:focus{border-color:var(--grn);box-shadow:0 0 0 2px rgba(22,101,52,.08);}
.dc-check{width:15px;height:15px;cursor:pointer;accent-color:var(--grn);}

/* WA msg preview */
.wa-wrap{background:#e8f5e9;border:1px solid #b8dfbe;border-radius:7px;padding:11px;}
.wa-bub{background:#fff;border-radius:8px;padding:9px 11px;margin-bottom:6px;font-size:12px;line-height:1.55;box-shadow:0 1px 2px rgba(0,0,0,0.06);}
.wa-bub:last-child{margin-bottom:0;}
.wa-bub strong{display:block;font-size:9px;color:#166534;margin-bottom:3px;letter-spacing:.3px;text-transform:uppercase;}
.wa-from{font-size:9px;color:#888;margin-top:3px;}
.wa-reply{background:#dcf8c6;margin-left:28px;}
.wa-note{font-size:11px;color:#4a7a5a;margin-top:7px;font-style:italic;line-height:1.4;}

/* ── RECEIVING VIEW ── */
.recv-card{background:var(--sur);border:1px solid var(--bor);border-radius:7px;margin-bottom:10px;overflow:hidden;}
.recv-top{padding:11px 16px;display:grid;grid-template-columns:auto 1fr auto auto auto;gap:12px;align-items:center;}
.recv-mid{padding:8px 16px;background:var(--sur2);border-top:1px solid var(--bor);border-bottom:1px solid var(--bor);}
.recv-items{display:flex;flex-wrap:wrap;gap:6px;}
.recv-item-tag{font-size:11px;padding:3px 8px;background:var(--sur3);border:1px solid var(--bor);border-radius:4px;color:var(--tx2);}
.recv-bot{padding:8px 16px;display:flex;gap:6px;align-items:center;}

/* payment modal */
.pay-info{background:var(--gnb);border:1px solid var(--gbo2);border-radius:5px;padding:11px;margin-bottom:14px;font-size:12px;}
.pay-outstanding{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:500;color:var(--grn);margin:4px 0;}

/* ── MODAL ── */
.ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:200;align-items:center;justify-content:center;}
.ov.open{display:flex;}
.modal{background:var(--sur);border-radius:8px;border:1px solid var(--bor);width:500px;max-width:calc(100vw - 32px);max-height:84vh;overflow-y:auto;overflow-x:hidden;box-shadow:var(--shm);}
.modal.wide{width:600px;}
.mh{padding:13px 18px;border-bottom:1px solid var(--bor);display:flex;align-items:center;justify-content:space-between;}
.mh-t{font-size:14px;font-weight:600;}
.mx{background:none;border:none;font-size:18px;cursor:pointer;color:var(--tx3);padding:2px;}
.mb{padding:18px;}
.mf{padding:12px 18px;border-top:1px solid var(--bor);display:flex;justify-content:flex-end;gap:6px;}

/* cust picker rows */
.cp-row{padding:8px 10px;cursor:pointer;border-radius:4px;display:grid;grid-template-columns:88px 1fr 80px;gap:8px;align-items:center;transition:background .1s;}
.cp-row:hover{background:var(--sur2);}

/* toast */
.toast{position:fixed;bottom:18px;right:18px;padding:10px 16px;border-radius:5px;font-size:12px;font-weight:500;display:none;z-index:999;box-shadow:var(--shm);max-width:340px;}
.toast.show{display:block;}
.toast.def{background:var(--tx);color:#fff;}
.toast.ok{background:var(--grn);color:#fff;}
.toast.err{background:var(--red);color:#fff;}
.toast.warn{background:var(--gold);color:#fff;}

/* step indicator */
.steps{display:flex;align-items:center;gap:0;padding:10px 14px;border-bottom:1px solid var(--bor);background:var(--sur);flex-shrink:0;}
.step{display:flex;align-items:center;gap:6px;}
.step-n{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;border:2px solid var(--bor2);color:var(--tx3);background:var(--sur2);}
.step-n.done{background:var(--gnb);border-color:var(--gbo2);color:var(--grn);}
.step-n.active{background:var(--gb);border-color:var(--gbo);color:var(--gold);}
.step-lbl{font-size:11px;color:var(--tx3);}
.step-lbl.active{color:var(--gold);font-weight:500;}
.step-lbl.done{color:var(--grn);}
.step-line{width:28px;height:2px;background:var(--bor);margin:0 4px;flex-shrink:0;}
.step-line.done{background:var(--gbo2);}