/*
    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.

    "Kaunta" (docs/design-plan.md) reaches paper through TYPE, not decoration. A document is black
    on white and carries no colour at all — a thermal printer has none, and an A4 invoice is
    photocopied. What the identity contributes is the three faces the product already ships:

      THERMAL  JetBrains Mono throughout. A thermal printer is a monospaced device, and the face is
               self-hosted, so the roll looks the same from every till. It used to name Consolas,
               which exists only on Windows — a Linux or Android till fell back to whatever
               monospace it had, and the columns moved.
      A4       Instrument Sans for words, JetBrains Mono for every figure and part number, and the
               display face for the business name — the same voices as the screen.

    ON SCREEN the document is drawn as PAPER on the canvas: the A4 sheet floats with a shadow, and
    the thermal roll has the perforated edges of the ticket on the till. All of that is removed in
    print, where the page is the paper.

    [!] Everything here is a LITERAL colour on purpose, and it is the one stylesheet in the product
    where that is right: paper does not have a dark mode. A receipt previewed in the dark theme
    must still be black on white, because that is what the printer will produce.
*/
.receipt {
    box-sizing: border-box;
    background: #fff;
    color: #000;
    margin: 0 auto 2rem;
    padding: 1.25rem;
    font-family: "JetBrains Mono", "Consolas", "DejaVu Sans Mono", monospace;
    font-variant-numeric: tabular-nums slashed-zero;
    font-size: 0.78rem;
    line-height: 1.4;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.08);
}

.receipt-thermal {
    /* 80mm roll less the printer's own margins. */
    width: 72mm;
    max-width: 100%;
    padding-block: 1.5rem;
    /* A torn roll: semicircles punched out of the top and bottom edges, the same device as the
       ticket on the till. A mask clips every shadow on the same element — a box-shadow and a
       drop-shadow filter alike — so the roll carries none: white paper on the canvas is enough. */
    box-shadow: none;
    -webkit-mask-image:
        radial-gradient(circle 5px at 8px 0, transparent 97%, #000 100%),
        radial-gradient(circle 5px at 8px 100%, transparent 97%, #000 100%);
    mask-image:
        radial-gradient(circle 5px at 8px 0, transparent 97%, #000 100%),
        radial-gradient(circle 5px at 8px 100%, transparent 97%, #000 100%);
    -webkit-mask-size: 16px 51%;
    mask-size: 16px 51%;
    -webkit-mask-position: top left, bottom left;
    mask-position: top left, bottom left;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
}

.receipt-a4 {
    width: 190mm;
    max-width: 100%;
    padding: 14mm 14mm 12mm;
    border-radius: 4px;
    font-family: "Instrument Sans", "Segoe UI", Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
}

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

.receipt-a4 .receipt-head {
    text-align: left;
    border-bottom: 2px solid #000;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
}

.receipt-business {
    font-weight: 700;
    font-size: 1.15em;
    letter-spacing: -0.01em;
}

.receipt-a4 .receipt-business {
    font-family: "Bricolage Grotesque", "Instrument Sans", Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 0.2rem;
}

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

.receipt-a4 .receipt-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.15rem 1.5rem;
    margin-bottom: 1.1rem;
}

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

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

.receipt-a4 .receipt-lines th,
.receipt-a4 .receipt-lines td {
    padding: 0.4rem 0;
    border-bottom: 1px solid #d9d9d9;
}

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

.receipt-a4 .receipt-lines thead th {
    font-size: 0.78rem;
    border-bottom: 1px solid #000;
}

/* [!] The thermal roll's four columns did not fit 72mm — the header ran off the paper as
   "DescriptionQtyUnit priceLine tota" and the first line with it. Found by rendering a real
   receipt, not by reading the file: a table with no column widths sizes itself to its CONTENT, and
   the widest cell here is a part description. So the description is given what is left and allowed
   to wrap, and the three figure columns are fixed at what a price actually needs. `table-layout:
   fixed` is what makes a percentage mean anything at all.

   The paper is also the reason the columns are spaced rather than padded: a thermal head prints
   one width, and a column that has drifted by a millimetre is one a customer reads as a mistake. */
.receipt-thermal .receipt-lines {
    table-layout: fixed;
}

.receipt-thermal .receipt-lines th:first-child,
.receipt-thermal .receipt-lines td:first-child {
    width: 34%;
    word-break: break-word;
}

.receipt-thermal .receipt-lines th:nth-child(2),
.receipt-thermal .receipt-lines td:nth-child(2) {
    width: 12%;
}

.receipt-thermal .receipt-lines th:nth-child(3),
.receipt-thermal .receipt-lines td:nth-child(3),
.receipt-thermal .receipt-lines th:nth-child(4),
.receipt-thermal .receipt-lines td:nth-child(4) {
    width: 27%;
}

/* A roll is 32-48 characters wide. The headings are set smaller and allowed to break, because
   "Unit price" over two lines is legible and "Unit pric" is not. */
.receipt-thermal .receipt-lines thead th {
    font-size: 0.72em;
    padding-inline-end: 3px;
    white-space: normal;
    word-break: break-word;
}

.receipt-thermal .receipt-lines td {
    padding-inline-end: 3px;
}

.receipt-thermal .receipt-lines td:last-child,
.receipt-thermal .receipt-lines th:last-child {
    padding-inline-end: 0;
}

/* The figures must not wrap, so they are set a touch smaller than the words around them rather
   than allowed to push the table wider than the paper. */
.receipt-thermal .receipt-lines .num {
    font-size: 0.92em;
}

/* 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. Mono on A4 as well, so the digits stack. */
.receipt-lines .num,
.receipt-totals .num {
    text-align: right;
    white-space: nowrap;
    font-family: "JetBrains Mono", "Consolas", "DejaVu Sans Mono", monospace;
    font-variant-numeric: tabular-nums slashed-zero;
}

.receipt-lines thead th.num {
    text-align: right;
    font-family: inherit;
}

/* The part number: the string a customer reads back over the phone when the part is wrong. */
.receipt-sku {
    font-family: "JetBrains Mono", "Consolas", "DejaVu Sans Mono", monospace;
    font-size: 0.85em;
    color: #333;
}

.receipt-thermal .receipt-sku {
    word-break: break-all;
}

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

.receipt-a4 .receipt-totals {
    width: 50%;
    min-width: 16rem;
    margin-left: auto;
    border-top: 0;
    margin-top: 1rem;
}

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

.receipt-a4 .receipt-grand td {
    font-size: 1.15rem;
    border-top: 2px solid #000;
    padding-top: 0.5rem;
}

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

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

.receipt-a4 .receipt-foot {
    margin-top: 2rem;
    border-top: 1px solid #000;
    color: #333;
    font-size: 0.8rem;
}

/* ── The on-screen toolbar above a document: paper width, and Print. Never printed. It follows the
   theme (it is chrome, not paper), so it is the one block here that uses tokens. */
.r360-doc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 20px;
    padding: 8px 10px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
}

@media print {
    /* [!] Everything that is not the document. This rule was written as
       `:global(.mud-appbar), :global(.mud-drawer), :global(.no-print)`, and `:global()` is a
       CSS-modules construct, not CSS. In a plain stylesheet it is an INVALID selector, and one
       invalid selector voids the whole rule — so nothing here ever applied, and every receipt this
       product has printed carried its own toolbar and Print button onto the paper. Nothing validates
       CSS in this build; it was found by reading the file. The shell's own chrome (the console and
       the islands) is hidden by app.css. */
    .no-print,
    .r360-doc-toolbar {
        display: none !important;
    }

    html,
    body {
        background: #fff !important;
    }

    .receipt,
    .receipt-thermal,
    .receipt-a4 {
        margin: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        filter: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* [!] The width is NOT reset to auto, and the difference shows the moment somebody prints.
       A till roll is 72mm of paper: on a thermal printer the page is that wide and auto would be
       the same thing, but sent to the office A4 printer — which is what happens when the roll
       jams — auto stretched the line items across 210mm and put the amount column a hand's width
       from the description. Fixed at the paper width, a roll printed on A4 is simply a roll
       printed down the left of the sheet, which is legible and cuts to size.

       The A4 sheet is the opposite case: its own margins are the printer's, so it takes the page. */
    .receipt-thermal {
        width: 72mm;
    }

    .receipt-a4 {
        width: auto;
        /* Its own margin, rather than trusting the printer's. Every printer keeps an unprintable
           strip at the edge of a sheet, and a total that lands in it is simply not there. */
        padding: 10mm 8mm;
    }

    /* 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;
    }
}