/* ========================================
   LEAFLET CONSOLIDATED CSS
   Single source of truth for all Leaflet map customizations
   Created: January 2025
   ======================================== */

/* ===== 1. CORE LEAFLET OVERRIDES ===== */
/* Base container and tile fixes */

.leaflet-container {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: #f8f8f8;
    outline: 0;
    /* Allow Leaflet to handle all touch gestures on the map */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Fix tile rendering on mobile without breaking transforms 
   Research-backed: Leaflet.js docs emphasize preserving 3D transforms for tile positioning */
.leaflet-tile-container {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Critical: Preserve 3D transforms for proper tile positioning - Leaflet requirement */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /* Research finding: Individual tile overlap more effective than container margins */
}

.leaflet-tile {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Conservative overlap - prioritize readability */
    margin: 0 !important;
    outline: none !important;
    border: 0 !important;
    /* Natural image rendering */
    image-rendering: auto !important;
    /* GPU acceleration without scaling */
    transform: translateZ(0);
}

/* Scale container slightly to prevent gaps on high-DPI displays */
.leaflet-tile-pane {
    /* REMOVED: transform: scale() - interferes with Leaflet's positioning */
    transform-origin: 0 0;
}

/* REMOVED: High-DPI margin exception - use consistent -1px for all displays */
/* This prevents conflicting margins that create thick lines */

/* ===== 2. CUSTOM MARKERS ===== */
/* All marker styles and category colors */

/* Fix for circular markers - target Leaflet wrapper */
.leaflet-marker-icon {
    border-radius: 50% !important;
    overflow: hidden !important;
}

.leaflet-marker-icon.custom-marker-container {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    /* Remove any default margins */
    margin-left: -16px !important;
    margin-top: -16px !important;
}

.custom-marker, .marker-inner {
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    border: 3px solid white;
    position: relative;
    font-size: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    touch-action: manipulation;
}

.custom-marker:hover, .marker-inner:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 1000 !important;
}

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

/* Ensure touch targets meet mobile standards */
@media (max-width: 768px) {
    .leaflet-marker-icon.custom-marker-container {
        width: 44px !important;
        height: 44px !important;
        margin-left: -22px !important;
        margin-top: -22px !important;
    }
    
    .custom-marker, .marker-inner {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px;
    }
}

/* Category-specific marker colors and animations */
.category-castle .custom-marker {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    animation: castle-pulse 3s infinite;
}

@keyframes castle-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3); }
    50% { box-shadow: 0 2px 16px rgba(139, 92, 246, 0.6); }
}

.category-museum .custom-marker,
.category-zoo .custom-marker {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    animation: blue-pulse 3s infinite;
}

@keyframes blue-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 2px 16px rgba(59, 130, 246, 0.6); }
}

/* ===== 3. POPUPS ===== */
/* Popup styling and mobile optimizations */

.leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    border: none !important;
    padding: 0 !important;
    background: white;
    font-family: inherit;
    /* Enable smooth scrolling for popup content */
    touch-action: pan-y pinch-zoom;
}

.leaflet-popup-content {
    margin: 0;
    max-width: 320px;
    font-family: inherit;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    font-size: 14px;
    line-height: 1.4;
}

.leaflet-popup-tip-container {
    margin-top: -1px;
}

.leaflet-popup-tip {
    background: white;
    box-shadow: none;
}

/* Mobile popup optimizations */
@media (max-width: 768px) {
    .leaflet-popup-content-wrapper {
        max-width: 280px;
    }
    
    .leaflet-popup-content {
        max-width: 280px;
        font-size: 13px;
    }
}

/* ===== 4. CONTROLS ===== */
/* Zoom controls and attributions */

.leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.leaflet-control-zoom a {
    background: white;
    color: #333;
    border: none;
    transition: all 0.2s ease;
}

.leaflet-control-zoom a:hover {
    background: #f5f5f5;
}

/* Mobile control sizing */
@media (max-width: 768px) {
    .leaflet-control-zoom {
        font-size: 18px;
    }
    
    .leaflet-control-zoom a {
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 20px;
    }
}

/* Attribution styling */
.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 5px;
    font-size: 10px;
}

/* ===== 5. MAP LEGEND ===== */
/* Legend positioning and responsive sizing */

.map-legend {
    position: absolute;
    top: 10px;
    right: 10px;
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    font-size: 0.9rem;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 8px;
}

/* Mobile legend optimization */
@media (max-width: 768px) {
    .map-legend {
        top: 60px;
        right: 5px;
        max-width: 180px;
        font-size: 0.8rem;
        padding: 0.75rem;
    }
}

/* Mobile portrait optimization - aggressive size reduction */
@media (max-width: 480px) and (orientation: portrait) {
    .map-legend {
        /* Reduce size dramatically */
        max-width: 100px !important;
        font-size: 0.65rem !important;
        padding: 0.4rem !important;
        
        /* Position in corner with minimal intrusion */
        top: 10px !important;
        right: 10px !important;
        
        /* Make semi-transparent to see map underneath */
        background: rgba(255, 255, 255, 0.9) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .legend-title {
        font-size: 0.7rem !important;
        margin-bottom: 0.3rem !important;
        font-weight: 600;
    }
    
    .legend-item {
        margin-bottom: 0.2rem !important;
        font-size: 0.6rem !important;
    }
    
    .legend-item span {
        font-size: 0.6rem !important;
    }
    
    .legend-color {
        width: 12px !important;
        height: 12px !important;
        margin-right: 4px !important;
    }
}

/* Standard mobile portrait for larger phones */
@media (max-width: 768px) and (orientation: portrait) {
    .map-legend {
        max-width: 110px !important;
        font-size: 0.7rem !important;
        padding: 0.5rem !important;
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    .legend-title {
        font-size: 0.8rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .legend-item {
        margin-bottom: 0.25rem !important;
    }
    
    .legend-color {
        width: 14px !important;
        height: 14px !important;
    }
}

/* Extra small screens get even more compact */
@media (max-width: 375px) and (orientation: portrait) {
    .map-legend {
        max-width: 90px !important;
        font-size: 0.6rem !important;
        padding: 0.3rem !important;
    }
    
    .legend-color {
        width: 10px !important;
        height: 10px !important;
    }
}

/* ===== 6. TOUCH OPTIMIZATIONS ===== */
/* Touch-action declarations and iOS fixes */

/* Cluster markers need touch targets too */
.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);
}

/* iOS Safari specific fixes */
@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 */
    }
}

/* ===== 7. MOBILE RESPONSIVE ===== */
/* Additional mobile viewport adjustments */

/* Prevent mobile bounce during map interaction */
.leaflet-container.leaflet-touch-drag {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Conservative high-DPI rendering */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .leaflet-container {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* No aggressive overlap on high-DPI - prioritize clarity */
    .leaflet-tile {
        margin: 0 !important;
    }
}

/* ===== 8. PERFORMANCE FIXES ===== */
/* Transform hacks and tile rendering optimizations */

/* Natural tile rendering - no forced background colors */
.leaflet-tile {
    /* Let tiles render naturally */
}

.leaflet-tile-loaded {
    opacity: 1;
}

/* Disable animations during map movement for better performance */
.leaflet-zoom-anim .leaflet-zoom-animated {
    will-change: transform;
}

/* Optimize marker rendering during zoom */
.leaflet-zoom-anim .leaflet-marker-icon {
    will-change: transform;
}

/* ===== 9. CRITICAL WARNINGS ===== */
/* DO NOT use transform: none on leaflet-tile or leaflet-tile-container
   This will break tile positioning as Leaflet uses transforms for tile placement */

/* DO NOT remove the touch-action: none from .leaflet-container
   This allows Leaflet to handle all touch gestures properly */

/* DO NOT change the margin: -1px on tiles without testing
   This prevents visible gaps between tiles on mobile devices */