/* Retail-only pieces: scan bar, product tiles with stock, variant editor, camera scanner. */
.scanbar { display: flex; gap: 8px; padding: 12px 12px 0; padding-left: max(12px, env(safe-area-inset-left)); }
.scanbar input {
  flex: 1; min-width: 0; min-height: 52px; padding: 10px 14px; font: inherit; font-size: 17px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text);
}
.scanbar input:focus { outline: none; border-color: var(--accent); }
.item.product { justify-content: flex-start; gap: 4px; }
.item.product .item-price { margin-top: auto; }
.item-meta { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.stock { color: var(--muted); }
.stock.low { color: var(--warn); font-weight: 600; }
.stock.out { color: var(--bad); font-weight: 600; }
.list-row.dim .strong, .list-row.dim > span:last-child { color: var(--muted); }
.list-row.dim .muted { color: var(--bad); font-weight: 600; }
.list-row.static { cursor: default; grid-template-columns: 1fr auto; }
.list-row.static .stepper { grid-row: 1 / span 2; grid-column: 2; }
.scan-video { width: 100%; max-height: 55vh; border-radius: 12px; background: #000; object-fit: cover; }

.var-head, .var-row { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr .8fr .8fr .6fr .6fr 64px; gap: 6px; align-items: center; }
.var-head.lite, .var-row.lite { grid-template-columns: 1.6fr 1fr 1fr 64px; }
.var-head.bc, .var-row.bc { grid-template-columns: 1.4fr 1fr 1.3fr .9fr 64px; }
.var-head.inv, .var-row.inv { grid-template-columns: 1.4fr 1fr .8fr .8fr .6fr .6fr 64px; }
.var-head { font-size: 12px; color: var(--muted); margin: 8px 0 4px; }
.var-row { margin-bottom: 6px; }
.var-row input { min-width: 0; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-weight: 400; }
.var-row[data-off] input { opacity: .45; text-decoration: line-through; }
.var-stock { text-align: center; font-weight: 700; color: var(--text); }
/* A box and its name: on a wide screen only the box shows (the column heads name it). */
.var-cell { display: contents; }
.var-lbl { display: none; }
.tbl.static tbody tr { cursor: default; }
/* Inventory: one easy row per item, the count big and colored, what needs ordering first. */
.inv-tip { margin: 0 0 8px; }
.inv-recent { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 12px; }
.inv-recent summary { cursor: pointer; font-weight: 700; color: var(--muted); padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.inv-recent[open] summary { color: var(--text); margin-bottom: 8px; }
.inv-list { display: grid; gap: 8px; }
.inv-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-left: 6px solid var(--good);
  border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.inv-item:hover { background: var(--panel-2); }
.inv-item.inv-low { border-left-color: var(--warn); }
.inv-item.inv-out { border-left-color: var(--bad); }
.inv-main { display: grid; gap: 4px; flex: 1; min-width: 0; }
.inv-main strong { font-size: 17px; overflow-wrap: anywhere; }
.inv-main small { font-size: 13px; line-height: 1.4; }
.inv-bar { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.inv-bar span { display: block; height: 100%; border-radius: 3px; background: var(--good); }
.inv-low .inv-bar span { background: var(--warn); }
.inv-out .inv-bar span { background: var(--bad); }
.inv-count { display: grid; justify-items: end; gap: 2px; flex: none; min-width: 72px; }
.inv-n { font-size: 30px; font-weight: 800; line-height: 1; }
.inv-tag { font-size: 12px; font-weight: 700; color: var(--good); white-space: nowrap; }
.inv-low .inv-n, .inv-low .inv-tag { color: var(--warn); }
.inv-out .inv-n, .inv-out .inv-tag { color: var(--bad); }
.page-head input[type=search] { width: 260px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; }

@media (max-width: 760px) {
  /* Variants stack into cards on phones. */
  .var-head { display: none; }
  .var-row, .var-row.lite, .var-row.bc, .var-row.inv { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; align-items: start; }
  .var-cell { display: grid; gap: 4px; min-width: 0; }
  .var-cell.var-wide, .var-row [data-del] { grid-column: 1 / -1; }
  .var-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
  small.var-lbl { font-size: 12px; font-weight: 400; }
  .var-row input { width: 100%; font-size: 17px; }
  .var-stock { text-align: left; font-size: 20px; min-height: 44px; display: flex; align-items: center; }
  .page-head input[type=search] { width: 100%; }
}
@media (max-height: 520px) and (min-width: 600px) {
  .scanbar { padding-top: 6px; }
  .scanbar input { min-height: 42px; font-size: 15px; }
}
.var-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* The camera as a scanner: a clear button beside the search box; on phones it stands out, since the camera is the scanner there. */
.scanbar .scan-cam { display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 14px; flex: none; }
@media (max-width: 760px) {
  .scanbar .scan-cam { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
}
@media (max-height: 520px) and (min-width: 600px) {
  .scanbar .scan-cam { min-height: 42px; }
}

/* A big catalog: Show more under the first 200 products. */
.grid-more { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 12px 0 20px; text-align: center; }
.grid-more p { margin: 0; }

/* Inventory → Reorder list: by vendor, an amount to order on each row. */
.ro-list { display: grid; gap: 14px; margin: 10px 0; }
.ro-vendor { margin: 0 0 6px; font-size: 15px; }
.ro-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-left: 5px solid var(--warn); border-radius: 10px; background: var(--panel); margin-bottom: 6px; }
.ro-row.ro-out { border-left-color: var(--bad); }
.ro-name { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ro-name strong { overflow-wrap: anywhere; }
.ro-row input { flex: none; width: 76px; min-height: 44px; padding: 6px 8px; font: inherit; font-size: 17px; font-weight: 700; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); }
.ro-actions { flex-wrap: wrap; }

/* Price labels, printed the normal way: one label a page (a label printer gives each its own
   label; a receipt printer prints them one under another). */
#print-area .lb { width: 58mm; padding: 2mm 0; margin: 0 auto; text-align: center; color: #000; background: #fff;
  font: 12px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; break-after: page; break-inside: avoid; }
#print-area .lb:last-child { break-after: auto; }
#print-area .lb-name { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
#print-area .lb-opt { font-size: 12px; }
#print-area .lb-price { margin: 2px 0; font-size: 20px; font-weight: 800; }
#print-area .lb-bars { display: block; max-width: 100%; height: 14mm; margin: 2px auto 0; }
#print-area .lb-code { font: 11px/1.2 var(--mono, monospace); letter-spacing: .08em; }
#print-area.paper-58 .lb { width: 46mm; }

/* The labels preview before printing (the same labels, on screen). */
.lb-preview { display: flex; flex-wrap: wrap; gap: 10px; max-height: min(55vh, 520px); overflow-y: auto; padding: 10px; margin: 10px 0; border-radius: 12px; background: var(--panel-2); }
.lb-preview .lb-sheet { display: contents; }
.lb-preview .lb { width: 200px; padding: 10px; text-align: center; color: #000; background: #fff; border-radius: 8px; font: 12px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.lb-preview .lb-name { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.lb-preview .lb-price { margin: 2px 0; font-size: 20px; font-weight: 800; }
.lb-preview .lb-bars { display: block; max-width: 100%; height: 48px; margin: 2px auto 0; }
.lb-preview .lb-code { font: 11px/1.2 var(--mono, monospace); letter-spacing: .08em; }

/* ---------------------------------------------------------------------------
   The new look (0.26.0): the search bar over the items, Inventory, the reorder list and options.
   Here (not store.css) so the retail-only register gets it as well as the store register.
   --------------------------------------------------------------------------- */
.scanbar input { border-width: 1px; border-radius: 14px; background: color-mix(in srgb, var(--text) 3%, var(--panel)); }
.scanbar input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.scanbar .scan-cam { border-radius: 14px; }
.page-head input[type=search] { min-height: 44px; border-radius: 12px; }
.page-head input[type=search]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }

/* Inventory: one card per item, a bar on the left in its stock color, the count on the right. */
.inv-list { gap: 8px; }
.inv-item, .inv-item.inv-low, .inv-item.inv-out { position: relative; padding: 12px 16px 12px 26px; border-left: 1px solid var(--line); border-radius: 16px; transition: border-color .15s, background-color .15s; }
.inv-item::before { content: ""; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--good); }
.inv-item.inv-low::before { background: var(--warn); }
.inv-item.inv-out::before { background: var(--bad); }
.inv-item:hover { background: var(--panel); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.inv-main strong { font-size: 16px; font-weight: 700; }
.inv-main small { color: var(--muted); }
.inv-n { font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.inv-tag { padding: 1px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); background: color-mix(in srgb, currentColor 8%, transparent); }
.ro-row, .ro-row.ro-out { position: relative; padding-left: 24px; border-left: 1px solid var(--line); border-radius: 14px; }
.ro-row::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--warn); }
.ro-row.ro-out::before { background: var(--bad); }
.ro-row input { border-radius: 10px; }
.var-row input { border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .inv-item { transition: none; } }