/**
 * MeterSense small-screen scroll relief.
 * Unlocks vertical scrolling when dashboards lock the viewport on desktop.
 */
@media (max-width: 1399.98px) {
    html:has(.portfolio-overview) {
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    html:has(.portfolio-overview) body {
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .portfolio-overview,
    .portfolio-overview__main,
    .portfolio-overview__chart-col,
    .portfolio-overview__side-col {
        height: auto;
        min-height: 0;
        flex: none;
    }

    .portfolio-overview .chart-container,
    .portfolio-overview #mainChart {
        min-height: 320px !important;
        height: auto !important;
        position: relative !important;
        inset: auto !important;
    }

    .portfolio-overview .chart-nav-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    .portfolio-overview .chart-nav-end {
        flex-wrap: wrap;
        max-width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
}

@media (max-width: 1024px) {
    html:has(body.dashboard-fullscreen),
    html:has(#sankeyContainer),
    html:has(.individual-overview),
    html:has(.portfolio-overview),
    html:has(#metering-scope),
    html:has(#lch-scope),
    html:has(#muc-scope),
    html:has(.power-generation) {
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    html:has(body.dashboard-fullscreen) body,
    html:has(.individual-overview) body,
    html:has(.portfolio-overview) body,
    html:has(#lch-scope) body,
    html:has(#muc-scope) body,
    html:has(.power-generation) body,
    body.dashboard-fullscreen {
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .dashboard-grid,
    .dashboard-viewport {
        height: auto;
        min-height: 0;
    }

    .dashboard-grid > .panel:not(.chart-container),
    .dashboard-grid .card:not(.chart-container) {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    body.dashboard-fullscreen .panel:not(.chart-container) {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    body.utility-dashboard .panel.chart-container {
        display: flex;
        flex-direction: column;
        min-height: min(56vh, 520px);
        height: auto;
        overflow: hidden;
    }

    body.utility-dashboard .panel.chart-container .chart-wrapper {
        flex: 1 1 auto;
        position: relative;
        width: 100%;
        min-height: 320px;
        height: min(48vh, 460px);
    }

    body.utility-dashboard .panel.chart-container #mainChart {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 320px !important;
    }

    .portfolio-overview,
    .individual-overview,
    .individual-overview .dashboard-grid {
        height: auto;
        min-height: 0;
        flex: none;
    }

    .portfolio-overview .main-content-grid,
    .portfolio-overview .main-chart-card,
    .portfolio-overview .side-panel-stack,
    .portfolio-overview__main,
    .portfolio-overview__chart-col,
    .portfolio-overview__side-col,
    .individual-overview .comparison-panels,
    .individual-overview .chart-panel {
        height: auto;
        min-height: 0;
        flex: none;
    }

    .portfolio-overview .chart-container,
    .portfolio-overview #mainChart {
        min-height: 320px !important;
        height: auto !important;
        position: relative !important;
        inset: auto !important;
    }

    .portfolio-overview .chart-nav-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    .portfolio-overview .chart-nav-end {
        flex-wrap: wrap;
        max-width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .individual-overview .chart-panel,
    .individual-overview #mainChart {
        min-height: 360px;
    }

    #metering-scope {
        min-height: 0;
        height: auto;
        overflow: visible;
    }

    #lch-scope.page-wrapper,
    #muc-scope.page-wrapper {
        height: auto;
        min-height: calc(100vh - 60px);
        overflow: visible;
    }

    .power-generation.dashboard-container,
    .power-generation .main-content-grid,
    .power-generation .chart-card {
        height: auto;
        min-height: 0;
    }

    .aspect-ratio-wrapper {
        max-height: none;
        overflow-y: visible;
    }

    /* Administration shell keeps a fixed viewport + off-canvas settings nav
       (see administration.php). Do not stack the long sidebar above the iframe. */
    html:has(.admin-layout) body.admin-dashboard {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }

    .admin-layout {
        flex-direction: row;
        height: calc(100dvh - var(--header-height, 80px));
        min-height: 0;
        overflow: hidden;
    }

    .admin-main {
        min-height: 0;
        overflow: hidden;
    }

    #sankeyContainer {
        height: auto;
        min-height: min(62vh, 520px);
        overflow: visible;
    }

    #sankey {
        min-height: 360px;
        height: 55vh;
    }
}