/* Shared mobile application menu.
 *
 * status-mobile-menu.js portals #navbarCollapse directly below body so the
 * panel cannot be clipped by page, table, modal or map stacking contexts.
 * These layout rules complement Hyper on both standard pages and the custom
 * map surfaces.
 */
@media (max-width: 991.98px) {
  html body.status-menu-open {
    --status-mobile-menu-bottom-space: calc(var(--status-safe-bottom, 0px) + .65rem);
  }

  html body.status-menu-open.status-has-mobile-nav {
    --status-mobile-menu-bottom-space: calc(var(--status-mobile-nav-actual-height, var(--status-map-nav-height, 54px)) + .65rem);
  }

  html body.status-menu-open.status-has-mobile-nav .status-mobile-nav,
  html body.status-menu-open.status-has-mobile-nav.page-map.status-map-ui-v40 .status-mobile-nav {
    display: grid !important;
    z-index: 20180 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  html body.status-menu-open .status-navbar {
    z-index: 20160 !important;
  }

  html body.status-menu-open .status-mobile-menu-backdrop {
    position: fixed;
    z-index: 20130;
    top: var(--status-navbar-actual-height, var(--status-navbar-height, 56px));
    right: 0;
    bottom: var(--status-safe-bottom, 0px);
    left: 0;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    cursor: default;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html body.status-menu-open.status-has-mobile-nav .status-mobile-menu-backdrop {
    bottom: var(--status-mobile-nav-actual-height, var(--status-map-nav-height, 54px));
  }

  html body .status-mobile-menu-backdrop[hidden] {
    display: none !important;
  }

  html body.status-menu-open > .status-mobile-menu-panel.show,
  html body.status-menu-open > .status-mobile-menu-panel.collapsing {
    position: fixed !important;
    z-index: 20170 !important;
    top: var(--status-navbar-actual-height, var(--status-navbar-height, 56px)) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: auto !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: calc(var(--status-viewport-height, 100dvh) - var(--status-navbar-actual-height, var(--status-navbar-height, 56px)) - var(--status-mobile-menu-bottom-space, .65rem)) !important;
    margin: 0 !important;
    padding: .5rem .75rem calc(.75rem + var(--status-safe-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 0 !important;
    background: var(--ct-dark, #313a46) !important;
    box-shadow: var(--ct-box-shadow-lg, 0 .5rem 1rem rgba(0, 0, 0, .2)) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto !important;
  }

  html body.status-menu-open > .status-mobile-menu-panel .navbar-nav .nav-link {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: .55rem;
    padding: .65rem .75rem;
    color: rgba(255, 255, 255, .62) !important;
  }

  html body.status-menu-open > .status-mobile-menu-panel .navbar-nav .nav-item.show > .nav-link,
  html body.status-menu-open > .status-mobile-menu-panel .navbar-nav .nav-link.show {
    color: rgba(255, 255, 255, .86) !important;
    border-radius: var(--ct-border-radius, .25rem);
    background: rgba(255, 255, 255, .12) !important;
  }

  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu {
    position: static !important;
    inset: auto !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(28rem, calc(var(--status-viewport-height, 100dvh) - var(--status-navbar-actual-height, var(--status-navbar-height, 56px)) - var(--status-mobile-menu-bottom-space, .65rem) - 4.35rem));
    margin: .25rem 0 0 !important;
    padding: .5rem 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    transform: none !important;
    border: 0 !important;
    border-radius: var(--ct-border-radius, .25rem) !important;
    color: var(--ct-body-color, #212529) !important;
    background: var(--ct-dropdown-bg, var(--ct-card-bg, #fff)) !important;
    box-shadow: none !important;
    scrollbar-color: var(--ct-secondary-color, #6c757d) transparent;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu .dropdown-header {
    color: var(--ct-secondary-color, #6c757d) !important;
  }

  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu .dropdown-divider {
    border-top-color: var(--status-shell-border, #e9ecef) !important;
  }

  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu .dropdown-item {
    display: flex;
    min-height: 2.65rem;
    align-items: center;
    gap: .55rem;
    padding: .25rem 1.5rem;
    color: var(--ct-body-color, #212529) !important;
    background: transparent !important;
    white-space: normal;
  }

  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu .dropdown-item:hover,
  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu .dropdown-item:focus-visible {
    color: var(--ct-body-color, #16181b) !important;
    background: var(--ct-tertiary-bg, var(--ct-secondary-bg, #f8f9fa)) !important;
  }

  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu .dropdown-item.active,
  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu .dropdown-item:active {
    color: var(--ct-white, #fff) !important;
    background: var(--ct-primary, #727cf5) !important;
  }

  html body.page-map.status-map-ui-v40.status-menu-open.status-compact-landscape > .status-mobile-menu-panel.show,
  html body.page-map.status-map-ui-v40.status-menu-open.status-compact-landscape > .status-mobile-menu-panel.collapsing {
    top: calc(max(6px, var(--status-safe-top, 0px)) + var(--status-map-control-size, 40px) + var(--status-map-control-gap, 6px)) !important;
  }

  html body.page-map.status-map-ui-v40.status-menu-open.status-compact-landscape .status-mobile-menu-backdrop {
    top: calc(max(6px, var(--status-safe-top, 0px)) + var(--status-map-control-size, 40px) + var(--status-map-control-gap, 6px));
  }
}