/**
 * Mobile Scroll Fixes
 * These fixes are applied ONLY to mobile devices (max-width: 991px)
 * to avoid breaking desktop scroll behavior
 */

/* ============================================
   MOBILE-ONLY SCROLL FIXES
   ============================================ */

@media screen and (max-width: 1024px) {
    /* Root level scroll fixes for mobile */
    html {
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
        min-height: 100% !important;
    }

    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        position: relative !important;
        overscroll-behavior-y: contain !important;
        min-height: -webkit-fill-available !important;
        touch-action: pan-x pan-y !important;
    }

    /* Ensure all main content containers can scroll */
    .container,
    .container-fluid,
    .page-content-wrapper,
    main,
    #app,
    .app-container,
    .content-wrapper,
    .main-content {
        overflow-y: visible !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Touch action for proper scroll */
    html, body, .container, .container-fluid, main {
        touch-action: pan-x pan-y !important;
    }

    /* Header - prevent blocking scroll */
    header,
    .header-area,
    .fixed-top,
    .sticky-top,
    nav.navbar {
        touch-action: none !important;
    }

    /* Footer/Bottom nav */
    footer,
    .footer-area,
    .footer-nav-area,
    .fixed-bottom,
    .bottom-nav {
        touch-action: none !important;
    }

    /* Modal body scrolling */
    .modal-body {
        -webkit-overflow-scrolling: touch !important;
        overflow-y: auto !important;
        max-height: 70vh !important;
    }

    /* Offcanvas scrolling */
    .offcanvas-body {
        -webkit-overflow-scrolling: touch !important;
        overflow-y: auto !important;
    }

    /* Sidenav scroll */
    .sidenav-wrapper .sidenav,
    .offcanvas,
    .sidebar,
    .side-menu {
        -webkit-overflow-scrolling: touch !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    /* Table scroll */
    .table-responsive,
    .dataTables_wrapper {
        -webkit-overflow-scrolling: touch !important;
        overflow-x: auto !important;
    }

    /* Override hero-block-wrapper */
    .hero-block-wrapper {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Override login-wrapper */
    .login-wrapper {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Card and list scroll fixes */
    .card-body,
    .list-group,
    .accordion-body,
    .tab-content,
    .dropdown-menu {
        overflow: visible !important;
    }

    /* Hide scrollbar but keep scroll */
    body {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    body::-webkit-scrollbar {
        display: none !important;
    }
}

/* ============================================
   MODAL/OVERLAY SCROLL HANDLING (ALL DEVICES)
   ============================================ */

/* Fix for when modal is open - freeze background */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* Venobox open state */
body.vbox-open {
    overflow: hidden !important;
}

/* ============================================
   IOS SAFARI SPECIFIC (MOBILE ONLY)
   ============================================ */

@supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 1024px) {
        body {
            min-height: -webkit-fill-available !important;
        }

        html {
            height: -webkit-fill-available !important;
        }

        /* Fix rubber banding on iOS */
        .fixed-top,
        .sticky-top,
        header.fixed,
        .header-area {
            -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
        }

        /* iOS scroll momentum */
        .container,
        .container-fluid,
        .page-content-wrapper,
        main {
            -webkit-overflow-scrolling: touch !important;
        }
    }
}

/* ============================================
   SAFE AREA (NOTCH DEVICES - MOBILE ONLY)
   ============================================ */

@supports (padding-top: env(safe-area-inset-top)) {
    @media screen and (max-width: 1024px) {
        body {
            padding-top: env(safe-area-inset-top) !important;
            padding-bottom: env(safe-area-inset-bottom) !important;
        }

        .fixed-bottom,
        .footer-nav-area,
        .bottom-nav {
            padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
        }

        .fixed-top,
        .header-area,
        header {
            padding-top: env(safe-area-inset-top) !important;
        }
    }
}

/* ============================================
   FORM INPUT FIXES (PREVENT IOS ZOOM) - MOBILE ONLY
   ============================================ */

@media screen and (max-width: 1024px) {
    /* 16px minimum font size prevents iOS zoom on focus */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ============================================
   HORIZONTAL SCROLL PREVENTION (ALL DEVICES)
   ============================================ */

html, body {
    max-width: 100vw;
}

img, video, iframe, table {
    max-width: 100%;
}

/* ============================================
   DEBUG CLASS
   ============================================ */

.force-scroll {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}