/* ===============================================
   MAPS.CSS - Leaflet Map Styling
   Integrates Leaflet components with platform theme
   =============================================== */

/* Map Container - Integrates with section content */
.map-container {
    /* Container inherits from section content */
    background: var(--bg-white);
    /* Leaflet will inject its own elements */
}

/* Ensure Leaflet controls use platform styling */
.leaflet-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: var(--text-sm) !important;
}

/* Leaflet Popup - Match platform styling */
.leaflet-popup-content-wrapper {
    background: var(--bg-white) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 0 !important;
}

.leaflet-popup-content {
    margin: var(--space-md) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: var(--text-sm) !important;
    color: var(--text-body) !important;
    line-height: var(--line-height-normal) !important;
}

.leaflet-popup-tip {
    background: var(--bg-white) !important;
    border: 1px solid var(--border-light) !important;
}

/* Leaflet Zoom Controls - Match platform buttons */
.leaflet-control-zoom {
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm) !important;
}

.leaflet-control-zoom a {
    background: var(--bg-white) !important;
    color: var(--text-body) !important;
    border-bottom: 1px solid var(--border-light) !important;
    font-size: 18px !important;
    line-height: 30px !important;
    width: 30px !important;
    height: 30px !important;
    transition: all 0.2s var(--ease-out) !important;
}

.leaflet-control-zoom a:hover {
    background: var(--bg-secondary) !important;
    color: var(--color-primary) !important;
}

.leaflet-control-zoom a:last-child {
    border-bottom: none !important;
}

/* Leaflet Attribution - Subtle styling */
.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.9) !important;
    font-size: 10px !important;
    color: var(--text-muted) !important;
    padding: 2px 6px !important;
    border-radius: var(--radius-sm) !important;
}

.leaflet-control-attribution a {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

.leaflet-control-attribution a:hover {
    text-decoration: underline !important;
}

/* Custom Marker Icons */
.depot-marker,
.vehicle-marker,
.stop-marker {
    background: transparent !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Marker hover effects */
.leaflet-marker-icon:hover {
    z-index: 1000 !important;
    transform: scale(1.1);
    transition: transform 0.2s var(--ease-out);
}

/* Popup close button styling */
.leaflet-popup-close-button {
    color: var(--text-muted) !important;
    font-size: 18px !important;
    padding: 4px 8px !important;
    transition: color 0.2s var(--ease-out) !important;
}

.leaflet-popup-close-button:hover {
    color: var(--text-primary) !important;
    background: transparent !important;
}

/* Loading state for maps */
.map-container.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
}

.map-container.loading::after {
    content: "Loading map...";
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .leaflet-popup-content {
        margin: var(--space-sm) !important;
        font-size: var(--text-xs) !important;
    }
    
    .leaflet-control-zoom a {
        width: 26px !important;
        height: 26px !important;
        line-height: 26px !important;
        font-size: 16px !important;
    }
}