/* Barcode app: scan bar, tiles, result cards, scan lines, label sheet (preview + print). Tokens from admin.css only, logical properties, light + dark through the tokens,
   phone first at 375 px (44 px touch targets, no sideways scroll). The label sheet is the one place with fixed black on white: it is paper. */

.bar-page { min-inline-size: 0; }
.bar-page > * { min-inline-size: 0; }
.bar-body { display: grid; gap: 12px; align-content: start; min-inline-size: 0; }
.bar-sub { font-size: 15px; margin-block-end: 8px; }
.bar-sub-wrap { display: grid; gap: 4px; }
.bar-empty { padding-block: 28px; border: 1px dashed var(--line); border-radius: var(--r); }
.bar-panel { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); min-inline-size: 0; align-content: start; }
.bar-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bar-inline .bar-select { flex: 1 1 200px; }
.bar-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--info-soft); color: var(--info-ink); font-weight: 600; overflow-wrap: anywhere; }
.bar-note.ok { background: var(--ok-soft); color: var(--ok-ink); }
.bar-note.bad { background: var(--danger-soft); color: var(--danger-ink); }
.bar-check { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; cursor: pointer; }
.bar-check input { inline-size: 22px; block-size: 22px; accent-color: var(--accent); flex: 0 0 auto; }
.bar-select { inline-size: 100%; min-block-size: 48px; padding-inline: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font-size: 16px; }
.bar-select:focus, .bar-qty:focus, .bar-search:focus, .bar-input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

/* ------------------------------------------------------------ home tiles */
.bar-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.bar-tile { display: flex; align-items: center; gap: 14px; min-block-size: 92px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow); color: var(--ink); }
.bar-tile:hover, .bar-tile:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.bar-tile-ico { display: grid; place-items: center; flex: 0 0 52px; inline-size: 52px; block-size: 52px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-d); }
.bar-tile-body { display: grid; gap: 2px; flex: 1; min-inline-size: 0; }
.bar-tile-body b { font-size: 17px; }
.bar-tile-go { color: var(--muted); flex: 0 0 auto; }

/* ------------------------------------------------------------ the sticky scan bar */
.bar-scan { position: sticky; top: var(--stick, 62px); z-index: 15; display: grid; gap: 8px; padding: 10px; margin-inline: -4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow); }
.bar-scan-row { display: flex; gap: 8px; align-items: stretch; }
.bar-inputwrap { position: relative; flex: 1 1 auto; min-inline-size: 0; }
.bar-inputwrap > .ico { position: absolute; inset-inline-start: 14px; inset-block-start: 16px; color: var(--muted); pointer-events: none; }
.bar-input { inline-size: 100%; min-block-size: 52px; padding-inline: 40px 10px; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink); font-size: 16px; font-weight: 600; text-overflow: ellipsis; }
.bar-scan-row > .bar-sbtn { flex: 0 0 52px; inline-size: 52px; block-size: auto; min-block-size: 52px; }
.bar-sbtn { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); }
.bar-sbtn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.bar-sbtn.on, .bar-go { border-color: var(--accent-solid); background: var(--accent-solid); color: var(--accent-on); }
.bar-sbtn.on:hover, .bar-go:hover { background: var(--accent-d); }
.bar-echo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--panel-2); color: var(--muted); font-weight: 650; min-block-size: 44px; }
.bar-echo-text { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.bar-echo-code { flex: 0 1 auto; max-inline-size: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: 6px; background: var(--panel-3); color: var(--ink); font-size: 12.5px; unicode-bidi: isolate; }
.bar-echo[data-state="ok"] { background: var(--ok-soft); color: var(--ok-ink); }
.bar-echo[data-state="warn"] { background: var(--warn-soft); color: var(--warn-ink); }
.bar-echo[data-state="error"] { background: var(--danger-soft); color: var(--danger-ink); }
.bar-cam { display: grid; gap: 6px; }
.bar-cam[hidden] { display: none; }
.bar-video { inline-size: 100%; max-block-size: 38vh; border-radius: var(--r-sm); background: #000; object-fit: cover; }
.bar-hint { display: flex; align-items: flex-start; gap: 6px; margin: 0; }

/* ------------------------------------------------------------ result cards */
.bar-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-inline-start: 5px solid var(--info); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow); min-inline-size: 0; }
.bar-card.tone-ok { border-inline-start-color: var(--ok); }
.bar-card.tone-warn { border-inline-start-color: var(--warn); }
.bar-card.tone-danger { border-inline-start-color: var(--danger); }
.bar-card-top { display: flex; align-items: center; gap: 12px; min-inline-size: 0; }
.bar-card-ico { display: grid; place-items: center; flex: 0 0 44px; inline-size: 44px; block-size: 44px; border-radius: 12px; background: var(--info-soft); color: var(--info-ink); }
.bar-card.tone-ok .bar-card-ico { background: var(--ok-soft); color: var(--ok-ink); }
.bar-card.tone-warn .bar-card-ico { background: var(--warn-soft); color: var(--warn-ink); }
.bar-card.tone-danger .bar-card-ico { background: var(--danger-soft); color: var(--danger-ink); }
.bar-card-title { display: grid; min-inline-size: 0; }
.bar-card-title b { font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.bar-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bar-card-foot .btn, .bar-foot .btn, .bar-row, .bar-panel .btn { min-block-size: 44px; }
.bar-facts { display: grid; }
.bar-fact { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-block-end: 1px solid var(--line-2); }
.bar-fact:last-child { border-block-end: 0; }
.bar-fact b { text-align: end; overflow-wrap: anywhere; min-inline-size: 0; }

/* ------------------------------------------------------------ lists and scan lines */
.bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; inline-size: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); text-align: start; }
.bar-row:hover { border-color: var(--accent); background: var(--accent-soft); }
.bar-row-main { display: grid; min-inline-size: 0; overflow-wrap: anywhere; }
.bar-row-side { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: 0 0 auto; }
.bar-hist { display: grid; gap: 6px; }
.bar-hist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bar-hist-row { display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); text-align: start; }
.bar-hist-row:hover { border-color: var(--accent); }
.bar-hist-row code { unicode-bidi: isolate; font-size: 12.5px; padding: 2px 8px; border-radius: 6px; background: var(--panel-3); max-inline-size: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-hist-label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bar-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-inline-start: 5px solid var(--line); border-radius: var(--r-sm); background: var(--panel); min-inline-size: 0; }
.bar-line.tone-ok { border-inline-start-color: var(--ok); }
.bar-line.tone-warn { border-inline-start-color: var(--warn); }
.bar-line.tone-info { border-inline-start-color: var(--info); }
.bar-line-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-inline-size: 0; }
.bar-line-main b { flex: 1 1 100%; overflow-wrap: anywhere; font-size: 15.5px; }
.bar-line-main b { display: flex; align-items: center; gap: 6px; }
.bar-line-main .bar-tick { color: var(--ok-ink); flex: 0 0 auto; }
.bar-line-qty { text-align: end; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.bar-line > .bar-prog, .bar-line > .bar-step, .bar-line > .bar-check { grid-column: 1 / -1; }
.bar-line > .icon-btn { grid-column: 2; grid-row: 1; inline-size: 44px; block-size: 44px; }
.bar-big { font-size: 24px; font-variant-numeric: tabular-nums; }
.bar-diff { font-weight: 800; font-variant-numeric: tabular-nums; }
.bar-diff.pos { color: var(--ok-ink); }
.bar-diff.neg { color: var(--danger-ink); }
.bar-diff.warnc { color: var(--warn-ink); }
.bar-prog { block-size: 8px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.bar-prog > span { display: block; block-size: 100%; border-radius: inherit; background: var(--muted); transition: inline-size .2s; }
.bar-prog.tone-ok > span { background: var(--ok); }
.bar-prog.tone-warn > span { background: var(--warn); }
.bar-prog.tone-info > span { background: var(--info); }
.bar-step { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.bar-qty { inline-size: 92px; min-block-size: 44px; padding-inline: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); text-align: center; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.bar-qty::-webkit-outer-spin-button, .bar-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@keyframes bar-flash { from { background: var(--accent-soft); } to { background: var(--panel); } }
.bar-line.flash { animation: bar-flash 1.1s ease-out; }
@media (prefers-reduced-motion: reduce) { .bar-line.flash { animation: none; } .bar-prog > span { transition: none; } }

/* ------------------------------------------------------------ dispatch status */
.bar-allok, .bar-bad, .bar-todo { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); border: 2px solid; }
.bar-allok > div, .bar-bad > div, .bar-todo > div { display: grid; gap: 2px; min-inline-size: 0; }
.bar-allok b, .bar-bad b, .bar-todo b { font-size: 20px; }
.bar-allok { background: var(--ok-soft); color: var(--ok-ink); border-color: var(--ok); }
.bar-bad { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger); }
.bar-todo { background: var(--info-soft); color: var(--info-ink); border-color: color-mix(in srgb, var(--info) 45%, var(--line)); }
.bar-wrong { display: grid; gap: 6px; }
.bar-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bar-chips li { display: inline-flex; align-items: center; gap: 4px; padding-inline: 10px 2px; border-radius: 999px; background: var(--danger-soft); color: var(--danger-ink); }
.bar-chips code { unicode-bidi: isolate; font-weight: 700; }
.bar-chips .icon-btn { inline-size: 44px; block-size: 44px; }
.bar-verified { min-block-size: 32px; padding-inline: 12px; font-size: 14px; }

/* ------------------------------------------------------------ transfer slots */
.bar-slots { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.bar-slot { display: grid; gap: 4px; min-inline-size: 0; }
.bar-arrow { margin-block-end: 14px; color: var(--muted); }

/* ------------------------------------------------------------ bottom bar */
.bar-foot { position: sticky; bottom: 0; z-index: 14; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow); }
.bar-foot[hidden] { display: none; }
.bar-foot .btn-primary { min-block-size: 48px; padding-inline: 22px; font-size: 16px; }
.bar-foot-wrap > .bar-select { flex: 1 1 160px; }
.bar-foot-wrap { justify-content: flex-end; }

/* ------------------------------------------------------------ labels screen */
.bar-labels-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.bar-tabs { inline-size: 100%; }
.bar-tabs .seg { flex: 1; min-block-size: 44px; }
.bar-searchwrap { position: relative; }
.bar-searchwrap > .ico { position: absolute; inset-inline-start: 14px; inset-block-start: 15px; color: var(--muted); }
.bar-search { inline-size: 100%; min-block-size: 48px; padding-inline: 42px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink); font-size: 16px; }
.bar-lhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bar-labels-list .bar-list { max-block-size: 52vh; overflow-y: auto; padding-inline-end: 2px; }
.bar-lrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-block-size: 60px; padding-block: 6px; padding-inline: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.bar-lrow.on { border-color: var(--accent); background: var(--accent-soft); }
.bar-lcheck { display: grid; place-items: center; inline-size: 44px; block-size: 44px; cursor: pointer; }
.bar-lcheck input { inline-size: 22px; block-size: 22px; accent-color: var(--accent); }
.bar-lmain { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-inline-size: 0; }
.bar-lmain b { flex: 1 1 100%; overflow-wrap: anywhere; }
.bar-lmain .muted { overflow-wrap: anywhere; }
.bar-lcode { unicode-bidi: isolate; padding: 1px 8px; border-radius: 6px; background: var(--panel-3); font-size: 12px; overflow-wrap: anywhere; }
.bar-opts { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.bar-opt { display: grid; gap: 4px; min-inline-size: 0; }
.bar-opt.grow { flex: 1 1 220px; }
.bar-optpanel .bar-qty { inline-size: 110px; }
.bl-preview { display: flex; flex-direction: column; align-items: center; min-block-size: 96px; padding: 8px; border-radius: var(--r-sm); background: var(--panel-3); overflow: hidden; }
.bl-preview .bl-page { margin-block-end: 10px; box-shadow: var(--shadow); }
.bl-preview .bl-label { outline: 1px dashed #c9c9c9; outline-offset: -1px; }
.bl-empty { margin: auto; text-align: center; }

/* ------------------------------------------------------------ the label sheet (paper: always black on white; preview and print use the same markup) */
.bl-sheet { direction: ltr; color: #000; font-family: var(--font); }
.bl-page { box-sizing: border-box; background: #fff; color: #000; overflow: hidden; }
.bl-page.a4 { inline-size: 210mm; block-size: 296mm; display: grid; grid-template-columns: repeat(3, 70mm); grid-template-rows: repeat(8, 37mm); }
.bl-page.roll { inline-size: 50mm; block-size: 24.8mm; }
.bl-label { box-sizing: border-box; display: flex; flex-direction: column; gap: .5mm; overflow: hidden; padding: 2mm 3mm; color: #000; background: #fff; }
.bl-page.a4 .bl-label { inline-size: 70mm; block-size: 37mm; }
.bl-page.roll .bl-label { inline-size: 50mm; block-size: 24.8mm; padding: 1.2mm 2mm; gap: .3mm; }
.bl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2mm; }
.bl-name { flex: 1; min-inline-size: 0; font-weight: 700; font-size: 9pt; line-height: 1.15; max-block-size: 2.3em; overflow: hidden; }
.bl-price { font-weight: 800; font-size: 10pt; white-space: nowrap; }
.bl-sub { font-size: 6.5pt; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #222; }
.bl-code { flex: 1 1 0; min-block-size: 0; display: flex; align-items: center; justify-content: center; inline-size: 100%; }
.bl-code svg { display: block; inline-size: 100%; block-size: 100%; color: #000; }
.bl-plain code { font-size: 10pt; font-weight: 700; overflow-wrap: anywhere; text-align: center; }
.bl-warn { margin-inline-start: 2mm; font-size: 6pt; font-weight: 800; border: .2mm solid #000; border-radius: 50%; inline-size: 2.6mm; block-size: 2.6mm; display: inline-grid; place-items: center; }
.bl-page.roll .bl-name { font-size: 7pt; max-block-size: 1.2em; white-space: nowrap; text-overflow: ellipsis; }
.bl-page.roll .bl-price { font-size: 8pt; }
.bl-page.roll .bl-sub { font-size: 5.5pt; }

#bar-print-root { display: none; }
@media print {
  body.bar-printing > :not(#bar-print-root) { display: none !important; }
  body.bar-printing > #bar-print-root { display: block !important; }
  body.bar-printing { margin: 0 !important; background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #bar-print-root .bl-page { margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
  #bar-print-root .bl-page:last-child { break-after: auto; page-break-after: auto; }
  #bar-print-root .bl-label { outline: 0; }
}

/* ------------------------------------------------------------ larger screens */
@media (min-width: 960px) {
  .bar-labels-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .bar-optpanel { position: sticky; top: calc(var(--stick, 62px) + 8px); }
  .bar-labels-list .bar-list { max-block-size: 62vh; }
}

/* the bottom navigation bar shows up to 900 px (and on touch screens): the bottom bar sits above it */
@media (max-width: 900px), (pointer: coarse) { .bar-foot { bottom: var(--bn-h, 56px); } }

/* ------------------------------------------------------------ phone */
@media (max-width: 720px) {
  .bar-scan { margin-inline: 0; padding: 8px; }
  .bar-foot { padding: 8px 10px; }
  .bar-foot { gap: 8px; }
  .bar-foot .btn { flex: 1 1 auto; }
  .bar-foot > .muted { flex: 1 0 100%; font-size: 12.5px; }
  .bar-slots { grid-template-columns: minmax(0, 1fr); }
  .bar-arrow { justify-self: center; margin: 0; transform: rotate(90deg); }
  .bar-card-title b { font-size: 18px; }
  .bar-allok b, .bar-bad b, .bar-todo b { font-size: 18px; }
  .bar-fact { flex-wrap: wrap; }
  .bar-line > .bar-step { justify-content: stretch; }
  .bar-line > .bar-step .bar-qty { flex: 1; }
  .bar-row { flex-wrap: wrap; }
  .bar-row-side { justify-content: flex-start; }
}
@media (max-width: 900px) and (max-height: 520px) { .bar-foot { bottom: 0; } .bar-scan { position: static; } }