/* #/labels — QR sticker sheets (see app/views/labels.js). Screen = picker UI;
   print = ONLY the label sheet, sized for 1.5" square stock (Avery 22805:
   4 × 6 per letter page). */

.v9-labels { display: grid; gap: var(--v9-space-4); max-width: 46rem; margin: 0 auto; padding: var(--v9-space-5) var(--v9-space-4) var(--v9-space-8); }

.v9-labels-head { display: flex; align-items: end; justify-content: space-between; gap: var(--v9-space-3); flex-wrap: wrap; }
.v9-labels-title { font: 700 var(--v9-text-xl) var(--v9-font-display); letter-spacing: 0.01em; }
.v9-labels-head-actions { display: flex; align-items: center; gap: var(--v9-space-3); }
.v9-labels-count { color: var(--v9-text-faint); font-size: var(--v9-text-xs); }

.v9-labels-controls { display: flex; align-items: center; gap: var(--v9-space-2); flex-wrap: wrap; }
.v9-labels-search { flex: 1 1 14rem; min-width: 0; }
.v9-labels-chiprow { display: inline-flex; gap: 6px; }
.v9-labels-chip {
  border: 1px solid var(--v9-line); background: transparent; color: var(--v9-text-dim);
  font: 600 var(--v9-text-xs) var(--v9-font-ui); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 10px; min-height: 2rem; cursor: pointer;
}
.v9-labels-chip[aria-pressed="true"] { color: var(--v9-text); border-color: var(--v9-accent); }

.v9-labels-list { display: grid; border-top: 1px solid var(--v9-line); }
.v9-labels-row {
  display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--v9-space-3);
  padding: 10px 2px; border-bottom: 1px solid var(--v9-line); cursor: pointer;
}
.v9-labels-row.is-on { background: color-mix(in srgb, var(--v9-accent) 6%, transparent); }
.v9-labels-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v9-labels-row-meta { color: var(--v9-text-dim); font-size: var(--v9-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v9-labels-row-price { color: var(--v9-accent); font-size: var(--v9-text-sm); }
.v9-labels-row-code { color: var(--v9-text-faint); font-size: var(--v9-text-xs); }
.v9-labels-empty { color: var(--v9-text-faint); padding: var(--v9-space-5) 0; }

@media (max-width: 560px) {
  .v9-labels-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .v9-labels-row-meta, .v9-labels-row-code { display: none; }
}

/* ---- the printable sheet ---- */
.v9-label-sheet { display: none; }

@media print {
  body.is-printing-labels * { visibility: hidden; }
  body.is-printing-labels .v9-label-sheet,
  body.is-printing-labels .v9-label-sheet * { visibility: visible; }
  body.is-printing-labels .v9-label-sheet {
    display: grid !important;
    position: absolute; inset: 0 auto auto 0;
    /* Sheet geometry unchanged (Avery 22805-ish): the 0.5in that used to be
       the @page margin is padding now, so the printable grid lands in the
       same spot. */
    width: 8.5in;
    padding: 0.5in;
    box-sizing: border-box;
    grid-template-columns: repeat(4, 1.5in);
    grid-auto-rows: 1.5in;
    column-gap: 0.5in;
    row-gap: 0.09in;
    background: #fff;
  }
  /* Zero page margin: browsers print their date/URL header+footer INSIDE the
     page margin — no margin, no stamp on the stickers. */
  @page { margin: 0; }
  .v9-label {
    width: 1.5in; height: 1.5in; overflow: hidden;
    display: grid; justify-items: center; align-content: center; gap: 0.04in;
    break-inside: avoid; page-break-inside: avoid;
    color: #000; text-align: center;
  }
  /* Minimal label: QR + code only (Donovan 2026-08-01) — QR grows to fill. */
  .v9-label-qr, .v9-label-qr svg { width: 1.05in; height: 1.05in; display: block; }
  .v9-label-code { font: 500 7pt 'JetBrains Mono', monospace; letter-spacing: 0.04em; }

  /* ---- roll mode: FLUID label, one per page ------------------------------
     Hard-coded inch sizes fought the printer driver: the app asked for a
     1.5in x 1in page while the driver was set to its own label size, and the
     browser reconciled the mismatch differently every time — same button,
     different output, and both wrong (Donovan, 2026-08-18). So roll mode no
     longer dictates a page size (label-print.js stopped injecting one) and
     the label simply FILLS whatever page the driver feeds: QR centered, code
     underneath, sized in page units so it works on portrait or landscape
     stock. Nothing to scale, nothing to disagree about. */
  body.is-printing-labels .v9-label-sheet.is-roll15x1 {
    display: block !important;
    width: 100%;
    padding: 0;
  }
  .v9-label-sheet.is-roll15x1 .v9-label {
    width: 100%; height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1.5vh;
    padding: 2vh 2vw;
    box-sizing: border-box;
    page-break-after: always;
    break-after: page;
  }
  .v9-label-sheet.is-roll15x1 .v9-label:last-child { page-break-after: auto; break-after: auto; }
  /* Largest square that leaves room for the code line, on either orientation. */
  .v9-label-sheet.is-roll15x1 .v9-label-qr,
  .v9-label-sheet.is-roll15x1 .v9-label-qr svg {
    width: min(88vw, 76vh); height: min(88vw, 76vh);
  }
  .v9-label-sheet.is-roll15x1 .v9-label-code {
    writing-mode: horizontal-tb;
    font-size: min(5.6vw, 4.8vh);
    letter-spacing: 0.04em; line-height: 1;
  }
}