/* Crib Master — an industrial desk tool, designed for the workstation at the
 * crib window. Dense, keyboard-first, tables over cards, no wasted width.
 *
 * The user is an attendant processing a line of people against hundreds of
 * tools. Design rules that follow from that:
 *   · Information density beats breathing room. Rows, not cards.
 *   · The screen is FULL WIDTH. White margins are wasted inventory columns.
 *   · Search-as-you-type everywhere a list exceeds a dozen entries.
 *   · Status lives on the row it describes, never in a separate section.
 *   · Colour never stands alone — every state also carries a word or number.
 *
 * Brand: Blackstone's own palette off blackstoneindustrial.com —
 * orange #f26724, charcoal #32373c. Exact values, not approximations.
 */

:root {
  --ink:        #1a1f24;
  --ink-soft:   #5b6672;
  --line:       #d9dee4;
  --line-soft:  #e8ecf0;
  --bg:         #eef1f4;
  --card:       #ffffff;
  --brand:      #32373c;   /* their charcoal */
  --brand-deep: #24282c;
  --accent:     #f26724;   /* their orange, verbatim */
  --ok:         #1a7f42;
  --ok-bg:      #e7f5ec;
  --short:      #c0261c;
  --short-bg:   #fdeceb;
  --over:       #8a5a00;
  --over-bg:    #fdf4e0;
  --radius:     6px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 14.5px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

a { color: #1d5c8f; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Chrome: one dark toolbar carrying identity, context and nav ─────────── */

header.top {
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 22px;
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 30;
}
header.top a { color: #fff; text-decoration: none; }
header.top .brand { font-weight: 800; letter-spacing: .4px; font-size: 16px; flex: 0 0 auto; }
header.top .brand span { color: var(--accent); }

/* The crib you are standing in — always visible, one click to switch. */
header.top .cribctx {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--brand-deep);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 13.5px;
  line-height: 1.3;
}
header.top .cribctx b { font-size: 14.5px; }
header.top .cribctx .sub { opacity: .75; }
header.top .cribctx .switch { color: var(--accent); font-weight: 600; margin-left: 6px; }

header.top nav { display: flex; gap: 2px; margin-left: 8px; }
header.top nav a {
  padding: 6px 14px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 13.5px;
  color: rgba(255,255,255,.82);
}
header.top nav a.on { background: var(--accent); color: #fff; }
header.top nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }

header.top .spacer { flex: 1; }
header.top .who { font-size: 13px; opacity: .8; }

main { padding: 18px 22px 40px; }

h1 { font-size: 20px; margin: 0 0 2px; }
h2 { font-size: 12.5px; margin: 26px 0 8px; color: var(--ink-soft);
     text-transform: uppercase; letter-spacing: .7px; }
h2:first-of-type { margin-top: 10px; }
.sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 14px; }

.flash {
  background: var(--over-bg);
  border-left: 4px solid var(--accent);
  padding: 10px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 12px;
  max-width: 900px;
}
.flash.warn { background: var(--short-bg); border-left-color: var(--short); font-weight: 600; }

/* ── The toolbar above a table: search + primary action on one line ──────── */

.tablebar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 10px;
}
.tablebar input[type=search] {
  width: 340px;
  height: 36px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  background: #fff;
  color: var(--ink);
}
.tablebar input[type=search]:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.tablebar .count { color: var(--ink-soft); font-size: 13px; }
.tablebar .grow { flex: 1; }

/* ── Tables — the primary surface ────────────────────────────────────────── */

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* No overflow here: any non-visible overflow makes the panel the sticky
   * container, and the sticky column headers then displace 52px down INTO the
   * panel, covering the first row. Narrow screens wrap tables in .scroll,
   * which restores overflow and drops the sticky offset to 0. */
}
.panel > table.tbl th:first-child { border-top-left-radius: var(--radius); }
.panel > table.tbl th:last-child { border-top-right-radius: var(--radius); }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink-soft);
  background: #f7f9fa;
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  position: sticky;
  top: 52px;             /* sits under the toolbar */
  z-index: 5;
  white-space: nowrap;
}
table.tbl td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: #f5f8fb; }
table.tbl td.n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
table.tbl td.actions { text-align: right; white-space: nowrap; }
table.tbl .dim { color: var(--ink-soft); }
table.tbl tr.grp td {
  background: #eef2f5;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--ink-soft);
  padding: 5px 12px;
}
table.tbl tr.short td { background: var(--short-bg); }
table.tbl .itemname { font-weight: 600; color: var(--ink); }
table.tbl .itemname:hover { color: var(--accent); text-decoration: none; }

.scroll { overflow-x: visible; }
@media (max-width: 1200px) {
  .scroll { overflow-x: auto; }
  .scroll table.tbl th { top: 0; }
}

/* ── Badges — status ON the row, word + colour, never colour alone ───────── */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  vertical-align: 1px;
  white-space: nowrap;
}
.badge.ok    { background: var(--ok-bg);    color: var(--ok); }
.badge.short { background: var(--short-bg); color: var(--short); }
.badge.over  { background: var(--over-bg);  color: var(--over); }
.badge.wait  { background: #eef1f4;         color: var(--ink-soft); }
.badge.cal   { background: var(--short);    color: #fff; }

/* ── Buttons & inputs — compact, workstation-sized ───────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  font: 600 13.5px/1 inherit;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--brand-deep); text-decoration: none; }
.btn.accent { background: var(--accent); }
.btn.accent:hover { background: #d8571a; }
.btn.ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--line); }
.btn.ghost:hover { background: #f2f5f7; }
.btn.tiny { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn.big { height: 42px; padding: 0 22px; font-size: 15px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea {
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  background: #fff;
  color: var(--ink);
  width: 100%;
}
textarea { height: auto; padding: 8px 10px; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
label { display: block; font-weight: 600; font-size: 12px; margin: 10px 0 4px;
        color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; }

/* Form grids: fields side by side like a desk form, not a phone column. */
.formrow { display: grid; gap: 14px; align-items: end; }
.formrow.c2 { grid-template-columns: 1fr 1fr; }
.formrow.c3 { grid-template-columns: 2fr 1fr 1fr; }
.formrow.c4 { grid-template-columns: 2fr 1fr 1fr 1fr; }

/* ── Layout scaffolding ──────────────────────────────────────────────────── */

.cols { display: grid; grid-template-columns: 460px 1fr; gap: 24px; align-items: start; }
.cols3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.card + .card { margin-top: 10px; }
.card .title { font-weight: 700; font-size: 15px; }
.card .meta { color: var(--ink-soft); font-size: 13px; margin-top: 3px; }
.card.link { display: block; color: inherit; }
.card.link:hover { border-color: var(--accent); text-decoration: none; }

.stats { display: flex; gap: 10px; margin: 4px 0 16px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 18px; min-width: 120px; text-decoration: none; color: inherit;
}
.stat .n { font-size: 22px; font-weight: 700; line-height: 1.1; }
.stat .l { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; }
.stat.alarm .n { color: var(--short); }

.empty { color: var(--ink-soft); padding: 26px 16px; text-align: center; }

/* ── The sign-out desk ───────────────────────────────────────────────────── */

.desk {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
}
.desk h2 { margin-top: 0; }

/* Typeahead results directly under the search box. */
.hits { position: relative; }
.hits .list {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  max-height: 320px; overflow-y: auto; z-index: 20;
  box-shadow: 0 6px 18px rgba(20,30,40,.12);
}
.hits .hit {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 12px; cursor: pointer; font-size: 13.5px;
  border-bottom: 1px solid var(--line-soft);
}
.hits .hit:last-child { border-bottom: 0; }
.hits .hit:hover, .hits .hit.sel { background: var(--over-bg); }
.hits .hit .where { color: var(--ink-soft); font-size: 12.5px; }
.hits .hit .avail { font-weight: 700; }
.hits .hit .avail.zero { color: var(--short); }

/* Unit picker for serialized kit: one chip per unit, cal state on the chip. */
.units { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.unit {
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 6px 10px; cursor: pointer; font-size: 13px; background: #fff;
  font-family: inherit;
}
.unit .cal { display: block; font-size: 11px; margin-top: 2px; }
.unit .cal.due { color: var(--over); font-weight: 700; }
.unit .cal.overdue { color: var(--short); font-weight: 700; }
.unit.sel { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -1px; }
.unit:disabled { opacity: .45; cursor: not-allowed; }

.calwarn {
  background: var(--short-bg); border: 1.5px solid var(--short);
  border-radius: var(--radius); padding: 10px 12px; margin-top: 10px;
  font-size: 13.5px;
}
.calwarn label { display: flex; align-items: center; gap: 8px; margin: 6px 0 0;
                 text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink); }
.calwarn input[type=checkbox] { width: 18px; height: 18px; }

/* ── Counting (kept workable on any width; density from the same system) ── */

.countbar {
  position: sticky; top: 52px; z-index: 18;
  background: var(--brand); color: #fff;
  padding: 10px 22px; display: flex; align-items: center; gap: 16px;
}
.countbar .prog { font-size: 17px; font-weight: 700; }
.countbar .var { margin-left: auto; font-size: 13.5px; font-weight: 700;
                 padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.16); }
.countbar .var.bad { background: var(--short); }
.countbar .bar { position: absolute; left: 0; bottom: 0; height: 3px;
                 background: var(--accent); transition: width .2s; }

.loc { margin: 18px 0 6px; font-size: 11.5px; font-weight: 700;
       text-transform: uppercase; letter-spacing: .7px; color: var(--ink-soft); }

.rowgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 8px; }

.row {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px;
}
.row.done  { border-left-color: var(--ok);    background: var(--ok-bg); }
.row.short { border-left-color: var(--short); background: var(--short-bg); }
.row.over  { border-left-color: var(--over);  background: var(--over-bg); }
.row.saving { opacity: .55; }
.row.failed { border-left-color: var(--short); background: #fff; outline: 2px dashed var(--short); }
.row .name { font-weight: 600; font-size: 14px; }
.row .sub2 { color: var(--ink-soft); font-size: 12px; margin-top: 2px; word-break: break-word; }

.row .why {
  margin-top: 6px; padding: 5px 9px;
  border-left: 3px solid var(--accent);
  background: var(--over-bg); color: var(--ink);
  font-size: 12.5px; font-weight: 600;
  border-radius: 0 4px 4px 0; word-break: break-word;
}
.row .why b { color: var(--over); }

.controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.step {
  width: 42px; height: 42px; border: 1.5px solid var(--line); background: #fff;
  border-radius: var(--radius); font-size: 20px; font-weight: 700; line-height: 1;
  color: var(--brand); cursor: pointer; flex: 0 0 auto; font-family: inherit;
}
.step:active { background: var(--line); }
.qty {
  flex: 1; height: 42px; border: 1.5px solid var(--line); background: #fff;
  border-radius: var(--radius); font-size: 17px; font-weight: 700;
  color: var(--ink); cursor: pointer; font-family: inherit;
}
.qty .of { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.allgood {
  flex: 0 0 auto; width: 72px; height: 42px; border: 0;
  border-radius: var(--radius); background: var(--ok); color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.row.done .allgood { opacity: .45; }

.finishbar {
  position: sticky; bottom: 0; background: var(--bg);
  padding: 10px 0 14px; border-top: 1px solid var(--line); margin-top: 18px;
}
.finishbar form { max-width: 460px; }

/* ── Variance report ─────────────────────────────────────────────────────── */

.finding {
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--short); border-radius: var(--radius);
  padding: 11px 14px;
}
.finding.consumable { border-left-color: var(--ink-soft); opacity: .85; }
.finding .what { font-weight: 700; font-size: 14.5px; }
.finding .where { color: var(--short); font-weight: 700; font-size: 13px; margin-top: 4px; }
.finding.consumable .where { color: var(--ink-soft); }
.finding .who { color: var(--ink-soft); font-size: 12.5px; margin-top: 4px; }

.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
            gap: 10px; align-items: start; }
.cardgrid .empty { grid-column: 1 / -1; }
.cardgrid .card { margin-top: 0; }

.stagerow { display: flex; gap: 8px; margin-bottom: 14px; max-width: 720px; }
.stagecell {
  flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 10px; text-align: center;
}
.stagecell.done { border-color: var(--ok); background: var(--ok-bg); }
.stagecell .s { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
                letter-spacing: .5px; color: var(--ink-soft); }
.stagecell .by { font-size: 14px; font-weight: 700; margin-top: 3px; }
.stagecell .pending { font-size: 13px; color: var(--ink-soft); margin-top: 3px; font-style: italic; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td { padding: 6px 8px; text-align: left;
                               border-bottom: 1px solid var(--line-soft); }
table.grid th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
                color: var(--ink-soft); }
table.grid td.n { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
table.grid td.n.miss { color: var(--short); }
table.grid td.n.none { color: var(--line); }

/* ── Login ───────────────────────────────────────────────────────────────── */

.login-wrap { max-width: 360px; margin: 10vh auto; padding: 0 20px; }
.login-wrap h1 { font-size: 28px; text-align: center; margin-bottom: 4px; }
.login-wrap h1 span { color: var(--accent); }
.login-wrap .tag { text-align: center; color: var(--ink-soft); margin-bottom: 24px; }
.login-wrap .btn { width: 100%; height: 42px; margin-top: 16px; }

/* ── Narrow screens: functional, not the design target ───────────────────── */

@media (max-width: 860px) {
  header.top { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px; }
  main { padding: 12px; }
  .cols, .cols3, .formrow.c2, .formrow.c3, .formrow.c4 { grid-template-columns: 1fr; }
  .tablebar input[type=search] { width: 100%; }
  .tablebar { flex-wrap: wrap; }
  .panel { overflow-x: auto; }
  table.tbl th { top: 0; }
  .step, .allgood { height: 52px; }
  .step { width: 52px; }
  .qty { height: 52px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8edf2; --ink-soft: #98a4b1; --line: #333b44; --line-soft: #2a323a;
    --bg: #14181c; --card: #1b2127;
    --ok-bg: #122b1c; --short-bg: #2e1512; --over-bg: #2b2110;
  }
  a { color: #6aa5d8; }
  table.tbl th { background: #20262d; }
  table.tbl tbody tr:hover { background: #212a33; }
  table.tbl tr.grp td { background: #20262d; }
  input, select, textarea, .step, .qty, .unit, .hits .list { background: #232b34; color: var(--ink); }
  .btn.ghost { color: var(--ink); }
  .hits .hit:hover, .hits .hit.sel { background: #2b2110; }
}