/* =========================================================
   JAMAICA ELECTORAL ANALYTICS
   G — TRANSITION ANALYSIS

   Owns:
   - collapsed G presentation
   - expanded G study presentation
   - scope controls
   - summary metrics
   - grouped transition tables
   - change / comparison-effect chips
   - empty states
   - responsive polish

   Does NOT own:
   - shared panel shell
   - panel dimensions
   - expanded overlay positioning
   - DashboardState logic
   - transition calculations

   Shared shell:
   dashboardPanels.css

   Expanded overlay:
   dashboardPanelExpand.css
   ========================================================= */


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

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

    padding:
        0.65rem
        0.8rem;
}


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

.transition-analysis,
.transition-study {
    width: 100%;

    min-width: 0;
}


/* =========================================================
   COMPACT / EXPANDED VISIBILITY
   ========================================================= */

.transition-study__compact {
    display: block;
}


.transition-study__expanded {
    display: none;
}


.dashboard-panel--transition.dashboard-panel--expanded
.transition-study__compact {
    display: none;
}


.dashboard-panel--transition.dashboard-panel--expanded
.transition-study__expanded {
    display: block;
}


.dashboard-panel--transition.dashboard-panel--expanded
.dashboard-panel__body--transition {
    padding: 0;

    overflow: auto;
}


.dashboard-panel--transition.dashboard-panel--expanded
.transition-study__expanded {
    padding:
        0.85rem
        0.9rem
        1rem;
}


/* =========================================================
   COLLAPSED — SUMMARY
   ========================================================= */

.transition-study__compact-summary {
    display: grid;

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

    gap:
        0.4rem;

    margin-bottom:
        0.55rem;
}


.transition-study__compact-summary > div {
    min-width: 0;

    min-height:
        50px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap:
        0.08rem;

    padding:
        0.42rem
        0.5rem;

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

    border-radius:
        7px;

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


.transition-study__compact-summary strong {
    color:
        var(--text-primary);

    font-size:
        0.74rem;

    font-weight:
        820;

    line-height:
        1;

    letter-spacing:
        -0.02em;

    font-variant-numeric:
        tabular-nums;
}


.transition-study__compact-summary span {
    overflow: hidden;

    max-width: 100%;

    color:
        var(--text-muted);

    font-size:
        0.42rem;

    font-weight:
        650;

    line-height:
        1.2;

    text-overflow:
        ellipsis;
}


/* =========================================================
   COLLAPSED — LIST
   ========================================================= */

.transition-study__compact-list {
    width: 100%;

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

    border-radius:
        7px;

    background:
        var(--surface);

    overflow: hidden;
}


.transition-study__compact-row {
    min-width: 0;

    min-height:
        39px;

    display: grid;

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

    align-items: center;

    gap:
        0.55rem;

    padding:
        0.34rem
        0.5rem;

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

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


.transition-study__compact-row:last-child {
    border-bottom: 0;
}


.transition-study__compact-row:hover {
    background:
        var(--surface-muted);
}


.transition-study__compact-row > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap:
        0.08rem;
}


.transition-study__compact-row strong {
    overflow: hidden;

    color:
        var(--text-primary);

    font-size:
        0.5rem;

    font-weight:
        800;

    line-height:
        1.15;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.transition-study__compact-row > div > span {
    overflow: hidden;

    color:
        var(--text-muted);

    font-size:
        0.4rem;

    font-weight:
        550;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   COLLAPSED — EMPTY
   ========================================================= */

.transition-study__compact-empty {
    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.54rem;

    font-weight:
        600;

    line-height:
        1.45;

    text-align:
        center;
}


/* =========================================================
   STATUS CHIP
   Shared between compact and expanded G
   ========================================================= */

.transition-study__status {
    min-height:
        18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        0
        0.3rem;

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

    border-radius:
        999px;

    color:
        var(--text-secondary);

    background:
        var(--surface-muted);

    font-size:
        0.39rem;

    font-weight:
        800;

    line-height:
        1;

    white-space:
        nowrap;
}


/* mapped / renumbered */

.transition-study__status--mapped {
    color:
        var(--brand-green);

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

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


/* split / merge review */

.transition-study__status--review {
    color:
        #9b6619;

    border-color:
        rgba(155, 102, 25, 0.16);

    background:
        rgba(155, 102, 25, 0.07);
}


/* location change */

.transition-study__status--location {
    color:
        #496aa4;

    border-color:
        rgba(73, 106, 164, 0.16);

    background:
        rgba(73, 106, 164, 0.07);
}


/*
   Added / removed are intentionally neutral-ish.
   They describe source/geography state, not gain/loss.
*/

.transition-study__status--added {
    color:
        #496aa4;

    border-color:
        rgba(73, 106, 164, 0.16);

    background:
        rgba(73, 106, 164, 0.07);
}


.transition-study__status--removed {
    color:
        #8b5b67;

    border-color:
        rgba(139, 91, 103, 0.16);

    background:
        rgba(139, 91, 103, 0.07);
}


.transition-study__status--changed {
    color:
        var(--text-secondary);
}


/* =========================================================
   EXPANDED — SCOPE
   ========================================================= */

.transition-study__scope {
    display: grid;

    grid-template-columns:
        minmax(175px, 0.8fr)
        minmax(0, 2.2fr);

    align-items: center;

    gap:
        0.9rem;

    margin-bottom:
        0.9rem;

    padding:
        0.7rem
        0.8rem;

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

    border-radius:
        10px;

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


/* =========================================================
   SCOPE HEAD
   ========================================================= */

.transition-study__scope-head {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap:
        0.18rem;
}


.transition-study__scope-head > div {
    display: flex;

    flex-direction: column;

    gap:
        0.12rem;
}


.transition-study__scope-head strong {
    color:
        var(--text-primary);

    font-size:
        0.64rem;

    font-weight:
        800;

    line-height:
        1.2;
}


.transition-study__scope-head span {
    color:
        var(--text-muted);

    font-size:
        0.5rem;

    line-height:
        1.3;
}


.transition-study__scope-context {
    width: fit-content;

    margin-top:
        0.15rem;

    padding:
        0.24rem
        0.42rem;

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

    border-radius:
        999px;

    color:
        var(--text-secondary) !important;

    background:
        var(--surface);

    font-size:
        0.47rem !important;

    font-weight:
        700 !important;
}


/* =========================================================
   SCOPE CONTROLS
   ========================================================= */

.transition-study__scope-controls {
    min-width: 0;

    display: flex;

    align-items: flex-end;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap:
        0.55rem;
}


.transition-study__scope-group {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap:
        0.28rem;
}


.transition-study__scope-label {
    color:
        var(--text-muted);

    font-size:
        0.46rem;

    font-weight:
        750;

    line-height:
        1;

    letter-spacing:
        0.025em;

    text-transform:
        uppercase;
}


/* =========================================================
   SEGMENTED CONTROL
   ========================================================= */

.transition-study__segmented {
    display: inline-flex;

    align-items: center;

    padding:
        2px;

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

    border-radius:
        7px;

    background:
        var(--surface);
}


.transition-study__scope-button {
    min-height:
        27px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        0
        0.55rem;

    border:
        0;

    border-radius:
        5px;

    color:
        var(--text-secondary);

    background:
        transparent;

    font-family:
        inherit;

    font-size:
        0.51rem;

    font-weight:
        700;

    line-height:
        1;

    cursor:
        pointer;

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


.transition-study__scope-button:hover {
    color:
        var(--text-primary);

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


.transition-study__scope-button.is-active {
    color:
        #ffffff;

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


/* =========================================================
   READONLY PERIOD
   ========================================================= */

.transition-study__scope-readonly {
    height:
        31px;

    display: inline-flex;

    align-items: center;

    padding:
        0
        0.55rem;

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

    border-radius:
        7px;

    color:
        var(--text-secondary);

    background:
        var(--surface);

    font-size:
        0.51rem;

    font-weight:
        750;

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


/* =========================================================
   SELECT
   ========================================================= */

.transition-study__scope-select {
    min-width:
        88px;

    height:
        31px;

    padding:
        0
        1.7rem
        0
        0.55rem;

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

    border-radius:
        7px;

    color:
        var(--text-primary);

    background:
        var(--surface);

    font-family:
        inherit;

    font-size:
        0.52rem;

    font-weight:
        700;

    outline:
        none;
}


.transition-study__scope-select:focus {
    border-color:
        var(--brand-green);

    box-shadow:
        0 0 0 2px
        var(--brand-green-soft);
}


/* =========================================================
   COMPARE SELECTS
   ========================================================= */

.transition-study__scope-compare {
    display: flex;

    align-items: flex-end;

    gap:
        0.4rem;
}


.transition-study__scope-vs {
    align-self:
        center;

    padding-bottom:
        0.42rem;

    color:
        var(--text-muted);

    font-size:
        0.48rem;

    font-weight:
        750;
}


/* =========================================================
   EXPANDED — INTRO
   ========================================================= */

.transition-study__intro {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap:
        1rem;

    margin:
        0.2rem
        0
        0.65rem;

    padding:
        0
        0.1rem;
}


.transition-study__eyebrow {
    margin-bottom:
        0.18rem;

    color:
        var(--brand-green);

    font-size:
        0.49rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.transition-study__intro h3 {
    margin: 0;

    color:
        var(--text-primary);

    font-size:
        1rem;

    font-weight:
        800;

    line-height:
        1.15;

    letter-spacing:
        -0.025em;
}


.transition-study__period {
    flex:
        0 0 auto;

    min-height:
        26px;

    display: inline-flex;

    align-items: center;

    padding:
        0
        0.55rem;

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

    border-radius:
        999px;

    color:
        var(--text-secondary);

    background:
        var(--surface);

    font-size:
        0.5rem;

    font-weight:
        750;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   EXPANDED — SUMMARY
   ========================================================= */

.transition-study__summary {
    display: grid;

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

    gap:
        0.55rem;

    margin-bottom:
        0.65rem;
}


.transition-study__summary-card {
    position: relative;

    min-width: 0;

    min-height:
        70px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap:
        0.18rem;

    padding:
        0.6rem
        0.65rem;

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

    border-radius:
        9px;

    background:
        var(--surface);

    overflow:
        hidden;
}


.transition-study__summary-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height:
        2px;

    background:
        var(--brand-green);

    opacity:
        0.7;
}


.transition-study__summary-card span {
    color:
        var(--text-muted);

    font-size:
        0.46rem;

    font-weight:
        750;

    line-height:
        1.2;
}


.transition-study__summary-card strong {
    overflow: hidden;

    color:
        var(--text-primary);

    font-size:
        0.75rem;

    font-weight:
        820;

    line-height:
        1.15;

    letter-spacing:
        -0.015em;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   EXPLANATION
   ========================================================= */

.transition-study__explanation {
    margin-bottom:
        0.65rem;

    padding:
        0.52rem
        0.65rem;

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

    border-left:
        3px solid
        var(--brand-green);

    border-radius:
        7px;

    color:
        var(--text-secondary);

    background:
        var(--surface-muted);

    font-size:
        0.48rem;

    line-height:
        1.45;
}


/* =========================================================
   GROUPS
   ========================================================= */

.transition-study__groups {
    display: grid;

    gap:
        0.6rem;
}


.transition-study__group {
    min-width: 0;

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

    border-radius:
        8px;

    background:
        var(--surface);

    overflow: hidden;
}


/* =========================================================
   GROUP HEADER
   Compact like F ranking sections
   ========================================================= */

.transition-study__group-head {
    min-height:
        38px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        0.75rem;

    padding:
        0.36rem
        0.55rem;

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

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


.transition-study__group-head > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap:
        1px;
}


.transition-study__group-head > div > span {
    color:
        var(--text-muted);

    font-size:
        0.39rem;

    font-weight:
        750;

    line-height:
        1;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


.transition-study__group-head strong {
    overflow: hidden;

    color:
        var(--text-primary);

    font-size:
        0.52rem;

    font-weight:
        800;

    line-height:
        1.15;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.transition-study__group-head > span {
    min-height:
        19px;

    display: inline-flex;

    align-items: center;

    padding:
        0
        0.38rem;

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

    border-radius:
        999px;

    color:
        var(--text-secondary);

    background:
        var(--surface);

    font-size:
        0.4rem;

    font-weight:
        750;

    white-space:
        nowrap;
}


/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.transition-study__table-wrap {
    width:
        100%;

    max-width:
        100%;

    overflow:
        auto;

    scrollbar-width:
        thin;

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


.transition-study__table-wrap::-webkit-scrollbar {
    width:
        6px;

    height:
        6px;
}


.transition-study__table-wrap::-webkit-scrollbar-track {
    background:
        transparent;
}


.transition-study__table-wrap::-webkit-scrollbar-thumb {
    border-radius:
        999px;

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


/* =========================================================
   TABLE
   ========================================================= */

.transition-study__table {
    width:
        100%;

    min-width:
        760px;

    border-collapse:
        collapse;

    color:
        var(--text-primary);

    background:
        var(--surface);

    font-size:
        0.47rem;

    font-variant-numeric:
        tabular-nums;
}


.transition-study__table th,
.transition-study__table td {
    height:
        32px;

    padding:
        0.32rem
        0.48rem;

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

    text-align:
        left;

    vertical-align:
        middle;

    white-space:
        nowrap;
}


.transition-study__table thead th {
    position:
        sticky;

    top:
        0;

    z-index:
        3;

    height:
        29px;

    color:
        var(--text-secondary);

    background:
        var(--surface-muted);

    font-size:
        0.41rem;

    font-weight:
        800;
}


.transition-study__table tbody tr {
    transition:
        background-color
        var(--transition-fast);
}


.transition-study__table tbody tr:hover {
    background:
        var(--surface-muted);
}


.transition-study__table tbody tr:last-child td {
    border-bottom: 0;
}


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

.transition-study__note-cell {
    min-width:
        230px;

    max-width:
        360px;

    color:
        var(--text-muted);

    line-height:
        1.35;

    white-space:
        normal !important;
}


/* =========================================================
   COMPARISON EFFECT
   ========================================================= */

.transition-study__effect {
    min-height:
        18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        0
        0.3rem;

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

    border-radius:
        999px;

    color:
        var(--text-secondary);

    background:
        var(--surface-muted);

    font-size:
        0.38rem;

    font-weight:
        750;

    line-height:
        1;

    white-space:
        nowrap;
}


.transition-study__effect--mapped {
    color:
        var(--brand-green);

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

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


.transition-study__effect--review {
    color:
        #9b6619;

    border-color:
        rgba(155, 102, 25, 0.16);

    background:
        rgba(155, 102, 25, 0.07);
}


.transition-study__effect--blocked {
    color:
        #8b5b67;

    border-color:
        rgba(139, 91, 103, 0.16);

    background:
        rgba(139, 91, 103, 0.07);
}


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

.transition-study__empty {
    min-height:
        180px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap:
        0.25rem;

    padding:
        1.2rem;

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

    border-radius:
        8px;

    color:
        var(--text-muted);

    background:
        var(--surface-muted);

    text-align:
        center;
}


.transition-study__empty strong {
    color:
        var(--text-primary);

    font-size:
        0.58rem;

    font-weight:
        800;
}


.transition-study__empty span {
    max-width:
        380px;

    font-size:
        0.48rem;

    line-height:
        1.45;
}


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

.transition-study__mock-note {
    margin-top:
        0.6rem;

    padding:
        0.5rem
        0.6rem;

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

    border-radius:
        7px;

    color:
        var(--text-muted);

    background:
        var(--surface-muted);

    font-size:
        0.44rem;

    line-height:
        1.4;
}


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

html[data-theme="dark"]
.transition-study__status--mapped,
html[data-theme="dark"]
.transition-study__effect--mapped {
    color:
        #6fd3aa;
}


html[data-theme="dark"]
.transition-study__status--review,
html[data-theme="dark"]
.transition-study__effect--review {
    color:
        #e3b46b;
}


html[data-theme="dark"]
.transition-study__status--location,
html[data-theme="dark"]
.transition-study__status--added {
    color:
        #91abe0;
}


html[data-theme="dark"]
.transition-study__status--removed,
html[data-theme="dark"]
.transition-study__effect--blocked {
    color:
        #d798a6;
}


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

@media (max-width: 950px) {

    .transition-study__scope {
        grid-template-columns:
            1fr;
    }


    .transition-study__scope-controls {
        justify-content:
            flex-start;
    }


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


    .transition-study__summary-card:first-child {
        grid-column:
            span 2;
    }

}


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

@media (max-width: 700px) {

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


    .transition-study__compact-summary {
        gap:
            0.3rem;
    }


    .transition-study__compact-summary > div {
        min-height:
            46px;

        padding:
            0.35rem;
    }


    .transition-study__compact-summary strong {
        font-size:
            0.66rem;
    }


    .dashboard-panel--transition.dashboard-panel--expanded
    .transition-study__expanded {
        padding:
            0.65rem;
    }


    .transition-study__scope {
        padding:
            0.6rem;
    }


    .transition-study__scope-controls {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .transition-study__scope-group {
        width:
            100%;
    }


    .transition-study__segmented {
        width:
            100%;
    }


    .transition-study__scope-button {
        flex:
            1;
    }


    .transition-study__scope-select,
    .transition-study__scope-readonly {
        width:
            100%;
    }


    .transition-study__scope-compare {
        width:
            100%;
    }


    .transition-study__scope-compare
    .transition-study__scope-group {
        flex:
            1;
    }


    .transition-study__intro {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.4rem;
    }


    .transition-study__summary {
        grid-template-columns:
            1fr;
    }


    .transition-study__summary-card:first-child {
        grid-column:
            auto;
    }


    .transition-study__group-head {
        min-height:
            40px;
    }

}