/* ===== OO JsonView =====
   Box wie ein Codeblock (pre in reset.css), Farben aus dem Highlight.js-Thema (hljs-attr, hljs-string, hljs-number, hljs-literal).
   Oben die Kopfzeile in der App-Schrift, darunter der Baum. Aufklappen über details/summary. Lange Zeilen scrollen seitlich,
   mit oo-json-view--wrap brechen sie um. Nur Texte behalten ihre Zeilenumbrüche (white-space: pre); sonst würden Leerräume
   zwischen den Elementen sichtbar.
   ======================== */

.oo-json-view {
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-radius-md);
    background: var(--oo-surface-2, #f3f4f6);
    font-size: var(--oo-font-size-sm);
}

/* Kopfzeile: Suche links, Knöpfe rechts; bricht in schmalen Spalten um. */
.oo-json-view__header {
    padding: var(--oo-space-1) var(--oo-space-1) var(--oo-space-1) var(--oo-space-2);
    border-bottom: var(--oo-border-width) solid var(--oo-color-border);
}

.oo-json-view__count {
    color: var(--oo-color-text-subtle);
    white-space: nowrap;
}

.oo-json-view__buttons {
    margin-left: auto;
}

/* !important wie bei pre in reset.css: Dort erzwingt html * die App-Schrift; die Kinder erben die Festbreitenschrift. */
.oo-json-view__body {
    overflow-x: auto;
    padding: var(--oo-space-3) var(--oo-space-4) var(--oo-space-3) var(--oo-space-6);
    font-family: var(--oo-font-family-mono) !important;
    font-variant-ligatures: none;
    line-height: 1.6;
}

.oo-json-view__line {
    white-space: nowrap;
}

/* Kinder eingerückt, mit einer feinen Linie, die zeigt, wo der Knoten endet. */
.oo-json-view__children {
    margin-left: 0.5ch;
    padding-left: 1.5ch;
    border-left: var(--oo-border-width) solid var(--oo-color-border);
}

/* Pfeil zum Aufklappen links vor der Zeile, im Rand der Einrückung; Zeilen ohne Pfeil bleiben bündig. */
.oo-json-view__node > summary {
    position: relative;
    list-style: none;
    cursor: pointer;
}

.oo-json-view__node > summary::-webkit-details-marker {
    display: none;
}

.oo-json-view__node > summary::before {
    content: "▸";
    position: absolute;
    left: -1.6ch;
    color: var(--oo-color-text-subtle);
}

.oo-json-view__node[open] > summary::before {
    content: "▾";
}

/* Zugeklappt die Vorschau („3 Felder }“), aufgeklappt stattdessen die Kinder und die schließende Klammer. */
.oo-json-view__preview {
    color: var(--oo-color-text-subtle);
}

.oo-json-view__node[open] > summary .oo-json-view__preview {
    display: none;
}

.oo-json-view__punct {
    color: var(--oo-color-text-subtle);
}

/* Treffer der Suche. */
.oo-json-view__match {
    padding: 0;
    border-radius: 2px;
    background: var(--oo-warning-lighter, #fff3c4);
    color: inherit;
}

/* Texte mit Zeilenumbrüchen (\n) mehrzeilig; lange Zeilen scrollen seitlich oder brechen um (--wrap). */
.oo-json-view__string,
.oo-json-view__text {
    white-space: pre;
}

.oo-json-view--wrap .oo-json-view__line,
.oo-json-view--wrap .oo-json-view__string,
.oo-json-view--wrap .oo-json-view__text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Kein JSON: Text ohne Pfeil-Rand. */
.oo-json-view__body:has(> .oo-json-view__text) {
    padding-left: var(--oo-space-4);
}

.oo-json-view__more {
    margin-left: 1ch;
    padding: 0;
    border: 0;
    background: none;
    color: var(--oo-primary);
    font: inherit;
    cursor: pointer;
}

.oo-json-view__more:hover {
    text-decoration: underline;
}