/* 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)) {
    width: 100%;
}

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

/* 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 {
    min-height: 390px;
    overflow: visible;
    /* Tooltips nicht clippen */
}

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

/* Fullscreen */
.fs-active .card-header {
    display: none !important;
}

.fs-active .chart-body {
    min-height: 100vh;
}

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

/* 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;
}

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

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

/* 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;
}

/* 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;
    }

    .header-stats {
        flex-wrap: wrap;
        gap: 10px 12px;
    }

    /* Akt neben Icon; Min/Max darunter, linksbündig */
    .header-stats .stat-current {
        order: 1;
        font-size: 1.5rem;
    }

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

    .header-stats .stat-minmax {
        order: 2;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 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 */
    }
}

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