/* =========================================================
   JAMAICA ELECTORAL ANALYTICS
   F — COMPETITIVENESS

   Collapsed panel only.

   Owns:
   - closest-area ranking
   - winning-margin bars
   - winner chips
   - Compare presentation
   - competitiveness change
   - loading / empty state
   - note
   - responsive polish

   Does NOT own:
   - shared panel shell
   - panel height
   - vertical panel scrolling
   - expanded Competitiveness Study

   Shared shell:
   dashboardPanels.css

   Expanded study:
   dashboardCompetitiveStudy.css
   ========================================================= */


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

.dashboard-panel__body--competitive {
    display: block;

    padding:
        0.65rem
        0.8rem;
}


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

.competitive-chart {
    width: 100%;

    min-width: 0;
    min-height: 100%;

    display: flex;
    flex-direction: column;

    color:
        var(--text-secondary);
}


/* =========================================================
   LOADING / EMPTY
   ========================================================= */

.competitive-chart__loading,
.competitive-chart__empty {
    flex: 1;

    min-height: 165px;

    display: grid;
    place-items: center;

    padding: 1rem;

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

    border-radius:
        7px;

    color:
        var(--text-muted);

    background:
        var(--surface-muted);

    font-size:
        0.56rem;

    font-weight:
        600;

    line-height:
        1.45;

    text-align:
        center;
}


/* =========================================================
   SINGLE ELECTION — HEADER
   ========================================================= */

.competitive-chart__head {
    flex: 0 0 auto;

    display: grid;

    grid-template-columns:
        minmax(145px, 1.35fr)
        minmax(125px, 1fr)
        62px;

    align-items: center;

    gap:
        0.65rem;

    min-width:
        465px;

    padding:
        0.18rem
        0.35rem
        0.45rem;

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

    color:
        var(--text-muted);

    font-size:
        0.48rem;

    font-weight:
        750;

    line-height:
        1.2;

    letter-spacing:
        0.015em;
}


/* =========================================================
   SINGLE ELECTION — ROWS
   ========================================================= */

.competitive-chart__rows {
    width: 100%;

    min-width:
        465px;
}


.competitive-chart__row {
    display: grid;

    grid-template-columns:
        minmax(145px, 1.35fr)
        minmax(125px, 1fr)
        62px;

    align-items: center;

    gap:
        0.65rem;

    min-height:
        40px;

    padding:
        0.4rem
        0.35rem;

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

    transition:
        background-color
        var(--transition-fast);
}


.competitive-chart__row:hover {
    background:
        var(--surface-muted);
}


.competitive-chart__row:last-child {
    border-bottom:
        0;
}


/* =========================================================
   IDENTITY
   ========================================================= */

.competitive-chart__identity {
    min-width: 0;

    display: flex;

    align-items: center;

    gap:
        0.45rem;
}


/* =========================================================
   RANK
   ========================================================= */

.competitive-chart__rank {
    width:
        21px;

    height:
        21px;

    flex:
        0 0 21px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        6px;

    color:
        var(--text-muted);

    background:
        var(--surface);

    font-size:
        0.47rem;

    font-weight:
        800;

    line-height:
        1;

    font-variant-numeric:
        tabular-nums;
}


/*
   Closest contest gets restrained emphasis.
*/

.competitive-chart__row:first-child
.competitive-chart__rank {
    color:
        var(--brand-green);

    border-color:
        color-mix(
            in srgb,
            var(--brand-green) 25%,
            var(--border)
        );

    background:
        var(--brand-green-soft);
}


/* =========================================================
   AREA NAME
   ========================================================= */

.competitive-chart__name {
    min-width:
        0;

    overflow:
        hidden;

    color:
        var(--text-primary);

    font-size:
        0.55rem;

    font-weight:
        750;

    line-height:
        1.25;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   MARGIN MEASURE
   ========================================================= */

.competitive-chart__measure {
    min-width: 0;

    display: grid;

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

    align-items: center;

    gap:
        0.45rem;
}


/* =========================================================
   MARGIN TRACK
   ========================================================= */

.competitive-chart__track {
    position: relative;

    width:
        100%;

    height:
        8px;

    overflow:
        hidden;

    border-radius:
        999px;

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


/*
   Small visual guide only.
   The actual length is still driven entirely by the data.
*/

.competitive-chart__track::after {
    content: "";

    position: absolute;

    top:
        1px;

    bottom:
        1px;

    left:
        50%;

    width:
        1px;

    background:
        var(--border-strong);

    opacity:
        0.38;

    pointer-events:
        none;
}


/* =========================================================
   MARGIN FILL
   ========================================================= */

.competitive-chart__fill {
    position:
        relative;

    z-index:
        1;

    height:
        100%;

    min-width:
        2px;

    border-radius:
        inherit;

    transition:
        width
        180ms ease,
        filter
        var(--transition-fast);
}


.competitive-chart__row:hover
.competitive-chart__fill {
    filter:
        brightness(0.96);
}


.competitive-chart__fill--jlp {
    background:
        #16875d;
}


.competitive-chart__fill--pnp {
    background:
        #f47a23;
}


.competitive-chart__fill--other,
.competitive-chart__fill--tie,
.competitive-chart__fill--unknown {
    background:
        var(--text-muted);
}


/* =========================================================
   MARGIN VALUE
   ========================================================= */

.competitive-chart__value,
.competitive-chart__measure > strong {
    color:
        var(--text-primary);

    font-size:
        0.53rem;

    font-weight:
        800;

    line-height:
        1;

    text-align:
        right;

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


/* =========================================================
   WINNER
   ========================================================= */

.competitive-chart__winner {
    display: flex;

    align-items:
        center;

    justify-content:
        flex-start;
}


/* =========================================================
   PARTY CHIP

   F owns competitive-party.
   E owns movement-party.
   ========================================================= */

.competitive-party {
    min-width:
        31px;

    min-height:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0.12rem
        0.32rem;

    border:
        1px solid
        transparent;

    border-radius:
        5px;

    font-size:
        0.46rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.015em;
}


.competitive-party--jlp {
    color:
        #0d744c;

    border-color:
        rgba(22, 135, 93, 0.13);

    background:
        #e4f4ec;
}


.competitive-party--pnp {
    color:
        #c95c1b;

    border-color:
        rgba(244, 122, 35, 0.15);

    background:
        #fff0e5;
}


.competitive-party--other,
.competitive-party--tie,
.competitive-party--unknown {
    color:
        var(--text-secondary);

    border-color:
        var(--border);

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


/* =========================================================
   COMPARE MODE — HEADER
   ========================================================= */

.competitive-compare__head {
    display: grid;

    grid-template-columns:
        minmax(145px, 1.45fr)
        82px
        82px
        72px;

    align-items:
        center;

    gap:
        0.5rem;

    min-width:
        500px;

    padding:
        0.18rem
        0.35rem
        0.45rem;

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

    color:
        var(--text-muted);

    font-size:
        0.48rem;

    font-weight:
        750;

    line-height:
        1.2;

    letter-spacing:
        0.015em;
}


/* =========================================================
   COMPARE MODE — ROWS
   ========================================================= */

.competitive-compare__rows {
    width:
        100%;

    min-width:
        500px;
}


.competitive-compare__row {
    display: grid;

    grid-template-columns:
        minmax(145px, 1.45fr)
        82px
        82px
        72px;

    align-items:
        center;

    gap:
        0.5rem;

    min-height:
        41px;

    padding:
        0.4rem
        0.35rem;

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

    transition:
        background-color
        var(--transition-fast);
}


.competitive-compare__row:hover {
    background:
        var(--surface-muted);
}


.competitive-compare__row:last-child {
    border-bottom:
        0;
}


/* =========================================================
   COMPARE — AREA NAME
   ========================================================= */

.competitive-compare__name {
    min-width:
        0;

    overflow:
        hidden;

    color:
        var(--text-primary);

    font-size:
        0.54rem;

    font-weight:
        750;

    line-height:
        1.25;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   COMPARE — ELECTION MARGINS
   ========================================================= */

.competitive-compare__margin {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        0.3rem;

    color:
        var(--text-primary);

    font-size:
        0.5rem;

    font-weight:
        700;

    line-height:
        1;

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


/*
   Competitive party chips inside compare rows should
   be slightly smaller because there are two per row.
*/

.competitive-compare__margin
.competitive-party {
    min-width:
        27px;

    min-height:
        18px;

    padding:
        0.1rem
        0.24rem;

    font-size:
        0.42rem;
}


/* =========================================================
   COMPARE — DELTA
   ========================================================= */

.competitive-compare__delta {
    justify-self:
        end;

    min-width:
        58px;

    padding:
        0.26rem
        0.35rem;

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

    border-radius:
        999px;

    color:
        var(--text-secondary);

    background:
        var(--surface-muted);

    font-size:
        0.48rem;

    font-weight:
        800;

    line-height:
        1;

    text-align:
        center;

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


/*
   Smaller margin = more competitive.
*/

.competitive-compare__delta--closer {
    color:
        var(--brand-green);

    border-color:
        color-mix(
            in srgb,
            var(--brand-green) 25%,
            var(--border)
        );

    background:
        var(--brand-green-soft);
}


/*
   Larger margin = safer / less competitive.
*/

.competitive-compare__delta--safer {
    color:
        #b65c5c;

    border-color:
        color-mix(
            in srgb,
            #b65c5c 22%,
            var(--border)
        );

    background:
        color-mix(
            in srgb,
            #b65c5c 6%,
            var(--surface)
        );
}


.competitive-compare__delta--flat {
    color:
        var(--text-muted);
}


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

.competitive-chart__note {
    flex:
        0 0 auto;

    margin-top:
        auto;

    padding:
        0.5rem
        0.25rem
        0;

    color:
        var(--text-muted);

    font-size:
        0.47rem;

    font-weight:
        500;

    line-height:
        1.35;
}


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

html[data-theme="dark"]
.competitive-party--jlp {
    color:
        #6fd3aa;

    border-color:
        rgba(111, 211, 170, 0.16);

    background:
        rgba(22, 135, 93, 0.14);
}


html[data-theme="dark"]
.competitive-party--pnp {
    color:
        #f3a36c;

    border-color:
        rgba(243, 163, 108, 0.16);

    background:
        rgba(244, 122, 35, 0.13);
}


html[data-theme="dark"]
.competitive-compare__delta--safer {
    color:
        #db8585;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .competitive-chart__head,
    .competitive-chart__row {
        grid-template-columns:
            minmax(135px, 1.3fr)
            minmax(115px, 1fr)
            58px;
    }


    .competitive-compare__head,
    .competitive-compare__row {
        grid-template-columns:
            minmax(135px, 1.4fr)
            78px
            78px
            68px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .dashboard-panel__body--competitive {
        padding:
            0.6rem
            0.7rem;
    }


    /*
       Preserve useful column widths.
       dashboardPanels.css owns horizontal scrolling.
    */

    .competitive-chart__head,
    .competitive-chart__rows {
        min-width:
            450px;
    }


    .competitive-chart__head,
    .competitive-chart__row {
        grid-template-columns:
            140px
            125px
            58px;

        gap:
            0.55rem;
    }


    .competitive-compare__head,
    .competitive-compare__rows {
        min-width:
            490px;
    }


    .competitive-compare__head,
    .competitive-compare__row {
        grid-template-columns:
            140px
            76px
            76px
            68px;

        gap:
            0.45rem;
    }

}