/* ============================================================
   PRINTABLE DOCUMENT SYSTEM — true A4 pages
   ------------------------------------------------------------
   The old preview was a single fluid <div> whose width depended on the
   browser window. html2pdf rendered it to one tall canvas and sliced that
   canvas at fixed offsets, which is why page breaks landed mid-row and a
   blank trailing page kept appearing — and why the PDF never matched what
   was on screen.

   Here every page is a real 210x297mm box in the DOM. What you see in the
   preview is literally the page: printing it and exporting it produce the
   same geometry because they share it.
   ============================================================ */

:root {
    --page-width: 210mm;
    --page-height: 297mm;
    --page-pad-x: 12mm;
    --page-pad-top: 12mm;
    --page-pad-bottom: 16mm;   /* leaves room for the footer strip */
    --page-footer-h: 10mm;
}

/* ── Preview shell ── */
.doc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin: 0 auto;
}

/* ── One physical page ── */
.doc-page {
    position: relative;
    width: var(--page-width);
    height: var(--page-height);
    padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
    background: #ffffff;
    color: #1a1a1a;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    box-sizing: border-box;
    overflow: hidden;
    flex: 0 0 auto;

    /* Screen-only affordance; removed for print and PDF capture. */
    border-radius: 2px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.doc-page * { color: inherit; }

/* A block too tall for one page would otherwise be clipped and the data
   silently lost. Let that page grow instead — rare, and visible. */
.doc-page.is-overflowing {
    height: auto;
    min-height: var(--page-height);
}

/* ── Content area — fixed height is what makes overflow detectable ── */
.doc-page-body {
    height: 100%;
    overflow: hidden;
}

.doc-page.is-overflowing .doc-page-body {
    height: auto;
    overflow: visible;
}

/* ── Continuation header (pages 2+) ── */
.doc-page-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid #ddd;
    font-size: 10px;
    color: #666;
}

.doc-page-header strong { color: #1a1a1a; font-weight: 700; }

/* ── Footer ── */
.doc-page-footer {
    position: absolute;
    left: var(--page-pad-x);
    right: var(--page-pad-x);
    bottom: 6mm;
    height: var(--page-footer-h);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 4px;
    font-size: 8px;
    color: #999;
}

.doc-page-footer .doc-footer-note { flex: 1; }
.doc-page-footer .doc-page-number { white-space: nowrap; }

/* ── Off-screen measuring page ── */
.doc-page.is-measuring {
    position: absolute;
    left: -10000px;
    top: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
}

/* ── Continued tables ──
   Only the final table in a split run gets the heavy closing rule, so a
   table continued onto the next page doesn't look like it ended. */
.doc-page .inv-items-table tbody tr:last-child td { border-bottom: 1px solid #eee; }
.doc-page .inv-items-table.is-final tbody tr:last-child td { border-bottom: 2px solid #1a1a1a; }

.doc-continued-label {
    font-size: 9px;
    color: #999;
    font-style: italic;
    margin-bottom: 6px;
}

/* ── Preview toolbar (never printed) ── */
.doc-toolbar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.doc-page-count {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ============================================================
   PRINT
   ------------------------------------------------------------
   margin:0 on @page plus a page box that is exactly A4 means the
   browser's own PDF export is pixel-for-pixel the preview — vector text,
   selectable, and a fraction of the size of a rasterised capture.
   ============================================================ */
@page {
    size: A4 portrait;
    margin: 0;
}

@media print {
    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Everything that isn't the document itself */
    #sidebar,
    #toast-container,
    #modal-overlay,
    .mobile-menu-btn,
    .doc-toolbar,
    .invoice-preview-actions,
    .no-print {
        display: none !important;
    }

    #main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    #app-shell { display: block !important; }

    .doc {
        display: block;
        gap: 0;
        margin: 0;
    }

    .doc-page {
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        break-after: page;
        page-break-after: always;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .doc-page:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    /* Keep the dark app chrome from bleeding into a printed page. */
    .content-view { animation: none !important; }
}