/* NEX-T POS - the receipt (js/receipt.js): the on-screen preview (paper look), the print layout, and the public
   e-receipt page (receipt.html).
   Printing: receipt.js puts the receipt into #print-root (class paper-80 / paper-58) and sets html.pos-printing; then
   only #print-root is printed, black on white, on its own named page (receipt80 / receipt58) with no margins (that
   also stops Chrome's date / address lines). The page height is the receipt's own: receipt.js adds
   `@page receiptNN { size: NNmm <height>mm }` to this stylesheet for the print (CSS has no "auto" page height).
   Printable width: 72 mm on 80 mm paper, 48 mm on 58 mm paper. */

/* ------------------------------------------------------------------ the receipt itself (screen and print) */
.receipt { box-sizing: border-box; font: 12px/1.35 Arial, "Helvetica Neue", "Segoe UI", system-ui, sans-serif; color: #111; background: #fff;
  overflow-wrap: anywhere; text-align: left; }
.receipt * { box-sizing: border-box; }
.r-logo-wrap { text-align: center; margin: 0 0 2mm; }
.r-logo { display: inline-block; max-width: 70%; max-height: 24mm; filter: grayscale(1); }
.r-head { text-align: center; }
.r-biz { font-size: 15px; font-weight: 800; line-height: 1.2; margin-bottom: 1mm; }
.r-line { line-height: 1.35; }
.r-title { margin: 3mm 0 0; padding-top: 2mm; border-top: 1px dashed #000; text-align: center; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.r-voided { margin: 3mm 0 0; padding: 1.5mm 2mm; border: 2px solid #000; text-align: center; font-size: 18px; font-weight: 900; letter-spacing: .2em; }
.r-meta { margin-top: 2mm; }
.r-no { font-weight: 800; font-size: 13px; }
.r-items, .r-totals, .r-pay, .r-section { margin-top: 2mm; padding-top: 2mm; border-top: 1px dashed #000; }
.r-item + .r-item { margin-top: 1.5mm; }
.r-item-name { font-weight: 700; }
.r-row { display: flex; justify-content: space-between; align-items: baseline; gap: 2mm; }
.r-label { min-width: 0; }
.r-amt { flex: none; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.r-qty, .r-disc { padding-left: 2mm; }
.r-totals .r-disc { padding-left: 0; }
.r-total { margin-top: 1mm; font-size: 16px; font-weight: 900; }
.r-tax { margin-top: .5mm; text-align: right; font-size: 11px; }
.r-change { font-weight: 800; }
.r-count { margin-top: 2mm; font-size: 11px; }
.r-note { margin-top: 1mm; font-size: 11px; white-space: pre-wrap; }
.r-foot { margin-top: 3mm; padding-top: 2mm; border-top: 1px dashed #000; text-align: center; }
.r-qr { margin-top: 3mm; text-align: center; }
.r-qr-svg { display: block; width: 32mm; height: 32mm; margin: 0 auto; }
.paper-58 .r-qr-svg { width: 30mm; height: 30mm; }
.r-qr-text { margin-top: 1mm; font-size: 11px; }
/* the counter summary and the test print */
.r-section-title { font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1mm; }
.r-section .r-total { font-size: 14px; }
.r-diff { font-weight: 800; }
.r-printed { margin-top: 3mm; font-size: 11px; }
.r-sig { display: flex; gap: 4mm; margin-top: 4mm; }
.r-sig-line { flex: 1; margin-top: 10mm; padding-top: 1mm; border-top: 1px solid #000; font-size: 11px; }
.r-ruler { display: flex; justify-content: space-between; margin-top: 3mm; padding: 2mm 1mm; border: 2px solid #000; font-weight: 800; }
.r-help { margin-top: 1.5mm; font-size: 11px; }
.r-items, .r-item, .r-row, .r-totals, .r-pay, .r-qr, .r-voided, .r-sig, .r-section { break-inside: avoid; page-break-inside: avoid; }

/* ------------------------------------------------------------------ on screen: the paper look (previews)
   POS.receipt.render() returns .receipt.paper-80 / .paper-58; put it in .receipt-paper for the grey surround */
.receipt-paper { display: flex; justify-content: center; padding: 16px; border-radius: var(--radius, 12px); background: var(--surface-3, #e6e9ee); overflow-x: auto; }
.receipt.paper-80 { width: 80mm; padding: 5mm 4mm 6mm; }
.receipt.paper-58 { width: 58mm; padding: 5mm 5mm 6mm; }
.receipt-paper > .receipt, .receipt.preview { flex: none; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 0, 0, .12); }
.receipt.is-voided .r-items, .receipt.is-voided .r-totals { opacity: .55; }

/* #print-root: laid out (to measure its height) at the printable width, but never seen on screen */
#print-root { position: fixed; top: 0; left: -10000px; visibility: hidden; pointer-events: none; background: #fff; }
#print-root.paper-80 { width: 72mm; }
#print-root.paper-58 { width: 48mm; }
#print-root .receipt { width: auto; padding: 2mm 0 4mm; box-shadow: none; border-radius: 0; }

/* ------------------------------------------------------------------ print */
@page receipt80 { margin: 0; }
@page receipt58 { margin: 0; }
@media print {
  html:not(.pos-printing) #print-root { display: none !important; }
  html.pos-printing, html.pos-printing body { margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important;
    background: #fff !important; overflow: visible !important; }
  html.pos-printing body > *:not(#print-root) { display: none !important; }
  html.pos-printing #print-root { position: static; left: auto; visibility: visible; display: block; margin: 0 auto; }
  html.pos-printing #print-root.paper-80 { page: receipt80; width: 72mm; }
  html.pos-printing #print-root.paper-58 { page: receipt58; width: 48mm; }
  /* black only: thermal paper prints no grey, and backgrounds waste the head */
  html.pos-printing #print-root, html.pos-printing #print-root * { color: #000 !important; background: transparent !important; box-shadow: none !important;
    text-shadow: none !important; opacity: 1 !important; }
  html.pos-printing #print-root .r-qr-svg rect { fill: #fff; }
  html.pos-printing #print-root .r-qr-svg path { fill: #000; }
}

/* ------------------------------------------------------------------ the e-receipt page (receipt.html) */
body.ereceipt-page { min-height: 100vh; background: var(--bg, #f4f5f7); }
/* (white in dark mode too: the NEX-T wordmark is drawn on white) */
.er-head { display: flex; justify-content: center; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px; background: #fff;
  border-bottom: 1px solid var(--line, #dfe3e9); }
.er-logo { width: 120px; height: auto; }
.er-main { width: min(460px, 100%); margin: 0 auto; padding: 18px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
.er-main .receipt-paper { padding: 14px 10px; }
/* on a phone the receipt is read on screen: wider and larger than the paper */
.er-main .receipt.paper-80, .er-main .receipt.paper-58 { width: 100%; max-width: 400px; padding: 18px 16px 22px; font-size: 14px; }
.er-main .receipt .r-biz { font-size: 18px; }
.er-main .receipt .r-total { font-size: 19px; }
.er-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; text-align: center; }
.er-hint { margin: 0; }
.er-message { text-align: center; padding: 28px 20px; }
.er-message .er-title { font-size: 20px; margin: 0 0 8px; }
.er-message .er-text { color: var(--muted, #5d6573); margin: 0 0 18px; }
.er-voided { justify-content: center; font-weight: 700; }
.er-loading { padding: 48px 16px; }
@media print {
  body.ereceipt-page .er-head, body.ereceipt-page .er-actions { display: none !important; }
}