@media print {

    /* ========================================= */
    /* 1. HIDE SIDEBAR & FIX PAGE MARGINS        */
    /* ========================================= */
    /* Hide the left sidebar completely */
    .sidebar {
        display: none !important;
    }

    /* Remove the left margins from body and content so the dashboard 
       uses the full width of the printed page (no blank space on the left) */
    body,
    .content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    /* ========================================= */
    /* 2. HIDE UI ELEMENTS                       */
    /* ========================================= */
    #print-button,
    #print-dummy,
    .navbar,
    #site-sort,
    .dash-tooltip {
        display: none !important;
    }

    /* Hide the date picker in the PDF (optional, but keeps it clean) */
    #date-picker-range {
        display: none !important;
    }

    .no-print {
        display: none !important;
    }

    /* ========================================= */
    /* 3. FORCE COLORS AND BACKGROUNDS           */
    /* ========================================= */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* ========================================= */
    /* 4. PAGE FORMATTING                        */
    /* ========================================= */
    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    /* ========================================= */
    /* 5. PROTECT THE TOP SUMMARY SECTION        */
    /* ========================================= */
    /* Prevent the top cards from splitting in half */
    #top-summary-section .card {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        overflow: visible !important;
    }

    /* Allow the top row to wrap naturally if it's too wide for the page, 
       but prevent the row itself from being sliced */
    #top-summary-section .row {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* ========================================= */
    /* 6. KILL FLEXBOX FOR THE BOTTOM SITE CARDS */
    /* ========================================= */
    /* The dynamic site cards at the bottom need to be forced into block 
       display so they stack vertically and don't split across pages. */
    .site-print-card,
    .site-print-card .card-body,
    .site-print-card .row {
        display: block !important;
        flex: none !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* ========================================= */
    /* 7. GENERAL CARD & CHART PROTECTION        */
    /* ========================================= */
    .chart-card,
    .table-responsive,
    .dbc-card {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        margin-bottom: 10px !important;
    }

        /* ========================================= */
        /* 8. FORCE TOP ROW TO MATCH BOTTOM CARD ROW */
        /* ========================================= */
        #top-summary-row {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            width: 100% !important;
        }
    
        /* 1. The big card takes 40% of the page width */
        #top-scanned-col {
            flex: 0 0 40% !important;
            max-width: 40% !important;
            display: block !important;
        }
    
        /* 2. The treemap takes 55% of the page width */
        #top-treemap-col {
            flex: 0 0 55% !important;
            max-width: 55% !important;
            display: block !important;
    
            /* CRITICAL: This acts as a physical wall. If Plotly tries to render 
                the SVG wider than 55%, this instantly clips it so it doesn't 
                spill off the edge of the PDF page. */
            overflow: hidden !important;
        }
    
        /* 3. Force Plotly's internal SVG elements to respect the 55% container */
        #top-treemap-col .chart-card,
        #top-treemap-col .js-plotly-plot,
        #top-treemap-col .plot-container,
        #top-treemap-col .main-svg {
            width: 100% !important;
            max-width: 100% !important;
            height: 200px !important;
            /* Keep the height fixed */
        }
    
        /* Ensure the inner card stretches to fill the 40% column */
        #top-scanned-col .card {
            width: 100% !important;
            max-width: 100% !important;
        }
    
    
        /* ========================================= */
        /* 9. FORCE EACH SITE TO START ON A NEW PAGE */
        /* ========================================= */
        /* The '+' selector ensures this ONLY applies to the 2nd site and onwards.
            This prevents the browser from generating a blank page before the 1st site. */
        .site-page-break+.site-page-break {
            page-break-before: always !important;
            break-before: page !important;
        }


}