/* Effektgruppe: charts/charts; Reihenfolge in inc/assets.php. */


/* =========================================================================
   CHART CONTAINER BASE (Standard: Bleibt perfekt für Kuchendiagramme)
   ========================================================================= */
   .my-chart-box { 
    position: relative;
    min-height: 500px;
    width: 100%;
    max-width: 1290px;
}

/* PURE CSS-MAGIE FÜR LINIENDIAGRAMME (Desktop)
   Erkennt die Linien automatisch anhand des data-attributs im Canvas!
*/
.my-chart-box:has([data-type="line"]),
.my-chart-box:has([data-type="line-epex"]) {
    min-height: 450px !important;
    height: 450px !important;
    max-height: 450px !important; /* Deckelt die Höhe rigoros auf Desktop */
}

/* =========================================================================
   RESPONSIVE BREAKPOINT (Mobilgeräte)
   ========================================================================= */
@media (max-width: 767px) {
    .my-chart-box {
        min-height: 600px !important; /* Mehr Platz für die Kuchen-Legende */
        max-width: 100%;
    }

    /* AUTOMATISCHE ANPASSUNG FÜR LINIENDIAGRAMME (Mobil) */
    .my-chart-box:has([data-type="line"]),
    .my-chart-box:has([data-type="line-epex"]) {
        min-height: 350px !important; 
        height: 350px !important;
        max-height: 350px !important; /* Deckelt die Höhe auf Mobile */
    }
}

/* =========================================================================
   CANVAS STYLING & FIX FOR CHART.JS INLINE STYLES
   ========================================================================= */
.custom-chart {
    display: block !important;
    filter: drop-shadow(0px 10px 12px rgba(0,0,0,0.1));
}

/* Zwingt den Canvas, sich exakt an die neue Container-Höhe anzupassen */
.my-chart-box:has([data-type="line"]) .custom-chart,
.my-chart-box:has([data-type="line-epex"]) .custom-chart {
    height: 100% !important;
}