/**
 * Interstellar Ball Manager - Chart Styles
 * 
 * Anpassungen für Chartist.js passend zum Interstellar Ball Manager Design.
 */

/* ========================================================================
   CONTAINER
   ======================================================================== */
.sbm-chart {
    position: relative;
    width: 100%;
    min-height: 200px;
}

.sbm-chart--small {
    min-height: 150px;
}

.sbm-chart--large {
    min-height: 300px;
}

/* ========================================================================
   CHARTIST BASIS-STYLES (überschreiben Default)
   ======================================================================== */

/* Linien */
.ct-series-a .ct-line,
.ct-series-a .ct-point {
    stroke: var(--sbm-color-primary);
}

.ct-series-b .ct-line,
.ct-series-b .ct-point {
    stroke: var(--sbm-color-success);
}

.ct-series-c .ct-line,
.ct-series-c .ct-point {
    stroke: var(--sbm-color-warning);
}

.ct-series-d .ct-line,
.ct-series-d .ct-point {
    stroke: var(--sbm-color-error);
}

/* Flächen unter Linien */
.ct-series-a .ct-area {
    fill: var(--sbm-color-primary);
    fill-opacity: 0.1;
}

.ct-series-b .ct-area {
    fill: var(--sbm-color-success);
    fill-opacity: 0.1;
}

/* Balken */
.ct-series-a .ct-bar {
    stroke: var(--sbm-color-primary);
    stroke-width: 20px;
}

.ct-series-b .ct-bar {
    stroke: var(--sbm-color-success);
    stroke-width: 20px;
}

.ct-series-c .ct-bar {
    stroke: var(--sbm-color-warning);
    stroke-width: 20px;
}

.ct-series-d .ct-bar {
    stroke: var(--sbm-color-error);
    stroke-width: 20px;
}

/* Pie/Donut */
.ct-series-a .ct-slice-pie,
.ct-series-a .ct-slice-donut {
    fill: var(--sbm-color-primary);
    stroke: var(--sbm-color-primary);
}

.ct-series-b .ct-slice-pie,
.ct-series-b .ct-slice-donut {
    fill: var(--sbm-color-success);
    stroke: var(--sbm-color-success);
}

.ct-series-c .ct-slice-pie,
.ct-series-c .ct-slice-donut {
    fill: var(--sbm-color-warning);
    stroke: var(--sbm-color-warning);
}

.ct-series-d .ct-slice-pie,
.ct-series-d .ct-slice-donut {
    fill: var(--sbm-color-error);
    stroke: var(--sbm-color-error);
}

/* Grid & Achsen */
.ct-grid {
    stroke: var(--sbm-color-neutral-border);
    stroke-dasharray: 2px;
}

.ct-label {
    fill: var(--sbm-color-text-dim);
    color: var(--sbm-color-text-dim);
    font-size: var(--sbm-font-size-xs);
}

.ct-label.ct-horizontal {
    justify-content: center;
}

/* ========================================================================
   CHART-KARTEN (für Dashboard-Widgets)
   ======================================================================== */
.sbm-chart-card {
    background: var(--sbm-color-surface);
    border-radius: var(--sbm-radius-lg);
    padding: var(--sbm-space-4);
    border: 1px solid var(--sbm-color-border);
}

.sbm-chart-card__title {
    font-size: var(--sbm-font-size-sm);
    font-weight: var(--sbm-font-weight-semibold);
    color: var(--sbm-color-text);
    margin-bottom: var(--sbm-space-3);
}

.sbm-chart-card__subtitle {
    font-size: var(--sbm-font-size-xs);
    color: var(--sbm-color-text-muted);
    margin-top: calc(var(--sbm-space-2) * -1);
    margin-bottom: var(--sbm-space-3);
}

/* ========================================================================
   LEGENDE
   ======================================================================== */
.sbm-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sbm-space-4);
    margin-top: var(--sbm-space-3);
    font-size: var(--sbm-font-size-xs);
}

.sbm-chart-legend__item {
    display: flex;
    align-items: center;
    gap: var(--sbm-space-2);
    color: var(--sbm-color-text-muted);
}

.sbm-chart-legend__dot {
    width: var(--sbm-font-size-xs);
    height: var(--sbm-font-size-xs);
    border-radius: var(--sbm-radius-full);
}

.sbm-chart-legend__dot--primary { background: var(--sbm-color-primary); }
.sbm-chart-legend__dot--success { background: var(--sbm-color-success); }
.sbm-chart-legend__dot--warning { background: var(--sbm-color-warning); }
.sbm-chart-legend__dot--error { background: var(--sbm-color-error); }

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 640px) {
    .ct-series-a .ct-bar,
    .ct-series-b .ct-bar,
    .ct-series-c .ct-bar,
    .ct-series-d .ct-bar {
        stroke-width: 12px;
    }
    
    .sbm-chart {
        min-height: 180px;
    }
}