/* 
 * Mobile Optimization & Sticky Header Fix
 * 
 * Ensures the navigation/filter bar stays at top on all devices
 * Includes responsive improvements for small screens
 */

:root {
    /* Safe area for notch/cutout support */
    --safe-top: max(0px, env(safe-area-inset-top));
    --safe-bottom: max(0px, env(safe-area-inset-bottom));
    --safe-left: max(0px, env(safe-area-inset-left));
    --safe-right: max(0px, env(safe-area-inset-right));
}

/* ===== STICKY HEADER / TOP BANNER ===== */

/* Main header should be sticky and always visible */
header, .navbar, .top-navbar, .header, [role="banner"] {
    position: sticky !important;
    top: var(--safe-top) !important;
    z-index: 1000 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* Country selector dropdown - keep sticky */
.country-selector, .region-dropdown, .filter-bar, .controls-bar {
    position: sticky !important;
    top: var(--safe-top) !important;
    z-index: 999 !important;
}

/* Map container should allow scrolling underneath */
#map, .map-container, [role="main"] {
    position: relative;
    z-index: 100;
}

/* Ensure map tiles don't cover sticky header */
.leaflet-control-container {
    z-index: 800 !important;
}

.leaflet-layer {
    z-index: 200 !important;
}

/* ===== MOBILE IMPROVEMENTS ===== */

@media (max-width: 768px) {
    /* Prevent horizontal scroll on mobile */
    html, body {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Add breathing room on mobile */
    #topbar {
        padding: 2px 8px !important;
        padding-top: calc(2px + var(--safe-top)) !important;
        min-height: 35px !important;
    }

    /* Search/input area - add padding */
    .country-selector, .search-container, input[type="text"], input[type="search"] {
        margin: 2px !important;
        margin-top: 0px !important;
        margin-bottom: 2px !important;
        padding: 8px 10px !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }

    /* Add spacing after country selector */
    .country-selector {
        margin-bottom: 18px !important;
    }

    /* Map container with margin */
    #map {
        width: calc(100vw - 0px) !important;
        height: calc(100vh - var(--safe-top)) !important;
        margin: 0 !important;
        padding: 0 !important;
        margin-top: calc(12px + var(--safe-top)) !important;
    }

    /* Main content area - add side padding */
    main, .content, #map-wrapper {
        padding: 12px !important;
        padding-top: 8px !important;
        padding-bottom: 12px !important;
        margin: 0 !important;
    }

    /* Fix header padding on mobile */
    header, .navbar, .top-navbar, [role="banner"] {
        padding: 4px 8px !important;
        padding-top: calc(4px + var(--safe-top)) !important;
        padding-left: calc(8px + var(--safe-left)) !important;
        padding-right: calc(8px + var(--safe-right)) !important;
        margin: 0 !important;
        width: 100vw !important;
        left: calc(-1 * var(--safe-left)) !important;
    }

    /* Top bar spacing */
    #topbar {
        gap: 4px !important;
        flex-wrap: wrap !important;
    }

    /* Title and controls - add breathing room */
    #title, .brand, .logo {
        margin: 8px 0 !important;
        padding: 0 8px !important;
    }

    /* Optimize dropdown for mobile */
    .country-selector, .dropdown {
        width: calc(100% - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px !important;
        padding: 14px !important;
    }

    /* Mobile-friendly touch targets */
    button, .btn, input[type="button"], input[type="submit"] {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: 6px 10px !important;
        margin: 2px !important;
    }

    /* Zoom controls on mobile with margin */
    .leaflet-control-zoom {
        margin: 14px !important;
        margin-top: calc(14px + var(--safe-top) + 60px) !important;
        margin-right: calc(14px + var(--safe-right)) !important;
        margin-bottom: calc(14px + var(--safe-bottom)) !important;
    }

    /* Reduce mobile navbar height but keep readable */
    .navbar, header {
        min-height: 35px !important;
        max-height: 45px !important;
    }

    /* Prevent top content from being hidden by notch */
    .content {
        padding-top: calc(16px + var(--safe-top)) !important;
        padding-left: calc(16px + var(--safe-left)) !important;
        padding-right: calc(16px + var(--safe-right)) !important;
        padding-bottom: calc(16px + var(--safe-bottom)) !important;
    }

    /* Filter bar / controls - add margins */
    .filter-bar, .controls-bar, .search-bar {
        margin: 12px !important;
        padding: 12px !important;
        width: calc(100% - 24px) !important;
    }

    /* Ensure dropdowns don't get cut off */
    .dropdown-menu, .dropdown-content {
        max-height: 50vh !important;
        overflow-y: auto !important;
        margin: 8px !important;
        width: calc(100% - 16px) !important;
    }

    /* Add margin to any list items or cards */
    li, .card, .item {
        margin-bottom: 8px !important;
    }
}

/* ===== TABLET OPTIMIZATIONS ===== */

@media (min-width: 769px) and (max-width: 1024px) {
    .leaflet-control-zoom {
        margin: 15px !important;
    }

    .country-selector {
        max-width: 400px !important;
    }
}

/* ===== LANDSCAPE MODE FIX ===== */

@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce header height in landscape on small screens */
    header, .navbar, [role="banner"] {
        min-height: 40px !important;
        max-height: 45px !important;
    }

    /* Adjust map to fit remaining space */
    #map {
        height: calc(100vh - 45px - var(--safe-bottom)) !important;
    }

    /* Compact zoom controls in landscape */
    .leaflet-control-zoom {
        margin: 5px !important;
    }

    /* Hide non-essential elements */
    .leaflet-control-attribution {
        display: none !important;
    }
}

/* ===== ULTRA-WIDE SCREENS ===== */

@media (min-width: 1450px) {
    /* Prevent excessive stretching */
    #map-wrapper, .map-container, main {
        max-width: 1440px !important;
        margin: 0 auto !important;
    }
}

/* ===== NOTCH/CUTOUT SUPPORT (iPhone 12+) ===== */

@media (min-height: 812px) and (orientation: portrait) {
    header, .navbar {
        padding-top: max(12px, env(safe-area-inset-top)) !important;
    }
}

/* ===== PERFORMANCE: Reduce repaints on mobile ===== */

@media (max-width: 768px) {
    /* Disable expensive animations on mobile */
    * {
        animation-duration: 0s !important;
        transition: none !important;
    }

    /* Keep only critical animations */
    .marker-icon-wrapper.active,
    .leaflet-popup {
        animation-duration: 0.2s !important;
        transition: opacity 0.2s ease-out !important;
    }

    /* Simplify hover states */
    button:hover, .btn:hover {
        background: inherit !important;
        box-shadow: none !important;
    }

    /* GPU acceleration for mobile */
    #map, .leaflet-marker, .leaflet-popup {
        transform: translateZ(0) !important;
        will-change: transform !important;
    }
}

/* ===== PREVENT SCROLL LOCK ===== */

html.no-scroll {
    position: fixed !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100vh !important;
}

html.no-scroll body {
    position: fixed !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100vh !important;
}

/* ===== PRINT STYLES ===== */

@media print {
    header, .navbar, .controls {
        display: none !important;
    }

    #map {
        height: 100vh !important;
    }
}