/* Code 128 of the selected apartment (wms-addresses). The box is a label: --label-paper/--label-ink are fixed in both themes (theme.css), so the
   quiet zones stay white and the bars black on a dark screen too. Layout only here; field and button sizes come from forms.css. */
.apartment-barcode-block {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   gap: 14px;
   align-items: center;
   margin-top: 12px
}

.apartment-barcode {
   margin: 0;
   max-width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   padding: 8px 8px 6px;
   background: var(--label-paper);
   border: 1px solid var(--border);
   border-radius: var(--radius)
}

.apartment-barcode svg {
   display: block;
   max-width: 100%;
   height: auto
}

.apartment-barcode-quiet {
   fill: var(--label-paper)
}

.apartment-barcode-bar {
   fill: var(--label-ink)
}

.apartment-barcode figcaption {
   font: 700 12px/1.2 ui-monospace, 'Cascadia Mono', Consolas, monospace;
   letter-spacing: .06em;
   color: var(--label-ink);
   overflow-wrap: anywhere;
   text-align: center
}

.apartment-barcode-side {
   display: grid;
   gap: 6px;
   justify-items: start;
   min-width: 0
}

.apartment-barcode-side strong {
   font-size: 11px;
   color: var(--text-2)
}

.apartment-barcode-side small {
   font-size: 9px;
   line-height: 1.6;
   color: var(--text-faint)
}

.apartment-barcode-print {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   border: 1px solid var(--border);
   background: var(--surface);
   color: var(--text-2);
   cursor: pointer;
   white-space: nowrap
}

.apartment-barcode-print:disabled {
   opacity: .5;
   cursor: default
}

@media(max-width:1000px) {
   .apartment-barcode-block {
      grid-template-columns: 1fr
   }
}