/* ═══════════════════════════════════════════════════════════
   Diagramm-Bausteine (Components/Charts)
   Farben kommen über Variablen vom umgebenden Element:
     --ck-chart-accent   Hauptreihe (Standard: Primärfarbe)
     --ck-chart-compare  Vergleichsreihe (neutral)
   Ampelfarben sind fest an Erfolg/Warnung/Fehler gebunden und
   werden nie für eine Datenreihe verwendet.
   ═══════════════════════════════════════════════════════════ */

.ck-spark, .ck-bars, .ck-ring, .ck-donut {
    --ck-chart-accent-eff: var(--ck-chart-accent, var(--mud-palette-primary));
    --ck-chart-compare-eff: var(--ck-chart-compare, var(--mud-palette-text-disabled));
}

/* ── Sparkline ── */
.ck-spark {
    display: block;
    width: 100%;
    overflow: visible;
}
.ck-spark__line {
    fill: none;
    stroke: var(--ck-chart-accent-eff);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.ck-spark__area {
    fill: var(--ck-chart-accent-eff);
    opacity: .12;
}
.ck-spark__compare {
    fill: none;
    stroke: var(--ck-chart-compare-eff);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
}
.ck-spark__hit {
    fill: transparent;
}
.ck-spark__hit:hover {
    fill: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

/* ── Säulen ── */
.ck-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
}
.ck-bars--fill {
    flex: 1 1 auto;
}
.ck-bars--fill .ck-bars__slot {
    height: auto;
    align-self: stretch;
}
.ck-bars__slot {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: default;
}
.ck-bars__slot:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
    border-radius: 4px 4px 0 0;
}
.ck-bars__bar,
.ck-bars__ghost {
    width: 70%;
    max-width: 28px;
    border-radius: 4px 4px 0 0;
}
.ck-bars__bar {
    position: relative;
    background: color-mix(in srgb, var(--ck-chart-accent-eff) 55%, transparent);
    transition: height .4s ease;
}
.ck-bars__bar--hi {
    background: var(--ck-chart-accent-eff);
}
.ck-bars__ghost {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    border: 1.5px dashed var(--ck-chart-compare-eff);
    border-bottom: none;
    box-sizing: border-box;
}
.ck-bars__labels {
    display: flex;
    gap: 2px;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
}
.ck-bars__labels span {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}
.ck-bars__label--hi {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* ── Ring (Belegung) ── */
.ck-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.ck-ring svg {
    width: 100%;
    height: auto;
    display: block;
}
.ck-ring__track {
    fill: none;
    stroke: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    stroke-width: 10;
}
.ck-ring__value {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dasharray .6s ease;
}
.ck-ring__value--good { stroke: var(--mud-palette-success); }
.ck-ring__value--warning { stroke: var(--mud-palette-warning); }
.ck-ring__value--critical { stroke: var(--mud-palette-error); }
.ck-ring__number {
    font-size: 30px;
    font-weight: 700;
    fill: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}
.ck-ring__sub {
    font-size: 12px;
    fill: var(--mud-palette-text-secondary);
}
.ck-ring__label {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ck-ring__state {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}
.ck-ring__state--warning::before,
.ck-ring__state--critical::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.ck-ring__state--warning::before { background: var(--mud-palette-warning); }
.ck-ring__state--critical::before { background: var(--mud-palette-error); }
.ck-ring__state--critical { color: var(--mud-palette-error); font-weight: 600; }

/* ── Donut ── */
.ck-donut {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.ck-donut svg {
    flex: 0 0 auto;
}
.ck-donut__track {
    fill: none;
    stroke: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    stroke-width: 14;
}
.ck-donut__seg {
    fill: none;
    stroke-width: 14;
    transition: stroke-dasharray .5s ease;
}
.ck-donut__seg:hover {
    stroke-width: 17;
}
.ck-donut__center {
    font-size: 18px;
    font-weight: 700;
    fill: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}
.ck-donut__center-sub {
    font-size: 10px;
    fill: var(--mud-palette-text-secondary);
}
.ck-donut__legend {
    flex: 1 1 140px;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}
.ck-donut__legend li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
.ck-donut__swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.ck-donut__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
}
.ck-donut__value {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}
.ck-donut__pct {
    width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .ck-bars__bar, .ck-ring__value, .ck-donut__seg { transition: none; }
}