/* Save to PDF — see wwwroot/js/Ecp/SaveToPdf.js and Shared/Print. Only active while body has
   .ecp-printing, i.e. between the Save to PDF click and the print dialog closing. */

/* Screen side: pin the printed area to the page's printable width while the dialog is open, so
   Chart.js charts are resized to the size they print at. */
body.ecp-printing .ecp-print-target {
    width: var(--ecp-print-width) !important;
    max-width: var(--ecp-print-width) !important;
}

/* Chrome evaluates width breakpoints against a narrower print width than the page it
   prints, so MudGrid falls back to its phone layout (tiles 2x2, charts stacked full width).
   Pin the desktop (md) columns so the PDF matches the screen. Pinned on screen as well as in
   print (outside @media print), so wider-screen (lg/xl) columns also give way to md while the
   dialog is open and charts are sized on screen in columns of the width they print at. */
body.ecp-printing .ecp-print-target .mud-grid-item-md-1 {
    flex-grow: 0 !important;
    max-width: calc(100% / 12 * 1) !important;
    flex-basis: calc(100% / 12 * 1) !important;
}

body.ecp-printing .ecp-print-target .mud-grid-item-md-2 {
    flex-grow: 0 !important;
    max-width: calc(100% / 12 * 2) !important;
    flex-basis: calc(100% / 12 * 2) !important;
}

body.ecp-printing .ecp-print-target .mud-grid-item-md-3 {
    flex-grow: 0 !important;
    max-width: calc(100% / 12 * 3) !important;
    flex-basis: calc(100% / 12 * 3) !important;
}

body.ecp-printing .ecp-print-target .mud-grid-item-md-4 {
    flex-grow: 0 !important;
    max-width: calc(100% / 12 * 4) !important;
    flex-basis: calc(100% / 12 * 4) !important;
}

body.ecp-printing .ecp-print-target .mud-grid-item-md-5 {
    flex-grow: 0 !important;
    max-width: calc(100% / 12 * 5) !important;
    flex-basis: calc(100% / 12 * 5) !important;
}

body.ecp-printing .ecp-print-target .mud-grid-item-md-6 {
    flex-grow: 0 !important;
    max-width: calc(100% / 12 * 6) !important;
    flex-basis: calc(100% / 12 * 6) !important;
}

body.ecp-printing .ecp-print-target .mud-grid-item-md-7 {
    flex-grow: 0 !important;
    max-width: calc(100% / 12 * 7) !important;
    flex-basis: calc(100% / 12 * 7) !important;
}

body.ecp-printing .ecp-print-target .mud-grid-item-md-8 {
    flex-grow: 0 !important;
    max-width: calc(100% / 12 * 8) !important;
    flex-basis: calc(100% / 12 * 8) !important;
}

body.ecp-printing .ecp-print-target .mud-grid-item-md-9 {
    flex-grow: 0 !important;
    max-width: calc(100% / 12 * 9) !important;
    flex-basis: calc(100% / 12 * 9) !important;
}

body.ecp-printing .ecp-print-target .mud-grid-item-md-10 {
    flex-grow: 0 !important;
    max-width: calc(100% / 12 * 10) !important;
    flex-basis: calc(100% / 12 * 10) !important;
}

body.ecp-printing .ecp-print-target .mud-grid-item-md-11 {
    flex-grow: 0 !important;
    max-width: calc(100% / 12 * 11) !important;
    flex-basis: calc(100% / 12 * 11) !important;
}

body.ecp-printing .ecp-print-target .mud-grid-item-md-12 {
    flex-grow: 0 !important;
    max-width: calc(100% / 12 * 12) !important;
    flex-basis: calc(100% / 12 * 12) !important;
}

/* Tabs print every panel (kept alive with KeepPanelsAlive, hidden inline when inactive). Shown on
   screen too while the dialog is open, so charts inside them are sized before capture. */
body.ecp-printing .ecp-print-target [role="tabpanel"] {
    display: block !important;
}

@media print {
    body.ecp-printing .ecp-print-hidden,
    body.ecp-printing .ecp-print-target .ecp-no-print,
    /* Interactive chrome that means nothing on paper: grid search/toolbars, pagers, the
       sort/column-menu icons in grid headers, buttons and tab bars. Dropdowns and switches are
       not hidden: they print as their label and value (below), since on dashboards they carry
       the period, the filters and settings such as the domain filter. */
    body.ecp-printing .ecp-print-target .mud-table-toolbar,
    body.ecp-printing .ecp-print-target .mud-table-pagination,
    body.ecp-printing .ecp-print-target .mud-table-foot .mud-toolbar,
    body.ecp-printing .ecp-print-target .column-options,
    body.ecp-printing .ecp-print-target .sort-direction-icon,
    body.ecp-printing .ecp-print-target .mud-button-root:not(.mud-chip),
    body.ecp-printing .ecp-print-target .mud-tabs-tabbar,
    body.ecp-printing .ecp-print-target .mud-switch-span,
    body.ecp-printing .ecp-print-target .mud-progress-circular,
    body.ecp-printing .mud-popover-provider,
    body.ecp-printing .mud-snackbar-location-bottom-right,
    body.ecp-printing .mud-snackbar-location-top-right {
        display: none !important;
    }

    /* Undo the layout the app shell puts around the page (app bar padding, drawer offset,
       scroll containers, fixed heights) so the area flows from the top of page one. */
    body.ecp-printing,
    body.ecp-printing .ecp-print-ancestor {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        position: static !important;
        transform: none !important;
        background: #fff !important;
    }

    /* The same for the MudBlazor shell by class, so the layout holds even if a Blazor re-render
       replaces the class attribute that carried .ecp-print-ancestor. */
    body.ecp-printing .mud-layout,
    body.ecp-printing .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    body.ecp-printing .mud-appbar,
    body.ecp-printing .mud-drawer,
    body.ecp-printing .mud-overlay {
        display: none !important;
    }

    body.ecp-printing .ecp-print-target {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        /* Keep the light theme on paper even when the user runs the app in dark mode. */
        --mud-palette-background: #fff;
        --mud-palette-surface: #fff;
        --mud-palette-text-primary: rgba(0, 0, 0, 0.87);
        --mud-palette-text-secondary: rgba(0, 0, 0, 0.6);
        --mud-palette-text-disabled: rgba(0, 0, 0, 0.38);
        --mud-palette-lines-default: rgba(0, 0, 0, 0.12);
        --mud-palette-table-lines: #e0e0e0;
        --mud-palette-table-striped: rgba(0, 0, 0, 0.02);
        --mud-palette-divider: #e0e0e0;
        background: #fff !important;
        color: rgba(0, 0, 0, 0.87) !important;
        /* Print status colours (tile borders, chips, bars) instead of dropping backgrounds. */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }


    body.ecp-printing .ecp-print-target .mud-container {
        max-width: none !important;
        padding: 0 !important;
    }

    /* Grids print all the rows they render (see EcpGrid.EnterPrintModeAsync): no fixed-height
       scroll box, no sticky header. */
    body.ecp-printing .ecp-print-target .mud-table-container {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Compact rows whatever the user's density setting: fewer pages for long device lists. */
    body.ecp-printing .ecp-print-target .mud-table-cell {
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
    }

    body.ecp-printing .ecp-print-target thead {
        display: table-header-group; /* repeat the header row on every page */
    }

    body.ecp-printing .ecp-print-target tr,
    body.ecp-printing .ecp-print-target .mud-paper:not(.mud-table),
    body.ecp-printing .ecp-print-target canvas {
        break-inside: avoid;
    }

    body.ecp-printing .ecp-print-target h1,
    body.ecp-printing .ecp-print-target h2,
    body.ecp-printing .ecp-print-target h3,
    body.ecp-printing .ecp-print-target h4,
    body.ecp-printing .ecp-print-target h5,
    body.ecp-printing .ecp-print-target h6 {
        break-after: avoid;
    }

    body.ecp-printing .ecp-print-target .mud-paper {
        box-shadow: none !important;
    }

    /* An empty input prints nothing rather than its placeholder, which would read as a value. */
    body.ecp-printing .ecp-print-target input::placeholder {
        color: transparent !important;
    }

    /* Safety net: never let a canvas overflow the page, and centre one that ended up narrower
       than its column so it stays under overlays centred on the column (the doughnut's %). */
    body.ecp-printing .ecp-print-target canvas {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Each tab panel on its own page under its tab's title (data-ecp-print-title, set by
       SaveToPdf.js from the tab header). */
    /* The tab container's elevation would draw lines down every page it spans. */
    body.ecp-printing .ecp-print-target .mud-tabs,
    body.ecp-printing .ecp-print-target .mud-tabs-panels {
        box-shadow: none !important;
        border: none !important;
    }

    body.ecp-printing .ecp-print-target [role="tabpanel"] + [role="tabpanel"] {
        break-before: page;
    }

    body.ecp-printing .ecp-print-target [role="tabpanel"][data-ecp-print-title]::before {
        content: attr(data-ecp-print-title);
        display: block;
        margin-bottom: 8px;
        font-size: 1.1rem;
        font-weight: 700;
    }

    /* Dropdowns and text inputs print as plain "label value" text: no arrow, clear button,
       underline or helper text. */
    body.ecp-printing .ecp-print-target .mud-input-adornment,
    body.ecp-printing .ecp-print-target .mud-input-clear-button,
    body.ecp-printing .ecp-print-target .mud-input-helper-text {
        display: none !important;
    }

    body.ecp-printing .ecp-print-target .mud-input-underline::before,
    body.ecp-printing .ecp-print-target .mud-input-underline::after {
        border: none !important;
    }

    /* Dropdown labels print in full: a narrow dropdown truncates its label with an ellipsis. */
    body.ecp-printing .ecp-print-target .mud-input-label {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Switches print as "label: On" / "label: Off" in place of the toggle (hidden above). A
       switch without a label prints nothing. */
    /* The label span repeats the switch classes, including the reversed placement, so it is a
       flex container that would lay the state out before the label text. */
    body.ecp-printing .ecp-print-target .mud-switch > .mud-typography {
        display: inline !important;
    }

    body.ecp-printing .ecp-print-target .mud-switch:has(.mud-switch-input:checked) > .mud-typography::after {
        content: ": On";
    }

    body.ecp-printing .ecp-print-target .mud-switch:not(:has(.mud-switch-input:checked)) > .mud-typography::after {
        content: ": Off";
    }

    /* Tables print whole: no scroll container, so no scrollbar is drawn on paper. */
    body.ecp-printing .ecp-print-target .mud-simple-table,
    body.ecp-printing .ecp-print-target .mud-simple-table .mud-table-container {
        overflow: visible !important;
    }

    /* "Generated by EcpPro …", rendered by PrintableArea only while printing. */
    body.ecp-printing .ecp-print-target .ecp-print-footer {
        margin-top: 16px;
        font-size: 0.75rem;
        color: var(--mud-palette-text-secondary);
        break-inside: avoid;
    }
}