/* ==========================================================================
   Payment Print Receipts  —  payment_print_receipts.css
   --------------------------------------------------------------------------
   PAPER-SIZE INDEPENDENT fee receipt design.

   The receipt is NOT designed for a specific paper size.  It is anchored to
   the browser's *printable area* (whatever size the user picks in the print
   dialog: A5, A4, Letter, Legal, …) and fills that area responsively.

   How it works:
     • The receipt card is `position: fixed; top/right/bottom/left: 0`, which
       stretches it to exactly the printable area of the SELECTED paper size.
     • The card is a flex column; the signatures/footer use `margin-top:auto`
       so content distributes down the full page (no giant empty bottom).
     • Typography, spacing and padding use `clamp()` + viewport units so the
       design grows/shrinks proportionally between small and large papers.
     • `.ppr-history-page` (detail print) stays in normal flow so it can flow
       across multiple pages when the statement is long.

   All selectors are scoped to the `ppr-*` prefix (Payment-Print-Receipts) so
   they never clash with the shared print.css rules or other print pages.
   Covers three document types from the existing Rust markup:
     1. Fee Receipt (current-bill / spot-payment)      -> .ppr-page
     2. Summary Receipt (total-fees summary mode)      -> .ppr-page
     3. Fee History / Detail (history_fee.rs)          -> .ppr-history-page
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 1 — SCREEN PREVIEW
   A centred, responsive card.  On screen we cap the width so it looks like a
   clean paper preview, but the card can grow with the container.  (The print
   block below overrides sizing entirely with position:fixed, so this cap is
   screen-only.)
   ────────────────────────────────────────────────────────────────────────── */

/* Outer backdrop */
.ppr-body {
    background: #eef0f2;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 16px 48px;
    font-family: "Inter", "Roboto", Arial, sans-serif;
    color: #1a1a1a;
}

/* Paper card — receipt / bill */
.ppr-page,
.ppr-history-page {
    background: #fff;
    width: 100%;
    max-width: 46rem; /* screen-only preview cap; ignored in print */
    padding: 28px 30px;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.14);
    border-radius: 6px;
    border: 1px solid #e1e3e6;
    position: relative;
    overflow: hidden; /* keeps watermark inside on screen */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 2 — WATERMARK LOGO  (kept; centered; behind content; no layout height)
   ────────────────────────────────────────────────────────────────────────── */
.ppr-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 50%;
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 3 — SCHOOL HEADER (centred at the top)
   ────────────────────────────────────────────────────────────────────────── */
.ppr-school-header {
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #0d1b2a;
    position: relative;
    z-index: 1;
}

.ppr-school-name {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #0d1b2a;
    line-height: 1.2;
    margin: 0 0 4px;
}

.ppr-school-address {
    font-size: 13px;
    color: #3a3a3a;
    line-height: 1.5;
    margin-bottom: 2px;
}

.ppr-school-contact {
    font-size: 13px;
    color: #3a3a3a;
    line-height: 1.5;
}

.ppr-school-motto {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-top: 3px;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 4 — DOCUMENT TITLE BLOCK
   ────────────────────────────────────────────────────────────────────────── */
.ppr-title-block {
    text-align: center;
    padding: 6px 0;
    margin: 6px 0 14px;
    position: relative;
    z-index: 1;
}

.ppr-doc-title {
    display: inline-block;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #0d1b2a;
    line-height: 1.3;
    border-bottom: 2px solid #0d1b2a;
    padding: 0 4px 4px;
}

.ppr-academic-period {
    font-size: 13px;
    color: #444;
    font-style: italic;
    margin-top: 5px;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 5 — META BAR  (Date | Receipt No)  — full width, bordered
   ────────────────────────────────────────────────────────────────────────── */
.ppr-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #b8bcc2;
    border-radius: 6px;
    padding: 10px 14px;
    background: #f7f8fa;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
}

.ppr-meta-left,
.ppr-meta-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 6 — SHARED LABEL / VALUE TYPOGRAPHY
   ────────────────────────────────────────────────────────────────────────── */
.ppr-label {
    font-weight: 700;
    font-size: 13px;
    color: #2c3e50;
    white-space: nowrap;
}

.ppr-value {
    font-size: 13px;
    color: #1a1a1a;
    font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 7 — STUDENT INFO (full-width bordered 2-column grid)
   ────────────────────────────────────────────────────────────────────────── */
.ppr-student-section {
    border: 1px solid #b8bcc2;
    border-radius: 6px;
    background: #fafbfc;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 9px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
}

.ppr-field {
    display: flex;
    align-items: baseline;
    gap: 6px;
    overflow: visible;
    min-width: 0;
}

.ppr-field .ppr-label {
    flex-shrink: 0;
    white-space: nowrap;
}

.ppr-field .ppr-value {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 8 — FEE TABLE  (full width, visible borders, readable type)
   ────────────────────────────────────────────────────────────────────────── */
.ppr-fee-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    font-size: 13px;
    position: relative;
    z-index: 1;
    border: 1.5px solid #6b7280;
    box-sizing: border-box;
}

.ppr-fee-table thead tr {
    background-color: #dfe3e8;
}

.ppr-fee-table th {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #9aa1aa;
    text-align: left;
    color: #1a1a2e;
    background: #dfe3e8;
    overflow-wrap: anywhere;
}

.ppr-fee-table td {
    padding: 10px 12px;
    border: 1px solid #c4c9d1;
    vertical-align: middle;
    color: #1a1a1a;
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* Alignment helpers */
.ppr-fee-table .ppr-right,
.ppr-fee-table th.ppr-right {
    text-align: right;
    white-space: nowrap;
}

.ppr-fee-table .ppr-center,
.ppr-fee-table th.ppr-center {
    text-align: center;
}

/* Total / summary row */
.ppr-fee-total-row td {
    font-weight: 700;
    background-color: #eceff3;
    border-top: 2px solid #555c66;
    border-bottom: 2px solid #555c66;
    font-size: 14px;
}

/* Fee-item sub-row inside a fee-breakdown cell */
.ppr-fee-item {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-size: 12px;
}

.ppr-fee-amount {
    font-weight: 600;
    margin-left: 12px;
    white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 9 — HISTORY / DETAIL  (sections, toggle controls, summary)
   ────────────────────────────────────────────────────────────────────────── */
.ppr-section {
    margin-top: 16px;
    position: relative;
    z-index: 1;
}

.ppr-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0d1b2a;
    border-bottom: 1.5px solid #8a919c;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

/* Toggle row — screen only, hidden during print */
.ppr-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 4px;
}

.ppr-toggle-label {
    font-size: 12px;
    font-weight: 600;
    color: #2c3e50;
}

.ppr-toggle-switch input[type="checkbox"] {
    width: 36px;
    height: 20px;
    cursor: pointer;
    accent-color: #2c5282;
}

/* Summary block at the foot of the history statement */
.ppr-history-summary {
    margin-top: 10px;
    page-break-inside: avoid;
    break-inside: avoid;
}

.ppr-history-summary .ppr-fee-table td {
    font-weight: 600;
    padding: 10px 12px;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 10 — SIGNATURES  (screen: follows content; print: pinned to bottom)
   ────────────────────────────────────────────────────────────────────────── */
.ppr-signatures {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 30px;
    padding: 14px 8px 4px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
}

.ppr-sig-block {
    width: 42%;
    text-align: center;
    border-top: 1.5px solid #333;
    padding-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    box-sizing: border-box;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 11 — SCREEN-ONLY CONTROLS
   ────────────────────────────────────────────────────────────────────────── */
.ppr-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 26px;
}

.ppr-btn {
    padding: 9px 30px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #2c5282;
    color: #fff;
    letter-spacing: 0.4px;
    transition: background 0.18s ease;
}

.ppr-btn:hover {
    background: #1a365d;
}

.ppr-btn.ppr-btn-cancel {
    background: #c53030;
}
.ppr-btn.ppr-btn-cancel:hover {
    background: #9b2c2c;
}

/* Generic hide-on-print helper */
.ppr-no-print {
    /* governed only by the @media print block below */
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 12 — PRINT  (paper-size independent)

   • @page only sets safe margins — NO size is forced, so the user's paper
     selection (A5 / A4 / Letter / Legal / …) controls the page.
   • The receipt card is anchored to the printable area via position:fixed
     with all four offsets 0 — it therefore fills the ENTIRE current page
     (width AND height) regardless of the selected paper size.
   • Typography / spacing scale with clamp() + viewport units so A5 stays
     readable and A4 grows proportionally.
   ══════════════════════════════════════════════════════════════════════════ */

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

@media print {
    /* ── Box sizing: padding/borders must never widen the page ─────────── */
    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    /* ── Page box = whatever the user selected (A5/A4/Letter/…) ────────── */
    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        font-family: "Inter", "Roboto", Arial, sans-serif !important;
        color: #000 !important;
    }

    /* ── Reset Yew ancestor wrappers so nothing constrains the receipt ──── */
    body > *,
    body > * > *,
    body > * > * > *,
    body > * > * > * > *,
    body > * > * > * > * > *,
    body > * > * > * > * > * > * {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
        zoom: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ── Hide screen-only elements ─────────────────────────────────────── */
    .ppr-actions,
    .ppr-no-print,
    .ppr-toggle-row {
        display: none !important;
    }

    .site_header,
    #sidebarNav,
    .sidebar,
    nav,
    .navbar,
    header:not(.print-header),
    footer:not(.print-footer),
    .back-to-top,
    .backtotop,
    .back-to-top-btn,
    .modern-backtotop,
    .notification-bell,
    .user-profile-menu,
    .print-no-print,
    .no-print,
    .d-print-none,
    #loading {
        display: none !important;
    }

    /* ── Backdrop: transparent, full-width block host (no flex shrink) ─── */
    .ppr-body {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        color: #000 !important;
    }

    /* ── Receipt card: one physical page, full printable width ──────────── */
    .ppr-page {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: clamp(4mm, 4vh, 9mm) clamp(5mm, 4vw, 10mm) clamp(3mm, 3vh, 6mm) !important;
        box-sizing: border-box !important;
        border: 1.5px solid #777 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: white !important;
        overflow: visible !important;
        break-after: page !important;
        page-break-after: always !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ── Normal Fee Payment Receipt: fill the full printable page height ──
       Scoped to .ppr-page WITHOUT .ppr-bus-receipt so the Bus Fee Receipt
       (which carries its own inline print rules) is left untouched.

       position:fixed with all four offsets 0 stretches the card to exactly
       the printable area of the SELECTED paper size (A5/A4/Letter/…), so the
       outer border always reaches the bottom of the page and the signatures
       sit near the bottom via margin-top:auto.  (min-height:100vh is NOT used
       because vh is unreliable for the print page height on smaller papers.) */
    .ppr-page:not(.ppr-bus-receipt) {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .ppr-page:not(.ppr-bus-receipt) .ppr-signatures {
        margin-top: auto !important;
    }

    /* ── History / detail: normal flow so it can flow across pages ─────── */
    .ppr-history-page {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        margin: 0 auto !important;
        padding: clamp(4mm, 4vh, 9mm) clamp(5mm, 4vw, 10mm) clamp(3mm, 3vh, 6mm) !important;
        box-sizing: border-box !important;
        border: 1.2px solid #777 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ── Watermark: kept, centered, behind content, responsive, no layout ─ */
    .ppr-watermark {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: clamp(60mm, 50vw, 110mm) !important;
        height: clamp(60mm, 50vw, 110mm) !important;
        object-fit: contain !important;
        opacity: 0.14 !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    /* ── School header ─────────────────────────────────────────────────── */
    .ppr-school-header {
        display: block !important;
        text-align: center !important;
        margin: 0 0 clamp(5mm, 2.5vh, 8mm) !important;
        padding: 0 0 clamp(3mm, 1.5vh, 5mm) !important;
        border-bottom: 2px solid #0d1b2a !important;
        position: relative !important;
        z-index: 1 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ppr-school-name {
        display: block !important;
        font-size: clamp(20pt, 5vw, 30pt) !important;
        font-weight: 800 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        color: #0d1b2a !important;
        line-height: 1.15 !important;
        margin: 0 0 clamp(1.5mm, 0.8vh, 3mm) !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ppr-school-address {
        display: block !important;
        font-size: clamp(11pt, 2.6vw, 14pt) !important;
        color: #333 !important;
        line-height: 1.4 !important;
        margin: 0 0 1pt !important;
        padding: 0 !important;
    }

    .ppr-school-contact {
        display: block !important;
        font-size: clamp(11pt, 2.6vw, 14pt) !important;
        color: #333 !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ppr-school-motto {
        display: block !important;
        font-size: clamp(10pt, 2.2vw, 12.5pt) !important;
        color: #555 !important;
        font-style: italic !important;
        margin-top: clamp(1mm, 0.6vh, 2mm) !important;
    }

    /* ── Document title block ──────────────────────────────────────────── */
    .ppr-title-block {
        display: block !important;
        text-align: center !important;
        padding: clamp(2mm, 1vh, 4mm) 0 !important;
        margin: clamp(3mm, 1.5vh, 5mm) 0 clamp(4mm, 2vh, 6mm) !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .ppr-doc-title {
        display: inline-block !important;
        font-size: clamp(18pt, 4.2vw, 26pt) !important;
        font-weight: 800 !important;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
        color: #0d1b2a !important;
        line-height: 1.25 !important;
        border-bottom: 1px solid #0d1b2a !important;
        padding: 0 4pt clamp(1pt, 0.4vh, 2pt) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ppr-academic-period {
        display: block !important;
        font-size: clamp(11pt, 2.4vw, 14pt) !important;
        color: #444 !important;
        font-style: italic !important;
        margin-top: clamp(1.5mm, 0.8vh, 3mm) !important;
    }

    /* ── Meta bar: full-width bordered row (Date | Receipt No) ─────────── */
    .ppr-meta-bar {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        border: 1px solid #8a919b !important;
        border-radius: 3pt !important;
        background: #f3f4f6 !important;
        padding: clamp(3mm, 1.2vh, 5mm) clamp(3mm, 1.2vw, 5mm) !important;
        margin: 0 0 clamp(4mm, 2vh, 6mm) !important;
        position: relative !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ppr-meta-left,
    .ppr-meta-right {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: clamp(2pt, 0.5vw, 5pt) !important;
        min-width: 0 !important;
    }

    /* ── Label / value typography ──────────────────────────────────────── */
    .ppr-label {
        display: inline !important;
        font-weight: 700 !important;
        font-size: clamp(11pt, 2.5vw, 14pt) !important;
        color: #26303c !important;
        white-space: nowrap !important;
        line-height: 1.4 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ppr-value {
        display: inline !important;
        font-size: clamp(11pt, 2.5vw, 14pt) !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        line-height: 1.4 !important;
    }

    /* ── Student info: full-width bordered responsive grid ─────────────── */
    .ppr-student-section {
        border: 1px solid #8a919b !important;
        border-radius: 3pt !important;
        background: #fafbfc !important;
        padding: clamp(3mm, 1.2vh, 5mm) clamp(3mm, 1.2vw, 5mm) !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: clamp(5mm, 2.5vw, 12mm) !important;
        row-gap: clamp(2mm, 0.8vh, 4mm) !important;
        margin: 0 0 clamp(4mm, 2vh, 6mm) !important;
        position: relative !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ppr-field {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: clamp(2pt, 0.5vw, 5pt) !important;
        overflow: visible !important;
        min-width: 0 !important;
    }

    .ppr-field .ppr-label {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .ppr-field .ppr-value {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* ── Fee table: full width, responsive, clear borders ──────────────── */
    .ppr-fee-table {
        display: table !important;
        width: 100% !important;
        max-width: 100% !important;
        border-collapse: collapse !important;
        font-size: clamp(10.5pt, 2.4vw, 13pt) !important;
        line-height: 1.4 !important;
        border: 1.5pt solid #555c66 !important;
        table-layout: fixed !important;
        page-break-inside: auto !important;
        position: relative !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ppr-fee-table thead {
        display: table-header-group !important;
    }

    .ppr-fee-table tr {
        display: table-row !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .ppr-fee-table thead tr {
        background-color: #dfe3e8 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ppr-fee-table th {
        display: table-cell !important;
        padding: clamp(3mm, 1.2vh, 5mm) clamp(3mm, 1.2vw, 5mm) !important;
        font-size: clamp(10.5pt, 2.4vw, 13pt) !important;
        font-weight: 700 !important;
        border: 1px solid #9aa1aa !important;
        text-align: left !important;
        color: #1a1a2e !important;
        background-color: #dfe3e8 !important;
        overflow-wrap: anywhere !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ppr-fee-table td {
        display: table-cell !important;
        padding: clamp(3mm, 1.2vh, 5mm) clamp(3mm, 1.2vw, 5mm) !important;
        border: 1px solid #c4c9d1 !important;
        vertical-align: middle !important;
        color: #1a1a1a !important;
        font-size: clamp(10.5pt, 2.4vw, 13pt) !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    .ppr-fee-table .ppr-right {
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
    .ppr-fee-table .ppr-center {
        text-align: center !important;
    }
    .ppr-fee-table th.ppr-right {
        text-align: right !important;
    }
    .ppr-fee-table th.ppr-center {
        text-align: center !important;
    }

    /* Total row */
    .ppr-fee-total-row td {
        font-weight: 700 !important;
        background-color: #eceff3 !important;
        border-top: 2pt solid #555 !important;
        border-bottom: 2pt solid #555 !important;
        font-size: clamp(12pt, 2.8vw, 15pt) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Fee sub-items */
    .ppr-fee-item {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 1.5pt 0 !important;
        font-size: clamp(9.5pt, 2.2vw, 12pt) !important;
    }

    .ppr-fee-amount {
        font-weight: 600 !important;
        margin-left: 10pt !important;
        white-space: nowrap !important;
    }

    /* ── History sections ──────────────────────────────────────────────── */
    .ppr-section {
        display: block !important;
        margin-top: clamp(3mm, 1.5vh, 5mm) !important;
        page-break-inside: auto !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .ppr-section-title {
        display: block !important;
        font-size: clamp(11pt, 2.5vw, 14pt) !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        color: #0d1b2a !important;
        border-bottom: 1px solid #8a919b !important;
        padding-bottom: 2pt !important;
        margin: clamp(2mm, 1vh, 4mm) 0 clamp(2mm, 0.8vh, 3mm) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ppr-history-summary {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .ppr-history-summary .ppr-fee-table td {
        font-weight: 600 !important;
        padding: clamp(2mm, 0.7vh, 3mm) clamp(3mm, 1.2vw, 5mm) !important;
    }

    /* ── Signatures / footer: pinned to the bottom of the flex page ────── */
    .ppr-signatures {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        margin-top: clamp(6mm, 3vh, 10mm) !important;
        padding: clamp(3mm, 1.5vh, 5mm) 4pt 2pt !important;
        position: relative !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .ppr-sig-block {
        display: block !important;
        width: 40% !important;
        text-align: center !important;
        border-top: 1.2px solid #333 !important;
        padding-top: clamp(1mm, 0.5vh, 2mm) !important;
        font-size: clamp(11pt, 2.5vw, 14pt) !important;
        font-weight: 600 !important;
        color: #222 !important;
        box-sizing: border-box !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}