/* ---------- App ---------- */
body { background: #f3f5f8; }
.label-column { top: 1rem; z-index: 1; }
.barcode-box { background: #fafbfc; }
.barcode-preview { min-height: 3rem; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px dashed #ced4da; border-radius: .375rem; padding: .5rem; overflow-x: auto; }
#barcodePreview { max-width: 100%; height: auto; }

/* Label preview stage: the label is drawn at true mm size, then zoomed for screen only. */
.label-stage { background: repeating-conic-gradient(#eef0f3 0% 25%, #f8f9fa 0% 50%) 50% / 16px 16px; border-radius: .375rem; padding: 1rem; overflow: auto; display: flex; justify-content: center; }
.label-zoom { flex: none; }
.label-zoom .bms-label { transform-origin: top left; box-shadow: 0 0 0 1px #adb5bd, 0 2px 6px rgba(0, 0, 0, .12); }

/* ---------- Label (shared by preview, PNG export and print) ---------- */
.bms-label {
  box-sizing: border-box;
  background: #fff;
  color: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.15;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.bms-label > div, .bms-label-main > div { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bms-label-brand { font-weight: 700; font-size: 1.3em; letter-spacing: .02em; flex: none; }
.bms-label-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: .4mm; min-height: 0; }
/* Spare height is split 1:3, keeping the barcode close under the brand. */
.bms-label-main::before { content: ''; flex: 1 1 0; }
.bms-label-main::after { content: ''; flex: 3 1 0; }
.bms-label-barcode { display: block; flex: none; }
.bms-label-barcode-missing { flex: none; max-width: 100%; display: flex; align-items: center; justify-content: center; border: .3mm dashed #dc3545; color: #dc3545; font-size: .8em; }
.bms-label-code { font-weight: 700; font-size: 1.2em; letter-spacing: .04em; }
.bms-label-extra { font-size: .85em; }
.bms-label-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 2mm; font-weight: 700; flex: none; }
.bms-label-bottom > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bms-label-mrp { text-align: right; flex: none; }

.bms-label[data-align="left"] { text-align: left; }
.bms-label[data-align="left"] .bms-label-main { align-items: flex-start; }
.bms-label[data-align="center"] { text-align: center; }
.bms-label[data-align="center"] .bms-label-main { align-items: center; }
.bms-label[data-align="right"] { text-align: right; }
.bms-label[data-align="right"] .bms-label-main { align-items: flex-end; }
.bms-label .bms-label-bottom { text-align: left; }

/* ---------- Print: only the labels in #printArea ---------- */
#printArea { display: none; }

@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body > *:not(#printArea) { display: none !important; }
  #printArea { display: block !important; }
  #printArea .bms-label { box-shadow: none; page-break-inside: avoid; break-inside: avoid; }
  #printArea.print-roll .bms-label { page-break-after: always; break-after: page; }
  #printArea.print-roll .bms-label:last-child { page-break-after: auto; break-after: auto; }
  #printArea.print-sheet { display: flex !important; flex-wrap: wrap; align-content: flex-start; gap: 2mm; }
  #printArea.print-sheet .bms-label { outline: .1mm dashed #bbb; }
}