@media print {
    @page {
        /* supported by most browsers; headers/footers still controlled by browser UI */
        margin: 12mm;
        size: A4; /* or remove if you want browser default */
    }

    /* Optional: hide anything marked no-print */
    .no-print {
        display: none !important;
    }

    /* Explicit page breaks */
    .page-break-before {
        break-before: page;
        page-break-before: always;
    }

    .page-break-after {
        break-after: page;
        page-break-after: always;
    }

    /* Avoid ugly splits */
    table {
        page-break-inside: auto;
    }

    tr, img, .avoid-break {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* If you use bootstrap flex/grid heavily, print can break pagination.
     Consider forcing block layout for the print root: */
    .print, .print * {
        /* keep it simple for print */
    }
}

/* Screen preview can still look decent */
@media screen {
    body.print {
        background: #fff;
    }
}


@media print {
    @page {
        margin: 20mm 15mm 25mm 15mm; /* top right bottom left */
    }

    header.print-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 20mm;
    }

    footer.print-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 20mm;
    }

    main.print-content {
        margin-top: 22mm;
        margin-bottom: 22mm;
    }
}