/* === PRINT: center chart & print table; remove left menu space === */
@media print {
    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    html, body {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 1) Remove sidebar & header from layout */
    #sideMenuContainer {
        display: none !important;
    }

    #mainContentContainer {
        margin-left: 0 !important;
        width: 100% !important;
    }

        #mainContentContainer > .bg-white {
            display: none !important;
        }
        /* top navbar */

        /* 2) Let the scroll container expand so nothing is clipped */
        #mainContentContainer .overflow-auto {
            overflow: visible !important;
        }

    /* 3) Ensure the printable area shows normally (no absolute/visibility hacks) */
    .print-area {
        display: block !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center; /* centers headings */
    }

        /* 4) Neutralize Bootstrap spacing inside print area */
        .print-area .container,
        .print-area .container-fluid {
            max-width: 90% !important;
            width: auto !important;
            margin-left: auto !important;
            margin-right: auto !important;
            padding: 0 !important;
        }

        .print-area .row {
            margin: 0 !important;
            --bs-gutter-x: 0 !important;
            --bs-gutter-y: 0 !important;
        }

        .print-area .col {
            padding: 0 !important;
        }

    /* 5) Chart centering */
    #beadChart {
        display: block !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

        #beadChart .plotly-graph-div {
            margin: 0 auto !important;
            width: 80% !important; /* tweak 70–90% to taste */
            max-width: 100% !important;
            float: none !important;
            page-break-inside: avoid;
        }

    /* 6) Use the print table, not the interactive one */
    #table {
        display: none !important;
    }

    #table_print {
        display: block !important; /* overrides .hidden */
        visibility: visible !important;
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center;
    }

        #table_print table {
            width: auto !important; /* or set 80% to match chart width */
            margin-left: auto !important;
            margin-right: auto !important;
            border-collapse: collapse !important;
            page-break-inside: avoid;
        }

    /* 7) Hide UI chrome in print */
    .print-hide, .btn, .fab, .floating {
        display: none !important;
    }

    /* 8) Images behave */
    img, svg, canvas {
        max-width: 100% !important;
        height: auto !important;
    }
}