/**
 * Block: Interaktives Diagramm (Chart).
 *
 * Layout: Plot (SVG) + umschaltbare Legende (Pills). Farben/Kontraste
 * passen sich per --chart-*-Custom-Properties an den Block-Hintergrund an.
 */

.block--chart {
    position: relative;

    /* Tinten je nach Hintergrund (heller BG als Default). */
    --chart-ink:  var(--color-anthrazit);
    --chart-axis: var(--color-text-muted);
    --chart-grid: rgba(0, 0, 0, 0.10);
    --chart-surface: var(--color-white);
    --chart-border: rgba(0, 0, 0, 0.10);
}

/* Padding-Modifier */
.block--chart.block--pad-none   { padding-block: 0; }
.block--chart.block--pad-normal { padding-block: var(--space-16); }
.block--chart.block--pad-lg     { padding-block: var(--space-24); }

/* Hintergründe (extended-Palette) */
.block--chart.block--bg-beige         { background-color: var(--color-beige); }
.block--chart.block--bg-dunkelbeige   { background-color: var(--color-dunkelbeige); }
.block--chart.block--bg-white         { background-color: var(--color-white); }
.block--chart.block--bg-transparent   { background-color: transparent; }
.block--chart.block--bg-navy          { background-color: var(--color-navy); }
.block--chart.block--bg-anthrazit     { background-color: var(--color-anthrazit); }
.block--chart.block--bg-electric-blue { background-color: var(--color-electric-blue); }
.block--chart.block--bg-neongelb      { background-color: var(--color-neongelb); }
.block--chart.block--bg-violett       { background-color: var(--color-violett); }

/* Dunkle Hintergründe → helle Tinten + eigene Plot-Fläche */
.block--chart.block--bg-navy,
.block--chart.block--bg-anthrazit,
.block--chart.block--bg-violett {
    color: var(--color-text-on-navy);
    --chart-ink:  var(--color-white);
    --chart-axis: rgba(255, 255, 255, 0.72);
    --chart-grid: rgba(255, 255, 255, 0.16);
    --chart-surface: rgba(255, 255, 255, 0.04);
    --chart-border: rgba(255, 255, 255, 0.20);
}

/* ── Header ─────────────────────────────────────── */

.chart__header {
    margin-bottom: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.chart__eyebrow {
    margin: 0;
    font-weight: var(--fw-bold);
    color: var(--color-electric-blue);
}

.chart__heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}

/* ── Chart-Grundgerüst ──────────────────────────── */

.chart {
    margin: 0;
}

.chart__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.chart__main {
    position: relative;
    min-width: 0;
    padding: var(--space-4);
    background-color: var(--chart-surface);
    border: 1px solid var(--chart-border);
    border-radius: var(--radius-lg);
}

.chart__y-label {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--chart-ink);
}

.chart__plot {
    width: 100%;
    min-height: var(--chart-height, 480px);
}

.chart__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* ── Achsen / Grid ──────────────────────────────── */

.chart__gridline {
    stroke: var(--chart-grid);
    stroke-width: 1;
}

.chart__gridline--v {
    stroke-dasharray: 2 4;
}

.chart__axis-label {
    fill: var(--chart-axis);
    font-family: var(--font-body);
    font-size: 12px;
}

/* ── Linien ─────────────────────────────────────── */

.chart__line {
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity var(--duration-fast) var(--ease-default);
}

.chart__line--dash {
    stroke-dasharray: 7 6;
}

.chart__area {
    opacity: 0.10;
}

.chart__point {
    pointer-events: none;
}

.chart__point--active {
    stroke: var(--chart-surface);
    stroke-width: 2;
}

.chart__guide {
    stroke: var(--chart-ink);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-default);
}

.chart__hit {
    cursor: crosshair;
}

/* ── Tooltip ────────────────────────────────────── */

.chart__tooltip {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    min-width: 160px;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-navy);
    color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
    font-size: var(--text-sm);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast) var(--ease-default);
}

.chart__tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

.chart__tooltip-title {
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-2);
}

.chart__tooltip-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    line-height: var(--lh-snug);
}

.chart__tooltip-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-circle);
    flex: 0 0 auto;
}

.chart__tooltip-name {
    flex: 1 1 auto;
    white-space: nowrap;
}

.chart__tooltip-value {
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

/* ── Legende (Pills) ────────────────────────────── */

.chart__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.chart__legend-item {
    margin: 0;
}

.chart__pill {
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding: 0.55em 1.1em;
    border: 2px solid var(--pill-bg);
    border-radius: var(--radius-pill);
    background-color: var(--pill-bg);
    color: var(--pill-fg);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    text-align: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-default),
                background-color var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
}

.chart__pill:hover {
    opacity: 0.88;
}

.chart__pill:focus-visible {
    outline: var(--focus-ring, 2px solid var(--color-electric-blue));
    outline-offset: 2px;
}

.chart__pill.is-off {
    background-color: transparent;
    color: var(--chart-ink);
    opacity: 0.6;
}

.chart__pill.is-off .chart__pill-label {
    text-decoration: line-through;
}

/* ── Datentabelle (A11y-Fallback) ───────────────── */

.chart__table {
    /* Visuell versteckt, für Screenreader lesbar. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Im Editor sichtbar, damit die eingelesenen Daten kontrollierbar sind. */
.chart__table--preview {
    position: static;
    width: 100%;
    height: auto;
    margin: var(--space-6) 0 0;
    clip: auto;
    white-space: normal;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.chart__table--preview caption {
    text-align: left;
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-2);
}

.chart__table--preview th,
.chart__table--preview td {
    border: 1px solid var(--chart-border);
    padding: var(--space-1) var(--space-2);
    text-align: right;
}

.chart__table--preview th:first-child,
.chart__table--preview td:first-child {
    text-align: left;
}

.chart__preview-note {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-text-muted);
}

/* Empty-Preview im Editor */
.block--chart--empty {
    padding: var(--space-8) var(--space-6);
    background-color: var(--color-dunkelbeige);
    color: var(--color-text-muted);
    text-align: center;
    font-size: var(--text-sm);
    font-style: italic;
    border-radius: var(--radius-md);
}

/* ── Desktop: Legende rechts neben dem Plot ─────── */

@media (min-width: 861px) {
    .chart__layout {
        grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
        align-items: start;
    }

    .chart__legend {
        flex-direction: column;
        position: sticky;
        top: var(--space-8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chart__line,
    .chart__guide,
    .chart__tooltip,
    .chart__pill {
        transition: none;
    }
}