/*
 * LIVE-ACCESS-04M Android/mobile vertical-scroll remediation.
 * Scope: <=760px only. Desktop/tablet layout above 760px is untouched.
 *
 * Root cause:
 * - management/access overlays are fixed to the viewport;
 * - mobile media queries convert their internal layout to normal block flow;
 * - the fixed viewport parent then clips the resulting long document.
 *
 * Fix:
 * - on phone width, return overlays to document flow;
 * - remove viewport-height locks from their main/sidebar regions;
 * - allow the browser/PWA document to own vertical scrolling.
 */
@media (max-width: 760px) {
  html,
  body {
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #farms-management-overlay {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 100dvh;
    height: auto !important;
    overflow: visible !important;
  }

  #farms-management-overlay .mgt-sidebar {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #farms-management-overlay .mgt-main {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #farms-access-overlay {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 100dvh;
    height: auto !important;
    overflow: visible !important;
  }

  #farms-access-overlay .access-sidebar {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #farms-access-overlay .access-main {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}