/* Kitroom Jobs — office UI.
   Design tokens: zinc neutral scale + Kit Room brand accents (shared with
   KitQuote): Midnight Blue #03004F for primary actions/wordmark, Sky Blue
   #42A4CB decorative only, a darkened sky for links/focus (4.5:1 on white).
   Tinted semantic colours (always paired with text, never colour alone).
   8px spacing grid, quiet borders + hairline shadows. */
:root {
  --bg: #f6f7f8;            /* zinc-50 */
  --card: #ffffff;
  --ink: #18181b;           /* zinc-900 */
  --ink-2: #3f3f46;         /* zinc-700 */
  --muted: #71717a;         /* zinc-500 */
  --line: #e4e4e7;          /* zinc-200 */
  --line-2: #d4d4d8;        /* zinc-300 */
  --navy: #03004f;          /* brand Midnight Blue — primary buttons, wordmark */
  --sky: #42a4cb;           /* brand Sky Blue — decorative accents only */
  --accent: #1b6e93;        /* interactive: links, focus (accessible sky) */
  --accent-ink: #14536f;
  --accent-soft: #e9f4f9;
  --ok: #047857;  --ok-soft: #ecfdf5;  --ok-line: #a7f3d0;
  --warn: #b45309; --warn-soft: #fffbeb; --warn-line: #fde68a;
  --bad: #b91c1c;  --bad-soft: #fef2f2; --bad-line: #fecaca;
  --sup: #5b21b6;  --sup-soft: #f3eefc; --sup-line: #d9c8f5;   /* waiting on a supplier */
  --navy-soft: #ececf8; --navy-line: #c9c8ea;                 /* on the floor: shelf, production, pack */
  --radius: 12px;
  --shadow: 0 1px 2px rgba(24, 24, 27, .05), 0 1px 1px rgba(24, 24, 27, .03);
  --font-display: "Montserrat", "Poppins", -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.5;
  background: var(--bg); color: var(--ink);
}
main { max-width: 1060px; margin: 0 auto; padding: 24px 20px 64px; }

/* ---- top navigation ------------------------------------------------------ */
.topnav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; /* two Goods In links pushed it past 768px */
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 10px 20px;
}
.topnav::before {
  content: "Kitroom Jobs";
  font-family: var(--font-display);
  font-weight: 800; letter-spacing: -0.02em; margin-right: 18px; color: var(--navy);
  padding-left: 34px;
  background: url("/public/kitroom-mark.png") no-repeat left center / 26px auto;
}
.topnav a {
  text-decoration: none; font-weight: 550; font-size: .92rem; color: var(--muted);
  padding: 6px 14px; border-radius: 999px;
}
.topnav a:hover { color: var(--ink); background: var(--bg); }
.topnav .nav-active { color: var(--accent-ink); background: var(--accent-soft); text-decoration: none; }
.nav-more { position: relative; margin-left: auto; }
.nav-more > summary { list-style: none; cursor: pointer; font-weight: 550; font-size: .92rem; color: var(--muted); padding: 6px 14px; border-radius: 999px; user-select: none; }
.nav-more > summary::-webkit-details-marker, .home-release > summary::-webkit-details-marker { display: none; }
.nav-more > summary::marker, .home-release > summary::marker { content: ""; }
.nav-more > summary::before, .home-release > summary::before { content: none; }
.nav-more > summary::after { content: " ▾"; font-size: .8em; }
.nav-more > summary:hover { color: var(--ink); background: var(--bg); }
.nav-menu { position: absolute; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; min-width: 160px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(3, 0, 79, .12); z-index: 60; }
.nav-menu a { border-radius: 8px; }
.pending[hidden] { display: none; }
/* who the order waits on — the same five colours on the Orders list, the order strip and Today */
.own-us { background: var(--accent-soft); border-color: #bcdcea; color: var(--accent-ink); }
.own-customer { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.own-supplier { background: var(--sup-soft); border-color: var(--sup-line); color: var(--sup); }
.own-floor { background: var(--navy-soft); border-color: var(--navy-line); color: var(--navy); }
.own-hold { background: var(--bad); border-color: var(--bad); color: #fff; }
.own-done { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.strip span.now.own-us { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.strip span.now.own-customer { background: var(--warn); border-color: var(--warn); color: #fff; }
.strip span.now.own-supplier { background: var(--sup); border-color: var(--sup); color: #fff; }
.strip span.now.own-hold { background: var(--bad); border-color: var(--bad); color: #fff; }
.strip span.now.own-done { background: var(--ok); border-color: var(--ok); color: #fff; }
.tile.live.own-us { border-color: var(--accent-ink); } .tile.own-us .tile-n { color: var(--accent-ink); }
.tile.live.own-supplier { border-color: var(--sup); } .tile.own-supplier .tile-n { color: var(--sup); }
.legend .tag { margin-right: 4px; }
.home-release > summary { list-style: none; cursor: pointer; color: var(--accent-ink); font-size: .85rem; margin-top: 6px; }
.home-release > summary::-webkit-details-marker { display: none; }

/* ---- type ---------------------------------------------------------------- */
h1 { font-family: var(--font-display); color: var(--navy); font-size: 1.45rem; font-weight: 750; letter-spacing: -0.02em; margin: 4px 0 14px; }
h2 { font-size: .82rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em;
     color: var(--muted); margin: 4px 0 10px; }
h2.line-title { font-size: 1.05rem; font-weight: 650; text-transform: none; letter-spacing: -0.01em;
     color: var(--ink); margin: 0 0 4px; }
a { color: var(--accent); }
.muted { color: var(--muted); }

/* ---- surfaces ------------------------------------------------------------ */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px; margin: 0 0 14px;
}
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 820px) { .cols { grid-template-columns: 1fr; } }

/* ---- banners: colour + words, never colour alone ------------------------- */
.banner-block {
  background: var(--bad); color: #fff; font-weight: 700; font-size: 1rem;
  padding: 12px 16px; border-radius: 10px; margin: 0 0 14px;
}
.banner-warn {
  background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line);
  font-weight: 600; padding: 9px 14px; border-radius: 10px; margin: 8px 0;
}

/* ---- pills --------------------------------------------------------------- */
.tag {
  display: inline-block; border-radius: 999px; padding: 2px 11px;
  font-size: .8rem; font-weight: 550;
  background: var(--bg); border: 1px solid var(--line-2); color: var(--ink-2);
}
.st-approved { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.st-awaiting_approval { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.st-draft { background: var(--accent-soft); border-color: #bcdcea; color: var(--accent-ink); }
.st-superseded, .st-retired, .st-dismissed { color: var(--muted); text-decoration: line-through; }

/* ---- tables -------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; }
th {
  text-align: left; font-size: .72rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}
td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: .92rem; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td, table tr:hover td { background: #fafafa; }

/* ---- forms --------------------------------------------------------------- */
input, select, textarea {
  font: inherit; color: var(--ink);
  padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--card);
}
input:focus, select:focus, textarea:focus, .picker-q:focus {
  outline: 2px solid var(--accent-soft); border-color: var(--accent);
}
::placeholder { color: #a1a1aa; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.form-grid h2, .form-grid button, .form-grid .hint { grid-column: 1 / -1; }
.f { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; }
.f span { color: var(--muted); font-weight: 550; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline { display: inline; }

/* buttons: quiet by default; .primary for the action that matters */
button {
  font: inherit; font-weight: 570; font-size: .9rem;
  background: var(--card); color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 8px;
  padding: 7px 14px; cursor: pointer;
  box-shadow: 0 1px 1px rgba(24, 24, 27, .04);
}
button:hover { background: var(--bg); }
button.primary {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
button.primary:hover { background: #1a1766; }
.linklike {
  background: none; border: none; box-shadow: none; color: var(--accent);
  cursor: pointer; padding: 0; font-size: .88rem; font-weight: 500;
}
.linklike:hover { background: none; text-decoration: underline; }
a.btn {
  display: inline-block; text-decoration: none; font-weight: 570; font-size: .9rem;
  color: var(--ink-2); background: var(--card); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 7px 14px; box-shadow: 0 1px 1px rgba(24, 24, 27, .04);
}
a.btn:hover { background: var(--bg); }

/* ---- login --------------------------------------------------------------- */
.login { max-width: 330px; margin: 16vh auto; display: flex; flex-direction: column; gap: 10px; }
.login h1 { text-align: center; }
.login input { padding: 11px; }
.login button { background: var(--navy); border-color: var(--navy); color: #fff; padding: 11px; }

/* ---- job page ------------------------------------------------------------ */
.swatch {
  display: inline-block; width: 15px; height: 15px; border-radius: 4px;
  border: 1px solid rgba(24, 24, 27, .25); vertical-align: -2px; margin-right: 4px;
}
.deco {
  background: #fafafa; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-top: 10px;
}
details { margin-top: 10px; }
summary { cursor: pointer; color: var(--muted); font-size: .88rem; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--muted);
  transition: transform .15s ease; font-size: .85em; }
details[open] > summary::before { transform: rotate(90deg); }
.sec-sum { font-size: .82rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 10px 0 8px; }

/* ---- design picker ------------------------------------------------------- */
.picker { position: relative; display: inline-block; min-width: 300px; }
.picker-q { width: 100%; }
.picker-list {
  display: none; position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  max-height: 320px; overflow-y: auto;
  box-shadow: 0 10px 30px rgba(24, 24, 27, .12);
}
.picker-opt { padding: 8px 12px; cursor: pointer; font-size: .9rem; border-bottom: 1px solid var(--line);
  display: flex; gap: 10px; align-items: center; }
.art-check { background-image: conic-gradient(#71717a 25%, #a1a1aa 0 50%, #71717a 0 75%, #a1a1aa 0);
  background-size: 14px 14px; }
.opt-img { width: 38px; height: 38px; object-fit: contain;
  background-image: conic-gradient(#71717a 25%, #a1a1aa 0 50%, #71717a 0 75%, #a1a1aa 0); background-size: 10px 10px;
  border: 1px solid var(--line); border-radius: 6px; flex: none; }
.opt-noimg { background: repeating-linear-gradient(45deg, #fafafa, #fafafa 4px, #f0f0f1 4px, #f0f0f1 8px); }
.sel-design { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.sel-design img { width: 72px; height: 72px; object-fit: contain;
  background-image: conic-gradient(#71717a 25%, #a1a1aa 0 50%, #71717a 0 75%, #a1a1aa 0); background-size: 12px 12px;
  border: 1px solid var(--line-2); border-radius: 8px; }
.sel-noimg { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: .7rem; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 8px; }
.mini-create summary { color: var(--muted); font-size: .8rem; }
a.client-card { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink);
  padding: 14px 18px; font-size: 1rem; }
a.client-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(66, 164, 203, .18); }
.line-fold { margin-top: 0; }
.line-fold summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.line-fold summary .line-title { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.line-fold[open] summary { margin-bottom: 6px; }
.roster-fold { margin-top: 0; }
.roster-fold summary { font-size: .95rem; color: var(--ink); font-weight: 600; }
.roster-fold[open] summary { margin-bottom: 4px; }
.picker-create { color: var(--accent); font-weight: 600; }
.picker-opt:last-child { border-bottom: 0; }
.picker-opt:hover { background: var(--accent-soft); }
.picker-rel { border-left: 3px solid var(--accent); }
.picker-none { color: var(--muted); }

.th-row { padding: 8px 14px; margin-bottom: 8px; }
.mock-thumb { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.mock-thumb img { width: 96px; height: 96px; object-fit: contain; background: #fff;
  border: 1px solid var(--line-2); border-radius: 8px; }

/* ---- info tooltip -------------------------------------------------------- */
.hint { color: var(--muted); font-size: .85rem; margin: 0 0 4px; }
.info { position: relative; cursor: help; color: var(--accent); font-weight: 600; }
.info .tip {
  display: none; position: absolute; left: 0; top: 1.6em; z-index: 40;
  background: var(--ink); color: #fff; padding: 10px 13px; border-radius: 8px;
  width: 300px; font-size: .8rem; font-weight: 400; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(24, 24, 27, .25);
}
.info:hover .tip, .info:focus .tip { display: block; }

/* ---- readiness checklist ------------------------------------------------- */
.checklist td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.chk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--line-2);
  background: var(--card); color: var(--ok); font-size: 1.1rem; font-weight: 800; cursor: pointer;
}
.chk:hover { border-color: var(--accent); }
.chk-on { background: var(--ok-soft); border-color: var(--ok-line); }
.chk-auto { cursor: default; color: var(--muted); border-style: dashed; }

/* ---- home-screen lanes --------------------------------------------------- */
.lane-triage { border-left: 4px solid var(--warn); }
.lane-setup { border-left: 4px solid var(--accent); }
.primary-btn { background: var(--navy); color: #fff; border-color: var(--navy); }
.so-preview { background: var(--bg); }
.so-prev-lines { margin-top: 4px; }
.so-prev-lines td { padding: 3px 10px 3px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }

/* ---- home lanes: contained scrolling, visible counts ---------------------- */
.lane-scroll { max-height: 380px; overflow-y: auto; }
.lane-scroll table { width: 100%; }
.count-tag {
  display: inline-block; min-width: 26px; text-align: center;
  background: var(--accent-soft); color: var(--accent-ink);
  border-radius: 999px; padding: 1px 9px; font-size: .82rem; font-weight: 700;
  text-transform: none; letter-spacing: 0;
}
.dtf-print { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; }
.dtf-print .opt-img { width: 34px; height: 34px; }
/* products catalogue: a row that still needs a design must not blend in */
.prod-needs td { background: #fef3f2; }
.prod-bulk .picker-list { max-height: 300px; overflow-y: auto; }

/* ---- Goods In ------------------------------------------------------------ */
/* Mobile-first: one column at 360px, destination readable at arm's length
   (≥64px on a phone, ≥96px on a tablet), touch targets ≥48px. Colour is
   always paired with words. */
.gi { max-width: 720px; margin: 0 auto; }
.gi-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gi-top .muted { font-size: .9rem; }
.gi-scan, .gi-input {
  width: 100%; font-size: 1.15rem; padding: 14px 16px; min-height: 52px;
  border: 2px solid var(--line-2); border-radius: 12px; background: var(--card);
}
.gi-scan:focus { border-color: var(--accent); outline: 3px solid var(--accent-soft); }
.gi-dest {
  border-radius: 16px; padding: 18px 16px; margin: 12px 0; color: #fff;
  background: var(--ink-2); min-height: 180px; transition: background .15s ease;
}
.gi-dest.gi-idle { background: var(--ink-2); }
.gi-dest.gi-compact { min-height: 0; padding: 12px 16px; }
.gi-dest.gi-compact .gi-step { margin-bottom: 2px; }
.pk-steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.pk-steps span { font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--card); }
.pk-steps span.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.pk-steps span.done { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.gi-dest.gi-pending { background: #1d4ed8; }          /* "now scan…" — blue, words say so */
.gi-dest.gi-ok { background: var(--ok); }
.gi-dest.gi-bad { background: var(--bad); }
.gi-dest.gi-warnpanel { background: var(--warn); }
.gi-dest.gi-neutral { background: var(--ink-2); }
.gi-step { font-family: var(--font-display); font-weight: 800; letter-spacing: .04em; font-size: 1rem; opacity: .95; margin-bottom: 8px; }
.gi-card { background: rgba(255,255,255,.12); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.gi-card.gi-query { outline: 3px solid #fbbf24; }
.gi-card.gi-stock { outline: 3px dashed rgba(255,255,255,.6); }
.gi-item { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.gi-count { background: #fff; color: var(--ink); border-radius: 999px; padding: 0 10px; font-weight: 800; }
.gi-sku { opacity: .75; font-weight: 400; font-size: .85rem; }
.gi-big {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  font-size: clamp(64px, 17vw, 96px); margin: 10px 0 6px; word-break: break-word;
}
.gi-big-small { font-size: clamp(28px, 8vw, 48px); }
@media (min-width: 740px) { .gi-big { font-size: clamp(96px, 12vw, 128px); } }
.gi-sub { font-size: 1.15rem; }
.gi-badges { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.gi-badge { display: inline-block; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 2px 10px; font-size: .82rem; font-weight: 600; }
.gi-badge-hold { background: #7c2d12; border-color: #fdba74; }
.gi-badge-warn { background: #78350f; border-color: #fcd34d; }
.gi-hint { margin-top: 10px; font-size: 1rem; opacity: .95; }
/* the pick card: where, then what, then who — in that order of size */
.gi-pick-where { margin: 2px 0 6px; }
.gi-bay { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 9vw, 64px); line-height: 1; letter-spacing: .02em; background: #fff; color: #1d4ed8; border-radius: 12px; padding: 6px 16px; }
.gi-bay-none { font-size: 1rem; font-weight: 600; background: rgba(255,255,255,.18); color: #fff; padding: 6px 12px; }
.gi-bay-take { display: inline-block; vertical-align: middle; font-weight: 800; font-size: clamp(20px, 4.5vw, 30px); color: #fff; margin-left: 6px; }
.gi-pick-item { font-size: clamp(1.35rem, 3.2vw, 1.75rem); font-weight: 700; line-height: 1.25; }
.gi-pick-qty { display: inline-block; background: #fff; color: #1d4ed8; border-radius: 10px; padding: 0 10px; margin-right: 4px; }
.gi-pick-sku { opacity: .8; font-size: .95rem; margin-top: 2px; }
/* a line being counted up at Pick: "3 of 5", then "now scan P09" */
.gi-counter { font-family: var(--font-display); font-weight: 800; line-height: 1; font-size: clamp(56px, 15vw, 96px); margin: 4px 0 6px; }
.gi-counter small { font-size: .45em; opacity: .8; font-weight: 700; }
.gi-qtyform { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.gi-qtyform input { width: 88px; min-height: 48px; font-size: 1.2rem; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line-2); }
.gi-pick-for { opacity: .85; font-size: .95rem; margin-top: 8px; }
/* the order's note line: information, not a banner — quiet, but not missable */
.gi-pick-note { margin-top: 8px; font-size: 1rem; background: rgba(255,255,255,.14); border-left: 4px solid #fff; padding: 6px 10px; border-radius: 6px; }
.order-note { font-size: .92rem; color: var(--ink-2); margin-top: 3px; border-left: 3px solid var(--line-2); padding-left: 8px; }
/* Pack: the delivery address at the top, big enough to check against the label (24 Oct 2026) */
.pk-deliver { margin-top: 8px; padding: 8px 12px; border: 2px solid var(--navy, #03004f); border-radius: 10px; background: var(--card, #fff); display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; font-size: 1.05rem; max-width: 760px; }
.pk-deliver .k { width: 100%; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pk-deliver b { font-size: 1.15rem; }
.line-note { font-size: .85rem; color: var(--ink-2); }
.gi-complete { margin-top: 10px; background: #fff; color: var(--ok); font-weight: 800; border-radius: 10px; padding: 10px 12px; font-size: 1.05rem; }
.gi-next { margin-top: 12px; font-size: 1rem; font-weight: 600; opacity: .9; }
.gi-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gi-btn {
  min-height: 56px; font-size: 1rem; font-weight: 650; border-radius: 12px; padding: 10px 14px;
  background: var(--card); border: 2px solid var(--line-2); color: var(--ink);
}
.gi-btn:hover { background: var(--bg); }
.gi-btn-warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.gi-btn-stock { border-color: var(--ink-2); background: var(--ink-2); color: #fff; }
.gi-btn-query { border-color: #f59e0b; background: #fbbf24; color: #1c1917; }
.gi-finish { min-height: 56px; font-size: 1rem; font-weight: 700; border-radius: 12px; padding: 10px 18px; background: var(--navy); color: #fff; border: 2px solid var(--navy); }
.gi-finish:disabled { opacity: .45; cursor: not-allowed; }
.gi-cancel { min-height: 56px; font-size: 1rem; font-weight: 700; border-radius: 12px; padding: 10px 18px; background: transparent; color: var(--bad); border: 2px solid var(--bad); }
.gi-cancel:disabled { opacity: .45; cursor: not-allowed; }
.gi-progress { margin-top: 14px; }
.gi-totals { font-size: 1rem; margin-bottom: 6px; }
.gi-fold summary { font-size: .95rem; color: var(--ink-2); padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.gi-tally td { padding: 6px 6px; font-size: .92rem; }
.gi-teach { background: var(--card); border: 2px solid var(--bad-line); border-radius: 14px; padding: 14px; margin: 10px 0; }
.gi-teach-label { display: block; font-weight: 600; margin-bottom: 8px; }
.gi-teach-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-height: 50vh; overflow-y: auto; }
.gi-teach-opt { text-align: left; min-height: 48px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); padding: 8px 12px; font-size: .95rem; }
.gi-teach-opt:hover { background: var(--accent-soft); }
.gi-teach-pack { display: flex; gap: 8px; align-items: center; margin: 8px 0 12px; font-size: .95rem; }
.gi-summary h2 { margin-top: 14px; }
.gi-summary table td { font-size: .92rem; }
.st-shadow { background: var(--accent-soft); border-color: #bcdcea; color: var(--accent-ink); }
.st-sent, .st-manual { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.st-failed { background: var(--bad); border-color: var(--bad); color: #fff; }
.st-off { color: var(--muted); text-decoration: line-through; }
.gi-mode { display: inline-flex; gap: 6px; align-items: center; }
.gi-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gi-home { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card); }
.gi-home.gi-home-busy { border-color: var(--accent); background: var(--accent-soft); }
.gi-home b { font-family: var(--font-display); font-size: 1.15rem; }
@media (max-width: 480px) {
  main { padding: 14px 12px 48px; }
  .gi-actions { grid-template-columns: 1fr 1fr; }
  .topnav { overflow-x: auto; white-space: nowrap; }
  .topnav::before { display: none; }
  .nav-menu { position: fixed; right: 8px; left: 8px; top: 52px; }
  table { display: block; overflow-x: auto; }
}

/* ---- Today: the day's flow ------------------------------------------------ */
.today-step { padding: 14px 16px; }
.today-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.today-head h2 { font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 700; }
.today-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: #fff; font-family: var(--font-display); font-weight: 800; flex: none; }
.today-act { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.today-live { border-left: 4px solid var(--accent); }
.today-warn { border-left: 4px solid var(--warn); }
.today-step table td { padding: 6px 8px; }
.today-step .btn, .today-step button { min-height: 40px; }
@media (max-width: 480px) { .today-act { margin-left: 0; width: 100%; } }

/* ---- order dossier ---- */
.gates { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin-bottom: 12px; }
.gate { margin: 0; }
.gate h2 { margin: 0; font-size: 1rem; }
.gate-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.gate-head .tag { margin-left: auto; }
.gate-warn { border-color: #b45309; }
.gate-bad { border-color: var(--bad, #b91c1c); }
.gate table { font-size: .9rem; }

/* ---- orders list and order page ---- */
.summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:0 0 12px }
.summary .card { padding:10px 14px; margin:0 }
.summary .n { font-family:var(--font-display); font-size:1.5rem; font-weight:750; color:var(--navy); line-height:1.1 }
.summary .n.bad { color:var(--bad) }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 10px }
.chip { font-size:.8rem; padding:5px 10px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); border-radius:999px; text-decoration:none }
.chip b { color:var(--ink) }
.chip.on { background:var(--accent-soft); border-color:var(--accent); color:var(--accent) }
.due-late { color:var(--bad); font-weight:600 }
table.orders td small, .items small { color:var(--muted); font-weight:400; font-size:.75rem }
.doss-head { display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; margin:0 0 12px }
.doss-head .grow { flex:1 1 320px; min-width:0 }
.strip { display:flex; gap:4px; flex-wrap:wrap; margin:8px 0 0 }
.strip span { font-size:.72rem; padding:4px 9px; border-radius:6px; background:var(--card); border:1px solid var(--line); color:var(--muted) }
.strip span.done { background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok) }
.strip span.now { background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600 }
.contact dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:.9rem }
.contact dt { color:var(--muted) } .contact dd { margin:0 }
.addr-edit input { display:block; width:100%; margin:3px 0; font-size:.85rem; padding:4px 8px }
.contactlog .logrow { display:grid; grid-template-columns:44px 1fr; gap:8px; font-size:.8rem; padding:3px 0 }
.contactlog time { color:var(--muted) }
.contactlog .add { grid-template-columns:auto 1fr auto; margin-top:6px; gap:6px }
.items select { min-width:72px } .items tr.removed td { opacity:.45; text-decoration:line-through } .items tr.removed td:last-child { text-decoration:none; opacity:1 }
.items tr.addrow td { border-bottom:0 }
button.small { font:inherit; font-size:.8rem; font-weight:600; padding:6px 10px; border-radius:8px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); cursor:pointer }
button.small.primary { background:var(--navy); border-color:var(--navy); color:#fff }
.pending { display:flex; gap:10px; justify-content:space-between; align-items:center; flex-wrap:wrap; margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--warn-soft); border:1px solid var(--warn-line); font-size:.9rem }
.pending-actions { display:flex; gap:6px }
.timeline { list-style:none; margin:0; padding:0 }
.timeline li { display:grid; grid-template-columns:48px 1fr; gap:10px; padding:5px 0; border-bottom:1px dashed var(--line); font-size:.88rem }
.timeline time { color:var(--muted); font-variant-numeric:tabular-nums }
.tasks { list-style:none; margin:0; padding:0 } .tasks li { padding:4px 0; border-bottom:1px dashed var(--line); font-size:.9rem }
.banner-ok { background:var(--ok-soft); border:1px solid var(--ok-line); color:var(--ok); border-radius:10px; padding:8px 12px; margin-top:8px }

.notes-card { border-color: var(--warn-line); background: var(--warn-soft) }
.review { border-color: #b45309 }
.actions-row .btn { min-height: 40px }

.cust { font-size:.82rem; color:var(--ink-2); margin-top:3px; display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center }
.cust .art img { height:44px; max-width:120px; border:1px solid var(--line); border-radius:6px; vertical-align:middle; background:#fff }

/* ---- Today tiles ---- */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:0 0 14px }
.tile { display:flex; flex-direction:column; gap:4px; padding:16px 18px; border-radius:14px; text-decoration:none; border:2px solid var(--line); background:var(--card); color:var(--ink); min-height:120px }
.tile.quiet { opacity:.55; filter:grayscale(1) }
.tile.live { border-color:var(--navy); box-shadow:0 2px 10px rgba(3,0,79,.12) }
.tile.live.warn { border-color:var(--warn); background:var(--warn-soft) }
.tile-n { font-family:var(--font-display); font-size:2.4rem; font-weight:750; line-height:1; color:var(--navy) }
.tile.warn .tile-n { color:var(--warn) }
.tile-title { font-weight:700; font-size:1.05rem }
.tile-sub { color:var(--muted); font-size:.85rem }

/* ---- handheld mode (PDA with a scanner): no nav, tight padding, scan box always in reach ---- */
.handheld-exit { display: none; }
.handheld .handheld-enter { display: none; }
.handheld .topnav { display: none; }
.handheld main { padding: 8px 10px 40px; }
.handheld .handheld-exit { display: block; text-align: center; font-size: .8rem; color: var(--muted); padding: 8px; }
.handheld .gi-scan, .handheld .pk-scan { position: sticky; top: 0; z-index: 5; }
.handheld h1 { font-size: 1.2rem; }
/* order page items: the size list never dictates the column width */
table.items select { max-width: 120px; }
/* the owner colours must beat the generic pill rule declared above them */
.tag.own-us { background: var(--accent-soft); border-color: #bcdcea; color: var(--accent-ink); }
.tag.own-customer { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.tag.own-supplier { background: var(--sup-soft); border-color: var(--sup-line); color: var(--sup); }
.tag.own-floor { background: var(--navy-soft); border-color: var(--navy-line); color: var(--navy); }
.tag.own-hold { background: var(--bad); border-color: var(--bad); color: #fff; }
.tag.own-done { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
/* ---- stage pills: one hue per stage, in flow order, so the Orders list reads at a glance (Sean, 22 Oct 2026:
   the owner colours alone left To order, On order and In production in three near-identical pastels) ---- */
.tag.stg-new-order { background: #f1f5f9; border-color: #94a3b8; color: #334155; }
.tag.stg-awaiting-payment { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.tag.stg-to-order { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.tag.stg-on-order { background: #ede9fe; border-color: #8b5cf6; color: #5b21b6; }
.tag.stg-checked-in { background: #cffafe; border-color: #06b6d4; color: #155e75; }
.tag.stg-to-pick { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
.tag.stg-needs-a-tote { background: #ffedd5; border-color: #f97316; color: #9a3412; }
.tag.stg-pull-to-tote { background: #fef9c3; border-color: #eab308; color: #854d0e; }
.tag.stg-to-production { background: #fce7f3; border-color: #ec4899; color: #9d174d; }
.tag.stg-in-production { background: #db2777; border-color: #db2777; color: #fff; }
.tag.stg-ready-to-pack { background: #dcfce7; border-color: #22c55e; color: #166534; }
.tag.stg-posted { background: var(--ok); border-color: var(--ok); color: #fff; }
.tag.stg-on-hold { background: var(--bad); border-color: var(--bad); color: #fff; }
.tag[class*="stg-"] { white-space: nowrap; }
/* flags beside the pill stay one line: the reason goes in What's happening */
.tag.flag { white-space: nowrap; font-size: .78rem; padding: 2px 8px; }

/* ---- Production: late rows stand out, late-cleared progress, the next job per trade ---- */
tr.row-late td { background: var(--bad-soft); }
tr.row-late td:first-child { box-shadow: inset 4px 0 0 var(--bad); }
tr.row-near td:first-child { box-shadow: inset 4px 0 0 var(--warn); }
.prod-bar { height: 12px; background: var(--line-2); border-radius: 999px; overflow: hidden; margin: 8px 0 6px; }
.prod-bar i { display: block; height: 100%; background: var(--ok); }
.prod-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin: 0 0 12px; }
/* rows wrap inside the card (Sean, 24 Oct 2026: the queue overflowed it); only the tags stay on one line */
.prod-queue td:nth-child(3) .tag { white-space: nowrap; }
.prod-queue td:last-child .inline-form { flex-wrap: wrap; }
.card:has(> .prod-queue) { overflow-x: auto; }
.prod-clock { font-size: .78rem; margin-top: 3px; }
.prod-nextcard { margin: 0; border-left: 4px solid var(--navy); display: flex; flex-direction: column; gap: 6px; }
.prod-nextlabel { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.prod-nextmain { font-size: 1.05rem; }

/* the type of work on the strip is a button: click it to change it (22 Oct 2026) */
.strip .strip-pick { all: unset; cursor: pointer; font: inherit; }
.strip .strip-pick:hover, .strip .strip-pick:focus-visible { text-decoration: underline; }

/* ---- the next step on the order page (22 Oct 2026, Sean: "it is hard to actually see what you need to do") ----
   Each card says what happens next in one bar, with one strong button; everything else stays quiet. */
.primary-btn, button.primary-btn, a.btn.primary-btn { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 650; padding: 9px 18px; border-radius: 10px; box-shadow: 0 2px 6px rgba(3, 0, 79, .18); }
.primary-btn:hover, a.btn.primary-btn:hover { background: #1a1766; }
.next-step { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); border: 1px solid #bcdcea; border-left: 5px solid var(--accent); }
.next-step .ns-label { font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.next-step .ns-text { font-weight: 600; color: var(--ink); flex: 1 1 260px; }
.next-step.done { background: var(--ok-soft); border-color: var(--ok-line); border-left-color: var(--ok); }
.next-step.done .ns-label { color: var(--ok); }
.next-step.wait { background: var(--warn-soft); border-color: var(--warn-line); border-left-color: var(--warn); }
.next-step.wait .ns-label { color: var(--warn); }
/* payment requests: the amount large, the request's progress as three steps */
.payreq { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.payreq:first-of-type { border-top: none; }
.payreq .amt { font-size: 1.35rem; font-weight: 750; color: var(--navy); font-variant-numeric: tabular-nums; }
.payreq .what { font-weight: 600; }
.payreq .who { font-size: .8rem; color: var(--muted); }
.steps { display: flex; gap: 0; align-items: center; font-size: .78rem; font-weight: 600; }
.steps span { padding: 3px 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--muted); }
.steps span:first-child { border-radius: 999px 0 0 999px; } .steps span:last-child { border-radius: 0 999px 999px 0; }
.steps span + span { border-left: none; }
.steps span.on { background: var(--accent-soft); color: var(--accent-ink); border-color: #bcdcea; }
.steps span.paid { background: var(--ok); color: #fff; border-color: var(--ok); }
.steps span.stop { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }
.money-in { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); padding: 0 0 0 10px; }
.money-in span { font-weight: 700; color: var(--muted); }
.money-in input { border: none; box-shadow: none; font-size: 1.1rem; font-weight: 700; width: 90px; padding: 8px; background: transparent; }
.ask-pay { margin-top: 10px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 12px; background: var(--bg); }
.ask-pay textarea { border-radius: 10px; }
/* soft gates (22 Oct 2026): the office's five, the order checklist, the Allocate note */
.check-five { grid-column: span 2; background: var(--card); border: 2px solid var(--accent); border-radius: 12px; padding: 12px 14px; min-width: 0 }
.check-five.quiet { border: 1px solid var(--line-2) }
.five-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; font-size: .9rem }
.five-row:hover b { text-decoration: underline }
.five-row span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px }
.gchip { font-size: .8rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card) }
.gchip.ok { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok) }
.gchip.no { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn) }
.gi-soft { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); font-size: .95rem }
@media (max-width: 700px) { .check-five { grid-column: span 1 } }
/* Today, grouped by who does the work (23 Oct 2026) */
.today-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 18px 0 8px; font-weight: 700 }
.today-idle { color: var(--muted); font-size: .85rem; margin: -4px 0 10px }
.today-idle a { color: inherit }
.today-list { font-size: .88rem; margin: 4px 0 12px } .today-list ul { margin: 4px 0 0; padding-left: 18px }
.today-office { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin: 0 0 14px; align-items: start }
.today-office .check-five { grid-column: auto }
.today-office .side { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px }
.today-office .side .tile { min-height: 0; padding: 12px 14px }
.today-office .side .tile-n { font-size: 2rem }
@media (max-width: 760px) { .today-office { grid-template-columns: 1fr } }
/* first look at a new order (23 Oct 2026) */
.first-look { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--accent); background: var(--card) }
.first-look ul, .fl-spots { margin: 6px 0 0; padding-left: 18px; font-size: .9rem }
.first-look li.warn, .fl-spots li.warn { color: var(--warn); font-weight: 600 }
.first-look-row { padding: 10px 14px; margin: 0 0 8px }

/* the test copy (lib/testmode.js) */
.test-band { background: #e8660c; color: #fff; padding: 8px 14px; font-weight: 600; font-size: .95rem; }
.test-band a { color: #fff; text-decoration: underline; font-weight: 400; margin-left: 6px; }

/* Goods In: the one-press label for a garment with no barcode (23 Oct 2026) */
.gi-btn.gi-btn-primary { background: var(--accent, #1d4ed8); color: #fff; border-color: transparent; font-weight: 700; }
/* the order's next step (D2, reworked 24 Oct 2026): one bar at the top, the rest quietly under it */
.order-next { margin: 10px 0 2px }
.order-then { display: block; margin-top: 3px; font-weight: 400; font-size: .84rem; color: var(--muted) }
.order-then a { color: inherit }
/* Production's trend (E3, 24 Oct 2026): late orders each day as small bars */
.prod-spark { display: flex; align-items: flex-end; gap: 3px; margin-top: 6px; height: 34px }
.prod-spark i { display: block; width: 8px; background: var(--muted); border-radius: 2px 2px 0 0; opacity: .6 }
.prod-spark span { margin-left: 8px; font-size: .78rem; align-self: center }
/* the menu's "?" (J1, 24 Oct 2026): this screen's help */
.topnav .nav-help { margin-left: 4px; font-weight: 800; min-width: 28px; text-align: center }

/* messages between people (24 Oct 2026) */
.msg { border-left: 3px solid var(--accent, #42a4cb); padding: 4px 0 4px 10px; margin: 6px 0; }
.msg.msg-done { border-left-color: var(--line-2); opacity: .75; }
.msg-text { font-size: 1rem; margin: 2px 0; white-space: pre-wrap; }
details.today-other > summary { cursor: pointer; color: var(--muted); }

/* order page (design review, 24 Oct 2026): More actions menu and finished cards folded to one line */
.more-actions { position: relative; display: inline-block }
.more-actions > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 40px; font-weight: 570; font-size: .9rem; color: var(--ink-2); background: var(--card); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 14px; box-shadow: 0 1px 1px rgba(24, 24, 27, .04) }
.more-actions > summary:hover { background: var(--bg) }
.more-actions > summary::-webkit-details-marker { display: none }
.more-actions > summary::after { content: " ▾" }
.more-actions .ma-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 220px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px 0 }
.more-actions .ma-item > a, .more-actions .ma-item > button, .more-actions .ma-item > span { display: block; width: 100%; text-align: left; padding: 7px 14px; font-size: .9rem; color: var(--ink); text-decoration: none; background: none; border: 0 }
.more-actions .ma-item > a:hover, .more-actions .ma-item > button:hover { background: var(--accent-soft, #eef2ff) }
details.fold-done { padding: 8px 14px }
details.fold-done > summary { cursor: pointer; font-weight: 600 }
details.fold-done[open] > summary { margin-bottom: 8px }
details.fold-done > .fold-body > .card { border: 0; padding: 0; margin: 0; box-shadow: none }
.nav-menu .nav-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #71717a); padding: 8px 14px 2px; font-weight: 600 }
.nav-menu .nav-group:first-child { padding-top: 2px }
.more-actions > summary::marker { content: "" }
.more-actions > summary::before { content: none }
.nav-more .nav-menu { min-width: 230px }
.nav-more .nav-menu a { white-space: nowrap }