/* =========================================================
   Dashboard Chart Responsive Overrides
   Load this file AFTER the chart stylesheets.
   ========================================================= */

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

@media (max-width: 700px) {

    .vote-share-trend__svg {
        height: 190px;
    }

    .vote-share-chart__summary {
        flex-wrap: wrap;
    }

}



/* =========================================================
   B Responsive
   ========================================================= */

@media (max-width: 800px) {

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


    .performance-dynamic__table-wrap {
        border-left: 0;

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

        padding:
            0.7rem
            0
            0;
    }


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

}


@media (max-width: 520px) {

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

}



/* =========================================================
   E + F Responsive
   ========================================================= */

@media (max-width: 700px) {

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


    .competitive-chart__head,
    .competitive-chart__row {
        grid-template-columns:
            minmax(120px, 1.3fr)
            minmax(95px, 1fr)
            55px;
    }


    .competitive-compare__head,
    .competitive-compare__row {
        grid-template-columns:
            minmax(120px, 1.4fr)
            70px
            70px
            62px;
    }

}



/* =========================================================
   PRIMARY CHART ROW — RESPONSIVE OVERRIDE
   Must remain at bottom of stylesheet
   ========================================================= */


/* Tablet */

@media (max-width: 1050px) {

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


    /*
     * B gets full first row.
     */

    .dashboard-panels >
    .dashboard-panel:first-child {
        grid-column:
            1 / -1;
    }

}


/* Mobile */

@media (max-width: 700px) {

    .dashboard-panels {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 0.75rem;
    }


    .dashboard-panels >
    .dashboard-panel:first-child {
        grid-column:
            auto;
    }


    /*
     * Remove desktop equal-height forcing.
     */

    .dashboard-panels >
    .dashboard-panel {
        width: 100%;

        height: auto;
        min-height: 0;
    }


    /*
     * Prevent internal chart content
     * from forcing panel width.
     */

    .dashboard-panel,
    .dashboard-panel__body,
    .performance-dynamic,
    .vote-share-chart,
    .turnout-dynamic-chart {
        min-width: 0;
        max-width: 100%;
    }

}