/* 
 * map.css - Map-specific styling
 * Styles for map components, control panels, and map-related widgets
 */

@import 'variables.css';

/* Map Container */
.map-container {
    position: relative;
}

/* Control Panels - Shared Styles */
.control-panel {
    position: absolute;
    left: 0;
    right: 0;
    z-index: var(--z-index-controls);
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.control-panel > * {
    pointer-events: auto;
}

/* Top Control Panel */
.top-control-panel {
    top: var(--spacing-lg);
    align-items: center;
    display: grid;
    grid-template-columns: auto 1fr auto;
}

/* Bottom Control Panel */
.bottom-control-panel {
    bottom: var(--spacing-md);
    align-items: flex-end;
}

/* Map Widget Base Style */
.map-widget {
    background: var(--transparency-light);
    box-shadow: var(--shadow-standard);
    border-radius: var(--border-radius-standard);
    z-index: var(--z-index-overlay);
    overflow: hidden;
}

/* Specific Widget Containers */
.legend-container {
    width: 200px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.color-mode-container {
    width: 200px;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.year-slider-container {
    flex: 1;
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

.filters-container {
    width: 200px;
}

/* Grid Layout Columns */
.left-column {
    grid-column: 1;
    z-index: var(--z-index-controls);
}

.center-column {
    grid-column: 2;
    z-index: var(--z-index-controls);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.right-column {
    grid-column: 3;
    z-index: var(--z-index-controls);
    text-align: right;
}