/* COMMERCE — inventory, customers, sales, quick sale, receipts. Values come from tokens.css only. */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.toolbar .search { flex: 1; min-width: var(--width-sm); }
.toolbar .select { flex: none; min-width: var(--width-sm); }
.toolbar input[type=date] { flex: none; width: var(--width-date); }
.linkbtn { border: 0; background: none; color: var(--color-primary); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; padding: var(--space-xs) var(--space-sm); }
.linkbtn:hover { text-decoration: underline; }
.sheet.wide { width: min(var(--sheet-w-wide), 100%); }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--color-wash-faint); }
.chip.gray { background: var(--color-neutral-soft); color: var(--color-text-muted); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-lg); }
.stat-grid .card + .card { margin-top: var(--space-0); }
@media (max-width: 980px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sell { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-lg); align-items: start; }
.sell .card + .card { margin-top: var(--space-lg); }
@media (max-width: 820px) { .sell { grid-template-columns: 1fr; } }
.scan { font-size: var(--text-lg); height: var(--control-h-xl); }
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) var(--width-xs) var(--col-pct-w) var(--control-h-md); gap: var(--space-sm); align-items: center; padding: var(--space-md) var(--space-0); border-bottom: var(--border-default); }
.cart-line:last-child { border-bottom: 0; }
.cart-line .price, .cart-line .pct { text-align: right; }
.stock-bulk { margin-top: var(--space-md); }
.sum-line, .line-sub { display: flex; justify-content: space-between; align-items: baseline; color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-xs) var(--space-0); }
.strike { text-decoration: line-through; }
.total-line { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: var(--space-lg) var(--space-0); }
.pick-list { list-style: none; margin: var(--space-xs) var(--space-0) var(--space-0); padding: var(--space-xs); background: var(--color-surface); border: var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); max-height: var(--pick-list-max-h); overflow: auto; }
.pick-list li { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); cursor: pointer; }
.pick-list li:hover, .pick-list li:focus { background: var(--color-primary-soft); outline: none; }
.picked { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary-text); }
.receipt { max-width: var(--width-receipt); margin: var(--space-0) auto; }
.receipt h2, .receipt .sub { text-align: center; }
.receipt table { margin: var(--space-lg) var(--space-0); }
.receipt .line-total { display: flex; justify-content: space-between; font-weight: var(--weight-semibold); font-size: var(--text-lg); border-top: var(--border-strong); padding-top: var(--space-md); }
.test-record { margin-top: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--color-wash-faint); border: var(--border-default); }
.check-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, var(--col-check-w)) var(--control-h-md); gap: var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-0); border-bottom: var(--border-default); }
.check-row:last-child { border-bottom: 0; }
.check-head { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--weight-medium); }
.check-row .check, .check-row .icon-btn { justify-self: center; justify-content: center; }
.check-head span:not(:first-child) { text-align: center; }
.check-row, .step-row { max-width: var(--config-w); }
.war-row input[type=text] { height: var(--control-h-md); }
.war-row .chip { justify-content: center; }
.war-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--chip-type-w) var(--col-war-w) var(--col-war-w) var(--control-h-md); gap: var(--space-sm); align-items: center; padding: var(--space-xs) var(--space-0); max-width: var(--config-w); }
.icon-slot { width: var(--control-h-md); }
.check-row input[type=text], .step-row input[type=text] { height: var(--control-h-md); }
.check-row .row { gap: var(--space-sm); }
.check-row .chip, .check-row .type-btn { flex: none; width: var(--chip-type-w); justify-content: center; }
.step-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--col-req-w) var(--control-h-md); gap: var(--space-sm); align-items: center; padding: var(--space-xs) var(--space-0); }
.tests { margin-top: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); background: var(--color-wash-faint); border: var(--border-default); }
.tests .check { padding: var(--space-3xs) var(--space-0); }
.recovery-key { font-family: var(--font-mono); font-size: var(--text-lg); line-height: var(--leading-code); text-align: center; word-break: break-all; user-select: all; background: var(--color-code-bg); border: var(--border-strong); border-radius: var(--radius-md); padding: var(--space-lg); margin: var(--space-lg) var(--space-0); }
.recovery-key b { display: inline-block; width: 4.5ch; font-weight: var(--weight-semibold); }
.steps { margin: var(--space-md) var(--space-0); padding-left: var(--space-2xl); color: var(--color-text-muted); }
.steps li { margin-bottom: var(--space-xs); }
@media print {
  html.printing .topbar, html.printing .side, html.printing #root, html.printing .toasts, html.printing .version-badge { display: none; }
  html.printing .scrim { position: static; background: none; backdrop-filter: none; display: block; padding: var(--space-0); }
  html.printing .sheet { box-shadow: none; max-height: none; width: 100%; overflow: visible; padding: var(--space-0); }
  html.printing .sheet .actions, html.printing .no-print { display: none; }
  html.printing body { background: var(--color-surface); }
}

/* ---- stock picker (Quick sale) ---- */
.stock-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.filter { border: var(--border-default); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); cursor: pointer; }
.filter:hover { background: var(--color-primary-soft); }
.filter.on { background: var(--color-primary-soft); color: var(--color-primary-text); border-color: var(--color-primary); }
.stock-list { max-height: var(--stock-list-max-h); overflow: auto; border: var(--border-default); border-radius: var(--radius-md); }
.stock-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-md); align-items: center; padding: var(--space-sm) var(--space-md); border-bottom: var(--border-default); cursor: pointer; }
.stock-row:last-child { border-bottom: 0; }
.stock-row:hover { background: var(--color-primary-soft); }
.stock-row input { width: auto; margin: var(--space-0); }
.stock-tags { display: flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: flex-end; }
.stock-price { min-width: var(--stock-price-w); text-align: right; }
.stock-main { min-width: var(--space-0); }

.receipt-logo { display: block; width: var(--logo-receipt); height: var(--logo-receipt); margin: var(--space-0) auto var(--space-sm); object-fit: contain; }