/*
 * Desktop UI density
 *
 * Authenticated desktop documents are intentionally rendered at 75%. Login,
 * password-reset, and landing pages use the separate 90% public profile.
 * Floating Select2 dropdown coordinates are corrected by
 * select2-density-position.js so their lists remain attached to their fields.
 * Bootstrap dialogs inherit the active page density so their frame and content
 * resize together without forced dimensions.
 *
 * Keep --desktop-ui-viewport-factor equal to 1 / --desktop-ui-scale.
 * See docs/ui-density-and-select2-positioning.md before changing either value.
 */
:root {
    --desktop-ui-scale: 1;
    --desktop-ui-viewport-factor: 1;
}

html[data-ui-density="compact"] {
    --desktop-ui-scale: 0.75;
    --desktop-ui-viewport-factor: 1.3333333333;
}

html[data-ui-density="public"] {
    --desktop-ui-scale: 0.9;
    --desktop-ui-viewport-factor: 1.1111111111;
}

@media screen and (min-width: 993px) {
    html[data-ui-density] {
        zoom: var(--desktop-ui-scale);
    }

    html[data-ui-density] body,
    html[data-ui-density] .app-shell,
    html[data-ui-density] .app-sidebar,
    html[data-ui-density] .app-surface,
    html[data-ui-density] .auth-public .page-shell,
    html[data-ui-density] .hero {
        min-height: calc(100vh * var(--desktop-ui-viewport-factor));
    }

    html[data-ui-density] .app-shell {
        grid-template-rows: minmax(calc(100vh * var(--desktop-ui-viewport-factor)), auto);
    }

    html[data-ui-density] .application-alert-dropdown .dropdown-menu {
        max-height: min(680px, calc((100vh * var(--desktop-ui-viewport-factor)) - 5.5rem));
    }

    html[data-ui-density] .application-alert-panel__body {
        max-height: calc((100vh * var(--desktop-ui-viewport-factor)) - 12rem);
    }

    /*
     * Bootstrap uses 100vw/100vh for generated modal backdrops. Root zoom
     * scales those viewport units a second time, so use the same percentage
     * geometry as Bootstrap's full-screen .modal container.
     */
    html[data-ui-density] .modal-backdrop {
        width: 100%;
        height: 100%;
    }

    /*
     * Add/Edit Repair Step are workspaces rather than short dialogs. Give only
     * their shared dialog class almost the entire zoom-adjusted modal canvas.
     * Percentages follow the full-screen .modal containing block correctly;
     * viewport units would be reduced a second time by the root zoom.
     */
    html[data-ui-density="compact"] .modal .modal-dialog.repair-step-dialog {
        width: calc(100% - 2rem);
        max-width: none;
        height: auto;
        margin: 1rem auto;
    }

    html[data-ui-density="compact"] .modal .repair-step-dialog > .repair-step-modal-content {
        height: auto;
        max-height: calc((100vh * var(--desktop-ui-viewport-factor)) - 2rem);
        overflow-y: auto;
    }
}

/* Printed and generated documents retain their native geometry. */
@media print {
    html[data-ui-density] {
        zoom: 1 !important;
    }
}