/* =========================================================
   B — Expanded Performance Detail
   ========================================================= */


/* =========================================================
   Visibility
   ========================================================= */

.performance-detail {
    display: none;
}


/*
 * Only Election / Compare activate the explorer.
 * To Date keeps normal B.
 */

.dashboard-panel--performance.dashboard-panel--expanded.dashboard-panel--performance-detail-active
.performance-dynamic {
    display: none !important;
}


.dashboard-panel--performance.dashboard-panel--expanded.dashboard-panel--performance-detail-active
.performance-detail {
    display: flex !important;
    flex: 1;
    flex-direction: column;

    width: 100%;

    min-width: 0;
    min-height: 0;
}


.dashboard-panel--performance.dashboard-panel--expanded
.dashboard-panel__body--performance-dynamic {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* =========================================================
   Top
   ========================================================= */

.performance-detail__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.75rem;

    margin-bottom: 0.65rem;
}


.performance-detail__eyebrow {
    margin-bottom: 0.15rem;

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

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

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.performance-detail__context {
    color: var(
        --dashboard-text,
        #344054
    );

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


/* =========================================================
   Back
   ========================================================= */

.performance-detail__back {
    padding:
        0.38rem
        0.55rem;

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

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

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

    border-radius: 0.4rem;

    cursor: pointer;

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


.performance-detail__back:hover {
    color: var(
        --dashboard-text,
        #344054
    );

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


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

.performance-detail__controls {
    display: grid;

    grid-template-columns:
        minmax(220px, 1fr)
        minmax(180px, 0.8fr)
        minmax(280px, auto);

    align-items: end;

    gap: 0.6rem;

    padding: 0.65rem;

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

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

    border-radius: 0.5rem;
}


.performance-detail__field {
    display: grid;

    gap: 0.28rem;

    min-width: 0;
}


.performance-detail__field > span,
.performance-detail__view-label {
    color: var(
        --dashboard-text-muted,
        #667085
    );

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


.performance-detail__field select {
    width: 100%;
    height: 34px;

    padding:
        0
        0.55rem;

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

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

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

    border-radius: 0.4rem;

    outline: none;

    font: inherit;
    font-size: 0.53rem;
    font-weight: 650;
}


.performance-detail__field select:disabled {
    opacity: 0.5;
}


/* =========================================================
   Level Message
   ========================================================= */

.performance-detail__level-message {
    display: flex;
    align-items: center;

    min-height: 34px;

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

    font-size: 0.48rem;
    font-weight: 650;
}


/* =========================================================
   Cluster / PD Tabs
   ========================================================= */

.performance-detail__view {
    display: grid;

    gap: 0.28rem;
}


.performance-detail__tabs {
    display: flex;

    min-height: 34px;

    padding: 2px;

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

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

    border-radius: 0.4rem;
}


.performance-detail__tab {
    flex: 1;

    padding:
        0
        0.6rem;

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

    background: transparent;

    border: 0;
    border-radius: 0.3rem;

    cursor: pointer;

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

    white-space: nowrap;
}


.performance-detail__tab.is-active {
    color: var(
        --dashboard-text,
        #344054
    );

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


/* =========================================================
   Summary
   ========================================================= */

.performance-detail__summary {
    display: grid;

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

    gap: 0.45rem;

    margin-top: 0.55rem;
}


.performance-detail__summary-card {
    display: grid;

    gap: 0.18rem;

    min-width: 0;

    padding:
        0.48rem
        0.58rem;

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

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

    border-radius: 0.4rem;
}


.performance-detail__summary-card span {
    overflow: hidden;

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

    font-size: 0.42rem;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.performance-detail__summary-card strong {
    overflow: hidden;

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

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

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   Party Colours
   ========================================================= */

.performance-detail__jlp {
    color: #16875d !important;
}


.performance-detail__pnp {
    color: #f47a23 !important;
}


/* =========================================================
   Search
   ========================================================= */

.performance-detail__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.6rem;

    margin-top: 0.55rem;
    margin-bottom: 0.42rem;
}


.performance-detail__search {
    display: flex;
    align-items: center;

    gap: 0.4rem;

    width: min(
        100%,
        320px
    );

    height: 32px;

    padding:
        0
        0.55rem;

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

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

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

    border-radius: 0.4rem;
}


.performance-detail__search svg {
    flex: 0 0 14px;

    width: 14px;
    height: 14px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
}


.performance-detail__search input {
    width: 100%;

    padding: 0;

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

    background: transparent;

    border: 0;
    outline: 0;

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


.performance-detail__row-count {
    color: var(
        --dashboard-text-muted,
        #667085
    );

    font-size: 0.47rem;
    font-weight: 700;

    white-space: nowrap;
}


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

.performance-detail__table-wrap {
    flex: 1;

    width: 100%;

    min-width: 0;
    min-height: 0;

    overflow: auto;

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

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

    border-radius: 0.48rem;
}


.performance-detail__table {
    width: 100%;

    min-width: 900px;

    border-collapse: collapse;

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

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

    font-size: 0.5rem;
}


.performance-detail__table--compare {
    min-width: 1100px;
}


.performance-detail__table th,
.performance-detail__table td {
    padding:
        0.5rem
        0.55rem;

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

    text-align: right;

    white-space: nowrap;
}


.performance-detail__table th:first-child,
.performance-detail__table td:first-child {
    text-align: left;
}


.performance-detail__table thead th {
    position: sticky;

    top: 0;

    z-index: 2;

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

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

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


.performance-detail__table tbody tr:last-child td {
    border-bottom: 0;
}


.performance-detail__table tbody tr:hover {
    background: var(
        --dashboard-background,
        #f8fafc
    );
}


.performance-detail__identity {
    color: var(
        --dashboard-text,
        #344054
    );

    font-weight: 800;
}


/* =========================================================
   Drill Link
   ========================================================= */

.performance-detail__drill {
    display: inline-flex;
    align-items: center;

    gap: 0.35rem;

    padding: 0;

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

    background: transparent;

    border: 0;

    cursor: pointer;

    font: inherit;
    font-weight: 800;
}


.performance-detail__drill span {
    color: var(
        --dashboard-text-soft,
        #98a2b3
    );
}


.performance-detail__drill:hover {
    text-decoration: underline;
}


/* =========================================================
   Winner
   ========================================================= */

.performance-detail__winner {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 42px;

    padding:
        0.14rem
        0.35rem;

    border-radius: 0.3rem;

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


.performance-detail__winner--jlp {
    color: #14704c;

    background: #dff3e9;
}


.performance-detail__winner--pnp {
    color: #a84e10;

    background: #fff0e4;
}


.performance-detail__winner--tie {
    color: #667085;

    background: #eef1f4;
}


/* =========================================================
   Compare Movement
   ========================================================= */

.performance-detail__movement {
    font-size: 0.47rem;
}


.performance-detail__movement--jlp {
    color: #16875d;
}


.performance-detail__movement--pnp {
    color: #f47a23;
}


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

.performance-detail__empty {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 170px;

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

    font-size: 0.52rem;
}


.performance-detail__note {
    flex: 0 0 auto;

    padding-top: 0.42rem;

    color: var(
        --dashboard-text-soft,
        #8a95a6
    );

    font-size: 0.43rem;
}


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

[data-theme="dark"]
.performance-detail__context,

[data-theme="dark"]
.performance-detail__summary-card strong,

[data-theme="dark"]
.performance-detail__identity,

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


[data-theme="dark"]
.performance-detail__controls {
    background: #111927;

    border-color: #2d394c;
}


[data-theme="dark"]
.performance-detail__field select,

[data-theme="dark"]
.performance-detail__tabs {
    color: #f4f7fb;

    background: #172033;

    border-color: #344054;
}


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

    background: #253146;
}


[data-theme="dark"]
.performance-detail__summary-card {
    background: #111927;

    border-color: #2d394c;
}


[data-theme="dark"]
.performance-detail__search {
    background: #111927;

    border-color: #344054;
}


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


[data-theme="dark"]
.performance-detail__table-wrap,

[data-theme="dark"]
.performance-detail__table {
    color: #dce3ec;

    background: #172033;

    border-color: #2d394c;
}


[data-theme="dark"]
.performance-detail__table th,

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


[data-theme="dark"]
.performance-detail__table thead th {
    color: #aab4c3;

    background: #111927;
}


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

@media (max-width: 1000px) {

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


    .performance-detail__view,
    .performance-detail__level-message {
        grid-column:
            1 /
            -1;
    }


    .performance-detail__summary {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


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

@media (max-width: 700px) {

    .performance-detail__top {
        align-items: flex-start;
        flex-direction: column;
    }


    .performance-detail__controls {
        grid-template-columns: 1fr;
    }


    .performance-detail__view,
    .performance-detail__level-message {
        grid-column: auto;
    }


    .performance-detail__tabs {
        width: 100%;
    }


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


    .performance-detail__toolbar {
        align-items: stretch;
        flex-direction: column;
    }


    .performance-detail__search {
        width: 100%;
    }

}