/* ============================================================================
   QR code label (QrCodePopUp).

   The class form stores the label size and every position in centimetres, which
   is what the legacy printout used. Laying the label out in cm keeps it at its
   real size both on screen and on the printer, so what is configured is what
   comes out of the label printer.
   ============================================================================ */

.qrcode-label {
    position: relative;
    box-sizing: border-box;
    min-width: 3cm;
    min-height: 3cm;
    padding: 0;
    background: #ffffff;
    border: 1px dashed var(--jump-border-color, #d0d5dd);
    overflow: hidden;
}

.qrcode-label-image {
    position: absolute;
    /* The PNG already carries the configured QRCodeScale; leaving it at its natural
       size is what reproduces the scale the class defines. */
    image-rendering: pixelated;
}

.qrcode-label-field {
    position: absolute;
    /* The legacy printout drew the fields in Microsoft Sans Serif 8pt. */
    font-family: "Microsoft Sans Serif", Arial, sans-serif;
    font-size: 8pt;
    line-height: 1.1;
    color: #000000;
    white-space: pre;
}

/* While printing, the sheet is the label and nothing else is on it.

   The label is not printed where it sits: `jumpQrCode.printLabel` copies it into
   `#qrcode-label-print-container` at the end of the body, which is what lets the rest of the
   application be dropped with `display: none`. Hiding it with `visibility` instead — which is
   what this did before — left every box of the application taking up room on the paper, so the
   label ended up in the corner of a sheet the size of the whole page.

   The paper size itself comes from the class's configured label size, written into an `@page`
   rule at print time: a `@page` cannot read a CSS variable. */
@media print {
    body.jump-printing-qrcode > *:not(#qrcode-label-print-container) {
        display: none !important;
    }

    body.jump-printing-qrcode,
    body.jump-printing-qrcode #qrcode-label-print-container {
        background: #ffffff;
        height: auto;
        margin: 0;
        overflow: visible;
        padding: 0;
        width: auto;
    }

    /* The dashed guide belongs to the preview, not to the label. */
    body.jump-printing-qrcode .qrcode-label-printing {
        border: 0;
        margin: 0;
        page-break-after: avoid;
        page-break-inside: avoid;
    }
}