/* =========================================================
   JAMAICA ELECTORAL ANALYTICS
   B — PERFORMANCE
   Collapsed panel only

   Expanded/detail UI belongs in:
   dashboardPerformanceDetail.css
   ========================================================= */


/* =========================================================
   BODY
   ========================================================= */

.dashboard-panel__body--performance-dynamic {
    display: block;

    padding:
        0.7rem
        0.8rem
        0.65rem;
}


/* =========================================================
   ROOT
   ========================================================= */

.performance-dynamic {
    width: 100%;

    min-width: 0;
}


/* =========================================================
   LEGEND
   ========================================================= */

.performance-dynamic__legend {
    min-height: 20px;

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.8rem;

    margin-bottom:
        0.4rem;
}


.performance-dynamic__legend-item {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.25rem;

    color:
        var(--text-secondary);

    font-size:
        0.54rem;

    font-weight:
        750;
}


.performance-dynamic__legend-mark {
    width:
        9px;

    height:
        9px;

    border-radius:
        2px;
}


.performance-dynamic__legend-mark--jlp {
    background:
        var(--party-jlp);
}


.performance-dynamic__legend-mark--pnp {
    background:
        var(--party-pnp);
}


.performance-party--jlp {
    color:
        var(--party-jlp) !important;
}


.performance-party--pnp {
    color:
        var(--party-pnp) !important;
}


/* =========================================================
   TO DATE — LAYOUT
   ========================================================= */

.performance-dynamic__trend {
    width:
        100%;

    min-width:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(150px, 0.8fr)
        minmax(0, 1.45fr);

    gap:
        0.75rem;

    align-items:
        stretch;
}


/* =========================================================
   TO DATE — CHART
   ========================================================= */

.performance-dynamic__chart {
    width:
        100%;

    min-width:
        0;
}


.performance-dynamic__chart-title {
    margin-bottom:
        0.35rem;

    color:
        var(--text-secondary);

    font-size:
        0.52rem;

    font-weight:
        700;

    text-align:
        center;
}


.performance-dynamic__years {
    min-height:
        145px;

    display:
        grid;

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

    align-items:
        end;

    gap:
        0.5rem;

    border-bottom:
        1px solid
        var(--border);
}


.performance-dynamic__year {
    height:
        145px;

    display:
        flex;

    flex-direction:
        column;
}


.performance-dynamic__bars {
    flex:
        1;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    gap:
        5px;
}


.performance-dynamic__bar {
    width:
        13px;

    min-height:
        3px;

    border-radius:
        3px
        3px
        0
        0;

    transition:
        filter
        var(--transition-fast),
        transform
        var(--transition-fast);
}


.performance-dynamic__bar:hover {
    filter:
        brightness(0.96);

    transform:
        translateY(-1px);
}


.performance-dynamic__bar--jlp {
    background:
        var(--party-jlp);
}


.performance-dynamic__bar--pnp {
    background:
        var(--party-pnp);
}


.performance-dynamic__year-label {
    padding:
        0.35rem
        0
        0.2rem;

    color:
        var(--text-secondary);

    font-size:
        0.52rem;

    font-weight:
        700;

    text-align:
        center;
}


/* =========================================================
   TO DATE — TABLE WRAPPER

   Horizontal overflow belongs HERE.
   Vertical overflow belongs to dashboard-panel__body.
   ========================================================= */

.performance-dynamic__table-wrap {
    width:
        100%;

    min-width:
        0;

    padding-left:
        0.7rem;

    border-left:
        1px solid
        var(--border);

    overflow-x:
        auto;

    overflow-y:
        visible;

    scrollbar-width:
        thin;

    scrollbar-color:
        var(--border-strong)
        transparent;
}


.performance-dynamic__table-wrap::-webkit-scrollbar {
    height:
        5px;
}


.performance-dynamic__table-wrap::-webkit-scrollbar-track {
    background:
        transparent;
}


.performance-dynamic__table-wrap::-webkit-scrollbar-thumb {
    border-radius:
        999px;

    background:
        var(--border-strong);
}


/* =========================================================
   TO DATE — TABLE
   ========================================================= */

.performance-dynamic__table {
    width:
        100%;

    min-width:
        370px;

    border-collapse:
        collapse;

    color:
        var(--text-primary);

    font-size:
        0.49rem;

    font-variant-numeric:
        tabular-nums;
}


.performance-dynamic__table th,
.performance-dynamic__table td {
    padding:
        0.32rem
        0.11rem;

    border-bottom:
        1px solid
        var(--border);

    text-align:
        center;

    vertical-align:
        middle;

    white-space:
        nowrap;
}


.performance-dynamic__table thead th {
    color:
        var(--text-secondary);

    font-size:
        0.46rem;

    font-weight:
        750;
}


.performance-dynamic__table thead
tr:first-child th {
    white-space:
        normal;

    line-height:
        1.2;
}


.performance-dynamic__table tbody th {
    color:
        var(--text-primary);

    font-weight:
        800;
}


.performance-dynamic__table
th:first-child,
.performance-dynamic__table
td:first-child {
    width:
        34px;
}


/* =========================================================
   INDIVIDUAL
   ========================================================= */

.performance-single {
    width:
        100%;

    min-width:
        0;
}


.performance-single__heading {
    margin-bottom:
        0.4rem;

    color:
        var(--text-secondary);

    font-size:
        0.54rem;

    text-align:
        center;
}


.performance-single__heading strong {
    color:
        var(--text-primary);

    font-size:
        0.7rem;
}


.performance-single__votes {
    display:
        grid;

    gap:
        0.5rem;

    margin-top:
        0.45rem;
}


.performance-single__vote-row {
    display:
        grid;

    grid-template-columns:
        35px
        minmax(0, 1fr)
        50px;

    align-items:
        center;

    gap:
        0.45rem;
}


.performance-single__party {
    color:
        var(--text-primary);

    font-size:
        0.55rem;

    font-weight:
        800;
}


.performance-single__track {
    height:
        14px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        var(--surface-muted);
}


.performance-single__fill {
    height:
        100%;

    border-radius:
        inherit;
}


.performance-single__fill--jlp {
    background:
        var(--party-jlp);
}


.performance-single__fill--pnp {
    background:
        var(--party-pnp);
}


.performance-single__vote-value {
    color:
        var(--text-primary);

    font-size:
        0.55rem;

    font-weight:
        650;

    text-align:
        right;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   INDIVIDUAL — METRICS
   ========================================================= */

.performance-single__metrics {
    display:
        grid;

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

    gap:
        0.5rem;

    margin-top:
        0.8rem;
}


.performance-single__metric {
    min-width:
        0;

    padding:
        0.55rem;

    border:
        1px solid
        var(--border);

    border-radius:
        7px;

    background:
        var(--surface-muted);
}


.performance-single__metric-title {
    margin-bottom:
        0.35rem;

    color:
        var(--text-secondary);

    font-size:
        0.5rem;

    font-weight:
        700;

    text-align:
        center;
}


.performance-single__metric-values {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-around;

    gap:
        0.4rem;

    font-size:
        0.5rem;

    font-weight:
        750;

    font-variant-numeric:
        tabular-nums;
}


.performance-single__metric-values strong {
    margin-left:
        0.18rem;

    font-size:
        0.65rem;
}


/* =========================================================
   COMPARE
   Two compact single-election style cards
   ========================================================= */

.performance-compare__grid {
    display:
        grid;

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

    gap:
        0.7rem;
}


.performance-compare__card {
    min-width:
        0;

    padding:
        0.6rem;

    border:
        1px solid
        var(--border);

    border-radius:
        8px;

    background:
        var(--surface);
}


/* =========================================================
   COMPARE — YEAR
   ========================================================= */

.performance-compare__year {
    margin-bottom:
        0.45rem;

    color:
        var(--text-primary);

    font-size:
        0.64rem;

    font-weight:
        800;

    text-align:
        center;
}


/* =========================================================
   COMPARE — VOTE ROWS
   ========================================================= */

.performance-compare__vote-row {
    display:
        grid;

    grid-template-columns:
        30px
        minmax(0, 1fr)
        48px;

    align-items:
        center;

    gap:
        0.4rem;

    margin-bottom:
        0.35rem;

    color:
        var(--text-secondary);

    font-size:
        0.5rem;

    font-weight:
        700;
}


.performance-compare__track {
    height:
        10px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        var(--surface-muted);
}


.performance-compare__fill {
    height:
        100%;

    border-radius:
        inherit;
}


.performance-compare__fill--jlp {
    background:
        var(--party-jlp);
}


.performance-compare__fill--pnp {
    background:
        var(--party-pnp);
}


.performance-compare__vote-row strong {
    color:
        var(--text-primary);

    font-size:
        0.5rem;

    font-weight:
        750;

    text-align:
        right;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   COMPARE — METRIC CARDS
   ========================================================= */

.performance-compare__stats {
    display:
        grid;

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

    gap:
        0.4rem;

    margin-top:
        0.65rem;
}


.performance-compare__stats > div {
    min-width:
        0;

    padding:
        0.45rem
        0.35rem;

    border:
        1px solid
        var(--border);

    border-radius:
        6px;

    background:
        var(--surface-muted);

    text-align:
        center;

    font-size:
        0.45rem;

    font-variant-numeric:
        tabular-nums;
}


.performance-compare__stats span {
    display:
        block;

    margin-bottom:
        0.3rem;

    color:
        var(--text-secondary);

    font-size:
        0.43rem;

    font-weight:
        700;
}


/* =========================================================
   COMPARE — PARTY VALUES
   ========================================================= */

.performance-compare__stats strong {
    display:
        inline-block;

    margin:
        0
        0.12rem;

    color:
        var(--text-primary);

    font-size:
        0.5rem;

    font-weight:
        800;
}


.performance-compare__stats
.performance-party--jlp {
    color:
        var(--party-jlp) !important;
}


.performance-compare__stats
.performance-party--pnp {
    color:
        var(--party-pnp) !important;
}


/* =========================================================
   NOTE
   ========================================================= */

.performance-dynamic__note {
    display:
        flex;

    align-items:
        center;

    gap:
        0.3rem;

    margin-top:
        0.55rem;

    color:
        var(--text-muted);

    font-size:
        0.48rem;

    line-height:
        1.35;
}


.performance-dynamic__note-icon {
    width:
        13px;

    height:
        13px;

    flex:
        0 0 13px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        50%;

    font-size:
        0.42rem;

    font-weight:
        800;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
.performance-dynamic__table-wrap {
    border-left-color:
        var(--border);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

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


    .performance-dynamic__table-wrap {
        padding:
            0.7rem
            0
            0;

        border-left:
            0;

        border-top:
            1px solid
            var(--border);
    }


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

}


@media (max-width: 520px) {

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


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

        gap:
            0.3rem;
    }


    .performance-dynamic__table {
        min-width:
            370px;
    }

}

.performance-compare__stat-values {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        0.2rem
        0.45rem;

    font-size:
        0.45rem;

    font-weight:
        750;

    font-variant-numeric:
        tabular-nums;
}


.performance-compare__stat-values
.performance-party--jlp {
    color:
        var(--party-jlp) !important;

    font-size:
        0.5rem;

    font-weight:
        800;
}


.performance-compare__stat-values
.performance-party--pnp {
    color:
        var(--party-pnp) !important;

    font-size:
        0.5rem;

    font-weight:
        800;
}


.performance-party--tie {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.18rem;

    color:
        var(--text-secondary);

    font-size:
        0.4rem;

    font-weight:
        800;
}


.performance-party--tie strong {
    padding:
        0;

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

    color:
        var(--text-primary);

    font-size:
        0.48rem;

    font-weight:
        800;
}

.performance-compare__stat {
    min-width: 0;

    padding:
        0.28rem
        0.3rem;

    border:
        1px solid
        var(--border);

    border-radius:
        6px;

    background:
        var(--surface-muted);
}
.performance-party--tie {
    width: 100%;

    display: inline-flex;
    align-items: baseline;
    justify-content: center;

    gap: 0.14rem;

    color: var(--text-secondary);

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

    line-height: 1;
}


.performance-party--tie strong {
    padding: 0;
    margin: 0;

    border: 0;

    background: transparent;

    color: var(--text-primary);

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

    line-height: 1;
}