:root{--ink:#14213D;--muted:#5B6476;--line:#E3E7EF;--bg:#F6F7FB;--card:#FFFFFF;--accent:#1D4ED8;--ok:#0F7B4F;--warn:#B45309;--bad:#B91C1C;--chip:#EEF2FF}
*{box-sizing:border-box}
body{margin:0;font-family:'Anuphan',system-ui,sans-serif;font-size:15px;color:var(--ink);background:var(--bg)}
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.side{background:#0F172A;color:#E2E8F0;padding:20px 14px;display:flex;flex-direction:column;gap:16px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{font-weight:700;font-size:20px;letter-spacing:.02em}.brand small{font-weight:500;font-size:13px;color:#94A3B8}
.site-pick{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#94A3B8}
.site-pick select{font:inherit;padding:8px;border-radius:8px;border:0}
nav{display:flex;flex-direction:column;gap:2px}
nav button{all:unset;cursor:pointer;padding:10px 12px;border-radius:8px;color:#CBD5E1;display:flex;justify-content:space-between;gap:8px}
nav button:hover{background:#1E293B}nav button[aria-current=page]{background:#1D4ED8;color:#fff}
nav .badge{background:#F59E0B;color:#111;border-radius:999px;padding:0 8px;font-size:12px;font-weight:600}
.me{margin-top:auto;font-size:13px;color:#94A3B8}
main{padding:24px clamp(16px,3vw,36px);min-width:0;outline:none}
h1{font-size:24px;margin:0 0 16px}h2{font-size:18px;margin:24px 0 10px}
.muted{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.card b{display:block;font-size:24px;margin-top:4px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;min-width:0}
textarea{width:100%;min-height:80px}
button.btn{font:inherit;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 14px;cursor:pointer;min-height:38px}
button.btn:hover{background:#F1F5F9}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover{background:#1E40AF}
button.danger{color:var(--bad);border-color:#FCA5A5}
button:disabled{opacity:.5;cursor:not-allowed}
.tablewrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:nowrap}
td.wrap{white-space:normal;min-width:180px}
th{background:#F8FAFC;font-weight:600;position:sticky;top:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr:hover td{background:#FAFBFF}
.chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--chip)}
.st-pending_payment{background:#FEF3C7}.st-slip_review{background:#FFEDD5}.st-paid{background:#DCFCE7}.st-ordered_supplier{background:#E0E7FF}
.st-received{background:#CFFAFE}.st-packed{background:#EDE9FE}.st-shipped{background:#DBEAFE}.st-completed{background:#D1FAE5}.st-cancelled,.st-refunded{background:#F3F4F6;color:#6B7280}
.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.slip{max-width:100%;max-height:520px;border:1px solid var(--line);border-radius:8px;background:#fff}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 14px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.form label.full{grid-column:1/-1}
dialog{border:0;border-radius:14px;padding:0;max-width:min(720px,94vw);width:100%}
dialog form{padding:20px;display:flex;flex-direction:column;gap:12px}
dialog::backdrop{background:rgba(15,23,42,.45)}
#toast{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:50}
#toast div{background:#0F172A;color:#fff;padding:10px 14px;border-radius:10px;max-width:360px}
#toast div.err{background:var(--bad)}
.bars{display:flex;align-items:flex-end;gap:6px;height:140px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px}
.bars div{flex:1;background:#93C5FD;border-radius:4px 4px 0 0;position:relative;min-height:2px}
.bars span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted)}
#print-area{display:none}
@media (max-width:860px){.shell{grid-template-columns:1fr}.side{position:static;height:auto}nav{flex-direction:row;flex-wrap:wrap}}

/* 100x150 mm shipping labels */
@media print{
  @page{size:100mm 150mm;margin:0}
  body{background:#fff}
  .shell,#toast,dialog{display:none!important}
  #print-area{display:block}
  .label{width:100mm;height:150mm;padding:5mm;page-break-after:always;font-size:11pt;display:flex;flex-direction:column;gap:3mm;overflow:hidden;font-family:'Anuphan',sans-serif;color:#000}
  .label .to{border:1.5pt solid #000;padding:3mm;font-size:13pt;flex:1}
  .label .to b{font-size:16pt}
  .label .from{font-size:9pt;border-top:1px dashed #000;padding-top:2mm}
  .label .items{font-size:9pt}
  .label svg{width:100%;height:18mm}
  .label .pc{font-size:24pt;font-weight:700;letter-spacing:2pt}
  .picklist{padding:10mm;font-size:12pt}
}
[hidden]{display:none!important}