/*
 * Map tab: the satellite NO2 panel and the pollutant filter stacked on the right.
 * Both panels share the look defined in no2_overlay.css. Dash loads assets/*.css automatically.
 */
.map-panels {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;
    width: 300px;
    max-width: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.map-panels .no2-panel {
    position: static;
    width: auto;
    max-width: none;
}

/* pollutant list: one per line, with a comfortable click target */
.pf-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
}
.pf-list label {
    display: flex !important;            /* Dash sets an inline display on each label */
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}
.pf-list label:hover { background: #F3F6F8; }
.pf-list input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #1F5FA8;
}