/* =========================================================
   BPI OPS — TOUCH TABLET SCROLL FIX
   Prevent Android/managed-browser pull-to-refresh from
   triggering during normal vertical scrolling.

   Loaded AFTER app-shell.css so these rules win.
   ========================================================= */

/* Prevent scroll gestures from chaining into the browser UI. */
html,
body {
    overscroll-behavior-y: none;
}

/*
 * Touch-first tablets, plus hybrid Elo/Windows touchscreens that may
 * report an attached mouse as the primary pointer. Hybrid handling is
 * limited to 1400px so ordinary large desktop workstations stay desktop.
 */
@media (hover: none) and (pointer: coarse),
       (any-pointer: coarse) and (max-width: 1400px) {

    html,
    body {
        width: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;

        /*
         * Prevent the browser itself from receiving a downward
         * overscroll gesture and interpreting it as refresh.
         */
        overscroll-behavior-y: none !important;
        overscroll-behavior-x: none !important;

        /*
         * Permit normal finger-driven vertical movement while
         * preventing browser gesture takeover.
         */
        touch-action: pan-y !important;
    }

    /*
     * Keep the application shell contained inside the viewport.
     * The main-content element becomes the real scroll surface.
     */
    .layout {
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    /*
     * This is the only vertical scrolling surface.
     * "contain" prevents the gesture from escaping upward into
     * Android WebView / ManageEngine pull-to-refresh.
     */
    .main-content {
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        overscroll-behavior-x: none !important;
        touch-action: pan-y !important;

        /*
         * Gives the bottom navigation enough room without
         * covering the final page content.
         */
        padding-bottom: calc(
            72px + env(safe-area-inset-bottom)
        ) !important;
    }

    /*
     * Keep page content inside the main scroll surface.
     */
    .page-content {
        overflow: visible !important;
        min-height: auto !important;
        touch-action: pan-y !important;
    }

    /*
     * Sticky topbar remains inside .main-content rather than
     * creating another competing scroll layer.
     */
    .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 900 !important;
    }

    /*
     * Sidebar scroll remains independent when the drawer is open.
     */
    .sidebar {
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /*
     * Prevent controls and cards from accidentally initiating
     * browser-level drag gestures.
     */
    a,
    button,
    input,
    select,
    textarea,
    .panel,
    .metric-card,
    .premium-card {
        overscroll-behavior: contain;
    }

    /* =====================================================
       WIDE TOUCHSCREEN LAYOUT FIX
       Width alone must never put an Elo/Android touchscreen
       into the desktop hover-sidebar layout.
       ===================================================== */

    .layout {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        grid-template-columns: none !important;
    }

    .main-content,
    body.desktop-sidebar-pinned .main-content,
    body.desktop-sidebar-open .main-content {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }

    .desktop-sidebar-hover-zone,
    .desktop-sidebar-pin {
        display: none !important;
        pointer-events: none !important;
    }

    .mobile-nav-toggle,
    .mobile-nav-close {
        display: grid !important;
        place-items: center !important;
    }

    .topbar-left {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    .topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        min-height: 58px !important;
        height: auto !important;
        padding: 10px 12px !important;
    }

    .sidebar,
    body.desktop-sidebar-open .sidebar,
    body.desktop-sidebar-pinned .sidebar {
        position: fixed !important;
        z-index: 1100 !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: min(82vw, 310px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        transform: translateX(-100%) !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transition: transform 240ms cubic-bezier(.22, .8, .24, 1) !important;
    }

    body.mobile-nav-open .sidebar,
    body.mobile-nav-open.desktop-sidebar-open .sidebar,
    body.mobile-nav-open.desktop-sidebar-pinned .sidebar {
        transform: translateX(0) !important;
    }

    .mobile-sidebar-overlay {
        display: block !important;
        position: fixed !important;
        z-index: 1050 !important;
        inset: 0 !important;
        background: rgba(2, 6, 23, 0.65) !important;
        backdrop-filter: blur(2px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 240ms ease, visibility 0s linear 240ms !important;
    }

    body.mobile-nav-open .mobile-sidebar-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: opacity 240ms ease, visibility 0s linear 0s !important;
    }

    body.desktop-sidebar-open:not(.desktop-sidebar-pinned)::after,
    body.desktop-sidebar-pinned::after {
        display: none !important;
        content: none !important;
    }
}

/*
 * Landscape-specific reinforcement. Some Android managed
 * browsers report unusual viewport dimensions after rotation.
 */
@media (orientation: landscape) and (hover: none) and (pointer: coarse),
       (orientation: landscape) and (any-pointer: coarse) and (max-width: 1400px) {

    html,
    body {
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        overscroll-behavior-y: none !important;
    }

    .layout {
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    .main-content {
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
    }
}