/*
 * Bon (80-mm-Thermodruck), Design 2.0 – eine Gestaltung für den Bon am Empfang (Modul Queue,
 * Twig „queue/_receipt.html.twig“), den Druck am Kiosk-Browser und die Bon-Vorschau im
 * Gerätesimulator (Modul Device, assets/device/receipt.js).
 *
 * Nur Schwarz auf Weiß (Thermodrucker), Wartenummer als umrandetes Nummernschild – das
 * Leitobjekt der DIWA-Familie. Bedruckbare Breite 72 mm. Neutrale Wartemarke (.bon--neutral):
 * ohne Logo, Behörde, Anliegen und Ort – nur Nummer, Datum, Uhrzeit und ggf. QR-Code.
 */

.bon {
    box-sizing: border-box;
    width: 72mm;
    max-width: 100%;
    margin: 0 auto;
    padding: 5mm 4mm 6mm;
    background: #fff;
    color: #000;
    font-family: var(--font);
    font-size: 10.5pt;
    line-height: 1.3;
    text-align: center;
}

:where(.bon) :is(p, ul) {
    max-width: none;
    margin: 0;
}

.bon__brand {
    margin: 0 0 1.5mm;
    font-size: 11pt;
    font-weight: 700;
}

.bon__logo {
    display: block;
    max-width: 48mm;
    max-height: 16mm;
    margin: 0 auto;
    object-fit: contain;
    filter: grayscale(1) contrast(1.2);
}

.bon__place {
    padding-bottom: 2.5mm;
    border-bottom: 0.3mm solid #000;
    font-size: 9.5pt;
}

.bon__title {
    margin-top: 3mm;
    font-size: 11pt;
    font-weight: 700;
}

/* Nummernschild: dicke Umrandung, große fette Ziffern in Tabellenbreite */
.bon__number {
    display: inline-block;
    min-width: 40mm;
    margin: 2mm auto 2.5mm;
    padding: 0.5mm 4mm 1mm;
    border: 0.9mm solid #000;
    border-radius: 3mm;
    font-size: 34pt;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.bon__lines {
    display: grid;
    gap: 1mm;
    padding: 0;
    list-style: none;
    font-size: 10pt;
}

.bon__lines li:first-child {
    font-weight: 700;
}

.bon__time {
    margin-top: 2mm;
    font-size: 9.5pt;
    font-variant-numeric: tabular-nums;
}

.bon__qr {
    display: grid;
    place-items: center;
    width: 28mm;
    height: 28mm;
    margin: 3mm auto 1mm;
}

.bon__qr svg,
.bon__qr img {
    display: block;
    width: 100%;
    height: 100%;
}

.bon__qr-text {
    font-size: 9pt;
}

.bon__foot {
    margin-top: 3mm;
    padding-top: 2.5mm;
    border-top: 0.3mm dashed #000;
    font-size: 9pt;
}

/* Vorschau am Bildschirm: Papierstreifen mit leichtem Schatten */
.bon--preview {
    border: 1px solid var(--c-line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Bon am Empfang: nur der Bon wird gedruckt (body.queue-print-receipt, Modul Queue) */
@media print {
    body.queue-print-receipt .bon,
    body.queue-print-receipt .bon * {
        visibility: visible;
    }

    body.queue-print-receipt .bon {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        border: 0;
        box-shadow: none;
    }

    .bon {
        break-inside: avoid;
    }
}