/* ============================================================================
   01 · Calm Precision — layout
   Refined premium inventory list: rail · faceted filters · status-chipped table.
   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; }

.pagehead {
  display: flex; align-items: flex-end; gap: var(--sds-space-400);
  padding: var(--sds-space-500) var(--sds-space-600) var(--sds-space-400);
  border-bottom: 1px solid var(--sds-color-border);
}
.pagehead .title { font-family: var(--sds-font-family-headline); font-size: var(--sds-type-headline-4-size); line-height: var(--sds-type-headline-4-line); font-weight: var(--sds-type-headline-4-weight); margin: 0; }
.pagehead .sub { color: var(--sds-color-text-muted); font-size: var(--sds-type-body-small-size); margin-top: var(--sds-space-100); }
.pagehead .sub b { color: var(--sds-color-text); font-variant-numeric: tabular-nums; }
.pagehead .actions { margin-left: auto; display: flex; align-items: center; gap: var(--sds-space-200); }
.pagehead .actions sds-search { width: 260px; }

/* ---- Workspace: facets | table ------------------------------------------ */
.work { display: grid; grid-template-columns: 248px 1fr; flex: 1; min-height: 0; }

.facets { border-right: 1px solid var(--sds-color-border); padding: var(--sds-space-400); overflow: auto; }
.facets .fhead { display: flex; align-items: center; margin-bottom: var(--sds-space-300); }
.facets .fhead b { font-size: var(--sds-type-body-regular-size); font-weight: var(--sds-font-weight-bold); }
.facets .fhead .clear { margin-left: auto; }
.facets sds-search { width: 100%; margin-bottom: var(--sds-space-300); display: block; }

/* facet rows inside accordion items */
.fnode { display: flex; align-items: center; gap: var(--sds-space-200); padding: var(--sds-space-100) var(--sds-space-100); border-radius: var(--sds-radius-m); }
.fnode:hover { background: var(--sds-color-surface-hover); }
.fnode sds-checkbox { flex: 1 1 auto; min-width: 0; }
.fnode .ct { margin-left: auto; flex: none; font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); font-variant-numeric: tabular-nums; }
.fnode.child { padding-left: var(--sds-space-500); }
.fnode.child2 { padding-left: var(--sds-space-700); }
.facets sds-accordion-item::part(panel) { padding-block: var(--sds-space-100); }

/* ---- Table area --------------------------------------------------------- */
.tablewrap { overflow: auto; display: flex; flex-direction: column; }
.toolbar {
  display: flex; align-items: center; gap: var(--sds-space-300);
  padding: var(--sds-space-300) var(--sds-space-500);
  border-bottom: 1px solid var(--sds-color-border);
}
.toolbar .selinfo { font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); }
.toolbar .density { margin-left: auto; }

.tablewrap sds-table { padding: 0 var(--sds-space-300); margin-top: var(--sds-space-300); }

/* Column sizing — sds-table cells are flex items (flex:1 1 0; min 7rem).
   Rebalance by column position so the Item column reads on one line and the
   numeric columns stay tight. Targets the host cells directly (light DOM). */
#inv sds-table-head > *, #inv sds-table-row > * { padding-inline: var(--sds-space-300); }
/* col 2 — Item */
#inv sds-table-head > :nth-child(2), #inv sds-table-row > :nth-child(2) { flex: 3 1 0; min-inline-size: 188px; }
/* col 3 — Class */
#inv sds-table-head > :nth-child(3), #inv sds-table-row > :nth-child(3) { flex: 1.3 1 0; min-inline-size: 104px; }
/* cols 4,5,6 — Ø Dia / Length / Flutes (numeric, tight) */
#inv sds-table-head > :nth-child(4), #inv sds-table-row > :nth-child(4),
#inv sds-table-head > :nth-child(5), #inv sds-table-row > :nth-child(5) { flex: 0 0 auto; min-inline-size: 86px; }
#inv sds-table-head > :nth-child(6), #inv sds-table-row > :nth-child(6) { flex: 0 0 auto; min-inline-size: 64px; }
/* col 7 — Stock */
#inv sds-table-head > :nth-child(7), #inv sds-table-row > :nth-child(7) { flex: 0 0 auto; min-inline-size: 104px; }
/* col 8 — Updated */
#inv sds-table-head > :nth-child(8), #inv sds-table-row > :nth-child(8) { flex: 0 0 auto; min-inline-size: 92px; }

/* ---- Footer ------------------------------------------------------------- */
.footer {
  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);
  font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted);
}
.footer .rpp b { color: var(--sds-color-text); }
.footer sds-pagination { margin-left: auto; }