[id='{"index":0,"type":"analytics-graph-fig"}'] {
    overflow: hidden;
    background-color: var(--background-color);
    padding: 20px;
}

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

[id='{"index":0,"type":"energy-power-switch-container"}'] .btn-check:checked+.btn-outline-primary,
[id='{"index":0,"type":"energy-power-switch-container"}'] .btn-outline-primary.active {
    color: var(--color-primary-white);
    background-color: var(--color-primary-blue);
    border-color: var(--color-primary-blue);
}

[id='{"index":0,"type":"energy-power-switch-container"}'] .btn-outline-primary:not(.active) {
    color: var(--color-primary-midrange-grey);
    background-color: transparent;
    border-color: transparent;
}

/* Buttons exakt 68 x 40 px */
[id='{"index":0,"type":"energy-power-switch"}'] .btn {
    display: flex;
    width: 4.6875rem;
    min-width: 4.6875rem;
    height: 2.5rem;
    padding: 0.25rem 0.875rem;
    margin: 0;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

[id='{"index":0,"type":"energy-power-switch"}'] .form-check {
    padding-left: 0;
    margin: 0;
    width: 4.6875rem;
    height: 2.5rem;
}

[id='{"index":0,"type":"energy-power-switch-container"}'] .form-check-inline {
    margin-right: 0rem;
}

#analytics-page-container .form-label {
    margin-bottom: 0.5rem;
}

/* continuous grey bar behind the whole button group, matching the height of the other row components */
[id='{"index":0,"type":"energy-power-switch"}'] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 10rem;
    padding: 0.31rem;
    gap: 0.0625rem;
    border-radius: 0.5rem;
    background-color: var(--color-primary-light-grey);
}

[id='{"index":0,"type":"energy-power-info-button"}'] {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

[id='{"index":0,"type":"analytics-cards"}'] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--analytics-tile-min-width), 1fr));
    gap: var(--analytics-tile-gap);
}

#analytics-page-container {
    /* shared by the general cards and the Wirtschaftlichkeit card, which takes the width of one of them */
    --analytics-tile-min-width: 400px;
    --analytics-tile-gap: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#analytics-page-container .dropdown,
#analytics-page-container .date-selector {
    height: 3rem;
    line-height: 2rem;
    align-items: center;
}

#analytics-page-container .dropdown:focus,
#analytics-page-container .date-selector:focus {
    border-color: var(--focus-color);
    box-shadow: 0 0 0 0.2rem var(--focus-color);
}

#analytics-page-container .dropdown option:checked {
    background-color: #E0E3E5;
}

#analytics-page-container .dropdown .Select__option--is-focused {
    background-color: #681118;
}

#analytics-page-container .filter-container {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.analytics-graph-kpi-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
}

.analytics-graph-kpi-row [id='{"index":0,"type":"analytics-graph"}'] {
    flex: 1 1 auto;
    min-width: 0;
}

.graph-card-footer {
    padding: 0 1.25rem;
}

.graph-card-footer-note {
    margin-bottom: 0;
    color: var(--color-primary-midrange-grey);
    font-size: 0.875rem;
}

/* collapses to zero width when the callback returns no card */
.analytics-kpi-card-container {
    display: flex;
}

.analytics-kpi-card-container:not(:empty) {
    flex: 0 0 20rem;
}

/* Ladebereich wrapper of the KPI card is the row's flex item; it takes the card's width,
   also while its spinner shows (e.g. on the first load, before any card) */
.analytics-kpi-area {
    display: flex;
}

.analytics-kpi-area:has(.analytics-kpi-card-container:empty):not(:has(> .analytics-kpi-area + div > *)) {
    display: none;
}

.analytics-kpi-area:has(.analytics-kpi-card-container:not(:empty)),
.analytics-kpi-area:has(> .analytics-kpi-area + div > *) {
    flex: 0 0 20rem;
}

.analytics-kpi-area>.analytics-kpi-area,
.analytics-kpi-area>.analytics-kpi-area>.analytics-kpi-card-container {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

/* an empty finance container adds no gap to the page while no spinner shows */
#analytics-page-container>.analytics-finance-area:has(.analytics-finance-empty):not(:has(> .analytics-finance-area + div > *)) {
    display: none;
}

.analytics-header-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.analytics-export-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.analytics-export-section {
    margin-bottom: 1.25rem;
}

.analytics-export-section .form-label {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.analytics-export-section .form-check-input {
    margin-top: 0rem;
}

.analytics-kpi-card {
    width: 100%;
    background-color: var(--background-color);
}

.analytics-kpi-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    gap: 1.5rem;
}

.analytics-kpi-card .kpi-card-title {
    color: var(--color-primary-darker-blue);
    font-weight: 700;
    font-size: clamp(1rem, calc(0.2rem + 0.833vw), 1.5rem);
}

.analytics-kpi-card .kpi-card-rows p {
    margin: 0;
    font-size: clamp(0.8rem, calc(0.05rem + 0.833vw), 1.1rem);
}

/* the KPI value (second element of the row) */
.analytics-kpi-card .kpi-card-rows span p+p {
    font-weight: 400;
    white-space: nowrap;
}

/* values partly based on invalid/missing measurements */
.analytics-kpi-card .kpi-card-rows span p.invalid {
    font-weight: 400;
}

.analytics-kpi-card .kpi-card-rows span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

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

.analytics-kpi-card .kpi-card-footnotes {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 0.5rem;
    margin-left: auto;
    font-size: 0.9rem;
}

.analytics-kpi-card .kpi-card-footnote {
    margin: 0;
    font-size: 0.7rem;
    text-align: right;
    color: var(--color-primary-darker-grey);
}

.analytics-kpi-card .kpi-card-footnote .invalid-footnote {
    /* in cursive */
    font-style: italic;
}

.analytics-kpi-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 1rem 0;
}

h4.analytics-kpi-header-title {
    color: var(--color-primary-dark-grey);
    font-weight: 700;
}

h4.analytics-kpi-header-subtitle {
    color: var(--color-primary-dark-grey);
    font-weight: 400;
}

@media (max-width: 768px) {
    .analytics-graph-kpi-row {
        flex-direction: column;
    }

    .analytics-graph-kpi-row [id='{"index":0,"type":"analytics-graph"}'],
    .analytics-kpi-card-container:not(:empty),
    .analytics-kpi-area:has(.analytics-kpi-card-container:not(:empty)),
    .analytics-kpi-area:has(> .analytics-kpi-area + div > *) {
        flex: 1 1 auto;
        width: 100%;
    }
}

.analytics-cost-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.analytics-cost-title-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* the title sits centred next to its info button; the enclosing header spaces it */
.analytics-cost-title-group h4.analytics-kpi-header-title {
    margin-bottom: 0;
}

/* finance container modes, set by register_cost_cards_callback */
.analytics-finance-container.analytics-finance-empty {
    display: none;
}

.analytics-finance-container.analytics-finance-direct .analytics-finance-details-toggle {
    display: none;
}

/* without a Wirtschaftlichkeit card the sections are shown directly, independent of the collapse state */
.analytics-finance-container.analytics-finance-direct [id='{"index":0,"type":"analytics-finance-details"}'] {
    display: block;
}

/* ... and without the surrounding panel */
.analytics-finance-container.analytics-finance-direct .analytics-finance-details-panel {
    margin-top: 0;
    border: 0;
    border-radius: 0;
}

.analytics-finance-container.analytics-finance-direct .analytics-finance-details-body {
    padding: 0;
    border-top: 0;
}

/* disclosure row and breakdown share one subtle frame below the Wirtschaftlichkeit card */
.analytics-finance-details-panel {
    margin-top: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

/* the padding sits here, not on the collapse, so its height animation stays smooth */
.analytics-finance-details-body {
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
}

/* full-width disclosure row, the panel header */
.analytics-finance-details-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-radius: calc(0.5rem - 1px);
    background-color: transparent;
    color: var(--color-primary-dark-grey);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

/* while open, the hover background meets the breakdown with square corners */
.analytics-finance-details-toggle[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.analytics-finance-details-toggle:hover {
    background-color: var(--color-primary-light-grey);
}

.analytics-finance-details-toggle:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

.analytics-finance-details-chevron {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1;
    color: var(--color-primary-darker-grey);
    transition: transform 0.2s ease-in-out;
}

/* the chevron points down while the breakdown is open */
.analytics-finance-details-toggle[aria-expanded="true"] .analytics-finance-details-chevron {
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .analytics-finance-details-toggle,
    .analytics-finance-details-chevron {
        transition: none;
    }
}

.analytics-cost-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.analytics-cost-badge-label {
    font-size: 0.75rem;
    color: var(--color-primary-darker-grey);
}

.analytics-cost-badge-value {
    font-weight: 700;
    color: var(--color-primary-dark-grey);
}

.analytics-cost-footnote {
    font-size: 0.8rem;
    color: var(--color-primary-darker-grey);
    margin: 0.5rem 0;
}

.cost-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 0.5rem;
    width: 100%;
}

/* a single card stays left-aligned with a capped width; inside the breakdown's shared grid
   (below) the grid wrapper is dissolved, so the card takes one shared column instead */
.cost-card-grid.cost-card-grid-single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
}

/* the Wirtschaftlichkeit card is exactly as wide as the first general card: the same min width
   and gap, with the track count capped by the number of general cards (set as
   --analytics-general-card-count by register_analysis_cards_callback) like auto-fit does */
[id='{"index":0,"type":"analytics-balance-section"}'] .cost-card-grid.cost-card-grid-single {
    grid-template-columns: repeat(
        auto-fill,
        minmax(
            max(
                var(--analytics-tile-min-width),
                calc(
                    (100% - (var(--analytics-general-card-count, 6) - 1) * var(--analytics-tile-gap))
                    / var(--analytics-general-card-count, 6)
                )
            ),
            1fr
        )
    );
    gap: var(--analytics-tile-gap);
    max-width: none;
}

.cost-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cost-card .cost-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cost-card .cost-card-title {
    color: var(--color-primary-dark-grey);
    font-weight: 700;
    font-size: clamp(1rem, calc(0.625rem + 0.75vw), 1.25rem);
    line-height: 1.2;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* component type icon left of the title (per-component revenue cards) */
.cost-card .cost-card-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.cost-card .cost-card-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

/* the reserved two-line height keeps header and divider aligned across the cards of a row */
.cost-card .cost-card-subtitle {
    color: var(--color-primary-darker-grey);
    font-size: clamp(0.75rem, calc(0.5rem + 0.5vw), 0.9375rem);
    line-height: 1.25;
    min-height: 2.5em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.cost-card .cost-card-divider {
    border-top: 1px solid var(--color-primary-grey);
}

.cost-card .cost-card-rows {
    display: flex;
    flex-direction: column;
}

.cost-card .cost-card-rows span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.cost-card .cost-card-rows p {
    margin: 0;
    font-size: clamp(0.8rem, calc(0.05rem + 0.833vw), 1.1rem);
}

.cost-card .cost-card-rows span p:first-child {
    min-width: 0;
}

/* values never wrap or shrink; only the label gives way */
.cost-card .cost-card-rows span p + p {
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}

.cost-card.cost-card-summary {
    background-color: var(--color-primary-blue);
    color: var(--color-primary-white);
}

.cost-card.cost-card-summary .cost-card-title,
.cost-card.cost-card-summary .cost-card-subtitle,
.cost-card.cost-card-summary .cost-card-rows p {
    color: var(--color-primary-white);
}

.cost-card.cost-card-summary .cost-card-divider {
    border-top-color: var(--color-secondary-blue-40);
}

/* the Wirtschaftlichkeit result row is separated from the section rows and emphasised */
.cost-card.balance .cost-card-rows > span:last-child {
    border-top: 1px solid var(--color-primary-grey);
    margin-top: 0.25rem;
    padding-top: 0.25rem;
}

.cost-card.balance .cost-card-rows > span:last-child p {
    font-weight: 700;
}

/* the headers of all finance cards follow the general cards (tiles.css):
   icon size like .smart-tile .icon, icon-title gap like .smart-tile .tile-header */
.analytics-finance-container .cost-card .cost-card-title-row {
    gap: 0.75rem;
}

.analytics-finance-container .cost-card .cost-card-icon {
    font-size: clamp(1.25rem, calc(0.625rem + 1.875vw), 1.875rem);
}

/* the Gesamtkosten card has no reserved subtitle lines */
.cost-card.balance .cost-card-subtitle {
    display: none;
}

@media (max-width: 768px) {
    .cost-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1280px) and (orientation: portrait) {
    .cost-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* one shared grid for the cards of all breakdown sections: section wrappers and card rows
   are dissolved (display: contents), so every card sits in the same column tracks with the
   general cards' min width and gap; headers and footnotes span all columns, so each section
   starts on a new row and a section with fewer cards leaves the right area blank */
.analytics-finance-details-body {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(var(--analytics-tile-min-width), 100%), 1fr)
    );
    gap: var(--analytics-tile-gap);
}

.analytics-finance-details-body > div,
.analytics-finance-details-body > div > .row,
.analytics-finance-details-body > div > .row > .cost-card-grid {
    display: contents;
}

.analytics-finance-details-body > div > .analytics-kpi-header,
.analytics-finance-details-body > div > .analytics-cost-footnote {
    grid-column: 1 / -1;
    padding-left: 0.25rem;
}

/* the breakdown cards take their subtitle's natural height (still clamped to two lines)
   instead of the reserved two lines; an empty subtitle takes no space at all */
.analytics-finance-details-body .cost-card .cost-card-subtitle {
    min-height: 0;
}

.analytics-finance-details-body .cost-card .cost-card-subtitle:empty {
    display: none;
}

/* breakdown headers are never truncated: title and subtitle wrap instead */
.analytics-finance-details-body .cost-card .cost-card-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
}

.analytics-finance-details-body .cost-card .cost-card-subtitle:not(:empty) {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: visible;
}

/* header, divider and rows of every breakdown card sit on three row tracks of the shared
   grid (subgrid of card and card body), so the cards of one grid row share the header
   track: it takes the tallest header's height and all dividers of that row align. Headers
   and footnotes span all columns, so cards of different sections never share a row.
   Without subgrid support the cards keep their flex layout. */
@supports (grid-template-rows: subgrid) {
    .analytics-finance-details-body .cost-card {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
    }

    /* keeps its 0.5rem gap (.cost-card .card-body), the shared grid's row gap */
    .analytics-finance-details-body .cost-card > .card-body {
        display: grid;
        grid-row: 1 / -1;
        grid-template-rows: subgrid;
    }
}

/* the grid gap adds to these margins, so they keep the former section spacing */
.analytics-finance-details-body > div > .analytics-kpi-header {
    margin: 0.5rem 0;
}

.analytics-finance-details-body > div > .analytics-cost-footnote {
    margin: 0;
}

/* full width wherever the general cards stack (tiles.css) */
@media (max-width: 768px), (max-width: 1280px) and (orientation: portrait) {
    [id='{"index":0,"type":"analytics-balance-section"}'] .cost-card-grid.cost-card-grid-single {
        grid-template-columns: minmax(0, 1fr);
    }

    .analytics-finance-details-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.component-dropdown-option {
    display: inline-flex;
    align-items: center;
}

.component-dropdown-icon {
    margin-right: 0.6rem;
    font-size: 1.25rem;
    line-height: 1;
}