/* ─────────────────────────────────────────────────────────────────────
   Labeldruck. Format Brother 62 mm × 120 mm (Hoehe 62 mm = Rollenbreite,
   Breite 120 mm fix). Layout so aufgebaut, dass weitere Formate später
   ergaenzbar sind (eigene .label-Varianten), ohne alles neu zu bauen.
   ───────────────────────────────────────────────────────────────────── */

/* ── Bildschirm: Vorschau + Auswahl ───────────────────────────────── */
.labels-layout { display: grid; grid-template-columns: 340px 1fr; gap: var(--sp-5); align-items: start; }
.labels-side { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
.labels-preview { display: flex; flex-direction: column; gap: var(--sp-4); }
.label-sheet { display: flex; flex-direction: column; gap: var(--sp-4); }

@media (max-width: 900px) {
    .labels-layout { grid-template-columns: 1fr; }
}

/* Ein Label: 120 mm × 62 mm, feste Breite */
.label {
    width: 120mm;
    height: 62mm;
    background: #fff;
    color: #000;
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
}
.label-colorbar { width: 6mm; flex: none; }
.label-main {
    flex: 1; min-width: 0;
    padding: 5mm 5mm 5mm 6mm;
    display: flex; flex-direction: column; gap: 2mm;
    overflow: hidden;
}
.label-head { display: flex; align-items: baseline; gap: 3mm; }
.label-id {
    font-family: var(--font-mono); font-weight: 600;
    font-size: 13mm; line-height: 1; letter-spacing: -0.5mm; color: #000;
}
.label-head i { font-size: 5mm; color: #333; }
.label-name {
    font-family: var(--font-sans); font-weight: 700; font-size: 6.5mm; line-height: 1.05;
    /* zu lange Inhalte abschneiden, nicht umbrechen */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.label-loc { font-size: 4mm; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-contents {
    font-size: 3.6mm; color: #444; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: auto;
}
.label-notes { font-size: 3.4mm; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-qr {
    width: 44mm; height: 100%; flex: none;
    display: flex; align-items: center; justify-content: center;
    padding: 4mm; box-sizing: border-box;
}
.label-qr svg { width: 100%; height: auto; max-height: 54mm; }

/* ── Druck ────────────────────────────────────────────────────────── */
@media print {
    @page { size: 120mm 62mm; margin: 0; }

    /* Alles ausser den Labels ausblenden */
    body { background: #fff; }
    .app-shell > .sidebar,
    .topbar,
    .no-print,
    .page-head,
    .toast-stack,
    #modal-root { display: none !important; }

    .app-shell, .main, .content, .content-wide { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
    .labels-layout { display: block !important; }
    .labels-preview, .label-sheet { display: block !important; gap: 0 !important; }

    .label {
        width: 120mm; height: 62mm;
        border: none !important; border-radius: 0 !important; box-shadow: none !important;
        margin: 0; page-break-after: always; break-after: page;
    }
    .label:last-child { page-break-after: auto; break-after: auto; }

    /* Farben exakt drucken */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}