/* --- barcodes we print for ourselves -----------------------------------------
   Same trick the meal prep labels use: one set of rules serves the paper and
   the on-screen preview, so the preview IS the sticker rather than a lookalike.
   Everything is in mm/pt and the ink is hard-coded, because the sheet comes out
   white whatever the app theme is set to.

   Inside print.css's 11mm @page margin an A4 sheet is 188 × 275mm. Small is
   4 × 10 and big is 3 × 7. Widths are percentages, so they divide the paper
   exactly whatever it is; heights are short of an exact division on purpose,
   because a collapsed border still adds about .14mm per row and ten rows of
   that is enough to tip the last one onto a second, near-empty page.

   Collapsing the dashed borders draws ONE continuous guide clear across the
   sheet, which is what lets a fold-and-tear run straight without a guillotine.
   Nothing relies on a background fill, so a printer told to skip background
   graphics still gives a scannable label. */
.obc-sheet + .obc-sheet { page-break-before: always; break-before: page; }
.obc-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.obc-grid td { padding: 0; vertical-align: top; border: .5pt dashed #9aa0ad; }
.obc-small .obc-grid td { width: 25%; height: 27.2mm; }
.obc-big .obc-grid td { width: 33.333%; height: 38.9mm; }

.obc-label {
  --obc-ink: #14161c; --obc-soft: #6a6f7d;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--obc-ink); background: #fff;
  box-sizing: border-box; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.obc-small .obc-label { height: 27.2mm; padding: 2.2mm 3.4mm 1.8mm; }
.obc-big .obc-label { height: 38.9mm; padding: 3.4mm 4.6mm 2.6mm; }
/* The name is the only part that can grow, and the bars underneath have to stay
   on the sticker — so it's clamped to two lines and the tallest possible label
   is still exactly a label. */
.obc-name {
  width: 100%; font-weight: 700; line-height: 1.1; letter-spacing: -.1pt; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.obc-sub {
  width: 100%; color: var(--obc-soft); letter-spacing: .4pt; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* margin-top:auto pins the bars to the bottom, so a two-line name doesn't shove
   them about between one sticker and the next */
.obc-bc { margin-top: auto; }
.obc-bc .bcsvg { display: block; margin: 0 auto; }
.obc-num { display: block; font-family: "SF Mono", Menlo, Consolas, monospace; letter-spacing: .6pt; }
.obc-small .obc-name { font-size: 7.5pt; }
.obc-small .obc-sub { font-size: 5.2pt; margin-top: .5mm; }
.obc-small .obc-num { font-size: 6pt; margin-top: .5mm; }
.obc-big .obc-name { font-size: 10pt; }
.obc-big .obc-sub { font-size: 6.5pt; margin-top: .8mm; }
.obc-big .obc-num { font-size: 8pt; margin-top: .8mm; }

/* --- the dialog --- */
#obcSheet { max-width: 520px; padding: 26px; }
#obcSheet h3 { margin-bottom: 2px; padding-right: 30px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
#obcSheet .esub { color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }
#obcSheet label small { font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; }

.obc-sizes { display: flex; gap: 7px; }
.obc-sizes button {
  flex: 1; padding: 9px 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
}
.obc-sizes button:hover { background: var(--surface-3); color: var(--text); }
.obc-sizes button.on {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* forty products is a normal press from the Maintenance list, so the list
   scrolls in its own box rather than making the dialog metres long */
.obc-list {
  max-height: 232px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2);
}
.obc-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; }
.obc-row + .obc-row { border-top: 1px solid var(--border); }
/* turned down to zero — still listed, because you may well turn it back up */
.obc-row.off { opacity: .5; }
.obc-rname { flex: 1; min-width: 0; font-weight: 600; }
.obc-rname small { display: block; font-weight: 400; font-size: 11px; color: var(--text-muted); }
.obc-rbc {
  flex: none; font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .3px; color: var(--text-muted);
}
.obc-rbc i {
  font-style: normal; font-family: inherit; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; padding: 1px 5px; border-radius: 999px;
  margin-left: 5px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.obc-rbc.new { color: var(--text-soft); }
.obc-rbc.stuck { color: var(--amber); font-family: inherit; font-size: 11.5px; text-align: right; }
.obc-copies { flex: none; display: flex; align-items: center; gap: 4px; }
.obc-copies.dim { font-size: 11.5px; color: var(--text-muted); }
.obc-copies b { min-width: 20px; text-align: center; font-size: 13.5px; }
.obc-copies .tool { padding: 4px 7px; font-size: 11px; }

.obc-prevwrap {
  background: #eef0f4; border: 1px solid var(--border); border-radius: 11px;
  padding: 12px; overflow-x: auto; display: flex; justify-content: center;
}
.obc-prev { flex: none; border: .5pt dashed #9aa0ad; box-shadow: 0 2px 10px -4px rgba(13,16,28,.35); }
.obc-prev.obc-small { width: 47mm; }    /* 188mm ÷ 4 */
.obc-prev.obc-big { width: 62.6mm; }    /* 188mm ÷ 3 */

@media (max-width: 560px) {
  #obcSheet { padding: 22px 16px; }
  .obc-row { flex-wrap: wrap; }
  .obc-rname { flex-basis: 100%; }
}