/* =====================================================
   MAP TAB - Global Map, Heatmap, Routes
   Mobile-first responsive with centralized colors
   ===================================================== */

#map-tab.active {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
}

@media (min-width: 768px) {
    #map-tab.active {
        padding: var(--spacing-md);
    }
}

.map-controls {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
    align-items: center;
}

.map-controls .filter-group {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

#global-map {
    width: 100%;
    height: 450px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
    #global-map {
        height: 600px;
    }
}

@media (min-width: 1024px) {
    #global-map {
        height: 720px;
    }
}

.map-toolbar {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
}

.map-toolbar button {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-dark);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.map-toolbar button:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.map-toolbar button.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}