/* The inventory pages (stage 2, S2-3): the index table, the item page's Adjust composer and ledger.
   Components (.table, dl.meta, details.composer, .badge, .toolbar, .chip) come from components.css;
   only page rules live here. The column drops follow pages/files.css's two breakpoints, so the
   phone sweep (test/system/shell_test.rb) holds at 375px without a sideways scroll. */
@layer pages {

  .inventory-table .col-name a { color: var(--fg); font-weight: 500; }
  .inventory-table .col-part { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
  .inventory-table .col-category, .inventory-table .col-location, .inventory-table .col-supplier { color: var(--fg-muted); }
  .inventory-table .badge.low-stock { margin-left: 6px; }
  .inventory-table tr.low-stock .col-onhand { color: var(--warn); }
  @media (max-width: 719px) { .inventory-table .col-supplier, .inventory-table .col-min { display: none; } }
  @media (max-width: 479px) { .inventory-table .col-category, .inventory-table .col-location { display: none; } }

  /* Only the push-right is Inventory's own; the type comes from the component. */
  .inventory-toolbar .toolbar-count { margin-left: auto; }

  /* The Adjust composer: one row of fields at desktop, a stack on the phone. */
  .adjust-fields { display: grid; grid-template-columns: 110px 150px minmax(120px, 1fr) minmax(160px, 2fr) auto; gap: 8px; align-items: end; }
  .adjust-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--fg-muted); }
  /* `minmax(0, 1fr)`, NOT `1fr`, AND FIELDS THAT FILL THEIR CELL: a bare `1fr` column cannot shrink
     below its content's min-content, and a <select>'s min-content is its longest option at the
     font's own metrics — which differ between macOS and the Linux CI runners. At the redesign's
     14px the reason select pushed /inventory/:id to scrollWidth 382 at 375px on Linux while
     measuring 362 on a Mac (2026-10-08). Column width now comes from the grid, never from text. */
  .adjust-fields input, .adjust-fields select { width: 100%; min-width: 0; }
  @media (max-width: 719px) { .adjust-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .adjust-fields .adjust-submit { grid-column: 1 / -1; } }

  .ledger .delta-in { color: var(--ok); }
  .ledger .delta-out { color: var(--danger); }
  .ledger .col-when { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
  @media (max-width: 719px) { .ledger .col-note, .ledger .col-project { display: none; } }
  .item-notes { max-width: 72ch; }
}