/**
 * Backlink Analyse - Plugin Styles
 *
 * Herausgeloest aus plugins/keyworddata. Die Diagrammflaechen folgen
 * bewusst denselben Regeln wie dort (keyworddata.css): gleiche Rampe,
 * gleiche Kartenhoehen, gleiche Legende. Zwei Seiten, die dieselben Daten
 * aus derselben Quelle zeigen, duerfen nicht aussehen wie zwei Produkte.
 *
 * Der Unterschied zur Keyword-Seite ist eine einzige Farbe: defekte Links
 * und der Spam Score bekommen einen Signalton. Auf der Keyword-Seite waere
 * das falsch - viel Suchvolumen ist weder gut noch schlecht. Hier nicht:
 * ein defekter Backlink ist eindeutig schlechter als ein erreichbarer.
 */

/* ========================================================================
   Chart-Flaechen
   ------------------------------------------------------------------------
   Die Farben liegen hier und nicht im JS: Chart.js kennt die
   Theme-Umschaltung nicht, CSS schon. Das JS liest die Werte zur Laufzeit
   aus diesen Variablen.
   ==================================================================== */

.bla-charts {
    /* Sequenzielle Rampe Dunkelmodus, identisch zur Keyword-Seite.
       Geprueft gegen die Kartenflaeche #191C29 (Kontrast >= 3:1). */
    --bla-ramp-1: #6c5ca8;
    --bla-ramp-2: #8b6fe0;
    --bla-ramp-3: #a98ffb;
    --bla-ramp-4: #c9b6ff;

    /* Signalton fuer defekte Links und Spam. Nicht das volle Rot der
       Systemfarbe: die Zahl soll auffallen, nicht alarmieren. */
    --bla-broken: hsl(var(--status-danger) / 0.85);

    /* Flaeche hinter den Marken - liefert den 2px-Spalt zwischen den
       Segmenten. */
    --bla-surface: #191c29;

    --bla-ink: hsl(var(--foreground));
    --bla-ink-muted: hsl(var(--muted-foreground));
    --bla-grid: hsl(var(--border) / 0.55);
    --bla-axis: hsl(var(--border));

    /* Beschriftung im Balken. Richtet sich nach der Balkenfarbe, nicht nach
       dem Theme: die Rampe laeuft in beiden Modi von hell nach dunkel, also
       kommen in beiden Modi beide Faelle vor. */
    --bla-label-on-light: #191c29;
    --bla-label-on-dark: #ffffff;
}

html[data-theme='light'] .bla-charts {
    /* Hellmodus: eigene Stufen, kein Umdrehen der Dunkelmodus-Werte -
       die tragen auf Weiss nicht. */
    --bla-ramp-1: #9d7ee7;
    --bla-ramp-2: #8258df;
    --bla-ramp-3: #6532be;
    --bla-ramp-4: #3f1d77;

    --bla-broken: hsl(var(--status-danger));
    --bla-surface: #ffffff;
}

/* Beide Karten liegen in einer Flex-Zeile und stehen dadurch von selbst auf
   gleicher Hoehe. Ein Aussenabstand an nur einer der beiden bricht genau das:
   die Marge zaehlt zur Zeilenhoehe, die Karte darunter wird um diesen Betrag
   kuerzer. Untereinander - also erst im Umbruch - macht row-gap die Luft. */
.bla-chart-row {
    row-gap: 1.5rem;
}

/* Feste Hoehe: sonst springt die Karte beim ersten Zeichnen. */
.bla-chart-canvas {
    position: relative;
    height: 260px;
}

/* Beide Karten stehen nebeneinander und damit auf gleicher Hoehe. Der
   Koerper ist eine Spalte, in der die Fussnote unten andockt - sonst
   haengt sie in der kuerzeren Karte mitten in der Flaeche. */
.bla-card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bla-card-body .bla-chart-note {
    margin-top: auto;
    padding-top: 0.75rem;
}

/* Die Karte selbst muss ihre Hoehe an den Koerper weiterreichen. */
.bla-charts .page-card {
    display: flex;
    flex-direction: column;
}

.bla-charts .page-card > .bla-card-body {
    flex: 1 1 auto;
}

/* --- Legende zum Ringdiagramm ---------------------------------------
   Ersetzt die Chart.js-Legende. Zahl und Anteil stehen direkt an der
   Farbe - damit bleibt die Zuordnung auch ohne Farbsehen eindeutig. */
.bla-legend {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.bla-legend-row {
    display: grid;
    grid-template-columns: 0.5rem 1fr auto auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    font-size: 0.8125rem;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bla-legend-row.is-active {
    background: hsl(var(--primary) / 0.08);
    border-color: hsl(var(--primary) / 0.28);
}

/* Ein leerer Anteil bleibt stehen: "0 defekte Backlinks" ist die beste
   Nachricht der ganzen Karte und darf nicht verschwinden. */
.bla-legend-row.is-empty {
    opacity: 0.45;
}

.bla-legend-chip {
    width: 0.5rem;
    height: 1.75rem;
    border-radius: 1px;
    background: var(--bla-chip, var(--bla-ramp-3));
}

.bla-legend-row.is-empty .bla-legend-chip {
    background: hsl(var(--border));
}

.bla-legend-label {
    color: var(--bla-ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bla-legend-range {
    display: block;
    font-size: 0.6875rem;
    color: var(--bla-ink-muted);
}

/* Zahlen stehen in der Hausschrift fuer Code - mit Tabellenziffern
   fluchten die Spalten, ohne sie tanzen sie. */
.bla-legend-value,
.bla-legend-share,
.bla-total-value,
.bla-figure-value {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.bla-legend-value {
    color: var(--bla-ink);
    font-weight: 600;
}

.bla-legend-share {
    color: var(--bla-ink-muted);
    min-width: 3.25rem;
    text-align: right;
}

/* --- Ringdiagramm mit Kennzahl im Kern ------------------------------
   Das Loch bleibt nicht leer. Die Gesamtzahl gehoert genau dorthin: sie
   ist die Zahl, nach der zuerst gesucht wird. */
.bla-donut-wrap {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
    /* Nimmt die Hoehe, die die Nachbarkarte vorgibt, und setzt Ring und
       Legende in deren optische Mitte - sonst kleben sie oben. */
    flex: 1 1 auto;
    align-content: center;
}

@media (max-width: 640px) {
    .bla-donut-wrap {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bla-donut-canvas {
    position: relative;
    height: 220px;
}

.bla-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}

.bla-total-value {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bla-ink);
}

.bla-total-label {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--bla-ink-muted);
}

/* --- Kennzahlenzeile unter den Balken -------------------------------- */
.bla-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.75rem 0 0;
    margin-top: 0.75rem;
    border-top: 1px solid hsl(var(--border));
}

.bla-figure-label {
    display: block;
    font-size: 0.75rem;
    color: var(--bla-ink-muted);
}

.bla-figure-value {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--bla-ink);
}

/* Der Fallback ist kein Schmuck: ausserhalb von .bla-charts - etwa in der
   Stand-Zeile am Fuss der Karte - ist --bla-ink-muted nicht definiert, und
   eine color-Deklaration mit unbekannter Custom Property faellt komplett
   aus. Der Text stuende dann in voller Textfarbe statt als Fussnote. */
.bla-chart-note {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--bla-ink-muted, hsl(var(--muted-foreground)));
}

/* Kein Uebergang beim Zeichnen, wenn der Nutzer das abbestellt hat. */
@media (prefers-reduced-motion: reduce) {
    .bla-legend-row {
        transition: none;
    }
}

/* --- Zusammenfassung unter der Tabelle -------------------------------
   Flaeche und Rahmen kommen aus der Systemklasse .alert-info. Der
   Fliesstext bekommt die normale Textfarbe zurueck: .alert-info faerbt
   ihren gesamten Inhalt in der Primaerfarbe, und ein ganzer Absatz in der
   Akzentfarbe liest sich wie ein Link. */
.bla-summary {
    color: hsl(var(--foreground));
}

.bla-summary strong {
    color: hsl(var(--primary-text));
}

.bla-summary p:last-child {
    margin-bottom: 0;
}

/* Die nachgeladenen Detailtabellen koennen sehr lange URLs enthalten. Ohne
   Umbruch schiebt eine einzige Zeile die ganze Tabelle aus der Karte. */
[data-dfs-results] table {
    width: 100%;
}

[data-dfs-results] td {
    word-break: break-word;
}