/* ==========================================================================
   Payment Print Receipts  —  payment_print_receipts.css
   All classes are scoped to the  ppr-*  prefix so they never clash with
   the shared print.css rules used by other print pages.

   Covers three document types:
     1. Fee Receipt  (current-bill / spot-payment)
     2. Summary Receipt  (total-fees summary mode inside fee_reciept.rs)
     3. Fee History / Detail Print  (history_fee.rs)
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 1 — SCREEN PREVIEW
   White card centred on a light-grey background, looks like a paper doc.
   ══════════════════════════════════════════════════════════════════════════ */

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

/* Paper card — receipt / bill */
.ppr-page {
    background: #fff;
    width: 100%;
    max-width: 680px;
    padding: 40px 48px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    position: relative;
    overflow: hidden; /* keeps watermark inside on screen */
}

/* Paper card — detail / history (slightly wider for the extra columns) */
.ppr-history-page {
    background: #fff;
    width: 100%;
    max-width: 780px;
    padding: 40px 48px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 2 — WATERMARK LOGO
   ══════════════════════════════════════════════════════════════════════════ */

.ppr-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    object-fit: contain;
    border-radius: 50%;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 3 — SCHOOL HEADER  (centred at the top of every document)
   ══════════════════════════════════════════════════════════════════════════ */

.ppr-school-header {
    text-align: center;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.ppr-school-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #0d1b2a;
    line-height: 1.25;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ppr-school-address {
    font-size: 12px;
    color: #4a4a4a;
    line-height: 1.5;
    margin-bottom: 2px;
}

.ppr-school-contact {
    font-size: 12px;
    color: #4a4a4a;
    line-height: 1.5;
}

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

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 4 — DOCUMENT TITLE BLOCK
   Bordered top and bottom — "FEE RECEIPT" or "FEE HISTORY REPORT"
   ══════════════════════════════════════════════════════════════════════════ */

.ppr-title-block {
    text-align: center;
    padding: 8px 0;
    margin: 12px 0;
    position: relative;
    z-index: 1;
}

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

.ppr-academic-period {
    font-size: 11px;
    color: #555;
    font-style: italic;
    margin-top: 3px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 5 — META BAR  (Date  |  Receipt No)
   ══════════════════════════════════════════════════════════════════════════ */

.ppr-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

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

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 6 — SHARED LABEL / VALUE TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════════════ */

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

.ppr-value {
    font-size: 12px;
    color: #1a1a1a;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 7 — STUDENT INFO GRID
   2-column layout:  left = student/class,  right = father/phone
   ══════════════════════════════════════════════════════════════════════════ */

.ppr-student-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 6px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.ppr-field {
    display: flex;
    align-items: baseline;
    gap: 6px;
    overflow: hidden;
}

.ppr-field .ppr-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 8 — FEE TABLE
   Used for the fee-detail table, payment-history table, and discount table.
   ══════════════════════════════════════════════════════════════════════════ */

.ppr-fee-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    font-size: 12px;
    position: relative;
    z-index: 1;
}

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

.ppr-fee-table th {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #c4c4c4;
    text-align: left;
    color: #1a1a2e;
}

.ppr-fee-table td {
    padding: 7px 10px;
    border: 1px solid #d8d8d8;
    vertical-align: middle;
    color: #1a1a1a;
}

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

.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: #f5f5f5;
    border-top: 2px solid #888;
}

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

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

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 9 — HISTORY-SPECIFIC: sections & toggle controls
   ══════════════════════════════════════════════════════════════════════════ */

.ppr-section {
    margin-top: 18px;
    position: relative;
    z-index: 1;
}

.ppr-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0d1b2a;
    border-bottom: 1.5px solid #bbb;
    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 (total-paid / outstanding) at foot of payment-history */
.ppr-history-summary {
    margin-top: 0;
    page-break-inside: avoid;
    break-inside: avoid;
}

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

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 10 — SIGNATURES
   ══════════════════════════════════════════════════════════════════════════ */

.ppr-signatures {
    display: flex;
    justify-content: space-between;
    margin-top: 52px;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.ppr-sig-block {
    min-width: 130px;
    text-align: center;
    border-top: 1px solid #555;
    padding-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 11 — SCREEN-ONLY CONTROLS  (Print / Cancel buttons)
   ══════════════════════════════════════════════════════════════════════════ */

.ppr-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
}

.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 (same purpose as .print-no-print) */
.ppr-no-print {
    /* governed only by the @media print block below */
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 12 — PRINT MEDIA
   Goal: printed page looks identical to the screen preview, with a visible
   border around the receipt card and the same internal padding/spacing.
   ══════════════════════════════════════════════════════════════════════════ */

@media print {
    /* ── Page setup — no forced size, respects user's paper selection ── */
    @page {
        margin: 10mm;
    }

    /* ── Reset Yew ancestor wrappers ────────────────────────────────────── */
    html,
    body {
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        font-family: "Inter", "Roboto", Arial, sans-serif !important;
    }

    body > *,
    body > * > *,
    body > * > * > *,
    body > * > * > * > *,
    body > * > * > * > * > *,
    body > * > * > * > * > * > * {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-top: 0 !important;
        margin-top: 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: full height, pass-through for card ──────────────────── */
    .ppr-body {
        background: white !important;
        height: 0 !important; /* collapsed — card is position:fixed */
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        color: #1a1a1a !important;
    }

    /* ── Receipt card: fixed to fill ENTIRE printable area ─────────────── */
    /* position:fixed in @media print = fixed to the page box (inside @page  */
    /* margins). top/left/right/bottom:0 fills it exactly on any paper size. */
    .ppr-page,
    .ppr-history-page {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 24px 32px !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border: 1.5px solid #aaa !important;
        overflow: hidden !important;
        background: white !important;
        box-sizing: border-box !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ── School header ──────────────────────────────────────────────────── */
    .ppr-school-header {
        display: block !important;
        text-align: center !important;
        margin-bottom: 10px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .ppr-school-name {
        display: block !important;
        font-size: 8pt !important;
        font-weight: 700 !important;
        letter-spacing: 0.6px !important;
        text-transform: uppercase !important;
        color: #0d1b2a !important;
        line-height: 1.25 !important;
        margin: 0 0 4px !important;
        white-space: normal !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ppr-school-address {
        display: block !important;
        font-size: 8pt !important;
        color: #444 !important;
        line-height: 1.5 !important;
        margin-bottom: 1px !important;
    }

    .ppr-school-contact {
        display: block !important;
        font-size: 8pt !important;
        color: #444 !important;
        line-height: 1.5 !important;
    }

    .ppr-school-motto {
        display: block !important;
        font-size: 7.5pt !important;
        color: #666 !important;
        font-style: italic !important;
        margin-top: 2px !important;
    }

    /* ── Document title block ───────────────────────────────────────────── */
    .ppr-title-block {
        display: block !important;
        text-align: center !important;
        padding: 6px 0 !important;
        margin: 10px 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .ppr-doc-title {
        display: inline-block !important;
        font-size: 10pt !important;
        font-weight: 700 !important;
        letter-spacing: 4px !important;
        text-transform: uppercase !important;
        color: #0d1b2a !important;
        line-height: 1.3 !important;
        border-bottom: 1px solid #0d1b2a !important;
        padding-bottom: 3px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ppr-academic-period {
        display: block !important;
        font-size: 8pt !important;
        color: #555 !important;
        font-style: italic !important;
        margin-top: 2px !important;
    }

    /* ── Meta bar (Date | Receipt No) ───────────────────────────────────── */
    .ppr-meta-bar {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 5px 0 !important;
        border-bottom: 1px solid #aaa !important;
        margin-bottom: 10px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .ppr-meta-left,
    .ppr-meta-right {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
    }

    /* ── Label / value typography ───────────────────────────────────────── */
    .ppr-label {
        display: inline !important;
        font-weight: 700 !important;
        font-size: 9pt !important;
        color: #2c3e50 !important;
        white-space: nowrap !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ppr-value {
        display: inline !important;
        font-size: 9pt !important;
        color: #1a1a1a !important;
    }

    /* ── Student info grid ──────────────────────────────────────────────── */
    .ppr-student-section {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 20px !important;
        row-gap: 4px !important;
        margin-bottom: 12px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .ppr-field {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 4px !important;
        overflow: visible !important;
    }

    .ppr-field .ppr-value {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* ── Fee table ──────────────────────────────────────────────────────── */
    .ppr-fee-table {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 9pt !important;
        page-break-inside: auto !important;
        position: relative !important;
        z-index: 1 !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;
    }

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

    .ppr-fee-table th {
        display: table-cell !important;
        padding: 8px 12px !important;
        font-size: 9pt !important;
        font-weight: 600 !important;
        border: 1px solid #c4c4c4 !important;
        text-align: left !important;
        color: #1a1a2e !important;
        background-color: #ececec !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ppr-fee-table td {
        display: table-cell !important;
        padding: 8px 12px !important;
        border: 1px solid #d8d8d8 !important;
        vertical-align: middle !important;
        color: #1a1a1a !important;
        font-size: 9pt !important;
        text-align: left !important;
    }

    .ppr-fee-table .ppr-right {
        text-align: right !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: #f5f5f5 !important;
        border-top: 2px solid #888 !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: 2px 0 !important;
        font-size: 8pt !important;
    }

    .ppr-fee-amount {
        font-weight: 600 !important;
        margin-left: 12px !important;
    }

    /* ── History sections ───────────────────────────────────────────────── */
    .ppr-section {
        display: block !important;
        margin-top: 12px !important;
        page-break-inside: auto !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .ppr-section-title {
        display: block !important;
        font-size: 9pt !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        color: #0d1b2a !important;
        border-bottom: 1.5px solid #bbb !important;
        padding-bottom: 3px !important;
        margin-bottom: 6px !important;
        margin-top: 10px !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: 6px 10px !important;
    }

    /* ── Signatures: fixed at the bottom of the page ──────────────────── */
    .ppr-signatures {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        margin-top: 125px !important; /* pushes to bottom inside flex column */
        padding-top: 16px !important;
        padding-bottom: 8px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .ppr-sig-block {
        display: block !important;
        min-width: 100px !important;
        text-align: center !important;
        border-top: 1px solid #555 !important;
        padding-top: 6px !important;
        font-size: 9pt !important;
        font-weight: 600 !important;
        color: #333 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 13 — A5 PRINT OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */

@media print and (max-width: 148mm) {
    /* A5 paper — slightly smaller fonts, tighter padding, card still fills full width */
    @page {
        margin: 6mm;
    }

    .ppr-page,
    .ppr-history-page {
        padding: 16px 20px !important; /* tighter padding for A5 */
    }

    .ppr-school-name {
        font-size: 15pt !important;
    }
    .ppr-doc-title {
        font-size: 9pt !important;
        letter-spacing: 3px !important;
    }
    .ppr-school-address,
    .ppr-school-contact {
        font-size: 8pt !important;
    }
    .ppr-label,
    .ppr-value {
        font-size: 8pt !important;
    }
    .ppr-fee-table th {
        font-size: 8pt !important;
        padding: 7px 10px !important;
    }
    .ppr-fee-table td {
        font-size: 8pt !important;
        padding: 7px 10px !important;
    }
    .ppr-sig-block {
        font-size: 8pt !important;
    }
}