/* Filters - label and container styles shared by the chart controls (see 02-chart-card.css for the card layout).
   Every control has its label beside it, centred on it, in one text style, and the rows start at the left edge of
   the card title. The year slider, which spans the card, keeps its label above. */

.filter-label, .dropdown-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-700);
    letter-spacing: var(--tracking-body);
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
    min-width: fit-content;
}

/* Filter container and radio buttons */
.filter-container {
    background: transparent;
    padding: 0;
    min-width: 0;
    margin-bottom: 0rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
}
.filter-control-group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
/* A label placed directly in the row sits 10px from its control, like the labels inside a group */
.filter-container > .filter-label { margin-right: calc(10px - var(--space-5)); }
.filter-container:has(> .dash-slider-container) { flex-direction: column; align-items: stretch; gap: var(--space-2); }

/* Special filter container for metric selector with button on right */
.filter-container-with-button {
    background: transparent;
    padding: 0;
    border-radius: 0.5rem;
    min-width: 300px;
    margin-bottom: 0rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Cities Growth specific styles */
.cities-growth-metric-container {
    background: transparent;
    padding: 0;
    border-radius: 0.5rem;
    min-width: 300px;
    margin-bottom: 0rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cities-growth-metric-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Dropdowns and checklists inside a chart card use the same text size as the segmented controls */
.chart-container button.dash-dropdown, .chart-container .dash-dropdown-content { font-size: var(--text-sm); }
.chart-container button.dash-dropdown { min-height: 34px; }
.chart-container .dash-checklist { display: inline-flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.chart-container .dash-checklist .dash-options-list-option { margin: 0 !important; font-size: var(--text-sm); }