/* Request 221/224 (catalog lane): styles for the #/catalog screen (apps/api/preview/catalog.js). Uses existing tokens
   where present (card, f-panel, table-wrap, responsive money, notice, amount) and adds only cat-* layout classes.
   Desktop (>= 900px): compact table rows beside a sticky detail/selection column. Mobile: stacked cards. */
.cat-screen { display: grid; gap: .75rem; }
.cat-head h1 { margin: 0; font-size: 1.4rem; }

/* context strip: customer · vehicle · visit · store · estimate revision */
.cat-context { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .5rem .75rem; border: 1px solid #d9dde3; border-radius: .5rem; background: #f7f8fa; font-size: .9rem; }
.cat-ctx-item { white-space: nowrap; }
.cat-ctx-key { color: #555555; }
.cat-ctx-missing strong { color: #7a1f1f; }
.cat-ctx-back { margin-left: auto; white-space: nowrap; }

/* filters */
.cat-filters { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end; }
.cat-filters input[type="search"] { flex: 1 1 16rem; min-width: 12rem; }
.cat-filter { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; }
.cat-filter-label { color: #555555; }

/* layout */
.cat-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
.cat-side { display: grid; gap: 1rem; }
.cat-count { margin: 0 0 .25rem; }

/* availability pills */
.cat-avail { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .85rem; white-space: nowrap; }
.cat-in_stock { background: #e3f4e8; color: #17572c; }
.cat-low, .cat-partial { background: #fff4d6; color: #6b4b00; }
.cat-order { background: #e6eefc; color: #1f3f7a; }
.cat-short, .cat-unavailable, .cat-discontinued { background: #fbe4e4; color: #7a1f1f; }
.cat-service { background: #eeeeee; color: #333333; }
.cat-listed { color: #6b4b00; }

/* mobile: each result row is a card */
.cat-table thead { display: none; }
.cat-table, .cat-table tbody { display: block; }
.cat-table tr.cat-row { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; padding: .6rem .75rem; margin-bottom: .5rem; border: 1px solid #d9dde3; border-radius: .5rem; }
.cat-table tr.cat-row td { display: block; padding: 0; border: 0; }
.cat-table tr.cat-row td::before { content: none; }
.cat-table .cat-c-item, .cat-table .cat-c-spec { grid-column: 1 / -1; }
.cat-table .cat-c-price, .cat-table .cat-c-act { text-align: right; }
.cat-row.open { background: color-mix(in srgb, currentColor 6%, transparent); }

/* desktop: compact readable table */
@media (min-width: 900px) {
  .cat-layout { grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr); }
  .cat-side { position: sticky; top: .5rem; max-height: calc(100vh - 1rem); overflow: auto; }
  .cat-table { display: table; width: 100%; border-collapse: collapse; font-size: .92rem; }
  .cat-table thead { display: table-header-group; }
  .cat-table tbody { display: table-row-group; }
  .cat-table th { text-align: left; font-weight: 600; color: #555555; padding: .35rem .5rem; border-bottom: 2px solid #d9dde3; white-space: nowrap; }
  .cat-table tr.cat-row { display: table-row; border: 0; border-radius: 0; margin: 0; padding: 0; }
  .cat-table tr.cat-row td { display: table-cell; padding: .4rem .5rem; border-bottom: 1px solid #eceef1; vertical-align: top; }
  .cat-table tr.cat-row:hover { background: #f7f8fa; }
  .cat-table .cat-c-item { min-width: 12rem; }
  .cat-table .cat-c-price { white-space: nowrap; }
  .cat-table .cat-c-act { white-space: nowrap; width: 1%; }
}

/* detail and selection */
.cat-detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.cat-detail-head h2 { font-size: 1.1rem; margin: 0; }
.asa-assist-slot:empty { display: none; }
.cat-specs { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; margin: .5rem 0; }
.cat-kv { display: contents; }
.cat-kv dt { color: #555555; }
.cat-kv dd { margin: 0; }
.cat-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.cat-qty { width: 5rem; }
.cat-total { text-align: right; }
.cat-stages { margin: .5rem 0 0; }
.small { font-size: .85rem; }