/**
 * Bottom Navigation Bar - Ultimate Fix V2
 * This file ensures the bottom nav stays fixed on mobile devices
 * CRITICAL: This must be the last CSS file loaded to override all other styles
 */

/* Force fixed positioning on mobile - HIGHEST PRIORITY */
@media (max-width: 768px) {

    /* 强制html和body不影响fixed定位 */
    html,
    body {
        position: relative !important;
        min-height: 100vh !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        /* 防止iOS Safari地址栏影响 */
        -webkit-overflow-scrolling: touch !important;
    }

    /* Admin页面特殊处理 */
    body:not(.menu-open) {
        overflow-y: auto !important;
        position: relative !important;
    }

    /* Bottom navigation - strongest possible fixed positioning */
    nav.bottom-nav,
    .bottom-nav {
        /* Position - CRITICAL - 使用最强的固定定位 */
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;

        /* Size - 确保宽度100% */
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;

        /* Z-index - MUST be highest */
        z-index: 999999 !important;

        /* Transform - prevent any movement - 强制使用3D加速 */
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        -moz-transform: translate3d(0, 0, 0) !important;
        -ms-transform: translate3d(0, 0, 0) !important;

        /* Hardware acceleration */
        will-change: auto !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        -moz-backface-visibility: hidden !important;
        perspective: 1000px !important;
        -webkit-perspective: 1000px !important;

        /* Prevent scrolling behavior */
        overscroll-behavior: none !important;
        -webkit-overscroll-behavior: none !important;

        /* Prevent touch actions that might move it */
        touch-action: none !important;
        -webkit-touch-action: none !important;
        pointer-events: auto !important;

        /* Ensure it's always visible */
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important;

        /* Flex properties */
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-around !important;

        /* Prevent any margin/padding issues */
        margin: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;

        /* Prevent any animation that might move it */
        animation: none !important;
        transition: none !important;

        /* Prevent any flex/grid parent from affecting position */
        flex-shrink: 0 !important;
        flex-grow: 0 !important;

        /* Ensure it's not affected by parent containers */
        contain: layout style paint !important;

        /* 防止被其他元素覆盖 */
        isolation: isolate !important;
    }

    /* 重要：防止子元素的touch事件影响父元素 */
    .bottom-nav>* {
        pointer-events: auto !important;
    }

    /* Force display even if JavaScript tries to hide it */
    nav.bottom-nav:not(.force-hidden),
    .bottom-nav:not(.force-hidden) {
        display: flex !important;
    }

    /* Content bottom spacing is handled by mobile-app.css (main padding-bottom) */
    body {
        padding-bottom: 0 !important;
    }

    /* Removed main override to prevent conflicts with mobile-app.css */
    /* main { }
    */

    /* Footer should not create large whitespace */
    footer {
        margin-bottom: 0 !important;
        padding-bottom: 20px !important;
    }

    /* Fix for iOS Safari address bar */
    @supports (-webkit-touch-callout: none) {
        .bottom-nav {
            /* iOS specific fixes */
            position: fixed !important;
            bottom: 0 !important;
            padding-bottom: env(safe-area-inset-bottom, 0px) !important;
            /* 防止iOS Safari bounce影响 */
            -webkit-backface-visibility: hidden !important;
            -webkit-transform: translate3d(0, 0, 0) !important;
        }

        body {
            /* iOS Safari scrolling support */
            -webkit-overflow-scrolling: touch !important;
        }

        /* 防止iOS Safari在滚动时隐藏底部导航 */
        html {
            height: 100% !important;
            -webkit-text-size-adjust: 100% !important;
        }
    }

    /* Fix for Chrome on Android */
    @supports not (-webkit-touch-callout: none) {
        .bottom-nav {
            /* Android Chrome specific fixes */
            position: fixed !important;
            bottom: 0 !important;
        }
    }

    /* 额外修复：确保在所有滚动位置都固定 */
    @media (max-width: 768px) and (orientation: portrait) {
        .bottom-nav {
            position: fixed !important;
            bottom: 0 !important;
        }
    }

    @media (max-width: 768px) and (orientation: landscape) {
        .bottom-nav {
            position: fixed !important;
            bottom: 0 !important;
            height: 56px !important;
        }
    }
}

/* Tablet and larger - hide bottom nav */
@media (min-width: 769px) {
    .bottom-nav {
        display: none !important;
    }
}

/* Additional safeguards */
.bottom-nav.hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .bottom-nav:not(.hidden) {
        display: flex !important;
    }

    /* 防止页面滚动时bottom-nav被推走 */
    body>.bottom-nav,
    nav.bottom-nav {
        position: fixed !important;
    }
}

/* 修复底部导航栏项目的触摸事件 */
.bottom-nav-item {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}