/* ================================================
   Responsive heights for future tab graphs
   Apply to any dcc.Graph with className="future-graph"
   Breakpoints follow Bootstrap (xs <576, sm ≥576, md ≥768, lg ≥992, xl ≥1200)
   ================================================ */

/* Default (mobile-first, xs): smallest screens */
.plot-graph {
    height: 100px !important;     /* phones */
    max-height: 100px !important;
}

/* Small devices (sm ≥576px) */
@media (min-width: 576px) {
    .plot-graph {
        height: 100px !important;
        max-height: 100px !important;
    }
}

/* Medium devices (md ≥768px) */
@media (min-width: 1200px) {
    .plot-graph {
        height: 250px !important;
        max-height: 250px !important;
    }
}

/* Large devices (lg ≥992px) */
@media (min-width: 1650px) {
    .plot-graph {
        height: 300px !important;
        max-height: 300px !important;
    }
}

/* Extra large and above (xl ≥1200px, xxl ≥1400px etc.) */
@media (min-width: 2000px) {
    .plot-graph {
        height:350px !important;   /* cap at 350 on largest screens */
        max-height: 350px !important;
    }
}

/* Default (mobile-first) — stack */
.summary-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: 1;
}

.secondary-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: 2;
}

/* ≥1000px — default is 33/66 */
@media (min-width: 1000px){
    .summary-col {
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }
    .secondary-col {
        flex: 0 0 60% !important;
        max-width: 60% !important;
    }
}




/* ≥1650px — give Secondary more space (60/40) */
@media (min-width: 1650px) {
    .summary-col {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
    .secondary-col {
        flex: 0 0 66.666% !important;
        max-width: 66.666% !important;
    }
}


/* ≥2000px — desktop wide: 33/67 like a classic 4/8 split */
@media (min-width: 2000px) {
    .summary-col {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
    .secondary-col {
        flex: 0 0 66.666% !important;
        max-width: 66.666% !important;
    }
}


/* Default: Desktop width (≥ 992px) */
.responsive-offcanvas {
    width: 75% !important;
}

/* Tablets (width < 992px) */
@media (max-width: 1500px) {
    .responsive-offcanvas {
        width: 85% !important;
    }
}


/* Very small phones (< 576px) */
@media (max-width: 575.98px) {
    .responsive-offcanvas {
        width: 100% !important;
    }
}