/* ==========================================================================
   Print styles: A4 tax invoice, 80mm and 58mm thermal receipts.

   #print-root is hidden on screen and revealed only while printing. It always
   uses the paper palette (dark ink on white) regardless of the app theme, so
   working in dark mode never produces a black page.
   ========================================================================== */

#print-root { display: none; }

/* Laid out but invisible, so the receipt height can be measured before
   printing. `display: none` would report a height of zero. */
#print-root.measuring {
  display: block;
  position: fixed;
  top: 0;
  left: -10000px;
  visibility: hidden;
  pointer-events: none;
}

/* --- shared document styles (also used for on-screen preview) ---------- */

.sheet {
  color: #14181F;
  background: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  box-sizing: border-box;
}
.sheet * { box-sizing: border-box; }
.sheet .num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }

/* --- A4 ---------------------------------------------------------------- */

.sheet-a4 { font-size: 9.5pt; line-height: 1.38; }

.a4-orig { text-align: right; color: #6B7280; font-size: 8.5pt; margin-bottom: 4mm; }

.a4-head { display: flex; align-items: flex-start; gap: 8mm; }
.a4-seller { flex: 1; font-size: 8.6pt; line-height: 1.45; color: #22272F; }
.a4-biz {
  font-size: 15pt; font-weight: 700; letter-spacing: -.01em;
  margin: 0 0 1.5mm; color: #14181F;
}
.a4-logo { width: 26mm; flex: none; text-align: right; }
.a4-logo img { max-width: 100%; max-height: 22mm; object-fit: contain; }

.a4-title {
  text-align: center;
  font-size: 14pt; font-weight: 700;
  color: #1E3A5F;
  padding: 2.5mm 0;
  margin: 3mm 0 4mm;
  border-top: 1.2pt solid #1E3A5F;
  border-bottom: 1.2pt solid #1E3A5F;
}

.a4-parties { display: flex; gap: 8mm; margin-bottom: 4mm; }
.a4-billto { flex: 1; font-size: 8.8pt; line-height: 1.45; }
.a4-invdetails { text-align: right; font-size: 8.8pt; line-height: 1.45; }
.a4-label { font-weight: 700; font-size: 8.8pt; margin-bottom: 1mm; }
.a4-label.mt { margin-top: 3mm; }
.a4-cust { font-weight: 700; font-size: 10pt; }

table.a4-items { width: 100%; border-collapse: collapse; font-size: 8.6pt; }
table.a4-items thead th {
  background: #4A76B8;
  color: #FFFFFF;
  font-weight: 600;
  text-align: left;
  padding: 2mm 2mm;
  border: .4pt solid #4A76B8;
  /* Backgrounds are dropped by default in print; force it for the header band. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
table.a4-items thead th.num { text-align: right; }
table.a4-items tbody td {
  padding: 1.8mm 2mm;
  border-bottom: .4pt solid #DDE1E6;
  vertical-align: top;
}
table.a4-items tbody td.c-name { font-weight: 600; }
table.a4-items .c-no { width: 7mm; }
table.a4-items .c-hsn { width: 20mm; }
table.a4-items .c-qty { width: 16mm; }
table.a4-items .c-unit { width: 12mm; }
table.a4-items .c-rate { width: 20mm; }
table.a4-items .c-gst { width: 24mm; }
table.a4-items .c-amt { width: 24mm; }
.gst-pct { display: block; font-size: 7.4pt; color: #6B7280; }
table.a4-items tfoot td {
  padding: 2mm;
  border-top: .8pt solid #14181F;
  border-bottom: .8pt solid #14181F;
  font-weight: 700;
}

.a4-bottom { display: flex; gap: 8mm; margin-top: 4mm; }
.a4-left { flex: 1; font-size: 8.6pt; line-height: 1.45; }
.a4-words { font-size: 8.8pt; }
.a4-right { width: 72mm; flex: none; }

table.a4-totals { width: 100%; border-collapse: collapse; font-size: 8.8pt; }
table.a4-totals td { padding: 1.4mm 2mm; border-bottom: .4pt solid #DDE1E6; }
table.a4-totals td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.a4-totals tr.a4-grand td {
  background: #4A76B8;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 9.6pt;
  border-bottom: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
table.a4-totals tr.a4-balance td { font-weight: 700; border-bottom: 0; }

.a4-pay {
  display: flex; align-items: flex-start; gap: 6mm;
  margin-top: 5mm; padding-top: 3mm;
  border-top: .8pt solid #C8CDD4;
}
.a4-pay-signonly { justify-content: flex-end; }
.a4-qr { width: 24mm; flex: none; text-align: center; }
.a4-qr img { width: 100%; display: block; }
.a4-qr-cap {
  font-size: 6.4pt; font-weight: 700; letter-spacing: .04em;
  background: #14181F; color: #FFFFFF;
  padding: .6mm 0; margin-top: .6mm;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.a4-bank { flex: 1; font-size: 8.4pt; line-height: 1.5; }
.a4-sign { width: 48mm; flex: none; text-align: center; font-size: 8.4pt; }
.a4-sign-for { text-align: right; margin-bottom: 2mm; }
.a4-sign img { max-height: 16mm; max-width: 100%; object-fit: contain; }
.a4-sign-space { height: 16mm; }
.a4-sign-label { font-weight: 700; margin-top: 1mm; }

.a4-footer-note { margin-top: 3mm; font-size: 8.2pt; color: #4A5260; }

.a4-ack { margin-top: 8mm; padding-top: 4mm; border-top: 1pt dashed #9AA1AB; }
.a4-ack-title { text-align: center; font-weight: 700; font-size: 9pt; margin-bottom: 2mm; }
.a4-ack-biz {
  text-align: center; font-weight: 700; font-size: 13pt;
  color: #1E3A5F; margin-bottom: 4mm;
}
.a4-ack-grid { display: flex; gap: 8mm; font-size: 8.6pt; line-height: 1.45; }
.a4-ack-grid > div { flex: 1; }
.a4-ack-sign { text-align: center; align-self: flex-end; }
.a4-ack-dashes { border-top: 1pt dashed #14181F; margin-bottom: 1.5mm; }

/* --- thermal ----------------------------------------------------------- */

.sheet-thermal {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, "Courier New", monospace;
  color: #000000;
  line-height: 1.32;
}
.sheet-58 { width: 58mm; font-size: 7.2pt; }
.sheet-80 { width: 80mm; font-size: 8pt; }

.t-center { text-align: center; }
.t-small { font-size: .92em; }
.t-biz { font-weight: 700; font-size: 1.35em; letter-spacing: -.01em; margin-bottom: .6mm; }
.t-title { font-weight: 700; letter-spacing: .12em; padding: .6mm 0; }
.t-rule { border-top: 1px solid #000; margin: 1.2mm 0; }
.t-dash { border-top-style: dashed; }
.t-wrap { word-break: break-word; }

.t-row { display: flex; justify-content: space-between; gap: 2mm; }
.t-row > span:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.t-item { margin-bottom: 1.3mm; }
.t-item-name { font-weight: 700; word-break: break-word; }
.t-item-calc { display: flex; justify-content: space-between; gap: 2mm; }
.t-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-item-meta { font-size: .86em; color: #000; opacity: .75; }

.t-total { font-weight: 700; font-size: 1.3em; padding: .5mm 0; }
.t-words { font-style: italic; margin-top: 1.5mm; word-break: break-word; }
.t-note { margin-top: 1.5mm; }
.t-qr { margin-top: 2mm; text-align: center; }
.t-qr img { width: 28mm; max-width: 70%; display: block; margin: 0 auto .8mm; }
.t-footer { margin-top: 1mm; font-weight: 600; }
/* Blank tail so the slip clears the tear bar. */
.t-feed { height: 12mm; }

/* ==========================================================================
   Print media
   ========================================================================== */

@media print {
  /* Everything except the print document is hidden. */
  body > *:not(#print-root) { display: none !important; }

  html, body {
    background: #FFFFFF !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #print-root { display: block !important; }

  .sheet {
    box-shadow: none !important;
    margin: 0 !important;
    width: auto !important;
  }

  /* Keep item rows and the totals block from splitting across pages. */
  table.a4-items tr { page-break-inside: avoid; break-inside: avoid; }
  .a4-bottom, .a4-pay, .a4-ack { page-break-inside: avoid; break-inside: avoid; }
  .a4-ack { page-break-before: auto; }

  .t-item { page-break-inside: avoid; break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   Page size is NOT set here.

   Chrome ignores the `size` descriptor on a *named* @page rule (`@page roll58
   { size: 58mm auto }` plus `body { page: roll58 }`), silently falling back to
   the default paper -- verified by printing to PDF and measuring the MediaBox.
   So print.js injects a plain `@page { size: ... }` for the chosen profile
   immediately before window.print(). Only the width-dependent styles live here.
   -------------------------------------------------------------------------- */

body.print-80 .sheet-thermal { width: 100% !important; font-size: 8pt; }
body.print-58 .sheet-thermal { width: 100% !important; font-size: 7.2pt; }
body.print-a4 .sheet-a4 { width: 100% !important; }