/* =========================
   Labels: selection + print
   ========================= */

/* Selection list (optional; harmless if unused) */
.labels-select {
    /* Responsive sizing for container codes in the selection list */
    --container_code_size: clamp(12px, 1.6vw, 16px);
}

.labels-select fieldset {
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 10px;
    margin: 0 0 12px 0;
}

.labels-select legend {
    padding: 0 6px;
    color: var(--text-muted);
    font-size: 12px;
}

.label-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

/* Keep container code (e.g. BX-01) on one line */
.label-row label.checkbox {
    flex: 0 0 auto;
    white-space: nowrap;
}

.label-row label.checkbox .mono {
    white-space: nowrap;
    word-break: keep-all;
    font-size: var(--container_code_size);
    font-weight: 650;
}

.labels-select label.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.labels-select label.checkbox input[type="checkbox"] {
    margin: 0;
    accent-color: var(--blue-primary);
    transform: scale(1.0);
    transform-origin: left center;
}

/* Keep the format controls on one tidy row (without affecting the containers fieldset) */
.labels-select fieldset.label-format {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Outline toggle: keep checkbox + text together, no wrapping */
.labels-select .outline-toggle {
    flex: 0 0 auto;
    white-space: nowrap;
}

.labels-select .outline-toggle span {
    white-space: nowrap;
}

.labels-select .outline-toggle .muted {
    font-size: 12px;
}

.label-row .labeltext {
    flex: 0 1 360px;
    width: 360px;
    max-width: 100%;
}

/* =========================
   Print area
   ========================= */

.print-only {
    background: #fff;
}

/* Print: hide navigation etc, keep print area visible */
@media print {
    body {
        background: #fff !important;
    }

    header,
    nav,
    .header,
    .nav,
    .footer,
    .filters,
    .add,
    .panel:not(.print-only) {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    /* On real label sheets, outlines look bad if alignment is slightly off.
       Default: do NOT print borders; enable explicitly for calibration/cut prints. */
    .label {
        border: none !important;
    }

    .show-outline .label {
        border: 1px solid #000 !important;
    }
}

/* =========================
   Label grid + label cards
   ========================= */

.labels {
    display: grid;
    column-gap: var(--label_gap_x, 0mm);
    row-gap: var(--label_gap_y, 0mm);
}

/* Base label */
.label {
    box-sizing: border-box;
    border: 1px solid #000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Code line */
.label-code {
    font-weight: 800;
    letter-spacing: 0.6px;
}

/* Asset label: code + QR */
.label.asset {
    justify-content: space-between;
}

/* Content label: code + centered text */
.label.content {
    justify-content: flex-start;
}

.label.content .label-text {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    /* vertical center */
    justify-content: center;
    /* horizontal center */
    text-align: center;
    line-height: 1.1;
}

/* QR image (sized per preset below) */
.label.asset .label-qr {
    display: block;
}

.labels-select .actions .btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.labels-select .actions .btn:not(:disabled):hover {
    filter: brightness(1.05);
}