:root {
  --bg:#E9EDF3; --surface:#FFFFFF; --surface-2:#F4F7FB;
  --ink:#16202E; --ink-2:#5A6B7E; --ink-3:#8494A6;
  --line:#DBE2EC; --line-strong:#C4CEDC;
  --accent:#2F6FED; --accent-600:#1F5AD1; --accent-tint:#E4ECFC;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(20,35,56,.06), 0 6px 20px rgba(20,35,56,.06);
  --shadow-lg:0 12px 40px rgba(20,35,56,.18);
  --ff:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  --st-new-bg:#E6EAF0; --st-new-fg:#5A6B7E;
  --st-assigned-bg:#E1ECFD; --st-assigned-fg:#1F5AD1;
  --st-progress-bg:#FCEFD6; --st-progress-fg:#B4741A;
  --st-picked-bg:#D7F0EA; --st-picked-fg:#0E7A63;
  --st-sent-bg:#EBE4FB; --st-sent-fg:#6A44C9;
  --st-closed-bg:#E6EAF0; --st-closed-fg:#8494A6;
  --st-backorder-bg:#FCEFD6; --st-backorder-fg:#B4741A;
  --st-over-bg:#FBE0E0; --st-over-fg:#C23B3B;
  --good:#1F9D6B; --warn:#E0912F; --crit:#D64545;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0D131B; --surface:#151D27; --surface-2:#1B2431;
    --ink:#E8EEF5; --ink-2:#9FADBE; --ink-3:#748498;
    --line:#28333F; --line-strong:#35424F;
    --accent:#4C86F5; --accent-600:#3B77EE; --accent-tint:#1B2A44;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    --shadow-lg:0 16px 50px rgba(0,0,0,.55);
    --st-new-bg:#232E3B; --st-new-fg:#9FADBE;
    --st-assigned-bg:#172A48; --st-assigned-fg:#6FA2F7;
    --st-progress-bg:#3A2E17; --st-progress-fg:#E0A659;
    --st-picked-bg:#12332C; --st-picked-fg:#4FC7AC;
    --st-sent-bg:#271E43; --st-sent-fg:#A688F0;
    --st-closed-bg:#232E3B; --st-closed-fg:#748498;
    --st-backorder-bg:#3A2E17; --st-backorder-fg:#E0A659;
    --st-over-bg:#3A1E1E; --st-over-fg:#F08A8A;
  }
}
:root[data-theme="light"] {
  --bg:#E9EDF3; --surface:#FFFFFF; --surface-2:#F4F7FB;
  --ink:#16202E; --ink-2:#5A6B7E; --ink-3:#8494A6;
  --line:#DBE2EC; --line-strong:#C4CEDC;
  --accent:#2F6FED; --accent-600:#1F5AD1; --accent-tint:#E4ECFC;
  --shadow:0 1px 2px rgba(20,35,56,.06), 0 6px 20px rgba(20,35,56,.06);
  --st-new-bg:#E6EAF0; --st-new-fg:#5A6B7E;
  --st-assigned-bg:#E1ECFD; --st-assigned-fg:#1F5AD1;
  --st-progress-bg:#FCEFD6; --st-progress-fg:#B4741A;
  --st-picked-bg:#D7F0EA; --st-picked-fg:#0E7A63;
  --st-sent-bg:#EBE4FB; --st-sent-fg:#6A44C9;
  --st-closed-bg:#E6EAF0; --st-closed-fg:#8494A6;
  --st-backorder-bg:#FCEFD6; --st-backorder-fg:#B4741A;
  --st-over-bg:#FBE0E0; --st-over-fg:#C23B3B;
}
:root[data-theme="dark"] {
  --bg:#0D131B; --surface:#151D27; --surface-2:#1B2431;
  --ink:#E8EEF5; --ink-2:#9FADBE; --ink-3:#748498;
  --line:#28333F; --line-strong:#35424F;
  --accent:#4C86F5; --accent-600:#3B77EE; --accent-tint:#1B2A44;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:0 16px 50px rgba(0,0,0,.55);
  --st-new-bg:#232E3B; --st-new-fg:#9FADBE;
  --st-assigned-bg:#172A48; --st-assigned-fg:#6FA2F7;
  --st-progress-bg:#3A2E17; --st-progress-fg:#E0A659;
  --st-picked-bg:#12332C; --st-picked-fg:#4FC7AC;
  --st-sent-bg:#271E43; --st-sent-fg:#A688F0;
  --st-closed-bg:#232E3B; --st-closed-fg:#748498;
  --st-backorder-bg:#3A2E17; --st-backorder-fg:#E0A659;
  --st-over-bg:#3A1E1E; --st-over-fg:#F08A8A;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body { background:var(--bg); color:var(--ink); font-family:var(--ff);
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.5; }
h1,h2,h3,h4 { margin:0; text-wrap:balance; letter-spacing:-.01em; }
a { color:var(--accent); }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.mut { color:var(--ink-3); }

/* ---- app shell ---- */
.pf-shell { max-width:960px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column;
  background:var(--surface-2); box-shadow:0 0 0 1px var(--line); }
.pf-top { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px;
  padding:12px 18px; background:var(--surface); border-bottom:1px solid var(--line); }
.pf-brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em;
  text-decoration:none; color:inherit; }
.pf-brand .logo { width:28px; height:28px; border-radius:8px; flex:none; position:relative;
  background:linear-gradient(135deg,var(--accent),var(--accent-600)); }
.pf-brand .logo::before { content:""; position:absolute; inset:7px 6px; border-radius:2px;
  background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 5px); opacity:.9; }
.pf-brand small { display:block; font-weight:500; font-size:11px; color:var(--ink-3); margin-top:-2px; }
.pf-spacer { flex:1; }
.whoami { display:flex; align-items:center; gap:9px; padding:5px 6px 5px 10px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; text-decoration:none; color:inherit; }
.avatar { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:11px;
  font-weight:700; color:#fff; flex:none; }
.whoami .role { font-size:11px; color:var(--ink-2); }
.whoami .nm { font-size:12.5px; font-weight:600; line-height:1.05; }
.iconbtn { border:0; background:none; color:var(--ink-3); cursor:pointer; padding:6px; border-radius:8px;
  display:grid; place-items:center; }
.iconbtn:hover { background:var(--surface-2); color:var(--ink); }

.pf-content { flex:1; padding:18px; padding-bottom:92px; }

/* ---- bottom nav ---- */
.pf-navwrap { position:sticky; bottom:0; z-index:20; background:var(--surface); border-top:1px solid var(--line); }
.pf-nav { display:flex; max-width:960px; margin:0 auto; width:100%; }
.pf-nav a { flex:1; text-decoration:none; padding:9px 4px 10px; color:var(--ink-3); display:flex;
  flex-direction:column; align-items:center; gap:3px; font-size:11px; font-weight:600;
  border-top:2px solid transparent; }
.pf-nav a svg { width:21px; height:21px; }
.pf-nav a.active { color:var(--accent); border-top-color:var(--accent); }

/* ---- headings ---- */
.page-h { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px; }
.page-h h2 { font-size:20px; }
.page-h p { margin:2px 0 0; color:var(--ink-2); font-size:13px; }
.subtle-h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3); margin:22px 2px 10px; }
.subtle-h:first-child { margin-top:0; }

/* ---- cards / slips ---- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.stack { display:flex; flex-direction:column; gap:10px; }
.slip { padding:14px 15px; display:flex; gap:12px; align-items:center; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow);
  transition:border-color .15s, transform .1s; text-align:left; width:100%; font-family:inherit; color:inherit; }
button.slip { cursor:pointer; }
button.slip:hover { border-color:var(--line-strong); }
button.slip:active { transform:scale(.995); }
.slip .body { flex:1; min-width:0; }
.slip .ord { font-weight:700; font-size:14px; }
.slip .cust { color:var(--ink-2); font-size:13px; }
.slip .meta { display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; font-size:12px; color:var(--ink-3); }
.slip .right { text-align:right; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.chev { color:var(--ink-3); flex:none; }

/* ---- pills ---- */
.pill { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:650;
  padding:3px 9px; border-radius:999px; white-space:nowrap; letter-spacing:.01em; }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.pill.plain::before { display:none; }
.pill.new { background:var(--st-new-bg); color:var(--st-new-fg); }
.pill.assigned { background:var(--st-assigned-bg); color:var(--st-assigned-fg); }
.pill.progress { background:var(--st-progress-bg); color:var(--st-progress-fg); }
.pill.picked { background:var(--st-picked-bg); color:var(--st-picked-fg); }
.pill.sent { background:var(--st-sent-bg); color:var(--st-sent-fg); }
.pill.closed { background:var(--st-closed-bg); color:var(--st-closed-fg); }
.pill.backorder { background:var(--st-backorder-bg); color:var(--st-backorder-fg); }
.pill.over { background:var(--st-over-bg); color:var(--st-over-fg); }

/* ---- tiles ---- */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px; }
.tile { padding:14px 15px; }
.tile .k { font-size:12px; color:var(--ink-2); }
.tile .v { font-size:30px; font-weight:750; letter-spacing:-.02em; margin-top:6px; line-height:1; }
.tile .v small { font-size:13px; font-weight:600; color:var(--ink-3); }
.tile .bar { height:5px; border-radius:3px; background:var(--surface-2); margin-top:12px; overflow:hidden; }
.tile .bar > span { display:block; height:100%; border-radius:3px; background:var(--accent); }

/* workload */
.worker { display:flex; align-items:center; gap:12px; padding:12px 15px; }
.worker + .worker { border-top:1px solid var(--line); }
.worker .nm { font-weight:600; font-size:14px; }
.worker .sub { font-size:12px; color:var(--ink-3); }
.load { flex:1; height:8px; border-radius:5px; background:var(--surface-2); overflow:hidden; min-width:70px; }
.load > span { display:block; height:100%; }
.count-badge { min-width:30px; text-align:center; font-weight:750; font-family:var(--mono); }

/* ---- banners ---- */
.banner { display:flex; gap:11px; padding:13px 15px; border-radius:var(--radius); align-items:flex-start;
  margin-bottom:16px; font-size:13px; border:1px solid transparent; }
.banner.warn { background:var(--st-progress-bg); color:var(--st-progress-fg); }
.banner.crit { background:var(--st-over-bg); color:var(--st-over-fg); }
.banner.info { background:var(--accent-tint); color:var(--accent-600); }
.banner b { color:var(--ink); }
.banner .ico { flex:none; margin-top:1px; }

/* ---- table ---- */
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
table.pf { border-collapse:collapse; width:100%; font-size:13px; min-width:560px; }
table.pf th, table.pf td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.pf th { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:700;
  background:var(--surface-2); }
table.pf tbody tr:last-child td { border-bottom:0; }

/* ---- forms / buttons ---- */
select, input:not([type]), input[type=text], input[type=number], input[type=email], input[type=password] {
  font-family:inherit; font-size:13px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:8px; padding:7px 9px; width:100%; }
select { cursor:pointer; }
input:focus, select:focus, button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
select.mini { width:auto; padding:5px 8px; font-size:12.5px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); font-weight:650; font-size:14px; padding:11px 16px;
  border-radius:10px; cursor:pointer; transition:background .15s, border-color .15s; text-decoration:none; }
.btn:hover { background:var(--surface-2); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--accent-600); }
.btn.block { width:100%; }
.btn.lg { padding:14px 18px; font-size:15px; }
.btn.sm { padding:7px 11px; font-size:13px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.empty { text-align:center; color:var(--ink-3); padding:40px 20px; font-size:13.5px; }

/* ---- detail dialog ---- */
.overlay { position:fixed; inset:0; z-index:60; background:rgba(12,20,30,.5); display:flex;
  align-items:flex-end; justify-content:center; }
.sheet { background:var(--surface); width:100%; max-width:960px; max-height:92vh; overflow-y:auto;
  border-radius:18px 18px 0 0; box-shadow:var(--shadow-lg); }
.sheet-h { position:sticky; top:0; background:var(--surface); padding:16px 18px 13px; border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; gap:12px; }
.sheet-h h3 { font-size:17px; } .sheet-h .cust { color:var(--ink-2); font-size:13px; margin-top:2px; }
.x { margin-left:auto; border:0; background:var(--surface-2); width:32px; height:32px; border-radius:50%;
  cursor:pointer; color:var(--ink-2); font-size:17px; flex:none; }
.sheet-body { padding:16px 18px 20px; }
.infogrid { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin-bottom:18px; }
.infogrid .k { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); }
.infogrid .val { font-weight:600; font-size:14px; margin-top:2px; }
.lines-h { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:700;
  margin:6px 0 9px; display:flex; justify-content:space-between; }
.line { display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--line); }
.line .qty { font-family:var(--mono); font-weight:700; background:var(--surface-2); border:1px solid var(--line);
  border-radius:8px; padding:6px 9px; min-width:52px; text-align:center; font-size:13px; }
.line.is-short .qty { border-color:var(--st-over-fg); color:var(--st-over-fg); }
.line .desc { flex:1; } .line .desc .it { font-weight:600; font-size:13.5px; }
.line .desc .sku { font-size:12px; color:var(--ink-3); }
.line .loc { font-size:12px; color:var(--ink-2); text-align:right; }
.line .loc .l { font-family:var(--mono); font-weight:600; color:var(--ink); }
.ctlwrap { margin-top:8px; }
.linkbtn { background:none; border:0; padding:3px 0; font-size:12.5px; font-weight:650; color:var(--ink-2);
  cursor:pointer; font-family:inherit; }
.linkbtn.warn { color:var(--st-progress-fg); }
.linkbtn:hover { text-decoration:underline; }
.pickctl { display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:12.5px; }
.pickctl.short { background:var(--st-over-bg); border-radius:9px; padding:8px 10px; }
.pickctl label { color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.pickctl input.qtyin { width:64px; padding:5px 6px; text-align:center; font-family:var(--mono); font-weight:600; }
.sheet-foot { position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line);
  padding:13px 18px; display:flex; flex-direction:column; gap:0; }
.foot-note { font-size:12px; color:var(--st-over-fg); display:flex; align-items:center; gap:6px; padding:0 2px 10px; }

/* settings */
.setrow { display:flex; align-items:center; gap:14px; padding:14px 15px; }
.setrow + .setrow { border-top:1px solid var(--line); }
.setrow .lbl { flex:1; } .setrow .lbl .t { font-weight:600; font-size:14px; }
.setrow .lbl .d { font-size:12px; color:var(--ink-3); margin-top:1px; }
.setrow .ctl { width:160px; flex:none; display:flex; justify-content:flex-end; align-items:center; gap:6px; }
.sec-title { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:700;
  margin:22px 4px 9px; }
.sec-title:first-child { margin-top:4px; }

/* toast */
.toast-wrap { position:fixed; left:0; right:0; bottom:98px; z-index:80; display:flex; flex-direction:column;
  align-items:center; gap:8px; pointer-events:none; }
.toast { background:var(--ink); color:var(--surface); padding:11px 16px; border-radius:11px; font-size:13px;
  font-weight:550; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; max-width:88%; }
.toast .dot { width:20px; height:20px; border-radius:50%; background:var(--good); display:grid; place-items:center; flex:none; color:#fff; }
.toast.mail .dot { background:var(--accent); }

/* login */
.login-page {
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px;
  background-image:
    linear-gradient(180deg, rgba(13,19,27,.55), rgba(13,19,27,.65)),
    url('main_backround.png');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-attachment:fixed;
}
.login-wrap { width:100%; max-width:400px; margin:0; }
.login-card { padding:26px 24px 22px; }
.pf-logo-img { height:48px; width:auto; max-width:240px; display:block; object-fit:contain; }
.login-logo { height:auto; max-height:60px; max-width:220px; margin:0 auto 4px; }
.login-page .login-foot { color:rgba(255,255,255,.85); }
.login-card .pf-brand { justify-content:center; margin-bottom:6px; }
.login-card h2 { text-align:center; font-size:19px; margin-top:12px; }
.login-card .sub { text-align:center; color:var(--ink-2); font-size:13px; margin:4px 0 20px; }
.field { margin-bottom:13px; }
.field label { display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:5px; }
.demo-creds { margin-top:18px; font-size:12px; color:var(--ink-3); background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.demo-creds code { font-family:var(--mono); color:var(--ink); }
.remember { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2);
  margin:2px 0 16px; cursor:pointer; user-select:none; }
.remember input { width:auto; accent-color:var(--accent); }
.login-links { margin-top:16px; text-align:center; font-size:13px; }
.login-links a { color:var(--accent); text-decoration:none; }
.login-links a:hover { text-decoration:underline; }
.val-msg { color:var(--crit); font-size:12px; display:block; margin-top:4px; }
.login-foot { text-align:center; font-size:12px; color:var(--ink-3); margin:16px 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .sheet { animation:slideup .28s cubic-bezier(.2,.8,.2,1); }
  .toast { animation:pop .3s cubic-bezier(.2,.9,.3,1); }
  @keyframes slideup { from { transform:translateY(40px); opacity:.6; } to { transform:none; opacity:1; } }
  @keyframes pop { from { transform:translateY(14px); opacity:0; } to { transform:none; opacity:1; } }
}