/* Room for WMEnvironmentBar, the "this is not production" strip.

   The bar is fixed to the top of the viewport, so without this file it would lie over the first
   22px of every page. Everything here moves the page down by the bar's height instead, and every
   rule hangs off html:has(.wm-environment-bar): on production the component renders nothing, no
   selector below matches, and the page is laid out exactly as it was before this file existed.

   Two kinds of thing need moving. What is in normal flow follows the padding on body. What is
   pinned to the viewport (position: fixed or sticky at top 0, or sized to 100vh) does not, and is
   listed here by name. The rules are in one place, rather than next to each component, because
   they belong to the bar: a new full-screen layer has to be added here to clear the bar on the
   test site, and until it is, the only cost is 22px of that layer under the bar, on test only.

   !important appears only where the rule being corrected carries it as well. */

html:has(.wm-environment-bar) {
    --wm-env-bar-height: 22px;
}

@media screen {

    /* ---- Normal flow ---------------------------------------------------- */

    html:has(.wm-environment-bar) body {
        padding-top: var(--wm-env-bar-height);
    }

    /* The shells that fill the window: without this every page gains a scrollbar of exactly
       the bar's height, and the fixed-viewport list pages lose their pagination under the fold. */
    html:has(.wm-environment-bar) .main-content,
    html:has(.wm-environment-bar) .customer-shell {
        min-height: calc(100vh - var(--wm-env-bar-height));
    }

    html:has(.wm-environment-bar) .wm-fixed-page .main-content {
        height: calc(100vh - var(--wm-env-bar-height));
    }

    /* ---- Signed-in chrome ----------------------------------------------- */

    html:has(.wm-environment-bar) .sidebar {
        top: var(--wm-env-bar-height);
        height: calc(100vh - var(--wm-env-bar-height));
    }

    html:has(.wm-environment-bar) .mobile-toggle {
        top: calc(15px + var(--wm-env-bar-height));
    }

    /* The customer portal's header sticks to the window, not to a scroll container. */
    html:has(.wm-environment-bar) .customer-topbar {
        top: var(--wm-env-bar-height);
    }

    html:has(.wm-environment-bar) .toast-wrapper {
        top: calc(24px + var(--wm-env-bar-height));
    }

    /* ---- Modals and the sliders built on them --------------------------- */

    html:has(.wm-environment-bar) .modal {
        top: var(--wm-env-bar-height);
        height: calc(100% - var(--wm-env-bar-height));
    }

    /* Every right-hand slider is a position: fixed .modal-dialog at top 0, height 100%. Fixed
       means the viewport, not the .modal above, so each needs the offset itself. */
    html:has(.wm-environment-bar) body .modal.right .modal-dialog,
    html:has(.wm-environment-bar) body .modal.ID-popup .modal-dialog {
        top: var(--wm-env-bar-height) !important;
        height: calc(100% - var(--wm-env-bar-height)) !important;
    }

    /* Several sliders size their content to 100vh (routes, complaints, salting jobs). Under
       the bar that is the bar's height too tall for the dialog, so the foot of the scroll area
       and the footer's buttons were cut off at the bottom of the window. */
    html:has(.wm-environment-bar) body .modal.right .modal-dialog > .modal-content,
    html:has(.wm-environment-bar) body .modal.ID-popup .modal-dialog > .modal-content {
        max-height: calc(100vh - var(--wm-env-bar-height));
    }

    /* ---- Full-screen layers: maps, editors, drawers ---------------------- */

    html:has(.wm-environment-bar) .fc-layout.fc-fullscreen,
    html:has(.wm-environment-bar) .dim-shell,
    html:has(.wm-environment-bar) .dir-shell,
    html:has(.wm-environment-bar) .lde-message,
    html:has(.wm-environment-bar) .image-viewer,
    html:has(.wm-environment-bar) .export-panel {
        top: var(--wm-env-bar-height);
    }

    html:has(.wm-environment-bar) .export-panel {
        height: calc(100% - var(--wm-env-bar-height));
    }

    html:has(.wm-environment-bar) .reconciliation-modal,
    html:has(.wm-environment-bar) .portal-drawer {
        top: var(--wm-env-bar-height);
        height: calc(100vh - var(--wm-env-bar-height));
    }

    html:has(.wm-environment-bar) .dispatch-history-drawer,
    html:has(.wm-environment-bar) .location-side-drawer {
        top: var(--wm-env-bar-height);
        height: calc(100dvh - var(--wm-env-bar-height));
    }
}