/*
    Printed documents — the receipt (FR-POS-07) and the quotation (FR-QUO-04).

    ONE stylesheet, deliberately NOT scoped to either page. Two documents that must look the same on
    paper cannot each own a copy of the rules: the copies drift, and the one that drifts is the one
    nobody prints in the office. It was Receipt.razor.css until §1.9 needed the identical A4 layout
    for a quotation — at which point a second file would have been a second layout engine.

    Within it, one document at two widths: a thermal roll is 80mm and an A4 sheet is 210mm, and the
    difference is a class rather than a second template.
*/

.receipt {
    background: #fff;
    color: #000;
    margin: 0 auto;
    padding: 1rem;

    /* A monospaced face, because a thermal printer is a monospaced device and a proportional font
       makes the amount column ragged on the one output where a customer reads down it. */
    font-family: "Consolas", "DejaVu Sans Mono", monospace;
    font-size: 0.8rem;
    line-height: 1.35;
}

.receipt-thermal {
    /* 80mm roll less the printer's own margins. */
    width: 72mm;
    max-width: 100%;
}

.receipt-a4 {
    width: 190mm;
    max-width: 100%;
    font-size: 0.9rem;
}

.receipt-head {
    text-align: center;
    border-bottom: 1px dashed #000;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.receipt-business {
    font-weight: 700;
    font-size: 1.1em;
}

.receipt-meta {
    margin-bottom: 0.5rem;
}

.receipt-lines,
.receipt-totals {
    width: 100%;
    border-collapse: collapse;
}

.receipt-lines th,
.receipt-lines td,
.receipt-totals td {
    padding: 0.15rem 0;
    vertical-align: top;
}

.receipt-lines thead th {
    border-bottom: 1px solid #000;
    text-align: left;
    font-weight: 600;
}

/* Amounts right-aligned so a customer can read down the column and add them up, which is exactly
   what somebody does when they think a total is wrong. */
.receipt-lines .num,
.receipt-totals .num {
    text-align: right;
    white-space: nowrap;
}

.receipt-sku {
    font-size: 0.85em;
    opacity: 0.75;
}

.receipt-totals {
    border-top: 1px dashed #000;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.receipt-grand td {
    font-weight: 700;
    border-top: 1px solid #000;
    padding-top: 0.3rem;
}

.receipt-note {
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px dashed #000;
    font-weight: 600;
}

.receipt-foot {
    margin-top: 0.75rem;
    text-align: center;
    border-top: 1px dashed #000;
    padding-top: 0.4rem;
}

@media print {
    /* Everything that is not the receipt: the app bar, the navigation, the print button itself. A
       receipt with a Print button on it is a receipt somebody hands a customer with a button
       printed on it. */
    :global(.mud-appbar),
    :global(.mud-drawer),
    :global(.no-print) {
        display: none !important;
    }

    .receipt {
        margin: 0;
        padding: 0;
        width: auto;
    }

    /* Never break a line across two pages: half a line item on the bottom of one sheet and half on
       the next is the commonest way an A4 invoice becomes unreadable. */
    .receipt-lines tr,
    .receipt-totals tr {
        break-inside: avoid;
    }
}