/*
 * The browser fallback of the print queue: a PrintDocument drawn as an 80 mm roll page.
 * A view renders the document into #print-root (one .print-doc per ticket) and calls
 * window.print(); everything else on the page is hidden while printing. Loaded with
 * media="print", so it never blocks the screen's first paint.
 */

@page {
    size: 80mm auto;
    margin: 0;
}

@media print {
    html,
    body {
        width: 80mm;
        margin: 0;
        background: #ffffff;
        color: #000000;
    }

    body > :not(#print-root) {
        display: none !important;
    }

    #print-root {
        display: block !important;
    }

    .print-doc {
        width: 72mm;
        margin: 0 auto;
        padding: 3mm 0;
        font-family: var(--font-sans);
        font-size: 9pt;
        line-height: 1.3;
        break-after: page;
    }

    .print-doc:last-child {
        break-after: auto;
    }

    .pd-line {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .pd-bold {
        font-weight: 700;
    }

    .pd-size-2 {
        font-size: 13pt;
    }

    .pd-size-3 {
        font-size: 18pt;
    }

    .pd-center {
        text-align: center;
    }

    .pd-right {
        text-align: right;
    }

    .pd-columns {
        display: flex;
        gap: 2mm;
    }

    .pd-columns > * {
        flex: 1 1 0;
        min-width: 0;
    }

    .pd-columns > .pd-fit {
        flex: none;
    }

    .pd-num {
        font-variant-numeric: lining-nums tabular-nums;
        font-kerning: none;
        text-align: right;
        white-space: nowrap;
    }

    .pd-divider {
        margin: 1.5mm 0;
        border: 0;
        border-top: 1px dashed #000000;
    }

    .pd-qr,
    .pd-barcode {
        display: block;
        margin: 2mm auto;
    }

    .pd-qr {
        width: 32mm;
        height: 32mm;
    }

    .pd-barcode {
        width: 60mm;
        height: 14mm;
    }

    .pd-cut {
        break-after: page;
    }
}