/* ==========================================================================
   A4 invoice document — shared by the on-screen preview and the printed PDF.

   Page setup: @page margins are 0 so browsers do not print their own header/footer (date, time,
   page title, URL). The document supplies its own margins instead:
   - left/right: padding on the document;
   - top: a spacer in the frame table's <thead>, repeated on every page;
   - bottom: the footer is position: fixed at the bottom of the page (repeated on every page) and a
     spacer in the frame table's <tfoot> reserves the same height so content never runs under it.
   Letterhead and footer images span the page width, inset slightly so printers do not cut them.
   On screen the sheet is a 297mm-tall flex column, so the footer sits at the bottom of the page.
   ========================================================================== */
.invoice-doc {
  --doc-ink: #14213a;
  --doc-muted: #5b687c;
  --doc-line: #d9e1ec;
  --doc-accent: #c27135;
  --doc-navy: #152d52;
  --pad-top: 12mm;
  --pad-x: 14mm;
  --pad-bottom: 12mm;
  --edge-gap: 10mm; /* keeps letterhead and footer images clear of the printer's unprintable edges */
  --edge-side: 6mm;
  --doc-footer-h: 16mm; /* text footer; replaced by the image height when a footer image is used */
  position: relative;
  display: flex;
  flex-direction: column;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  background: #fff;
  color: var(--doc-ink);
  font-family: 'Manrope', Arial, sans-serif;
  font-size: 9.5pt;
  line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
  box-shadow: 0 10px 30px rgba(15, 34, 64, 0.18);
  overflow: hidden;
}
.invoice-doc * { box-sizing: border-box; }
.invoice-doc h1, .invoice-doc h2 { margin: 0; letter-spacing: 0; }
.invoice-doc .muted { color: var(--doc-muted); }

.doc-frame { width: 100%; border-collapse: collapse; flex: 1 0 auto; }
.doc-frame > thead > tr > td, .doc-frame > tbody > tr > td, .doc-frame > tfoot > tr > td { padding: 0; vertical-align: top; }
.doc-header-space, .doc-footer-space { display: none; }

/* Header: text version, or a full-width letterhead image */
.doc-header { position: relative; padding-bottom: 5mm; border-bottom: 2px solid var(--doc-navy); }
.doc-header.has-image { margin: calc(var(--edge-gap) - var(--pad-top)) calc(var(--edge-side) - var(--pad-x)) 0; padding: 0; border-bottom: 0; }
.doc-header-image { display: block; width: 100%; height: auto; max-height: 90mm; object-fit: contain; }
.doc-company { display: flex; align-items: center; gap: 5mm; }
.doc-logo { width: 24mm; height: 24mm; object-fit: contain; }
.doc-company > div { display: grid; gap: 0.6mm; color: var(--doc-muted); font-size: 8.5pt; }
.doc-company-name { color: var(--doc-navy); font-size: 14pt; font-weight: 800; letter-spacing: 0.01em; }

/* Title and amount box */
.doc-title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm; margin: 6mm 0 5mm; }
.doc-title { color: var(--doc-navy); font-size: 24pt; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; }
.doc-ref { margin: 2.5mm 0 0; font-size: 10.5pt; }
.doc-ref span { color: var(--doc-muted); font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.08em; }
.doc-ref strong { font-family: 'Manrope', Arial, sans-serif; font-size: 12pt; font-weight: 500; }
.doc-amount-box { display: grid; min-width: 50mm; padding: 2.6mm 4mm; border-radius: 2mm; background: #3d5f8c; color: #fff; text-align: right; } /* same softer blue as the net amount bar */
.doc-amount-box span { font-size: 6.8pt; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; }
.doc-amount-box strong { font-family: 'Manrope', Arial, sans-serif; font-size: 12.5pt; font-weight: 500; }
.doc-amount-box small { font-size: 8pt; opacity: 0.8; }

/* Parties */
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; padding: 4mm 0; border-top: 1px solid var(--doc-line); border-bottom: 1px solid var(--doc-line); }
.doc-parties > div { display: grid; align-content: start; gap: 0.6mm; }
.doc-parties h2, .doc-block h2, .doc-words span { color: var(--doc-accent); font-size: 7.5pt; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1.5mm; }
.doc-client { font-size: 11pt; }
.doc-parties dl { display: grid; gap: 0.8mm; margin: 0; }
.doc-parties dl div { display: grid; grid-template-columns: 34mm 1fr; gap: 3mm; }
.doc-parties dt { color: var(--doc-muted); }
.doc-parties dd { margin: 0; font-weight: 600; }

/* Items */
.doc-items { width: 100%; margin-top: 5mm; border-collapse: collapse; }
.doc-items thead { display: table-header-group; }
.doc-items th { padding: 2.2mm 2.5mm; background: #eef2f8; color: var(--doc-navy); font-size: 7.5pt; font-weight: 800; text-align: left; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1.5px solid var(--doc-navy); }
.doc-items td { padding: 2.6mm 2.5mm; border-bottom: 1px solid var(--doc-line); vertical-align: top; }
.doc-items tr { break-inside: avoid; page-break-inside: avoid; }
.doc-items .col-no { width: 9mm; color: var(--doc-muted); }
.doc-items .col-num { width: 32mm; text-align: right; font-family: 'Manrope', Arial, sans-serif; white-space: nowrap; }
.doc-items th.col-num { font-family: inherit; }
.doc-desc { white-space: pre-line; }

/* Totals */
/* Service and deduction lines use the full width; the amount in words sits underneath. */
.doc-summary { margin-top: 5mm; break-inside: avoid; page-break-inside: avoid; }
.doc-totals { width: 100%; border-collapse: collapse; }
.doc-totals td { padding: 2mm 2.5mm; border-bottom: 1px solid #edf1f6; }
.doc-totals td:last-child { width: 55mm; text-align: right; font-family: 'Manrope', Arial, sans-serif; white-space: nowrap; }
.doc-totals tr.minus td:first-child { padding-left: 6mm; color: var(--doc-muted); }
.doc-totals tr.minus td:last-child { color: #a33b3b; }
.doc-totals tr.subtotal td { border-top: 1px solid var(--doc-navy); border-bottom-color: var(--doc-line); background: #f6f8fb; font-weight: 700; }
.doc-totals tr.net td { padding: 0; border-bottom: 0; }
.doc-net-bar { display: flex; justify-content: space-between; align-items: center; gap: 6mm; padding: 3.2mm 3mm; border-radius: 1.5mm; background: #3d5f8c; color: #fff; font-weight: 800; font-size: 11.5pt; } /* softer than the navy used elsewhere */
.doc-net-bar strong { font-family: 'Manrope', Arial, sans-serif; font-weight: 500; white-space: nowrap; }
.doc-words { display: grid; gap: 1mm; margin-top: 3mm; padding: 3mm 4mm; border-left: 2px solid var(--doc-accent); background: #f6f8fb; }
.doc-words span { margin-bottom: 0 !important; }
.doc-words strong { font-weight: 600; }
.doc-words strong::first-letter { text-transform: uppercase; }
.doc-totals tr.paid-row td { font-size: 8.5pt; color: var(--doc-muted); }
.doc-totals tr.paid-row.strong td { color: var(--doc-ink); font-weight: 700; }

/* Notes, bank details, stamp and signature */
.doc-block { display: grid; gap: 0.6mm; }
.doc-notes { margin-top: 6mm; padding: 3mm 4mm; border-left: 2px solid var(--doc-accent); background: #fbf7f3; break-inside: avoid; }
.doc-notes p { margin: 0; white-space: pre-line; }
.doc-closing { display: grid; grid-template-columns: 1fr 82mm; gap: 8mm; align-items: end; margin-top: 5mm; break-inside: avoid; page-break-inside: avoid; }
.doc-bank span { font-size: 8.5pt; }
.doc-sign { position: relative; display: grid; justify-items: center; align-items: end; min-height: 44mm; }
.doc-stamp { display: block; max-width: 82mm; max-height: 50mm; object-fit: contain; }
.doc-stamp-space { width: 100%; height: 44mm; } /* left blank on the PDF when no stamp image is uploaded */
.doc-status-note { margin: 5mm 0 0; color: #a33b3b; font-weight: 700; text-align: center; }

/* Footer: text version, or a full-width footer image */
.doc-footer { position: relative; margin-top: auto; padding-top: 4mm; }
.doc-footer.has-image { margin: auto calc(var(--edge-side) - var(--pad-x)) calc(var(--edge-gap) - var(--pad-bottom)); }
.doc-footer-text { display: grid; gap: 0.5mm; padding-top: 2.5mm; border-top: 2px solid var(--doc-navy); color: var(--doc-ink); font-size: 7.5pt; text-align: center; }
.doc-footer-image { display: block; width: 100%; height: auto; max-height: 70mm; object-fit: contain; object-position: center bottom; }

/* Draft / paid / cancelled watermark */
.doc-watermark { position: absolute; top: 45%; left: 50%; z-index: 0; transform: translate(-50%, -50%) rotate(-28deg); color: rgba(21, 45, 82, 0.06); font-size: 110pt; font-weight: 800; letter-spacing: 0.1em; pointer-events: none; white-space: nowrap; }
.invoice-doc[data-status='paid'] .doc-watermark { color: rgba(47, 122, 97, 0.1); }
.invoice-doc[data-status='cancelled'] .doc-watermark { color: rgba(194, 69, 69, 0.1); }
.doc-frame, .doc-footer { position: relative; z-index: 1; }

/* Administrator insert / replace controls (preview only, never printed) */
.doc-slot-tools { position: absolute; top: 3mm; right: 3mm; z-index: 5; display: flex; gap: 6px; opacity: 0.92; }
.doc-footer .doc-slot-tools { top: auto; bottom: calc(100% + 2mm); }
.doc-footer.has-image .doc-slot-tools { top: 3mm; bottom: auto; right: 3mm; }
.doc-sign .doc-slot-tools { position: static; justify-content: center; margin-top: 2mm; }
.doc-slot-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid #c9d6e6; border-radius: 6px; background: rgba(255, 255, 255, 0.96); color: var(--doc-navy); font: 700 11px 'Manrope', sans-serif; box-shadow: 0 2px 8px rgba(15, 34, 64, 0.15); cursor: pointer; }
.doc-slot-btn:hover { border-color: var(--doc-accent); color: var(--doc-accent); }
.doc-slot-btn.danger:hover { border-color: #c24545; color: #c24545; }
.doc-slot-btn .icon { width: 13px; height: 13px; }
.is-editable .doc-header, .is-editable .doc-footer, .is-editable .doc-sign { outline: 1px dashed transparent; outline-offset: 1mm; transition: outline-color 0.15s; }
.is-editable .doc-header:hover, .is-editable .doc-footer:hover, .is-editable .doc-sign:hover { outline-color: #e3b58e; }
.is-editable .doc-stamp-space { display: grid; place-items: center; border: 1.5px dashed #c9d6e6; border-radius: 2mm; background: #f8fafc; }
.doc-slot-hint { color: var(--doc-muted); font-size: 8pt; }

/* The preview is scaled to fit its panel by invoice-view.js (fitPreview), so it matches the PDF. */

/* ---------- Print / PDF ---------- */
@page {
  size: A4 portrait;
  margin: 0;
}
@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body.printing > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; }
  .invoice-doc {
    width: auto;
    min-height: 0;
    padding: 0 var(--pad-x);
    box-shadow: none;
    overflow: visible;
    display: block;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .doc-header-space { display: block; height: var(--pad-top); }
  .doc-footer-space { display: block; height: calc(var(--doc-footer-h) + var(--pad-bottom) + 4mm); }
  .invoice-doc:has(.doc-footer.has-image) .doc-footer-space { height: calc(var(--doc-footer-h) + var(--edge-gap) + 4mm); }
  .doc-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--doc-footer-h) + var(--pad-bottom));
    margin: 0;
    padding: 0 var(--pad-x) var(--pad-bottom);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #fff;
  }
  .doc-footer.has-image { left: var(--edge-side); right: var(--edge-side); bottom: var(--edge-gap); height: var(--doc-footer-h); margin: 0; padding: 0; }
  .doc-footer.has-image .doc-footer-image { max-height: none; }
  .doc-header.has-image { margin-top: calc(var(--edge-gap) - var(--pad-top)); }
  .doc-slot-tools, .doc-slot-hint { display: none !important; }
  .doc-watermark { position: fixed; }
}
#print-root { display: none; }
.doc-totals tr.net td { width: auto; font-family: 'Manrope', Arial, sans-serif; text-align: left; }
.doc-net-bar strong { font-size: 13pt; font-weight: 600; }

.doc-ref strong, .doc-amount-box strong { font-weight: 700; letter-spacing: 0.01em; }
.doc-net-bar strong { font-weight: 800; }
.doc-totals tr.subtotal td:last-child { font-weight: 800; }

/* Verification QR code under the stamp and signature */
.doc-security { display: flex; justify-content: center; width: 100%; margin-top: 2.5mm; padding-top: 2.5mm; border-top: 1px dashed var(--doc-line); }
.doc-qr svg { display: block; width: 19mm; height: 19mm; }

/* Payment details line up with the top of the stamp and signature area. */
.doc-closing { align-items: start; }
.doc-sign { align-content: start; }

/* 'Attestation of' block under Billed to */
.doc-parties .doc-attestation-label { margin-top: 3.5mm; }
.doc-attestation { font-size: 10.5pt; }

/* Compact spacing, applied by fitOnePage() when an invoice would otherwise need a second page. */
.invoice-doc.is-compact .doc-title-row { margin: 3mm 0; }
.invoice-doc.is-compact .doc-parties { padding: 2.5mm 0; }
.invoice-doc.is-compact .doc-parties .doc-attestation-label { margin-top: 2mm; }
.invoice-doc.is-compact .doc-items { margin-top: 3mm; }
.invoice-doc.is-compact .doc-items th { padding: 1.6mm 2.5mm; }
.invoice-doc.is-compact .doc-items td { padding: 1.4mm 2.5mm; }
.invoice-doc.is-compact .doc-summary { margin-top: 3mm; }
.invoice-doc.is-compact .doc-totals td { padding: 1.1mm 2.5mm; }
.invoice-doc.is-compact .doc-net-bar { padding: 2.4mm 3mm; }
.invoice-doc.is-compact .doc-words { margin-top: 2mm; padding: 2mm 4mm; }
.invoice-doc.is-compact .doc-notes { margin-top: 3mm; padding: 2mm 4mm; }
.invoice-doc.is-compact .doc-closing { margin-top: 3mm; }

/* Off-screen copy captured into the downloadable PDF (invoice-pdf.js). */
.invoice-doc.as-pdf { box-shadow: none; }

/* Advance request rows under the net amount payable */
.doc-totals tr.advance-row td { padding-top: 2.4mm; padding-bottom: 2.4mm; }
.doc-totals tr.advance-row.now td { border-bottom: 1px solid var(--doc-line); background: #fbf3ec; color: var(--doc-navy); font-weight: 800; }
.doc-totals tr.advance-row.now td:first-child { border-left: 2px solid var(--doc-accent); }
.doc-totals tr.advance-row.later td { color: var(--doc-ink); font-weight: 600; }
.doc-totals tr.advance-row small { display: block; margin-top: 0.5mm; color: var(--doc-muted); font-size: 8pt; font-weight: 500; }

/* Services table: out-of-pocket line and the total amount (services + out-of-pocket) */
.doc-items tr.expense-row td { color: var(--doc-muted); font-style: italic; }
.doc-items tfoot tr.items-total td { padding: 2.4mm 2.5mm; border-top: 1.5px solid var(--doc-navy); border-bottom: 0; background: #eef2f8; color: var(--doc-navy); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 8.5pt; }
.doc-items tfoot tr.items-total td.col-num { font-size: 9.5pt; letter-spacing: 0; }
.doc-items tfoot { display: table-row-group; } /* print the total once, after the last line, not on every page */
.doc-kind { margin: 1.5mm 0 0; color: var(--doc-accent); font-size: 8.5pt; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }