/* Inventory view. Palette + resets + .btn* + .lf-skel* come from theme.css. */

.inventory-root {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--lf-nav-h));
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Top bar */
.inv-top {
  background: var(--lf-panel);
  border-bottom: 1px solid var(--lf-border);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.inv-top-left { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.inv-top-left h1 { font-size: 17px; font-weight: 700; color: var(--lf-text); }
.inv-location { font-size: 12px; color: var(--lf-text-muted); }

/* Intro blurb */
.inv-intro {
  color: var(--lf-text-muted);
  font-size: 11px;
  line-height: 1.5;
  padding: 10px 20px 0;
  max-width: 760px;
  flex-shrink: 0;
}
.inv-intro strong { color: var(--lf-text); }

/* Scroll region holding the table */
.inv-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  padding: 10px 20px 20px;
}
/* The table is a list, not a full-bleed grid. Capping it stops a wide monitor
   stretching three columns across 2000px, which is most of what made this feel
   sprawling regardless of row height. */
.inv-body > .inv-table { max-width: 860px; }

/* Table */
.inv-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--lf-panel);
  border: 1px solid var(--lf-border);
  border-radius: 10px;
  overflow: hidden;
}
/* STICKY HEAD. The table is 20 rows and scrolls inside .inv-body; without this
   the column a number belongs to scrolls away from the number. */
.inv-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--lf-text-muted);
  font-weight: 600;
  padding: 7px 12px;
  border-bottom: 1px solid var(--lf-border);
  background: var(--lf-panel-alt);
}
.inv-table tbody td {
  padding: 5px 12px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--lf-text);
  vertical-align: middle;
}
/* SEPARATORS ONLY BETWEEN PRODUCTS, not between every row. The product bands
   already divide the table, so a rule under each variant row was a second
   divider doing the first one's job and making the whole thing look like a
   spreadsheet. Variants inside a product now read as one block. */
.inv-var-row + .inv-prod-row > td { border-top: 1px solid var(--lf-border); }
.inv-group { font-weight: 600; }
/* The variant list, folded out of its own column into a muted caption. Single
   line and truncated: a WVC row lists seven config names and would otherwise
   set the height of every row in the table. Full text is in `title`. */
.inv-configs {
  display: block;
  margin-top: 1px;
  color: var(--lf-text-muted);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46ch;
}

/* ── Product header row + nested variant rows ─────────────────────────────
 *
 * One header per Shopify product, its variants beneath. The hierarchy is
 * carried by THREE cues, not one: a tinted header band, a heavier product
 * label, and an indent rail down the variant rows. Colour alone would be the
 * only cue for a reader who cannot see it, which is why the indent and the
 * weight change are there too.
 */
/* ── Product LINE: the top level, above the product ───────────────────────
 *
 * Only rendered where two or more products share a line, so a line heading
 * always earns its row. It is the collapsible unit, and it is the only thing
 * left on screen when its section is shut, which is why it carries the row
 * count.
 */
.inv-line-row > td {
  padding-top: 10px;
  padding-bottom: 4px;
  border-top: 1px solid var(--lf-border);
}
.inv-table tbody tr:first-child.inv-line-row > td { border-top: 0; padding-top: 6px; }
.inv-line-toggle,
.inv-prod-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 2px 4px 2px 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  border-radius: 5px;
}
.inv-line-toggle:focus-visible,
.inv-prod-toggle:focus-visible {
  outline: 2px solid var(--lf-accent);
  outline-offset: 1px;
}
.inv-line-toggle { font-size: 12px; font-weight: 700; color: var(--lf-text); letter-spacing: 0.2px; }
.inv-line-label { font-size: 12px; font-weight: 700; color: var(--lf-text); }
.inv-line-count {
  margin-left: 7px;
  font-size: 10px;
  font-weight: 600;
  color: var(--lf-text-dim);
  font-variant-numeric: tabular-nums;
}

/* One chevron shape for both levels. Rotates rather than swapping glyphs, so
   the control reads as the same object in two states. */
.inv-chevron {
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transform: rotate(90deg);
  transition: transform 120ms ease;
  opacity: 0.65;
  flex: none;
}
.is-collapsed .inv-chevron { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
  .inv-chevron { transition: none; }
}

.inv-prod-row > td {
  background: transparent;
  padding-top: 7px;
  padding-bottom: 2px;
}
/* A product nested under a line indents, so the three levels are readable as
   three. A product that is its own section sits at the left margin. */
.inv-prod-row[data-inv-in-section] > .inv-prod-name { padding-left: 22px; }
/* A product header is not a row you act on, so it takes no hover affordance. */
.inv-prod-row:hover > td { background: transparent; }
/* Small caps rather than a tinted band. The band was the bulkiest thing on the
   page: a full-height row of filled colour per product, eight of them. A
   lighter, smaller, letter-spaced label reads as a section heading at a
   fraction of the vertical space, and the group is still legible because the
   variants beneath it are indented and it is separated above. */
.inv-prod-label {
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--lf-text-muted);
}
/* Just the count. "2 variants" spelled out was three times the width for the
   same fact, on a line whose job is to be skimmed. */
.inv-prod-count {
  margin-left: 6px;
  display: inline-block;
  min-width: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--lf-border);
  color: var(--lf-text-muted);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
}
.inv-prod-total-cell { text-align: right; }
.inv-prod-total {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 11px;
  color: var(--lf-text-muted);
}
.inv-prod-total-unit {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--lf-text-dim);
}

/* The indent rail. A left border rather than padding alone, so the nesting
   survives a narrow viewport where padding gets squeezed. */
.inv-var-row > .inv-group {
  padding-left: 22px;
  position: relative;
  font-weight: 600;
}
.inv-var-row > .inv-group::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--lf-border);
}
/* A variant three levels deep (line > product > variant) indents past its
   product, which is itself indented past the line. */
.inv-var-row.inv-deep > .inv-group { padding-left: 42px; }
.inv-var-row.inv-deep > .inv-group::before { left: 30px; }
/* The rail is continuous down a product's variants, so it should not restart
   at each row: only the LAST variant stops short, closing the group. */
.inv-var-row:last-child > .inv-group::before,
.inv-var-row:has(+ .inv-prod-row) > .inv-group::before { bottom: 50%; }
.inv-var-row:hover > td { background: var(--lf-panel-alt); }
.inv-var-name { color: var(--lf-text); }

/* On-hand cell: committed count + editable input + Save.
 *
 * WAS 240px AND WAS THE WIDEST THING ON THE ROW. Three controls laid out at
 * full size on every row, most of which nobody is editing. Now 168px: the
 * committed count is right-aligned so the column reads as a column of numbers,
 * and the editor sits after it at a size that fits the values it takes (stock
 * counts are two or three digits, not eight).
 *
 * The Save button stays permanently visible rather than appearing on hover or
 * on change. Revealing it would be sleeker and would also make the control an
 * operator cannot see until they guess it is there, on the one page where the
 * action writes to a live storefront.
 */
.inv-th-onhand, .inv-td-onhand {
  width: 132px;
  white-space: nowrap;
  text-align: right;
  position: relative; /* anchors the visually-hidden committed count below */
}
.inv-current {
  display: inline-block;
  min-width: 26px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
  color: var(--lf-text);
  margin-right: 8px;
}
/* THE SAME NUMBER WAS PRINTED TWICE ON EVERY EDITABLE ROW: once as the
 * committed count and again as the input's value. That duplication, not the
 * padding, was what made the on-hand cell the widest thing on the row.
 *
 * Where an input exists it IS the number, so the committed count is taken out
 * of the visual flow. It stays in the DOM and stays readable to a screen
 * reader, because it is the authoritative committed value and the input is
 * only a draft of it. A read-only operator has no input, so `:has()` leaves
 * their count visible: they would otherwise see an empty column.
 */
.inv-td-onhand:has(.inv-onhand-input) .inv-current {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.inv-onhand-input {
  width: 52px;
  background: var(--lf-bg);
  border: 1px solid var(--lf-border);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  text-align: right;
  color: var(--lf-text);
  outline: none;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.inv-onhand-input:focus {
  border-color: var(--lf-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lf-accent) 22%, transparent);
}
/* The Save button rides at the row's density rather than the global .btn-small,
   which is sized for a page with buttons on it rather than a table with one per
   row. Still a real hit target at 22px tall by 44px wide. */
.inv-table .inv-save {
  padding: 2px 10px;
  min-height: 22px;
  font-size: 11px;
  border-radius: 6px;
}

/* Storefront status cell */
.inv-th-status, .inv-td-status { width: 92px; text-align: left; padding-left: 12px; }
.inv-status { font-size: 11px; color: var(--lf-text-muted); }

/* Empty + error states */
.inv-empty {
  color: var(--lf-text-dim);
  font-size: 13px;
  text-align: center;
  padding: 48px 20px;
}
.inv-error {
  color: var(--lf-error);
  background: var(--lf-error-bg);
  border: 1px solid var(--lf-error-border);
  border-radius: 8px;
  font-size: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .inv-top { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .inv-intro, .inv-body { padding-left: 14px; padding-right: 14px; }
  .inv-th-onhand, .inv-td-onhand { width: auto; }
  /* The variant caption is the first thing to give up width at this size: it
     describes the row, where the count IS the row. */
  .inv-configs { max-width: 22ch; }
  .inv-th-status, .inv-td-status { width: auto; padding-left: 8px; }
}