/* ============================================================================
   WEBAPP (STANDALONE / HOMESCREEN) OVERRIDES
   iOS standalone mode: safe-area insets, fixed toolbar, splash screen,
   body layout, login centering.
   ============================================================================ */

@media screen and (max-width: 1023px) {
    /* --- WebApp (Standalone) Specific Overrides --- */

    /* 1. In standalone mode there is no URL bar, so 100vh = full screen
       (e.g. 956px). The mobile.css position:fixed pins html to the
       viewport (894px), leaving a 62px gap at the bottom.
       Revert to position:static + 100vh to fill the full screen. */
    html.ios-standalone {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        height: 100vh !important;
        max-height: 100vh !important;
        min-height: 100vh !important;
        overflow: hidden !important;
    }

    /* 2. BODY LAYOUT — also use 100vh to fill the full screen */
    body.ios-standalone {
        position: relative !important;
        width: 100% !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* 3. SYSTEM GRID (Header + Content)
       In standalone mode the toolbar is taller: 56px + safe-area.
       100vh fills the entire screen in standalone (no URL bar). */
    body.ios-standalone #SystemVM {
        display: grid !important;
        width: 100% !important;
        height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px)) !important;
        /* Header | Content. No footer row. */
        grid-template-rows: auto 1fr !important;
        grid-template-areas: "header" "content" !important;
        grid-gap: 0 !important;
        margin: 0 !important;
    }

    /* 4. HEADER (Safe Area Top) */
    body.ios-standalone #SystemVMHeader {
        grid-area: header !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        height: calc(50px + env(safe-area-inset-top, 0px)) !important;
        box-sizing: border-box !important;
        background-color: #333 !important;
        flex: 0 0 auto !important;
    }

    /* 5. CONTENT CONTAINER */
    body.ios-standalone #SystemVMContainer {
        grid-area: content !important;
        height: 100% !important;
        overflow: hidden !important;
        background-color: white !important;
    }

    /* 5a. DOCK PANELS — adjust top/bottom for safe-area insets.
       In mobile.css: top:54px, bottom:56px. In standalone the header
       and toolbar are taller due to safe-area padding. */
    body.ios-standalone #ContainerVMLeftDock,
    body.ios-standalone #ContainerVMRightDock {
        top: calc(50px + env(safe-area-inset-top, 0px)) !important;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.ios-standalone #ContainerVMRightTabs {
        top: calc(50px + env(safe-area-inset-top, 0px)) !important;
    }

    /* 5b. jQuery UI Dialog — push below status bar and above toolbar in standalone.
       The .ui-dialog is positioned by jQuery UI at the viewport top.
       Override top to clear the notch/status bar. Also ensure it
       stacks above the standalone toolbar (z-index: 99999). */
    body.ios-standalone .ui-dialog {
        top: env(safe-area-inset-top, 0px) !important;
        z-index: 100000 !important;
    }
    body.ios-standalone .ui-widget-overlay {
        z-index: 99999 !important;
    }

    /* 6. TOOLBAR (Pinned to Physical Bottom) */
    body.ios-standalone #MobileBottomToolbar {
        position: fixed !important;
        top: auto !important;   /* Stop any top-relative calculations */
        bottom: 0 !important;   /* Pin to physical bottom */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        
        /* Internal spacing for Home Indicator */
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        
        background-color: #333 !important;
        z-index: 99999 !important;
        border-top: 1px solid #444 !important; /* Visual separator */
        margin: 0 !important; /* Ensure no external push */
    }

    /* 7. LOGIN PAGE CENTER FIX */
    body.ios-standalone .login-page {
        position: absolute !important;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: white !important;
        z-index: 10000 !important;
        margin: 0 !important;
    }
    /* 8. Google Places Autocomplete dropdown fix.
       In standalone mode the page layout grid covers .pac-container
       which Google appends to <body>. Force it to position:fixed. */
    body.ios-standalone .pac-container {
        position: fixed !important;
        z-index: 999999 !important;
        background: white !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        touch-action: auto !important;
    }
    body.ios-standalone .pac-container .pac-item {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer;
    }


    /* --- End of WebApp (Standalone) Specific Overrides --- */
}