:root {
  --ink: #1f2a26;
  --muted: #64716b;
  --line: #e3eae5;
  --bg: #f6faf7;
  --card: #ffffff;
  --accent: #2f9e63;       /* Custo leaf green */
  --accent-ink: #1c7a49;
  --accent-soft: #e6f6ec;  /* light-green tint for hovers/active chips */
  --green: #117a4c;
  --green-bg: #e7f5ed;
  --amber: #9a6700;
  --amber-bg: #fff4d6;
  --cod: #8a4b00;
  --cod-bg: #ffedd5;

  /* semantic status colours (danger / info / accent-purple) — were hard-coded
     in ~35 places; centralised so every alert, tag and error reads the same red */
  --red: #b42318;
  --red-bg: #fdecec;
  --red-line: #f3c5c0;
  --blue: #1a56b8;
  --blue-bg: #e8f0fe;
  --purple: #6b21a8;
  --purple-bg: #f3e8fd;

  /* radius scale — snap to these five instead of the ad-hoc 6/7/8/9/10/11 mix.
     --r-md (9px) is the default for controls, buttons and inputs. */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 9px;
  --radius: 12px;
  --r-pill: 20px;

  /* elevation scale */
  --shadow-sm: 0 1px 2px rgba(20,30,55,.06);
  --shadow-md: 0 2px 8px rgba(20,30,55,.10);
  --shadow-card: 0 1px 3px rgba(20,30,55,.08), 0 8px 30px rgba(20,30,55,.06);

  /* one focus ring for the whole app (accent border + soft accent halo) */
  --focus-ring: 0 0 0 3px rgba(47,158,99,.16);

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* topbar — light, with the leaf-green accent doing the talking */
.topbar {
  display: flex; align-items: center; gap: 28px;
  /* min-height + wrap (not a fixed height): a crowded bar — a workspace with
     many module tabs on a narrower window — folds to a second row instead of
     clipping "Sign out" off the right edge. One-row bars render as before. */
  flex-wrap: wrap;
  padding: 0 24px; min-height: 58px;
  background: var(--card); color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 10;
}
.brand a { color: var(--ink); font-weight: 700; letter-spacing: .2px; text-decoration: none; }
.brand span { font-weight: 400; color: var(--accent-ink); }
.mainnav { display: flex; gap: 6px; }
.mainnav a { color: var(--muted); padding: 7px 13px; border-radius: var(--r-sm); font-weight: 500; }
.mainnav a:hover { background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; }
.mainnav a.on { background: var(--accent); color: #fff; }
.topsearch { flex: 1; display: flex; justify-content: flex-end; }
.topsearch input { width: 100%; min-width: 170px; max-width: 460px; padding: 9px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
.topsearch input::placeholder { color: var(--muted); }
.topsearch input:focus { outline: 0; border-color: var(--accent); box-shadow: var(--focus-ring); }
.whoami { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.whoami .op { color: var(--ink); }
.whoami .op em { color: var(--accent-ink); font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-left: 4px; }
button.link { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0; }
button.link:hover { color: var(--accent-ink); text-decoration: underline; }

/* layout */
.wrap { max-width: 1180px; margin: 0 auto; padding: 28px 24px 60px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
h1 { font-size: 24px; margin: 0 0 2px; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 0 0 12px; }
.muted { color: var(--muted); }
.sm { font-size: 12.5px; }
.mono { font-family: var(--mono); }
.r { text-align: right; }
.back { font-weight: 500; }

/* flash / banners */
.flash { background: var(--green-bg); color: var(--green); border: 1px solid #bfe3cd; padding: 11px 15px; border-radius: var(--r-md); margin-bottom: 18px; }
.warn { background: var(--amber-bg); color: var(--amber); border: 1px solid #f2dca0; padding: 11px 15px; border-radius: var(--r-md); margin-bottom: 18px; }
.error { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-line); padding: 10px 14px; border-radius: var(--r-md); margin-bottom: 14px; }

/* buttons + forms */
button, .pill, .filters button {
  font: inherit; cursor: pointer; border: 1px solid var(--line);
  background: #fff; color: var(--ink); padding: 8px 14px; border-radius: var(--r-md);
}
button:hover { border-color: #b9cec2; }
button.primary, .primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover { background: var(--accent-ink); }
/* anchors styled as a button (e.g. the Daily stock-out link) — the base button
   rule only targets <button>, so an <a class="primary"> was rendering as an
   unpadded coloured text strip. Give it the same box + kill the hover underline. */
a.primary, a.btn { display: inline-block; padding: 8px 14px; border: 1px solid var(--accent);
  border-radius: var(--r-md); text-decoration: none; line-height: 1.4; }
a.primary:hover { background: var(--accent-ink); text-decoration: none; }
button.big, .big { padding: 12px 18px; font-size: 16px; width: 100%; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; }
.stack input, .stack select, .filters input, .filters select, .b2b-items-tbl select {
  font: inherit; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: #fff;
}
.stack input:focus, .filters input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.check { flex-direction: row !important; align-items: center; gap: 8px; font-weight: 500 !important; flex-wrap: wrap; }
/* A hint inside a checkbox row drops to its own indented line instead of
   squeezing the label text into a narrow side column. */
.check .muted { flex-basis: 100%; margin: 0 0 0 24px; font-weight: 400; }
.inline { display: inline; }
.rolepick select { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.whoami .op em { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  background: var(--green-bg); color: var(--green); padding: 1px 7px; border-radius: var(--r-sm); margin-left: 6px; }

/* auth card */
.auth-card { max-width: 380px; margin: 8vh auto 0; background: var(--card); padding: 32px; border-radius: var(--radius); box-shadow: var(--shadow-card); }
.auth-card h1 { text-align: center; }
.auth-card .muted { text-align: center; margin-bottom: 22px; }
/* Left-anchored content card for settings-style pages. Same skin as auth-card
   but WITHOUT the login-page centring — auth-card centres every .muted, which
   wrecks inline hints on ordinary form pages. */
.card { max-width: 480px; margin: 0 0 14px; background: var(--card); padding: 22px 24px; border-radius: var(--radius); box-shadow: var(--shadow-card); }
.card.wide { max-width: 560px; }
.card > :first-child { margin-top: 0; }
/* Secondary buttons in a stacked form shouldn't stretch into input-lookalikes;
   the primary Save keeps full width so the commit action stays obvious. */
.card .stack button:not(.primary) { align-self: flex-start; }
/* Hints inside labels read as annotations, not as more bold label text. */
.stack label .muted { font-weight: 400; }

/* refresh + filters */
.refresh { display: flex; gap: 8px; }
.refresh input { width: 80px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); }
.filters { display: flex; align-items: center; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.filters input[type=search] { flex: 1; min-width: 220px; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }

/* custom-styled dropdowns (category filter + channel pickers) */
.filters select, .inv-row select, .inv-bulk select, .b2b-items-tbl select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 38px; cursor: pointer; color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7589' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.filters select { min-width: 210px; font-weight: 600; }
.filters select:hover, .inv-row select:hover, .inv-bulk select:hover { border-color: #c9ccd6; }
.filters select:focus, .inv-row select:focus, .inv-bulk select:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
.pill { font-size: 12.5px; padding: 5px 11px; border-radius: var(--r-pill); color: var(--muted); }
.pill.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* tables */
.grid { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.grid th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--line); background: #fafbfc; }
.grid td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid tr:last-child td { border-bottom: 0; }
.rowlink { cursor: pointer; }
.rowlink:hover td { background: #fff7f2; }
/* the order a typed search matched — flash it so the eye lands on it in the list */
.row-focus td { background: #fff3cd; animation: rowflash 2.4s ease-out 1; }
@keyframes rowflash { 0%,55% { background: #ffe08a; } 100% { background: transparent; } }
.empty { text-align: center; color: var(--muted); padding: 30px !important; }

/* status + tags */
.status { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-xs); background: #eef0f4; color: #475067; display: inline-block; }
.s-unfulfilled { background: var(--amber-bg); color: var(--amber); }
.s-fulfilled { background: var(--green-bg); color: var(--green); }
.s-partially_fulfilled { background: var(--blue-bg); color: var(--blue); }
.tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-xs); background: #eef0f4; color: #475067; }
.tag.cod { background: var(--cod-bg); color: var(--cod); }
.tag.pre { background: var(--green-bg); color: var(--green); }
.tag.big { font-size: 13px; padding: 4px 12px; }
.tag.hist { background: #e7e1f5; color: #5b3fa0; font-weight: 600; }
.tag.ok { background: var(--green-bg); color: var(--green); }
.tag.bad { background: var(--red-bg); color: var(--red); }
.tag.warn { background: var(--amber-bg); color: var(--amber); }
.hist-banner { margin: 0 0 14px; }

/* detail */
.cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.card { background: var(--card); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.card.narrow { max-width: 420px; }
/* NDR (Non-Delivery Report) card — list of date+notes follow-ups + add form. */
.ndr-list { list-style: none; margin: 0 0 14px; padding: 0; }
.ndr-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.ndr-item:last-child { border-bottom: 0; }
.ndr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ndr-date { font-weight: 700; }
.ndr-notes { margin: 4px 0; white-space: pre-wrap; }
.ndr-form { display: flex; flex-direction: column; gap: 10px; }
.ndr-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.ndr-form input, .ndr-form textarea { font: inherit; }
.ndr-form button { align-self: flex-start; }
/* Operators tab: lay the narrow admin cards out side by side, wrapping on
   narrow screens. Inside the row each card grows to share the width evenly. */
.ops-tools { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin: 18px 0; }
.ops-tools > .card { margin-bottom: 0; flex: 1 1 320px; }
.ops-tools > .card.narrow { max-width: none; }
.rt { text-align: right; }
.total { font-size: 22px; font-weight: 700; margin-top: 6px; }
.lines { width: 100%; border-collapse: collapse; }
.lines th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.lines td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lines .qty { font-weight: 700; }
.pers { background: #fff7ed; border: 1px solid #fed7aa; color: var(--cod); padding: 3px 8px; border-radius: var(--r-sm); font-size: 13px; display: inline-block; }
address { font-style: normal; line-height: 1.7; margin-bottom: 18px; }
.note { background: #fffbe9; border: 1px solid #f2e7b0; padding: 9px 12px; border-radius: var(--r-md); }
dl.kv { display: grid; grid-template-columns: 130px 1fr; gap: 7px 12px; margin: 0; }
dl.kv dt { color: var(--muted); font-size: 13px; }
dl.kv dd { margin: 0; }
ul.log { list-style: none; padding: 0; margin: 0; }
ul.log li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
ul.log li:last-child { border-bottom: 0; }

/* per-order ship actions in the Shipping card — compact so the card keeps its size */
.ship-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ship-actions form { display: inline; margin: 0; }
.ship-actions button { font-size: 13px; padding: 6px 12px; }
.ship-actions .label-link { font-size: 13px; color: var(--accent-ink); }
.assign-awb { display: inline-flex !important; align-items: center; gap: 8px; flex-wrap: wrap; }
.assign-awb select { font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; max-width: 320px; }

/* Shopify order note — only rendered when present; sits above the confirm surface */
.order-note { background: #fffbe9; border: 1px solid #f2e7b0; padding: 11px 14px; border-radius: var(--r-md); margin-bottom: 16px; font-size: 15px; line-height: 1.5; }
.order-note-label { font-weight: 600; color: var(--accent-ink); margin-right: 6px; }
.order-note-wrap { margin-bottom: 16px; }
.order-note-wrap .order-note { margin-bottom: 0; }
/* edit / add order-note controls */
.note-edit { display: inline; }
.note-edit > summary, .note-add-btn { cursor: pointer; list-style: none; user-select: none; }
.note-edit > summary::-webkit-details-marker, .note-add-btn::-webkit-details-marker { display: none; }
.note-edit > summary { margin-left: 8px; font-size: 12px; color: var(--accent-ink); }
.note-add-btn { display: inline-block; font-size: 13px; color: var(--accent-ink); padding: 6px 10px;
  border: 1px dashed #d9c98c; border-radius: var(--r-sm); background: #fffdf3; }
.note-edit form, .note-add form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.note-edit textarea, .note-add textarea { width: 100%; box-sizing: border-box; font: inherit;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md); resize: vertical; }
.note-edit button, .note-add button { align-self: flex-start; }

/* edit shipping-address controls (order detail + return/replacement preview) */
.addr-edit { display: inline; }
.addr-edit > summary { cursor: pointer; list-style: none; user-select: none;
  font-size: 12px; color: var(--accent-ink); }
.addr-edit > summary::-webkit-details-marker { display: none; }
.addr-form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
  border-top: 1px solid var(--line); padding-top: 14px; }
/* the [hidden] attribute must beat the display:flex above, else the form on the
   order view stays open instead of waiting for the ✏️ edit toggle. */
.addr-form[hidden] { display: none; }
.addr-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px;
  font-weight: 600; color: var(--accent-ink); }
.addr-form input { font: inherit; font-weight: 400; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); box-sizing: border-box; }
.addr-form input[readonly] { background: #f4f4f2; color: #777; }
.addr-row { display: flex; gap: 10px; }
.addr-row label { flex: 1; }
.addr-form .req { color: #c0392b; font-weight: 700; }
.addr-form button { align-self: flex-start; margin-top: 4px; }
.addr-block { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px; background: #fafafa; }
.addr-block > summary { cursor: pointer; font-size: 14px; }
.addr-block .addr-form { border-top: none; padding-top: 12px; }

/* personalization confirmation surface */
.confirm { margin-bottom: 18px; }
.confirm-h { font-size: 13px; color: var(--accent-ink); margin-bottom: 12px; }
.item { background: var(--card); border-radius: var(--radius); border: 1px solid var(--line); padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.item-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.qbadge { font-size: 14px; font-weight: 700; color: #fff; background: var(--ink); border-radius: var(--r-sm); padding: 2px 9px; text-align: center; align-self: center; }
.item-name { font-size: 20px; line-height: 1.25; }
.sku { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pack-badge { font-size: 13px; font-weight: 800; letter-spacing: .3px; color: #fff; background: var(--accent); padding: 3px 11px; border-radius: var(--r-sm); text-transform: uppercase; align-self: center; }
.pack-callout { font-size: 19px; font-weight: 800; color: var(--accent-ink); background: #fff4ed; border: 2px dashed var(--accent); border-radius: var(--r-md); padding: 14px 18px; }

/* one row per pack-item: [index] Colour N · Name N · Charm N */
.pers-groups { display: flex; flex-direction: column; gap: 10px; }
.pers-group { display: flex; align-items: stretch; gap: 10px; }
.group-idx { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 40px; font-size: 18px; font-weight: 800; color: #fff; background: var(--ink); border-radius: var(--r-md); }
.pers-row { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.pers-row .pers-field { flex: 1 1 150px; }
.pers-field { background: #f6f7f9; border: 2px solid var(--line); border-radius: var(--r-md); padding: 9px 14px; }
.pers-key { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 3px; }
.pers-val { display: block; font-size: 21px; font-weight: 700; color: var(--ink); word-break: break-word; }
.pers-none { color: var(--muted); font-style: italic; padding: 6px 2px; }
/* colour-coded by field type — colour & name are the make-or-break fields */
.pers-field.k-colour { background: #eef4ff; border-color: #93b4f5; }
.pers-field.k-colour .pers-key { color: var(--blue); }
.pers-field.k-name { background: #fff7ed; border-color: #fdba74; }
.pers-field.k-name .pers-key { color: var(--cod); }
.pers-field.k-charm { background: #fef6fb; border-color: #f0abce; }
.pers-field.k-charm .pers-key { color: #a4256e; }
/* Support correction to a line item's personalization (Ops-App overlay). */
.pers-edited { margin-top: 12px; color: #8a5a00; background: #fff7ed; border: 1px solid #fdba74;
  border-radius: var(--r-sm); padding: 8px 12px; }
.pers-edit { margin-top: 12px; }
.pers-edit > summary { cursor: pointer; list-style: none; user-select: none;
  color: var(--muted); font-size: 13px; font-weight: 600; }
.pers-edit > summary::-webkit-details-marker { display: none; }
.pers-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
  border-top: 1px dashed var(--line); padding-top: 12px; }
.pers-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px;
  font-weight: 600; color: var(--muted); }
.pers-form input { font: inherit; font-weight: 400; padding: 9px 12px;
  border: 2px solid var(--line); border-radius: var(--r-sm); }
.pers-form button { align-self: flex-start; margin-top: 4px; }
.grid.mini td { padding: 7px 10px; font-size: 13px; }

/* RTO reconciliation */
.rto-scan { display: flex; gap: 10px; align-items: center; margin: 14px 0 22px; }
.rto-scan input { flex: 1; max-width: 420px; font-size: 18px; padding: 12px 16px; border: 2px solid var(--accent); border-radius: var(--r-md); font-family: var(--mono); }
.recon { display: flex; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 20px; min-width: 130px; }
.stat .n { font-size: 30px; font-weight: 800; line-height: 1; }
.stat .l { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-top: 5px; }
.stat.ok .n { color: var(--green); }
.stat.pend .n { color: var(--amber); }
.stat.bad .n { color: var(--red); }
/* Ship tab: compressed stat row (scoped so the RTO recon cards keep their size) */
.recon.compact { gap: 10px; }
.recon.compact .stat { padding: 10px 14px; min-width: 100px; }
.recon.compact .stat .n { font-size: 22px; }
.recon.compact .stat .l { font-size: 11px; margin-top: 3px; }
/* compact Amazon upload card that sits in the ship stats row */
.amz-upload { display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 150px; }
.amz-upload input[type=file] { font-size: 11.5px; max-width: 150px; }
.amz-upload button { align-self: flex-start; font-size: 12.5px; padding: 5px 12px; }
tr.received td { background: var(--green-bg) !important; }
tr.received.flagged td { background: var(--red-bg) !important; }
.recv-tag { font-size: 11.5px; font-weight: 700; color: var(--green); }

/* RTO inspection condition */
.cond-tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 7px;
  border-radius: var(--r-xs); margin-bottom: 4px; background: var(--red-bg); color: var(--red); border: 1px solid var(--red-line); }
.cond-tag.cond-faulty { background: var(--amber-bg); color: var(--amber); border-color: #f2dca0; }
.cond-edit > summary { cursor: pointer; color: var(--accent-ink); font-size: 12px; list-style: none; }
.cond-edit > summary::-webkit-details-marker { display: none; }
.cond-edit[open] > summary { color: var(--muted); }
.cond-edit form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.cond-edit select, .cond-edit input { font: inherit; font-size: 13px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm); }
.cond-edit input { width: 150px; }
.cond-edit button { font-size: 13px; padding: 5px 11px; }

/* returns receiving: good/damaged + filter facets */
.rcond-good { background: var(--green-bg); color: var(--green); border-color: #b9e3c4; }
.rcond-damaged { background: var(--red-bg); color: var(--red); border-color: var(--red-line); }
.recv-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.recv-form input[type=text] { font: inherit; font-size: 13px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm); width: 140px; }
.recv-form button { font-size: 13px; padding: 5px 11px; }
button.danger { background: var(--red-bg); color: var(--red); border-color: var(--red-line); }
button.danger:hover { background: #f9d9d6; }
tr.focus > td { background: #fff7e0; box-shadow: inset 3px 0 0 var(--accent); }

/* Order confirmation (support triage → Ship eligibility) */
.conf-badge { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-xs);
  background: #eef0f4; color: #475067; display: inline-block; white-space: nowrap; }
.conf-badge.sm { font-size: 11.5px; padding: 2px 8px; }
.conf-confirmed { background: var(--green-bg); color: var(--green); }
.conf-hold, .conf-noresp { background: var(--amber-bg); color: var(--amber); }
.conf-cancel { background: var(--red-bg); color: var(--red); }
.conf-new { background: #eef0f4; color: #6b7589; }

.conf-pills { margin: 0 0 18px; align-items: center; }
.pills-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-right: 4px; }
.pills-sep { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--line); }
/* Tools landing grid */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 18px; }
.tool-card { display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm);
  color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.tool-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.tool-card h2 { margin: 0 0 6px; font-size: 16px; }
.tool-card p { margin: 0; }

.tag-filter { display: inline; }
.tag-filter select { font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; color: var(--ink); }

.confirm-status .cs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.confirm-status .cs-head h2 { margin: 0; }
.confirm-status .cs-head .conf-badge { font-size: 13px; padding: 4px 12px; }
.conf-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 6px; }
.conf-form select, .conf-form input { font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-md); }
.conf-form input { flex: 1; min-width: 180px; }
.conf-form input.need { border-color: #f0b4a8; background: #fff6f4; }

.head-actions { display: flex; gap: 8px; align-items: flex-start; }

/* Inline confirmation editor on the orders list — kept compact */
.conf-cell { white-space: nowrap; }
.conf-inline { display: flex; align-items: center; gap: 4px; }
.conf-sel { font: inherit; font-size: 12px; padding: 3px 5px; border: 1px solid var(--line);
  border-radius: var(--r-xs); max-width: 104px; background: #fff; color: var(--ink); }
.conf-sel.conf-confirmed { border-color: #9bd3b4; background: var(--green-bg); color: var(--green); }
.conf-sel.conf-hold, .conf-sel.conf-noresp { border-color: #f2dca0; background: var(--amber-bg); color: var(--amber); }
.conf-sel.conf-cancel { border-color: var(--red-line); background: var(--red-bg); color: var(--red); }
.conf-reason-in { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--line);
  border-radius: var(--r-xs); width: 84px; }
.conf-reason-in.need { border-color: #f0b4a8; background: #fff6f4; }
.conf-save { font-size: 12px; line-height: 1; padding: 4px 7px; border-radius: var(--r-xs); }
.conf-msg { font-size: 12px; width: 14px; display: inline-block; }
.conf-msg.ok { color: var(--green); }
.conf-msg.err { color: var(--red); width: auto; }
.filterbar { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 4px 0 18px;
  padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.filterbar .facet { display: flex; gap: 10px; align-items: center; }
.filterbar .facet-l { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.filterbar label { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; cursor: pointer; }
.filterbar .clearf { font-size: 13px; color: var(--accent-ink); margin-left: auto; }

/* packing card + webcam */
.pack-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pack-card-head h2 { margin: 0; }
/* P0.1 queue age + pager + attention */
.age { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.age-new { background: #eef4f0; color: var(--muted); }
.age-mid { background: #fdf3dc; color: #8a6d1a; }
.age-old { background: var(--red-bg, #fbe9e7); color: var(--red, #b3372c); }
.pager { display: flex; gap: 12px; align-items: center; margin: 14px 0; }
.attn-pill { background: #fdf3dc; border-color: #ecd9a0; color: #8a6d1a; font-weight: 600; }
/* P0.2 pack verification checklist */
.pack-done { background: var(--green-bg, #e7f5ec); border: 1px solid #bfe3cd; border-radius: 8px; padding: 10px 14px; margin: 0 0 10px; }
.pack-reverse { margin: 0 0 12px; }
.pack-reverse-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.pack-reverse-form input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; min-width: 260px; }
.pack-scan { display: flex; gap: 10px; align-items: center; margin: 0 0 8px; }
.pack-scan input { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; min-width: 240px; }
.pack-check { margin: 0 0 10px; }
.pack-check .pack-qty { width: 64px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; }
.pack-line.ok td { background: #f0faf3; }
.pack-line.ok .pack-qty { border-color: #7fc79b; }
.pack-override { display: block; font-weight: 600; font-size: 13px; margin: 0 0 10px; }
.pack-override input { display: block; margin-top: 4px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; min-width: 300px; }
#pack-form { margin: 0 0 14px; }
#pack-form #pack-submit:disabled { opacity: .5; cursor: not-allowed; }
.cam { margin: 14px 0; }
.cam video { width: 100%; max-width: 460px; background: #0d1117; border-radius: var(--r-md); display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.cam-controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 6px; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; border-radius: var(--r-md); border: 1px solid var(--line); display: block; }
.photo-grid figcaption { margin-top: 4px; }

/* COD buckets */
.codtag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-xs); text-transform: capitalize; }
.b-remitted { background: var(--green-bg); color: var(--green); }
.b-pending { background: var(--amber-bg); color: var(--amber); }
.b-discrepancy { background: var(--red-bg); color: var(--red); }
.b-in_transit { background: var(--blue-bg); color: var(--blue); }
.b-no_cod { background: #eef0f4; color: #475067; }
.neg { color: var(--red); }

/* Errors tab */
.errpill { background: var(--red-bg); color: var(--red); font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: var(--r-md); margin-left: 8px; }
.okpill { background: var(--green-bg); color: var(--green); font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: var(--r-md); margin-left: 8px; }
details.acc { border: 1px solid var(--line); border-radius: var(--r-sm); margin: 0 0 10px; background: #fff; }
details.acc > summary { cursor: pointer; padding: 10px 14px; list-style: none; user-select: none; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::before { content: "▸"; color: var(--muted); margin-right: 8px; }
details.acc[open] > summary::before { content: "▾"; }
details.acc > summary:hover { background: var(--row-hover, #f7f8fa); }
.run-when { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line); }
details.acc table { margin: 0; }
.errtag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-xs); white-space: nowrap;
  background: var(--red-bg); color: var(--red); }
.errtag.e-qty { background: #fff3e0; color: #b25c00; }
.errtag.e-address { background: #fde9d9; color: #9a4a00; }
.errtag.e-name_blank { background: var(--red-bg); color: var(--red); }
.errtag.e-name_language, .errtag.e-name_emoji, .errtag.e-name_not_person { background: var(--purple-bg); color: var(--purple); }
.errtag.e-assign, .errtag.e-labels, .errtag.e-pickup { background: var(--blue-bg); color: var(--blue); }

/* returns form */
.return-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.return-form select, .return-form input { font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.return-form input[type=text] { flex: 1; min-width: 220px; }

/* create-replacement panel + internal contents box */
.new-replacement { margin: 0 0 16px; }
.new-replacement > summary { cursor: pointer; list-style: none; user-select: none; font-size: 14px; }
.new-replacement > summary::-webkit-details-marker { display: none; }
.repl-contents { margin: 14px 0 16px; }
.repl-contents label { display: block; margin-bottom: 4px; }
.repl-contents textarea { width: 100%; box-sizing: border-box; font: inherit;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md); resize: vertical; }
.repl-contents .prod-select { display: block; width: 100%; max-width: 360px; box-sizing: border-box;
  font: inherit; padding: 9px 12px; margin-top: 8px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: #fff; }
.same-orig { display: flex !important; align-items: center; gap: 8px; margin: 10px 0 4px;
  font-size: 14px; cursor: pointer; }
.same-orig input { width: auto; margin: 0; }
.support-note { margin-top: 16px; }
.repl-pay { margin-top: 14px; }
.repl-pay > label { display: block; margin-bottom: 4px; }
.refund-box { margin-top: 14px; }
.pay-dir { display: flex; gap: 18px; flex-wrap: wrap; margin: 6px 0 12px; }
.pay-dir label { display: flex !important; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.pay-dir input { width: auto; margin: 0; }
.refund-input { display: block; width: 100%; max-width: 360px; box-sizing: border-box;
  font: inherit; padding: 9px 12px; margin-top: 4px; border: 1px solid var(--line);
  border-radius: var(--r-md); }

/* COD→Prepaid auto-change flag on the replacement confirm view */
.pay-changed { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-sm);
  background: #fff3cd; border: 1px solid #f0d9a8; color: #7a5b00; font-size: 12px; }

/* support → ops note banner (replacement view + pick list) */
.ops-note { background: #fff7e6; border: 1px solid #f0d9a8; border-radius: var(--r-md);
  padding: 8px 12px; margin: 10px 0; }
.ops-note.big { padding: 12px 14px; font-size: 15px; margin: 14px 0; }

/* replacement rows in the ship queue — faint tint so they stand out */
tr.repl-row > td { background: #fbf7ef; }

/* order-view top row: back link + prev/next nav */
.detail-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.order-nav { display: flex; gap: 8px; }
.order-nav a, .order-nav span { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 16px;
  text-decoration: none; color: var(--accent-ink); background: #fff; }
.order-nav a:hover { background: var(--row-hover, #f7f8fa); }
.order-nav span.disabled { color: #c4c8cf; cursor: default; }

/* log-additional-payment form on the order view */
.pay-log { display: flex; flex-direction: column; gap: 8px; }
.pay-log input { font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.pay-log button { align-self: flex-start; }

/* bulk ship action bar */
.actionbar { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; flex-wrap: wrap; }
.actionbar .muted { margin-right: auto; }

/* pick list */
.pick-order { padding: 14px 18px; margin-bottom: 12px; }
.pick-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pick-line { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; flex-wrap: wrap; }
.pick-fields { color: var(--ink); }
.pick-grp { display: inline-block; margin-right: 14px; }
.pick-grp b { color: var(--accent-ink); }
/* Batch by / Checked by sign-off lines — two compact lines just above the pick
   tally (inside its card, so they never break onto a page of their own). */
.pick-meta { margin: 0 0 12px; }
.pick-meta-row { display: flex; align-items: baseline; gap: 12px; margin: 6px 0; font-size: 14px; }
.pick-meta-row .pml { font-weight: 700; min-width: 92px; }
.pick-meta-row .pmline { flex: 1 1 auto; max-width: 320px; border-bottom: 1px solid #333; height: 1.2em; }
/* blank write-in columns (Extra / Remaining) on the pick tally */
.pick-tally th.writein, .pick-tally td.writein { min-width: 88px; }
/* per-order pick detail starts on a fresh printed page */
@media print { .pagebreak { page-break-before: always; } }

/* daily stock-out sheet — inline per-SKU correction form */
.so-edit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.so-edit input, .so-edit select {
  font: inherit; font-size: 13px; padding: 8px 11px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; color: var(--ink);
}
.so-edit input:focus, .so-edit select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.so-edit input::placeholder { color: #9aa3b5; }
.so-edit input[type=number] { width: 72px; text-align: right; }
.so-edit input[type=text] { flex: 1; min-width: 190px; }
.so-edit button { font-size: 13px; padding: 8px 16px; white-space: nowrap; }

/* ── WhatsApp template checker (Tools) ─────────────────────────────────── */
.wa-sub { max-width: 640px; }

/* Two-column: draft form + live phone preview */
.wa-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; margin: 6px 0 24px; }

.wa-card { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.wa-card .fld { display: flex; flex-direction: column; gap: 6px; }
.fld-label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.fld-label em, .fld-hint { font-weight: 400; font-style: normal; color: var(--muted); font-size: 12px; }
.fld-label em { margin-left: 5px; }
.fld-label em.req { color: var(--accent); font-weight: 600; }
.wa-card textarea, .wa-card input[type=text] {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md);
  font: inherit; color: var(--ink); background: #fdfdfe; transition: border-color .12s, box-shadow .12s;
}
.wa-card textarea { line-height: 1.55; min-height: 118px; resize: none; overflow: hidden; padding-bottom: 22px; }
.wa-card textarea:focus, .wa-card input:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); background: #fff;
}
/* field wrapper carries the character counter */
.wa-field { position: relative; }
.wa-count { position: absolute; right: 11px; bottom: 8px; font-size: 11px; color: var(--muted);
  background: rgba(255,255,255,.9); padding: 0 3px; border-radius: 4px; pointer-events: none; font-variant-numeric: tabular-nums; }
.wa-count.near { color: var(--amber); }
.wa-count.full { color: var(--red); font-weight: 600; }
.wa-field-sm .wa-count { top: 50%; bottom: auto; transform: translateY(-50%); }
.wa-field-sm input { padding-right: 52px; }
.wa-optional { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* accordion — a proper collapsible card */
.wa-more { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.wa-more-sum { display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer;
  background: #fafbfc; list-style: none; user-select: none; }
.wa-more-sum::-webkit-details-marker { display: none; }
.wa-more-sum:hover { background: #f1f3f6; }
.wa-more-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.wa-more-meta { flex: 1; font-size: 11.5px; color: var(--muted); }
.wa-more-chev { color: var(--muted); font-size: 16px; line-height: 1; transition: transform .16s ease; }
.wa-more[open] .wa-more-chev { transform: rotate(180deg); }
.wa-more[open] .wa-more-sum { border-bottom: 1px solid var(--line); }
.wa-more-body { display: flex; flex-direction: column; gap: 14px; padding: 14px; }
.wa-check-btn { align-self: flex-start; padding: 10px 22px; font-size: 14.5px; border-radius: var(--r-md); }

/* Phone / WhatsApp preview */
.wa-phone { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 18px rgba(20,30,55,.10); border: 1px solid var(--line); position: sticky; top: 78px; }
.wa-phone-bar { display: flex; align-items: center; gap: 10px; background: #075e54; color: #fff; padding: 11px 14px; }
.wa-avatar { width: 30px; height: 30px; border-radius: 50%; background: #128c7e; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.wa-phone-name { font-weight: 600; font-size: 14.5px; }
.wa-chat { background: #e5ddd5; background-image: radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px); background-size: 14px 14px;
  padding: 16px 14px 20px; min-height: 200px; display: flex; flex-direction: column; gap: 6px; }
.wa-bubble { align-self: flex-start; background: #fff; border-radius: 0 8px 8px 8px; padding: 7px 10px 5px; max-width: 92%;
  box-shadow: 0 1px 1px rgba(0,0,0,.12); position: relative; }
.wa-bubble::before { content: ""; position: absolute; top: 0; left: -7px; width: 0; height: 0;
  border: 7px solid transparent; border-top-color: #fff; border-right: 0; }
.wa-b-header { font-weight: 700; font-size: 14px; margin-bottom: 3px; color: var(--ink); }
.wa-b-body { font-size: 14px; line-height: 1.5; color: #111b21; white-space: pre-wrap; word-break: break-word; }
.wa-b-footer { font-size: 12px; color: #667781; margin-top: 5px; }
.wa-b-time { font-size: 10.5px; color: #8696a0; text-align: right; margin-top: 3px; }
.wa-var { background: #fff3cd; border: 1px solid #ffe08a; border-radius: 4px; padding: 0 3px; font-size: 12.5px; color: #7a5c00; }
.wa-b-buttons { align-self: stretch; display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.wa-b-btn { background: #fff; color: #027eb5; text-align: center; font-size: 13.5px; font-weight: 500;
  padding: 9px; border-radius: var(--r-sm); box-shadow: 0 1px 1px rgba(0,0,0,.10); }
.wa-empty { color: #667781; font-size: 13px; text-align: center; margin: auto; padding: 20px; }

/* Verdict hero */
.wa-hero { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 14px;
  margin: 4px 0 18px; border: 1px solid transparent; }
.wa-hero-icon { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  font-size: 27px; font-weight: 700; color: #fff; }
.wa-hero-verdict { font-size: 20px; font-weight: 700; letter-spacing: .3px; }
.wa-hero-headline { font-weight: 600; margin: 1px 0 3px; }
.wa-hero-cost { font-size: 13px; opacity: .85; }
.wa-hero.v-utility { background: var(--green-bg); border-color: #bfe3cd; color: var(--green); }
.wa-hero.v-utility .wa-hero-icon { background: var(--green); }
.wa-hero.v-marketing { background: #fdeaea; border-color: #f2c4c4; color: var(--red); }
.wa-hero.v-marketing .wa-hero-icon { background: var(--red); }
.wa-hero.v-unclear, .wa-hero.v-authentication { background: var(--amber-bg); border-color: #f2dca0; color: var(--amber); }
.wa-hero.v-unclear .wa-hero-icon, .wa-hero.v-authentication .wa-hero-icon { background: var(--amber); }

.wa-results { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.wa-results .card { margin: 0; }
.sm-head { font-size: 13px; display: flex; align-items: center; gap: 7px; }
.wa-reasons { margin: 0; padding-left: 18px; }
.wa-reasons li { margin-bottom: 9px; line-height: 1.5; }
.wa-reasons li:last-child { margin-bottom: 0; }
.wa-flagged { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wa-flagged-lbl { font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 2px; }
.chip { font-size: 12.5px; padding: 3px 10px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.chip.bad { background: #fdeaea; border-color: #f2c4c4; color: var(--red); }

.wa-suggest { border-left: 4px solid var(--green); }
.wa-tick { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; }
.wa-rewrite-wrap { position: relative; }
.wa-rewrite { background: #f0fdf4; border: 1px solid #bfe3cd; border-radius: var(--r-md); padding: 13px 15px;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; margin: 6px 0 0; color: #14532d; }
.wa-copy { position: absolute; top: 8px; right: 8px; background: #fff; border: 1px solid #bfe3cd; color: var(--green);
  border-radius: var(--r-sm); padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.wa-copy:hover { background: var(--green-bg); }
.wa-copy.done { background: var(--green); color: #fff; border-color: var(--green); }
.wa-copy.sm { position: static; }
.wa-note { margin-top: 10px; }
.wa-removed { margin-top: 10px; }
.wa-removed > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.wa-removed ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }

.wa-library { margin-top: 26px; }
.wa-library-head { margin-bottom: 12px; }
.wa-canon { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.wa-canon-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 15px; box-shadow: 0 1px 2px rgba(20,30,55,.05); }
.wa-canon-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.wa-canon-item strong { font-size: 13px; }
.wa-canon-item pre { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px;
  font-family: var(--mono); font-size: 13px; line-height: 1.5; white-space: pre-wrap; margin: 0; color: var(--ink); }
.wa-rule { max-width: 760px; margin-top: 20px; line-height: 1.6; padding: 14px 16px; background: var(--bg); border-radius: var(--r-md); }

@media (max-width: 980px) {
  .wa-grid { grid-template-columns: 1fr; }
  .wa-phone { max-width: 360px; position: static; }
  .wa-results { grid-template-columns: 1fr; }
}
@media (max-width: 720px) { .wa-optional { grid-template-columns: 1fr; } }

@media print {
  .topbar, .noprint, .page-head .back, button { display: none !important; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* ── Tablet: collapse the two-column detail layout ─────────────────────── */
@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr; }
}

/* ── Phone: keep the app fully navigable + readable on a small screen.
   Personal monitoring use ("overlook things") — no camera/scan needed here. */
@media (max-width: 720px) {
  /* Topbar reflows into rows: [brand · who/sign-out] / [nav strip] / [search].
     The nav is NOT hidden — it becomes a horizontally scrollable strip so every
     tab is still reachable with a thumb. */
  .topbar { flex-wrap: wrap; height: auto; gap: 10px 16px; padding: 10px 14px; position: sticky; }
  .brand { order: 0; }
  .whoami { order: 1; margin-left: auto; gap: 10px; font-size: 13px; }
  .whoami .op em { display: none; }            /* drop the role chip to save width */
  .mainnav {
    display: flex; order: 2; flex-basis: 100%;
    gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -14px; padding: 2px 14px; scrollbar-width: none;
  }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; }
  .topsearch { order: 3; flex-basis: 100%; }
  .topsearch input { max-width: none; }

  /* Content breathing room */
  .wrap { padding: 16px 14px 48px; }
  h1 { font-size: 20px; }
  .page-head { align-items: flex-start; }
  .detail-top { flex-wrap: wrap; gap: 8px; }

  /* Wide tables scroll sideways instead of overflowing or squashing the page. */
  .grid { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Tighter key/value column so values get more room. */
  dl.kv { grid-template-columns: 104px 1fr; }

  /* Comfortable tap targets for the controls you actually poke. */
  button, .pill { min-height: 38px; }
  .ship-actions button, .conf-save, .recv-form button, .cond-edit button { min-height: 34px; }
}

/* ── Inventory (Phase 7) ─────────────────────────────────────────────── */
.navbadge { display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 6px;
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
  border-radius: var(--r-md); background: var(--red); color: #fff; vertical-align: middle; }
.grid th.num, .grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid tr.low td { background: #fff6f5; }
.grid tr.low:hover td { background: #ffeeec; }
.grid tr.neg td { background: var(--red-bg); }
.grid tr.neg:hover td { background: #fbd9d5; }
.status.ok { background: var(--green-bg); color: var(--green); }
.status.low { background: var(--red-bg); color: var(--red); }
.pos { color: var(--green); }

.inv-add { margin: 8px 0 4px; }
.inv-add > summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); padding: 6px 0; }
.inv-add-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.inv-add-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.inv-add-form input { font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.inv-add-form input[type=number] { width: 110px; }

.inv-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 8px; }
.inv-act { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0; }
.inv-act h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 10px; }
.inv-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inv-row input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.inv-row input[type=number] { width: 120px; }
.inv-row input[type=text] { flex: 1; min-width: 120px; }
.inv-row select, .inv-bulk select { font: inherit; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; }
.inv-bulk-grid { margin-top: 10px; }
.inv-bulk-grid input[type=number] { width: 90px; font: inherit; padding: 6px 8px; text-align: right;
  border: 1px solid var(--line); border-radius: var(--r-xs); }

.mv { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 8px; border-radius: var(--r-sm); background: #eef0f4; color: #475067; }
.mv-reserve { background: #fff4d6; color: var(--amber); }
.mv-pack { background: var(--blue-bg); color: var(--blue); }
.mv-release { background: #eef0f4; color: #475067; }
.mv-rto, .mv-return { background: var(--green-bg); color: var(--green); }
.mv-receive { background: var(--green-bg); color: var(--green); }
.mv-adjust, .mv-count { background: #fff7ed; color: var(--cod); }
.mv-dispatch { background: #f3e8ff; color: #7c3aed; }
.grid tr.lowpri td { color: var(--muted); }
#dispatch-rows .disp-row { display: none; }  /* revealed by channel pick (JS) */

/* B2B tab */
.b2b-h { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 8px; }
.b2b-items-tbl select { min-width: 240px; }
.b2b-items-tbl td { vertical-align: middle; }
button.ghost, .ghost { background: #fff; border: 1px dashed var(--line); color: var(--accent-ink);
  font-weight: 600; border-radius: var(--r-md); padding: 8px 14px; cursor: pointer; margin-top: 10px; }
button.ghost:hover { border-color: var(--accent); }
button.linkbtn, .linkbtn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; padding: 4px 8px; }
button.linkbtn:hover { color: var(--red); }
.b2b-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.b2b-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.b2b-card h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 10px; }
.b2b-card p { margin: 0 0 6px; line-height: 1.55; }
.b2b-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.b2b-actions form { margin: 0; }
.b2b-total td { background: #faf7f4; }

/* ── help guides (/help) ── */
.guide { max-width: 720px; background: var(--card); border: 1px solid var(--line);
         border-radius: var(--r-lg); padding: 22px 26px; line-height: 1.6; }
.guide h2 { font-size: 15px; margin: 22px 0 8px; }
.guide h2:first-child { margin-top: 0; }
.guide ol, .guide ul { margin: 6px 0 12px; padding-left: 22px; }
.guide li { margin: 5px 0; }
.guide li ul { margin: 4px 0; }
.guide code { background: var(--accent-soft); color: var(--accent-ink);
              padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }
.guide table { margin: 8px 0 14px; }
/* KB articles (Help → How the system works) — rendered from docs/kb markdown */
.kb-article h3 { font-size: 14px; margin: 16px 0 6px; }
.kb-article p { margin: 8px 0; line-height: 1.55; }
.kb-article blockquote { border-left: 3px solid var(--accent); margin: 10px 0;
  padding: 6px 12px; background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.kb-article hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.helplink { color: var(--muted); font-size: 13px; text-decoration: none;
            margin-right: 12px; }
.helplink:hover { color: var(--accent-ink); }

/* ── first-run setup checklist (orders empty state) ── */
.setup-card { max-width: 560px; background: var(--card); border: 1px solid var(--line);
              border-radius: var(--r-lg); padding: 20px 24px; margin: 20px 0; }
.setup-card h2 { margin: 0 0 4px; font-size: 17px; }
.setup-steps { list-style: none; margin: 14px 0 0; padding: 0; }
.setup-steps li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0;
                  border-top: 1px solid var(--line); }
.setup-steps li:first-child { border-top: 0; }
.setup-steps .tick { font-weight: 700; color: var(--accent-ink); width: 18px; }
.setup-steps .todo { color: var(--muted); width: 18px; }

/* ── home page ── */
.htile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
             gap: 12px; margin: 18px 0; max-width: 780px; }
.htile { display: flex; flex-direction: column; gap: 2px; background: var(--card);
        border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px;
        text-decoration: none; color: var(--ink); }
.htile:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.htile-n { font-size: 26px; font-weight: 700; color: var(--accent-ink); }
.htile-label { font-size: 13px; color: var(--muted); }
.home-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .home-cols { grid-template-columns: 1fr; } }
.home-h { font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
          color: var(--muted); margin: 14px 0 10px; }

/* Error rules (Settings → Error rules): row actions that read as links. */
button.linklike { background: none; border: 0; padding: 0; font: inherit;
                  color: var(--accent-ink); cursor: pointer; }
button.linklike:hover { text-decoration: underline; }

/* Ported from main (channel-dispatch / stock-out / inventory add forms,
   deploy commits 0b13b43..4134d93) — restyled selectors main added while
   this branch re-themed the sheet. */
.so-day { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: -4px 0 18px; }
.so-day label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.so-day input[type=date] {
  font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; color: var(--ink); }
.so-day input[type=date]:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.so-add { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 6px; }
.so-add-field { display: flex; flex-direction: column; gap: 4px; }
.so-add-field > span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.so-add select, .so-add input {
  font: inherit; font-size: 13px; padding: 8px 11px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; color: var(--ink); }
.so-add select:focus, .so-add input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.so-add input::placeholder { color: #9aa3b5; }
.so-add-qty input { width: 84px; text-align: right; }
.so-add-reason { flex: 1; }
.so-add-reason input { width: 100%; min-width: 200px; }
.so-add button { white-space: nowrap; }
.inv-add-form input, .inv-add-form select { font: inherit; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; }
.inv-add-form select { min-width: 180px; }