/* ============================================================================
   inventory.css — tweaks specific to the Inventory module ONLY.
   No fonts/colors/global styles here (core.css owns all tokens).
   Everything leans on documented .card/.kpi/.table/.list/etc classes;
   this file only adds the catalogue table polish, donut legend, location
   legend, the inline-spark table cell and PO-list accents.
   All classes are prefixed .inventory-* and use ONLY palette tokens.
   ========================================================================== */

/* keep KPI sparks hugging the bottom, like the Command Deck vitals */
.inventory-kpi .spark{margin-top:10px}

/* low-stock alert stack: tighten internal gaps */
.inventory-alert-stack{display:flex;flex-direction:column;gap:10px}
.inventory-alerts .attn .tag{flex:none}

/* ── products table ──────────────────────────────────────────────────────── */
/* horizontal scroll guard so the dense table never overflows on narrow decks */
.inventory-table-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px}
.inventory-table{min-width:560px}
.inventory-table tbody tr{cursor:pointer}
.inventory-table tbody td{padding:9px 12px}

/* the inline 30-day movement spark lives in its own slim cell */
.inventory-cell-spark{width:96px;min-width:96px}
.inventory-cell-spark .spark{width:88px;height:26px;opacity:.85;transition:opacity .15s var(--ease)}
.inventory-table tbody tr:hover .inventory-cell-spark .spark{opacity:1}

/* category tag chips inherit per-category colour via inline style (color only);
   the border is derived from that colour so var() tokens stay valid */
.inventory-table .tag{background:var(--panel)}
.inventory-cat-tag{border-color:color-mix(in srgb, currentColor 34%, transparent)}

/* ── donut card + legend ─────────────────────────────────────────────────── */
.inventory-donut-card .chart{display:grid;place-items:center}
.inventory-legend{display:flex;flex-direction:column;gap:8px}
.inventory-leg-row{display:grid;grid-template-columns:12px 1fr auto auto;align-items:center;gap:9px}
.inventory-leg-dot{width:10px;height:10px;border-radius:3px;flex:none;box-shadow:0 0 8px currentColor}
.inventory-leg-name{font-size:12px;color:var(--text-muted)}
.inventory-leg-val{font-size:12px;font-weight:600;color:var(--text);letter-spacing:.3px}
.inventory-leg-pct{font-size:11px;min-width:32px;text-align:right}

/* ── stock-health gauge card ─────────────────────────────────────────────── */
.inventory-donut-card,.inventory-health-card{display:flex;flex-direction:column}
.inventory-gauge{display:grid;place-items:center}
.inventory-health-stats{margin-top:10px}
.inventory-health-stats .stat-row{padding:7px 0}
.inventory-health-stats .sr-label{display:inline-flex;align-items:center;gap:8px}
.inventory-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--text-muted);box-shadow:0 0 6px currentColor}
.inventory-dot.ok{background:var(--success);color:var(--success)}
.inventory-dot.warn{background:var(--warn);color:var(--warn)}
.inventory-dot.info{background:var(--accent2);color:var(--accent2)}
.inventory-dot.bad{background:var(--danger);color:var(--danger)}

/* ── location card legend ────────────────────────────────────────────────── */
.inventory-loc-legend{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
@media (max-width:560px){.inventory-loc-legend{grid-template-columns:1fr}}

/* ── inbound purchase orders ─────────────────────────────────────────────── */
.inventory-po-item{cursor:pointer;border-radius:9px;transition:background .14s var(--ease)}
.inventory-po-item:hover{background:var(--panel)}
.inventory-eta-soon{color:var(--accent1);font-weight:600}