/* Selector ist Kind von .accordion-item; dieser dient als Positionierungs-Context */
.charts-main-grid .accordion-item {
    position: relative;
}

/* Forecast-Source-Selector analog Forecast-Badge gestalten */
.charts-main-grid .forecast-source-selector {
    position: absolute;
    z-index: 4;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: middle;
    padding: 0.5rem 0;
    border-radius: 0;
    background: var(--bs-light, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color, #212529);
    box-shadow: none;
    appearance: none;
    display: inline-block;
    writing-mode: sideways-lr;
    text-orientation: mixed;
    transform: translateY(-50%);
    top: 50%;
}

/* Mini-Chart (collapsed) */
.charts-main-grid .accordion-item:has(.accordion-button.collapsed) .forecast-source-selector {
    height: calc(100% + 2px);
    width: 2em;
}

/* Expanded (offen) */
.charts-main-grid .accordion-item:has(.accordion-button:not(.collapsed)) .forecast-source-selector {
    left: -30px;
    height: auto;
    width: 2em;
}

/* Expanded unter 768px */
@media (max-width: 767.98px) {
    .charts-main-grid .accordion-item:has(.accordion-button:not(.collapsed)) .forecast-source-selector {
        left: -30px;
        height: auto;
        width: 2em;
    }
}

/* Provider-Warn-Icon (⚠) neben dem Selector */
.charts-main-grid .forecast-provider-warning-icon {
    position: absolute;
    z-index: 4;
    cursor: help;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--bs-warning, #ffc107);
}

/* Mini-Chart (collapsed): direkt neben dem Selector bei ~13rem */
.charts-main-grid .accordion-item:has(.accordion-button.collapsed) .forecast-provider-warning-icon {
    bottom: 0.85rem;
    left: 13rem;
    top: auto;
}

/* Expanded (offen): weiter rechts bei ~27rem */
.charts-main-grid .accordion-item:has(.accordion-button:not(.collapsed)) .forecast-provider-warning-icon {
    bottom: 0.85rem;
    top: auto;
    left: 27rem;
}

@media (max-width: 767.98px) {
    .charts-main-grid .accordion-item:has(.accordion-button:not(.collapsed)) .forecast-provider-warning-icon {
        left: 18rem;
    }
}

/* Custom Dropdown für Provider-Selector */
.charts-main-grid .forecast-source-selector-wrap {
    position: relative;
    display: inline-block;
}

.charts-main-grid .forecast-custom-dropdown {
    position: absolute;
    z-index: 3000;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

/* Mini-Chart (collapsed) */
.charts-main-grid .accordion-item:has(.accordion-button.collapsed) .forecast-custom-dropdown {
    height: calc(100% + 2px);
}

/* Expanded (offen) */
.charts-main-grid .accordion-item:has(.accordion-button:not(.collapsed)) .forecast-custom-dropdown {
    height: auto;
}

.charts-main-grid .forecast-dropdown-button {
    position: absolute;
    z-index: 4;
    writing-mode: sideways-lr;
    text-orientation: mixed;
    width: 2em;
    height: 100%;
    padding: 0.5rem 0;
    border-radius: 0;
    background: var(--bs-light, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color, #212529);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.15s ease;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.charts-main-grid .forecast-dropdown-button:hover {
    background: var(--bs-secondary, #6c757d);
    color: white;
}

.charts-main-grid .forecast-dropdown-menu {
    position: absolute;
    z-index: 3010;
    left: 100%;
    top: 0;
    background: var(--bs-light, #f8f9fa);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    display: none;
    margin-left: -1px;
}

.charts-main-grid .forecast-dropdown-menu.show {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    padding: 0;
    width: auto;
    max-width: none;
    height: calc(100% - 2px);
    overflow-x: auto;
    margin-top: 1px;
}

.charts-main-grid .forecast-dropdown-item {
    padding: 0.5rem 0.25rem;
    cursor: pointer;
    color: var(--bs-body-color, #212529);
    font-size: 0.64rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s ease;
    border-right: 1px solid var(--bs-border-color, #dee2e6);
    flex: 0 0 auto;
    writing-mode: sideways-lr;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.charts-main-grid .forecast-dropdown-item:last-child {
    border-right: none;
}

.charts-main-grid .forecast-dropdown-item:hover {
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, #212529);
}


/* Setze Breite auf 100% für section, wenn KEINE .accordion-button.collapsed vorhanden ist */
/* Smooth width transition for section */
:root {
    --area-below-zero-opacity: 0.06;
}

html[data-bs-theme="dark"] {
    --area-below-zero-opacity: 0.12;
}

.charts-main-grid section {
    transition: width 1s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.charts-main-grid section:not(:has(.accordion-button.collapsed)),
/* Only stretch when the *outer* chart accordion is open (not when an inner nested accordion like the table is open) */
.charts-main-grid section:has(> .accordion > .accordion-item > .accordion-header > .accordion-button:not(.collapsed)) {
    width: 100%;
}

/* Raw-Accordion (Aussen/Innen/Rohdaten) behaves like chart cards: when opened, take full width */
.raw-accordion-row>section {
    transition: flex 0.5s cubic-bezier(0.4, 0.0, 0.2, 1),
        max-width 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.raw-accordion-row>section:has(.accordion-collapse.collapsing),
.raw-accordion-row>section:has(.accordion-collapse.show) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Give some spacing around the raw accordion row */
.raw-accordion-row {
    margin-top: calc(1.5rem - 16px);
    margin-bottom: 1.5rem;
}

.charts-main-grid section .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    align-items: center !important;
}

.charts-main-grid section>.accordion>.accordion-item>.accordion-header>.accordion-button.collapsed {
    height: 120px;
}

/* Forecast-Header: im Mini-Zustand nur das definierte Haupt-Icon, aufgeklappt mehrere Icons */
.charts-main-grid .accordion-button.collapsed .forecast-title-icons .forecast-icon-secondary {
    display: none;
}

.charts-main-grid .forecast-badge {
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: middle;
    cursor: help;
}

/* Meta-Text (Datum/Uhrzeit/Dauer) auf kleinen Screens ausblenden */
@media (max-width: 767.98px) {
    .charts-main-grid .forecast-meta-text {
        display: none !important;
    }
}

/* Meta-Text auch im Mini-Chart (collapsed Zustand) ausblenden */
.charts-main-grid .accordion-button.collapsed .forecast-meta-text {
    display: none !important;
}

.charts-main-grid .accordion-button.collapsed .forecast-badge {
    position: absolute;
    left: 1rem;
    bottom: 0.65rem;
    margin-right: 0;
    z-index: 2;
}

/* Badge darf im collapsed Zustand nicht am titelinternen position-relative hängen */

@media (max-width: 1199.98px) {
    #providerForecast24hSlot {
        order: -6;
    }

    #providerForecast7dSlot {
        order: -5;
    }

    #providerForecast7dComfortSlot {
        order: -3;
    }

    #providerForecast7dPressureUvSlot {
        order: -1;
    }
}

/* Ausnahme: Innere Accordion-Header im Gap-Chart (Tabelle) dürfen nicht erzwungen hoch sein */
#gapChartMount .accordion-button.collapsed {
    height: auto !important;
}

/* Raw-Accordion-Karten: Wenn geschlossen, Höhe halbieren (besseres Kachel-Look & Platz) */
.raw-accordion-card .accordion-button.collapsed {
    height: 60px !important;
}

/* Raw-Accordion-Karten: Rahmen nur bei Warnung/Kritisch (ohne Layout-Verschiebung) */
.raw-accordion-card {
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--bs-body-bg);
}

.raw-accordion-card.status-warning .accordion-item {
    border-left: 4px solid #ffc107;
}

.raw-accordion-card.status-danger .accordion-item {
    border-left: 4px solid #dc3545;
}

/* Ensure collapsed header keeps 120px on small screens, too */
@media (max-width: 767.97px) {
    .charts-main-grid section .accordion .accordion-item .accordion-header .accordion-button.collapsed {
        height: 120px;
    }
}

/* Accordion-Header collapsed: Bootstrap-Variable + Transparenz, Dark-Mode kompatibel */
.accordion-header-collapsed {
    background: none !important;
}

.chart-header-no-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none;
    background: #f8f9fa;
}

/* =========================
   Chart Base (kernneutral)
   ========================= */

/* Container-Grundfläche */
.chart-body {
    width: 100%;
    aspect-ratio: 1200 / 390;
    /* Verhältnis Desktop (1200px) zu Höhe (390px) */
    max-height: 390px;
    min-height: 190px;
    overflow: visible;
    /* Tooltips nicht clippen */
}

/* Fullscreen: Chart soll wirklich die komplette Höhe nutzen */
.fs-active .card-header {
    display: none !important;
}

.fs-active .chart-body {
    /* Keep full-screen height but add breathing room so labels/ticks are not clipped */
    height: calc(100vh - 2rem) !important;
    min-height: calc(100vh - 2rem);
    max-height: none !important;
    aspect-ratio: auto !important;

    /* Add padding inside the chart body (top/bottom) so content isn't flush against the viewport edge */
    padding: 1rem 0;
    box-sizing: border-box;
}

/* Falls Browser aspect-ratio noch nicht unterstützen sollte, geben wir Fallback-Mindestgrößen */
@supports not (aspect-ratio: 1 / 1) {
    .chart-body {
        height: 390px;
    }
}

/* SVG füllt Body-Fläche */
.chart-body>svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}

.fs-exit-btn {
    position: fixed;
    top: .75rem;
    right: .75rem;
    z-index: 3000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

/* Tooltip-Schicht */
.tc-tooltip {
    z-index: 2500;
}

.fs-active .tc-tooltip {
    position: fixed !important;
}

/* Distance selector should not appear in fullscreen (it floats on top) */
.fs-active .distance-selector {
    display: none !important;
}

/* Achsen/Grid/Labels – neutrale Farben */
svg .grid {
    stroke: currentColor;
    opacity: .2;
}

svg .grid-v {
    stroke: currentColor;
    opacity: .05;
}

svg .y-tick,
svg .x-tick {
    font-size: 11px;
    opacity: .75;
}

/* Lücken-Chart: compact collapsed + left indicator */
#qualityAcc>.accordion-item {
    --quality-acc-left-border-width: 4px;
    --quality-acc-left-border-color: var(--bs-accordion-border-color, transparent);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--bs-border-color, #dee2e6) !important;
    border-left: 1px solid var(--bs-border-color, #dee2e6) !important;
    border-radius: 0.5rem;
}

#qualityAcc>.accordion-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--quality-acc-left-border-width);
    background: var(--quality-acc-left-border-color);
    pointer-events: none;
    z-index: 4;
}

#qualityAcc .accordion-item,
#qualityAcc .accordion-item::before,
#qualityAcc .accordion-button {
    transition: none !important;
}

#qualityAcc.quality-no-data>.accordion-item {
    --quality-acc-left-border-width: 1px;
    --quality-acc-left-border-color: var(--bs-border-color, #dee2e6);
}

#qualityAcc.quality-no-data #qualityAccTitle {
    pointer-events: none !important;
    cursor: default !important;
    color: var(--bs-warning-text-emphasis) !important;
}

#qualityAcc.quality-no-data #qualityAccTitle .bi,
#qualityAcc.quality-no-data .accordion-button .bi-graph-up {
    pointer-events: none !important;
    cursor: default !important;
    color: var(--bs-warning-text-emphasis) !important;
}

#qualityAcc>.accordion-item>.accordion-header>.accordion-button>.chart-info-pill.quality-acc-pill {
    position: absolute !important;
    display: inline-flex !important;
    align-self: auto !important;
    order: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#qualityAcc>.accordion-item>.accordion-header>.accordion-button.collapsed>.chart-info-pill.quality-acc-pill {
    inset: auto auto 10px 10px !important;
    transform: none !important;
    max-width: calc(100% - 5rem) !important;
    opacity: 0.7 !important;
}

#qualityAcc>.accordion-item>.accordion-header>.accordion-button:not(.collapsed)>.chart-info-pill.quality-acc-pill {
    inset: 50% auto auto var(--quality-acc-pill-left, 10px) !important;
    transform: translateY(-50%) !important;
    max-width: calc(100% - 12rem) !important;
    opacity: 1 !important;
}

#qualityAcc .accordion-button small {
    font-weight: 400;
    opacity: 0.6;
}

#qualityAcc .accordion-button.quality-outer-button,
#qualityAcc .accordion-button.quality-outer-button.collapsed,
#qualityAcc .accordion-button.quality-outer-button:not(.collapsed),
#qualityAcc .accordion-button.quality-outer-button::after {
    transition: none !important;
    animation: none !important;
}

#qualityAcc .accordion-button.quality-outer-button {
    background-image: none !important;
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
}

#qualityAcc .accordion-button.collapsed {
    background-color: transparent !important;
}

#qualityAcc .accordion-button:not(.collapsed) {
    box-shadow: none;
}

#qualityAcc .accordion-button .bi-graph-up {
    font-size: 1.2rem;
    margin-right: 0.35rem;
}

#qualityAcc .accordion-button .quality-time-range,
#qualityAcc .accordion-button .quality-time-range-small {
    display: none !important;
}

#qualityAcc .accordion-button .gap-badges {
    transition: opacity .3s ease, transform .3s ease;
}

#qualityAcc .accordion-button.collapsed .gap-badges {
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
    height: 0;
}

#qualityAcc .accordion-button .gap-mini-chart {
    display: none;
}

#qualityAcc .accordion-button.collapsed .gap-mini-chart {
    display: block;
}

#qualityAcc .accordion-button.collapsed {
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
}

#qualityAcc .accordion-button .quality-time-range {
    display: none;
}

#qualityAcc .accordion-button.collapsed .quality-time-range {
    display: inline;
}

#qualityAcc .accordion-button:not(.collapsed) .gap-mini-chart {
    display: none !important;
}

/* Make collapsed header taller so mini-chart is visible */
#qualityAcc #qualityHdr>.accordion-button.collapsed {
    min-height: 96px;
    /* increased from 60px */
}

/* Development: Mini-Chart tweaks to keep labels small and lines crisp */
#qualityAcc .accordion-button .gap-mini-chart {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

#qualityAcc .accordion-button .gap-mini-chart svg {
    overflow: hidden !important;
}

/* Mini SVG: full width, fixed visual height; keep labels readable */
#qualityAcc .accordion-button .gap-mini-chart svg {
    width: 100% !important;
    height: 100% !important;
    /* fill the button height */
    max-width: 100% !important;
    display: block;
    margin: 0 auto;
}

/* label sizing moved to inline styles in development JS to avoid global CSS conflicts */

#qualityAcc .accordion-button .gap-mini-chart rect {
    shape-rendering: crispEdges;
}

svg .gap {
    fill: currentColor;
    opacity: .08;
}

/* neutrale Zero-Line */
svg .zero-line {
    stroke: #9aa0a6;
    /* grau */
    opacity: .6;
    stroke-dasharray: none;
    /* durchgehend */
    shape-rendering: crispEdges;
}


/* Legend (Punkte neutral; Farben kommen chart-spezifisch) */
.legend-dot {
    display: inline-block;
    width: .75em;
    height: .75em;
    border-radius: 50%;
    margin-right: .35em;
    vertical-align: middle;
}

/* Legend responsive wrap */
.legend,
.chart-legend {
    /* Bootstrap provides layout classes (d-flex / flex-wrap / gap) so we keep this minimal.
       Padding on the right keeps space for the reset button. */
    padding-right: 48px;
    /* Bei Bedarf kann hier später row-gap/column-gap ergänzt werden. */
}

.legend .legend-item,
.chart-legend .legend-item {
    flex: 0 0 auto;
}

/* Einheitliche L/R-Badge-Optik (heller), wie im Kern */
.legend-axis-badge,
.badge[data-core-axis-badge="1"] {
    font-size: 10px;
    opacity: 0.7;
}

/* Reset-Button (dev) sitzt am rechten Rand des Headers */
.dev-legend-reset {
    position: absolute;
    top: 10px;
    right: 8px;
    z-index: 30;
    padding: 0.3rem 0.45rem;
}

html[data-bs-theme="dark"] svg .grid {
    opacity: .12;
}

html[data-bs-theme="dark"] svg .x-tick,
html[data-bs-theme="dark"] svg .y-tick {
    opacity: .82;
}

/* Development: Monitored values unified bar width and visual threshold lines
   Uses 15% / 50% / 85% visual partition markers (15/35/35/15 distribution)
   This file under /development is used for dev-only styling. */
#monitoredValuesTable td.mv-bar {
    padding: 0 1rem;
}

#monitoredValuesTable .mv-bar-container {
    width: 520px;
    max-width: 62vw;
    min-width: 220px;
    margin: 0;
    position: relative;
    display: block;
    height: 1rem;
    box-sizing: border-box;
}

#monitoredValuesTable .mv-bar-container .threshold-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(73, 80, 87, 0.45);
    z-index: 4;
    pointer-events: none;
    transform: translateX(-0.5px);
}

/* labels below/above the bar inside the unified width container */
#monitoredValuesTable .mv-bar-container .mv-bar-labels {
    position: relative;
    height: 1.1rem;
    margin-top: 4px;
    font-size: 0.65rem;
}

#monitoredValuesTable .mv-bar-container .mv-bar-labels div {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #495057;
    pointer-events: none;
}

#monitoredValuesTable .mv-bar-container .mv-num-label {
    pointer-events: auto;
    padding: 0 4px;
    border-radius: 2px;
    font-weight: 500;
    /* no opaque background to keep visual lightweight */
}

@media (max-width: 991.98px) {

    /* hide visual partition markers on small screens to save space */
    #monitoredValuesTable .mv-bar-container {
        width: calc(100% - 96px);
        max-width: 100%;
    }

    #monitoredValuesTable .mv-bar-container .threshold-line {
        display: none;
    }
}

/* Hover-Marker (vertikal, gestrichelt) */
.hover-marker {
    stroke: currentColor;
    opacity: .6;
    stroke-width: 1;
    stroke-dasharray: 4 4;
    pointer-events: none;
}

/* y-Referenzlinie (z. B. 0 °C) */
.yref-line {
    stroke: currentColor;
    opacity: .45;
    stroke-width: 1;
}

/* === Centralized chart tooltip === */
.chart-tooltip {
    position: absolute;
    /* in FS switched to fixed by helper */
    pointer-events: none;
    display: none;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .15);
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: var(--chart-tooltip-size, 12px);
    line-height: 1.25;
    color: var(--bs-body-color, #212529);
    z-index: 5;
    white-space: nowrap;
}

.chart-tooltip strong {
    font-weight: 600;
}

/* Chart loading overlay: hidden by default, shown via .loading-active */
.chart-loading-overlay {
    display: none !important;
    align-items: center;
    justify-content: center;
}

.chart-loading-overlay.loading-active {
    display: flex !important;
}

.chart-legend [data-axis="L"]::after {
    content: " · L";
    color: var(--axis-color, #b2182b);
    opacity: .85;
}

.chart-legend [data-axis="R"]::after {
    content: " · R";
    color: var(--axis-color, #2166ac);
    opacity: .85;
}

/* Keyframes for chart overlay and blur pulse (moved from JS) */
@keyframes chartOverlayPulse {
    0% {
        transform: scale(0.95, 0.9);
    }

    50% {
        transform: scale(1.05, 1.1);
    }

    100% {
        transform: scale(0.95, 0.9);
    }
}

@keyframes chartBlurPulse {
    0% {
        filter: blur(2px) brightness(0.95);
    }

    50% {
        filter: blur(6px) brightness(0.98);
    }

    100% {
        filter: blur(2px) brightness(0.95);
    }
}

@keyframes overlayOpacityPulse {
    0% {
        opacity: 0.75;
    }

    50% {
        opacity: 0.95;
    }

    100% {
        opacity: 0.75;
    }
}

.fullscreen-icon {
    transition: opacity 0.5s;
    opacity: 1;
    visibility: visible;
}

.fullscreen-icon.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Header-Statistiken (Min/Akt/Max) – clean, nur Text */
.header-stats {
    position: static;
    /* im Flow neben dem Icon */
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 11;
    padding: 0;
    font-variant-numeric: tabular-nums;
}

/* Skeleton Zustand */
.header-stats.loading {
    opacity: .85;
}

/* Bei .loading zeigen wir Skeleton-Inhalte innerhalb derselben Struktur */
.header-stats .skel-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* Bootstrap Placeholder Support + eigener Shimmer */
/*
.header-stats .placeholder {
    position: relative;
    background-color: color-mix(in srgb, var(--bs-secondary-bg, #eee) 85%, #000 15%);
    border-radius: 0;
    overflow: hidden;
    display: inline-block;
    vertical-align: baseline;
    border: 1px solid color-mix(in srgb, var(--bs-secondary-bg, #eee) 70%, #000 30%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 1px rgba(255, 255, 255, .35);
}

.header-stats .placeholder-glow .placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
    animation: skel-shimmer 1.1s infinite;
}

@keyframes skel-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.header-stats .placeholder {
    min-height: 0 !important;
}

.header-stats .placeholder-wave {
    -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, .8) 75%, #000 95%);
    mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, .8) 75%, #000 95%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    animation: placeholder-wave 2s linear infinite;
}

@keyframes placeholder-wave {
    100% {
        -webkit-mask-position: -200% 0%;
        mask-position: -200% 0%;
    }
}

.header-stats.loading .stat-unit.placeholder,
.header-stats.loading .stat-unit .placeholder,
.header-stats.loading .stat-time .placeholder {
    background-color: color-mix(in srgb, var(--bs-secondary-bg, #eee) 92%, #000 8%);
    border-color: color-mix(in srgb, var(--bs-secondary-bg, #eee) 85%, #000 15%);
}
    */

/* Aktueller Wert - groß und prominent */
.header-stats .stat-current {
    font-weight: 400;
    font-size: 2.5rem;
    line-height: .95;
    white-space: nowrap;
}

.header-stats .stat-unit {
    font-size: 1.25rem;
    opacity: .3;
    font-weight: 400;
    margin-left: .2em;
}

/* Min/Max Container */
.header-stats .stat-minmax {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-stats .stat-row {
    display: flex;
    align-items: flex-end;
    /* Uhrzeit-Baseline nach unten */
    gap: 8px;
    white-space: nowrap;
}

.header-stats .stat-value {
    font-weight: 500;
    font-size: .85rem;
    opacity: .85;
    text-align: right;
    /* Werte rechtsbündig */
    flex: 0 0 65px;
    /* Feste Breite für vertikale Ausrichtung */
}

.header-stats .stat-time {
    font-size: .65rem;
    opacity: .3;
    font-variant-numeric: tabular-nums;
    text-align: left;
    /* Zeiten linksbündig */
    flex: 0 0 auto;
    /* Nur so breit wie Text */
}

/* Statistiken nur bei zugeklapptem Accordion anzeigen */
.accordion-button:not(.collapsed)+* .header-stats,
.accordion-button:not(.collapsed) .header-stats {
    display: none;
}

/* Titeltext im Collapsed ausblenden, Icon sichtbar lassen */
.accordion-button.collapsed .fw-semibold {
    font-size: 0 !important;
}

.accordion-button.collapsed .fw-semibold i,
.accordion-button.collapsed .fw-semibold .bi {
    font-size: 1.5rem !important;
}

#sunmoonChartMount .accordion-button.collapsed>.fw-semibold>i.bi.bi-sun {
    display: none !important;
}

.accordion-button .sunmoon-mini-overlay {
    display: none;
}

.accordion-button.collapsed .sunmoon-mini-overlay {
    position: absolute;
    inset: 0;
    z-index: 11;
    pointer-events: none;
    display: flex;
    padding: 35px 1rem 0 1rem;
}

/* Sun/Moon Mini-Header als kompakte 4-Spalten-Tabelle */
.accordion-button.collapsed .sunmoon-mini-table-wrap {
    max-width: 100%;
    position: relative;
    isolation: isolate;
    border-radius: 0.55rem;
}

.accordion-button.collapsed .sunmoon-mini-center-table {
    width: 100%;
    padding-left: 5.2rem;
    padding-right: 5.2rem;
    display: flex;
    justify-content: center;
}

.accordion-button.collapsed .sunmoon-mini-weather-wrap {
    position: absolute;
    left: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    height: 95%;
    width: auto;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.accordion-button.collapsed .sunmoon-mini-weather-glyph {
    width: 92%;
    height: 92%;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.92);
    background: transparent;
    border: 0;
    box-shadow: none;
}

.accordion-button.collapsed .sunmoon-mini-weather-glyph .sunmoon-weather-glyph {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    color: rgba(255, 255, 255, 0.97);
    text-shadow: 0 1px 3px rgba(8, 14, 24, 0.45);
    font-size: 4rem;
    line-height: 1 !important;
    z-index: 4;
}

.accordion-button.collapsed .sunmoon-mini-weather-glyph .sunmoon-weather-glyph-sun {
    font-size: 4rem;
}

.accordion-button.collapsed .sunmoon-mini-weather-glyph .sunmoon-weather-glyph-cloudsun,
.accordion-button.collapsed .sunmoon-mini-weather-glyph .sunmoon-weather-glyph-clouds {
    font-size: 4rem;
}

.accordion-button.collapsed .sunmoon-mini-weather-glyph .sunmoon-weather-glyph-rain,
.accordion-button.collapsed .sunmoon-mini-weather-glyph .sunmoon-weather-glyph-rain-heavy,
.accordion-button.collapsed .sunmoon-mini-weather-glyph .sunmoon-weather-glyph-rain-sun,
.accordion-button.collapsed .sunmoon-mini-weather-glyph .sunmoon-weather-glyph-storm,
.accordion-button.collapsed .sunmoon-mini-weather-glyph .sunmoon-weather-glyph-snow,
.accordion-button.collapsed .sunmoon-mini-weather-glyph .sunmoon-weather-glyph-fog {
    font-size: 4rem;
}

.accordion-button.collapsed .sunmoon-mini-weather-glyph .sunmoon-weather-icon {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(8, 14, 24, 0.45));
}

.accordion-button.collapsed .sunmoon-mini-moon-wrap {
    position: absolute;
    right: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    height: 95%;
    width: auto;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.accordion-button.collapsed .sunmoon-mini-moon-bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.62;
    pointer-events: none;
    z-index: 1;
}

.accordion-button.collapsed .sunmoon-mini-moon-meta {
    position: absolute;
    bottom: 0.15rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.08rem 0.38rem;
    border-radius: 999px;
    font-size: 0.64rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 247, 220, 0.98);
    background: rgba(19, 27, 46, 0.78);
    backdrop-filter: blur(1.5px);
    z-index: 3;
}

/* === FORECAST SIDEBAR LABEL: Zentrale Definition === */
.forecast-sidebar-label {
    border-left: 16px solid rgb(91, 125, 177);
    position: relative;
}

.forecast-sidebar-label::before {
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    color: #d0d0d0;
    font-size: 0.6rem;
    font-weight: 600;
    text-align: center;
    writing-mode: sideways-lr;
    text-orientation: mixed;
    white-space: nowrap;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forecast-sidebar-label[data-label="24h"]::before {
    content: 'Vorhersage 24h';
}

.forecast-sidebar-label[data-label="7d"]::before {
    content: 'Vorhersage 7d';
}

.forecast-sidebar-label[data-label="vorhersage"]::before {
    content: 'Vorhersage';
}

/* Sun/Moon Accordion: Basis-Border */
#sunmoonChartMount .accordion-item {
    border-left: 16px solid rgb(91, 125, 177);
    position: relative;
}

/* Sun/Moon Accordion: größerer Border wenn .forecast-sidebar-label */
#sunmoonChartMount .forecast-sidebar-label {
    border-left: 16px solid rgb(91, 125, 177);
}

/* Sun/Moon Accordion: natuerliche Body-Hoehe und Legende ausblenden */
#sunmoonChartMount .chart-body {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: hidden;
}

#sunmoonChartMount .legend,
#sunmoonChartMount .chart-legend {
    display: none !important;
}

#sunmoonChartMount .sunmoon-expanded-table tbody tr.sunmoon-row-timeline {
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#sunmoonChartMount .sunmoon-expanded-table tbody tr.sunmoon-row-timeline>td {
    background-color: transparent !important;
}

#sunmoonChartMount .sunmoon-expanded-table.table-hover>tbody>tr.sunmoon-row-timeline:hover>* {
    --bs-table-accent-bg: transparent;
    background-color: transparent !important;
}

#sunmoonChartMount .sunmoon-expanded-table {
    --bs-table-color: var(--bs-secondary-color) !important;
    --bs-table-color-type: var(--bs-secondary-color) !important;
    --bs-table-color-state: var(--bs-secondary-color) !important;
    color: var(--bs-secondary-color);
}

#sunmoonChartMount .sunmoon-expanded-table> :not(caption)>*>* {
    color: var(--bs-secondary-color) !important;
}

#sunmoonChartMount .sunmoon-col-date {
    white-space: nowrap;
    line-height: 1.15;
}

#sunmoonChartMount .sunmoon-col-weather {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

#sunmoonChartMount .sunmoon-expanded-weather-glyph {
    display: inline-flex;
    width: 1.9rem;
    height: 1.9rem;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#sunmoonChartMount .sunmoon-weather-icon-expanded {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

#sunmoonChartMount .sunmoon-col-date br {
    display: none;
}

#sunmoonChartMount .sunmoon-date-second {
    display: inline-block;
}

#sunmoonChartMount .sunmoon-col-mobile {
    display: none;
}

#sunmoonChartMount .sunmoon-mobile-stack {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

#sunmoonChartMount .sunmoon-mobile-line {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.15;
}

#sunmoonChartMount .sunmoon-mobile-line i.bi {
    width: 0.95rem;
    text-align: center;
    opacity: 0.8;
}

#sunmoonChartMount .sunmoon-mobile-moon-glyph {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto;
}

#sunmoonChartMount .sunmoon-mobile-moon-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
}

#sunmoonChartMount .sunmoon-mobile-moon-percent {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.95);
    pointer-events: none;
}

@media (max-width: 767.98px) {

    #sunmoonChartMount .sunmoon-col-sun-detail,
    #sunmoonChartMount .sunmoon-col-moon-detail,
    #sunmoonChartMount .sunmoon-col-moon-icon,
    #sunmoonChartMount .sunmoon-col-moon-illum {
        display: none;
    }

    #sunmoonChartMount .sunmoon-col-mobile {
        display: table-cell;
        vertical-align: top;
    }

    #sunmoonChartMount .sunmoon-expanded-table th,
    #sunmoonChartMount .sunmoon-expanded-table td {
        padding-top: 0.05rem;
        padding-bottom: 0.05rem;
    }

    #sunmoonChartMount .sunmoon-col-date {
        width: 1%;
        white-space: normal;
    }

    #sunmoonChartMount .sunmoon-col-weather {
        display: table-cell;
        width: 1%;
        min-width: auto;
        text-align: center;
    }

    #sunmoonChartMount .sunmoon-expanded-weather-glyph {
        width: 2.7rem;
        height: 2.7rem;
    }

    #sunmoonChartMount .sunmoon-col-date br {
        display: inline;
    }

    #sunmoonChartMount .sunmoon-mobile-sun,
    #sunmoonChartMount .sunmoon-mobile-moon-times {
        min-width: auto;
        width: 1%;
    }

    #sunmoonChartMount .sunmoon-mobile-moon-symbol {
        width: 1%;
        min-width: auto;
        text-align: center;
    }
}

.accordion-button.collapsed .sunmoon-mini-table {
    --bs-table-bg: transparent;
    --bs-table-color: inherit;
    position: relative;
    z-index: 2;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.accordion-button.collapsed .sunmoon-mini-table th,
.accordion-button.collapsed .sunmoon-mini-table td {
    border: 0;
    padding-top: 0.06rem;
    padding-bottom: 0.06rem;
    padding-left: 0.22rem !important;
    padding-right: 0.22rem !important;
    vertical-align: middle;
}

.accordion-button.collapsed .sunmoon-mini-table th:first-child,
.accordion-button.collapsed .sunmoon-mini-table td:first-child {
    padding-right: 0.16rem !important;
}

.accordion-button.collapsed .sunmoon-mini-table thead th {
    font-size: 0.64rem;
    font-weight: 600;
    opacity: 0.7;
}

.accordion-button.collapsed .sunmoon-mini-table tbody td {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.accordion-button.collapsed .sunmoon-mini-table i.bi {
    font-size: 0.9rem;
}

/* Responsive: 120px Höhe auch mobil behalten und Stats im Flow lassen */
@media (max-width: 767.97px) {
    .charts-main-grid section .accordion .accordion-item .accordion-header .accordion-button.collapsed {
        height: 120px;
        position: relative;
    }

    .header-stats {
        display: flex;
        align-items: center;
        gap: 0;
    }

    /* Akt neben Icon */
    .header-stats .stat-current {
        font-size: 1.5rem;
    }

    .header-stats .stat-unit {
        font-size: 0.75rem;
    }

    /* Min/Max absolut positioniert, unten links */
    .header-stats .stat-minmax {
        position: absolute;
        left: 1rem;
        bottom: 2.5rem;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin: 0;
    }
}

/* Desktop-Layout: Akt unter Icon (linke Spalte), Min/Max rechts daneben */
@media (min-width: 768px) {

    /* Flex-Container des Accordion-Headers darf umbrechen,
       damit .header-stats unter das Icon rutscht */
    .charts-main-grid section .accordion .accordion-item .accordion-header .accordion-button.collapsed {
        flex-wrap: wrap;
        align-items: flex-start;
        position: relative;
        /* für gezielte Positionierung des Pfeils */
    }

    /* .header-stats belegt die volle Breite in neuer Zeile */
    .charts-main-grid section .accordion .accordion-item .accordion-header .accordion-button.collapsed .header-stats {
        flex: 0 0 100%;
        width: 100%;
        margin-top: -40px;
        /* Block leicht nach oben ziehen */
    }

    .header-stats {
        align-items: center;
        column-gap: 16px;
    }

    .header-stats .stat-current {
        grid-column: 1;
    }

    .header-stats .stat-minmax {
        grid-column: 2;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* Nicht flex-end, damit Zeilen volle Breite nutzen */
    }

    /* Pfeil (Bootstrap ::after) oben rechts fixieren */
    .charts-main-grid section .accordion .accordion-item .accordion-header .accordion-button.collapsed::after {
        position: absolute;
        top: 8px;
        right: 1rem;
        margin-top: 0;
        /* überschreibt evtl. vertikale Zentrierung */
    }
}

/* Monitored values: unify bar visual width and add threshold-line styling
   We keep this in development css so it only affects the dev UI during testing. */
#monitoredValuesTable td.mv-bar {
    /* make bars visually consistent across rows but still responsive */
    max-width: 760px;
    width: min(62vw, 760px);
    min-width: 260px;
    box-sizing: border-box;
}

#monitoredValuesTable td.mv-bar .threshold-line {
    position: absolute;
    top: -6px;
    height: calc(100% + 12px);
    width: 1px;
    background: rgba(0, 0, 0, 0.10);
    z-index: 7;
    pointer-events: none;
    border-radius: 1px;
}

/* ensure labels inside bars remain readable when the bar width is constrained */
#monitoredValuesTable td.mv-bar div[style] {
    /* target inline-styled bar container created by JS */
    overflow: visible;
}

/* Entferne Blur-Overlay und Schein für Accordion-Titel, alles wieder Standard */

/* ============================================================================ */
/* Sun/Moon-Shading & Guides für Chart-Integration */
/* ============================================================================ */

svg .sunmoon-shadings {
    pointer-events: none;
}

svg .sunmoon-shading {
    transition: opacity 0.2s ease;
    pointer-events: none;
}

svg .sunmoon-night-before,
svg .sunmoon-night-after {
    fill: rgba(25, 45, 100, 0.12);
    stroke: none;
}

svg .sunmoon-vguide {
    pointer-events: none;
}

/* Provider limits: compact multi-color utilization bar (development table) */
#monitoredProvidersTable {
    width: 100%;
}

#monitoredProvidersTable th.provider-col-provider,
#monitoredProvidersTable td.provider-col-provider {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
}

#monitoredProvidersTable th.provider-col-fetched,
#monitoredProvidersTable td.provider-col-fetched {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

#monitoredProvidersTable th.provider-col-cache,
#monitoredProvidersTable td.provider-col-cache {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
}

#monitoredProvidersTable th.provider-col-util,
#monitoredProvidersTable td.provider-col-util {
    width: auto;
    min-width: 0;
}

#monitoredProvidersTable td.provider-util-cell {
    min-width: 190px;
}

#monitoredProvidersTable:not(.provider-advanced-visible) th.provider-col-util,
#monitoredProvidersTable:not(.provider-advanced-visible) td.provider-col-util {
    width: 100%;
}

#monitoredProvidersTable .provider-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.95;
    cursor: help;
    user-select: none;
    vertical-align: middle;
}

#monitoredProvidersTable th.provider-col-advanced,
#monitoredProvidersTable td.provider-col-advanced {
    --provider-col-width: 10rem;
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;
    min-width: 0;
    width: 0.01px;
    padding-inline: 0;
    opacity: 0;
    border-inline-width: 0;
    transition: max-width .62s cubic-bezier(0.2, 0.86, 0.22, 1),
        width .62s cubic-bezier(0.2, 0.86, 0.22, 1),
        padding-inline .48s ease,
        border-inline-width .48s ease,
        opacity .26s ease;
    pointer-events: none;
}

#monitoredProvidersTable th.provider-col-advanced>.provider-col-content,
#monitoredProvidersTable td.provider-col-advanced>.provider-col-content {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    transform: translateX(-8px);
    opacity: 0;
    filter: blur(1.5px);
    transition: transform .48s cubic-bezier(0.2, 0.86, 0.22, 1),
        opacity .22s ease,
        filter .36s ease;
}

#monitoredProvidersTable.provider-advanced-visible th.provider-col-advanced,
#monitoredProvidersTable.provider-advanced-visible td.provider-col-advanced {
    max-width: var(--provider-col-width);
    width: var(--provider-col-width);
    padding-inline: .5rem;
    opacity: 1;
    border-inline-width: 1px;
    pointer-events: auto;
}

#monitoredProvidersTable.provider-advanced-visible th.provider-col-advanced>.provider-col-content,
#monitoredProvidersTable.provider-advanced-visible td.provider-col-advanced>.provider-col-content {
    transform: translateX(0);
    opacity: 1;
    filter: none;
}


.provider-table-with-toggle {
    display: flex;
    align-items: stretch;
}

.provider-table-with-toggle.provider-layout-animating {
    transition: height 1.45s cubic-bezier(0.16, 0.84, 0.24, 1);
    overflow: hidden;
}

#sunmoonChartMount .sunmoon-time-shift-group {
    white-space: nowrap;
}

.provider-table-with-toggle .provider-table-scroll {
    flex: 1 1 auto;
    min-width: 0;
}

.provider-table-with-toggle .provider-toggle-dock {
    flex: 0 0 1rem;
    width: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.provider-table-with-toggle .provider-columns-toggle {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    border-radius: 0 1rem 1rem 0;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.provider-table-with-toggle .provider-columns-toggle .bi {
    transform-origin: center;
    transition: transform 0.95s cubic-bezier(0.18, 0.96, 0.24, 1);
    will-change: transform;
}

.provider-table-with-toggle:has(#monitoredProvidersTable.provider-advanced-visible) .provider-columns-toggle .bi {
    transform: rotate(180deg);
}

#monitoredProvidersTable .provider-util-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 170px;
}

#monitoredProvidersTable .provider-util-bar {
    position: relative;
    flex: 1 1 auto;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.16);
    background: linear-gradient(90deg,
            rgba(42, 140, 84, 0.45) 0%,
            rgba(42, 140, 84, 0.45) 55%,
            rgba(220, 171, 33, 0.42) 75%,
            rgba(188, 67, 67, 0.42) 100%);
}

#monitoredProvidersTable .provider-util-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg,
            rgba(40, 109, 70, 0.35) 0%,
            rgba(177, 135, 25, 0.4) 72%,
            rgba(142, 45, 45, 0.45) 100%);
}

#monitoredProvidersTable .provider-util-marker {
    position: absolute;
    top: -2px;
    width: 2px;
    height: calc(100% + 4px);
    background: rgba(33, 37, 41, 0.75);
    transform: translateX(-1px);
    border-radius: 1px;
}

#monitoredProvidersTable .provider-util-value {
    flex: 0 0 auto;
    min-width: 2.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #334;
    font-size: 0.78rem;
    font-weight: 600;
}

.tooltip.provider-util-tooltip .tooltip-inner {
    width: max-content;
    max-width: 92vw;
}

.tooltip.provider-util-tooltip .tooltip-inner table {
    width: max-content;
}