/* Print & PDF-preview output rules.
   @page itself is intentionally NOT declared here — it's generated
   dynamically by applyPaperSize() in state.js (paper size only; margin is
   always 0) and injected into the #pageSizeCSS <style> tag, so there's a
   single source of truth for it.

   The repeating top margin, the repeating footer, and the background
   fully painting every page (including whatever's left over past the end
   of the real content on the last page) all come from
   applyPrintTableWrap() in preview.js, which restructures .invoice's
   children at print time into a plain HTML table with a repeating <thead>
   (an empty top-margin spacer) and a repeating <tfoot> (the footer) —
   table-header-group/table-footer-group are well-supported CSS2.1 table
   layout, the same mechanism already used for the items table's own
   <thead> repeating on every page, so the browser reserves their space on
   every page itself, guaranteed, as part of laying the table out — no
   custom pagination logic needed, and it works the same in every browser
   including Firefox. .invoice's own padding-top/padding-bottom are turned
   off below for exactly this reason: a plain block box's padding-top and
   padding-bottom don't repeat across printed pages the way this thead/
   tfoot pair does — see templatePaddingMm()'s comment in state.js. Its
   padding-left/padding-right are unaffected and stay on, since horizontal
   padding has no such problem.

   Two other designs came before this one, each with a real correctness
   problem:
     - Predicting page breaks in JS before printing (to force real breaks
       and add colored in-flow padding at the predicted spots) doesn't hold
       up: that measurement runs under normal screen layout, before print
       media is actually active, and on two separate templates it didn't
       match the real print layout closely enough — once undercounting
       pages outright (an orphan near-empty page), once letting real
       content run past its predicted spot straight into the footer's
       reserved space and overlap it.
     - A real @page margin + @page margin box avoids both of those (the
       browser reserves that space itself, guaranteed, no prediction
       involved) but a real @page margin is physically outside the content
       box, so no element's background can ever be painted into it, in any
       browser — every template that isn't literally white printed with a
       plain white band there.
   The table/tfoot approach has neither problem: the reserved space is both
   guaranteed *and* real in-flow content. The trade-off this time is a live
   per-page "Page X of Y" counter isn't possible — a repeating <tfoot> is
   one DOM node the browser repeats verbatim, so unlike a @page margin
   box's counter(page)/counter(pages) it can't show a different number on
   each page — the footer instead shows the invoice number and a
   best-effort total page count. */
@media print{
  html,body{background:#fff}
  .appheader,.toast{display:none!important}
  .sidebar,.sidebar-resizer,.canvasbar,.right-sidebar{display:none!important}
  .mobileview-toggle,.mobile-drawer,.drawer-overlay,.fullscreen-exit,.actions{display:none!important}
  .invoice-toolbar,.page-break-line,.page-break-chip{display:none!important}
  .toolbar-row{display:none!important}
  .app{display:block!important}
  /* !important on both: the mobile single-panel rules in responsive.css
     (#appRoot.view-edit .workspace{display:none}, and .app's own
     flex/grid display switching at narrower breakpoints) have no
     !important of their own, but nothing in this print block otherwise
     resets "display" for either — so without this, printing from a phone
     while its "Form" tab (rather than "Preview") is the active single
     panel would carry that display:none straight into the printed page
     and print a blank invoice. */
  .workspace{display:block!important;padding:0;overflow:visible}
  .canvaswrap{max-width:none;width:auto;height:auto!important}
  /* width intentionally NOT overridden to auto here — it inherits the base
     .invoice rule's width:var(--page-w), which is the actual physical page
     width in mm. "auto" resolves against the browser's internal print-layout
     viewport (which is not reliably the same as the physical page width),
     and was pushing the last table column off the printed page. */
  /* padding-top/padding-bottom:0 — rebuilt as real per-page table content
     instead (the print-pagewrap thead spacer + the tfoot's own extra
     bottom padding, both set inline by applyPrintTableWrap in preview.js);
     see the file comment above and templatePaddingMm() in state.js.
     padding-left/padding-right are left exactly as the base .invoice rule
     (invoice.css) already has them — unaffected, so unchanged. */
  .invoice{box-shadow:none;margin:0!important;max-width:none;min-height:0;overflow:visible;padding-top:0!important;padding-bottom:0!important;transform:none!important}
  .invtable{border-collapse:collapse}
  .invtable thead{display:table-header-group}
  .invtable tfoot{display:table-footer-group}
  .invtable tr,.invtable td,.invtable th{break-inside:avoid;page-break-inside:avoid}
  .inv-header,.billrow,.statusbalance,.balance,.bottomgrid,.notebox,.summary,.paymentgrid{break-inside:avoid;page-break-inside:avoid}
  /* The outer print-time wrapper table itself (see applyPrintTableWrap in
     preview.js) — plain, unstyled, and transparent, so .invoice's own
     background/padding/pseudo-elements (the per-template look) show
     through it exactly as if these were still .invoice's direct children. */
  .print-pagewrap{width:100%;border-collapse:collapse;background:transparent}
  .print-pagewrap thead{display:table-header-group}
  .print-pagewrap>thead>tr>td,.print-pagewrap>tbody>tr>td,.print-pagewrap>tfoot>tr>td{padding:0;border:0;background:transparent}
  /* The top spacer's own height (set inline, per-template) must survive
     the padding:0 reset just above — padding:0 doesn't touch height, so
     nothing extra is needed here, but break-inside:avoid keeps it from
     ever being split across a page boundary itself, which would shrink
     the top inset on whichever page it got cut on. */
  .print-pagewrap>thead>tr>td{break-inside:avoid;page-break-inside:avoid}
  /* The real footer is hidden for print — its content is cloned into the
     table's <tfoot> instead (see applyPrintTableWrap). Overriding position
     to static here matters: the base .footer rule (invoice.css) is
     position:absolute for the on-screen preview, which would pull the
     clone out of the tfoot's normal flow and defeat the whole point of it
     repeating there. */
  .footer-print-clone{position:static;left:auto;right:auto;bottom:auto;padding:8px 0 0;margin:0;border-top:1px solid #e4e7ec}
  /* Optional detail rows/fields (Reference, Invoice date, Due date, Notes,
     Terms, Payment details, Discount, Tax, Shipping) stay visible on screen
     with their placeholder text so the person can see what's available to
     fill in — but if nothing was actually entered, they're stripped out of
     the printed/PDF "final" invoice instead of printing an empty row.
     preview.js toggles this class purely on content emptiness, independent
     of the section on/off switches (those use .section-hidden above, which
     hides on screen too since that's a deliberate user choice). */
  .invoice .print-hide-empty{display:none!important}
  /* Canvas form-field chrome (v3.15+): every field is a real input/select
     on screen, with a dashed underline marking it as fillable and a logo
     upload toolbar next to the logo box — neither belongs on the actual
     printed/PDF document, which should read exactly like the old static
     invoice did. */
  .logotools{display:none!important}
  /* Belt-and-braces: hides every floating panel (Saved Invoices, Brand
     Templates, Import Items, Logo settings) outright at print time, in case
     one was left open — none of them should ever appear on the printed/PDF
     output. */
  #floatingLayer{display:none!important}
  .add-item-btn{display:none!important}
  .add-item-row{display:none!important}
  .item-actions-col{display:none!important}
  /* Belt-and-braces alongside the canvas-preview-mode switch printInvoice()
     (js/print.js) already forces before calling window.print() — that
     switch alone means none of this column-editing chrome is ever actually
     in the DOM at print time (renderPreview() falls back to the plain
     <span class="col-label-text"> header the instant isPreviewMode is
     true — see js/preview.js), but hiding it here too costs nothing and
     matches how every other piece of editing-only chrome above is handled. */
  .col-drag-handle,.col-menu-btn,.col-resize-handle,.col-actions-head,.col-drop-indicator{display:none!important}
  .table-toolbar{display:none!important}
  .invoice input:not([id^="label"])::placeholder,.invoice textarea::placeholder{color:transparent!important}
  .status{background-image:none!important;padding:5px 9px!important}
  /* Force background colors/fills to print consistently across Chrome, Edge,
     Firefox and Safari without relying on the browser's own "Background
     graphics" checkbox. */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact}
}