/* labels - styles owned by mod/admin/labels.js (the Admin "Machine labels" section).

   Two halves: the controls (theme tokens, both themes) and the labels
   themselves, which are ALWAYS black on white in physical inches - they are
   what comes out of the printer, so no theme, no colour, no relative units. */

/* ---- controls ---- */
.lbl-section .segs{margin-top:6px;}
.lbl-srcin{margin-top:8px;}
.lbl-srcin .lbl-list{min-height:72px; font-family:var(--mono); font-size:13px;}
.lbl-srcin .lbl-one{max-width:320px;}
.lbl-srcin .lbl-dept{max-width:420px;}
.lbl-stock{margin-top:8px;}
.lbl-base{font-size:13.5px;}
.lbl-basenote{margin-top:8px; word-break:break-all;}
.lbl-skiprow{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13.5px; color:var(--muted);}
.lbl-skiprow input{width:70px; margin:0; padding:6px 8px; font-family:var(--mono); text-align:center;}
.lbl-actions{display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap;}
.lbl-actions .lbl-print{width:auto; min-width:140px;}
.lbl-actions .lbl-summary{margin:0;}
.lbl-problems{margin-top:8px;}
.lbl-flags{margin:4px 0 0; padding-left:20px; font-size:12.5px; color:var(--muted); font-family:var(--mono); line-height:1.6;}

/* The preview: real pages, scaled down to fit the panel. `zoom` keeps the
   inch layout intact (transform would leave the unscaled box in the flow). */
.lbl-preview{margin-top:14px; max-height:72vh; overflow:auto; padding:14px;
  background:var(--chrome); border:1px solid var(--line); border-radius:var(--r-md);}
.lbl-preview:empty{display:none;}
.lbl-preview .lbl-sheet{zoom:.62;}
.lbl-preview .lbl-page{margin:0 auto 24px; box-shadow:0 2px 12px rgba(0,0,0,.35);}
.lbl-preview .lbl{outline:1px dashed #b5b5b5;}            /* the cut line - screen only */
.lbl-preview .lbl-page:last-child{margin-bottom:0;}
@media (max-width:640px){ .lbl-preview .lbl-sheet{zoom:.38;} }

/* ---- the pages and labels (screen preview and print alike) ---- */
.lbl-page{position:relative; background:#fff; overflow:hidden; page-break-after:always; break-after:page;}
.lbl-page:last-child{page-break-after:auto; break-after:auto;}
.lbl{position:absolute; box-sizing:border-box; display:flex; gap:0.05in; overflow:hidden;
  background:#fff; color:#000; font-family:system-ui, "Segoe UI", Arial, sans-serif; line-height:1.15;}
.lbl-qr{flex:none; display:flex; align-items:center; justify-content:center;}
.lbl-qr svg{display:block; width:100%; height:100%;}
.lbl-txt{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; min-height:0;}
.lbl-no{font-family:ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-weight:700; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#000;}
.lbl-nm{overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; color:#000;}
.lbl-brand{text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:#000;}
.lbl-err{font-size:6pt; color:#000;}

/* 1.5 in square: code on top, text underneath (Avery 22805) */
.lbl-stack{flex-direction:column; align-items:center; padding:0.06in 0.08in 0.05in;}
.lbl-stack .lbl-qr{width:0.95in; height:0.95in;}
.lbl-stack .lbl-txt{width:100%; align-items:center; text-align:center; justify-content:flex-start;}
.lbl-stack .lbl-no{font-size:15pt; max-width:100%;}
.lbl-stack .lbl-nm{font-size:6.5pt; -webkit-line-clamp:1;}
.lbl-stack .lbl-brand{font-size:4.5pt; margin-top:0.01in;}

/* 2 5/8 x 1 in (Avery 5160) and 2 x 1 in thermal: code left, text right */
.lbl-row{flex-direction:row; align-items:center; padding:0.06in;}
.lbl-a5160 .lbl-qr, .lbl-th21 .lbl-qr{width:0.88in; height:0.88in;}
.lbl-a5160 .lbl-no, .lbl-th21 .lbl-no{font-size:14pt;}
.lbl-a5160 .lbl-nm, .lbl-th21 .lbl-nm{font-size:6.5pt; margin-top:0.02in;}
.lbl-a5160 .lbl-brand, .lbl-th21 .lbl-brand{font-size:4.5pt; margin-top:0.03in;}
.lbl-th21 .lbl-no{font-size:12pt;}

/* 4 x 2 in (Avery 5163): room for a big number and the full name */
.lbl-a5163{padding:0.12in; gap:0.12in;}
.lbl-a5163 .lbl-qr{width:1.72in; height:1.72in;}
.lbl-a5163 .lbl-no{font-size:30pt;}
.lbl-a5163 .lbl-nm{font-size:10pt; margin-top:0.05in;}
.lbl-a5163 .lbl-brand{font-size:7pt; margin-top:0.08in;}

/* ---- print ----
   While html.lbl-printing is set (the Print button, until afterprint), the
   app is hidden and only the cloned pages print, edge to edge; labels.js
   writes the matching @page size. The clone is invisible on screen — that
   rule must come BEFORE the print block so the print block wins. */
#lblPrint{display:none;}
@media print {
  html.lbl-printing, html.lbl-printing body{height:auto !important; overflow:visible !important; background:#fff !important; margin:0;}
  html.lbl-printing body > *:not(#lblPrint){display:none !important;}
  #lblPrint{display:block;}
  #lblPrint .lbl-page{margin:0; box-shadow:none;}
  #lblPrint .lbl{outline:none;}
  #lblPrint .lbl-qr svg, #lblPrint .lbl-page{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
}