:root{
  --bg:#f5f6f8; --panel:#ffffff; --ink:#1d2430; --muted:#5b6573; --faint:#8a93a1;
  --line:#e3e7ec; --line2:#cdd4dc;
  --accent:#2e75b6; --accent-bg:#e8f1fb;
  --ok:#2e7d46; --ok-bg:#e7f4ec;
  --warn:#9a6a12; --warn-bg:#fbf1dd;
  --bad:#b3322f; --bad-bg:#fbe9e8;
  --sec-bg:#f0f2f5;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  --sans:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --r:8px; --r-lg:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 var(--sans)}
a{color:inherit;text-decoration:none}
button{font:inherit}

.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
nav{background:var(--panel);border-right:1px solid var(--line);padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{font-weight:600;font-size:14px;line-height:1.3}
.brand small{display:block;color:var(--faint);font-weight:400;font-size:11px;margin-top:3px}
.navlist{margin-top:14px;list-style:none;padding:0}
.navlist li{margin:1px 0}
.navlist a{display:flex;gap:9px;align-items:baseline;padding:7px 9px;border-radius:var(--r);color:var(--muted);font-size:13px}
.navlist a:hover{background:var(--sec-bg);color:var(--ink)}
.navlist a.on{background:var(--accent-bg);color:var(--accent);font-weight:500}
.navsec{margin:16px 0 5px;padding:0 9px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
.whoami{margin-top:18px;padding:9px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.whoami b{color:var(--ink)}

main{padding:24px 30px 80px;max-width:1040px}
.screen-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;padding-bottom:8px;border-bottom:2px solid var(--accent)}
.screen-head h1{font-size:18px;margin:0;font-weight:600}
.screen-head .ref{margin-left:auto;font-size:11px;color:var(--faint)}
.screen-note{color:var(--muted);font-size:13px;margin:8px 0 14px}

.cmd{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:9px 11px;background:var(--sec-bg);border:1px solid var(--line);border-bottom:none;border-radius:var(--r) var(--r) 0 0}
.cmd .spacer{margin-left:auto}
.btn{font-size:12px;padding:6px 12px;border:1px solid var(--line2);background:var(--panel);border-radius:var(--r);color:var(--ink);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--sec-bg)}
.btn.pri{border-color:var(--ok);color:var(--ok);font-weight:500}
.btn.dash{border-style:dashed;color:var(--muted)}
.btn.off,.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.danger{border-color:var(--bad);color:var(--bad)}

.pad{padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-bottom:none}
.pad:last-child{border-bottom:1px solid var(--line);border-radius:0 0 var(--r) var(--r)}
.grid{display:grid;gap:12px 20px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.lbl{font-size:12px;color:var(--muted);margin-bottom:3px}
.inp{border:1px solid var(--line2);border-radius:var(--r);padding:6px 9px;background:var(--panel);font:inherit;font-size:13px;width:100%}
.inp.ro{background:var(--sec-bg);color:var(--muted)}
.inp.mono{font-family:var(--mono)}
.inp.bad{border-color:var(--bad);background:var(--bad-bg)}
.lineform{display:grid;grid-template-columns:76px 76px 76px 76px 76px 88px 60px 60px 76px minmax(120px,1fr) auto;gap:6px;align-items:end;margin-top:6px;overflow-x:auto}
.lineform .fld{display:flex;flex-direction:column;gap:3px;min-width:0}
.lineform .fld>span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lineform .fld.nm>div{padding-top:6px;word-break:break-word}
.lineform .fld.bt>.btval{padding:6px 8px;border:1px solid var(--line2);border-radius:var(--r);font-size:13px;background:var(--sec-bg);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lineform .fld.bt>.btval.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.lineform>.btn{align-self:end}
@media(max-width:900px){.lineform{grid-template-columns:repeat(3,1fr)}.lineform .fld.nm,.lineform .fld.bt,.lineform>.btn{grid-column:1 / -1}}

.pill{display:inline-block;padding:2px 9px;border-radius:var(--r);font-size:12px;font-weight:500}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.info{background:var(--accent-bg);color:var(--accent)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.neut{background:var(--sec-bg);color:var(--muted)}

table.t{width:100%;border-collapse:collapse;font-size:13px;background:var(--panel)}
table.t thead th{background:var(--sec-bg);color:var(--muted);font-weight:500;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:8px 10px;border-top:1px solid var(--line);vertical-align:middle}
.wrap-tbl{border:1px solid var(--line);background:var(--panel);overflow-x:auto;border-radius:0 0 var(--r) var(--r)}
.r-mono{font-family:var(--mono)}
.r-right{text-align:right}
.r-center{text-align:center}
table.t thead th.r-center{text-align:center}
tr.clickable{cursor:pointer}
tr.clickable:hover{background:var(--accent-bg)}
.row-bad{background:var(--bad-bg)}
.row-warn{background:var(--warn-bg)}
.row-dim{opacity:.55}

.foot{padding:11px 16px;background:var(--sec-bg);border:1px solid var(--line);border-top:none;border-radius:0 0 var(--r) var(--r);font-size:13px;color:var(--muted)}
.note-box{font-size:12px;color:var(--muted);background:var(--sec-bg);border-radius:var(--r);padding:8px 10px;margin-top:10px}
.note-info{background:var(--accent-bg);color:var(--accent)}
.note-bad{background:var(--bad-bg);color:var(--bad)}
.flash{padding:10px 13px;border-radius:var(--r);margin-bottom:14px;font-size:13px}
.flash.ok{background:var(--ok-bg);color:var(--ok)}
.flash.bad{background:var(--bad-bg);color:var(--bad)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
.card{background:var(--sec-bg);border-radius:var(--r);padding:11px 13px}
.card .k{font-size:12px;color:var(--muted)} .card .v{font-size:20px;font-weight:600;margin-top:2px}

.chain{display:flex;gap:0;align-items:stretch;flex-wrap:wrap}
.nd{min-width:180px;border:1px solid var(--line2);border-radius:var(--r);padding:9px 11px;background:var(--panel);margin:4px 0}
.nd.ok{border-color:var(--ok)} .nd.info{border-color:var(--accent)} .nd.dash{border-style:dashed;background:var(--sec-bg)}
.nd .k{font-size:11px;color:var(--faint)} .nd .h{font-weight:500;margin:1px 0}
.nd .d{font-size:12px;color:var(--muted);margin-top:3px}
.arrowx{display:flex;align-items:center;padding:0 8px;color:var(--faint)}
.seg{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding:9px 11px;background:var(--sec-bg);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px}

/* login */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center}
.auth .box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 30px;width:340px}
.auth h1{font-size:18px;margin:0 0 4px}
.auth p{color:var(--muted);font-size:13px;margin:0 0 18px}
.auth .field{margin-bottom:13px}
.auth .btn{width:100%;text-align:center;padding:9px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* planned shipment date color coding */
.date-overdue{color:var(--bad);font-weight:500}
.date-today{color:var(--warn);font-weight:500}
.date-soon{color:#b8860b}
.date-normal{color:var(--ink)}
.date-none{color:var(--faint)}