#dashboard-map {
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

#dashboard-switch {
    position: absolute;
    z-index: 100000;
    top: 8px;
    left: 16px;
}

.consumption-title {
    color: #454B54;
    font-size: 1.5rem;
    place-items: center;
    display: flex;
    gap: 0.5rem;
}

.consumption-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    place-items: center;
    display: flex;
}

.savings-container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1;
}

.text-grey-sm {
    color: #6F7A85;
    font-size: 0.75rem;
}

.savings-badge {
    display: flex;
    align-items: center;
    background: #E8FFF4;
    border: 1px solid #8FE7BE;
    border-radius: 0.25rem;
    padding: 0.25rem;
    gap: 0.25rem;
}

.savings-text {
    color: #1DBF73;
    font-size: 0.875rem;
}

#portfolio-dashboard {
    display: grid;
    grid-template-columns: calc(100% - 500px) 500px;
    grid-template-rows: max-content max-content max-content;
    grid-template-areas:
        "headline   headline"
        "live-data  map"
        "chart      list";
    margin: 8px;
    gap: 8px;
}

#portfolio-dashboard>.dashboard-headline {
    grid-area: headline;
}

#portfolio-dashboard>#dashboard-live-data {
    grid-area: live-data;
}

#portfolio-dashboard>#dashboard-map {
    grid-area: map;
}

#portfolio-dashboard>#portfolio-chart-kpi {
    grid-area: chart;
}

#portfolio-dashboard>#portfolio-dashboard-list {
    grid-area: list;
}

#system-dashboard {
    display: grid;
    grid-template-columns: 1fr 400px;
    grid-template-rows: max-content max-content max-content;
    grid-template-areas:
        "headline   headline"
        "status     weather"
        "chart      chart";
    margin: 8px;
    gap: 8px;
}

#system-dashboard>.dashboard-headline {
    grid-area: headline;
}

#system-dashboard>#system-dashboard-status {
    grid-area: status;
}

#system-dashboard>#system-dashboard-weather {
    grid-area: weather;
}

#system-dashboard>#system-dashboard-chart-kpi {
    grid-area: chart;
}

.dashboard-headline {
    grid-column: 1 / 3;
    font-size: 1.5rem;
    padding: 0.5rem;
    padding-left: 1.5rem;
}

#dashboard-live-data {}

#dashboard-live-data-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

.dashboard-live-data-tile {
    display: flex;
    gap: 1rem;
}

.dashboard-live-data-tile-vertical {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    place-items: center;
}

.min-width-two-digit {
    min-width: 1.25em;
    text-align: end;
}

.dashboard-live-data-header {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    color: #3D454D;
}

.dashboard-live-data-values {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dashboard-live-data-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    align-items: center;
    padding-bottom: 0.25rem;
}

.dashboard-live-data-row [data-field] {
    color: #454B54;
}

.live-data-title {
    font-size: 0.75rem;
    line-height: 1;
    display: flex;
    place-items: center;
    gap: 0.25rem;
}

.live-data-value {
    font-size: 0.875rem;
    line-height: 1;
}

.dashboard-live-data-row:last-child {
    border: none;
    padding: none;
}

.badge-text-container {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.badge-yield {
    background-color: #FFC92F;
}

.badge-surplus {
    background-color: #FF962E;
}

.badge-heating {
    background-color: #FFA64C;
}

.badge-warm-water {
    background-color: #F65576;
}

.badge-grid-consumption {
    background-color: #606C79;
}

.badge-co2 {
    background-color: #ABB3BD;
}

.badge-self-sufficiency {
    background-color: #4CC5D4;
}

.badge-own-consumption {
    background-color: #75E2C7;
}

/* Dims a row whose value is not applicable for the active component filter, and
   neutralises its colored badge. */
.row-disabled {
    opacity: 0.3;
}

.row-disabled .badge {
    background-color: rgb(171, 179, 189);
}

.chart-container {
    flex: 1;
    min-height: 0;
    position: relative;
}

.legend-container {
    font: var(--idmCompCardTypographyBody);
    flex: 1;
    display: flex;
    justify-content: end;
}

.dashboard-kpis {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1px 1fr;
    width: 100%;
}

.dashboard-kpi-container {
    width: 100%;
    height: 172px;
    max-width: 100%;
    max-height: 172px;

    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}

.dashboard-kpi-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #7A838F;
    font-size: 0.75rem;
}

.dashboard-kpi-legend-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dashboard-kpi-chart {
    width: 100%;
    height: 150px;
    max-width: 100%;
    max-height: 150px
}

#portfolio-dashboard-list {
    overflow: auto;
    background: white;
    border-radius: 8px;
    padding: 24px;
    padding-block: 16px;
    min-height: 200px;
    max-height: calc(100vh - 365px);
}

.card {
    padding-inline: 1.5rem;
    padding-block: 1rem;
}

.bar-chart {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bar-chart-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    height: 2.5rem;
}

.bar-chart-row i {
    color: #454B54;
}

.bar-chart-row-no-data i {
    color: #C7CCD2
}

/* Holds the colored bar (absolutely positioned fill), the value and the
   savings. The value flows in normal flow with min-width = the bar width,
   so when its text is wider than the bar the value's box grows and pushes
   the savings along — keeping them adjacent and never overlapping. The
   colored fill stays at the true bar width regardless. */
.bar-chart-content {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* The colored fill. Anchored to the content area so its (percentage) width
   stays at the true data proportion even when the value box grows past it. */
.bar-chart-bar {
    position: absolute;
    left: 0;
    top: 0;
    /* explicit height (not just bottom:0) to override .placeholder's height */
    height: 100%;
    width: var(--bar-width, 0);
    box-sizing: border-box;
    border-radius: 0.25rem;
    transition: width 0.5s;
    z-index: 0;
}

.bar-chart-row-heating .bar-chart-bar {
    background: #FFA64C;
}

/*.bar-chart-row-heating .bar-chart-savings {*/
/*    border: 1px solid #E87F17;*/
/*    background: #FFD5AB;*/
/*}*/

.bar-chart-savings.savings-green {
    border: 1px solid #5CD268;
    color: #5CD268;
    background: #EDFAEE;
}

.bar-chart-savings.savings-red {
    border: 1px solid #E81B65;
    color: #454B54;
    background: #FFADCB;
}

.bar-chart-savings.savings-white {
    background: white;
    color: #3C4147;
    border: 1px solid #E3E5E8;
}

.bar-chart-row-warm-water .bar-chart-bar {
    background: #FF5B96;
}

/*.bar-chart-row-warm-water .bar-chart-savings {*/
/*    border: 1px solid #E81B65;*/
/*    background: #FFADCB;*/
/*}*/

.bar-chart-row-co2 .bar-chart-bar {
    background: #ABB3BD;
}

/*.bar-chart-row-co2 .bar-chart-savings {*/
/*    border: 1px solid #7A838F;*/
/*    background: #E3E5E8;*/
/*}*/

.bar-chart-row-no-data .bar-chart-bar {
    background: #EFF1F3;
    border: 1px dotted #ABB3BD;
}

.bar-chart-row-no-data .bar-chart-value {
    color: #C7CCD2;
}

.bar-chart-label {
    margin-top: 0.5rem;
    color: #6F7A85;
}

.bar-chart-value {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: var(--bar-width, 0);
    padding-left: 0.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 2.5rem;
    color: #454B54;
    white-space: nowrap;
    /* keep the savings gliding in sync with the animating bar */
    transition: min-width 0.5s;
}

.bar-chart-savings {
    flex: 0 0 auto;
    z-index: 1;
    background: #fff8;
    color: #454B54;
    font-size: 1rem;
    border-radius: 0.125rem;
    padding: 0.25rem;
    line-height: 100%;
    margin-block: auto;
    margin-right: 0.5rem;
    white-space: nowrap;
}

.bar-chart-savings.text-tiny {
    font-size: 0.75rem;
}

/* Remove (not just hide) empty savings so it claims no layout space — a
   full-width (100%) bar's value can then fill the row without an empty
   savings box overflowing past the edge. */
.bar-chart-savings:empty {
    display: none;
}

.chart-live-marker {
    position: absolute;
    top: -1rem;
    display: block;
    translate: -50% 0;
    padding: 0;
}

.chart-live-marker[data-popper-placement^="top"] {
    translate: -50% 0;
}

.chart-live-marker[data-popper-placement^="left"] {
    translate: calc(-100% - 12px) 0;
}

.chart-live-marker[data-popper-placement^="right"] {
    translate: 12px 0;
}

.chart-live-data {
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    border-top: 1px solid #ADB3BA;
}

.chart-live-header-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
}

.chart-live-header {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.live-time {
    color: var(--idmCoreColorMetalgray500);
}

.inactive-system {
    pointer-events: none;
    opacity: 0.5;
}

#system-dashboard .flex-row {
    display: grid;
    height: 48px;
    padding: 0.5rem 0;
}

#system-dashboard .flex-row:first-child {
    height: auto;
}

#system-dashboard .flex-row-cell {
    justify-content: center;
    color: var(--metalgray-600);
}

#system-dashboard .flex-row-cell:first-child {
    justify-content: center;
    color: var(--metalgray-800);
}

#system-dashboard .flex-row-cell:nth-child(2) {
    justify-content: start;
    color: var(--metalgray-800);
}

#system-dashboard .flex-row-cell:nth-child(3) {
    justify-content: end;
    color: var(--metalgray-800);
}


#system-dashboard .flex-row:last-child .flex-row-cell {
    border: none;
}

#system-dashboard .flex-row-header .flex-row-cell {
    color: #7A838F;
}

/* Upload Zone */


.upload {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    padding: 60px 176px 128px;
}

.upload-header {
    width: 628px;
}

.upload-header-zone {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
}

.upload-zone {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 40px;
    gap: 16px;

    text-align: center;
    width: 100%;
    background: white;
    border: 1px dashed var(--metalgray-500);

    border-radius: 8px;
}

.upload-zone-textarea {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 8px;
}

.upload-files {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

    width: 628px;
}

.upload-files-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

    width: 628px;
}

.uploaded-file {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0px;
    gap: 8px;
    width: 628px;
    border-bottom: 1px solid var(--metalgray-400);
}

.file-drop-area {
    position: relative;
    display: flex;
    align-items: center;
    padding: 25px;
    border-radius: 3px;
    transition: 0.2s;
}

.file-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
}

.file-delete-button {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 1;
}

.upload-zone .preview-image {
    display: none;
}

.upload-zone .preview-image[src] {
    display: block;
}

.upload-zone .preview-image~.file-delete-button {
    display: none;
}

.upload-zone .preview-image[src]~.file-delete-button {
    display: block;
}

.upload-zone .preview-image[src]~.upload-icon,
.upload-zone .preview-image[src]~.upload-zone-textarea {
    display: none;
}

.upload-zone:has(.preview-image[src]) {
    padding: 0;
    border: none;
}


#schedules-heatpumps .card-title-lg,
#schedules-boilers .card-title-lg {
    white-space: nowrap;
    flex-wrap: wrap;
}

#lineChart-legend-toggle,
#lineChart-system-legend-toggle {
    display: none;
}

#system-dashboard-kpis {
    grid-template-columns: 1fr 1px max-content 1px max-content 1px max-content;
}

#system-dashboard-kpis[data-has-heatpumps] {
    grid-template-columns: 1fr 1px max-content 1px max-content 1px max-content 1px max-content;
}

#system-dashboard-weather {
    padding: 1.5rem;
    padding-block: 1rem;
    min-height: 177px;
}

.system-dashboard-weather-day {
    display: grid;
    grid-template-areas:
        "day"
        "icon"
        "values";
    place-items: center;
}

#more-weather-button-container {
    text-align: end;
    margin-top: 1rem;
    white-space: nowrap;
}

#system-dashboard-weather .card-inner {
    gap: 0.5rem;
}

#system-dashboard .flex-row-cell {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--metalgray-200);
}

#system-dashboard .flex-row-cell {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--metalgray-200);
}

/* Cascade tree connector drawn in the empty icon area of cascade member rows */
#system-dashboard .cascade-cell {
    position: relative;
}

#system-dashboard .cascade-start,
#system-dashboard .cascade-mid {
    border-bottom: 1px solid transparent;
}

#system-dashboard .cascade-cell::before {
    content: "";
    position: absolute;
    width: 1px;
    background: #C5CAD1;
}

#system-dashboard .cascade-start::before {
    top: 50%;
    bottom: -1px;
}

#system-dashboard .cascade-mid::before {
    top: -1px;
    bottom: -1px;
}

#system-dashboard .cascade-end::before {
    top: -1px;
    height: calc(50% + 1px);
}

#system-dashboard .cascade-cell::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #C5CAD1;
}

@media (min-width: 1025px) {

    #portfolio-dashboard~#legend-dropdown,
    #system-dashboard~#legend-dropdown {
        display: none;
    }
}

@media (max-width: 1024px) {

    #portfolio-chart-kpi #lineChart-legend-container,
    #system-dashboard-chart-kpi [id^="lineChart-system-"][id$="-legend-container"] {
        display: none;
    }

    #lineChart-legend-toggle,
    #lineChart-system-legend-toggle {
        display: flex;
    }

    .dashboard-live-data-tile {
        flex-direction: column;
        place-items: center;
    }

    .dashboard-live-data-values {
        width: 100%;
    }
}


@media (max-width: 1366px) {
    #portfolio-dashboard {
        grid-template-columns: 50% 50%;
        grid-template-areas:
            "headline headline"
            "map  list"
            "live-data live-data"
            "chart chart";
    }

    #system-dashboard {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: max-content max-content max-content;
        grid-template-areas:
            "headline"
            "status"
            "weather"
            "chart";
        margin: 8px;
        gap: 8px;
    }

    .system-dashboard-weather-day {
        display: grid;
        grid-template-areas:
            "icon day"
            "icon values";
        place-items: flex-start;
        column-gap: 1rem;
        row-gap: 0;
        flex: 0 0 auto;
    }

    #weather-container {
        height: 100%;
        gap: 1rem;
    }

    #more-weather-button-container {
        text-align: end;
        margin-top: 0;
    }

    #system-dashboard-weather {
        min-height: auto;
    }

    #system-dashboard-weather .card-inner {
        flex-direction: row;
        place-items: center;
        gap: 2rem;
    }

    .system-dashboard-weather-day {
        flex-direction: row;
    }

    /* First child (bar-chart card-inner) gets its own row; remaining
       tiles + inter-tile dividers fill row 2. The first divider — which
       used to separate the bar-charts column from the tiles on a single
       row — is hidden so the second row doesn't start with an orphan
       separator. */
    #system-dashboard-kpis {
        grid-template-columns: 1fr 1px 1fr 1px 1fr;
        column-gap: 0.5rem;
    }

    #system-dashboard-kpis[data-has-heatpumps] {
        grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
    }

    #system-dashboard-kpis> :first-child {
        grid-column: 1 / -1;
    }

    #system-dashboard-kpis> :first-child+.divider-surface {
        display: none;
    }
}