/* Inventory on hand (#/inventory). Dense, scannable, no horizontal scroll on phones. */
.inv-page { --inv-ink: hsl(42 18% 90%); --inv-dim: hsl(42 8% 62%); --inv-line: hsl(42 14% 24%); --inv-card: hsl(40 10% 11%); --inv-gold: hsl(43 62% 56%); --inv-ok: hsl(150 34% 52%); --inv-warn: hsl(32 78% 58%); --inv-bad: hsl(6 62% 60%);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 1180px; min-width: 0; color: var(--inv-ink); }
.inv-head h1 { margin: 2px 0 4px; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.01em; }
.inv-head p { margin: 0; color: var(--inv-dim); }
.inv-status:empty { display: none; }
.inv-status { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--inv-line); font-size: .9rem; }
.inv-success { border-color: var(--inv-ok); } .inv-warning { border-color: var(--inv-warn); } .inv-danger { border-color: var(--inv-bad); }
.inv-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.inv-field { display: grid; gap: 4px; min-width: 0; }
.inv-field label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--inv-dim); }
.inv-field select, .inv-field input { width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; }
.inv-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--inv-line); background: var(--inv-card); }
.inv-banner h2 { margin: 0 0 2px; font-size: 1rem; } .inv-banner p { margin: 0; color: var(--inv-dim); font-size: .88rem; }
.inv-banner-mark { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--inv-dim); }
.inv-banner-fresh .inv-banner-mark { background: var(--inv-ok); }
.inv-banner-stale { border-color: var(--inv-warn); } .inv-banner-stale .inv-banner-mark { background: var(--inv-warn); }
.inv-bar-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .inv-bar-row p { flex: 1 1 220px; margin: 0; }
.inv-card { background: var(--inv-card); border: 1px solid var(--inv-line); border-radius: 12px; padding: 14px; min-width: 0; }
.inv-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: baseline; margin-bottom: 10px; }
.inv-card-head h2, .inv-panel h2 { margin: 0; font-size: 1.05rem; }
.inv-table-wrap { overflow-x: auto; max-width: 100%; }
.inv-table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.inv-table th, .inv-table td { padding: 7px 8px; border-bottom: 1px solid var(--inv-line); text-align: left; vertical-align: top; }
.inv-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--inv-dim); white-space: nowrap; }
.inv-num { text-align: right !important; }
.inv-sort { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; border-radius: 4px; }
.inv-sort:focus-visible, .inv-day:focus-visible, .inv-vel-sum:focus-visible { outline: 2px solid var(--inv-gold); outline-offset: 2px; }
.inv-arrow { font-size: .6rem; color: var(--inv-gold); min-width: .6rem; }
.inv-name { display: block; font-weight: 600; } .inv-ref { display: block; overflow-wrap: anywhere; }
.inv-rooms { overflow-wrap: anywhere; }
.inv-row-open > * { border-bottom-color: transparent; }
.inv-vel { display: grid; gap: 8px; }
.inv-days { display: flex; gap: 4px; flex-wrap: wrap; }
.inv-day { min-height: 32px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--inv-line); background: transparent; color: var(--inv-ink); cursor: pointer; font: inherit; font-size: .8rem; }
.inv-day-on { border-color: var(--inv-gold); color: var(--inv-gold); }
.inv-spark { width: 100%; max-width: 360px; height: 52px; display: block; }
.inv-spark-line { fill: none; stroke: var(--inv-gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.inv-dot { fill: var(--inv-gold); } .inv-dot-partial { fill: var(--inv-card); stroke: var(--inv-gold); stroke-width: 1; }
.inv-vel-sum { margin: 0; font-size: .85rem; color: var(--inv-dim); max-width: 64ch; }
.inv-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.inv-empty { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 28px 16px; color: var(--inv-dim); }
.inv-empty strong { color: var(--inv-ink); }
.inv-empty-mark { width: 28px; height: 28px; border-radius: 6px; border: 2px dashed var(--inv-line); }
.inv-sk { height: 64px; margin-bottom: 10px; border-radius: 10px; } .inv-sk-tall { height: 260px; } .inv-sk-spark { height: 52px; max-width: 360px; border-radius: 6px; }

/* Phone: rows become labelled stacks so nothing scrolls sideways. */
@media (max-width: 680px) {
  .inv-page .inv-table { min-width: 0; max-width: 100%; }
  .inv-table-wrap { overflow-x: visible; }
  .inv-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .inv-table, .inv-table tbody, .inv-table tr, .inv-table th, .inv-table td { display: block; width: 100%; box-sizing: border-box; }
  .inv-table tr.inv-row { padding: 10px 0; border-bottom: 1px solid var(--inv-line); }
  .inv-table tr.inv-row-open { border-bottom: 0; }
  .inv-table th, .inv-table td { border: 0; padding: 3px 0; }
  .inv-table td[data-label] { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; text-align: left !important; }
  .inv-table td[data-label]::before { content: attr(data-label); color: var(--inv-dim); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
  .inv-vel-row td { padding-bottom: 12px; border-bottom: 1px solid var(--inv-line); }
  .inv-controls { grid-template-columns: 1fr 1fr; }
}
.inv-hold { display: block; color: var(--warning); font-weight: 600; }