.payslip-stage {
    background-color: #eceaf8;
    background-image: repeating-linear-gradient(45deg, rgba(89, 74, 226, 0.05), rgba(89, 74, 226, 0.05) 10px, transparent 10px, transparent 20px);
    padding: 24px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    overflow: auto;
}

.payslip-paper {
    position: relative;
    width: 100%;
    max-width: 720px;
    min-height: 920px;
    padding: 36px 40px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.20);
    border-radius: 4px;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.87);
}

.payslip-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 4px;
}

.payslip-content {
    position: relative;
    z-index: 1;
}

.payslip-empty {
    color: rgba(0, 0, 0, 0.4);
    text-align: center;
    padding: 64px 0;
    font-style: italic;
}

/* PP-17 proforma marking — lives inside .payslip-paper (the print area), so it survives print/PDF export.
   The negative margin cancels the paper's on-screen padding so the banner reaches the paper edges. */
.payslip-proforma-banner {
    background: repeating-linear-gradient(45deg, #b45309, #b45309 10px, #f59e0b 10px, #f59e0b 20px);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    padding: 6px 0;
    margin: -36px -40px 16px;
    text-transform: uppercase;
    font-size: 0.72rem;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

/* On-screen watermark: a repeating diagonal background on the flowing content, so it spans the whole preview.
   In print it only reaches as far as the content does, which leaves a half-empty page blank — the per-page
   marking there comes from the fixed .payslip-proforma-watermark-print tile below. */
.payslip-proforma-watermark {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='240'><text x='50%25' y='50%25' fill='rgba(180,83,9,0.14)' font-family='Roboto,Helvetica,Arial,sans-serif' font-size='42' font-weight='800' text-anchor='middle' transform='rotate(-30 170 120)'>PROFORMA</text></svg>");
    background-repeat: repeat;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

/* Print-only, full-page watermark tile — the background above only covers its own content height, so a
   page with little text would stay blank. The print rules below make this `position: fixed`, which Chromium
   paints on every physical page regardless of content height. Hidden on screen. */
.payslip-proforma-watermark-print {
    display: none;
}

/* PP-65 preview marking — same mechanism as the proforma marking above, for a strook whose period is
   imported but not yet processed into a payroll round. Blue palette and CONCEPT wording keep it
   visually distinct from PROFORMA — the two mean different things and must not be mistaken for each other. */
.payslip-preview-banner {
    background: repeating-linear-gradient(45deg, #1d4ed8, #1d4ed8 10px, #3b82f6 10px, #3b82f6 20px);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    padding: 6px 0;
    margin: -36px -40px 16px;
    text-transform: uppercase;
    font-size: 0.72rem;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.payslip-preview-watermark {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='240'><text x='50%25' y='50%25' fill='rgba(29,78,216,0.14)' font-family='Roboto,Helvetica,Arial,sans-serif' font-size='42' font-weight='800' text-anchor='middle' transform='rotate(-30 170 120)'>CONCEPT</text></svg>");
    background-repeat: repeat;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.payslip-preview-watermark-print {
    display: none;
}

/* Payslip page-break section — on-screen marker (the actual break is print-only, below) */
.payslip-page-break {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 2px dashed var(--ind-line);
    margin: 8px 0;
    height: 0;
}

.payslip-page-break__label {
    transform: translateY(-50%);
    background: var(--card);
    padding: 0 10px;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* PDF export - print only the rendered payslip and honour page breaks. Shared by the browser print on
   /administration/payslips (window.print) and the server-side PDF endpoint. */
@media print {
    /* Strip the on-screen "paper on a desk" chrome so the content fills the printed page. */
    #payslip-print-area .payslip-stage {
        background: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    #payslip-print-area .payslip-paper {
        max-width: none !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 14mm !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    /* Banner on every page: fixed repeats per page but reserves no space, and box-decoration-break re-applies
       the content's top padding on each page fragment — that padding is the space the fixed banner needs.
       (display:table-header-group was tried first and does not repeat across a content break here.) */
    #payslip-print-area .payslip-paper:has(.payslip-proforma-watermark),
    #payslip-print-area .payslip-paper:has(.payslip-preview-watermark) {
        padding-top: 0 !important;
    }

    /* background-image off: the on-screen watermark tiles from the top of the content while the fixed tile
       below tiles from the top of each page — printing both gives every marked strook a shifted twin. */
    #payslip-print-area .payslip-content.payslip-proforma-watermark,
    #payslip-print-area .payslip-content.payslip-preview-watermark {
        padding-top: 12mm;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        background-image: none;
    }

    #payslip-print-area .payslip-proforma-banner,
    #payslip-print-area .payslip-preview-banner {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        z-index: 10;
    }

    /* Full-page watermark tile — no content to reserve space for, so position:fixed alone covers the
       whole physical page regardless of how little text it holds. Negative z-index keeps it behind
       the ordinary (non-positioned) payslip text/tables in paint order. PP-65 shares the positioning with
       PROFORMA and only swaps the background-image, so the two stay in sync if this behaviour changes. */
    #payslip-print-area .payslip-proforma-watermark-print,
    #payslip-print-area .payslip-preview-watermark-print {
        display: block;
        position: fixed;
        inset: 0;
        background-repeat: repeat;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        pointer-events: none;
        z-index: -1;
    }

    #payslip-print-area .payslip-proforma-watermark-print {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='240'><text x='50%25' y='50%25' fill='rgba(180,83,9,0.14)' font-family='Roboto,Helvetica,Arial,sans-serif' font-size='42' font-weight='800' text-anchor='middle' transform='rotate(-30 170 120)'>PROFORMA</text></svg>");
    }

    #payslip-print-area .payslip-preview-watermark-print {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='240'><text x='50%25' y='50%25' fill='rgba(29,78,216,0.14)' font-family='Roboto,Helvetica,Arial,sans-serif' font-size='42' font-weight='800' text-anchor='middle' transform='rotate(-30 170 120)'>CONCEPT</text></svg>");
    }

    /* The page-break section forces the following content onto a new page. */
    .payslip-page-break {
        border: 0 !important;
        margin: 0 !important;
        height: 0 !important;
        break-before: page;
        page-break-before: always;
    }

    /* The break lands before .payslip-page-break, so the new page opens with the tail of its (zero-height)
       section — including the mb-3 wrapper's margin. Measured: 11.8px of white below the banner. */
    #payslip-print-area .payslip-section:has(.payslip-page-break) {
        margin-bottom: 0 !important;
    }

    .payslip-page-break__label {
        display: none !important;
    }
}