/* ============================================================
   HtmlDiffViewer – gerenderter HTML-Diff
   oo-htmldiff
   ============================================================ */

/* ── Statistik-Leiste ── */

.oo-htmldiff__statistik {
    display: flex;
    align-items: center;
    gap: var(--oo-space-3);
    padding: var(--oo-space-2) var(--oo-space-3);
    background: var(--oo-color-surface);
    border-bottom: var(--oo-border-width) solid var(--oo-color-border);
    font-size: var(--oo-font-size-sm);
    font-weight: 500;
}

.oo-htmldiff__stat {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-1);
}

.oo-htmldiff__stat--hinzugefuegt {
    color: var(--oo-success-dark);
}

.oo-htmldiff__stat--geloescht {
    color: var(--oo-danger-dark);
}

.oo-htmldiff__stat--gleich {
    color: var(--oo-color-text-secondary);
}

/* ── ins / del ein-/ausblenden ── */

.oo-htmldiff--hide-ins ins { display: none; }
.oo-htmldiff--hide-del del { display: none; }

.oo-htmldiff__output ins {
    background: color-mix(in oklch, var(--oo-success) 22%, transparent);
    color: var(--oo-success-dark);
    border-radius: 2px;
    padding: 0 2px;
    text-decoration: none;
}

.oo-htmldiff__output del {
    background: color-mix(in oklch, var(--oo-danger) 18%, transparent);
    color: var(--oo-danger-dark);
    border-radius: 2px;
    padding: 0 2px;
    text-decoration: line-through;
    text-decoration-color: var(--oo-danger-dark);
}