/* Ultra-performance map styles */

/* Force GPU acceleration */
.leaflet-container,
.leaflet-tile-pane,
.leaflet-marker-pane,
.leaflet-overlay-pane {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Ultra-light clusters with CSS containment */
.ultra-cluster {
    contain: layout style paint;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    font-weight: 600;
    color: white;
    font-size: 12px;
}

/* Optimize marker rendering */
.leaflet-marker-icon {
    contain: layout;
    will-change: transform;
}

/* Remove expensive shadows on zoom */
.leaflet-zoom-animated .leaflet-marker-shadow {
    display: none !important;
}

/* Virtual scrolling container */
.virtual-marker-container {
    contain: strict;
    overflow: hidden;
    pointer-events: none;
}

.virtual-marker-container .marker {
    pointer-events: auto;
}

/* Instant hover feedback */
.leaflet-interactive:hover {
    transform: scale(1.1);
    transition: transform 0.1s;
}

/* Remove animations during pan for 60fps */
.leaflet-pan-anim .leaflet-tile,
.leaflet-zoom-anim .leaflet-zoom-animated {
    transition: none !important;
}

/* Ultra-compact markers */
.ultra-marker {
    width: 6px !important;
    height: 6px !important;
    margin-left: -3px !important;
    margin-top: -3px !important;
    background: #ef4444;
    border: 1px solid white;
    border-radius: 50%;
    contain: strict;
}

/* Loading skeleton with immediate feedback */
.map-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: loading 1s ease-in-out infinite;
    z-index: 1000;
    pointer-events: none;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Performance metrics overlay */
.perf-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: #0f0;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    padding: 5px;
    border-radius: 3px;
    z-index: 2000;
    pointer-events: none;
}

.perf-overlay .metric {
    display: flex;
    justify-content: space-between;
    min-width: 150px;
}

/* Reduce reflows with CSS Grid */
.marker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    contain: layout;
}

/* Hardware-accelerated transitions */
.hw-accelerated {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* Optimize touch interactions */
.leaflet-touch .leaflet-marker-icon {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Reduce paint areas */
.leaflet-pane > * {
    contain: paint;
}

/* Instant visual feedback */
.leaflet-clickable {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* Memory-efficient shadows */
.optimized-shadow {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* Batch render hints */
.batch-render {
    contain: layout style paint size;
    content-visibility: auto;
}