/* ==========================================================================
   A4 INVOICE SHEET — shared stylesheet
   Used by /admin/invoice-detail (admin view) and /verify/invoice (public view)
   so both render the exact same printable document.

   The sheet is a FIXED A4 page: 210mm x 296.5mm (0.5mm under a true A4 sheet
   so browser/jsPDF rounding can never push a blank second page). Vertical
   rhythm is tuned so a normal invoice fits on that one page. On narrow
   screens the sheet is scaled down by JS (transform), so what is on screen is
   always exactly the page that prints.
   ========================================================================== */

.inv-sheet-outer{position:relative;width:100%;overflow:hidden}

#invoice-sheet{
  width:210mm;
  height:296.5mm;
  background:#fff;
  color:#111;
  padding:11mm 13mm;
  position:relative;
  overflow:hidden;
  transform-origin:top left;
  box-shadow:0 2px 14px rgba(0,0,0,.12);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  display:flex;
  flex-direction:column;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

/* ---- Status banner: thin strip, full bleed across the top ---- */
.unpaid-banner,.paid-banner,.cancelled-banner{
  color:#fff;text-align:center;font-weight:800;font-size:10.5px;letter-spacing:.9px;
  padding:5px 8px;margin:-11mm -13mm 7mm -13mm;text-transform:uppercase;line-height:1.3;
}
.unpaid-banner{background:#dc2626}
.paid-banner{background:#059669}
.cancelled-banner{background:#6b7280}

/* ---- Header ---- */
.inv-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:7mm}
.inv-header-left{display:flex;flex-direction:column;gap:4px}
.inv-title{font-size:25px;font-weight:800;color:#111;letter-spacing:-0.5px;line-height:1.1}
.inv-number{font-size:14px;color:#1B3068;font-family:ui-monospace,Menlo,monospace;font-weight:700;letter-spacing:.5px;margin-top:2px}
.inv-header-right{text-align:right;min-width:180px}
.inv-header-right img{height:36px;margin-bottom:6px;display:block;margin-left:auto}
.sender-name{font-size:12.5px;font-weight:700;color:#111}
.sender-detail{font-size:11px;color:#6b7280;line-height:1.45;margin-top:2px}

/* ---- Bill to ---- */
.parties{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:5mm}
.party-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#9ca3af;margin-bottom:4px}
.party-name{font-size:14px;font-weight:700;color:#111;margin-bottom:2px}
.party-info{font-size:11.5px;color:#6b7280;line-height:1.5}

/* ---- Dates ---- */
.dates-row{display:flex;gap:28px;margin-bottom:5mm;padding:9px 14px;background:#f9fafb;border-radius:6px}
.date-item{display:flex;flex-direction:column;gap:1px}
.date-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#9ca3af}
.date-val{font-size:12.5px;font-weight:600;color:#111}

/* ---- Line items ---- */
.items-tbl{width:100%;border-collapse:collapse;margin-bottom:4mm}
.items-tbl th{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#9ca3af;padding:0 8px 7px;border-bottom:1px solid #e5e7eb}
.items-tbl th:last-child,.items-tbl td:last-child{text-align:right}
.items-tbl td{padding:6px 8px;font-size:12px;color:#374151;border-bottom:1px solid #f3f4f6;line-height:1.4}
.items-tbl tr:last-child td{border-bottom:none}
.items-tbl td:first-child{font-weight:500}

/* ---- Totals ---- */
.totals-block{display:flex;justify-content:flex-end;margin-bottom:5mm}
.totals-inner{min-width:230px}
.total-row{display:flex;justify-content:space-between;font-size:12.5px;color:#6b7280;padding:3px 0}
.total-row.grand{font-size:15px;font-weight:800;color:#111;border-top:2px solid #111;padding-top:8px;margin-top:4px}
.total-row.paid{font-size:13px;font-weight:800;color:#059669;padding-top:6px}
.total-row.balance{font-size:13px;font-weight:800;color:#dc2626}
/* timestamp + receipt id under the PAID figure */
.paid-stamp{font-size:7.5px;color:#9ca3af;text-align:right;line-height:1.5;letter-spacing:.2px;font-family:ui-monospace,Menlo,monospace}
.paid-stamp strong{color:#6b7280;font-weight:700}

/* ---- Notes ---- */
.inv-notes{border-top:1px solid #e5e7eb;padding-top:12px;margin-bottom:5mm}
.inv-notes-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#9ca3af;margin-bottom:4px}
.inv-notes-text{font-size:11.5px;color:#6b7280;line-height:1.5;white-space:pre-wrap}

/* ==========================================================================
   BOTTOM BAND — pinned to the foot of the page, split into two columns:
   bank transfer details on the left, QR + verify link on the right.
   ========================================================================== */
.inv-bottom{
  display:grid;
  grid-template-columns:1fr 178px;
  gap:16px;
  align-items:stretch;
  margin-top:auto;
  border-top:1px solid #e5e7eb;
  padding-top:12px;
}

/* left column — bank transfer details */
.bank-box{border:1px solid #e5e7eb;border-left:3px solid #1B3068;border-radius:6px;background:#f9fafb;padding:10px 13px}
.bank-title{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#1B3068;margin-bottom:6px}
.bank-row{display:flex;font-size:11px;padding:1.5px 0;line-height:1.4}
.bank-k{color:#9ca3af;width:118px;flex-shrink:0}
.bank-v{color:#111;font-weight:600;word-break:break-word}
.bank-v.mono{font-family:ui-monospace,Menlo,monospace;letter-spacing:.2px}

/* right column — QR + verification link */
.verify-box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:1px solid #e5e7eb;border-radius:6px;background:#fff;padding:9px 8px;
}
.verify-box canvas,.verify-box img{display:block}
.verify-title{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:#1B3068;margin-bottom:6px}
.verify-url{font-size:8px;color:#374151;font-weight:600;margin-top:7px;line-height:1.3;white-space:nowrap;font-family:ui-monospace,Menlo,monospace}
.verify-hint{font-size:8px;color:#9ca3af;margin-top:4px;line-height:1.35}

/* thin legal strip under both columns */
.inv-legal{grid-column:1 / -1;padding-top:8px;border-top:1px solid #f3f4f6}
.legal-row{font-size:9.5px;color:#9ca3af;line-height:1.45;display:flex;justify-content:space-between;gap:14px}
.legal-row strong{color:#6b7280}
.terms-note{
  font-size:10px;line-height:1.45;color:#92400e;background:#fffbeb;border:1px solid #fde68a;
  border-radius:5px;padding:6px 9px;margin-bottom:7px;
}
.terms-note strong{color:#78350f;font-weight:700}

/* ==========================================================================
   DENSITY FALLBACK — a long invoice must still land on ONE A4 page.
   invoice-sheet.js adds .dense, then .dense2, only if the content overflows.
   ========================================================================== */
#invoice-sheet.dense .inv-header{margin-bottom:5mm}
#invoice-sheet.dense .parties{margin-bottom:4mm}
#invoice-sheet.dense .dates-row{margin-bottom:4mm;padding:7px 12px}
#invoice-sheet.dense .items-tbl td{padding:4px 8px;font-size:11px}
#invoice-sheet.dense .items-tbl th{padding:0 8px 5px}
#invoice-sheet.dense .totals-block{margin-bottom:4mm}
#invoice-sheet.dense .inv-notes{margin-bottom:4mm;padding-top:9px}
#invoice-sheet.dense .status-watermark{font-size:88px}

#invoice-sheet.dense2 .inv-header{margin-bottom:4mm}
#invoice-sheet.dense2 .inv-title{font-size:21px}
#invoice-sheet.dense2 .parties{margin-bottom:3mm}
#invoice-sheet.dense2 .dates-row{margin-bottom:3mm;padding:6px 11px}
#invoice-sheet.dense2 .items-tbl td{padding:2.5px 7px;font-size:10px;line-height:1.3}
#invoice-sheet.dense2 .items-tbl th{padding:0 7px 4px;font-size:9px}
#invoice-sheet.dense2 .totals-block{margin-bottom:3mm}
#invoice-sheet.dense2 .total-row{font-size:11.5px;padding:2px 0}
#invoice-sheet.dense2 .total-row.grand{font-size:14px;padding-top:6px}
#invoice-sheet.dense2 .inv-notes{margin-bottom:3mm;padding-top:7px;font-size:10.5px}
#invoice-sheet.dense2 .bank-row{font-size:10px;padding:1px 0}
#invoice-sheet.dense2 .status-watermark{font-size:76px}

/* ---- Diagonal status watermark (prints too) ---- */
.status-watermark{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%) rotate(-35deg);font-size:100px;font-weight:900;opacity:.045;pointer-events:none;white-space:nowrap;text-transform:uppercase;color:#dc2626;letter-spacing:10px}
.status-watermark.paid{color:#059669}

/* ==========================================================================
   PRINT — the sheet is already A4, so printing is a 1:1 capture
   ========================================================================== */
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff!important;margin:0!important;padding:0!important}
  .no-print{display:none!important}
  /* Neutralise the page chrome wrappers on both hosts so the sheet is the
     only thing on the sheet of paper. */
  .page,.wrap,.wrap.wide{max-width:none!important;margin:0!important;padding:0!important;width:auto!important}
  .inv-sheet-outer{height:auto!important;overflow:visible!important;width:auto!important}
  #invoice-sheet{
    transform:none!important;
    width:210mm!important;
    height:296.5mm!important;
    box-shadow:none!important;
    border-radius:0!important;
    margin:0!important;
    page-break-after:avoid;
    page-break-inside:avoid;
  }
}