/* =========================================================
   JAMAICA ELECTORAL ANALYTICS
   E — BIGGEST MOVEMENTS

   Collapsed panel only.

   Owns:
   - ranked movement table
   - movement bars
   - party transitions
   - flip indicator
   - empty state
   - note
   - responsive presentation

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

   Shared shell:
   dashboardPanels.css

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


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

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

    padding:
        0.65rem
        0.8rem;
}


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

.movement-chart {
    width:
        100%;

    min-width:
        0;

    min-height:
        100%;

    display:
        flex;

    flex-direction:
        column;

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


/* =========================================================
   HEADER ROW
   ========================================================= */

.movement-chart__head {
    flex:
        0 0 auto;

    display:
        grid;

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

    align-items:
        center;

    gap:
        0.65rem;

    min-width:
        470px;

    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;
}


/* =========================================================
   ROW CONTAINER
   ========================================================= */

.movement-chart__rows {
    width:
        100%;

    min-width:
        470px;
}


/* =========================================================
   ROW
   ========================================================= */

.movement-chart__row {
    position:
        relative;

    display:
        grid;

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

    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);
}


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


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


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

.movement-chart__identity {
    display:
        flex;

    align-items:
        center;

    gap:
        0.45rem;

    min-width:
        0;
}


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

.movement-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;
}


/* subtly emphasize the top result */

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

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

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


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

.movement-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;
}


/* =========================================================
   MOVEMENT MEASURE
   ========================================================= */

.movement-chart__measure {
    min-width:
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        0.45rem;
}


/* =========================================================
   MOVEMENT TRACK
   ========================================================= */

.movement-chart__track {
    position:
        relative;

    width:
        100%;

    height:
        8px;

    overflow:
        hidden;

    border-radius:
        999px;

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


/*
   Very subtle midpoint marker.

   This is not a zero axis — bars represent absolute
   movement magnitude — it simply gives the compact
   bar a little visual structure.
*/

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

    position:
        absolute;

    top:
        1px;

    bottom:
        1px;

    left:
        50%;

    width:
        1px;

    background:
        var(--border-strong);

    opacity:
        0.4;

    pointer-events:
        none;
}


/* =========================================================
   MOVEMENT FILL
   ========================================================= */

.movement-chart__fill {
    position:
        relative;

    z-index:
        1;

    height:
        100%;

    min-width:
        2px;

    border-radius:
        inherit;

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


.movement-chart__row:hover
.movement-chart__fill {
    filter:
        brightness(0.97);
}


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


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


/* =========================================================
   MOVEMENT VALUE
   ========================================================= */

.movement-chart__value {
    display:
        block;

    font-size:
        0.53rem;

    font-weight:
        800;

    line-height:
        1;

    text-align:
        right;

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


.movement-chart__value--jlp {
    color:
        #16875d;
}


.movement-chart__value--pnp {
    color:
        #e66c1f;
}


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

.movement-chart__transition {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        0.24rem;

    white-space:
        nowrap;
}


/* =========================================================
   PARTY BADGES

   These are also currently consumed by F's collapsed
   renderer, so keep the base class available until F
   is rewritten next.
   ========================================================= */

.movement-party {
    min-width:
        30px;

    min-height:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0.12rem
        0.3rem;

    border:
        1px solid
        transparent;

    border-radius:
        5px;

    font-size:
        0.46rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.015em;
}


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

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

    background:
        #e4f4ec;
}


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

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

    background:
        #fff0e5;
}


/* neutral / tie / unknown */

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

    border-color:
        var(--border);

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


/* =========================================================
   TRANSITION ARROW
   ========================================================= */

.movement-chart__arrow {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--text-muted);

    font-size:
        0.52rem;

    font-weight:
        700;

    line-height:
        1;
}


/* =========================================================
   FLIP BADGE
   ========================================================= */

.movement-chart__flip {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        18px;

    margin-left:
        0.08rem;

    padding:
        0
        0.28rem;

    border:
        1px solid
        rgba(176, 124, 20, 0.16);

    border-radius:
        999px;

    color:
        #916715;

    background:
        #fff5d8;

    font-size:
        0.4rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.02em;
}


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

.movement-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;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.movement-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;
}


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

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

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

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


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

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

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


html[data-theme="dark"]
.movement-chart__flip {
    color:
        #e2bc64;

    border-color:
        rgba(226, 188, 100, 0.15);

    background:
        rgba(176, 124, 20, 0.12);
}


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

@media (max-width: 900px) {

    .movement-chart__head,
    .movement-chart__row {
        grid-template-columns:
            minmax(135px, 1.25fr)
            minmax(120px, 1fr)
            120px;
    }

}


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

@media (max-width: 700px) {

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


    /*
     * Preserve the analytical table structure.
     * The shared panel body provides horizontal scrolling
     * rather than crushing all three columns.
     */

    .movement-chart__head,
    .movement-chart__rows {
        min-width:
            455px;
    }


    .movement-chart__head,
    .movement-chart__row {
        grid-template-columns:
            140px
            125px
            120px;

        gap:
            0.55rem;
    }

}