/* Mobile Viewport and Browser UI Handling */

:root {
    /* Mobile viewport handling - set by JavaScript */
    --vh: 1vh; /* Actual viewport height unit */
    --mobile-browser-ui-height: 0px; /* Height of mobile browser UI */
}

/* Enhanced mobile viewport support */
@supports (height: 100dvh) {
    .app-container {
        /* Use dynamic viewport height when available */
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}

/* Fallback for browsers without dvh support - use JavaScript-calculated values */
@media (max-width: 768px) {
    :root {
        /* Trim a bit from header height on mobile to remove the visual gap */
        --mobile-header-trim: 8px;
    }
    /* Ensure the main content area has no extra top padding on mobile */
    .app-content {
        padding-top: 0 !important;
    }
    .app-container {
        /* Use custom property set by JavaScript for mobile browser UI handling */
        height: calc(var(--vh, 1vh) * 100) !important;
        max-height: calc(var(--vh, 1vh) * 100) !important;
    }
    
    /* Ensure sidebar content is properly sized on mobile */
    .app-sidebar {
        /* Account for mobile browser UI */
        height: calc(var(--vh, 1vh) * 100 - var(--header-height, 48px)) !important;
        max-height: calc(var(--vh, 1vh) * 100 - var(--header-height, 48px)) !important;
    }
    
    /* Add safe padding to scrollable areas to prevent content hiding */
    .sidebar-nav,
    .nav-menu,
    .app-content,
    .content-body {
        padding-bottom: max(20px, var(--mobile-browser-ui-height, 20px), env(safe-area-inset-bottom, 20px)) !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure dropdown menus don't get cut off by mobile browser UI */
    .dropdown-menu {
        max-height: calc(var(--vh, 1vh) * 80) !important;
        overflow-y: auto !important;
        margin-bottom: max(20px, var(--mobile-browser-ui-height, 20px)) !important;
    }
    
    /* User menu specific mobile adjustments */
    .user-menu .dropdown-menu {
        max-height: calc(var(--vh, 1vh) * 70) !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    }
    
    /* Ensure main content area accounts for mobile browser UI */
    .app-main {
        min-height: calc(var(--vh, 1vh) * 100 - var(--header-height, 48px)) !important;
        max-height: calc(var(--vh, 1vh) * 100 - var(--header-height, 48px)) !important;
    }

    /* Normalize page header spacing on mobile (align with Tasks page) */
    .app-content .page-header,
    .app-content .page-header-compact,
    .app-content .modern-header,
    .about-page .page-header {
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Remove wasted top space for first element inside content body */
    .app-content .content-body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    /* Also handle first-of-type to avoid text-node edge cases */
    .app-content .content-body > *:first-child,
    .app-content .content-body > div:first-of-type,
    .app-content .content-body > section:first-of-type {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Common page containers that often add top padding */
    .membership-container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* iOS specific fixes for Safari mobile browser UI */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        .app-container {
            /* iOS Safari specific viewport handling */
            height: -webkit-fill-available !important;
            max-height: -webkit-fill-available !important;
        }
        
        .app-sidebar {
            height: calc(-webkit-fill-available - var(--header-height, 48px)) !important;
        }
        
        .app-main {
            min-height: calc(-webkit-fill-available - var(--header-height, 48px)) !important;
            max-height: calc(-webkit-fill-available - var(--header-height, 48px)) !important;
        }
    }
}

/* Prevent zoom and bouncing on mobile for better UI stability */
@media (max-width: 768px) {
    html, body {
        touch-action: manipulation;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        /* Prevent overscroll bounce */
        overscroll-behavior: none;
    /* -webkit-overflow-scrolling removed to avoid compatibility warnings */
    }
    
    /* Allow text selection in specific areas */
    .content-body,
    .dropdown-item,
    input,
    textarea,
    .form-control {
        -webkit-user-select: text;
        -khtml-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }
}