/* JT fulfilment portal — standalone stylesheet, deliberately not
   static/style.css (dashboard) or static/portal/portal.css (buyer portal):
   this is a THIRD identity space and a warehouse-floor tool, not a re-skin
   of either. Big tap targets, legible at a glance, no page reload for the
   one interaction that matters (copy).

   ORDERS LAYOUT (2026-09-03 rebuild). One order = one table row, ship-to
   fields run ACROSS the top as shared columns instead of stacking ten
   labelled buttons down the side of every order — see .ford-table below.
   The density-vs-tap-target tension is resolved by keeping every copy
   target a fixed-size .fchip (see its own comment) and shrinking everything
   ELSE instead: no repeated per-order header, no per-field label row, no
   wasted margin between orders. Text size does not drop below 14px anywhere
   a value is read or copied. */
:root {
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f8fafc;
  --bg-alt: #f1f5f9;
  --card: #ffffff;
  --accent: #0d9488;
  --accent-ink: #ffffff;
  --warn: #b45309;
  --copied: #0d9488;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.fhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px; background: var(--card);
  border-bottom: 1px solid var(--line);
}
.fbrand { font-weight: 700; letter-spacing: .12em; font-size: 14px; }
.fbrand-sub { font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: 8px; }
.fnav { display: flex; align-items: center; gap: 16px; }
.fnav form { margin: 0; }
.flink {
  background: none; border: 0; padding: 10px 0; color: var(--muted);
  font: inherit; font-size: 15px; cursor: pointer; text-decoration: underline;
  min-height: 44px; display: inline-flex; align-items: center;
}
/* Wide enough that a warehouse monitor isn't half-empty (the whole point of
   this rebuild is more orders on screen, not centred whitespace either side
   of a phone-width column), narrow enough that a row of six columns on an
   ultrawide display doesn't stretch into an unreadable single line. */
.fmain { max-width: 1680px; margin: 0 auto; padding: 16px 20px 32px; }
.fcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 16px;
}
.fnarrow { max-width: 420px; margin: 48px auto; }
h1 { font-size: 19px; margin: 0; }
h2 { font-size: 13px; margin: 0 0 12px; font-weight: 600; text-transform: uppercase;
     letter-spacing: .06em; color: var(--muted); }
.frow-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.fcount { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; color: var(--muted); }

/* Contact strip — Henry + JM, one tap to copy, out of the way otherwise.
   Was a full .fcard (heading + a 28px-gapped grid of stacked buttons)
   eating a chunk of the first screen; now a single wrapping line that costs
   about as much height as one order row. */
.fcontacts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.fcontacts-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  flex: 0 0 auto;
}
.fcontact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fcontact-name { font-weight: 600; font-size: 14px; }

.fform { display: flex; flex-direction: column; gap: 10px; }
.fform label { font-size: 13px; color: var(--muted); }
.fform input {
  font: inherit; font-size: 17px; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: 8px; min-height: 48px;
}
.fbtn {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px;
  padding: 13px 18px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  min-height: 48px;
}
.fstate { color: var(--muted); }
.fwarn { color: var(--warn); font-weight: 600; }

/* --- Orders table -----------------------------------------------------
   One <tr> per order, one <thead> for the whole list. Column widths are
   percentages so the table reflows with the viewport instead of overflowing
   it; below the tablet breakpoint it collapses to a stacked block per row
   (see the @media block) rather than squeezing six columns into a phone. */
.ford-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.ford-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; padding: 0 10px 8px; border-bottom: 1px solid var(--line);
}
.ford-table td {
  padding: 9px 10px; vertical-align: top; border-bottom: 1px solid var(--line);
}
.ford-table tbody tr:nth-child(even) { background: var(--bg-alt); }
.ford-table tbody tr:last-child td { border-bottom: 0; }

.fc-order   { width: 12%; }
.fc-name    { width: 15%; }
.fc-street  { width: 16%; }
.fc-place   { width: 17%; }
.fc-contact { width: 16%; }
.fc-items   { width: 24%; }

/* Ref on its own line (the anchor a picker's eye tracks down this column),
   date + source sharing a second line — two lines, not three, since neither
   needs its own row to stay legible. */
.ford-num { font-weight: 700; font-size: 15px; display: block; }
.ford-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.ford-date { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.ford-source {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 8px;
}

/* A group of chips stacked with a small gap; short values (city, state,
   postcode) sit side by side on one line instead of three stacked lines,
   wrapping only if the column is too narrow to hold them — since three
   short tokens side by side scans faster than three separate lines. Any
   group with nothing to show collapses to nothing — no empty labelled row,
   no broken column height. */
.fcell { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.fchip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Copy affordance — the whole point of this page. Fixed-size and always the
   same shape (UI rule: no explanatory prose — a colour flash on tap IS the
   confirmation, nothing needs to say "Copied", and nothing needs to say
   "tap to copy" either — the chip look is the affordance). Density comes
   from cutting dead space AROUND chips, never from shrinking the chip
   itself below a comfortably tappable size. */
.fcopy, .fchip {
  font: inherit; font-size: 14px; text-align: left; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; cursor: pointer;
  min-height: 36px; max-width: 100%; overflow-wrap: anywhere;
  transition: background .15s, border-color .15s, color .15s;
}
.fcopy.fcopied, .fchip.fcopied { background: var(--copied); color: #fff; border-color: var(--copied); }

/* Line items — no repeated 3-column table head per order, one compact row
   per SKU. Qty is the one thing a mis-read becomes a mis-ship, so it is the
   largest, boldest thing in the cell, never a plain table cell among others. */
.fitem { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.fitem:last-child { margin-bottom: 0; }
.fqty {
  font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
  background: var(--bg-alt); border-radius: 6px; padding: 2px 6px; flex: 0 0 auto;
}
.fitem-name { color: var(--muted); font-size: 13px; }

/* Below tablet width: a table row can no longer hold six legible columns,
   so each order becomes one stacked block instead — still one visual unit
   per order (the brief's core ask), still no per-order repeated table head,
   just reflowed for a hand-width screen. Column labels reappear here as
   attr(data-label), since there is no longer a shared header row to read
   them from. */
@media (max-width: 760px) {
  .ford-table, .ford-table tbody, .ford-table tr, .ford-table td { display: block; width: 100%; }
  .ford-table thead { display: none; }
  .ford-table tbody tr {
    border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
  }
  .ford-table tbody tr:nth-child(even) { background: var(--card); }
  .ford-table td { border-bottom: 0; padding: 6px 0; }
  .ford-table td[data-label]::before {
    content: attr(data-label); display: block; font-size: 11px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted); margin-bottom: 4px;
  }
  .fc-order, .fc-name, .fc-street, .fc-place, .fc-contact, .fc-items { width: 100%; }
}

/* Row expand toggle (Phase 2). The order-number cell becomes a button that
   reveals one extra row per order — reset to look like the plain text it
   replaced, with only a small chevron to signal it opens something. */
.ford-toggle {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; text-align: left;
  cursor: pointer; display: block; width: 100%; color: inherit;
}
.ford-num::after {
  content: "▸"; display: inline-block; margin-left: 6px; font-size: 11px; color: var(--muted);
}
.ford-toggle[aria-expanded="true"] .ford-num::after { content: "▾"; }

/* The expanded body itself — this is where a control belongs, never the
   row strip above it. [hidden] (see the base reset) keeps it out of the
   layout entirely until toggled. */
.ford-expand td { padding: 10px 10px 16px; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.fbtn-print {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: var(--accent-ink); border-radius: 8px;
  padding: 10px 16px; font-size: 14px; font-weight: 600; text-decoration: none;
  min-height: 40px;
}
.ford-expand-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }

/* Mark-fulfilled (Phase 4). Lives ONLY in this expanded row — the row strip
   above carries just the toggle, never this control (Henry's standing
   rule). A label, a field, a button, a one-word state — nothing else. */
.ffulfil { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0; }
.ffulfil .flabel {
  display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.ffulfil .flabel input {
  font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 7px; min-height: 36px; min-width: 150px;
}
.fbtn-fulfil {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px;
  padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  min-height: 36px;
}
.fbtn-fulfil:disabled { opacity: .55; cursor: default; }
.fbtn-fulfil[data-done="1"] { background: var(--copied); }
.ffulfil-state {
  font-size: 14px; font-weight: 600; min-height: 36px; display: inline-flex; align-items: center;
}
.ffulfil-state[data-kind="ok"] { color: var(--copied); }
.ffulfil-state[data-kind="err"] { color: var(--warn); }

/* --- Packing slip (Phase 2) ---------------------------------------------
   One order per page (the route itself only ever renders one), built to
   print correctly on A4 straight out of the browser's print dialog — no
   extra setup, no separate print preview step. Colour comes entirely from
   the custom properties above, which the @media print block below zeroes
   out to pure black-on-white — this file's on-screen rules never need a
   second, print-only copy. */
.fslip-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.fslip {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 18mm 16mm; max-width: 210mm; margin: 0 auto;
}
.fslip-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12px; color: var(--muted); margin-bottom: 10mm; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.fslip-brand { font-weight: 700; letter-spacing: .1em; color: var(--ink); }
.fslip-meta { display: flex; gap: 14px; font-variant-numeric: tabular-nums; }
.fslip-ref { font-weight: 700; color: var(--ink); }

/* Positioned to fall inside a standard DL window envelope's cut-out if this
   page is folded in thirds: clear of the top ~40mm, indented ~20mm from the
   left edge, and narrow enough not to run past the window's right edge. */
.fslip-address { margin: 0 0 10mm 20mm; max-width: 85mm; font-size: 13px; line-height: 1.5; color: var(--ink); }
.fslip-contact { margin: 0 0 10mm 20mm; font-size: 12px; color: var(--muted); display: flex; gap: 16px; }

.fslip-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fslip-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--ink);
}
.fslip-table td { padding: 8px; vertical-align: top; border-bottom: 1px solid var(--line); }
.fslip-table tr { page-break-inside: avoid; }
.fslip-sku { width: 20%; }
.fslip-qty { width: 10%; text-align: center; font-weight: 700; }
.fslip-pick { width: 22%; }

/* --- Print --------------------------------------------------------------
   Applies across the whole fulfilment portal, not only the slip, so
   nothing here ever accidentally prints with the app's chrome or a
   washed-out grey that won't scan. Redefining the palette variables (rather
   than re-styling every component) turns every existing selector that
   already reads var(--ink)/var(--line)/etc. into solid black-on-white for
   free, with no colour left standing in for information. */
@media print {
  :root {
    --ink: #000; --muted: #000; --line: #000; --bg: #fff; --bg-alt: #fff;
    --card: #fff; --accent: #000; --accent-ink: #000; --warn: #000; --copied: #000;
  }
  @page { size: A4; margin: 15mm; }
  body { background: #fff; }
  .fhead, .no-print { display: none !important; }
  .fslip { border: 0; padding: 0; max-width: none; }
}

/* --- Inventory + stocktake (Phase 3) --------------------------------------
   Same table conventions as .ford-table above (fixed layout, striped rows,
   mobile stack via data-label) — reusing the identical pattern rather than
   inventing a second table styling system for a second page. */
.finv-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.finv-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; padding: 0 10px 8px; border-bottom: 1px solid var(--line);
}
.finv-table td {
  padding: 9px 10px; vertical-align: top; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.finv-table tbody tr:nth-child(even) { background: var(--bg-alt); }
.finv-table tbody tr:last-child td { border-bottom: 0; }
.finv-sku { font-weight: 700; display: block; }
.finv-ing { color: var(--muted); font-size: 12px; }

/* Stocktake submission — a label, a SKU picker, a count field, a button.
   No panel explaining what a stocktake is; the form IS the explanation. */
.finv-form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.finv-form label { font-size: 13px; color: var(--muted); }
.finv-form select, .finv-form input {
  font: inherit; font-size: 17px; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: 8px; min-height: 48px;
}

@media (max-width: 760px) {
  .finv-table, .finv-table tbody, .finv-table tr, .finv-table td { display: block; width: 100%; }
  .finv-table thead { display: none; }
  .finv-table tbody tr {
    border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
  }
  .finv-table tbody tr:nth-child(even) { background: var(--card); }
  .finv-table td { border-bottom: 0; padding: 6px 0; }
  .finv-table td[data-label]::before {
    content: attr(data-label); display: block; font-size: 11px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted); margin-bottom: 4px;
  }
}

/* --- Fulfilled-order history ----------------------------------------------
   Reuses .ford-table's row/expand pattern wholesale (see that block above) —
   same table shape, same expand-for-detail interaction — just a different
   set of default columns since there is no pick/mark-fulfilled action here
   to make room for; the full ship-to address moves into the expand row
   instead of sitting in the default strip. */
.fc-track { width: 22%; }
.fc-by    { width: 20%; }
@media (max-width: 760px) {
  .fc-track, .fc-by { width: 100%; }
}
.fhist-window {
  font-size: 12px; color: var(--muted); background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
}