/*
 * XPIG mobile drawer stability layer.
 *
 * The open drawer owns the entire dynamic viewport. The document behind it
 * is position-locked by Dashboard.vue; only the navigation column scrolls.
 */
@media (max-width: 720px) {
  html.xpig-industrial-nav-open,
  body.xpig-industrial-nav-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  .theme-industrial .dashboard-sidebar {
    display: flex !important;
    flex-direction: column !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    min-height: 0 !important;
    box-sizing: border-box !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-sidebar-footer {
    margin-top: auto !important;
    padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
  }

  .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);
  }

  .theme-industrial .industrial-nav-collapse-handle,
  .theme-industrial .industrial-nav-open-handle {
    top: 50dvh !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .theme-industrial .industrial-nav-overlay.visible {
    inset: 0 !important;
    height: 100dvh !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }

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