/* Mobile Leaflet Fixes CSS */
/* Comprehensive mobile map UX improvements */
/* CRITICAL: DO NOT use transform: none on leaflet-tile or leaflet-tile-container
   This will break tile positioning as Leaflet uses transforms for tile placement */

/* ===== MARKER FIXES ===== */
/* CRITICAL FIX: Target the Leaflet wrapper that has border-radius: 0px */
.leaflet-marker-icon {
    border-radius: 50% !important;
    overflow: hidden !important;
}

/* Also ensure the custom marker container inherits rounded corners */
.leaflet-marker-icon.custom-marker-container {
    border-radius: 50% !important;
    overflow: hidden !important;
}

/* Fix square markers - target correct CSS classes */
.custom-marker {
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    touch-action: manipulation;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.custom-marker:active {
    transform: scale(0.95) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
}

/* Ensure marker icons are properly sized on mobile */
@media (max-width: 768px) {
    .custom-marker {
        min-width: 44px !important;
        min-height: 44px !important;
        /* Ensure markers are clickable */
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 1200 !important;
    }
    
    /* Also ensure the wrapper is properly sized */
    .leaflet-marker-icon {
        min-width: 44px !important;
        min-height: 44px !important;
        /* Critical: Ensure markers can be clicked */
        pointer-events: auto !important;
        cursor: pointer !important;
        /* Prevent z-index conflicts */
        z-index: 1200 !important;
        position: relative !important;
    }
    
    /* Fix for custom marker containers that might be blocking clicks */
    .leaflet-marker-icon.custom-marker-container {
        pointer-events: auto !important;
        cursor: pointer !important;
        /* Ensure child elements don't block clicks */
    }
    
    .leaflet-marker-icon.custom-marker-container * {
        pointer-events: none !important;
    }
}

/* ===== LEGEND OPTIMIZATION ===== */
/* Reduce legend size in mobile portrait mode */
@media (max-width: 768px) and (orientation: portrait) {
    .map-legend {
        top: 10px !important;
        right: 5px !important;
        max-width: 120px !important;
        font-size: 0.65rem !important;
        padding: 0.5rem !important;
    }
    
    .legend-header {
        padding: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .legend-title {
        font-size: 0.7rem !important;
    }
    
    .legend-content {
        padding: 0.25rem !important;
    }
    
    .legend-item {
        margin-bottom: 0.15rem !important;
        padding: 0.15rem !important;
        gap: 0.25rem !important;
    }
    
    .legend-item span,
    .legend-label {
        font-size: 0.6rem !important;
        line-height: 1.2 !important;
    }
    
    .legend-marker {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.7rem !important;
        min-width: 20px !important;
    }
    
    /* Hide clusters section on very small screens */
    .legend-clusters {
        display: none !important;
    }
}

/* Even smaller for very narrow portrait screens */
@media (max-width: 375px) and (orientation: portrait) {
    .map-legend {
        max-width: 100px !important;
        font-size: 0.6rem !important;
    }
    
    .legend-title {
        font-size: 0.65rem !important;
    }
    
    .legend-item span,
    .legend-label {
        font-size: 0.55rem !important;
    }
}

/* ===== TILE RENDERING FIXES ===== */
/* Prevent visible tile boundaries during loading */
.leaflet-container {
    touch-action: none; /* Allow Leaflet to handle all touch gestures */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Fix tile rendering on mobile without breaking transforms */
.leaflet-tile-container {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Preserve 3D transforms for proper tile positioning */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* CRITICAL FIX: Prevent grid lines between tiles */
.leaflet-tile {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Remove the outline that can cause visible seams */
    outline: none !important;
    /* Aggressive tile overlap to eliminate white lines */
    margin: -2px !important;
    /* Use auto rendering to let browser decide */
    image-rendering: auto !important;
    /* Prevent any borders */
    border: none !important;
}

/* Additional fix for high-DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .leaflet-tile {
        /* Force smooth rendering on retina displays */
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
        /* Ensure no subpixel gaps -- REMOVED transform: translateZ(0) scale(1.0001); */
    }
}

/* Fix for tile container to prevent gaps -- REMOVED scaling transform
   Using negative margin overlap instead for better mobile compatibility */
/* .leaflet-tile-pane {
    -- REMOVED: transform: scale(1.001);
    -- REMOVED: transform-origin: 0 0;
} */

/* ===== MOBILE CONTROLS ===== */
/* Improved zoom controls */
@media (max-width: 768px) {
    .leaflet-control-zoom {
        font-size: 18px;
    }
    
    .leaflet-control-zoom a {
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 20px;
    }
}

/* ===== IOS SAFARI SPECIFIC ===== */
@supports (-webkit-touch-callout: none) {
    .leaflet-container {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    
    /* iOS-specific tile rendering fixes */
    .leaflet-tile-container,
    .leaflet-tile {
        /* Fix iOS rendering issues without breaking transforms */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-perspective: 1000;
        perspective: 1000;
    }
    
    /* Prevent tile flicker on iOS */
    .leaflet-tile {
        will-change: auto; /* Let browser optimize */
    }
}

/* ===== CLUSTER IMPROVEMENTS ===== */
.leaflet-cluster-anim .leaflet-marker-icon {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
    transition: transform 0.1s ease;
}

.leaflet-cluster-anim .leaflet-marker-icon:active {
    transform: scale(0.95);
}

/* ===== POPUP ENHANCEMENTS ===== */
.leaflet-popup-content-wrapper {
    touch-action: manipulation;
    border-radius: 12px !important;
}

.leaflet-popup-content {
    font-size: 14px;
    line-height: 1.4;
}