/* ==========================================================================
   S&F Supply — visual identity.

   Charcoal surfaces, bone text (echoing the logo's off-white on black),
   ONE amber accent for primary actions and active states. Red appears
   only on destructive actions. Headings: Space Grotesk. Body and data:
   Inter. SKUs and numbers: JetBrains Mono. All fonts self-hosted — the
   live path must survive with the internet down.

   Two constraints that override aesthetics:
   - the seller monitor stays maximum-contrast white-on-black, huge type
   - the intake form stays dense and keyboard-driven
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  --bg: #141518;            /* page charcoal */
  --surface: #1c1e22;       /* panels */
  --surface-2: #24262c;     /* table heads, inputs, raised chips */
  --border: #33363d;
  --border-strong: #45484f;
  --text: #ece9e2;          /* bone, from the logo */
  --muted: #a29d92;         /* warm grey */
  --accent: #ffa733;        /* the one accent */
  --accent-strong: #ffb95c;
  --accent-ink: #241503;    /* text on accent */
  --accent-tint: rgba(255, 167, 51, 0.10);
  --accent-tint-weak: rgba(255, 167, 51, 0.05);
  --danger: #e5484d;
  --danger-tint: rgba(229, 72, 77, 0.12);
  --heading: "Space Grotesk", "Segoe UI", sans-serif;
  --body: "Inter", "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3 {
  font-family: var(--heading);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}
h1 { font-size: 1.65rem; margin: 0.4rem 0 0.8rem; }
h2 { font-size: 1.1rem; margin: 0.2rem 0 0.7rem; }
h3 { font-size: 0.95rem; margin: 1rem 0 0.4rem; color: var(--muted);
     text-transform: uppercase; letter-spacing: 0.08em; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }

/* ------------------------------------------------------------------ topbar */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 1rem;
  background: #0e0f11;
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--text); text-decoration: none;
  font-family: var(--heading); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.topbar .brand img { height: 34px; width: auto; border-radius: 6px; }
.topbar nav { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.topbar nav a {
  color: var(--muted); text-decoration: none;
  font-size: 0.88rem; font-weight: 600; padding: 0.15rem 0.1rem;
  border-bottom: 2px solid transparent;
}
.topbar nav a:hover { color: var(--text); text-decoration: none; }
.topbar .who { color: #6d6f76; font-size: 0.85rem; }

button.linklike {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 0.88rem; font-family: var(--body);
  font-weight: 600; padding: 0;
}
button.linklike:hover { color: var(--text); text-decoration: underline; }

main { max-width: 1160px; margin: 1.4rem auto; padding: 0 1rem; }

/* ------------------------------------------------------------------ flash */

.flashes { max-width: 1160px; margin: 0.8rem auto 0; padding: 0 1rem; }
.flash {
  background: var(--accent-tint);
  border: 1px solid rgba(255, 167, 51, 0.45);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.55rem 0.9rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------ forms */

form label { display: block; margin: 0.7rem 0 0.2rem; font-weight: 600;
             font-size: 0.82rem; color: var(--muted); }
form label.checkbox { font-weight: 400; color: var(--text); margin-top: 0.7rem; }

input[type="text"], input[type="password"], input[type="number"],
input:not([type]), select, textarea {
  width: 100%;
  padding: 0.48rem 0.65rem;
  font-size: 0.95rem;
  font-family: var(--body);
  color: var(--text);
  background: #121316;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
input::placeholder { color: #5b5d64; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, select:focus-visible { outline: none; }

/* ------------------------------------------------------------------ buttons
   Primary: solid accent. Secondary (.action): quiet surface. Destructive
   (.danger): red outline, fills on hover. All get visible focus rings. */

button.primary, button.action {
  font-family: var(--body);
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
button.primary {
  margin-top: 0.9rem;
  padding: 0.55rem 1.4rem;
  font-size: 0.95rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
button.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
button.primary:active { transform: translateY(1px); }

button.action {
  padding: 0.3rem 0.75rem;
  font-size: 0.82rem;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
}
button.action:hover { border-color: var(--accent); color: var(--accent-strong); }

button.danger, button.action.danger {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}
button.danger:hover, button.action.danger:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
button.primary:focus-visible, button.action:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ------------------------------------------------------------------ login */

.login-card {
  max-width: 390px;
  margin: 7vh auto;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.login-logo { display: block; margin: 0 auto 1.2rem; max-height: 130px;
              max-width: 100%; border-radius: 10px; }
.login-card button.primary { width: 100%; }
.login-card #device_name { margin-top: 0.5rem; }

/* ------------------------------------------------------------------ tables */

table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { text-align: left; padding: 0.45rem 0.65rem;
         border-bottom: 1px solid #2a2c31; font-size: 0.9rem; }
th {
  background: var(--surface-2);
  font-family: var(--heading);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
tbody tr:hover td, table tr:hover td { background: rgba(255, 255, 255, 0.015); }
tr.dim td { color: #6d6f76; }
td form { display: inline; }
td.num { text-align: right; font-family: var(--mono); font-size: 0.85rem; }

/* --------------------------------------------------------- status language
   One vocabulary everywhere: fresh (neutral), in progress (the accent),
   finished (dimmed, ticked). Tint plus label — never colour alone. */

.badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  white-space: nowrap;
}
.badge-progress {
  border-color: rgba(255, 167, 51, 0.6);
  color: var(--accent);
  background: var(--accent-tint);
}
.badge-done { border-color: var(--border); color: var(--muted); background: var(--surface-2); }

tr.state-progress td { background: var(--accent-tint-weak); }
tr.state-done td { background: rgba(255, 255, 255, 0.015); }
tr.state-done { opacity: 0.72; }

.progress {
  display: inline-block;
  vertical-align: middle;
  width: 90px;
  height: 6px;
  background: #2b2d33;
  border-radius: 999px;
  overflow: hidden;
  margin-right: 0.45rem;
}
.progress-fill { display: block; height: 100%; background: var(--accent);
                 border-radius: 999px; }

/* ------------------------------------------------------------------ alerts */

.alert {
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}
.alert-danger {
  background: var(--danger-tint);
  border: 1px solid var(--danger);
  color: #ffb3b5;
}
/* Quoted names in the near-duplicate warning: keep every space, or a
   double space renders the same as a single one and the two spellings
   look identical. */
.dup-name { white-space: pre-wrap; }

/* Import review: compact per-row resolution forms. */
.inline-form { display: inline-flex; gap: 0.4rem; align-items: center;
               margin: 0.2rem 0; }
.inline-form input.short { width: 4.5rem; }

/* ------------------------------------------------------------------ panels */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.1rem;
}
.panel h2 { margin-top: 0; }
.panel form.inline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem;
  align-items: end;
}
.panel form.inline-grid label { margin: 0 0 0.2rem; }
.panel form.inline-grid button { margin-top: 0; }

.pager { margin: 1rem 0; display: flex; gap: 1rem; align-items: center; color: var(--muted); }
.mono { font-family: var(--mono); font-size: 0.85rem; }
.small { font-size: 0.83rem; color: var(--muted); }
.small a { font-weight: 600; }

/* ------------------------------------------------------------------ home
   The dashboard fills the screen and breathes; the logo stays as the
   persistent mark in the topbar corner. One accent, applied with
   confidence; restrained motion, no gradients, no glows. */

body.home-page main { max-width: 1320px; padding: 0 2.5rem; }

.dash-heading {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  margin: 2.4rem 0 2.4rem;
  min-height: 1.25em;
  letter-spacing: 0.01em;
}
.dash-heading.typing::after {
  content: "▌";
  color: var(--accent);
  animation: caret-blink 1s step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.dash-group { margin-bottom: 2.4rem; }
.dash-group > h2 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.45rem;
  margin-bottom: 0.9rem;
}
.group-index { color: var(--accent); font-family: var(--mono); font-size: 0.75rem; }
.group-note { color: var(--muted); font-weight: 400; text-transform: none;
              letter-spacing: 0.01em; font-size: 0.8rem; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
}
body.home-page .tiles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tile {
  position: relative;
  display: block;
  padding: 1.15rem 1.3rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.14s, transform 0.14s;
}
.tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.tile h2 { margin: 0 0 0.3rem; font-size: 1.08rem; transition: color 0.14s; }
.tile:hover h2 { color: var(--accent); }
.tile p { margin: 0; font-size: 0.85rem; color: var(--muted); max-width: 34ch; }
.tile-go {
  position: absolute;
  top: 1.05rem;
  right: 1.15rem;
  color: var(--accent);
  font-size: 1.1rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.14s, transform 0.14s;
}
.tile:hover .tile-go { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .tile, .tile h2, .tile-go { transition: none; }
  .tile:hover { transform: none; }
  .dash-heading.typing::after { animation: none; }
}

/* ------------------------------------------------------------------ intake
   Dense and keyboard-driven — compact rhythm, nothing pushed off screen. */

.intake-panel { max-width: 520px; }
.intake-panel form label { margin: 0.5rem 0 0.15rem; font-size: 0.78rem; }
.intake-panel input, .intake-panel select { padding: 0.42rem 0.6rem; }
.intake-panel input[type="file"] { margin-top: 0.2rem; font-size: 0.82rem; }
.intake-panel button.primary { margin-top: 0.8rem; }
.undo-form { margin-top: 1rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }

/* Combobox type-ahead */
.combo-wrap { position: relative; }
.combo-list {
  list-style: none; margin: 0; padding: 0;
  position: absolute; left: 0; right: 0; z-index: 10;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  max-height: 14rem; overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  display: none;
}
.combo-list li { padding: 0.38rem 0.7rem; cursor: pointer; font-size: 0.9rem; }
.combo-list li.active { background: var(--accent); color: var(--accent-ink); }

/* ------------------------------------------------------------------ live */

/* Scan-ready banner: driven by OS window focus. Big enough to read
   across a table — a dead window silently eats scans. */
.scan-ready {
  border-radius: 12px;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  text-align: center;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: 0.05em;
}
.scan-ready.is-ready {
  background: var(--accent);
  color: var(--accent-ink);
}
.scan-ready.is-blurred {
  background: var(--danger);
  color: #fff;
  animation: scan-blink 1.1s step-end infinite;
}
@keyframes scan-blink {
  50% { opacity: 0.55; }
}

.assigned-big {
  background: var(--accent-tint);
  border: 1px solid rgba(255, 167, 51, 0.5);
  color: var(--text);
  border-radius: 12px;
  padding: 1.1rem;
  text-align: center;
  margin-bottom: 1.1rem;
}
.assigned-number { font-family: var(--heading); font-size: 5rem;
                   font-weight: 700; line-height: 1; color: var(--accent); }
.assigned-detail { font-size: 1.35rem; margin-top: 0.4rem; }
.assigned-hint { color: var(--muted); margin-top: 0.3rem; font-size: 0.9rem; }
.lot-warning { color: var(--danger); font-weight: 700; }

/* --------------------------------------------------------- seller monitor
   CONSTRAINT: maximum contrast, very large type — read across a table in
   bad light, hours into a stream. Pure white on pure black, no tints. */

body.monitor-page { background: #000; color: #fff; }
body.monitor-page .topbar { background: #000; border-color: #222; }
.monitor { text-align: center; padding: 0.8rem 0; }
.mon-number { font-family: var(--heading); font-size: 10rem; font-weight: 700;
              line-height: 1; color: #fff; }
.mon-pair { font-size: 2.8rem; font-weight: 600; margin-top: 0.5rem; color: #fff; }
.mon-meta { font-size: 1.6rem; color: #c9c9c9; margin-top: 0.3rem;
            font-family: var(--mono); }
.mon-photo { max-height: 34vh; margin-top: 0.8rem; border-radius: 8px; }
.mon-recent { margin-top: 1.1rem; font-size: 1.5rem; color: #b9b9b9; }
.mon-recent-row { padding: 0.12rem 0; }
.mon-stats { margin-top: 1.1rem; font-size: 1.3rem; color: #9a9a9a; }
.monitor-counter { max-width: 420px; margin: 0 auto; }
body.monitor-page .lot-warning { color: #ff5252; }

/* --------------------------------------------------- hidden print iframe */

.print-frame { position: absolute; left: -9999px; width: 1px; height: 1px; border: 0; }

/* ------------------------------------------------------- model search
   Used on a phone, stood in a shop, deciding what to buy: big search
   box, big toggle targets, tables scroll sideways inside their panel. */

.scroll-x { overflow-x: auto; }

.model-search-form { display: flex; gap: 0.6rem; align-items: center; }
.model-search-form .combo-wrap { flex: 1; }
.model-search-form input#q { font-size: 1.05rem; padding: 0.6rem 0.7rem; }
.model-search-form button.primary { margin-top: 0; white-space: nowrap; }

.view-toggle { display: flex; gap: 0.6rem; margin-bottom: 1.1rem; }
.toggle-btn {
  flex: 1;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}
.toggle-btn:hover { border-color: var(--accent); color: var(--accent-strong);
                    text-decoration: none; }
.toggle-btn.active { background: var(--accent); border-color: var(--accent);
                     color: var(--accent-ink); }
.toggle-btn.active:hover { color: var(--accent-ink); }

@media (max-width: 640px) {
  main { margin-top: 0.8rem; }
  .topbar nav { gap: 0.5rem 0.7rem; }
}