/*
 * XOVENT — printed reports.
 * ---------------------------------------------------------------------
 * Turns any report screen into a document that can be filed, signed or sent
 * to an accountant: a letterhead identifying the business, the report title,
 * the filters that produced it, and a footer on every page.
 *
 * Everything here lives inside @media print, so nothing affects the screen.
 * The letterhead markup is injected by public/js/xv-reports.js and is hidden
 * on screen by the rule at the bottom of this file.
 */

@media print {

    /* ---- page setup ---- */
    @page {
        size: A4;
        margin: 14mm 10mm 16mm 10mm;
    }

    html, body {
        background: #fff !important;
        color: #000 !important;
        font-size: 10pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ---- strip the application chrome ---- */
    .side-bar, .main-header, .navbar, .sidebar, .main-sidebar,
    .left-side, .control-sidebar, .overlay,
    .no-print, .dataTables_length, .dataTables_filter,
    .dataTables_paginate, .dataTables_info, .dt-buttons,
    .dropdown-menu, .modal, .modal-backdrop, .breadcrumb,
    footer, .xv-adv-toggle, .btn, button,
    #xv-pwa-banner, .toast, #toast-container {
        display: none !important;
    }

    /* Layout containers only. The [class*="col-"] match is deliberately
       broad for Bootstrap grids, which means it also caught the invoice's
       own `col-center` / `col-right` table cells and forced them to
       width:100% - that is what blew the "#" column out to most of the
       page and squashed DESCRIPTION/QTY/PRICE against the right edge. */
    .content-wrapper:not(#receipt_section *), .content:not(#receipt_section *),
    .container:not(#receipt_section *), .container-fluid:not(#receipt_section *),
    .row:not(#receipt_section *), [class*="col-"]:not(#receipt_section *) {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        float: none !important;
        left: 0 !important;
    }

    .box, .panel, .card, .tw-shadow-sm, .tw-ring-1 {
        border: 0 !important;
        box-shadow: none !important;
        page-break-inside: auto;
    }

    /* ---- letterhead ---- */
    #xv-print-head {
        display: block !important;
        text-align: center;
        border-bottom: 1.5pt solid #000;
        padding-bottom: 6pt;
        margin-bottom: 10pt;
    }

    #xv-print-head .xv-ph-company {
        font-size: 15pt;
        font-weight: 700;
        letter-spacing: .02em;
        margin-bottom: 2pt;
    }

    #xv-print-head .xv-ph-line {
        font-size: 8.5pt;
        color: #333;
        margin-bottom: 1pt;
    }

    #xv-print-head .xv-ph-title {
        font-size: 12pt;
        font-weight: 700;
        margin-top: 7pt;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    #xv-print-head .xv-ph-meta {
        font-size: 8pt;
        color: #444;
        margin-top: 3pt;
    }

    /* ---- footer on every page ---- */
    #xv-print-foot {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 7.5pt;
        color: #666;
        border-top: .5pt solid #bbb;
        padding-top: 3pt;
    }

    /* ---- tables ----
       IMPORTANT: every rule below is scoped away from #receipt_section.
       Invoices and receipts are printed by injecting the receipt template
       into #receipt_section and calling window.print() on THIS page, so
       without the :not() guards these report rules landed on the invoice
       too - `width:100%` destroyed its 5%/10%/45% column widths (the "#"
       column ballooned and the rest collapsed to the right) and the cell
       border/padding/font-size overrides drew a grid over the whole thing.
       The receipt template brings its own layout; leave it alone. */
    table:not(#receipt_section table) {
        width: 100% !important;
        border-collapse: collapse !important;
        page-break-inside: auto;
    }

    /* Repeat the column headings at the top of every printed page. */
    thead:not(#receipt_section thead) { display: table-header-group; }
    tfoot:not(#receipt_section tfoot) { display: table-footer-group; }

    tr:not(#receipt_section *),
    td:not(#receipt_section *),
    th:not(#receipt_section *) {
        page-break-inside: avoid;
    }

    th:not(#receipt_section *), td:not(#receipt_section *) {
        border: .5pt solid #999 !important;
        padding: 3pt 4pt !important;
        font-size: 8.5pt !important;
        color: #000 !important;
        background: transparent !important;
    }

    thead th:not(#receipt_section *) {
        background: #eee !important;
        font-weight: 700;
    }

    tfoot td:not(#receipt_section *), tfoot th:not(#receipt_section *) {
        font-weight: 700;
        border-top: 1pt solid #000 !important;
    }

    /* Money reads better right-aligned on paper. */
    td.text-right:not(#receipt_section *), th.text-right:not(#receipt_section *),
    td[class*="tw-text-right"]:not(#receipt_section *),
    th[class*="tw-text-right"]:not(#receipt_section *) {
        text-align: right !important;
    }

    /* A receipt owns the page: the report letterhead and footer live in the
       DOM permanently, so without this they printed ON TOP of the invoice,
       giving every invoice two headers.

       NOTE: the gate is `#receipt_section > *`, NOT `:not(:empty)`.
       The section is rendered as `<section id="receipt_section">\n</section>`,
       so it always holds a whitespace text node and is never CSS-`:empty` -
       using :empty hid the report letterhead on every page instead. */
    body:has(#receipt_section > *) #xv-print-head,
    body:has(#receipt_section > *) #xv-print-foot {
        display: none !important;
    }

    /* Wide tables must not be clipped at the page edge. */
    .table-responsive,
    .dataTables_wrapper,
    .dataTables_scroll,
    .dataTables_scrollBody {
        overflow: visible !important;
        width: auto !important;
        height: auto !important;
    }

    a[href]::after { content: none !important; }   /* no URL noise */
}

/* The letterhead exists in the DOM at all times so printing needs no
   round trip; it is only ever visible on paper. */
#xv-print-head,
#xv-print-foot {
    display: none;
}