/* =========================================================
   DATA EXPLORER
   ========================================================= */

.data-explorer-page {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    padding-bottom: 1.5rem;
}


/* =========================================================
   Intro
   ========================================================= */

.data-explorer-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.8rem;
}


.data-explorer-intro__eyebrow,
.data-explorer-context__eyebrow {
    margin-bottom: 0.14rem;

    color: var(
        --dashboard-text-soft,
        #98a2b3
    );

    font-size: 0.46rem;
    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.data-explorer-intro__title {
    margin: 0;

    color: var(
        --dashboard-text,
        #253142
    );

    font-size: 1.35rem;
    font-weight: 800;
}


.data-explorer-intro__description {
    max-width: 650px;

    margin:
        0.3rem
        0
        0;

    color: var(
        --dashboard-text-muted,
        #667085
    );

    font-size: 0.58rem;
    line-height: 1.55;
}


.data-explorer-intro__dashboard-link {
    flex: 0 0 auto;

    padding:
        0.42rem
        0.58rem;

    color: var(
        --dashboard-text-muted,
        #667085
    );

    background: var(
        --dashboard-surface,
        #ffffff
    );

    border: 1px solid
        var(
            --dashboard-border,
            #dfe5ec
        );

    border-radius: 0.42rem;

    font-size: 0.49rem;
    font-weight: 750;

    text-decoration: none;
}


.data-explorer-intro__dashboard-link:hover {
    color: var(
        --dashboard-text,
        #253142
    );

    background: var(
        --dashboard-background,
        #f6f8fa
    );
}


/* =========================================================
   Controls
   ========================================================= */

.data-explorer-controls {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;

    gap: 0.65rem;

    padding: 0.72rem;

    background: var(
        --dashboard-surface,
        #ffffff
    );

    border: 1px solid
        var(
            --dashboard-border,
            #dfe5ec
        );

    border-radius: 0.6rem;
}


.data-explorer-control-group {
    display: grid;

    gap: 0.27rem;

    min-width: 0;
}


.data-explorer-control-label {
    color: var(
        --dashboard-text-muted,
        #667085
    );

    font-size: 0.43rem;
    font-weight: 750;
}


/* =========================================================
   Segmented Controls
   ========================================================= */

.data-explorer-segmented {
    display: inline-flex;

    min-height: 34px;

    padding: 2px;

    background: var(
        --dashboard-background,
        #f6f8fa
    );

    border: 1px solid
        var(
            --dashboard-border,
            #dfe5ec
        );

    border-radius: 0.4rem;
}


.data-explorer-segmented__button {
    min-width: 70px;

    padding:
        0
        0.52rem;

    color: var(
        --dashboard-text-muted,
        #667085
    );

    background: transparent;

    border: 0;
    border-radius: 0.3rem;

    cursor: pointer;

    font: inherit;
    font-size: 0.47rem;
    font-weight: 750;
}


.data-explorer-segmented__button:hover {
    background: var(
        --dashboard-surface,
        #ffffff
    );
}


.data-explorer-segmented__button.is-active {
    color: var(
        --dashboard-text,
        #253142
    );

    background: var(
        --dashboard-surface,
        #ffffff
    );

    box-shadow:
        0 1px 2px
        rgba(15, 23, 42, 0.1);
}


/* =========================================================
   Period
   ========================================================= */

.data-explorer-period {
    display: flex;
    align-items: flex-end;

    gap: 0.4rem;
}


.data-explorer-period__vs {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 34px;

    color: var(
        --dashboard-text-soft,
        #98a2b3
    );

    font-size: 0.44rem;
    font-weight: 800;
}


.data-explorer-period__readonly {
    display: flex;
    align-items: center;

    min-width: 120px;
    height: 34px;

    padding:
        0
        0.52rem;

    color: var(
        --dashboard-text,
        #253142
    );

    background: var(
        --dashboard-surface,
        #ffffff
    );

    border: 1px solid
        var(
            --dashboard-border,
            #dfe5ec
        );

    border-radius: 0.4rem;

    font-size: 0.49rem;
    font-weight: 700;
}


/* =========================================================
   Selects
   ========================================================= */

.data-explorer-select {
    min-width: 120px;
    height: 34px;

    padding:
        0
        0.52rem;

    color: var(
        --dashboard-text,
        #253142
    );

    background: var(
        --dashboard-surface,
        #ffffff
    );

    border: 1px solid
        var(
            --dashboard-border,
            #dfe5ec
        );

    border-radius: 0.4rem;

    outline: none;

    font: inherit;
    font-size: 0.49rem;
    font-weight: 700;
}


/* =========================================================
   Context
   ========================================================= */

.data-explorer-context {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.7rem;

    margin-top: 0.75rem;

    padding:
        0.6rem
        0.7rem;

    background: var(
        --dashboard-background,
        #f7f9fb
    );

    border: 1px solid
        var(
            --dashboard-border,
            #e5e9ef
        );

    border-radius: 0.5rem;
}


.data-explorer-context__title {
    color: var(
        --dashboard-text,
        #253142
    );

    font-size: 0.56rem;
    font-weight: 800;
}


.data-explorer-context__count {
    color: var(
        --dashboard-text-muted,
        #667085
    );

    font-size: 0.48rem;
    font-weight: 750;

    white-space: nowrap;
}


/* =========================================================
   Toolbar
   ========================================================= */

.data-explorer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.6rem;

    margin:
        0.65rem
        0;
}


.data-explorer-search {
    display: flex;
    align-items: center;

    gap: 0.4rem;

    width: min(
        100%,
        340px
    );

    height: 34px;

    padding:
        0
        0.55rem;

    color: var(
        --dashboard-text-soft,
        #98a2b3
    );

    background: var(
        --dashboard-surface,
        #ffffff
    );

    border: 1px solid
        var(
            --dashboard-border,
            #dfe5ec
        );

    border-radius: 0.42rem;
}


.data-explorer-search svg {
    flex: 0 0 14px;

    width: 14px;
    height: 14px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
}


.data-explorer-search input {
    width: 100%;

    padding: 0;

    color: var(
        --dashboard-text,
        #253142
    );

    background: transparent;

    border: 0;
    outline: none;

    font: inherit;
    font-size: 0.5rem;
}


.data-explorer-reset {
    padding:
        0.4rem
        0.55rem;

    color: var(
        --dashboard-text-muted,
        #667085
    );

    background: transparent;

    border: 1px solid
        var(
            --dashboard-border,
            #dfe5ec
        );

    border-radius: 0.4rem;

    cursor: pointer;

    font: inherit;
    font-size: 0.47rem;
    font-weight: 750;
}


/* =========================================================
   Compare Column Focus
   ========================================================= */

.data-explorer-column-focus {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.75rem;

    margin-bottom: 0.6rem;

    padding:
        0.55rem
        0.65rem;

    background: var(
        --dashboard-background,
        #f7f9fb
    );

    border: 1px solid
        var(
            --dashboard-border,
            #e5e9ef
        );

    border-radius: 0.5rem;
}


.data-explorer-column-focus[hidden] {
    display: none !important;
}


.data-explorer-column-focus__intro {
    display: grid;

    gap: 0.08rem;

    flex: 0 0 auto;
}


.data-explorer-column-focus__intro strong {
    color: var(
        --dashboard-text,
        #253142
    );

    font-size: 0.5rem;
    font-weight: 800;
}


.data-explorer-column-focus__intro span {
    color: var(
        --dashboard-text-muted,
        #667085
    );

    font-size: 0.4rem;
}


.data-explorer-column-focus__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.3rem;
}


.data-explorer-column-focus__button {
    min-height: 30px;

    padding:
        0
        0.5rem;

    color: var(
        --dashboard-text-muted,
        #667085
    );

    background: var(
        --dashboard-surface,
        #ffffff
    );

    border: 1px solid
        var(
            --dashboard-border,
            #dfe5ec
        );

    border-radius: 0.34rem;

    cursor: pointer;

    font: inherit;
    font-size: 0.43rem;
    font-weight: 750;

    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease;
}


.data-explorer-column-focus__button:hover {
    color: var(
        --dashboard-text,
        #253142
    );

    background: var(
        --dashboard-background,
        #f2f5f8
    );
}


/* Generic Active */

.data-explorer-column-focus__button.is-active {
    color: #3567d4;

    background: #edf2ff;

    border-color: #b9c9f4;
}


/* JLP Active */

.data-explorer-column-focus__button.is-active[
    data-explorer-column="JLP"
] {
    color: #14704c;

    background: #e5f5ed;

    border-color: #b6dfcb;
}


/* PNP Active */

.data-explorer-column-focus__button.is-active[
    data-explorer-column="PNP"
] {
    color: #b55719;

    background: #fff0e5;

    border-color: #f1c9aa;
}


/* =========================================================
   Table Card
   ========================================================= */

.data-explorer-table-card {
    min-width: 0;

    overflow: hidden;

    background: var(
        --dashboard-surface,
        #ffffff
    );

    border: 1px solid
        var(
            --dashboard-border,
            #dfe5ec
        );

    border-radius: 0.55rem;
}


.data-explorer-table-wrap {
    width: 100%;

    max-height: 620px;

    overflow: auto;
}


/* =========================================================
   Table
   ========================================================= */

.data-explorer-table {
    width: 100%;

    min-width: 980px;

    border-collapse: separate;
    border-spacing: 0;

    color: var(
        --dashboard-text,
        #253142
    );

    background: var(
        --dashboard-surface,
        #ffffff
    );

    font-size: 0.49rem;
}


.data-explorer-table th,
.data-explorer-table td {
    padding:
        0.52rem
        0.6rem;

    border-bottom: 1px solid
        var(
            --dashboard-border,
            #e5e9ef
        );

    text-align: right;

    white-space: nowrap;
}


.data-explorer-table th:first-child,
.data-explorer-table td:first-child {
    text-align: left;
}


.data-explorer-table thead th {
    position: sticky;

    top: 0;

    z-index: 3;

    color: var(
        --dashboard-text-muted,
        #667085
    );

    background: var(
        --dashboard-background,
        #f7f9fb
    );

    font-size: 0.41rem;
    font-weight: 800;
}


.data-explorer-table tbody tr:hover td {
    background: var(
        --dashboard-background,
        #f8fafc
    );
}


.data-explorer-table__identity {
    color: var(
        --dashboard-text,
        #253142
    );

    font-weight: 800;
}


.data-explorer-table__jlp {
    color: #16875d;

    font-weight: 750;
}


.data-explorer-table__pnp {
    color: #f47a23;

    font-weight: 750;
}


.data-explorer-table__source {
    color: var(
        --dashboard-text-muted,
        #667085
    );

    font-size: 0.42rem;
}


/* =========================================================
   Compare Year Headers
   ========================================================= */

.data-explorer-table__compare-years th {
    text-align: center;
}


.data-explorer-table__year-group {
    color: var(
        --dashboard-text,
        #253142
    ) !important;

    border-left: 2px solid
        var(
            --dashboard-border,
            #dfe5ec
        );

    font-size: 0.54rem !important;
    font-weight: 850 !important;

    text-align: center !important;
}


.data-explorer-table__compare-metrics th {
    top: 31px;

    text-align: right;
}


/*
 * Each metric header line is slightly lighter
 * than the year grouping above it.
 */

.data-explorer-table__compare-metrics th {
    background: var(
        --dashboard-background,
        #f7f9fb
    );

    font-size: 0.4rem;
}


/* =========================================================
   Sticky Main Geography

   Constituency / Electoral Division remains visible
   while horizontal scrolling through comparison data.
   ========================================================= */

.data-explorer-table__sticky-identity {
    position: sticky;

    left: 0;

    z-index: 5;

    min-width: 185px;
    max-width: 220px;

    text-align: left !important;

    background: var(
        --dashboard-surface,
        #ffffff
    ) !important;

    border-right: 1px solid
        var(
            --dashboard-border,
            #dfe5ec
        );
}


.data-explorer-table thead
.data-explorer-table__sticky-identity {
    z-index: 8;

    background: var(
        --dashboard-background,
        #f7f9fb
    ) !important;
}


.data-explorer-table tbody tr:hover
.data-explorer-table__sticky-identity {
    background: var(
        --dashboard-background,
        #f8fafc
    ) !important;
}


.data-explorer-table__geography-column {
    text-align: left !important;
}


/* =========================================================
   Empty
   ========================================================= */

.data-explorer-empty {
    padding: 2rem;

    color: var(
        --dashboard-text-muted,
        #667085
    );

    text-align: center;

    font-size: 0.52rem;
}


/* =========================================================
   Note
   ========================================================= */

.data-explorer-note {
    margin-top: 0.65rem;

    padding: 0.65rem;

    color: var(
        --dashboard-text-muted,
        #667085
    );

    background: var(
        --dashboard-background,
        #f7f9fb
    );

    border: 1px solid
        var(
            --dashboard-border,
            #e5e9ef
        );

    border-radius: 0.5rem;

    font-size: 0.44rem;
    line-height: 1.5;
}


/* =========================================================
   Dark Mode
   ========================================================= */

[data-theme="dark"]
.data-explorer-intro__title,

[data-theme="dark"]
.data-explorer-context__title,

[data-theme="dark"]
.data-explorer-table__identity {
    color: #f4f7fb;
}


[data-theme="dark"]
.data-explorer-controls,

[data-theme="dark"]
.data-explorer-table-card,

[data-theme="dark"]
.data-explorer-select,

[data-theme="dark"]
.data-explorer-period__readonly,

[data-theme="dark"]
.data-explorer-search,

[data-theme="dark"]
.data-explorer-intro__dashboard-link {
    color: #f4f7fb;

    background: #172033;

    border-color: #344054;
}


[data-theme="dark"]
.data-explorer-segmented {
    background: #111927;

    border-color: #344054;
}


[data-theme="dark"]
.data-explorer-segmented__button {
    color: #aab4c3;
}


[data-theme="dark"]
.data-explorer-segmented__button.is-active {
    color: #f4f7fb;

    background: #253146;
}


[data-theme="dark"]
.data-explorer-context,

[data-theme="dark"]
.data-explorer-note,

[data-theme="dark"]
.data-explorer-column-focus {
    background: #111927;

    border-color: #2d394c;
}


[data-theme="dark"]
.data-explorer-column-focus__intro strong {
    color: #f4f7fb;
}


[data-theme="dark"]
.data-explorer-column-focus__button {
    color: #aab4c3;

    background: #172033;

    border-color: #344054;
}


[data-theme="dark"]
.data-explorer-column-focus__button.is-active {
    color: #9ab1ef;

    background: #243558;

    border-color: #425b91;
}


[data-theme="dark"]
.data-explorer-column-focus__button.is-active[
    data-explorer-column="JLP"
] {
    color: #72d5ab;

    background: #183c31;

    border-color: #2d6551;
}


[data-theme="dark"]
.data-explorer-column-focus__button.is-active[
    data-explorer-column="PNP"
] {
    color: #f1ad7d;

    background: #4a2e1d;

    border-color: #71472c;
}


[data-theme="dark"]
.data-explorer-search input {
    color: #f4f7fb;
}


[data-theme="dark"]
.data-explorer-table {
    color: #dce3ec;

    background: #172033;
}


[data-theme="dark"]
.data-explorer-table th,

[data-theme="dark"]
.data-explorer-table td {
    border-color: #2d394c;
}


[data-theme="dark"]
.data-explorer-table thead th,

[data-theme="dark"]
.data-explorer-table__compare-metrics th {
    color: #aab4c3;

    background: #111927;
}


[data-theme="dark"]
.data-explorer-table__year-group {
    color: #f4f7fb !important;

    border-left-color: #344054;
}


[data-theme="dark"]
.data-explorer-table__sticky-identity {
    color: #f4f7fb;

    background: #172033 !important;

    border-right-color: #344054;
}


[data-theme="dark"]
.data-explorer-table thead
.data-explorer-table__sticky-identity {
    background: #111927 !important;
}


[data-theme="dark"]
.data-explorer-table tbody tr:hover td,

[data-theme="dark"]
.data-explorer-table tbody tr:hover
.data-explorer-table__sticky-identity {
    background: #111927 !important;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1000px) {

    .data-explorer-controls {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .data-explorer-column-focus {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {

    .data-explorer-intro {
        flex-direction: column;
    }


    .data-explorer-controls {
        grid-template-columns: 1fr;
    }


    .data-explorer-segmented {
        width: 100%;
    }


    .data-explorer-segmented__button {
        flex: 1;
    }


    .data-explorer-period {
        align-items: stretch;
        flex-direction: column;
    }


    .data-explorer-period__vs {
        height: auto;

        justify-content: flex-start;
    }


    .data-explorer-select,

    .data-explorer-period__readonly {
        width: 100%;
    }


    .data-explorer-toolbar {
        align-items: stretch;
        flex-direction: column;
    }


    .data-explorer-search {
        width: 100%;
    }


    .data-explorer-column-focus__controls {
        width: 100%;
    }


    .data-explorer-column-focus__button {
        flex: 1 1 auto;
    }


    .data-explorer-table__sticky-identity {
        min-width: 150px;
    }

}