/* Hidden by default on screen; revealed only during print. */
.show-in-print {
    display: none;
}

/* QR tray — shown on screen AND in print (single element, no duplicate). */
.qr-tray {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin: 0.5rem 0 1rem;
}

.qr-tray canvas,
.qr-tray img {
    width: 72px !important;
    height: 72px !important;
    flex-shrink: 0;
}

.qr-tray-label {
    font-size: 0.8rem;
    color: #555;
    margin: 0;
}

@media print {

    .hide-in-print {
        display: none;
    }

    .show-in-print {
        display: block !important;
    }

    /* QR tray keeps its flex layout in print */
    .qr-tray {
        page-break-inside: avoid;
        break-inside: avoid;
        border: none;
        background: transparent;
        padding: 0;
    }

    .qr-tray canvas,
    .qr-tray img {
        width: 90px !important;
        height: 90px !important;
    }

    body {
        background-color: white;
    }

    /* ── Template font normalization ─────────────────────────────────────
       Override the CSS variables that TemplateRenderer sets as inline
       styles on .tpl-canvas.  Targeting the variables (not individual
       font-family properties) preserves every element's letter-spacing,
       font-size, and font-weight — only the typeface itself is normalised.
       !important on custom properties is required to beat inline-style
       specificity; supported in Chromium 119 + which is the minimum for
       Puppeteer PDF generation. */
    .tpl-canvas {
        --tpl-font:         'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        --tpl-font-display: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    }

    .final-form {
        position: relative;
        padding: 5mm 15mm 20mm 15mm;
    }

    @page {
        margin: 0;
    }

    .break-avoid {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;
    }

    .footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 15mm;
        background-color: transparent !important;
        padding-right: 5mm;
        margin: 0;
    }

    .form-watermark {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }
}