/*
    bill.css - THE PRINTED BILL, and only that.

    Kept apart from theme.css on purpose: a bill is paper. It is black on white
    whatever palette the shop works in, because a bill printed in champagne gold
    on near-black is a cartridge nobody thanks you for - and because a customer's
    copy should look the same from every till in the shop.

    The screen preview shows the same sheet on a grey desk so it reads as paper
    before it is one.
*/

.sheet {
    box-sizing: border-box;
    width: 210mm;
    min-height: 148mm;
    margin: 12px auto;
    /*  A MARGIN ROUND THE BILL (22 Sep 2026): the owner's word, "in preview
        give margin in layout". The tables used to run to the edge of the
        paper; a bill needs air round it to be held and read.  */
    padding: 12mm;
    background: #fff;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 1.25;
    border: 1px solid #999;
}

.sheet table { width: 100%; border-collapse: collapse; }
.sheet td, .sheet th { border: 1px solid #000; padding: 2px 4px; }
.sheet .r { text-align: right; }
.sheet .desc { text-align: left; }
.sheet th { background: #f0f0f0; text-align: center; font-weight: 700; }

/* ------------------------------------------------------------- the head --- */

.bill-head { margin-bottom: 4px; }

.invocations {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    color: #b00;
    margin-bottom: 2px;
}

.doctype { text-align: center; font-weight: 700; letter-spacing: .04em; }

.head-row { display: flex; align-items: center; gap: 10px; }
.head-mid { flex: 1; text-align: center; }
.head-right { white-space: nowrap; font-size: 10px; }

.bill-logo { height: 46px; width: auto; }

.bill-head h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.bill-head .prop { font-size: 10px; text-align: left; }
.bill-head .addr { font-size: 10px; }
.bill-head .gstin { font-size: 10px; font-weight: 700; }

/* ------------------------------------------------------- the rest of it --- */

.bill-party { margin-bottom: 4px; }
.bill-party td { border: 1px solid #000; vertical-align: top; }

.bill-lines .tot td { background: #f6f6f6; font-weight: 700; }

.bill-totals, .bill-money { margin-top: -1px; }

/*  THE VERTICAL LINES AGREE (22 Sep 2026) - the owner's word, "manage line
    alignment". The totals, the old metal and the money are three tables, and
    left to size their own columns each drew its rules somewhere else; the
    paper read as three bills stacked. They now share one set of column
    edges - 50%, 65%, 85% and the right margin - and the line table's Amount
    column ends on the same 85% rule, so the figures stack in one column
    down the page the way the old bill's do.  */
.bill-totals, .bill-money, .bill-old { table-layout: fixed; }
.bill-totals col.c-l1, .bill-money col.c-l1 { width: 35%; }
.bill-totals col.c-v1, .bill-money col.c-v1 { width: 15%; }
.bill-totals col.c-l2, .bill-money col.c-l2 { width: 35%; }
.bill-totals col.c-v2, .bill-money col.c-v2 { width: 15%; }
.bill-lines th:last-child, .bill-lines td:last-child { width: 15%; }
.bill-old col.c-sr { width: 5%; }
.bill-old col.c-metal { width: 10%; }
.bill-old col.c-desc { width: 35%; }
.bill-old col.c-wt { width: 15%; }
.bill-old col.c-rate { width: 20%; }
.bill-old col.c-amt { width: 15%; }
.bill-totals .grand td, .bill-money .grand td { background: #eaeaea; }

.bill-old { margin-top: 6px; }

.bill-terms {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.6;
}

.bill-sign {
    margin-top: 22px;
    text-align: right;
    font-size: 10px;
}

.bill-sign span { border-top: 1px solid #000; padding-top: 2px; }

/*  A cancelled bill must never print as though it stood.  */
.bill-void {
    margin-top: 10px;
    padding: 4px;
    border: 2px solid #b00;
    color: #b00;
    font-weight: 700;
    text-align: center;
    letter-spacing: .3em;
}

/* --------------------------------------------------------- the preview --- */

.preview-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 210mm;
    margin: 10px auto 0;
    padding: 6px 8px;
    background: var(--raised, #fff);
    border: 1px solid var(--line, #ccc);
    border-radius: 6px;
}

.preview-bar .spacer { flex: 1; }
.preview-bar .btn { white-space: nowrap; }

/*  THE MESSAGE BEFORE IT GOES ANYWHERE. Tall enough to read a whole bill
    without scrolling to find the total, and it can be dragged taller for a
    long one. It is a draft somebody may add a line to, so it is a box that
    invites typing rather than a wall of text to be admired.  */
#wa-text {
    width: 100%;
    min-height: 15rem;
    resize: vertical;
    line-height: 1.5;
}

#wa .actions { margin-top: 10px; }

@media print {
    /*  THE PAPER CARRIES THE BILL AND NOTHING ELSE - no bar, no browser
        chrome, no shadow of the screen it was looked at on.  */
    .preview-bar { display: none; }

    /*  A dialog left open would print over the bill.  */
    dialog { display: none !important; }

    .sheet {
        width: auto;
        margin: 0;
        border: 0;
        /*  The page margin below is what the printer honours; this inner
            padding is what survives a browser set to "Margins: None".  */
        padding: 4mm 5mm;
    }

    body { background: #fff; }

    @page { margin: 12mm 10mm; }
}

/* ═══════════════════════════════════════════════════ the jewellery tag ══ */
/*
    A TAG IN TWO PARTS, which is what a jewellery tag actually is: a long thin
    strip folded around the ring so the two halves meet and both can be read
    without turning the piece over.

        +----------------+--------------------------------+
        |  GR  12.321    |  RC Ornaments                  |
        |  LS   0.000    |  L RING                        |
        |  NT  12.321    |  |||||||||||  000000001        |
        +----------------+--------------------------------+

    LEFT IS THE WEIGHTS, stacked, because that is the column a jeweller reads
    down - gross, what came off, what is left - and reading three weights down
    is what the eye is trained for.

    RIGHT IS WHO AND WHAT AND THE CODE: the shop, the piece, the bars. The bars
    go on the right because that half is the one presented to a scanner while
    the ring is held.

    The size still comes from the shop, in millimetres, as inline style. Only
    the arrangement within it lives here.
*/
.labels {
    display: flex;
    flex-wrap: wrap;
    gap: 2mm;
    padding: 4mm;
    background: #fff;
}

.label {
    box-sizing: border-box;
    width: 100mm;
    height: 13mm;
    --bar-h: 6mm;
    --left-w: 26mm;
    padding: 0.6mm 1.5mm;
    border: 1px dashed #bbb;
    background: #fff;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;

    /*  The two halves, side by side.  */
    display: flex;
    align-items: stretch;
    gap: 2mm;
}

.label-left,
.label-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

/*  The weights get what they need and no more; the code half takes the rest,
    because the bars are the part that must not be squeezed.  */
/*  THE SPLIT IS THE SHOP'S. Only the left half is set - the right is whatever
    is left over, so the two can never add up to more than the tag. A shop with
    long item names widens the right; one that prints no shop name narrows it.  */
.label-left {
    flex: 0 0 var(--left-w, 26mm);
    font-family: "IBM Plex Mono", monospace;
    /*  Bigger and bold (29 Sep 2026, the owner: "font size is too small for
        the left section") - three weight lines fill a 13mm wing at this size.
        A part given its own size in the tag setup still wins.  */
    font-size: 7.5pt;
    font-weight: 700;
    line-height: 1.2;
    border-right: 0.2mm solid #000;
    padding-right: 1.5mm;
}

.label-left span { white-space: nowrap; }

.label-right { flex: 1 1 auto; text-align: center; }

/*  EVERY ROLL IS ITS OWN (29 Sep 2026): the right wing moves by the shop's
    shift without moving the fold, and a roll with its own moulded fold can
    leave the printed line off.  */
.label.folded .label-right { position: relative; left: var(--right-shift, 0mm); }
.label.no-fold .label-left { border-right: 0; }
/*  The shop's barcode width, centred; none set = the whole wing.  */
.label .label-bars .barcode { width: var(--bar-w, 100%); margin: 0 auto; }

/*  THE TAG LOGO (29 Sep 2026): each wing lays the logo beside its text; the
    tag's data-logo says which wing shows it - off, left or right.  */
.label.folded .label-left { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1mm; }
.label-left-lines { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.label.folded .label-right { flex-direction: row; align-items: stretch; gap: 1mm; }
.label-right-col { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.label-logo { flex: 0 0 auto; align-self: center; object-fit: contain; display: block; }
.label[data-logo="off"] .label-logo,
.label[data-logo="left"] .label-right > .label-logo,
.label[data-logo="right"] .label-left > .label-logo { display: none; }
/*  Where in its wing: before the text (start) or after it (end).  */
.label[data-logo-align="end"] .label-logo { order: 2; }

/*  WORDS ARE NEVER CRUSHED; THE BARS GIVE WAY INSTEAD. A tag whose shop name
    is a grey smear is worse than one whose barcode is a millimetre shorter,
    and a shorter barcode still scans.  */
.label-shop,
.label-item,
.label-code { flex: 0 0 auto; }

.label-shop {
    font-size: 6pt;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.label-item {
    font-size: 5.8pt;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.label-bars { flex: 1 1 auto; min-height: 0; line-height: 0; }
/*  A BARCODE WIDER THAN ITS COLUMN (30 Sep 2026, the shop's Barcode width
    taken as an order): centred and let run into the wing's padding and the
    gap at the fold - flex centring spills evenly both sides, and only the
    tag's own edge clips.  */
.label .label-bars { display: flex; justify-content: center; overflow: visible; }
.label.folded .label-right, .label.folded .label-right-col { overflow: visible; }
.label .label-bars .barcode[data-dots] { flex: 0 0 auto; }

/*  The height the shop asked for, but never more than the room actually left
    once the words have taken theirs.  */
.label .barcode { display: block; width: 100%; height: 100%; max-height: var(--bar-h); }

/*  READABLE ON THERMAL PAPER (29 Sep 2026, the owner: "barcode no is not
    clearly visible"). 5.4pt of a thin mono face came out grey and broken on
    the TVS; a heavier sans at 7pt holds. A size set in the tag setup wins.  */
.label-code {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 7pt;
    font-weight: 700;
    /*  Room between the figures, so 0, 6 and 8 do not run into one blot
        on a 203-dpi head; solid black, never a grey that the printer dithers.  */
    letter-spacing: .12em;
    color: #000;
    line-height: 1.05;
    white-space: nowrap;
}

/*  THE BARS AND THE NUMBER APART (29 Sep 2026, the owner: "separate the
    barcode image and the barcode number") - a clear white gap, so the digits
    are not read as part of the bars and a scanner has its quiet space.  */
.label .label-bars { margin-bottom: 0.9mm; }
.label .label-code { margin-top: 0; padding-top: 0.2mm; }

/*  THE BARS OVER THE WEIGHTS (Sql/170, 22 Oct 2026, the owner: "barcode bar
    print above weight section"). Both wings carry the bars; data-bars says
    which prints. On top of the left wing the weights close up a little
    (6.5pt, tight lines) so three of them and the bars share a 13mm tag; a
    size set in the tag setup still wins. The right wing keeps the rest.  */
.label[data-bars="left"] .label-bars-right,
.label:not([data-bars="left"]) .label-bars-left,
.label.stacked .label-bars-left { display: none; }
.label.folded[data-bars="left"] .label-left { align-items: stretch; }
/*  The column is as wide as the weights (or the bars, if wider), not the
    wing: the alignment lines the bars up with the G.W / L.W / N.W text -
    the owner: "bar above gr wt should be center, left or right aligned".  */
.label.folded[data-bars="left"] .label-left-lines { flex: 0 0 auto; width: max-content; max-width: 100%; font-size: 6.5pt; line-height: 1.1; }
.label.folded[data-bars="left"] .label-left-lines > span { flex: 0 0 auto; }
.label .label-bars-left { margin-bottom: 0.5mm; }

/*  THE BARS' ALIGNMENT IN THEIR WING (Sql/170, 22 Oct 2026, the owner:
    "center, left or right aligned - put an option"). Centre is how the tag
    has always printed. The number under right-wing bars follows them.  */
.label[data-bars-align="left"] .label-bars { justify-content: flex-start; }
.label[data-bars-align="left"] .label-bars .barcode { margin-left: 0 !important; margin-right: auto !important; }
.label[data-bars-align="right"] .label-bars { justify-content: flex-end; }
.label[data-bars-align="right"] .label-bars .barcode { margin-left: auto !important; margin-right: 0 !important; }
.label[data-bars="right"][data-bars-align="left"] .label-code { text-align: left; }
.label[data-bars="right"][data-bars-align="right"] .label-code { text-align: right; }

/*  THE LOGO ALREADY ON THE ROLL (Sql/170, 22 Oct 2026): the picture is not
    printed, a blank of its size holds its place. Without that tick the blank
    stands in only when no picture is uploaded (and data-logo is "off" then,
    so on paper it takes no room).  */
.label .label-logo-blank { visibility: hidden; }
.label[data-preprinted="1"] img.label-logo { display: none !important; }
.label:not([data-preprinted="1"]) img.label-logo + .label-logo-blank { display: none !important; }

/*  A CAPTION IS NOT ITALIC, whatever the element it rides in.  */
.label .lw { font-style: normal; }

/* ─────────────────────────────────────── the stacked strip (20 Sep 2026) ── */
/*
    THE SAME TAG ON A ROLL TOO NARROW TO FOLD - the owner's 50x25 stickers. A
    nine-digit Code 128 needs 40mm and a fold left it 24, so the printer cut
    the bars and put the shop name off the paper. Stacked, nothing sits beside
    the bars: shop and item on top, the weights in a row, the bars the full
    width, the number under them.
*/
.label.stacked { flex-direction: column; gap: 0; }
.label.stacked .label-right { flex: 1 1 auto; width: 100%; }

.label.stacked .label-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 2mm;
    font-family: "IBM Plex Mono", monospace;
    font-size: 6pt;
    line-height: 1.25;
    white-space: nowrap;
}

/*  Past 60mm the modules get fat for nothing; a scanner wants no more.  */
.label.stacked .label-bars { width: 100%; max-width: 60mm; margin: 0 auto; }

/* ───────────────────────────────────────────── the QR sticker (20 Sep 2026) ── */
/*
    THE OWNER'S STICKER: the purity stamp, underlined, over a QR of
    BARCODE/ITEM/WEIGHT/TUNCH on the right; "G.wt -: 10.020" and the lines
    under it on the left; the HUID along the bottom. 50x25 or 38x25.

    THE TYPE FITS THE LINES by default (three lines are big, six are small
    enough to stay on the sticker); a size the shop set rides inline and wins.
*/
/*  TWO SECTIONS, ONE HEIGHT (1 Oct 2026, the owner: "divide label in two
    sections, left holds weights, right holds QR, left and right height
    should be same"): the QR is sized to the weights (_Label) and both are
    centred top to bottom, so they start and end on the same lines.  */
/*  TOP-ALIGNED (2 Oct 2026, the owner: "QR code setup - it is centre aligned, make it top aligned"): the weights and the QR both start at the top margin.  */
.label.square { padding: 1.5mm 2mm; gap: 1.5mm; align-items: flex-start; }

/*  THE QR SITS JUST AFTER THE WEIGHTS (1 Oct 2026, the owner: "QR image should be near after end of weights") - not pushed to the far edge.  */
.label.square .label-col {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    overflow: hidden;
}

.label.square .label-shop { font-size: 2.4mm; font-weight: 700; line-height: 1.25; }

.label.square .label-lines {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    font-size: 2.6mm;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
}

.label.square .label-lines > span { display: block; overflow: hidden; text-overflow: ellipsis; }

.label.square .label-huid { font-size: 2.2mm; font-weight: 700; line-height: 1.3; white-space: nowrap; margin-top: auto; }

.label.square .label-qrcol {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: var(--qr-side, 16mm);
}

.label.square .label-stamp {
    font-size: 2.8mm;
    font-weight: 700;
    line-height: 1.15;
    border-bottom: 0.3mm solid #000;
    padding: 0 0.5mm;
    white-space: nowrap;
}

.label.square .label-qr { width: var(--qr-side, 16mm); height: var(--qr-side, 16mm); line-height: 0; }
.label.square .label-stamp + .label-qr { margin-top: 0.5mm; }
.label.square .label-qr .qrcode { display: block; width: 100%; height: 100%; }
.label.square .label-code { font-size: 2mm; }

/*  THE ROLLS on the setup screen, one button each.  */
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

@media print {
    .preview-bar { display: none; }

    .labels { padding: 0; gap: 0; }

    /*  The dashed guide is for the screen. On paper the tag is torn from a roll
        and folded, not drawn - and a printed border wastes the millimetre the
        barcode needs. The fold line between the halves stays, because that is
        where it is folded.  */
    .label { border: 0; }

    body { background: #fff; }

    @page { margin: 0; }
}

/* ══════════════════════════════════════════════════════════ the receipt ══ */
/*
    A SLIP, NOT A SHEET. A shop writes dozens of receipts a week and a full page
    for each is a ream a month in the bin. It is half a page, laid out to be
    torn at the fold.
*/
.slip {
    position: relative;
    max-width: 210mm;
    min-height: 0;
    padding: 14mm 16mm;
}

.slip .doctype {
    margin-top: 6px;
    letter-spacing: .28em;
    font-size: .78rem;
}

.slip-meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 10mm 0 6mm;
    padding-bottom: 3mm;
    border-bottom: 1px solid #000;
}

.slip-meta div { display: flex; gap: 8px; align-items: baseline; }
.slip-meta span { font-size: .8rem; color: #444; }

.slip-body { width: 100%; border-collapse: collapse; }

.slip-body td { padding: 3mm 0; vertical-align: top; }

.slip-body .k {
    width: 34mm;
    font-size: .82rem;
    color: #444;
    white-space: nowrap;
}

.slip-body .v { font-size: .95rem; }

/*  THE WORDS. Larger than the labels and set apart, because they are the part
    of a receipt that cannot be altered after it is handed over - which is the
    whole reason they are on it.  */
.slip-body .words {
    font-size: 1rem;
    line-height: 1.5;
    text-transform: capitalize;
}

.slip-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-top: 6mm;
    padding: 4mm 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.slip-amt, .slip-due { display: flex; align-items: baseline; gap: 10px; }
.slip-amt span, .slip-due span { font-size: .82rem; color: #444; }
.slip-amt b { font-size: 1.35rem; }
.slip-due b { font-size: 1rem; }

.slip-sign {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 16mm;
}

.slip-sign div { display: flex; flex-direction: column; gap: 3px; min-width: 45mm; }
.slip-sign .rule { display: block; border-top: 1px solid #000; }
.slip-sign span:last-child { font-size: .75rem; }

.slip-terms { margin-top: 8mm; font-size: .75rem; color: #444; }

/*  ACROSS THE FACE OF IT, not in a corner. A cancelled receipt that still looks
    like a receipt is one somebody will hand over.  */
.voided {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 4rem;
    letter-spacing: .3em;
    color: rgb(0 0 0 / .12);
    transform: rotate(-18deg);
    pointer-events: none;
    text-transform: uppercase;
}

@media print {
    /*  The slip is half a page and prints as one, so nothing that follows it
        is pushed onto a second sheet.  */
    .slip { min-height: 0; page-break-after: avoid; }
}

/* ═════════════════════════════════ the gold estimate, A5 landscape ══ */
/*
    THE OWNER'S OWN GOLD SHEET, rebuilt to his copy - 4 Sep 2026, *"This
    Wholesale gold billing Format Design Format as Gold Billing A5"*.

    IT IS THE ONE PLACE THIS STYLESHEET USES COLOUR, and the reason is the sheet
    itself: his format carries meaning in it. Red is what is owed, green is what
    is held, blue is the line that totals today. The rest of bill.css is black on
    white on purpose and stays that way - a customer's receipt printed in
    champagne gold is a cartridge nobody thanks you for.

    IT STILL READS IN GREY. Every coloured figure also carries a word - BAKI,
    JAMA - or sits in a row that is bold, so a shop printing this on a mono laser
    loses the emphasis and none of the meaning.
*/

.sheet.est {
    width: 210mm;
    min-height: 148mm;
    padding: 6mm 7mm;
    font-size: 11.5px;
}

/*  A NAMED PAGE, so asking for A5 landscape here does not change the size of
    every other document this stylesheet prints. A browser that does not know
    named pages prints this sheet on whatever it has, which it still fits.  */
.sheet.est { page: estimate; }
@page estimate { size: A5 landscape; margin: 6mm; }

.est-title {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .06em;
    margin-bottom: 3mm;
}

/*  WHO IT IS FOR ON THE LEFT AND WHEN ON THE RIGHT, on one line each - the way
    a hand-written estimate is laid out, and the way his is.  */
.est-who {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10mm;
    margin-bottom: 2mm;
    font-size: 12px;
}

.est-who-r { text-align: right; white-space: nowrap; }
.est-who .est-no { font-size: 10px; color: #444; }

/* ------------------------------------------------------------ the grid --- */

/*  ONE TABLE, so every vertical rule runs the whole height of the sheet - the
    owner.s ruling of 4 Sep 2026, "don.t break vertical line", "merge vertical
    line". Three stacked tables each sized their own columns to their own
    content, which put the rule beside the money in three different places down
    one page.  */
.est-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }

.est-grid th, .est-grid td {
    border: 1px solid #000;
    padding: 1.5px 4px;
    text-align: center;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.est-grid th { background: #fff; font-weight: 700; font-size: 11px; }

/*  THE TWO COLUMNS THAT ARE NOT FIGURES. Money leads the sheet on the left
    because that is where his eye starts, and the description beside it is the
    only left-aligned thing on the page - a name centred in its column drifts
    away from the row it names.  */
/*  FIXED, AND IN mm. `table-layout: fixed` is what keeps a long working in the
    LAB/PC column from widening its column and shifting every rule to the right
    of it - which is the same complaint in another form.  */
.est-grid .est-amt  { width: 24mm; text-align: right; }
.est-grid .est-desc { width: 40mm; text-align: left; }
.est-grid .est-w    { width: 17mm; }
.est-grid .est-work { width: 22mm; }

/*  THE WORKING IS SMALLER THAN THE FIGURES, and allowed to wrap: "10*200+5*300"
    is longer than any weight on the sheet and must not be what sets the width
    of the column beside it.  */
.est-grid .est-work { font-size: 9.5px; white-space: normal; word-break: break-word; }

/*  RED IS THE METAL SIDE, which on this sheet is the subject. His heading over
    the item column is red and so is everything that closes the gold.  */
.est-red { color: #c00000; }
.est-grid thead .est-desc { color: #c00000; }
.est-gold { font-weight: 700; }

/*  ═══ WHAT EACH COLOUR ON THIS SHEET MEANS ═══

    THE LINE ROWS ARE BLACK. They are what was weighed, and they are the part a
    party checks digit by digit; colouring them would be colouring everything.

    BLUE IS TODAY. A subtotal sitting inside the list rather than under it has
    to be told apart from the lines above without a rule, which would read as
    the end of the table.

    MAGENTA IS BROUGHT FORWARD - the old gold balance and the old cash balance,
    the two figures on the sheet that did not happen today. They are the ones a
    party disputes from their own book rather than from the scales, so they are
    the ones that must be findable at a glance.

    GREEN IS MONEY AND RED IS METAL, and that is a COLUMN rule, not a sign
    rule. Two bills for the same party would otherwise change colour with the
    direction and look like two different documents.  */
.est-line td { color: #000; }

.est-today td { color: #0000c0; font-weight: 700; }
.est-old td { color: #c000c0; font-weight: 700; }
.est-bhav td { color: #0000c0; }
.est-cash td { color: #008000; font-weight: 700; }

.est-jama { color: #008000; font-weight: 700; font-size: 10px; }

/* ------------------------------------------------- the closing figures --- */

.est-total td { font-weight: 700; }
.est-grid .est-close { text-align: right; white-space: nowrap; font-weight: 700; }

/*  THE DIRECTION IS SET IN CAPITALS, as his is - BAKI and JAMA are read as
    labels on this sheet rather than as words in a sentence, and a capitalised
    word is what the eye picks out of a grid of figures. It is done in the
    STYLESHEET and not in the string, so Baki.Word goes on returning the one
    spelling every other screen shows.  */
.est-grid .est-close b { text-transform: uppercase; }

/*  THE MONEY COLUMN AND THE METAL COLUMN, wherever either of them appears.
    Green for rupees, red for grams - see the note above on why this follows the
    COLUMN and not the sign.  */
.est-cr { color: #008000; font-weight: 700; }
.est-dr { color: #c00000; font-weight: 700; }

.est-final-h th {
    font-weight: 700;
    background: #fff;
    font-size: 11px;
}

.est-final-h th:first-child { color: #008000; }
.est-final-h th:last-child  { color: #c00000; }

.est-final-t { font-weight: 700; font-size: 14px; letter-spacing: .04em; }

.est-final-v td { font-size: 13px; font-weight: 700; }
.est-final-v td:first-child { color: #008000; }
.est-final-v td:last-child  { color: #c00000; }

/*  THE DIRECTION UNDER THE FIGURE, not beside it: the word is what survives a
    photocopy, a fax and a photograph taken across a counter, and it is the part
    that cannot be misread as a minus sign that did not print.  */
.est-final-w td {
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.est-final-w td:first-child { color: #008000; }
.est-final-w td:last-child  { color: #c00000; }

.est-note { margin-top: 2mm; font-size: 10px; }

/* ══════════════════════════════════ one party's account, on paper ══ */
/*
    THE PRINTED STATEMENT - the owner's ruling of 4 Sep 2026, "Customer Ledger
    Preview".

    IT BORROWS THE ESTIMATE'S GRID rather than growing a second one. Same ruled
    cells, same green-for-money and red-for-metal, same BAKI and JAMA under the
    closing figures - a party handed a bill and a statement in the same envelope
    should not have to learn two documents. Only what is genuinely different
    lives here: the shop's head, the date and voucher columns, and the fact that
    this sheet is PORTRAIT.

    A4 LANDSCAPE, AND THAT WAS NOT THE FIRST ANSWER. Portrait was, on the
    reasoning that a statement runs to as many lines as the account has
    movements - and the probe measured what portrait actually did: ten columns
    across 186mm left the PARTICULARS COLUMN 0mm WIDE, wrapping a bill
    description one character to a line and making a single row 81mm tall.

    Nine of these columns are figures of a known size; the tenth is free text
    nobody controls the length of. That is what landscape is for. It costs about
    a third of the rows per page and buys a description column of 120mm instead
    of nothing.
*/

.sheet.stmt {
    width: 297mm;
    min-height: 210mm;
    padding: 10mm 12mm;
    font-size: 11px;
}

.sheet.stmt { page: statement; }
@page statement { size: A4 landscape; margin: 10mm; }

.stmt-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10mm;
    padding-bottom: 2mm;
    border-bottom: 1px solid #000;
    margin-bottom: 3mm;
}

.stmt-shop h1 { margin: 0; font-size: 17px; font-weight: 700; }
.stmt-shop p { margin: 0; font-size: 10px; }

.stmt-kind {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .08em;
    white-space: nowrap;
}

/*  THE REFUSAL, ON THE COPY THAT LEAVES THE BUILDING. The screen warns as well;
    a warning the printer drops is a warning that was never given.  */
.stmt-wrong {
    margin: 0 0 3mm;
    padding: 2mm 3mm;
    border: 1.5px solid #c00000;
    color: #c00000;
    font-size: 11px;
}

/* ------------------------------------------------------ the columns --- */

/*  EVERY WIDTH IS NAMED, and they are named on the HEADING ROW because the grid
    is laid out `fixed`. Leaving the figure columns to size themselves is what
    starved the description: `fixed` gives each cell what it asks for and hands
    whatever is left to the one that asked for nothing - and here that was the
    only column with words in it.  */
.stmt-grid .stmt-date { width: 20mm; }
.stmt-grid .stmt-no   { width: 30mm; }
.stmt-grid .est-w     { width: 20mm; }

/*  THE DIRECTION GETS ITS OWN NARROW COLUMN rather than being tucked in beside
    the figure. Two things in one right-aligned cell - "1,250.00 Jama" - read as
    one long value, which is the same mistake "21.339 -16.161" made on the
    vendor list.  */
.stmt-grid .stmt-way,
.stmt-close .stmt-way { width: 14mm; font-weight: 700; font-size: 9.5px; }

.stmt-grid .stmt-date,
.stmt-grid .stmt-no { font-size: 10px; }

/*  AND THE PARTICULARS TAKES WHAT IS LEFT - which is now a real width, because
    everything else asked for one. It is the only cell on the sheet whose length
    nobody controls, so it is also the only one allowed to wrap.  */
.stmt-grid .est-desc { width: auto; min-width: 60mm; white-space: normal; }

.stmt-tag {
    border: 1px solid #666;
    border-radius: 2px;
    padding: 0 3px;
    font-size: 8.5px;
    text-transform: uppercase;
}

/*  THE HEADING ROW REPEATS ON A SECOND SHEET, and no row is split across the
    fold. A statement that breaks mid-line has to be read with both pages held
    up together.  */
.stmt-grid thead { display: table-header-group; }
.stmt-grid tr { page-break-inside: avoid; }

/* -------------------------------------------------- where it closes --- */

/*  THE CLOSING BLOCK RUNS THE FULL WIDTH, under the grid it closes. It was
    drawn narrow and right-aligned first, on the reasoning that a total belongs
    beside the column it totals - but there are THREE totals here and they are
    three different kinds, so each one wants its own named column rather than a
    corner. Full width gives all three the same room and puts each under a
    heading that says what it is.  */
.stmt-close { margin-top: 4mm; }

.stmt-close td, .stmt-close th { padding: 2px 8px; }

.stmt-note { margin-top: 3mm; font-size: 10px; }

/*  THE MONEY COLUMN IS THE LAST ONE HERE, not the first, so the green and red
    of the estimate's closing block would land on the wrong two columns. The
    statement names them itself instead.  */
.stmt-close .est-final-h th,
.stmt-close .est-final-v td,
.stmt-close .est-final-w td { color: #000; }

.stmt-close .est-final-h th:last-child,
.stmt-close .est-final-v td:last-child,
.stmt-close .est-final-w td:last-child { color: #008000; }

.stmt-close .est-final-h th:not(:last-child),
.stmt-close .est-final-v td:not(:last-child),
.stmt-close .est-final-w td:not(:last-child) { color: #c00000; }

/*  A WIDER BAR ON ONE LINE (25 Sep 2026: "adjust this, increase width of
    page") - the buttons no longer squeeze "Gold estimate - Set up what
    shows" into five lines. The printed sheet keeps its paper size.  */
@media screen {
    .preview-bar { max-width: min(1200px, 100% - 16px); flex-wrap: wrap; row-gap: 6px; }
    .preview-bar > .muted { white-space: nowrap; }
}

/*  WHATSAPP IN ITS OWN GREEN (25 Sep 2026) - the preview bar's button.  */
@media screen {
    .preview-bar #btn-wa { background: #25D366 !important; background-image: none !important; border-color: #1EBE5A !important; color: #fff !important; }
    .preview-bar #btn-wa:hover { background: #1EBE5A !important; color: #fff !important; }
    .preview-bar #btn-wa svg { stroke: #fff; }
}

/*  PDF IN RED (25 Sep 2026) - the preview bar's PDF link.  */
@media screen {
    .preview-bar a.btn[href*="/Pdf"] { background: #D93025 !important; background-image: none !important; border-color: #B3261E !important; color: #fff !important; }
    .preview-bar a.btn[href*="/Pdf"]:hover { background: #B3261E !important; color: #fff !important; }
    .preview-bar a[href*="/Pdf"] svg { stroke: #fff; }
}

/*  THE GOLD ESTIMATE A LITTLE LARGER (25 Sep 2026: "slightly increase font
    size") - every size on the sheet up about a step; screen and print.  */
.sheet.est { font-size: 13px; }
.est-title { font-size: 17px; }
.est-who { font-size: 13.5px; }
.est-who .est-no { font-size: 11.5px; }
.est-grid th { font-size: 12.5px; }
.est-grid .est-work { font-size: 11px; }
.est-jama { font-size: 11.5px; }
.est-final-h th { font-size: 12.5px; }
.est-final-t { font-size: 16px; }
.est-final-v td { font-size: 15px; }

/*  PAPER SIZE AND ORIENTATION on the preview bar (25 Sep 2026).  */
.paper-pick { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; white-space: nowrap; }
.paper-pick label { display: inline-flex; align-items: center; gap: 4px; }
.paper-pick select { padding: 5px 6px; border: 1px solid #bbb; border-radius: 6px; background: #fff; font: inherit; }
@media print { .paper-pick { display: none; } }

/*  The bar holds more now (paper picker) - tighter gaps so Print stays on
    the same row on an ordinary screen (25 Sep 2026).  */
@media screen {
    .preview-bar { gap: 8px; }
    .preview-bar .btn { padding-left: 12px; padding-right: 12px; }
}

/*  A DRAFT PREVIEW says so (25 Sep 2026).  */
.draft-tag { padding: 5px 10px; border-radius: 6px; background: #FFF3CD; border: 1px solid #E0B94A; color: #7A5200; font-weight: 700; font-size: .85rem; white-space: nowrap; }

/*  THE LEDGER STATEMENT'S OWN MARGIN (26 Sep 2026: "same for wholesale
    ledger preview") - like the reports, the sheet keeps white space inside
    itself, so a browser printing with "Margins: none" still leaves the
    figures off the paper's edge. On screen it gets a little more air too.  */
@media print {
    .sheet.stmt { padding: 7mm 8mm !important; box-sizing: border-box; }
}
@media screen {
    .sheet.stmt { padding: 10mm 12mm; }
}

/*  The ledger statement framed on paper as well (26 Sep 2026).  */
@media print {
    body:has(.sheet.stmt)::before {
        content: ""; position: fixed; inset: 2.5mm; border: 1px solid #000;
        pointer-events: none; z-index: 1000;
    }
}

/*  EVERY BILL FRAMED ON PAPER TOO (26 Sep 2026: "same border for bill
    preview also") - the retail bill, the wholesale bill and purchase, the
    gold estimate and the receipts: a thin black border round each printed
    page, 2.5mm in, drawn again on every page. The sheet's own padding keeps
    the bill inside it.  */
@media print {
    body:has(.sheet)::before {
        content: ""; position: fixed; inset: 2.5mm; border: 1px solid #000;
        pointer-events: none; z-index: 1000;
    }
    .sheet { padding: 6mm 7mm !important; box-sizing: border-box; }
}