/* Status Bar Styles for Web/PWA */
:root {
    --status-bar-color: #3F51B5;
}

/* Mobile browser bar color (works on Chrome, Edge, Safari) */
meta[name="theme-color"] {
    transition: content 0.3s ease;
}

/* Full screen mode */
.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* Map full screen view */
.map-fullscreen {
    background-color: #000 !important;
    color: white !important;
}

/* Safe area handling for notched phones */
body {
    padding-top: env(safe-area-inset-top, 0px);
    transition: padding-top 0.3s ease;
}

/* Simulated status bar for desktop browsers */
#simulated-status-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 24px);
    background-color: var(--status-bar-color);
    z-index: 9999;
    transition: height 0.3s ease;
}

/* Hide in fullscreen */
.fullscreen #simulated-status-bar {
    height: 0 !important;
}

/* iOS PWA specific */
@supports (-webkit-touch-callout: none) {
    body.ios-pwa {
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);
    }
}