/* ======================================================================
   PRINTING
   ======================================================================

   The client's complaint: "some areas document print with the web content
   also - no need like this, need document only print."

   The A4 documents - invoice, estimate, delivery note - were already fine.
   They are printed through an iframe that carries only the document. But
   every OTHER printable screen, and every use of the browser's own
   Ctrl+P anywhere in the application, printed the page as it appears: the
   sidebar down the left, the dark top bar, the filter boxes, the buttons,
   the pagination, the row of icons on every line. Nothing in any of the
   four portals had a single @media print rule.

   This is that rule, shared by all of them.

     - the furniture goes: sidebars, top bars, filter forms, buttons,
       pagination, modals, toasts, the dark-mode switch
     - what is left goes full width, black on white
     - a page marked .dt-print-area prints ALONE, whatever is around it
     - .dt-print-only shows what is wanted on paper and nowhere else

   Screen rendering is untouched: everything here is inside @media print.
   ================================================================== */

@media print {

    /* ---------------------------------------------- page furniture ---- */
    .sidebar-wrapper, .app-sidebar, .sidebar-backdrop, .vp-nav, .vp-bot, .vp-toggle,
    .sp-nav, .sp-top, .app-topbar, .vp-top, nav.navbar, .navbar,
    .glass-header, .topbar-title, .page-head-bar,
    .offcanvas, .offcanvas-backdrop, .modal, .modal-backdrop,
    #toast-container, .toast-container, .dt-dp-bar,
    .d-print-none, [data-bs-toggle="dropdown"], .dropdown-menu,
    .pagination, .page-link, .sp-pager, .sp-filters,
    .btn, button, input[type="submit"], .form-check, .theme-toggle,
    .dt-dp-adds, .dt-cu-box, .dt-dp-hint {
        display: none !important;
    }

    /* A filter bar is a control, not information. Its VALUES matter on a
       printed report, which is why every report prints its own line of
       "Showing ... between ... and ..." above the table. */
    form.row.g-2, form.sp-filters, .filters-card, .dt-filter-bar { display: none !important; }

    /* ---------------------------------------------- what is left ------ */
    html, body {
        background: #fff !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        font-size: 11.5pt;
    }
    .main-content-scroll, .app-content, .app-main, .app-shell,
    .vp-wrap, .sp-wrap, .container, .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
        position: static !important;
    }

    /* Bootstrap's md- and lg- widths come from media queries that a printer
       does not satisfy, so a row of three summary tiles printed as three
       full-width blocks down a page and a half. Their widths are restated
       here so a report keeps its shape on paper. */
    /* Bootstrap's gutter is a custom property that adds horizontal padding to
       every column. Left in place, three 33.3% columns come to more than 100%
       and the third wraps onto a line of its own - which is what a printed
       report full of half-empty rows looks like. */
    .row {
        display: flex !important; flex-wrap: wrap !important; margin: 0 !important;
        --bs-gutter-x: 0 !important; --bs-gutter-y: 0 !important;
    }
    [class*="col-"] { padding: 0 3pt 6pt !important; box-sizing: border-box !important; }
    .col-md-2, .col-lg-2 { flex: 0 0 16.666% !important; max-width: 16.666% !important; }
    .col-md-3, .col-lg-3 { flex: 0 0 25% !important;     max-width: 25% !important; }
    .col-md-4, .col-lg-4 { flex: 0 0 33.333% !important; max-width: 33.333% !important; }
    .col-md-6, .col-6    { flex: 0 0 50% !important;     max-width: 50% !important; }
    .col-md-8, .col-lg-8 { flex: 0 0 66.666% !important; max-width: 66.666% !important; }
    .col-md-9, .col-lg-9 { flex: 0 0 75% !important;     max-width: 75% !important; }
    .col-12              { flex: 0 0 100% !important;    max-width: 100% !important; }

    /* Restated AFTER the column widths above. The admin panel's main area is
       itself a column - col-md-9 col-lg-10 - so the rule that keeps three
       summary tiles side by side was also squeezing the whole page into three
       quarters of the sheet, with a quarter of white paper down the side
       where the sidebar used to be. */
    .main-content-scroll, .app-content, .app-main, .app-shell, .vp-wrap, .sp-wrap {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Cards become plain blocks. A drop shadow costs toner and says nothing. */
    .card, .sp-card, .shadow, .shadow-sm, .shadow-lg {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    /* Screen padding is generous because a screen scrolls. Paper does not. */
    .card.p-4, .card.p-3, .p-5 { padding: 8pt !important; }
    .mb-4, .mb-3 { margin-bottom: 8pt !important; }
    h3 { font-size: 15pt !important; }
    h5, h6 { font-size: 10.5pt !important; }

    /* A table that scrolls sideways on screen must not be cut off on paper. */
    .table-responsive { overflow: visible !important; }
    table { width: 100% !important; border-collapse: collapse !important; page-break-inside: auto; }
    tr    { page-break-inside: avoid; page-break-after: auto; }
    thead { display: table-header-group; }   /* headings repeat on every sheet */
    tfoot { display: table-footer-group; }
    th, td {
        border: 1px solid #999 !important;
        padding: 4pt 6pt !important;
        color: #000 !important;
        background: #fff !important;
    }
    thead th { background: #eee !important; font-weight: 700; }

    /* Bootstrap's colour helpers, made legible in one ink. The greens and
       reds that carry meaning are kept; the decorative ones are not. */
    .text-muted, .text-body-secondary { color: #444 !important; }
    .text-success { color: #14532d !important; }
    .text-danger  { color: #7f1d1d !important; }
    .badge {
        border: 1px solid #666 !important; background: #fff !important;
        color: #000 !important; font-weight: 700;
    }
    .bg-light, .table-light, .table-light th, .table-light td {
        background: #f4f4f4 !important; color: #000 !important;
    }
    .table-dark, .table-dark th, .table-dark td {
        background: #eee !important; color: #000 !important; border-color: #999 !important;
    }

    a, a:visited { color: #000 !important; text-decoration: none !important; }
    /* The address behind a link is useless on paper and doubles the width
       of every table cell that holds one. */
    a[href]:after { content: "" !important; }

    /* ---------------------------------------------- print only -------- */
    .dt-print-only { display: block !important; }

    /* ---------------------------------------------- one region -------- */
    /* Where a screen names the part of itself worth printing, that part
       prints and the rest does not - whatever the surrounding layout is.
       visibility rather than display, so an element deep inside a hidden
       ancestor can still be brought back. */
    body.dt-printing-area * { visibility: hidden !important; }
    body.dt-printing-area .dt-print-area,
    body.dt-printing-area .dt-print-area * { visibility: visible !important; }
    body.dt-printing-area .dt-print-area {
        position: absolute !important;
        left: 0; top: 0; width: 100% !important;
    }

    @page { size: A4; margin: 12mm; }
}

/* Kept off the screen, shown on paper. A printed report has to say what it
   is and when it was taken; on screen the page title already does. */
.dt-print-only { display: none; }