/* Served raw by Propshaft, not run through the Tailwind CLI build, so no
   @apply/@theme here — and deliberately left unlayered: Tailwind v4's own
   @layer utilities would otherwise beat any @layer rule declared in this
   file, which is wrong for label geometry that has to be physically exact.
   Tight BEM scoping under .barcode-sheet/.barcode-label keeps the higher
   specificity contained instead. */

.barcode-sheet {
  --label-inline-size: 50mm;
  --label-block-size: 25mm;
  --label-gap: 2mm;
  --label-align: center;
  --label-text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--label-gap);
  background: #fff;
  color: #000;
}

.barcode-label {
  box-sizing: border-box;
  inline-size: var(--label-inline-size);
  block-size: var(--label-block-size);
  padding: 1mm;
  display: flex;
  flex-direction: column;
  align-items: var(--label-align);
  justify-content: center;
  gap: 0.4mm;
  overflow: hidden;
  text-align: var(--label-text-align);
  break-inside: avoid;
  page-break-inside: avoid;
}

.barcode-label__line {
  inline-size: 100%;
  font-size: 2mm;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barcode-label__line--name {
  font-weight: 600;
}

.barcode-label__line--price {
  font-weight: 700;
  font-size: 2.4mm;
}

.barcode-label__line--code-value {
  font-family: ui-monospace, monospace;
  letter-spacing: 0.05em;
}

.barcode-label__code {
  /* Width/height are set inline, in real px, by barcode_label_controller.js
     — flex: 0 0 auto just keeps this box at that explicit size instead of
     stretching to fill leftover space, which is what lets align-items and
     justify-content on the parent actually center it on both axes. */
  flex: 0 0 auto;
  max-inline-size: 100%;
}

.barcode-sheet--single .barcode-label {
  break-after: page;
  page-break-after: always;
}

@media screen {
  .barcode-label {
    outline: 1px dashed #cbd5e1;
  }
}

@media print {
  /* The barcode-label Stimulus controller relocates .barcode-sheet to be a
     direct child of <body> before printing — that's what lets this hide
     the whole app chrome without any other layout changes. */
  body > * {
    display: none !important;
  }

  body > .barcode-sheet {
    display: flex !important;
  }

  .barcode-label {
    outline: none;
  }

  .barcode-label__code {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}