/**
 * Bay Brothers OS - Mobile Core CSS
 * ==================================
 * SINGLE SOURCE OF TRUTH for mobile and iOS base styles.
 * 
 * This file should be loaded early in the CSS chain.
 * Other mobile-specific CSS files (quote-mobile.css, invoice-mobile.css) 
 * should extend these base styles.
 * 
 * PWA MODE NOTES:
 * - In PWA mode, Safari's address bar and toolbar are HIDDEN
 * - env(safe-area-inset-bottom) returns only the home indicator (~34px on notched devices)
 * - We should NOT add extra fallback padding in PWA mode
 * - Use --pwa-bottom-inset (0px in PWA) vs --browser-bottom-inset (extra space for toolbars)
 */

/* =========================================================================
   CSS CUSTOM PROPERTIES - Mobile/iOS Defaults
   ========================================================================= */

:root {
    /* Viewport - Set by JS */
    --vh: 1vh;
    --viewport-height: 100vh;
    
    /* Safe Areas - Native env() values
       NOTE: These return 0px on non-iOS devices, which is CORRECT behavior.
       Only actual iOS devices with notches/home indicators have safe areas. */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    
    /* PWA-aware safe areas - JS will set these based on mode
       In PWA mode: equals env() values (no extra space needed)
       In iOS Safari browser mode: includes extra space for toolbar
       In all other browsers: equals env() values (0px on non-iOS) */
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    
    /* Safari Browser Toolbar Offset - Set by JS ONLY for iOS Safari browser mode
       On non-iOS browsers and PWA mode, this is always 0px */
    --safari-toolbar-offset: 0px;
    
    /* Bottom nav height - consistent across all modes and devices */
    --bottom-nav-height: 56px;
    
    /* Content padding - accounts for bottom nav + safe area
       JS sets this based on device/browser detection */
    --content-bottom-padding: calc(var(--bottom-nav-height) + var(--app-safe-bottom));
    
    /* Touch targets - iOS HIG recommends 44px minimum */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    
    /* Spacing for mobile */
    --mobile-gutter: 16px;
    --mobile-card-radius: 12px;
}

/* =========================================================================
   BASE MOBILE STYLES
   ========================================================================= */

/* iOS Device Baseline */
.is-ios {
    /* NOTE: Do NOT set -webkit-user-select: none here!
       It blocks touch events and prevents scrolling on iOS.
       Only set it on specific interactive elements, not the whole body. */
    -webkit-tap-highlight-color: transparent;
}

/* iOS PWA Background - Respects Dark Mode */
.is-pwa {
    /* Match the sidebar/header color so status bar area looks correct */
    background-color: var(--bb-bg-sidebar, #0b4f6c) !important;
}

[data-bs-theme="dark"] .is-pwa {
    background-color: var(--bb-bg-sidebar, #0d1921) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) .is-pwa {
        background-color: var(--bb-bg-sidebar, #0d1921) !important;
    }
}

.is-pwa body {
    /* Body background should also match for status bar */
    background-color: var(--bb-bg-sidebar, #0b4f6c) !important;
    /* CRITICAL: Body should NOT scroll - only main-content-container scrolls */
    overflow: hidden;
    overflow-x: hidden;
    position: fixed;
    width: 100%;
    /* 
     * HEIGHT FIX: Use window.innerHeight via JavaScript
     * ==================================================
     * CSS 100vh/100dvh on iOS PWA doesn't equal window.innerHeight because
     * iOS excludes the top safe area from the viewport calculation in certain
     * contexts. The JavaScript in ios-mobile-core.js sets body.style.height
     * to the actual window.innerHeight value.
     * 
     * These CSS values are fallbacks that will be overridden by JS.
     * Using var(--viewport-height) which is set by JS to window.innerHeight.
     */
    height: var(--viewport-height, 100vh);
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height fallback */
    /* Fill screen completely - no gaps */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    /* Allow touch gestures */
    touch-action: manipulation;
    /* Prevent pull-to-refresh */
    overscroll-behavior-y: none;
}

[data-bs-theme="dark"] .is-pwa body {
    background-color: var(--bb-bg-sidebar, #0d1921) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) .is-pwa body {
        background-color: var(--bb-bg-sidebar, #0d1921) !important;
    }
}

/* Dark mode PWA backgrounds */
[data-bs-theme="dark"] .is-pwa,
[data-bs-theme="dark"] .is-pwa body,
[data-bs-theme="dark"] .is-pwa .page {
    background-color: var(--bb-bg-primary, #0d1117) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) .is-pwa,
    :root:not([data-bs-theme="light"]) .is-pwa body,
    :root:not([data-bs-theme="light"]) .is-pwa .page {
        background-color: var(--bb-bg-primary, #0d1117) !important;
    }
}

/* Prevent text selection on interactive elements */
.is-mobile button,
.is-mobile .btn,
.is-mobile a,
.is-mobile .nav-link {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Allow text selection in inputs */
.is-mobile input,
.is-mobile textarea,
.is-mobile [contenteditable] {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* Touch-optimized interactive elements */
.is-mobile .btn,
.is-mobile button,
.is-mobile a,
.is-mobile .nav-link,
.is-mobile .dropdown-item,
.is-mobile .list-group-item-action {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Prevent zoom on input focus (iOS requires 16px minimum) */
.is-ios input,
.is-ios textarea,
.is-ios select {
    font-size: 16px !important;
}

/* =========================================================================
   iOS PWA MODE - Unified Handling
   ========================================================================= */

@supports (-webkit-touch-callout: none) {
    :root {
        --ios-status-bar-bg: rgba(0, 107, 183, 0.95);
    }
    
    [data-bs-theme="dark"] {
        --ios-status-bar-bg: rgba(13, 25, 33, 0.95);
    }
    
    @media (prefers-color-scheme: dark) {
        :root:not([data-bs-theme="light"]) {
            --ios-status-bar-bg: rgba(13, 25, 33, 0.95);
        }
    }
}

/* 
 * PWA MODE LAYOUT
 * ===============
 * In PWA mode:
 * - No Safari toolbar (it's fullscreen)
 * - env(safe-area-inset-bottom) is ONLY the home indicator (~34px)
 * - env(safe-area-inset-top) is the status bar/notch/dynamic island area
 * - We use the actual env() values without extra fallback padding
 */
.is-pwa {
    /* Set PWA-specific variables - no extra padding needed */
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    /* Content padding in PWA = nav height + actual safe area (no extra) */
    --content-bottom-padding: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

/* =========================================================================
   PWA SAFE AREA HANDLING - SIMPLIFIED
   =========================================================================
   
   APPROACH: One simple rule - the .page element handles ALL safe areas.
   
   - NO ::before pseudo-elements (they cause double-offset issues)
   - NO JavaScript-set CSS variables (too complex, hard to debug)
   - Just use env() directly on the .page element
   
   The status bar color comes from the <meta name="theme-color"> tag in App.razor.
   With "black-translucent" status bar style, content renders under the status bar,
   and we use padding-top to push it below the safe area.
   
   iOS Safe Area Heights (for reference):
   - iPhone with notch (X-14): ~47px
   - iPhone with Dynamic Island (14 Pro+): ~59px  
   - iPhone SE / older: ~20px
   ========================================================================= */

/* 
 * PWA .page - THE ONLY place we handle top safe area
 * ===================================================
 * Uses padding-top to push content below the status bar/notch.
 * The background-color of .page shows through the status bar area.
 */
@media (max-width: 640.98px) {
    .is-pwa .page {
        /* CRITICAL FIX: Override MainLayout.razor.css's min-height: -webkit-fill-available
           The body is position: fixed with inset: 0 (873px in debug), so .page should fill it exactly.
           
           Debug showed: body=873px, page=814px (59px short = padding-top amount)
           The -webkit-fill-available was subtracting the safe area from the height.
           
           Solution: Use 100% height and explicitly set min-height to 0 to override */
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        /* SINGLE SOURCE: Push content below status bar */
        padding-top: env(safe-area-inset-top, 0px);
        /* No bottom padding on .page - that's handled by .main-content-container */
        padding-bottom: 0;
        box-sizing: border-box;
        /* Background extends under status bar (visible with black-translucent) */
        background-color: var(--bb-bg-sidebar, #0b4f6c);
        /* Ensure flexbox layout fills the space */
        display: flex;
        flex-direction: column;
        /* Prevent any overflow */
        overflow: hidden;
    }
    
    /* Dark mode - different status bar background */
    [data-bs-theme="dark"] .is-pwa .page {
        background-color: var(--bb-bg-sidebar, #0d1921);
    }
    
    @media (prefers-color-scheme: dark) {
        :root:not([data-bs-theme="light"]) .is-pwa .page {
            background-color: var(--bb-bg-sidebar, #0d1921);
        }
    }
    
    /* Main content area - has white/dark background that sits below status bar */
    .is-pwa main {
        flex: 1;
        background-color: var(--bb-bg-primary, #ffffff);
    }
    
    [data-bs-theme="dark"] .is-pwa main {
        background-color: var(--bb-bg-primary, #0d1117);
    }
}

/* 
 * AUTH/LOGIN PAGES AND PUBLIC PAGES - No bottom nav needed
 * =========================================================
 * Auth pages use .ios-auth-main and don't have bottom navigation.
 * This includes login, public shared quote pages, payment pages, etc.
 * 
 * CRITICAL FIX: Enable scrolling for ALL mobile scenarios, not just PWA.
 * The main element must be scrollable for content that exceeds viewport.
 */
@media (max-width: 640.98px) {
    /* 
     * iOS Safari (both PWA and browser mode) - enable scrolling
     * ==========================================================
     * Previously this only applied to .is-pwa, but users in Safari browser
     * mode also need scrolling enabled on public pages.
     */
    main.ios-auth-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        /* CRITICAL: Enable scrolling for content that exceeds viewport */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        /* Allow scroll gestures */
        touch-action: manipulation;
        /* Contain overscroll bounce */
        overscroll-behavior: contain;
        overscroll-behavior-y: contain;
        /* Auth pages have white background */
        background-color: var(--bb-bg-primary, #ffffff);
    }
    
    [data-bs-theme="dark"] main.ios-auth-main {
        background-color: var(--bb-bg-primary, #0d1117);
    }
    
    @media (prefers-color-scheme: dark) {
        :root:not([data-bs-theme="light"]) main.ios-auth-main {
            background-color: var(--bb-bg-primary, #0d1117);
        }
    }
    
    /* 
     * Shared Quote Pages / Public Pages - scrolling for content
     * ==========================================================
     * Public pages like /shared/quote/* need their main to scroll.
     * These pages add .public-page-active to body.
     */
    .public-page-active main.ios-auth-main {
        /* Ensure scrolling works on public pages */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* No bottom padding needed - no bottom nav on public pages */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    
    /* 
     * Shared quote page layout - the .page wrapper needs to fill screen
     * ==================================================================
     * When .shared-quote-page is applied, we're on a public quote view.
     */
    .page.shared-quote-page {
        /* Fill the viewport */
        height: 100%;
        height: 100dvh;
        height: -webkit-fill-available;
        /* Page wrapper doesn't scroll - main does */
        overflow: hidden;
    }
    
    .page.shared-quote-page main {
        /* Main is the scroll container */
        flex: 1;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        touch-action: manipulation;
        overscroll-behavior: contain;
    }
}

/* 
 * BROWSER MODE (Safari with toolbar)
 * ==================================
 * When NOT in PWA mode AND on iOS Safari, Safari toolbar takes extra space (~44px)
 * The env() safe areas don't include the toolbar, so JS adds extra padding via --app-safe-bottom
 * 
 * IMPORTANT: This extra padding is ONLY needed for iOS Safari.
 * Other browsers (Edge, Chrome, Firefox) don't need it.
 */
body.is-ios.is-safari:not(.is-pwa) {
    /* iOS Safari browser mode needs extra bottom padding for toolbar */
    --content-bottom-padding: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 20px);
}

/* All other mobile browsers (non-iOS or non-Safari) - standard handling */
body.is-mobile:not(.is-ios),
body.is-ios:not(.is-safari) {
    /* Standard padding - no Safari toolbar offset */
    --content-bottom-padding: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

/* =========================================================================
   SAFARI BROWSER MODE OPTIMIZATIONS
   =========================================================================
   When running in Safari browser (not PWA), apply these optimizations.
   ========================================================================= */

@media all and (display-mode: browser) {
    /* Prevent callout on long press in browser mode */
    body {
        -webkit-touch-callout: none;
    }
}

/* Always allow text selection in form inputs */
input, textarea, [contenteditable] {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* =========================================================================
   VIEWPORT & SCROLL BEHAVIOR
   ========================================================================= */

/* Use dvh (dynamic viewport height) where supported */
@supports (height: 100dvh) {
    .is-mobile .full-height {
        height: 100dvh;
    }
}

/* Fallback using CSS custom property set by JS */
.is-mobile .full-height {
    height: calc(var(--vh, 1vh) * 100);
}

/* 
 * Overscroll behavior - SINGLE SOURCE OF TRUTH: MainLayout.razor.css
 * ===================================================================
 * Do NOT define overscroll-behavior for body here.
 * MainLayout.razor.css handles all scroll container behavior.
 * Only define iOS-specific scroll helpers for specific classes.
 */

/* Scrollable containers should use momentum scrolling */
.is-ios .overflow-auto,
.is-ios .overflow-y-auto,
.is-ios .modal-body,
.is-ios .offcanvas-body {
    -webkit-overflow-scrolling: touch;
}

/* =========================================================================
   TOUCH TARGET SIZES
   ========================================================================= */

.is-mobile .btn {
    min-height: var(--touch-target-min);
    padding: 0.5rem 1rem;
}

.is-mobile .btn-sm {
    min-height: 36px;
}

.is-mobile .btn-lg {
    min-height: var(--touch-target-comfortable);
}

.is-mobile .form-control,
.is-mobile .form-select {
    min-height: var(--touch-target-min);
    padding: 0.625rem 0.75rem;
}

.is-mobile .nav-link {
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
}

.is-mobile .dropdown-item {
    min-height: var(--touch-target-min);
    padding: 0.75rem 1rem;
}

.is-mobile .list-group-item {
    padding: 0.875rem 1rem;
}

/* =========================================================================
   SCROLL BLOCKING DURING SCROLL (prevents accidental taps)
   ========================================================================= */

body.is-scrolling a,
body.is-scrolling button:not(.modal button),
body.is-scrolling .btn:not(.modal .btn),
body.is-scrolling .nav-link,
body.is-scrolling .dropdown-item,
body.is-scrolling .list-group-item-action {
    pointer-events: none !important;
}

/* Always allow interactions inside modals */
body.is-scrolling .modal a,
body.is-scrolling .modal button,
body.is-scrolling .modal .btn,
body.is-scrolling .modal input,
body.is-scrolling .modal select,
body.is-scrolling .modal textarea {
    pointer-events: auto !important;
}

/* =========================================================================
   KEYBOARD OPEN STATE
   ========================================================================= */

/* When keyboard is open, adjust fixed elements */
body[data-keyboard-open="true"] .cog-wheel-container,
body[data-keyboard-open="true"] .fixed-bottom {
    display: none !important;
}

body[data-keyboard-open="true"] .modal-dialog {
    margin-bottom: 0;
}

/* =========================================================================
   MAIN CONTENT CONTAINER - Mobile scrolling with bottom nav clearance
   =========================================================================
   CRITICAL: This is the ONLY scrollable element on mobile.
   All ancestor elements (body, html, .page, main) must have overflow: hidden.
   
   The padding-bottom ensures content doesn't get cut off by the fixed bottom nav.
   
   NOTE: This MUST be in global CSS (not scoped Blazor CSS) to ensure it applies.
   ========================================================================= */

@media (max-width: 640.98px) {
    .main-content-container {
        /* 
         * BOTTOM PADDING: nav height (56px) + safe area for home indicator
         * ================================================================
         * Even though the nav no longer has safe area padding, we still need
         * padding here so content doesn't get hidden behind the nav OR the
         * iOS home indicator area.
         */
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        /* Enable scrolling */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        /* Allow scroll gestures */
        touch-action: manipulation;
        /* Contain overscroll bounce */
        overscroll-behavior: contain;
    }
    
    /* iOS Safari browser mode needs extra padding for Safari toolbar */
    body.is-ios.is-safari:not(.is-pwa) .main-content-container {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 20px) !important;
    }
    
    /* Pages that hide the bottom nav don't need the extra padding */
    .page.hide-mobile-nav .main-content-container,
    .page.shared-quote-page .main-content-container,
    .page.hide-all-navigation .main-content-container {
        padding-bottom: 0 !important;
    }
}

/* =========================================================================
   MOBILE BOTTOM NAVIGATION
   =========================================================================
   Styling moved to cog-wheel-nav.css. The cog wheel container uses the
   same height footprint: calc(56px + env(safe-area-inset-bottom, 0px)).
   ========================================================================= */

/* =========================================================================
   FLOATING ACTION BUTTON (FAB)
   =========================================================================
   Global FAB positioning that works with body classes.
   Component CSS should only add visual styling (colors, shadows).
   
   NOTE: Body class selectors like .is-pwa don't work in scoped Blazor CSS,
   so all FAB positioning MUST be here in global CSS.
   ========================================================================= */

/* Base FAB styles - MUST be outside media query for proper cascade */
.fab {
    position: fixed !important;
    bottom: calc(var(--bottom-nav-height, 56px) + env(safe-area-inset-bottom, 0px) + 16px);
    right: 20px;
    z-index: 1040; /* Above bottom nav (1030) but below modals (1050+) */
    
    /* Base styling - can be overridden by component CSS */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex !important; /* CRITICAL: Override Bootstrap's d-md-none on mobile */
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    
    /* Default colors - override in component CSS */
    background: var(--bs-primary, #007bff);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    
    /* iOS optimizations */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    
    /* Smooth transitions */
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.fab:active {
    transform: scale(0.92);
}

.fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    color: white;
    text-decoration: none;
}

/* Hide FAB on desktop - use desktop-specific buttons instead */
@media (min-width: 768px) {
    .fab {
        display: none !important;
    }
}

/* Mobile-specific FAB adjustments */
@media (max-width: 767.98px) {
    /* 
     * PWA mode - FAB positioned directly above the bottom nav
     * ========================================================
     * The bottom nav now includes safe area padding, so its total height is:
     * 56px (content) + env(safe-area-inset-bottom) (safe area)
     * 
     * FAB should be positioned at: nav total height + small gap
     */
    .is-pwa .fab {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
    }
    
    /* iOS Safari browser mode - small extra space for toolbar + safe area
     * ====================================================================
     * Safari's bottom toolbar varies by iOS version. iOS 18+ has minimal
     * toolbar UI. We use 20px extra (matching --content-bottom-padding)
     * instead of the older 44px value which caused the FAB to float too high.
     */
    body.is-ios.is-safari:not(.is-pwa) .fab {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 20px + 16px);
    }
    
    /* Non-PWA, non-Safari mobile browsers - include safe area */
    body.is-mobile:not(.is-pwa):not(.is-ios) .fab {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
    }
    
    /* Hide FAB when keyboard is open */
    body[data-keyboard-open="true"] .fab {
        opacity: 0;
        pointer-events: none;
    }
    
    /* Adjust FAB on pages without bottom nav */
    .page.hide-mobile-nav .fab,
    body.hide-mobile-nav .fab {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    }
    
    /* PWA mode without bottom nav */
    .is-pwa .page.hide-mobile-nav .fab,
    .is-pwa.hide-mobile-nav .fab {
        bottom: 16px;
    }
    
    /* Reduce opacity during scroll */
    body.is-scrolling .fab {
        opacity: 0.7;
        pointer-events: none;
    }
}

/* =========================================================================
   MOBILE MODALS
   ========================================================================= */

@media (max-width: 575.98px) {
    /* Full-screen modals on small screens */
    .modal-fullscreen-sm-down .modal-dialog {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    
    .modal-fullscreen-sm-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    
    /* Standard modals - slide up from bottom on mobile */
    .modal:not(.modal-fullscreen-sm-down):not(.modal-fullscreen-md-down) .modal-dialog {
        margin: 0;
        margin-top: auto;
        max-height: 90vh;
    }
    
    .modal:not(.modal-fullscreen-sm-down):not(.modal-fullscreen-md-down) .modal-content {
        border-radius: 16px 16px 0 0;
        max-height: 90vh;
    }
    
    .modal-body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* =========================================================================
   GLOBAL BOTTOM SHEET / ACTION SHEET HANDLING
   =========================================================================
   CRITICAL: When a bottom sheet is shown, we HIDE the bottom navigation
   to prevent overlap and provide a cleaner UX. The sheet itself handles
   the safe area padding.
   
   Two-pronged approach for maximum compatibility:
   1. CSS :has() selector (modern browsers - auto-detects overlay presence)
   2. JS adds 'bottom-sheet-open' class to body (fallback for older browsers)
   ========================================================================= */

/* Hide bottom nav when a bottom sheet/action sheet is open (JS fallback) */
body.bottom-sheet-open .cog-wheel-container,
body.ts-modal-open .cog-wheel-container {
    display: none !important;
}

/* Hide bottom nav when Bootstrap modal is open on mobile */
@media (max-width: 576px) {
    body.modal-open .cog-wheel-container {
        display: none !important;
    }
}

/* 
 * MODERN APPROACH: Use :has() to auto-hide nav when overlays are visible
 * This works without any JavaScript and catches ALL overlay types.
 * Supported in iOS Safari 15.4+, Chrome 105+, Firefox 121+
 */
@supports selector(:has(*)) {
    body:has(.action-sheet-overlay),
    body:has(.context-modal-overlay),
    body:has(.ios-bottom-sheet.show),
    body:has(.bottom-sheet-overlay),
    body:has(.ts-modal-overlay) {
        /* Hide bottom nav when any bottom sheet overlay is present */
    }
    
    body:has(.action-sheet-overlay) .cog-wheel-container,
    body:has(.context-modal-overlay) .cog-wheel-container,
    body:has(.ios-bottom-sheet.show) .cog-wheel-container,
    body:has(.bottom-sheet-overlay) .cog-wheel-container,
    body:has(.ts-modal-overlay) .cog-wheel-container {
        display: none !important;
    }
    
    /* Also hide for Bootstrap modals using :has() */
    @media (max-width: 576px) {
        body:has(.modal.show) .cog-wheel-container {
            display: none !important;
        }
    }
}

@media (max-width: 767.98px) {
    /* 
     * BOTTOM SHEET SAFE AREA - When bottom nav is HIDDEN
     * ==================================================
     * Since we hide the bottom nav when sheets are open, sheets only need 
     * to account for the device safe area (home indicator), not the nav bar.
     * 
     * HARDCODED MINIMUM: Use max() to ensure at least 24px padding
     * This guarantees buttons are visible even if env() returns 0 (non-iOS devices).
     * 
     * SAFARI TOOLBAR: We also add --safari-toolbar-offset (set by JS) to
     * account for Safari's bottom toolbar. This is 0px on non-Safari browsers.
     */
    
    /* Action sheets and context modals - hardcoded minimum + safe area + toolbar offset */
    .action-sheet,
    .context-modal-sheet,
    .bottom-sheet-content {
        padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + var(--safari-toolbar-offset, 0px) + 24px)) !important;
    }
    
    /* iOS Bottom Sheets - same treatment */
    .ios-bottom-sheet-content {
        padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + var(--safari-toolbar-offset, 0px) + 24px)) !important;
    }
    
    /* iOS Bottom Sheet List - scrollable content padding */
    .ios-bottom-sheet-list {
        padding-bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + var(--safari-toolbar-offset, 0px) + 16px));
    }
    
    /* Bootstrap Modal Footer - add safe area padding + toolbar offset */
    .modal .modal-footer {
        padding-bottom: max(16px, calc(16px + env(safe-area-inset-bottom, 0px) + var(--safari-toolbar-offset, 0px)));
    }
    
    /* Modal body when it's the last child (no footer) */
    .modal .modal-body:last-child {
        padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + var(--safari-toolbar-offset, 0px) + 24px));
    }
    
    /* Generic class for any bottom sheet content */
    .bottom-sheet-safe-area {
        padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + var(--safari-toolbar-offset, 0px) + 24px)) !important;
    }
    
    /* Modal content - ensure buttons stay visible when Safari toolbar pushes up */
    .modal .modal-content {
        max-height: calc(100vh - var(--safari-toolbar-offset, 0px) - env(safe-area-inset-top, 0px) - 20px);
        max-height: calc(100dvh - var(--safari-toolbar-offset, 0px) - env(safe-area-inset-top, 0px) - 20px);
    }
    
    /* 
     * OVERLAY Z-INDEX HIERARCHY (backup if :has() not supported)
     * ==========================================================
     * Bottom nav: z-index: 1030
     * Action sheets/overlays: z-index: 9999 (already above)
     * This ensures sheets are always on top even if nav isn't hidden
     */
    .action-sheet-overlay,
    .context-modal-overlay,
    .bottom-sheet-overlay {
        z-index: 10000 !important;
    }
    
    .action-sheet,
    .context-modal-sheet {
        z-index: 10001 !important;
    }
}

/* =========================================================================
   TOAST NOTIFICATIONS - iOS PWA Safe Area Handling
   =========================================================================
   Many pages use inline .toast-notification styles with `position: fixed; top: 20px`.
   In iOS PWA mode, this results in the toast being cut off by the status bar.
   
   This global rule ensures ALL toast notifications respect the safe area,
   overriding any inline page-specific styles.
   ========================================================================= */

@media (max-width: 767.98px) {
    /* PWA mode - add safe area to top positioning */
    .is-pwa .toast-notification {
        /* Override any inline top: 20px with safe area + small gap */
        top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    }
    
    /* iOS Safari browser mode */
    body.is-ios.is-safari:not(.is-pwa) .toast-notification {
        /* Browser mode has Safari UI, so just use small top offset */
        top: 20px !important;
    }
    
    /* Non-iOS mobile browsers - standard positioning */
    body.is-mobile:not(.is-ios) .toast-notification {
        top: 16px !important;
    }
}

/* =========================================================================
   MOBILE CARDS
   ========================================================================= */

.is-mobile .card {
    border-radius: var(--mobile-card-radius);
}

/* Card press feedback */
.is-mobile .card-clickable:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* =========================================================================
   MOBILE FORMS
   ========================================================================= */

.is-mobile .form-group,
.is-mobile .mb-3 {
    margin-bottom: 1rem;
}

.is-mobile .form-label {
    font-weight: 600;
    margin-bottom: 0.375rem;
}

/* Floating labels need larger tap targets */
.is-mobile .form-floating > .form-control,
.is-mobile .form-floating > .form-select {
    min-height: 56px;
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

/* =========================================================================
   MOBILE TABLES
   ========================================================================= */

.is-mobile .table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Card-style table on mobile */
.is-mobile .table-mobile-cards tbody tr {
    display: block;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mobile-card-radius);
}

.is-mobile .table-mobile-cards thead {
    display: none;
}

.is-mobile .table-mobile-cards td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border: none;
}

.is-mobile .table-mobile-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--bs-secondary-color);
}

/* =========================================================================
   UTILITY CLASSES
   ========================================================================= */

/* iOS Safe Area Classes */
.ios-safe-top {
    padding-top: 0.5rem;
}

/* PWA mode: offcanvas header needs to account for status bar */
.is-pwa .ios-safe-top {
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
}

.ios-safe-bottom {
    padding-bottom: max(0.375rem, env(safe-area-inset-bottom));
}

/* iOS Touch Target */
.ios-touch-target {
    min-height: 44px !important;
    min-width: 44px !important;
    touch-action: manipulation !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* iOS Navigation Item */
.ios-nav-item {
    touch-action: manipulation !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
}

/* iOS Scrollable Container */
.ios-scrollable {
    -webkit-overflow-scrolling: touch !important;
    /* CRITICAL: Use 'auto' for overflow so iOS recognizes scroll gestures */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* CRITICAL FIX: Use 'manipulation' to allow scroll + tap without zoom */
    /* 'pan-y' was too restrictive on some iOS versions */
    touch-action: manipulation !important;
    position: relative !important;
    overscroll-behavior: contain !important;
}

/* Hide on mobile */
@media (max-width: 640px) {
    .desktop-only {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 641px) {
    .mobile-only {
        display: none !important;
    }
}

/* iOS-only visibility */
.ios-only {
    display: none !important;
}

.is-ios .ios-only {
    display: block !important;
}

/* PWA-only visibility */
.pwa-only {
    display: none !important;
}

.is-pwa .pwa-only {
    display: block !important;
}

/* No bounce for specific containers */
.no-bounce {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
}

/* Disable pointer events during scroll */
.scroll-block {
    pointer-events: none !important;
}

body.is-scrolling .scroll-block-target {
    pointer-events: none !important;
}

/* =========================================================================
   iOS/PWA HEADER & NAVIGATION - Light/Dark Mode Aware
   ========================================================================= */

/* iOS Mobile Header - uses theme-aware colors */
.is-ios .mobile-header,
.is-pwa .mobile-header {
    background-color: var(--bb-bg-sidebar, #0b4f6c) !important;
    color: var(--bb-text-light, #ffffff) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0.5rem 1rem !important;
    min-height: 48px !important;
}

/* PWA mode gets compact header - Safari bar is hidden */
.is-pwa .mobile-header {
    padding-top: 0.25rem !important;
    min-height: 44px !important;
}

.is-ios .mobile-header h3,
.is-pwa .mobile-header h3 {
    color: var(--bb-text-light, #ffffff) !important;
    font-weight: 600;
    font-size: 16px;
}

.is-ios .mobile-header .btn,
.is-pwa .mobile-header .btn {
    color: var(--bb-text-light, #ffffff) !important;
    background: transparent !important;
    border: none !important;
    min-height: 44px;
    min-width: 44px;
}

.is-ios .mobile-header .btn i,
.is-pwa .mobile-header .btn i {
    color: var(--bb-text-light, #ffffff) !important;
}

.is-ios .mobile-header .btn:hover,
.is-pwa .mobile-header .btn:hover,
.is-ios .mobile-header .btn:active,
.is-pwa .mobile-header .btn:active {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* 
 * iOS Bottom Navigation overrides moved to cog-wheel-nav.css
 */

/* =========================================================================
   DARK MODE MOBILE ADJUSTMENTS
   ========================================================================= */

/* Dark mode bottom navigation overrides moved to cog-wheel-nav.css */

/* iOS Dark Mode Header - deeper blue tones */
[data-bs-theme="dark"] .is-ios .mobile-header,
[data-bs-theme="dark"] .is-pwa .mobile-header {
    background-color: var(--bb-bg-sidebar, #0d1921) !important;
    border-bottom: 1px solid var(--bb-border-color, #21262d) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .is-ios .mobile-header h3,
[data-bs-theme="dark"] .is-pwa .mobile-header h3 {
    color: var(--bb-text-primary, #f0f6fc) !important;
}

[data-bs-theme="dark"] .is-ios .mobile-header .btn,
[data-bs-theme="dark"] .is-pwa .mobile-header .btn {
    color: var(--bb-text-primary, #f0f6fc) !important;
}

[data-bs-theme="dark"] .is-ios .mobile-header .btn i,
[data-bs-theme="dark"] .is-pwa .mobile-header .btn i {
    color: var(--bb-text-primary, #f0f6fc) !important;
}

/* System preference dark mode for mobile - bottom nav overrides in cog-wheel-nav.css */

/* =========================================================================
   PRINT - Hide mobile elements
   ========================================================================= */

@media print {
    .cog-wheel-container,
    .cog-bottom-sheet,
    .cog-sheet-backdrop,
    .mobile-only {
        display: none !important;
    }
}

/* =========================================================================
   MOBILE OFFCANVAS MENU - Removed
   =========================================================================
   The mobile offcanvas menu has been replaced by the cog wheel bottom sheet.
   Desktop sidebar styles are in NavMenu.razor scoped CSS.
   ========================================================================= */

/* =========================================================================
   PUBLIC/SHARED PAGES - Scrolling Fixes
   =========================================================================
   Public pages (invoice view, quote view, payment pages) need different 
   scrolling behavior since they don't use the main-content-container.
   
   IMPORTANT: The primary fix is in app.css which overrides body/html
   restrictions for pages with public page indicators.
   
   These styles are SUPPLEMENTARY to ensure proper scrolling on the 
   page content containers themselves.
   ========================================================================= */

/* Public page containers should allow natural scrolling */
.pay-page,
.success-page,
.reschedule-container,
.shared-quote-page,
.invoice-view-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    min-height: 100vh;
    min-height: 100dvh;
}

/* iOS needs explicit touch-action for public pages */
.is-ios .pay-page,
.is-ios .success-page,
.is-ios .reschedule-container,
.is-ios .shared-quote-page,
.is-ios .invoice-view-container {
    touch-action: pan-y pan-x;
    overscroll-behavior: auto;
}

/* When body has public-page-active class (set by JS), ensure scrolling works */
body.public-page-active {
    position: static !important;
    overflow: auto !important;
    overflow-y: auto !important;
    height: auto !important;
    touch-action: auto !important;
}

body.public-page-active.is-pwa {
    position: static !important;
    overflow: auto !important;
}