/* Statistics - Filter bar: year / month / quarter custom selects, divider */

html[data-page=statistics] .section__filterDropdown .c-selectNative,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__trigger {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.6px
}

html[data-page=statistics] .section__filterDropdown .c-selectNative,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__trigger {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.6px
}

html[data-page=statistics] .section__filterDropdown .c-selectNative,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__trigger {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.6px
}

html[data-page=statistics] .section__filterDropdown .c-selectNative,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__trigger {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.6px
}

html[data-page=statistics] .section__filterDropdown .c-selectNative,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__trigger {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.6px
}

html[data-page=statistics] .section__filterDropdown .c-selectNative,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__trigger {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.6px
}

html[data-page=statistics] .section__filterDropdown .c-selectNative,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__trigger {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.6px
}

html[data-page=statistics] .section__filterBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 25px;
    position: relative;
    z-index: 2;
}

html[data-page=statistics] .section__filterDropdowns {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 2;
}

html[data-page=statistics] .section__filterDivider {
    display: none;
}

@media(max-width: 1023.98px) {
    html[data-page=statistics] .section__filterBar {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-top: 20px;
        position: relative;
        z-index: 5;
    }

    html[data-page=statistics] .section__filterDropdowns {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        height: auto;
        /* never wider than the section - the pills scroll inside the row instead of widening the page */
        width: 100%;
        /* full-bleed from the centered .section (max 924px): --leftMargin (20px) is wrong near 1024px */
        /* margin-left: calc(50% - var(--viewportWidth, 100vw) / 2); */
        /* width: var(--viewportWidth, 100vw); */
        /* padding: 0 20px; */
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        position: relative;
        z-index: 5;
    }



    html[data-page=statistics] .section__filterDropdowns::-webkit-scrollbar {
        display: none;
    }

    html[data-page=statistics] .section__filterDivider {
        display: block;
        width: 100%;
        height: 1px;
        background-color: #E8E8E8;
        margin: 20px 0;
        border: none;
    }

    html[data-page=statistics] .section__filterDropdowns + .c-exportBtn {
        margin-top: 15px;
    }
}

/* edge-to-edge scrolling row once the section has side gutters (below the 924px section width).
   Note: the unit is required - "max-width: 923.98" without px is an invalid query and never applies. */
@media(max-width: 923.98px) {
    html[data-page=statistics] .section__filterDropdowns {
        margin-left: calc(50% - var(--viewportWidth, 100vw) / 2);
        width: var(--viewportWidth, 100vw);
        padding: 0 20px;
    }
}

html[data-page=statistics] .section__filterDropdown {
    pointer-events: none;
    width: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

/* Explicit pointer-events for interactive select descendants */
html[data-page=statistics] .section__filterDropdown .c-selectNative,
html[data-page=statistics] .section__filterDropdown .c-selectCustom,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__trigger,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__options,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__optionsInner,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__option,
html[data-page=statistics] .section__filterDropdown .c-multiselect__trigger,
html[data-page=statistics] .section__filterDropdown .c-multiselect__options,
html[data-page=statistics] .section__filterDropdown .c-viewToggle,
html[data-page=statistics] .section__filterDropdown .c-viewToggle__btn {
    pointer-events: auto !important;
}

/* Open dropdown sits above wrapped siblings (view toggle) and the export row / graphs */
html[data-page=statistics] .section__filterDropdown:has(.c-selectCustom.isActive),
html[data-page=statistics] .section__filterDropdown.is-dropdownOpen {
    z-index: 100 !important;
}

html[data-page=statistics] .section__filterDropdowns:has(.c-selectCustom.isActive),
html[data-page=statistics] .section__filterDropdowns.is-dropdownOpen {
    z-index: 100 !important;
    overflow: visible !important;
    /* the open list may hang below the row, but pills scrolled out of view must not
       stick past the screen edge (that made the whole page scroll sideways on mobile) */
    overflow-x: clip !important;
}

html[data-page=statistics] .section__filterBar:has(.c-selectCustom.isActive),
html[data-page=statistics] .section__filterBar.is-dropdownOpen {
    z-index: 100 !important;
    overflow: visible !important;
}

html[data-page=statistics] .c-selectCustom__options {
    z-index: 100 !important;
}

html[data-page=statistics] .section__filterDropdown .c-selectWrapper {
    margin-top: 0;
    position: relative;
}

html[data-page=statistics] .section__filterDropdown .c-selectNative,
html[data-page=statistics] .section__filterDropdown .c-selectCustom,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__trigger {
    width: 100%;
    height: 45px;
}

html[data-page=statistics] .section__filterDropdown .c-selectNative,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__trigger {
    border-radius: 40px;
    border: 1px solid #1e1e1c;
    padding: 0 20px;
    display: inline-flex;
    gap: 10px;
    text-transform: capitalize;
}

html[data-page=statistics] .section__filterDropdown .c-selectNative {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0 !important;
    pointer-events: none !important;
}

html[data-page=statistics] .section__filterDropdown .c-selectCustom {
    display: block !important;
    position: relative;
    pointer-events: auto !important;
}

html[data-page=statistics] .section__filterDropdown .c-selectCustom__trigger {
    position: static;
    cursor: pointer !important;
    user-select: none;
    background-color: #fff;
    pointer-events: auto !important;
}

html[data-page=statistics] .section__filterDropdown .c-selectNative {
    padding-right: 59px;
    background-position: calc(100% - 30px) 11.5px;
}

html[data-page=statistics] .section__filterDropdown .c-selectCustom__options {
    /* min-width: calc(100% + 10px); */
    padding: 0;
    top: calc(100% + 10px);
    z-index: 100 !important;
    border-radius: 15px;
    border: 1px solid #dadada;
    background-color: #fff !important;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    padding-right: 0px;
}

html[data-page=statistics] .section__filterDropdown .c-selectCustom__optionsInner {
    padding-top: 10px;
    max-height: 184px;
    overflow-y: auto
}

html[data-page=statistics] .section__filterDropdown .c-selectCustom__optionsInner::-webkit-scrollbar {
    width: 4px
}

html[data-page=statistics] .section__filterDropdown .c-selectCustom__optionsInner::-webkit-scrollbar-track {
    margin-top: 20px;
    margin-bottom: 20px;
    background: transparent
}

html[data-page=statistics] .section__filterDropdown .c-selectCustom__optionsInner::-webkit-scrollbar-thumb {
    background: #cfcfcf;
    border-radius: 10px
}

html[data-page=statistics] .section__filterDropdown .c-selectCustom__option {
    padding: 10px 20px;
    text-transform: capitalize
}

html[data-page=statistics] .section__filterDropdown .c-selectCustom__option.isHover,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__option:hover,
html[data-page=statistics] .section__filterDropdown .c-selectCustom__option.isActive {
    font-weight: 400
}

html[data-page=statistics] .c-selectCustom__option:hover {
    background-color: #f9f9f9
}

/* Disabled state for filter dropdowns during timeline playback */
html[data-page=statistics] .section__filterDropdowns.is-disabled,
.section__filterDropdowns.is-disabled {
    /* row keeps pointer events so the not-allowed cursor shows; its children are switched off below */
    pointer-events: auto !important;
    opacity: 0.55;
    cursor: not-allowed !important;
    transition: opacity 0.3s ease;
}

/* select triggers and the volume/value toggle set pointer-events: auto !important on
   themselves, which beats the parent's none - switch every descendant off while playing */
html[data-page=statistics] .section__filterDropdowns.is-disabled * {
    pointer-events: none !important;
}

/* Central Unit & Year lists keep the standard 184px scroll height matching all other graph dropdown filters */
html[data-page=statistics] .section__filterDropdown.js-yearSelect .c-selectCustom__optionsInner,
html[data-page=statistics] #centralUnit__yearSelect .c-selectCustom__optionsInner {
    max-height: 184px;
    overflow-y: auto;
}