/* Hide interactive controls when printing */
        @media print {

            /* common button types */
            button,
            input[type="button"],
            input[type="submit"],
            input[type="reset"],
            input[type="image"],
            a[role="button"],
            /* common utility classes used in this project */
            .btn,
            .button,
            .button-blue,
            .button-red,
            .button-purple,
            .button-orange,
            .btnSpendingGrowth,
            .btnViewYears,
            /* any id that begins with "btn" (e.g. btnProp2half, btnView10) */
            [id^="btn"] {
                display: none !important;
                visibility: hidden !important;
            }

            /* optional: hide any element you mark explicitly for no-print */
            .no-print {
                display: none !important;
                visibility: hidden !important;
            }
            /* optional: print any element you mark explicitly for print-only */
            .print-only {
                display: block !important;
                visibility: visible !important;
            }

            /* force a page break where this class is placed DONT USE THIS ONE*/
            .page-break {
                display: block;
                break-before: page;   /* modern */
                break-after: page;
                page-break-before: always; /* legacy */
                page-break-after: always;
            }

            /* force a page break BEFORE this element (no page-break-after) */
            .page-break-before {
                display: block;
                break-before: page;         /* modern */
                page-break-before: always;  /* legacy */
            }
            /* force a page break AFTER this element (no page-break-before) */
            .page-break-after {
                display: block;
                break-after: page;         /* modern */
                page-break-after: always;  /* legacy */
            }

            /* avoid breaking inside important containers */
            .no-break {
                break-inside: avoid;
                page-break-inside: avoid;
            }

            /* ensure the main spending container stacks vertically for print */
            #spendingDiv,
            #spendingDiv[style] { /* in case of inline-style id variants */
                display: flex !important;
                flex-direction: column !important;
                flex-wrap: nowrap !important;
                width: 100% !important;
                gap: 0 !important;
            }

            /* make left / right panels full width and remove fixed heights/transforms */
            #spendingLeftDiv,
            #spendingRightDiv {
                flex: none !important;
                width: 100% !important;
                min-height: auto !important;
                transform: none !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                background: transparent !important;
            }

            /* remove scaling on chart container so it prints at natural size */
            #chart-container,
            .container-svg,
            svg {
                transform: none !important;
                transform-origin: initial !important;
                max-width: 100% !important;
                height: auto !important;
            }

            /* hide interactive controls that don't make sense on paper */
            button,
            .chart-toggle-controls,
            .btnToggle,
            .btnSpendingGrowth,
            [id^="btn"] {
                display: none !important;
            }

            /* prevent splitting a panel across pages if desired */
            #spendingLeftDiv, #spendingRightDiv {
                break-inside: avoid !important;
                page-break-inside: avoid !important;
            }

            /* page setup */
            @page { size: auto; margin: 12mm; }

            /* scale the whole page to 90% when printing */
            body.print-scale {
                transform: scale(0.90);
                transform-origin: top left;
                /* ensure printed page uses transformed size */
                width: 111.111%; /* 1/0.9 to avoid clipping in some engines */
            }

            /* make sure SVGs and charts don't keep extra transforms that can overlap */
            svg, #chart-container, .container-svg {
                transform: none !important;
                max-width: 100% !important;
                height: auto !important;
                overflow: visible !important;
            }

            /* Remove all div background colors and styling for clean printing */
            div {
                background: transparent !important;
                background-color: transparent !important;
                background-image: none !important;
                box-shadow: none !important;
                border-radius: 0 !important;
            }

            /* Optional: Remove all background styling from common elements */
            div, section, article, aside, header, footer, main {
                background: transparent !important;
                background-color: transparent !important;
                background-image: none !important;
                background-attachment: initial !important;
                background-origin: initial !important;
                background-clip: initial !important;
                background-size: initial !important;
                box-shadow: none !important;
            }
            
            /* Class-based Approach (add to HTML elements you want to remove backgrounds from): */
            .no-print-background {
                background: transparent !important;
            }





            /* Ensure proper page margins */
            @page { 
                size: auto; 
                margin: 15mm 12mm 12mm 15mm; /* top right bottom left - add more left margin */
            }

            /* Fix section heading positioning */
            .sectionHeading,
            h2.sectionHeading {
                margin-left: 40px !important;
                padding-left: 15px !important;
                text-align: left !important;
                text-indent: 0 !important;
                position: relative !important;
                /*left: 0 !important; */
            }

            /* Ensure parent containers don't clip content */
            .sectionHeading-container,
            div:has(> .sectionHeading) {
                padding-left: 0 !important;
                margin-left: 40px !important;
                overflow: visible !important;
            }

            /* If using print-scale, adjust for better positioning */
            body.print-scale .sectionHeading {
                padding-left: 20px !important; /* slightly more to compensate for scale */
            }




        /* Add left margin to the container itself 
    #yourPropertyDiv {
        margin-left: 20px !important;
        padding-left: 0 !important;
        overflow: visible !important;
    }
        */

    /* Keep the heading clean with no extra padding 
    #yourPropertyDiv h2.sectionHeading {
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-indent: 0 !important;
        transform: none !important;
    }
            */

        }