/* ============================================================================
   receipt-voucher.css — how the سند قبض looks on paper.

   Page setup is NOT here: site.css already hides everything but `.print-only`
   when printing, and the voucher carries that class. This file only styles the
   document itself.
   ========================================================================== */

/* The voucher exists in the DOM at all times so printing needs no extra step;
   on screen the user works in the normal entry form. */
.receipt-voucher { display: none; }

@media print {

    /* site.css hides the rest of the page with visibility:hidden, which leaves
       it occupying its full height — a 726px form under an absolutely
       positioned voucher is what produced a second, blank sheet. Take the
       screen out of the layout entirely, but only when a voucher is replacing
       it, so ordinary forms keep printing as before. */
    .form-input-view:has(.receipt-voucher) > *:not(.receipt-voucher) {
        display: none !important;
    }
    .form-input-view:has(.receipt-voucher) { min-height: 0 !important; height: auto !important; }

    /* With nothing left underneath, the voucher no longer needs to float over
       the page — static flow keeps it to exactly one sheet. */
    .receipt-voucher.print-only { position: static; }

    .receipt-voucher {
        display: block;
        padding: 10mm 8mm;
        font-size: 11pt;
        line-height: 1.7;
        color: #16202a;
    }

    /* ---- Letterhead ------------------------------------------------------ */
    .receipt-voucher__head {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding-bottom: 10px;
        border-bottom: 2px solid #14356b;
    }

    /* The stored logo is a full-size photo; cap it so it cannot push the
       voucher onto a second sheet. */
    .receipt-voucher__logo {
        max-height: 60px;
        max-width: 140px;
        object-fit: contain;
        flex: none;
    }

    .receipt-voucher__org { flex: 1 1 auto; min-width: 0; }
    .receipt-voucher__org h1 {
        margin: 0 0 3px;
        font-size: 15pt;
        font-weight: 700;
        color: #14356b;
    }
    .receipt-voucher__org p {
        margin: 0 0 1px;
        font-size: 9pt;
        color: #3c4c5c;
    }

    /* ---- Title ----------------------------------------------------------- */
    .receipt-voucher__title {
        margin: 12px 0 10px;
        text-align: center;
        font-size: 16pt;
        font-weight: 700;
        letter-spacing: .04em;
        color: #14356b;
    }

    .receipt-voucher__meta {
        display: flex;
        justify-content: space-between;
        margin: 0 0 16px;
        font-size: 10.5pt;
    }
    .receipt-voucher__meta b { color: #6e8090; font-weight: 600; }

    /* ---- Body ------------------------------------------------------------ */
    .receipt-voucher__body {
        width: 100%;
        border-collapse: collapse;
        margin: 0 0 22px;
    }
    .receipt-voucher__body th {
        width: 108px;
        padding: 8px 0;
        text-align: start;
        vertical-align: bottom;
        font-weight: 600;
        color: #6e8090;
        white-space: nowrap;
    }
    .receipt-voucher__body td {
        padding: 8px 0 8px 10px;
        vertical-align: bottom;
    }

    /* Dotted rules read as a filled-in form and make tampering visible. */
    .receipt-voucher__body .fill { border-bottom: 1px dotted #8aa; }

    /* The amount is why the document exists. */
    .receipt-voucher__body .amount {
        font-size: 15pt;
        font-weight: 700;
        color: #14356b;
    }
    .receipt-voucher__body .amount .cur {
        font-size: 10pt;
        font-weight: 600;
        color: #6e8090;
        margin-inline-start: 5px;
    }

    /* The written amount is the guard against altering the digits. */
    .receipt-voucher__body .words { font-weight: 600; }

    /* ---- Signatures ------------------------------------------------------ */
    .receipt-voucher__signatures {
        display: flex;
        justify-content: space-between;
        gap: 50px;
        margin-top: 40px;
    }
    .receipt-voucher__signatures > div { flex: 1 1 0; text-align: center; }
    .receipt-voucher__signatures span {
        display: block;
        font-size: 10pt;
        font-weight: 600;
        color: #6e8090;
        margin-bottom: 30px;
    }
    .receipt-voucher__signatures i { display: block; border-top: 1px solid #16202a; }

    .receipt-voucher__footer {
        margin-top: 18px;
        padding-top: 8px;
        border-top: 1px solid #d5dede;
        text-align: center;
        font-size: 9pt;
        color: #3c4c5c;
    }
}