/* Plain and dense on purpose. This replaces a spreadsheet, so it should read
   like one: thin rules, tight rows, numbers that line up, and nothing
   decorative competing with the data. */

:root {
  --ink: #14181d;
  --muted: #667080;
  --line: #d8dde4;
  --line-strong: #aab3c0;
  --bg: #ffffff;
  --head: #f4f6f8;
  --stripe: #fafbfc;
  --short: #b3261e;
  --accent: #1e3a5f;
  --focus: #fff6d5;
  --row-h: 26px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
a { color: var(--accent); }

/* ---------------------------------------------------------------- chrome */
header.top {
  display: flex; align-items: baseline; gap: 18px;
  padding: 10px 16px; border-bottom: 1px solid var(--line-strong);
  position: sticky; top: 0; background: var(--bg); z-index: 40;
}
header.top h1 { font-size: 15px; font-weight: 600; margin: 0; }
header.top .who { margin-left: auto; color: var(--muted); font-size: 12px; }
nav.tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--line);
           position: sticky; top: 41px; background: var(--bg); z-index: 39; }
nav.tabs button {
  border: 1px solid transparent; border-bottom: none; background: none;
  padding: 6px 12px; font: inherit; color: var(--muted); cursor: pointer;
  border-radius: 3px 3px 0 0;
}
nav.tabs button[aria-current="true"] {
  color: var(--ink); background: var(--head);
  border-color: var(--line); margin-bottom: -1px; background: var(--bg);
  border-bottom: 1px solid var(--bg); font-weight: 600;
}
.wrap { padding: 14px 16px 60px; }
.note { color: var(--muted); margin: 0 0 10px; }

/* ------------------------------------------------------------------ grid */
.gridscroll { overflow: auto; max-height: calc(100vh - 150px); border: 1px solid var(--line-strong); }
table.grid { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
table.grid th, table.grid td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 0 6px; height: var(--row-h); white-space: nowrap; }
table.grid thead th { background: var(--head); position: sticky; z-index: 20; font-weight: 600; text-align: left; }
/* The name row carries the SKU underneath it, so it needs two lines. Every
   sticky offset below is measured off that, which is why the heights are
   pinned rather than left to the content. */
table.grid thead tr:nth-child(1) th { top: 0; height: 36px; vertical-align: top; padding-top: 3px; }
table.grid thead tr:nth-child(2) th { top: 36px; }
table.grid thead tr:nth-child(3) th { top: calc(36px + var(--row-h)); }
table.grid thead tr:nth-child(4) th { top: calc(36px + var(--row-h) * 2); border-bottom: 1px solid var(--line-strong); }
table.grid .home, table.grid .date { position: sticky; background: var(--bg); z-index: 25; }
table.grid th.item .sku { line-height: 1.25; }
table.grid .home { left: 0; min-width: 260px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
table.grid .date { left: 260px; min-width: 92px; border-right: 1px solid var(--line-strong); }
table.grid thead .home, table.grid thead .date { z-index: 30; background: var(--head); }
table.grid tbody tr:nth-child(even) td { background: var(--stripe); }
table.grid tbody tr:nth-child(even) .home, table.grid tbody tr:nth-child(even) .date { background: var(--stripe); }
table.grid tbody tr:hover td, table.grid tbody tr:hover .home, table.grid tbody tr:hover .date { background: var(--focus); }

th.item { min-width: 96px; max-width: 96px; overflow: hidden; text-overflow: ellipsis;
          font-weight: 600; border-left: 1px solid var(--line-strong); }
th.item .sku { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
th.stat { text-align: right; color: var(--muted); font-weight: 400; }
th.statlabel { text-align: right; color: var(--muted); font-weight: 400; }

td.bal { text-align: right; color: var(--muted); width: 46px; min-width: 46px;
         border-left: 1px solid var(--line-strong); }
td.bal.short { color: var(--short); font-weight: 600; }
td.qty { padding: 0; width: 50px; min-width: 50px; }
td.qty input {
  width: 100%; height: calc(var(--row-h) - 1px); border: 0; background: transparent;
  font: inherit; text-align: right; padding: 0 6px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
td.qty input:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: #fff; }
td.qty input.saving { background: var(--focus); }
tr.flagged .home::before { content: "\2731"; color: var(--muted); margin-right: 4px; font-size: 10px; }
tr.nodate .date { color: var(--short); }

/* --------------------------------------------------------------- tables */
table.plain { border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.plain th, table.plain td { border-bottom: 1px solid var(--line); padding: 5px 10px 5px 0; text-align: left; }
table.plain th { font-weight: 600; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
table.plain td.num, table.plain th.num { text-align: right; padding-right: 16px; }
table.plain tr.overdue td { color: var(--short); }
table.plain td.short { color: var(--short); font-weight: 600; }

/* ---------------------------------------------------------------- login */
.login { max-width: 300px; margin: 12vh auto; }
.login h1 { font-size: 16px; margin: 0 0 14px; }
.login label { display: block; margin: 10px 0 3px; color: var(--muted); font-size: 12px; }
.login input { width: 100%; padding: 7px 8px; border: 1px solid var(--line-strong); border-radius: 3px; font: inherit; }
.login button { margin-top: 14px; padding: 7px 14px; font: inherit; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 3px; }
.err { color: var(--short); margin-top: 10px; }

/* --------------------------------------------------------------- pictures
   The workbook carried 47 of these as over-cell images. A thumbnail sits in
   the item's header so you can see what you are counting; clicking it opens
   the full picture with the catalogue entry and where the SKU is used. */
img.thumb { display: block; width: 40px; height: 40px; object-fit: contain;
            background: #fff; border: 1px solid var(--line); border-radius: 2px;
            margin: 0 0 2px; cursor: pointer; }
img.thumb.sm { width: 26px; height: 26px; display: inline-block; vertical-align: middle;
               margin: 0 6px 0 0; }
.thumb.blank { display: block; width: 40px; height: 40px; margin: 0 0 2px;
               border: 1px dashed var(--line); border-radius: 2px; background: transparent; }
th.item .iname { cursor: pointer; }
th.item .iname:hover, td.skucell:hover span { text-decoration: underline; }
td.skucell { cursor: pointer; white-space: nowrap; }
table.grid thead tr:nth-child(1) th.item { height: 78px; }
table.grid thead tr:nth-child(2) th { top: 78px; }
table.grid thead tr:nth-child(3) th { top: calc(78px + var(--row-h)); }
table.grid thead tr:nth-child(4) th { top: calc(78px + var(--row-h) * 2); }

.backdrop { position: fixed; inset: 0; background: rgba(20,24,29,.45);
            display: flex; align-items: flex-start; justify-content: center;
            padding: 40px 16px; z-index: 100; overflow: auto; }
.panel { background: var(--bg); border: 1px solid var(--line-strong); border-radius: 4px;
         padding: 18px 22px 22px; max-width: 620px; width: 100%; position: relative; }
.panel h2 { font-size: 15px; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.panel h3 { font-size: 13px; margin: 18px 0 6px; font-weight: 600; }
.panel img.big { display: block; max-width: 260px; max-height: 260px; object-fit: contain;
                 border: 1px solid var(--line); margin: 0 0 14px; background: #fff; }
.panel table.plain th { width: 130px; color: var(--muted); font-weight: 400; }
.panel .scrolly { max-height: 260px; overflow: auto; border: 1px solid var(--line); }
.panel .x { position: absolute; top: 10px; right: 12px; border: 0; background: none;
            font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); }

button.go { margin: 4px 0 14px; padding: 7px 14px; font: inherit; cursor: pointer;
            border: 1px solid var(--accent); background: var(--accent); color: #fff;
            border-radius: 3px; }
h3 { font-size: 13px; margin: 18px 0 6px; }