/*
 * XPIG mobile drawer stability layer.
 *
 * Keep the drawer chrome outside the scrolling compositor. This prevents
 * iOS visualViewport scroll events from moving the collapse handle and
 * avoids Chromium temporarily dropping the lower navigation tiles during
 * a fast inertial scroll.
 */
@media (max-width: 720px) {
  body.xpig-industrial-nav-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .theme-industrial .dashboard-sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100svh !important;
    max-height: 100svh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .theme-industrial .dashboard-sidebar.industrial-nav-open {
    transform: none !important;
    -webkit-transform: none !important;
  }

  .theme-industrial .dashboard-brand,
  .theme-industrial .industrial-sidebar-footer {
    position: relative;
    z-index: 2;
    flex: 0 0 auto !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .theme-industrial .industrial-nav {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    contain: layout style;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /*
   * The current production component writes a visualViewport-derived inline
   * top value on every scroll. A stable small-viewport anchor deliberately
   * overrides it so the handle cannot travel with the menu on iOS.
   */
  .theme-industrial .industrial-nav-collapse-handle,
  .theme-industrial .industrial-nav-open-handle {
    top: 50vh !important;
    top: 50svh !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .theme-industrial .industrial-nav-close {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
  }
}