#dashboard-page-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0rem;
}

/* #dashboard-compass {
    grid-area: compass;
    margin-right: 1rem;
}

#dashboard-compass-container {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
}

#dashboard-compass-annotations {
    position: absolute;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    top: 0;
    left: 0;
    flex-direction: column;
    transform: translate(50%, 50%);
}

#dashboard-compass .annotation {
    text-align: left;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    padding: 0;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
}

#dashboard-compass .color-box {
    border-radius: 3px;
    align-content: center;
    justify-content: center;
    display: flex;
}

#dashboard-compass h4 {
    text-align: center;
    margin-bottom: 1rem;
}

#dashboard-compass [id='{"index":0,"type":"compass-pv-text"}'] {
    font-size: clamp(12px, 2vw, 14px);
    color: #000000;
}

#dashboard-compass [id='{"index":0,"type":"compass-wind-text"}'] {
    font-size: clamp(12px, 2vw, 14px);
    color: #000000;
}

#dashboard-compass [id='{"index":0,"type":"compass-battery-text"}'] {
    font-size: clamp(12px, 2vw, 14px);
    color: #000000;
}

#dashboard-compass [id='{"index":0,"type":"compass-grid-text"}'] {
    font-size: clamp(12px, 2vw, 14px);
    color: #000000;
}
 
[id='{"index":0,"type":"compass-fig"}'] {
    height: 33%;
    width: 33%;
} */

/* Row 1: base cards (Netz, Stromerzeugung, Stromverbrauch, Batterien).
   All dashboard rows share the same 4-column grid so their column edges and
   gaps line up. The row1 base cards (3 or 4 of them) are laid out as a single
   equal-width flex row that spans the full grid width; on phones the flex row
   wraps into a 2x2 layout. */
.dashboard-row1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-row1-main {
    grid-column: 1 / -1;
    display: flex;
    gap: 1rem;
    min-width: 0;
}

.dashboard-row1-main>* {
    flex: 1 1 0;
    min-width: 0;
}

/* gap between card heading and content */
.dashboard-row1 .smart-tile .card-body {
    row-gap: 1rem;
}

/* per-card coloring: fill color + icon/border color */
.dashboard-row1 .smart-tile.grid {
    background-color: var(--color-blue-10);
    border: 1px solid var(--color-blue-70) !important;
}

.dashboard-row1 .smart-tile.grid .icon {
    color: var(--color-blue-70) !important;
}

.dashboard-row1 .smart-tile.production {
    background-color: var(--color-yellow-10);
    border: 1px solid var(--color-yellow-70) !important;
}

.dashboard-row1 .smart-tile.production .icon {
    color: var(--color-yellow-70) !important;
}

.dashboard-row1 .smart-tile.consumption {
    background-color: var(--color-red-10);
    border: 1px solid var(--color-red-70) !important;
}

.dashboard-row1 .smart-tile.consumption .icon {
    color: var(--color-red-70) !important;
}

.dashboard-row1 .smart-tile.all-batteries {
    background-color: var(--color-green-10);
    border: 1px solid var(--color-green-70) !important;
}

.dashboard-row1 .smart-tile.all-batteries .icon {
    color: var(--color-green-70) !important;
}

/* Row 2: graph (3/4) + KPI card (1/4) */
#dashboard-main-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
}

/* allow the grid tracks to shrink below their content width so the
   columns follow the screen width (3/4 graph, 1/4 KPI card) */
#dashboard-main-row>* {
    min-width: 0;
}

[id='{"index":0,"type":"dashboard-graph"}'] {
    grid-column: 1 / span 3;
    height: 100%;
}

[id='{"index":0,"type":"dashboard-graph"}']>.card,
[id='{"index":0,"type":"dashboard-graph"}'] .card-body {
    height: 100%;
}

[id='{"index":0,"type":"dashboard-graph-fig"}'] {
    width: 100%;
    height: 30rem;
}

/* erstes Y-Tick-Label ausblenden */
[id='{"index":0,"type":"dashboard-graph"}'] .yaxislayer-above .ytick:nth-of-type(1) text {
    visibility: hidden;
    pointer-events: none;
}

/* KPI card (Kennzahlen); its Ladebereich wrapper is the grid item */
.dashboard-kpi-area {
    grid-column: 4;
    display: flex;
}

/* the wrapper's inner div and the slot fill it; the spinner div is absolute while shown */
.dashboard-kpi-area>.dashboard-kpi-area,
.dashboard-kpi-area>.dashboard-kpi-slot {
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-kpi-slot {
    display: flex;
}

.dashboard-kpi-slot>.kpi-overview-card {
    width: 100%;
}

.kpi-overview-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kpi-entries {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
}

.kpi-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.kpi-entry .kpi-label {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1rem, calc(0.2rem + 0.833vw), 1.5rem);
    color: var(--color-primary-darker-grey);
}

.kpi-divider {
    border-top: 1px solid var(--color-primary-grey);
    width: 100%;
    margin: 0.5rem 0;
}

/* Row 3 filter: rounded button per present component type */
.dashboard-filter-row {
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.dashboard-filter-card .graph-card-title {
    margin-bottom: 1rem;
}

.dashboard-filter-row-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.dashboard-filter-label {
    color: var(--color-primary-dark-grey);
    white-space: nowrap;
    font-size: clamp(0.8rem, calc(0.05rem + 0.833vw), 1.1rem);
    line-height: 1.2;
}

.dashboard-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.dashboard-filter-button {
    border-radius: 6px;
    border: 1px solid var(--color-primary-grey);
    padding: 0.35rem 1.1rem;
    font-size: clamp(0.8rem, calc(0.05rem + 0.833vw), 1.1rem);
    line-height: 1.2;
    color: var(--color-primary-dark-grey);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dashboard-filter-button.active {
    background-color: var(--color-primary-white);
}

.dashboard-filter-button.inactive {
    background-color: var(--color-primary-light-grey);
}

.dashboard-filter-button:hover {
    filter: brightness(0.97);
}

/* Row 3: one card per component */
.dashboard-row3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    flex-shrink: 0;
}

.dashboard-row3>* {
    min-width: 0;
}

.dashboard-component-card {
    display: flex;
    min-height: 12rem;
}

.dashboard-component-card>* {
    width: 100%;
}

.smart-tile .status>* {
    font-size: clamp(1rem, calc(0.05rem + 0.833vw), 1.2rem);
}

@media (max-width: 1500px) {
    .dashboard-row3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1280px) and (orientation: portrait) {

    /* stack graph and KPI card on top of each other */
    #dashboard-main-row {
        grid-template-columns: 1fr;
    }

    [id='{"index":0,"type":"dashboard-graph"}'],
    .dashboard-kpi-area {
        grid-column: 1;
    }

    /* 2 columns-card layout */
    .dashboard-row3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .kpi-entries {
        flex-direction: row;
        justify-content: center;
    }

    .kpi-divider {
        border-top: none;
        border-left: 1px solid var(--color-primary-grey);
        width: auto;
        align-self: stretch;
        margin: 0 0.5rem;
    }

}

@media (max-width: 768px) {
    #dashboard-page-container {
        display: flex;
        flex-direction: column;
        padding: 0rem;
    }

    /* stack graph and KPI card on top of each other */
    #dashboard-main-row {
        grid-template-columns: 1fr;
    }

    [id='{"index":0,"type":"dashboard-graph"}'],
    .dashboard-kpi-area {
        grid-column: 1;
    }

    /* row1 base cards stack into a single column */
    .dashboard-row1-main {
        flex-wrap: wrap;
    }

    .dashboard-row1-main>* {
        flex: 1 1 100%;
    }

    .dashboard-row3 {
        grid-template-columns: 1fr;
    }

    .kpi-entries {
        flex-direction: row;
        justify-content: center;
    }

    .kpi-divider {
        border-top: none;
        border-left: 1px solid var(--color-primary-grey);
        width: auto;
        align-self: stretch;
        margin: 0 0.5rem;
    }

    .dashboard-filter-row-inner,
    .dashboard-filter-buttons {
        gap: 0.5rem;
    }

}