/* Applies only while a budget layout is open (body.budget-print).
   Other screens never set that class, so their print output stays as it is.
   The global @page stays landscape. This named page is portrait for budget prints only.
   Tailwind 2 does not generate the print: variant in this project. */
@page budget-sheet {
    size: portrait;
    margin: 10mm;
}

@media print {
    body.budget-print {
        page: budget-sheet;
        background: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.budget-print .h-screen {
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }

    body.budget-print main {
        overflow: visible !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    body.budget-print button,
    body.budget-print .daterangepicker,
    body.budget-print div.inline-flex.rounded-full.bg-gray-300 {
        display: none !important;
    }

    body.budget-print .apexcharts-toolbar,
    body.budget-print .apexcharts-tooltip,
    body.budget-print .apexcharts-xaxistooltip,
    body.budget-print .apexcharts-yaxistooltip {
        display: none !important;
    }

    body.budget-print .shadow,
    body.budget-print .shadow-sm,
    body.budget-print .shadow-md,
    body.budget-print .shadow-lg,
    body.budget-print .shadow-xl,
    body.budget-print .shadow-2xl {
        --tw-shadow: 0 0 #0000 !important;
        box-shadow: none !important;
    }

    body.budget-print .overflow-x-auto,
    body.budget-print .overflow-y-auto {
        overflow: visible !important;
    }

    /* Large cards may split. Only short cards, stat tiles, charts, tier rows, and table rows stay whole. */
    body.budget-print .rounded-2xl {
        break-inside: auto;
        page-break-inside: auto;
    }

    body.budget-print .print-keep,
    body.budget-print .py-5.bg-white,
    body.budget-print .apexcharts-canvas,
    body.budget-print canvas,
    body.budget-print tr,
    body.budget-print .grid.grid-cols-12,
    body.budget-print .grid > .py-2 {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.budget-print h1,
    body.budget-print h2,
    body.budget-print h3,
    body.budget-print .rounded-2xl > p,
    body.budget-print .rounded-2xl > .flex {
        break-after: avoid;
        page-break-after: avoid;
    }

    body.budget-print thead {
        display: table-header-group;
    }

    body.budget-print tfoot {
        display: table-footer-group;
    }

    body.budget-print table {
        width: 100%;
    }

    body.budget-print th,
    body.budget-print td {
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
    }

    body.budget-print .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.75rem !important;
    }

    body.budget-print .mt-6 {
        margin-top: 0.75rem !important;
    }

    body.budget-print .mt-4,
    body.budget-print .mt-5,
    body.budget-print .mt-10 {
        margin-top: 0.5rem !important;
    }

    body.budget-print .mb-5,
    body.budget-print .mb-4 {
        margin-bottom: 0.5rem !important;
    }

    body.budget-print .rounded-2xl > .p-4,
    body.budget-print .rounded-2xl > .p-6,
    body.budget-print .py-5.bg-white {
        padding: 0.5rem 0.75rem !important;
    }

    body.budget-print .apexcharts-canvas,
    body.budget-print .apexcharts-canvas svg,
    body.budget-print .apexcharts-svg,
    body.budget-print canvas {
        max-width: 100% !important;
        max-height: 240px !important;
    }

    body.budget-print .apexcharts-canvas,
    body.budget-print .apexcharts-canvas svg,
    body.budget-print .apexcharts-svg {
        width: 100% !important;
    }
}