/**
 * MeterSense small-screen scroll relief.
 * Unlocks vertical scrolling when dashboards lock the viewport on desktop.
 */
@media (max-width: 1024px) {
    html:has(body.dashboard-fullscreen),
    html:has(body.admin-dashboard),
    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(body.admin-dashboard) 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,
    body.admin-dashboard {
        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,
    .individual-overview .comparison-panels,
    .individual-overview .chart-panel {
        height: auto;
        min-height: 0;
    }

    .portfolio-overview .chart-container,
    .portfolio-overview #mainChart {
        min-height: 360px;
    }

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

    .admin-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - var(--header-height, 60px));
        overflow: visible;
    }

    .admin-main {
        min-height: 50vh;
        overflow: visible;
    }

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

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