/*
 * Analysis tab: filter card on the left, result cards on the right.
 * Colours: navy text #003366, action blue #1F5FA8, light lines #E3E9EE.
 * Dash loads every .css in assets/ automatically.
 */

.an-page {
    background: #F3F6F8;
    min-height: 100vh;
    padding: 96px 24px 48px;            /* top: room for the floating tab bar */
    color: #003366;
}
.an-heading,
.an-layout {
    max-width: 1280px;
    margin: 0 auto;
}
.an-heading { margin-bottom: 24px; }
.an-title {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}
.an-subtitle {
    margin: 4px 0 0;
    font-size: 15px;
    color: #4A6480;
}

/* two columns that stack on narrow screens */
.an-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}
.an-filters { flex: 1 1 260px; max-width: 300px; }
.an-results {
    flex: 999 1 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (max-width: 860px) {
    .an-filters { max-width: none; }
}

/* cards */
.an-card {
    background: #FFFFFF;
    border: 1px solid #E3E9EE;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.an-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.an-card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

/* filter fields */
.an-filters { gap: 20px; }
.an-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #4A6480;
}
.an-field-label { font-size: 13px; font-weight: 500; color: #4A6480; }
.an-dropdown { font-weight: 400; color: #003366; }
.an-dropdown .Select-control {
    border: 1px solid #CBD5DE;
    border-radius: 8px;
    min-height: 40px;
}
.an-dropdown .Select-value-label { color: #003366 !important; }

/* shared look for the radio-button groups: hide the dot, style the label */
.an-choice-grid label,
.an-segmented label {
    position: relative;
    display: flex !important;            /* Dash sets an inline display on each label */
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    user-select: none;
}
.an-choice-grid input,
.an-segmented input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* time range: 2 x 2 button grid */
.an-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
.an-choice-grid label {
    padding: 9px 0;
    border: 1px solid #CBD5DE;
    border-radius: 8px;
    background: #FFFFFF;
    color: #003366;
}
@media (hover: hover) {
    .an-choice-grid label:not(:has(input:checked)):hover { border-color: #1F5FA8; }
}
.an-choice-grid label:has(input:checked) {
    background: #003366;
    border-color: #003366;
    color: #FFFFFF;
    font-weight: 600;
}

/* segmented control: Current / Minimum / ... and Box plot / Violin / Histogram */
.an-segmented {
    display: flex;
    gap: 2px;
    background: #EEF2F5;
    border-radius: 8px;
    padding: 3px;
}
.an-segmented label {
    padding: 6px 14px;
    border-radius: 6px;
    color: #4A6480;
}
.an-segmented label:has(input:checked) {
    background: #FFFFFF;
    color: #003366;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 31, 61, 0.15);
}

/* keyboard focus stays visible on the hidden radio buttons */
.an-choice-grid label:has(input:focus-visible),
.an-segmented label:has(input:focus-visible) {
    outline: 2px solid #1F5FA8;
    outline-offset: 2px;
}

/* plain radio list: Hourly / Daily averages */
.an-radio {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.an-radio label {
    display: flex !important;            /* Dash sets an inline display on each label */
    margin: 0;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #003366;
    cursor: pointer;
}
.an-radio input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #1F5FA8;
}

.an-apply,
#apply-filters-button.an-apply {
    width: 100%;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 0;
    border: none;
    border-radius: 8px;
    background: #1F5FA8;
    color: #FFFFFF;
    cursor: pointer;
}
.an-apply:hover,
#apply-filters-button.an-apply:hover { background: #184C87; }
.an-apply:focus-visible { outline: 2px solid #003366; outline-offset: 2px; }

/* summary tiles */
.an-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.an-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid #E3E9EE;
    border-radius: 10px;
    padding: 14px;
}
.an-tile-label { font-size: 13px; color: #4A6480; }
.an-tile-value {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.an-tile-unit { font-size: 12px; color: #4A6480; }

/* chart grids inside the Time series and Distribution cards */
.an-charts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.an-chart {
    border: 1px solid #E3E9EE;
    border-radius: 10px;
    padding: 12px 12px 4px;
    min-width: 0;
}
.an-chart-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.an-empty {
    padding: 24px 0;
    text-align: center;
    font-size: 15px;
    color: #4A6480;
}

/* give the loading spinners room before results arrive */
#current-pollution-tiles:empty,
#time-series-plots:empty,
#statistical-plots:empty { min-height: 80px; }

/* Data Download tab while downloads are not open yet */
.dl-soon { max-width: 640px; }
.dl-soon-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #4A6480;
}