/* Copyright (c) 2025-2026 EYC / PPN Corporation. All rights reserved. */
/* The receipt document's PAPER rules (A4 and the opt-in A5), shipped by the RCL that defines
   ReceiptDocument.

   This sheet is linked `media="print"` (wasm/finosOS.Wasm/wwwroot/index.html), so it never reaches
   a screen. Its older top half held the document's SCREEN rules (card gutters, table frame, total
   band) and therefore did nothing on screen, which is why the page looked unstyled and misaligned.
   The screen look now lives in ReceiptDocument.razor.css (always bundled, inside @media screen),
   and everything below is paper only. Hiding MainLayout's chrome stays in portal.css.

   Paper is black on white: a mono laser cannot be relied on to render a grey fill, so borders, not
   tints, carry the structure. The one exception is the QR, which stays black on white anyway.

   A4 decision (paper saving). A receipt is short, so the A4 sheet is laid out COMPACT: the bank
   transfer block (details + QR) and the signature share ONE row at the foot, the student sits on
   one line and the cells are tight. A normal receipt then fills only the upper half of the sheet and
   the lower half stays clean, so the sheet can be cut, or fed through the printer again for the next
   receipt, instead of wasting a whole page. A longer receipt simply continues down the page, and
   blocks never split across a page break (break-inside: avoid). A5 is the opt-in alternative for
   people who print on half sheets. */

@media print {
    @page {
        size: A4 portrait;
        margin: 10mm 12mm;
    }

    /* The paper-only title line above the card repeats the document box below it. The on-screen size
       picker and print button never reach paper. */
    .rc-print-head,
    .rc-print-bar {
        display: none !important;
    }

    .rc-doc {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: none !important;
        color: #000 !important;
        font-size: 10.5pt;
        line-height: 1.35;
        overflow: visible !important;
    }

    .rc-doc *,
    .rc-print-head * {
        color: #000 !important;
        background: none !important;
        box-shadow: none !important;
    }

    .rc-doc__header {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 0 0 3mm;
        border-bottom: 1px solid #000;
    }

    .rc-doc__org {
        flex: 1 1 0;
        min-width: 0;
    }

    .rc-doc__block {
        display: block;
    }

    .rc-doc__meta-item {
        display: inline-block;
    }

    .rc-doc__header .ad-card__title {
        display: block;
        font-size: 12pt;
        white-space: normal;
    }

    .rc-doc__header .ad-card__meta {
        font-size: 9.5pt;
        line-height: 1.3;
    }

    .rc-doc__logo {
        max-height: 14mm !important;
        max-width: 38mm !important;
        object-fit: contain;
    }

    .rc-doc__docbox {
        margin: 3mm 0;
        padding: 2mm 3mm;
        border: 1px solid #000;
        border-radius: 0;
    }

    .rc-doc__docbox-top {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 0 5mm;
    }

    .rc-doc__docbox-title {
        font-size: 10.5pt;
        font-weight: 700;
    }

    .rc-doc__docbox-no {
        font-size: 13pt;
        font-weight: 700;
    }

    .rc-doc__docbox-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0 5mm;
        margin-top: 1mm;
        font-size: 9.5pt;
    }

    .rc-doc__student {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 4mm;
        margin: 0 0 3mm;
        padding: 0;
    }

    .rc-doc__student-label {
        font-size: 9pt;
    }

    .rc-doc__student-name {
        font-size: 11.5pt;
        font-weight: 700;
    }

    .rc-doc__student-payer,
    .rc-doc__student-code {
        font-size: 9.5pt;
    }

    .rc-doc__table-scroll {
        overflow: visible;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .rc-doc__table {
        display: table !important;
        white-space: normal !important;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 10pt;
        margin: 0;
    }

    .rc-doc__table th,
    .rc-doc__table td {
        border: 1px solid #000;
        padding: 1.2mm 2mm;
        vertical-align: top;
        text-align: left;
    }

    .rc-doc__table th {
        font-weight: 700;
    }

    .rc-doc__table th:nth-child(1),
    .rc-doc__table td:nth-child(1) { width: 50%; }
    .rc-doc__table th:nth-child(2),
    .rc-doc__table td:nth-child(2) { width: 12%; }
    .rc-doc__table th:nth-child(3),
    .rc-doc__table td:nth-child(3) { width: 19%; text-align: right; }
    .rc-doc__table th:nth-child(4),
    .rc-doc__table td:nth-child(4) { width: 19%; text-align: right; }

    .rc-doc__table tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .rc-doc__table tbody {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .rc-doc__group-head td {
        font-weight: 700;
        border-bottom: none;
    }

    .rc-doc__group-subtotal td {
        font-weight: 700;
        border-top: 1px solid #000;
    }

    .rc-doc__adjust {
        padding-inline-start: 6mm !important;
    }

    .rc-doc__line-period {
        display: block;
        font-size: 9pt;
    }

    .rc-doc__all-reversed td {
        text-align: center;
        font-style: italic;
    }

    .rc-doc__table td.ad-td--money,
    .rc-doc__table th.ad-th--money {
        white-space: normal;
    }

    .rc-doc__totalband {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        margin: 0;
        padding: 1.5mm 0 0;
        border-top: 2px solid #000;
    }

    .rc-doc__totalband-label {
        font-size: 11pt;
        font-weight: 700;
    }

    .rc-doc__totalband-amount {
        font-size: 13pt;
        font-weight: 700;
    }

    .rc-doc__words {
        display: block;
        margin: 1mm 0 3mm;
        font-size: 10pt;
        font-style: italic;
    }

    .rc-doc__table .rc-doc__note {
        font-size: 9.5pt;
    }

    .rc-doc > .rc-doc__note {
        display: block !important;
        margin: 2mm 0 0;
        font-size: 9.5pt;
        white-space: pre-line;
    }

    /* One row: the bank transfer block (details, then the QR) on the left, the signature on the
       right. The block stays whole across a page break. */
    .rc-doc__settle {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 6mm;
        margin-top: 3mm;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .rc-doc__bank {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 5mm;
        margin: 0;
        padding: 0;
        border: none;
        font-size: 9.5pt;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .rc-doc__bank-info {
        display: flex;
        flex: 0 1 auto;
        flex-direction: column;
        gap: 0.5mm;
        min-width: 0;
    }

    .rc-doc__bank-info .ad-card__meta,
    .rc-doc__header .ad-card__meta {
        margin-left: 0;
    }

    .rc-doc__bank-info .ad-card__meta {
        font-size: inherit;
    }

    .rc-doc__bank .ad-card__title {
        font-size: 10.5pt;
        white-space: normal;
    }

    /* The QR is a fixed square so it can never be stretched, sized so each module is about 0.7mm
       (a 53-module code in 36mm, quiet zone included), which a phone reads from a printout without
       trouble. The button around it only exists for the screen's enlarge action. */
    .rc-doc__qr-btn {
        display: block;
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
        border: none;
        background: none;
    }

    .rc-doc__qr {
        display: block;
        flex: 0 0 auto;
        max-height: 36mm !important;
        max-width: 36mm !important;
        height: 36mm !important;
        width: 36mm !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    img.rc-doc__qr {
        object-fit: contain;
        image-rendering: pixelated;
    }

    .rc-doc__qr svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Signature: right-aligned block, centred text. From the top: an optional hand-written date, the
       signer's role, the "(Ký, ghi rõ họ tên)" hint, then empty space to sign in. No rule, so there
       is nothing to float away from the label. */
    .rc-doc__signature {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        width: 56mm;
        margin-left: auto;
        text-align: center;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .rc-doc__signature-date {
        font-size: 9.5pt;
        font-style: italic;
    }

    .rc-doc__signature-label {
        margin-top: 1mm;
        font-size: 10.5pt;
        font-weight: 700;
    }

    .rc-doc__signature-hint {
        font-size: 9pt;
        font-style: italic;
    }

    .rc-doc__signature-space {
        display: block;
        height: 18mm;
    }

    /* 80 mm thermal roll. The roll is continuous, so the page height is auto and only the width is fixed. Usable width
       is 74 mm after the 3 mm margins. The QR is 32 mm, so each of its 53 modules prints about 0.6 mm, which a phone reads
       from a counter printout. Blocks never split across a cut. */
    @page rc-80 {
        size: 80mm auto;
        margin: 3mm;
    }

    .rc-doc--80mm {
        page: rc-80;
    }

    .rc-doc--80mm.rc-doc {
        font-size: 8pt;
        line-height: 1.2;
    }

    .rc-doc--80mm .rc-doc__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5mm;
        padding: 0 0 1.5mm;
    }

    .rc-doc--80mm .rc-doc__logo {
        max-height: 10mm !important;
        max-width: 24mm !important;
    }

    .rc-doc--80mm .rc-doc__header .ad-card__title {
        font-size: 9pt;
        line-height: 1.2;
    }

    .rc-doc--80mm .rc-doc__header .ad-card__meta {
        font-size: 7pt;
        line-height: 1.2;
    }

    .rc-doc--80mm .rc-doc__docbox {
        margin: 1.5mm 0;
        padding: 1mm 0;
    }

    .rc-doc--80mm .rc-doc__docbox-title { font-size: 8.5pt; }
    .rc-doc--80mm .rc-doc__docbox-no { font-size: 9pt; }

    .rc-doc--80mm .rc-doc__docbox-meta {
        flex-direction: column;
        gap: 0;
        font-size: 7pt;
    }

    .rc-doc--80mm .rc-doc__student {
        flex-direction: column;
        gap: 0.5mm;
        margin: 0 0 1.5mm;
    }

    .rc-doc--80mm .rc-doc__student-label,
    .rc-doc--80mm .rc-doc__student-code,
    .rc-doc--80mm .rc-doc__student-payer { font-size: 7pt; }

    .rc-doc--80mm .rc-doc__table-scroll {
        overflow: visible !important;
    }

    .rc-doc--80mm .rc-doc__table {
        width: 100%;
        table-layout: fixed;
        font-size: 7.5pt;
        margin: 1mm 0;
    }

    .rc-doc--80mm .rc-doc__table th,
    .rc-doc--80mm .rc-doc__table td {
        padding: 0.5mm 0.5mm;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .rc-doc--80mm .rc-doc__totalband {
        margin: 0;
        padding-top: 1mm;
        border-top-width: 2px;
    }

    .rc-doc--80mm .rc-doc__totalband-label { font-size: 8.5pt; }
    .rc-doc--80mm .rc-doc__totalband-amount { font-size: 9.5pt; }

    .rc-doc--80mm .rc-doc__words {
        margin: 0 0 1.5mm;
        font-size: 7pt;
    }

    .rc-doc--80mm .rc-doc__settle {
        flex-direction: column;
        align-items: center;
        gap: 1.5mm;
        margin-top: 1.5mm;
    }

    .rc-doc--80mm .rc-doc__bank {
        flex-direction: column;
        align-items: center;
        font-size: 7pt;
    }

    .rc-doc--80mm .rc-doc__bank .ad-card__title { font-size: 8pt; }

    .rc-doc--80mm .rc-doc__qr {
        max-height: 32mm !important;
        max-width: 32mm !important;
        height: 32mm !important;
        width: 32mm !important;
    }

    .rc-doc--80mm > .rc-doc__note {
        margin: 1mm 0;
        font-size: 6.5pt;
        line-height: 1.2;
    }

    .rc-doc--80mm .rc-doc__table .rc-doc__note { font-size: 6.5pt; }

    .rc-doc--80mm .rc-doc__signature-space {
        height: 10mm;
    }

    .rc-doc--80mm .rc-doc__header,
    .rc-doc--80mm .rc-doc__docbox,
    .rc-doc--80mm .rc-doc__student,
    .rc-doc--80mm .rc-doc__totalband,
    .rc-doc--80mm .rc-doc__words,
    .rc-doc--80mm .rc-doc__bank {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    @page rc-a5 {
        size: A5 portrait;
        margin: 6.5mm;
    }

    .rc-doc--a5 {
        page: rc-a5;
    }

    .rc-doc--a5.rc-doc {
        font-size: 8.5pt;
        line-height: 1.25;
    }

    .rc-doc--a5 .rc-doc__header {
        padding: 0 0 4px;
        gap: 6px;
        align-items: center;
    }

    .rc-doc--a5 .rc-doc__logo {
        max-height: 12mm !important;
        max-width: 30mm !important;
    }

    .rc-doc--a5 .rc-doc__header .ad-card__title {
        font-size: 10pt;
        line-height: 1.2;
    }

    /* Address clamped to two lines with a plain max-height. `-webkit-line-clamp` (a -webkit-box) is
       avoided on purpose: inside a header that must not break across pages, current Chromium
       fragments it and the receipt spills onto three A5 sheets. */
    .rc-doc--a5 .rc-doc__header .ad-card__meta {
        display: block;
        max-height: 2.4em;
        overflow: hidden;
        font-size: 7.5pt;
        line-height: 1.2;
    }

    .rc-doc--a5 .rc-doc__docbox {
        margin: 2.5mm 0 2mm;
        padding: 3px 6px;
    }

    .rc-doc--a5 .rc-doc__docbox-title { font-size: 9pt; }
    .rc-doc--a5 .rc-doc__docbox-no { font-size: 10.5pt; }

    .rc-doc--a5 .rc-doc__docbox-meta {
        gap: 0 8px;
        margin-top: 1px;
        font-size: 7.5pt;
    }

    .rc-doc--a5 .rc-doc__student {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 8px;
        margin: 0 0 2mm;
    }

    .rc-doc--a5 .rc-doc__student-label { font-size: 7.5pt; }
    .rc-doc--a5 .rc-doc__student-name { font-size: 9.5pt; }
    .rc-doc--a5 .rc-doc__student-payer,
    .rc-doc--a5 .rc-doc__student-code { font-size: 7.5pt; }

    .rc-doc--a5 .rc-doc__table {
        font-size: 8.5pt;
        margin: 1.5mm 0;
    }

    .rc-doc--a5 .rc-doc__table th,
    .rc-doc--a5 .rc-doc__table td {
        padding: 1.5px 4px;
        line-height: 1.25;
    }

    .rc-doc--a5 .rc-doc__table th:nth-child(1),
    .rc-doc--a5 .rc-doc__table td:nth-child(1) { width: 53%; }
    .rc-doc--a5 .rc-doc__table th:nth-child(2),
    .rc-doc--a5 .rc-doc__table td:nth-child(2) { width: 9%; }
    .rc-doc--a5 .rc-doc__table th:nth-child(3),
    .rc-doc--a5 .rc-doc__table td:nth-child(3) { width: 19%; }
    .rc-doc--a5 .rc-doc__table th:nth-child(4),
    .rc-doc--a5 .rc-doc__table td:nth-child(4) { width: 19%; }

    .rc-doc--a5 .rc-doc__totalband {
        margin: 0;
        padding-top: 2px;
        border-top-width: 2px;
    }

    .rc-doc--a5 .rc-doc__totalband-label { font-size: 9.5pt; }
    .rc-doc--a5 .rc-doc__totalband-amount { font-size: 11pt; }

    .rc-doc--a5 .rc-doc__words {
        margin: 0 0 2mm;
        font-size: 8pt;
    }

    /* On the narrower A5 sheet the signature drops under the bank block instead of beside it. */
    .rc-doc--a5 .rc-doc__settle {
        flex-direction: column;
        align-items: stretch;
        gap: 2mm;
        margin-top: 1.5mm;
    }

    .rc-doc--a5 .rc-doc__bank {
        flex-direction: row;
        justify-content: space-between;
        gap: 4mm;
        font-size: 7.5pt;
    }

    .rc-doc--a5 .rc-doc__bank .ad-card__title { font-size: 8.5pt; }

    .rc-doc--a5 .rc-doc__qr {
        max-height: 28mm !important;
        max-width: 28mm !important;
        height: 28mm !important;
        width: 28mm !important;
    }

    .rc-doc--a5 > .rc-doc__note {
        margin: 1mm 0;
        font-size: 7.5pt;
        line-height: 1.25;
    }

    .rc-doc--a5 .rc-doc__table .rc-doc__note { font-size: 7.5pt; }

    .rc-doc--a5 .rc-doc__signature {
        width: 42mm;
    }

    .rc-doc--a5 .rc-doc__signature-date,
    .rc-doc--a5 .rc-doc__signature-hint { font-size: 7.5pt; }
    .rc-doc--a5 .rc-doc__signature-label { font-size: 8.5pt; }

    .rc-doc--a5 .rc-doc__signature-space {
        height: 11mm;
    }

    .rc-doc--a5 .rc-doc__header,
    .rc-doc--a5 .rc-doc__docbox,
    .rc-doc--a5 .rc-doc__student,
    .rc-doc--a5 .rc-doc__totalband,
    .rc-doc--a5 .rc-doc__words,
    .rc-doc--a5 .rc-doc__bank,
    .rc-doc--a5 .rc-doc__signature {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}