/* ==========================================================================
   Print: A4 GST invoice, 80 mm thermal receipt, reports, labels
   ========================================================================== */

/* ---- On-screen preview of a printable document ------------------------- */

/* The stage gives the paper something to sit on. In light mode the page is
   cream and the paper is white, so without a distinct backdrop the document
   looks like unstyled text floating on the page. */
.doc-stage {
  padding: 24px 16px 40px;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 0%, var(--gold-faint), transparent 55%),
    var(--bg-body);
}

.doc {
  position: relative;
  background: #fff; color: #111;
  font-family: 'Inter', Arial, sans-serif;
  margin: 0 auto; padding: 12mm;
  width: 210mm; min-height: 297mm;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0,0,0,.14), 0 10px 34px rgba(20,16,6,.28);
}
.doc.a5      { width: 148mm; min-height: 200mm; padding: 10mm; }
.doc.thermal { width: 80mm; min-height: auto; padding: 4mm; font-size: 10px; }

/* Cancelled documents carry a visible stamp so a reprint cannot be mistaken
   for a live receipt. */
.doc.voided { opacity: .96; }
.doc-void {
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 34pt; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(195,38,43,.16);
  border: 3px solid rgba(195,38,43,.22);
  padding: 2mm 8mm; border-radius: 2mm;
  pointer-events: none; z-index: 3; white-space: nowrap;
}

.doc a { color: #111; text-decoration: none; }

.doc-toolbar {
  max-width: 210mm; margin: 0 auto 14px;
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
}

.doc-head {
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
  border-bottom: 2px solid #111; padding-bottom: 3mm;
}
.doc-shop-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20pt; font-weight: 700; line-height: 1.05; color: #111;
}
.doc-shop-meta { font-size: 8.5pt; line-height: 1.45; color: #444; margin-top: 1.5mm; }
.doc-title { text-align: right; flex: 0 0 auto; }
.doc-title h2 {
  font-size: 11pt; text-transform: uppercase; letter-spacing: .1em;
  color: #111; font-weight: 700; white-space: nowrap;
}
.doc-title .no {
  font-family: 'JetBrains Mono', monospace; font-size: 13pt; font-weight: 700;
  margin-top: 1mm; letter-spacing: .02em;
}
.doc-title .dt { font-size: 8.5pt; color: #444; margin-top: .5mm; }

.doc-parties { display: flex; gap: 16px; margin: 11px 0; font-size: 10px; }
.doc-party { flex: 1 1 0; border: 1px solid #bbb; padding: 7px 9px; }
.doc-party h4 { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: #555; margin-bottom: 3px; }
.doc-party b { font-size: 11px; }

table.doc-tbl { width: 100%; border-collapse: collapse; font-size: 10px; margin-top: 7px; }
table.doc-tbl th {
  background: #f0ece0; border: 1px solid #999; padding: 5px 6px;
  text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
}
table.doc-tbl td { border: 1px solid #ccc; padding: 5px 6px; }
table.doc-tbl td.num, table.doc-tbl th.num { text-align: right; font-family: monospace; }
table.doc-tbl tfoot td { background: #faf7ef; font-weight: 700; }

.doc-totals { display: flex; justify-content: flex-end; margin-top: 9px; }
.doc-totals table { font-size: 11px; border-collapse: collapse; min-width: 74mm; }
.doc-totals td { padding: 3px 9px; }
.doc-totals td:last-child { text-align: right; font-family: monospace; }
.doc-totals tr.grand td {
  border-top: 2px solid #111; border-bottom: 2px solid #111;
  font-weight: 700; font-size: 13px; padding-top: 5px; padding-bottom: 5px;
}

.doc-words { font-size: 10px; margin-top: 9px; padding: 6px 9px; background: #f7f4ec; border: 1px solid #ddd; }
.doc-words b { text-transform: uppercase; font-size: 9px; letter-spacing: .05em; color: #555; }

.doc-foot { margin-top: 14px; display: flex; justify-content: space-between; gap: 20px; font-size: 9px; color: #444; }
.doc-foot .decl { flex: 1 1 0; }
.doc-sign { text-align: center; min-width: 46mm; }
.doc-sign .line { border-top: 1px solid #111; margin-top: 16mm; padding-top: 3px; }

.doc-note { font-size: 9px; color: #555; text-align: center; margin-top: 9px; padding-top: 6px; border-top: 1px dashed #bbb; }

/* Thermal receipt */
.doc.thermal { font-family: monospace; }
.doc.thermal .t-center { text-align: center; }
.doc.thermal .t-shop { font-size: 13px; font-weight: 700; }
.doc.thermal .t-rule { border-top: 1px dashed #000; margin: 4px 0; }
.doc.thermal table { width: 100%; border-collapse: collapse; font-size: 9px; }
.doc.thermal table td { padding: 1px 0; vertical-align: top; }
.doc.thermal .t-row { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; }
.doc.thermal .t-grand { font-size: 12px; font-weight: 700; }

/* ---- Actual printing --------------------------------------------------- */

@media print {
  @page { size: A4; margin: 8mm; }

  html, body {
    background: #fff !important; color: #000 !important;
    margin: 0 !important; padding: 0 !important;
  }

  /* Hide all app chrome.
     Everything position:fixed has to be listed here. The theme toggle floats at
     top:16px right:16px, which is exactly where the document title sits, so on
     paper it printed straight over "TAX INVOICE". */
  .sidebar, .header, .doc-toolbar, .no-print, #toasts,
  .modal-backdrop, .sidebar-backdrop, .pay-bar, .action-bar, .filters, .pager-links,
  .theme-btn, .theme-btn-float, .overlay-busy, .bottom-nav, #pwaInstall {
    display: none !important;
  }

  .main { margin-left: 0 !important; }
  .content { padding: 0 !important; max-width: none !important; }

  /* The on-screen stage exists to give the paper a backdrop; on paper it would
     only add a margin and a gradient. */
  .doc-stage {
    padding: 0 !important; min-height: 0 !important; background: none !important;
  }

  .doc {
    width: auto !important; min-height: 0 !important;
    box-shadow: none !important; padding: 0 !important; margin: 0 !important;
  }

  /* ...except a thermal receipt, which must stay 80 mm wide. The rule above
     used to widen it to the full sheet. */
  .doc.thermal {
    width: 80mm !important; max-width: 80mm !important; margin: 0 !important;
  }

  /* Reports print on white. */
  .card {
    background: #fff !important; border: 1px solid #999 !important;
    box-shadow: none !important; break-inside: avoid;
  }
  .card-title, .text-gold { color: #000 !important; }

  table.tbl { font-size: 9pt; }
  table.tbl thead th {
    background: #eee !important; color: #000 !important;
    border-bottom: 1px solid #666 !important; position: static !important;
  }
  table.tbl tbody td { border-bottom: 1px solid #ddd !important; color: #000 !important; }
  table.tbl tbody tr:hover { background: transparent !important; }
  table.tbl thead { display: table-header-group; }
  table.tbl tr { break-inside: avoid; }

  .chip { border: 1px solid #999 !important; color: #000 !important; background: #f4f4f4 !important; }

  a { color: #000 !important; text-decoration: none !important; }

  .print-only { display: block !important; }

  /* Thermal roll. */
  body.print-thermal { width: 80mm; }
  @page thermal { size: 80mm auto; margin: 2mm; }
}

.print-only { display: none; }

/* Label sheet printing: 50 x 25 mm stickers. */
@media print {
  .item-label { border: none !important; break-inside: avoid; }
  .label-sheet { gap: 0 !important; }
}