/* Printable QR label sheet + the scan highlight. */

.qrLabelsBackdrop{
  position:fixed; inset:0; z-index:10050;
  display:grid; place-items:center; padding:18px;
  background:color-mix(in srgb, #05070d 62%, transparent);
  backdrop-filter:blur(3px);
}
.qrLabelsDialog{
  display:flex; flex-direction:column;
  width:min(920px, 100%); max-height:calc(100vh - 36px);
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius:18px; overflow:hidden;
  background:var(--surface-main, var(--panel)); color:var(--text);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.qrLabelsHead{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
.qrLabelsHead span{ color:var(--accent2, var(--accent)); font-size:.62rem; font-weight:900; letter-spacing:.12em; }
.qrLabelsHead h2{ margin:2px 0 2px; font-size:1.15rem; }
.qrLabelsHead p{ margin:0; color:var(--muted); font-size:.78rem; max-width:60ch; }
.qrLabelsClose{ margin-left:auto; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:var(--surface-input, var(--panel)); color:var(--text); font-size:1.3rem; cursor:pointer; }
.qrLabelsToolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.qrLabelsAll{ display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; }
.qrLabelsToolbarBtns{ display:flex; gap:8px; }

.qrLabelSheet{
  overflow:auto; padding:16px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px;
  background:color-mix(in srgb, var(--line) 22%, var(--surface-main, var(--panel)));
}
.qrLabel{
  display:grid; grid-template-columns:auto 1fr; gap:10px;
  align-items:center; position:relative;
  padding:12px; border:1px solid #dfe4ee; border-radius:12px;
  background:#ffffff; color:#0f172a; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.qrLabel.off{ opacity:.4; }
.qrLabel > input[type="checkbox"]{ position:absolute; top:8px; right:8px; }
.qrLabelCode{ width:104px; height:104px; display:block; flex:0 0 auto; }
/* crispEdges keeps the module boundaries hard when printed. Anti-aliased edges
   blur adjacent modules into grey, which a phone camera reads as noise -- a big
   reason a code that "looks clear" to the eye still won't scan off paper. */
.qrLabelCode svg{ width:100%; height:100%; display:block; shape-rendering:crispEdges; image-rendering:pixelated; }
.qrLabelBody{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.qrLabelTop{ display:flex; align-items:center; gap:8px; min-width:0; }
.qrLabelSwatch{ width:20px; height:20px; flex:0 0 auto; border-radius:6px; background:var(--c,#94a3b8); box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), 0 0 0 1px rgba(15,23,42,.12); }
.qrLabelTop strong{ font-size:.9rem; line-height:1.2; word-break:break-word; }
.qrLabelMeta{ display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; }
.qrLabelMeta span{ font-size:.72rem; color:#475569; }
.qrLabelType{ padding:1px 7px; border-radius:999px; background:#eef2f7; font-weight:700; }
.qrLabelPrice{ font-weight:800 !important; color:#0f172a !important; }
.qrLabelWeight{ font-weight:600; }

/* -------- scan result card -------- */
.qrScanBackdrop{
  position:fixed; inset:0; z-index:10060;
  display:grid; place-items:center; padding:18px;
  background:color-mix(in srgb, #05070d 60%, transparent); backdrop-filter:blur(3px);
}
.qrScanCard{
  position:relative; width:min(440px, 100%);
  border:1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius:20px; overflow:hidden;
  background:var(--surface-main, var(--panel)); color:var(--text);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.qrScanClose{ position:absolute; top:12px; right:12px; z-index:2; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; background:var(--surface-input,var(--panel)); color:var(--text); font-size:1.2rem; cursor:pointer; }
.qrScanHead{
  display:flex; align-items:center; gap:14px; padding:20px 18px;
  /* reserve room on the right so the status badge clears the close button */
  padding-right:70px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface-raised, var(--panel))), var(--surface-raised, var(--panel)));
  border-bottom:1px solid var(--line);
}
.qrScanSwatch{ width:52px; height:52px; flex:0 0 auto; border-radius:14px; background:var(--c,#94a3b8); box-shadow:inset 0 0 0 3px rgba(255,255,255,.35), 0 6px 16px color-mix(in srgb, var(--c,#94a3b8) 45%, transparent); }
.qrScanTitle{ min-width:0; }
.qrScanTitle span{ color:var(--accent2, var(--accent)); font-size:.6rem; font-weight:900; letter-spacing:.14em; }
.qrScanTitle h2{ margin:2px 0 1px; font-size:1.2rem; line-height:1.15; word-break:break-word; }
.qrScanTitle p{ margin:0; color:var(--muted); font-size:.78rem; }
.qrScanBadge{ margin-left:auto; align-self:flex-start; padding:4px 10px; border-radius:999px; font-size:.66rem; font-weight:800; white-space:nowrap; border:1px solid var(--line); }
.qrScanBadge.ok{ color:var(--good,#16a34a); border-color:color-mix(in srgb, var(--good,#16a34a) 45%, var(--line)); background:color-mix(in srgb, var(--good,#16a34a) 12%, transparent); }
.qrScanBadge.low{ color:var(--warn,#d97706); border-color:color-mix(in srgb, var(--warn,#d97706) 45%, var(--line)); background:color-mix(in srgb, var(--warn,#d97706) 12%, transparent); }
.qrScanBadge.out{ color:var(--bad,#dc2626); border-color:color-mix(in srgb, var(--bad,#dc2626) 45%, var(--line)); background:color-mix(in srgb, var(--bad,#dc2626) 12%, transparent); }
.qrScanStats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; padding:1px; background:var(--line); }
.qrScanStat{ display:flex; flex-direction:column; gap:2px; padding:12px 16px; background:var(--surface-main, var(--panel)); }
.qrScanStat span{ color:var(--muted); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.qrScanStat strong{ font-size:1rem; }
.qrScanActions{ display:flex; flex-wrap:wrap; gap:8px; padding:16px 18px; }
.qrScanActions .btn{ flex:1 1 auto; }

/* Add-spool(s) quantity control (inventory scan card) */
.qrScanQty{ padding:16px 18px; }
.qrScanQty > label{ display:block; margin-bottom:8px; color:var(--muted); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.qrScanQtyRow{ display:flex; align-items:stretch; gap:10px; }
/* The app's themed number stepper (the ⌃⌄ control) wraps the input; keep it a
   fixed size next to the count and let the Add button take the rest. */
.qrScanQtyRow .numberStepper{ flex:0 0 auto; width:124px; }
.qrScanQtyRow > input[data-scan-qty]{ flex:0 0 124px; } /* fallback before the stepper wraps it */
.qrScanQtyRow input[data-scan-qty]{ width:100%; text-align:center; font-size:1.1rem; font-weight:800; border:1px solid var(--line); border-radius:10px; background:var(--surface-input, var(--panel)); color:var(--text); padding:9px 8px; }
.qrScanAdd{ flex:1 1 auto; }
.qrScanQty + .qrScanActions{ padding-top:0; }

/* Scan highlight on the located row */
.qrScanTarget{ animation:qrScanPulse 1.6s ease-in-out 2; }
@keyframes qrScanPulse{
  0%,100%{ box-shadow:inset 0 0 0 0 transparent; }
  50%{ box-shadow:inset 0 0 0 9999px color-mix(in srgb, var(--accent) 16%, transparent); }
}

/* Print: show only the label sheet, as a clean grid of cards. */
@media print{
  body.qrPrinting > *:not(.qrLabelsBackdrop){ display:none !important; }
  body.qrPrinting .qrLabelsBackdrop{ position:static; inset:auto; padding:0; background:none; backdrop-filter:none; display:block; }
  body.qrPrinting .qrLabelsDialog{ width:auto; max-height:none; border:0; border-radius:0; box-shadow:none; background:#fff; }
  body.qrPrinting .qrLabelsHead, body.qrPrinting .qrLabelsToolbar{ display:none !important; }
  body.qrPrinting .qrLabelSheet{ overflow:visible; padding:0; background:#fff; grid-template-columns:repeat(3, 1fr); gap:8px; }
  body.qrPrinting .qrLabel{ break-inside:avoid; box-shadow:none; border-color:#cbd5e1; }
  /* Print the symbol at a fixed physical size instead of the ~27 mm the 104px
     screen size works out to. Bigger modules are the single biggest print-side
     win for scan SPEED: a phone camera locks focus and resolves the pattern far
     faster on larger modules. 32 mm clears the common print minimums and, by the
     10:1 rule, reads reliably out to ~32 cm — well beyond a handheld phone scan.
     The 4-module quiet zone and pure-black-on-white are already in the SVG. */
  /* 38mm gives ~1mm per module at this symbol's density (29x29 + quiet zone) --
     comfortably above what a phone camera resolves off matte paper, where 32mm
     (~0.86mm) was borderline. The URL can't shrink (the domain dominates it), so
     larger modules is the lever that's left. */
  body.qrPrinting .qrLabelCode{ width:38mm; height:38mm; }
  body.qrPrinting .qrLabel > input[type="checkbox"]{ display:none; }
  body.qrPrinting .qrLabel.qrHidePrint{ display:none !important; }
  body.qrPrinting .qrLabel.off{ opacity:1; }
}

@media (max-width:620px){
  .qrLabelSheet{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
  .qrLabelCode{ width:88px; height:88px; }
}