/* ============================================================================
   Grid — layout
   Spreadsheet power-editor: icon/brand rail · saved-view tabs · spreadsheet
   toolbar · dense editable-looking grid with a frozen Item column, cell
   gridlines, row-number gutter and tabular numerals · aggregation footer.
   Layout only; all color/space/type from --sds-* tokens. Shared vocabulary
   (.cell-item, .st, .num, .muted, review-bar) lives in ../_shared/base.css.
   ========================================================================== */

/* ---- App grid: rail | main ---------------------------------------------- */
.app { display: grid; grid-template-columns: 224px 1fr; min-height: calc(100vh - 34px); }

/* ---- Rail: brand over sidenav ------------------------------------------- */
.rail {
  border-right: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
  position: sticky; top: 34px; height: calc(100vh - 34px);
  display: flex; flex-direction: column;
  padding: var(--sds-space-400) var(--sds-space-300);
  gap: var(--sds-space-200);
  overflow: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: var(--sds-space-200) var(--sds-space-200) var(--sds-space-300); }
.brand sds-logo { --sds-logo-height: 22px; height: 22px; display: inline-flex; }
.brand .product { font-family: var(--sds-font-family-headline); font-weight: var(--sds-font-weight-bold); font-size: 16px; letter-spacing: .01em; }
.brand .product .sub { color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-regular); }
.rail sds-sidenav { width: 100%; }

/* ---- Main column -------------------------------------------------------- */
.main { min-width: 0; display: flex; flex-direction: column; }

/* ---- Saved views (tabs) ------------------------------------------------- */
.views {
  display: flex; align-items: center; gap: var(--sds-space-300);
  padding: var(--sds-space-300) var(--sds-space-500) 0;
  border-bottom: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
}
.views .vtitle {
  font-family: var(--sds-font-family-headline);
  font-size: var(--sds-type-headline-6-size);
  line-height: var(--sds-type-headline-6-line);
  font-weight: var(--sds-type-headline-6-weight);
  margin-right: var(--sds-space-200);
  padding-bottom: var(--sds-space-300);
}
.views sds-tabs { flex: 1 1 auto; min-width: 0; }
.views .addv { flex: none; margin-bottom: var(--sds-space-200); }

/* ---- Toolbar ------------------------------------------------------------ */
.toolbar {
  display: flex; align-items: center; gap: var(--sds-space-200);
  padding: var(--sds-space-300) var(--sds-space-500);
  border-bottom: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
}
.toolbar sds-tag { cursor: default; }
.toolbar .tbsep { width: 1px; align-self: stretch; margin: 2px var(--sds-space-200); background: var(--sds-color-border); }
.toolbar .selinfo { font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); white-space: nowrap; }
.toolbar .tbspacer { margin-left: auto; }
.toolbar sds-search { width: 200px; flex: none; }

/* ---- Spreadsheet grid --------------------------------------------------- */
.gridwrap { overflow: auto; flex: 1; min-height: 0; background: var(--sds-color-surface); }

#grid-table { width: 100%; min-width: 1240px; }

/* Spreadsheet feel: vertical cell gridlines + tight padding on every cell.
   sds-table cells are flex items; every column below is pinned to a fixed integer
   width (flex:0 0 <px>, no grow) so head + body columns resolve to the same whole
   pixel. Right border on the host cells draws the gridlines — and integer column
   edges keep those 1px lines from vanishing at sub-pixel boundaries (which is what
   flex-grow caused). Extra width on wide screens fills as trailing surface. */
#grid-table sds-table-head > *,
#grid-table sds-table-row > * {
  padding-inline: var(--sds-space-300);
  border-right: 1px solid var(--sds-color-border);
}
#grid-table sds-table-head > *:last-child,
#grid-table sds-table-row > *:last-child { border-right: 0; }

/* tabular numerals everywhere in the sheet for column alignment */
#grid-table sds-table-cell { font-variant-numeric: tabular-nums; }

/* Fixed integer column widths (flex:0 0 <px>, no grow/shrink) — identical in head
   + body so every gridline lands on a whole pixel. */
/* col 1 — checkbox gutter (frozen via sticky-first-column) */
#grid-table sds-table-head > :nth-child(1),
#grid-table sds-table-row > :nth-child(1) { flex: 0 0 44px; min-inline-size: 44px; }
/* col 2 — Item (the spreadsheet's frozen primary column) */
#grid-table sds-table-head > :nth-child(2),
#grid-table sds-table-row > :nth-child(2) { flex: 0 0 230px; min-inline-size: 230px; }
/* col 3 — Class */
#grid-table sds-table-head > :nth-child(3),
#grid-table sds-table-row > :nth-child(3) { flex: 0 0 132px; min-inline-size: 132px; }
/* col 4 — Manufacturer */
#grid-table sds-table-head > :nth-child(4),
#grid-table sds-table-row > :nth-child(4) { flex: 0 0 140px; min-inline-size: 140px; }
/* col 5 — Ø mm (numeric) */
#grid-table sds-table-head > :nth-child(5),
#grid-table sds-table-row > :nth-child(5) { flex: 0 0 88px; min-inline-size: 88px; }
/* col 6 — Length mm (numeric; wide enough for the header + sort caret on one line) */
#grid-table sds-table-head > :nth-child(6),
#grid-table sds-table-row > :nth-child(6) { flex: 0 0 110px; min-inline-size: 110px; }
/* col 7 — Flutes (numeric, tightest) */
#grid-table sds-table-head > :nth-child(7),
#grid-table sds-table-row > :nth-child(7) { flex: 0 0 72px; min-inline-size: 72px; }
/* cols 8,9 — Material / Coating */
#grid-table sds-table-head > :nth-child(8), #grid-table sds-table-row > :nth-child(8),
#grid-table sds-table-head > :nth-child(9), #grid-table sds-table-row > :nth-child(9) { flex: 0 0 96px; min-inline-size: 96px; }
/* col 10 — Stock */
#grid-table sds-table-head > :nth-child(10),
#grid-table sds-table-row > :nth-child(10) { flex: 0 0 116px; min-inline-size: 116px; }
/* col 11 — Updated */
#grid-table sds-table-head > :nth-child(11),
#grid-table sds-table-row > :nth-child(11) { flex: 0 0 116px; min-inline-size: 116px; }

/* row-number gutter prefix inside the Item cell — tabular, muted */
#grid-table .cell-item { gap: var(--sds-space-200); }
#grid-table .cell-item .rn {
  flex: none; width: 18px; text-align: right;
  color: var(--sds-color-text-muted);
  font-size: var(--sds-type-footnote-size);
}

/* add-row affordance — dim, full-width call to extend the sheet */
#grid-table .addrow { color: var(--sds-color-text-muted); }
#grid-table .addrow .addrow-label {
  display: inline-flex; align-items: center; gap: var(--sds-space-200);
  color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-bold);
}

/* ---- Aggregation footer ------------------------------------------------- */
.aggr {
  display: flex; align-items: center; gap: var(--sds-space-400);
  padding: var(--sds-space-300) var(--sds-space-500);
  border-top: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
  font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted);
}
.aggr .aggr-spacer { margin-left: auto; }
.aggr .agg b { color: var(--sds-color-text); margin-left: var(--sds-space-100); }
.aggr sds-pagination { margin-left: var(--sds-space-200); }