/* ============================================================================
   invoice-stationery.css — structure and print layout for the two-mode
   invoice letterhead system (§8, §12, §13, §16).

   Screen AND print share these classes; print-specific overrides live in the
   @media print block at the bottom so the screen preview and the printed
   page never silently diverge.

   NOTHING here sets a monetary figure, a total, a date, a number or any
   accounting value — this file positions and paints markup that
   lib/fee-note-print.js already produced from invCalc()/invRows().
   ========================================================================== */

.inv-sheet {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  /* the safe area, in millimetres, driven by INVSTYLE.safeTop/Right/Bottom/Left
     via inline custom properties set where .inv-sheet is rendered */
  --jb-safe-top: 48mm;
  --jb-safe-right: 16mm;
  --jb-safe-bottom: 24mm;
  --jb-safe-left: 16mm;
}

/* Generic mode carries no background layer and no forced safe-area padding —
   its content flows exactly as it did before this feature (§7). */
.inv-sheet--generic .inv-sheet-content {
  position: relative;
  z-index: 1;
}

/* Imported mode: content sits in the configured safe area, above the
   background artwork. */
.inv-sheet--imported {
  padding-top: var(--jb-safe-top);
  box-sizing: border-box;
}
/* clone: the side and bottom safe area repeats on every printed page, so
   page-one content never runs into the letterhead's footer artwork. The top
   safe area sits on .inv-sheet (sliced) so it applies to page one only. */
.inv-sheet--imported .inv-sheet-content {
  position: relative;
  z-index: 1;
  padding-right: var(--jb-safe-right);
  padding-bottom: var(--jb-safe-bottom);
  padding-left: var(--jb-safe-left);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The page-one letterhead. position:absolute (not fixed, not a CSS
   background) is what keeps this to page one only — see
   docs/design/INVOICE-STATIONERY.md. Sized to the source's own A4 aspect
   ratio via width:100% + height:auto, so it renders at exactly one page's
   height without any pixel arithmetic here. Decorative: excluded from the
   accessibility tree and never in the way of a pointer or a keyboard. */
.inv-letterhead-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Groups the transactional metadata block (invoice no./date/client/matter)
   so print pagination rules can target it as one unit without touching
   invCalc/invRows output. */
.inv-transaction-meta {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* The bank/payment block — kept together on one page where practical (§11,
   §13: "Prevent page breaks inside ... Payment-account details"). */
.inv-payment-block {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Tax ID + signature, kept together (§11: "Keep signature and Tax ID
   together where practical during print pagination"). */
.inv-tax-signature {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Screen preview (§16): the imported sheet keeps an A4 page proportion and a
   readable minimum width; narrow viewports scroll sideways instead of
   squeezing the artwork. Print is unaffected. */
@media screen {
  .inv-sheet--imported {
    aspect-ratio: 210 / 297;
    min-width: 640px;
  }
  #feeNote:has(> .inv-sheet--imported) {
    overflow-x: auto;
  }
}

@media print {
  /* Imported mode uses the full page box; page one has zero browser page
     margin (the @page margin is already zeroed for fee notes generally in
     lib/print-export.js — this rule only concerns the CONTENT box, not the
     page box, and only differs from generic mode in that it adds no
     compensating body margin: see that file's buildPrintDoc() for the
     data-stationery check that skips the 14mm compensation specifically for
     imported mode). */
  .inv-sheet--imported {
    max-width: none;
    width: 100%;
  }

  /* At 210mm wide the A4 raster rounds to a hair over 297mm tall, which
     spills a blank second page; 0.2% vertical squeeze is invisible. */
  .inv-letterhead-bg {
    height: 296.4mm;
    object-fit: fill;
  }

  /* The continuation heading is an @page margin box emitted by
     InvoiceStationery.continuationHeadingHTML(), not an element here. */
}