/* Test */
:root {
    --page-short-edge: 210mm;
    --page-long-edge: 297mm;
    /* For Firefox this needs to be 290mm */

    --page-margin: 15mm;

    --page-width-portrait: var(--page-short-edge);
    --page-height-portrait: var(--page-long-edge);

    --page-usablewidth-portrait: calc(var(--page-short-edge) - (var(--page-margin) * 2));
    --page-usableheight-portrait: calc(var(--page-long-edge) - (var(--page-margin) * 2));

    --page-width-landscape: var(--page-long-edge);
    --page-height-landscape: var(--page-short-edge);

    --page-usablewidth-landscape: calc(var(--page-long-edge) - (var(--page-margin) * 2));
    --page-usableheight-landscape: calc(var(--page-short-edge) - (var(--page-margin) * 2));

    /* The fuck */
    --page-landscape-left: calc(var(--page-margin)*2*(-1.449));
    --page-landscape-top: calc(var(--page-margin)*2*(1.444));
}

@page {
    size: A4 portrait;
    margin: 15mm; /* var() doesn't work correctly here?!? */
}

@media print {
    html {
        padding: 0;
        margin: 0;
    }
    body {
        padding: 0;
        margin: 0;
    }
    /* Force-hide unnecessary stuff for proper layout */
    div.globalProgressBar, div.rootTopBar, div.rootBottomBar {
        display: none;
    }
    /* Force-disable flex boxes for proper layout */
    div#root, div.rootContentArea {
        display: block !important;
    }
    div.tableContainer, div.chartContainer, div.datagridContainer {
        display: block !important;
        padding: 0;
        margin: 0;
    }
    /* Fixed page size */
    div.printPortraitSinglePage {
        width: var(--page-usablewidth-portrait);
        height: var(--page-usableheight-portrait);
        overflow-x: visible;
        break-before: page;

        padding: 0;
        margin: 0;
    }
    /* Enforce page width*/
    div.printPortraitRunningPage {
        width: var(--page-usablewidth-portrait);
        overflow-x: visible;
        break-before: auto;

        padding: 0;
        margin: 0;
    }
    /* Fixed page size */
    div.printLandscapeSinglePage {
        width: var(--page-usablewidth-landscape) !important;
        height: var(--page-usableheight-landscape)  !important;
        overflow-x: visible;
        overflow-y: visible;
        break-before: avoid;
        break-after: page;
        transform: rotate(90deg);
        position: relative;

        left: var(--page-landscape-left) !important;
        top: var(--page-landscape-top) !important;

        padding: 0;
        margin: 0;
    }
    /* Enforce page size */
    div.printLandscapeRunningPage {
        width: var(--page-usablewidth-landscape) !important;
        overflow-x: visible;
        overflow-y: visible;
        break-before: page;
        transform: rotate(90deg);
        position: relative;

        left: var(--page-landscape-left) !important;
        top: var(--page-landscape-top) !important;

       padding: 0;
        margin: 0;
    }
    /* */
    div.printContain {
        break-inside: avoid;
    }
}