/*
 * Daily resort capture screen styles.
 *
 * THE BASE OF THIS FILE IS apps/receiving/receiving.css, COPIED VERBATIM, and
 * that is deliberate. tests/test_receiving_app.py asserts every app agrees on
 * every palette token: a client seeing two slightly different greys across two
 * screens of one product reads it as two systems bolted together, which is
 * what Altitude are paying us not to build.
 *
 * Same operating conditions as the other capture screens and the same answers:
 * a tablet at arm's length with gloves on, so a 17px base, a 52px minimum tap
 * target, and nothing important conveyed by colour alone.
 *
 * Resort-specific additions are at the FOOT of the file, under their own
 * heading. Keep them there -- editing the shared part is how the two screens
 * drift.
 */
:root {
  color-scheme: light;
  --page:#f9f9f7; --surface:#fcfcfb; --sunken:#f2f1ed;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --border:rgba(11,11,11,0.12); --hair:rgba(11,11,11,0.07);
  --series:#2a78d6; --series-ink:#ffffff;
  --critical:#d03b3b; --critical-wash:rgba(208,59,59,0.07);
  --good:#2f7d54; --good-wash:rgba(47,125,84,0.09);
  --chip:#f0efec;
  --warn-bg:#fdf6e3; --warn-line:#fab219;
  --radius:14px;
  --tap:52px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page:#0d0d0d; --surface:#1a1a19; --sunken:#141413;
    --ink:#ffffff; --ink-2:#c3c2b7; --muted:#898781;
    --border:rgba(255,255,255,0.13); --hair:rgba(255,255,255,0.07);
    --series:#3987e5; --series-ink:#ffffff;
    --critical:#e05c5c; --critical-wash:rgba(224,92,92,0.12);
    --good:#57ab7d; --good-wash:rgba(87,171,125,0.12);
    --chip:#262623;
    --warn-bg:#2a2413; --warn-line:#fab219;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:#0d0d0d; --surface:#1a1a19; --sunken:#141413;
  --ink:#ffffff; --ink-2:#c3c2b7; --muted:#898781;
  --border:rgba(255,255,255,0.13); --hair:rgba(255,255,255,0.07);
  --series:#3987e5; --series-ink:#ffffff;
  --critical:#e05c5c; --critical-wash:rgba(224,92,92,0.12);
  --good:#57ab7d; --good-wash:rgba(87,171,125,0.12);
  --chip:#262623;
  --warn-bg:#2a2413; --warn-line:#fab219;
}
*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` ATTRIBUTE has to beat any display rule set by a class.
 * `.banner { display: flex }` outranks the browser's `[hidden] { display: none }`
 * on specificity, so without this line every banner shows on load and
 * `el.hidden = true` does nothing. Both other screens carry it for the same
 * reason; this one was written without it and the bug was visible immediately,
 * which is the good case. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.5;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 16px 14px 64px; }

/* ---------- sign in ---------- */
.signin { max-width: 400px; margin: 10vh auto; padding: 0 16px; }
.signin h1 { font-size: 25px; margin: 0 0 4px; letter-spacing: -0.02em; }
.signin .sub { color: var(--ink-2); font-size: 15px; margin: 0 0 20px; }

/* ---------- banners ---------- */
.banner {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
}
.banner b { display: block; }
.banner p { margin: 2px 0 0; font-size: 15px; color: var(--ink-2); }
.banner--demo  { background: var(--warn-bg); border-left-color: var(--warn-line); }
.banner--error { background: var(--critical-wash); border-left-color: var(--critical); }
.banner--saved { background: var(--good-wash); border-left-color: var(--good); }

/* ---------- top bar and tabs ---------- */
.topbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 14px; font-size: 14px; color: var(--muted);
}
.topbar__spacer { flex: 1 1 auto; }

/* Back to the front door. Every screen on the Altitude site carries one; the
   Ardagh live view deliberately does not -- that site has no front door, and
   Ardagh are handed one URL and no other. */
.homelink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; padding: 6px 12px; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
}
.homelink:hover { background: var(--chip); color: var(--ink); }
.tabs {
  display: flex; gap: 6px; padding: 5px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.tabs button {
  flex: 1 1 auto; min-height: var(--tap); font: inherit; font-weight: 650;
  font-size: 15px; padding: 10px 8px; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--ink-2); border: 1px solid transparent;
}
.tabs button[aria-pressed="true"] {
  background: var(--series); color: var(--series-ink); border-color: var(--series);
}

/* ---------- cards and fields ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; margin-bottom: 14px;
}
.card > h2 { font-size: 18px; margin: 0 0 4px; letter-spacing: -0.01em; }
.card > .note { color: var(--ink-2); font-size: 15px; margin: 0 0 16px; }

.field { margin-bottom: 16px; position: relative; }
.field:last-child { margin-bottom: 0; }
label { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; font: inherit; min-height: var(--tap);
  padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
textarea { min-height: 80px; resize: vertical; }
input[type="number"] { font-variant-numeric: tabular-nums; }
.row { display: flex; flex-wrap: wrap; gap: 12px; }
.row > .field { flex: 1 1 150px; margin-bottom: 0; }
.hint { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.err  { font-size: 14px; color: var(--critical); margin: 6px 0 0; font-weight: 600; }

/* ---------- customer search ---------- */
.results {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  margin: 4px 0 0; padding: 0; list-style: none; max-height: 260px;
  overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.results li {
  min-height: var(--tap); display: flex; align-items: center;
  padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--hair);
}
.results li:last-child { border-bottom: 0; }
.results li:hover { background: var(--chip); }
.results li.new { color: var(--series); font-weight: 650; }
.chosen {
  display: flex; align-items: center; gap: 10px; min-height: var(--tap);
  padding: 10px 12px; border-radius: 10px;
  background: var(--sunken); border: 1px solid var(--border);
}
.chosen b { flex: 1 1 auto; }
.chosen button {
  font: inherit; font-size: 14px; padding: 6px 12px; border-radius: 8px;
  cursor: pointer; background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--border);
}

/* ---------- the grading arithmetic ---------- */
.tally {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--sunken); border: 1px solid var(--border);
  font-variant-numeric: tabular-nums; font-size: 15px;
}
.tally b { font-size: 17px; }
.tally.ok     { border-color: var(--good); background: var(--good-wash); }
.tally.ok b   { color: var(--good); }
.tally.short  { border-color: var(--warn-line); background: var(--warn-bg); }
.tally.over   { border-color: var(--critical); background: var(--critical-wash); }
.tally.over b { color: var(--critical); }

/* ---------- lists ---------- */
.queue { list-style: none; margin: 0; padding: 0; }
.queue li {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  min-height: var(--tap); padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
  background: var(--surface);
}
.queue li:hover { background: var(--chip); }
.queue .ref { font-weight: 650; font-variant-numeric: tabular-nums; }
.queue .who { color: var(--ink-2); flex: 1 1 auto; }
.queue .when { color: var(--muted); font-size: 14px; }
.empty {
  padding: 18px; text-align: center; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 10px;
}

/* ---------- the change trail ---------- */
.trail { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; }
.trail li {
  padding: 8px 0; border-bottom: 1px solid var(--hair);
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.trail li:last-child { border-bottom: 0; }
.trail .was { text-decoration: line-through; color: var(--muted); }
.trail .now { font-weight: 650; color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  width: 100%; font: inherit; font-weight: 650; font-size: 17px;
  min-height: 56px; padding: 14px; border-radius: 12px; cursor: pointer;
  background: var(--series); color: var(--series-ink); border: 1px solid var(--series);
}
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--quiet { background: var(--surface); color: var(--ink); border-color: var(--border); }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--series); outline-offset: 2px;
}


/* =========================================================================
   DAILY RESORT ADDITIONS
   Everything above this line is shared with apps/receiving.
   ========================================================================= */

header { margin: 4px 0 18px; }
header h1 { font-size: clamp(22px, 5vw, 30px); margin: 0 0 6px; letter-spacing: -0.02em; }
header .sub { color: var(--ink-2); margin: 0; font-size: 15px; max-width: 60ch; }

.note { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; margin: 0 0 14px; }
.note.err { color: var(--critical); }
.note.ok  { color: var(--good); }
.opt { color: var(--muted); font-weight: 400; }

.demo {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: var(--radius); padding: 14px 16px; margin: 0 0 18px;
}
.demo svg { flex: 0 0 auto; margin-top: 2px; }
.demo b { display: block; margin-bottom: 3px; }
.demo p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

.warn {
  background: var(--warn-bg); border-left: 3px solid var(--warn-line);
  border-radius: 0 10px 10px 0; padding: 11px 14px; margin: 0 0 16px;
  font-size: 14.5px; color: var(--ink-2);
}

/* The job held across tabs. Without it a supervisor on the Pallets tab has no
   idea which job they are adding to, which is the one mistake this screen can
   make that nobody notices until the report is wrong. */
.jobstrip {
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center;
  background: var(--sunken); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px;
}
.jobstrip__id { flex: 1 1 220px; min-width: 0; }
.jobstrip__id b { display: block; font-size: 16px; }
.jobstrip__id span { font-size: 13.5px; color: var(--muted); }
.jobstrip__figs { display: flex; gap: 18px; flex-wrap: wrap; }
.jobstrip .fig { text-align: right; }
.jobstrip .fig .v { display: block; font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
.jobstrip .fig .k { font-size: 11.5px; color: var(--muted); }
/* .btn is full-width for gloved hands on a tablet; inside the strip it is a
   secondary control and must not span the row. */
.jobstrip .btn { width: auto; flex: 0 0 auto; min-height: 40px; padding: 8px 16px; }

.joblist { display: grid; gap: 8px; }
.joblist button {
  display: block; width: 100%; text-align: left; font: inherit;
  min-height: var(--tap); padding: 11px 14px; cursor: pointer;
  background: var(--surface); color: inherit;
  border: 1px solid var(--border); border-radius: 11px;
}
.joblist button:hover { border-color: var(--series); }
.joblist button[aria-pressed="true"] { border-color: var(--series); background: var(--chip); }
.joblist .jl-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.joblist .jl-top b { font-size: 15.5px; }
.joblist .jl-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.pill {
  font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px; background: var(--chip); color: var(--ink-2);
}
.pill.open { background: var(--warn-bg); color: #8a6100; }
.pill.done { background: var(--good-wash); color: var(--good); }
.pill.review { background: var(--critical-wash); color: var(--critical); }

.b7box {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin: 4px 0 18px;
}
.b7box legend { font-weight: 650; padding: 0 6px; }
.b7row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; }
.b7row .field { margin: 0; }

.notlisted {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 10px 14px; margin: 4px 0 18px;
}
.notlisted summary { cursor: pointer; font-weight: 650; min-height: 32px; }
.notlisted[open] summary { margin-bottom: 8px; }

.tblscroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
th { font-size: 12px; color: var(--muted); font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
.unmatched { color: var(--critical); font-size: 12px; }

footer { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--hair); }
footer p { font-size: 13.5px; color: var(--muted); margin: 0; max-width: 68ch; }