/* === 01_styles.css === */
/* Login Template Styles */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-box {
    background: white;
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.login-title {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 600;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-size: 14px;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e1e1;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: #667eea;
}

.form-error {
    color: #e74c3c;
    font-size: 14px;
    margin-bottom: 15px;
    min-height: 20px;
}

.login-button {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.login-button:active {
    transform: translateY(0);
}

.login-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}


/* === 01_theme.css === */
/*
 * tigeradmin — Theme (Betreiber-Werkzeug, nüchtern).
 *
 * Struktur-CSS und Marke sind getrennt: Farb-, Typo- und Abstands-Werte
 * liegen als Custom Properties hier, das Layout in 02_shell.css referenziert
 * sie ausschließlich über var(--ta-*). Kein Marketing-Look — zurückhaltende
 * Neutraltöne, ein einziger Akzent, keine Verläufe/Schatten-Spielereien.
 */
:root
{
    /* Neutrale Grundskala (kühles Grau, Betreiber-Kontext) */
    --ta-bg:            #f4f5f7;
    --ta-surface:       #ffffff;
    --ta-surface-2:     #eceef1;
    --ta-border:        #d7dade;
    --ta-border-strong: #b9bec4;

    --ta-text:          #1c2126;
    --ta-text-muted:    #5b636c;
    --ta-text-faint:    #878f98;

    /* Ein Akzent (Tiger-Kontext, gedämpftes Bernstein) — sparsam */
    --ta-accent:        #b5651d;
    --ta-accent-weak:   #f0e4d6;

    /* Zustände: Befunde/abgeschaltet (Warnung) und aktiv (ok) — gedämpft,
       für Diagnose-Marker im Systembaum. */
    --ta-warn:          #a15c00;
    --ta-warn-weak:     #f6ecd9;
    --ta-warn-text:     #6e4300;
    --ta-ok:            #2f6b3f;
    --ta-ok-weak:       #e2efe4;

    /* Gefahr (hohe Risiko-Stufe in der Konfigurations-Tabelle) — gedämpftes
       Rot, deutlich abgesetzt von der Bernstein-Warnung. */
    --ta-danger:        #a12a20;
    --ta-danger-weak:   #f6e0dd;

    /* Perspektiv-Ansicht (fremde Sicht SIMULIERT, DW8) — eine EIGENE Farbe,
       bewusst kühles Indigo: deutlich abgesetzt vom Gefahr-Rot des Edit-Modus
       und vom Bernstein-Akzent. „Du siehst gerade durch fremde Augen." */
    --ta-view:          #3b4a8c;
    --ta-view-weak:     #e5e8f5;
    --ta-view-text:     #2a366b;

    /* Sidebar (dunkel, damit der Betreiber-Modus optisch abgesetzt ist) */
    --ta-side-bg:       #1e2329;
    --ta-side-text:     #c5ccd4;
    --ta-side-muted:    #838d97;
    --ta-side-active:   #2b323a;
    --ta-side-border:   #2e353d;

    /* Typografie */
    --ta-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ta-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

    --ta-fs-title:  20px;
    --ta-fs-body:   14px;
    --ta-fs-small:  12px;

    /* Abstände / Radien */
    --ta-gap:     16px;
    --ta-pad:     20px;
    --ta-radius:  8px;
    --ta-radius-sm: 5px;
}


/* === 02_shell.css === */
/*
 * tigeradmin — Shell-Layout (Struktur). Farben/Typo kommen aus 01_theme.css.
 * Zwei-Spalten-Gerüst: feste dunkle Sidebar links, Inhaltsspalte rechts.
 */
*,
*::before,
*::after { box-sizing: border-box; }

html, body
{
    margin: 0;
    height: 100%;
}

body
{
    font-family: var(--ta-font);
    font-size: var(--ta-fs-body);
    color: var(--ta-text);
    background: var(--ta-bg);
    -webkit-font-smoothing: antialiased;
}

.ta-app
{
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.ta-sidebar
{
    display: flex;
    flex-direction: column;
    background: var(--ta-side-bg);
    color: var(--ta-side-text);
    border-right: 1px solid var(--ta-side-border);
}

.ta-brand
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--ta-pad);
    border-bottom: 1px solid var(--ta-side-border);
}

.ta-brand-mark
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ta-radius-sm);
    background: var(--ta-accent);
    color: #fff;
    font-weight: 700;
    font-size: 17px;
}

.ta-brand-text
{
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.ta-brand-title { font-weight: 600; font-size: var(--ta-fs-body); }
.ta-brand-sub   { font-size: var(--ta-fs-small); color: var(--ta-side-muted); }

.ta-nav
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
}

.ta-nav-item
{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--ta-radius-sm);
    background: transparent;
    color: var(--ta-side-text);
    font-family: inherit;
    font-size: var(--ta-fs-body);
    text-align: left;
    cursor: pointer;
}

.ta-nav-item:hover { background: var(--ta-side-active); }

.ta-nav-item.is-active
{
    background: var(--ta-side-active);
    color: #fff;
    font-weight: 600;
}

.ta-nav-dot
{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ta-side-muted);
    flex: none;
}

.ta-nav-item.is-active .ta-nav-dot { background: var(--ta-accent); }

/* ── Inhaltsspalte ───────────────────────────────────────── */
.ta-main
{
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ta-topbar
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ta-gap);
    padding: var(--ta-pad);
    background: var(--ta-surface);
    border-bottom: 1px solid var(--ta-border);
}

.ta-topbar-title { font-size: var(--ta-fs-title); font-weight: 600; margin: 0; }
.ta-topbar-user  { font-size: var(--ta-fs-small); color: var(--ta-text-muted); }

.ta-content { padding: var(--ta-pad); }

.ta-view { max-width: 900px; }
.ta-view[hidden] { display: none; }

/* ── Dashboard (S0) ──────────────────────────────────────── */
.ta-card
{
    background: var(--ta-surface);
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius);
    padding: var(--ta-pad);
}

.ta-card + .ta-card { margin-top: var(--ta-gap); }

.ta-card h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.ta-card p  { margin: 0 0 8px; color: var(--ta-text-muted); line-height: 1.5; }
.ta-card p:last-child { margin-bottom: 0; }

.ta-badge
{
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ta-accent-weak);
    color: var(--ta-accent);
    font-size: var(--ta-fs-small);
    font-weight: 600;
}

/* ── System-Bereich (Container der Systembaum-Ansicht, 03_systemtree.css) ── */
.ta-systemtree
{
    background: var(--ta-surface);
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius);
    padding: var(--ta-pad);
    min-height: 160px;
}

.ta-placeholder { color: var(--ta-text-faint); }

@media (max-width: 720px)
{
    .ta-app { grid-template-columns: 1fr; }
    .ta-sidebar { flex-direction: row; align-items: center; }
    .ta-nav { flex-direction: row; }
}


/* === 03_systemtree.css === */
/*
 * tigeradmin — Systembaum-Ansicht (Struktur). Farben/Typo aus 01_theme.css,
 * nur über var(--ta-*). Read-only-Diagnose: Baum, Zustandsbadges, Befunde.
 */

/* ── Kopfzeile des Baums ─────────────────────────────────────── */
.ta-tree-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ta-gap);
    margin-bottom: var(--ta-gap);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ta-border);
}

.ta-tree-header-left
{
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.ta-tree-header-title { font-weight: 600; font-size: var(--ta-fs-body); }

.ta-tree-root
{
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
    background: var(--ta-surface-2);
    padding: 2px 7px;
    border-radius: var(--ta-radius-sm);
}

.ta-tree-header-actions
{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.ta-tree-reload
{
    flex: none;
    padding: 6px 14px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text);
    font-family: inherit;
    font-size: var(--ta-fs-small);
    cursor: pointer;
}

.ta-tree-reload:hover { background: var(--ta-surface-2); }

/* „Neuer Mandant" — Betreiber-Aktion, im Akzent (Bernstein) abgesetzt */
.ta-tree-new
{
    flex: none;
    padding: 6px 14px;
    border: 1px solid var(--ta-accent);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-accent);
    color: #fff;
    font-family: inherit;
    font-size: var(--ta-fs-small);
    font-weight: 600;
    cursor: pointer;
}

.ta-tree-new:hover { filter: brightness(1.06); }
.ta-tree-new.is-open { background: var(--ta-surface); color: var(--ta-accent); }

/* „Neue Instanz" — dezenter, innerhalb eines Mandanten-Knotens */
.ta-instanz-new
{
    align-self: flex-start;
    margin-top: 2px;
    padding: 5px 12px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-accent);
    font-family: inherit;
    font-size: var(--ta-fs-small);
    font-weight: 600;
    cursor: pointer;
}

.ta-instanz-new:hover { background: var(--ta-accent-weak); }

/* ── Anlage-Formulare (Schreibaktionen des Betreibers) ───────── */
.ta-form
{
    margin: 0 0 var(--ta-gap);
    padding: 16px;
    border: 1px solid var(--ta-accent);
    border-left: 3px solid var(--ta-accent);
    border-radius: var(--ta-radius);
    background: var(--ta-accent-weak);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Instanz-Formular sitzt eingerückt im Knoten — etwas kompakter */
.ta-form-instanz { margin: 4px 0 2px; }

.ta-form-title
{
    font-size: var(--ta-fs-body);
    font-weight: 700;
    color: var(--ta-text);
}

.ta-form-title code
{
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    color: var(--ta-accent);
}

.ta-form-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px 16px;
}

.ta-form-field
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ta-form-label
{
    font-size: var(--ta-fs-small);
    font-weight: 600;
    color: var(--ta-text-muted);
}

.ta-form-input
{
    padding: 8px 10px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text);
    font-family: inherit;
    font-size: var(--ta-fs-body);
}

.ta-form-input:focus
{
    outline: 2px solid var(--ta-accent);
    outline-offset: 1px;
    border-color: var(--ta-accent);
}

.ta-form-input:disabled { opacity: 0.6; cursor: not-allowed; }

.ta-form-field-hint,
.ta-form-slug-hint
{
    font-size: 11px;
    color: var(--ta-text-faint);
    line-height: 1.35;
}

.ta-form-slug-hint.is-valid { color: var(--ta-ok); }
.ta-form-slug-hint.is-invalid { color: var(--ta-danger); }

/* Protokoll-Hinweis (Kennzeichnung wie beim Edit-Modus der Daten-Ansicht) */
.ta-form-protocol
{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    border: 1px solid var(--ta-accent);
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
    line-height: 1.4;
}

.ta-form-protocol-icon { flex: none; color: var(--ta-accent); font-size: 10px; line-height: 1.6; }
.ta-form-protocol strong { color: var(--ta-text); }

.ta-form-actions
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.ta-form-submit
{
    flex: none;
    padding: 8px 18px;
    border: 1px solid var(--ta-accent);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-accent);
    color: #fff;
    font-family: inherit;
    font-size: var(--ta-fs-body);
    font-weight: 600;
    cursor: pointer;
}

.ta-form-submit:hover:not(:disabled) { filter: brightness(1.06); }
.ta-form-submit:disabled { opacity: 0.6; cursor: progress; }

.ta-form-cancel
{
    flex: none;
    padding: 8px 16px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text-muted);
    font-family: inherit;
    font-size: var(--ta-fs-body);
    cursor: pointer;
}

.ta-form-cancel:hover:not(:disabled) { background: var(--ta-surface-2); }
.ta-form-cancel:disabled { opacity: 0.6; cursor: not-allowed; }

/* Fehleranzeige eines Formulars — vier unterscheidbare Zustände */
.ta-form-error
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--ta-radius-sm);
    border: 1px solid var(--ta-warn);
    background: var(--ta-warn-weak);
}

.ta-form-error-head { font-size: var(--ta-fs-body); font-weight: 700; color: var(--ta-warn-text); }
.ta-form-error-text { font-size: var(--ta-fs-small); color: var(--ta-warn-text); line-height: 1.4; }

/* 400 / clientseitige Vorprüfung: Eingabe stimmt nicht (Bernstein-Warnung) */
.ta-form-error.is-client { border-color: var(--ta-warn); background: var(--ta-warn-weak); }

/* 409 existiert bereits: neutral-informierend, kein Alarm */
.ta-form-error.is-conflict
{
    border-color: var(--ta-border-strong);
    background: var(--ta-surface-2);
}
.ta-form-error.is-conflict .ta-form-error-head,
.ta-form-error.is-conflict .ta-form-error-text { color: var(--ta-text-muted); }

/* 403 kein Backend-Admin und 503 Protokoll nicht schreibbar: Gefahr-Rot,
   deutlich abgesetzt — die schwerwiegenden, beschlossenen Verweigerungen */
.ta-form-error.is-denied,
.ta-form-error.is-log-unwritable
{
    border-color: var(--ta-danger);
    background: var(--ta-danger-weak);
}
.ta-form-error.is-denied .ta-form-error-head,
.ta-form-error.is-log-unwritable .ta-form-error-head { color: var(--ta-danger); }
.ta-form-error.is-denied .ta-form-error-text,
.ta-form-error.is-log-unwritable .ta-form-error-text { color: var(--ta-danger); }

/* ── Abschnitte (Mandanten / Mods / Produkte) ────────────────── */
.ta-tree-section { margin-top: var(--ta-gap); }
.ta-tree-section:first-of-type { margin-top: 0; }

.ta-tree-section-title
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: var(--ta-fs-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ta-text-faint);
}

.ta-tree-section-body
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Knoten (Mandant / Instanz) und Blätter (Mod / Produkt) ──── */
.ta-tree-node,
.ta-tree-leaf
{
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
}

.ta-tree-node[open] > .ta-tree-row { border-bottom: 1px solid var(--ta-border); }

.ta-tree-row
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-width: 0;
    flex-wrap: wrap;
}

/* <summary> als Klapp-Kopf: Standard-Marker weg, eigenes Caret nutzen */
summary.ta-tree-row { cursor: pointer; list-style: none; }
summary.ta-tree-row::-webkit-details-marker { display: none; }

.ta-tree-icon
{
    flex: none;
    width: 14px;
    color: var(--ta-text-faint);
    text-align: center;
    transition: transform 0.12s ease;
}

.ta-tree-node[open] > summary .ta-tree-icon { transform: rotate(90deg); }

.ta-tree-label
{
    font-weight: 600;
    font-size: var(--ta-fs-body);
    color: var(--ta-text);
}

.ta-tree-sub
{
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}

.ta-tree-uuid
{
    margin-left: auto;
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--ta-text-faint);
}

.ta-tree-count
{
    font-size: var(--ta-fs-small);
    color: var(--ta-text-faint);
}

.ta-tree-children
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    padding-left: 22px;
}

.ta-tree-group-label
{
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ta-text-faint);
    margin-top: 2px;
}

/* ── Metazeile (dezente Schlüssel/Wert-Paare) ────────────────── */
.ta-meta
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 0 12px 10px;
    font-size: var(--ta-fs-small);
}

.ta-tree-children > .ta-meta { padding: 0; }

.ta-meta-key   { color: var(--ta-text-faint); }
.ta-meta-val   { color: var(--ta-text-muted); font-family: var(--ta-mono); }

/* ── Zustands-Badge Mod aktiv/abgeschaltet ───────────────────── */
.ta-state-badge
{
    flex: none;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.ta-state-badge.is-active
{
    background: var(--ta-ok-weak);
    color: var(--ta-ok);
}

.ta-state-badge.is-disabled
{
    background: var(--ta-surface-2);
    color: var(--ta-text-faint);
}

/* Abgeschaltete Mods deutlich abgesetzt (gedämpft) */
.ta-node-mod.is-disabled { opacity: 0.72; }
.ta-node-mod.is-disabled .ta-tree-label { color: var(--ta-text-muted); }

/* ── Warnmarker am Knoten (ohne Manifest o.ä.) ───────────────── */
.ta-node-warn
{
    flex: none;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ta-warn-weak);
    color: var(--ta-warn);
    font-size: 11px;
    font-weight: 600;
}

/* ── Befunde (findings) ──────────────────────────────────────── */
.ta-findings
{
    list-style: none;
    margin: 0;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--ta-warn-weak);
    border-radius: var(--ta-radius-sm);
}

.ta-tree-children > .ta-findings { margin: 0; }

.ta-finding
{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--ta-fs-small);
    color: var(--ta-warn-text);
    line-height: 1.4;
}

.ta-finding-icon
{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ta-warn);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* ── Leerhinweise innerhalb von Knoten ───────────────────────── */
.ta-empty-hint
{
    margin: 0;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-faint);
    font-style: italic;
}

/* ── Ganzflächige Zustände (leer / Fehler / laden) ───────────── */
.ta-state
{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 36px 24px;
}

.ta-state-icon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 700;
    background: var(--ta-surface-2);
    color: var(--ta-text-faint);
}

.ta-state-error .ta-state-icon { background: var(--ta-warn-weak); color: var(--ta-warn); }

.ta-state-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--ta-text); }

.ta-state-text
{
    margin: 0;
    max-width: 460px;
    font-size: var(--ta-fs-body);
    color: var(--ta-text-muted);
    line-height: 1.5;
}

.ta-state .ta-findings { margin-top: 12px; text-align: left; }

/* ── Veröffentlichen, Stufe 1 (Registry-Publish Slice P1) ────── */
/* Das aufgeklappte Feld unter einem Dev-Produkt. Es liegt IM Baumknoten und
   nicht in einem eigenen Fenster: was hier gezeigt wird, gehört zu genau
   diesem Verzeichnis, und ein Dialog würde es davon lösen. */
.ta-pub-panel
{
    margin: 8px 0 4px;
    padding: 12px 14px;
    border: 1px solid var(--ta-border);
    border-left: 3px solid var(--ta-accent);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ta-pub-panel-head
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ta-pub-panel-title
{
    margin: 0;
    font-size: var(--ta-fs-body);
    font-weight: 600;
    color: var(--ta-text);
}

.ta-pub-panel code { font-family: var(--ta-mono); font-size: var(--ta-fs-small); }
.ta-pub-panel p    { margin: 0; font-size: var(--ta-fs-small); color: var(--ta-text-muted); line-height: 1.5; }

.ta-pub-section
{
    margin: 4px 0 0;
    font-size: var(--ta-fs-small);
    font-weight: 600;
    color: var(--ta-text-muted);
}

.ta-pub-list
{
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
    line-height: 1.5;
}

/* Tatsachen der Angebots-Prüfung: Begriff links, Antwort rechts. */
.ta-pub-facts
{
    display: grid;
    grid-template-columns: minmax(110px, max-content) 1fr;
    gap: 3px 12px;
    margin: 0;
    font-size: var(--ta-fs-small);
}

.ta-pub-facts dt { color: var(--ta-text-faint); }
.ta-pub-facts dd { margin: 0; color: var(--ta-text); }

.ta-pub-yes { color: var(--ta-ok); }
.ta-pub-no  { color: var(--ta-text-muted); }

/* Schweregrad am Befund — dieselbe Sprache wie im Registry-Ergebnis. */
.ta-pub-sev
{
    display: inline-block;
    margin-right: 6px;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--ta-warn);
    color: #fff;
}

.ta-pub-sev.is-high { background: var(--ta-danger); }
.ta-pub-sev.is-low  { background: var(--ta-border-strong); }
.ta-pub-sev.is-info { background: var(--ta-text-faint); }

.ta-pub-code
{
    margin-right: 5px;
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--ta-text-muted);
}

/* Textblöcke (Befehle, Diff, Katalog): kopierbar, nie Markup. */
.ta-pub-block { display: flex; flex-direction: column; gap: 5px; }

.ta-pub-block-head
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ta-pub-block-title
{
    margin: 0;
    font-size: var(--ta-fs-small);
    font-weight: 600;
    color: var(--ta-text-muted);
}

.ta-pub-block-actions { display: flex; align-items: center; gap: 8px; }

.ta-pub-copy-note { font-size: var(--ta-fs-small); color: var(--ta-text-faint); }

.ta-pub-pre
{
    margin: 0;
    padding: 10px 12px;
    max-height: 340px;
    overflow: auto;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface-2);
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    line-height: 1.5;
    color: var(--ta-text);
    white-space: pre;
    tab-size: 4;
}

.ta-pub-hint
{
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
    line-height: 1.5;
}

.ta-pub-hint.is-warn { color: var(--ta-warn-text); }
.ta-pub-hint.is-ok   { color: var(--ta-ok); }

.ta-pub-generate-invite
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
    border: 1px dashed var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
}

/* Bauschritt je App — ohne Häkchen bleibt der build-Block weg (§4.1). */
.ta-pub-build
{
    padding: 8px 0;
    border-top: 1px solid var(--ta-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ta-pub-build-label
{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ta-fs-small);
    color: var(--ta-text);
    cursor: pointer;
}

.ta-pub-build-fields { margin-left: 24px; }

.ta-pub-typed { margin-top: 6px; }

.ta-pub-tag-form { margin: 0; }

.ta-node-devprodukt .ta-pub-open { margin-left: auto; }

/* ── Templates (Slice PT / D7) ───────────────────────────────────
   Bestandsliste zuerst, Übernahme-Schritt darunter. Der Zustand steht als
   WORT neben dem Namen; Farbe ist Verstärkung, nie die einzige Auskunft. */
.ta-pub-templates
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ta-pub-template
{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--ta-border);
    font-size: var(--ta-fs-small);
}

.ta-pub-template:last-child { border-bottom: none; }

.ta-pub-template-name { color: var(--ta-text); }

.ta-pub-template-state
{
    color: var(--ta-text-muted);
}

.ta-pub-template-state.is-declared  { color: var(--ta-ok); }
.ta-pub-template-state.is-undeclared { color: var(--ta-warn-text); }
.ta-pub-template-state.is-missing   { color: var(--ta-warn-text); }
.ta-pub-template-state.is-broken    { color: var(--ta-danger); }

.ta-pub-template-scope
{
    margin-left: auto;
    color: var(--ta-text-faint);
}

.ta-pub-adopt
{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
}

.ta-pub-adopt-choices
{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ta-pub-adopt-label
{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ta-fs-small);
    color: var(--ta-text);
    cursor: pointer;
}

.ta-pub-adopt-note { color: var(--ta-text-faint); }

.ta-node-devprodukt .ta-pub-template-count { color: var(--ta-text-faint); }

/* ── Der geführte Schritt-Ablauf (Andreas 2026-09-09) ─────────────
   Fünf Schritte in fester Reihenfolge, senkrecht an einer Schiene. Zugeklappt
   ist ein Schritt EINE Zeile — Marke, Titel, Statuswort, Zusammenfassung —,
   aufgeklappt kommen Belege, Befunde und die eine Aktion dazu. Das Auf- und
   Zuklappen macht <details> selbst; hier steht nur, wie es aussieht.

   Farbe ist auch hier Verstärkung: das Statuswort steht als WORT neben der
   Marke, damit der Zustand ohne Farbsehen lesbar bleibt. */
.ta-steps
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ta-step
{
    border-top: 1px solid var(--ta-border);
}

.ta-step:first-child { border-top: none; }

.ta-step-details > summary { list-style: none; }
.ta-step-details > summary::-webkit-details-marker { display: none; }

.ta-step-head
{
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 2px;
    cursor: pointer;
    font-size: var(--ta-fs-small);
}

.ta-step-head:hover { background: var(--ta-surface-2); }

.ta-step-head:focus-visible
{
    outline: 2px solid var(--ta-accent);
    outline-offset: -2px;
}

/* Die Marke: Nummer, solange der Schritt aussteht — ein Haken, wenn er sitzt. */
.ta-step-marker
{
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--ta-border-strong);
    background: var(--ta-surface);
    color: var(--ta-text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.ta-step-marker.is-done
{
    border-color: var(--ta-ok);
    background: var(--ta-ok-weak);
    color: var(--ta-ok);
}

.ta-step-marker.is-current
{
    border-color: var(--ta-accent);
    background: var(--ta-accent-weak);
    color: var(--ta-accent);
}

.ta-step-marker.is-blocked
{
    border-color: var(--ta-danger);
    background: var(--ta-danger-weak);
    color: var(--ta-danger);
}

.ta-step-title
{
    flex: none;
    font-weight: 600;
    color: var(--ta-text);
}

.ta-step.is-waiting .ta-step-title { color: var(--ta-text-muted); font-weight: 500; }

/* Das Statuswort — kurz, in Kapitälchen-Größe, immer neben der Marke. */
.ta-step-state
{
    flex: none;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--ta-border);
    background: var(--ta-surface-2);
    color: var(--ta-text-muted);
    font-size: 11px;
    letter-spacing: 0.02em;
}

.ta-step-state.is-done    { border-color: var(--ta-ok); color: var(--ta-ok); background: var(--ta-ok-weak); }
.ta-step-state.is-current { border-color: var(--ta-accent); color: var(--ta-accent); background: var(--ta-accent-weak); }
.ta-step-state.is-blocked { border-color: var(--ta-danger); color: var(--ta-danger); background: var(--ta-danger-weak); }

/* Zugeklappt: eine Zeile, notfalls abgeschnitten. Aufgeklappt darf sie umbrechen —
   dann ist Platz, und der ganze Satz gehört zum Schritt, an dem gearbeitet wird. */
.ta-step-summary
{
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ta-text-muted);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-step-details[open] > .ta-step-head { align-items: flex-start; }
.ta-step-details[open] .ta-step-summary { white-space: normal; }

.ta-step-body
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0 14px 30px;
}

/* Befunde und Hinweise: zugeklappt, bis jemand sie sehen will — außer bei
   Stufe high, dann steht der Bereich von selbst offen (siehe 91_). */
.ta-step-findings,
.ta-step-fold
{
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-sm);
    padding: 6px 10px;
    background: var(--ta-surface);
}

.ta-step-findings > summary,
.ta-step-fold > summary
{
    cursor: pointer;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}

.ta-step-findings > summary:focus-visible,
.ta-step-fold > summary:focus-visible
{
    outline: 2px solid var(--ta-accent);
    outline-offset: 2px;
}

.ta-step-findings[open] > summary,
.ta-step-fold[open] > summary { margin-bottom: 8px; }

.ta-step-action { margin: 0; }

/* Die gebündelte Befund-Zeile: die Vorlage und die Zahl der Apps zuerst, die
   Namen darunter, die Meldung des Servers als Beleg dahinter. */
.ta-pub-finding-group
{
    display: block;
    color: var(--ta-text);
    font-weight: 600;
}

.ta-pub-finding-apps
{
    display: block;
    color: var(--ta-text-faint);
    font-family: var(--ta-mono);
    font-size: 11px;
    line-height: 1.5;
}

.ta-pub-finding-text
{
    display: block;
    color: var(--ta-text-muted);
    line-height: 1.5;
}

/* „trotzdem fortfahren" — eine Schaltfläche, die aussieht wie ein Verweis:
   sie führt weiter, sie schreibt nichts. */
.ta-pub-link
{
    padding: 0;
    border: none;
    background: none;
    color: var(--ta-accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.ta-pub-link:focus-visible
{
    outline: 2px solid var(--ta-accent);
    outline-offset: 2px;
}

/* ── Veröffentlichen, Stufe 2: der Schritt-Bericht des Pushes ────────
   (Slice P2-4, Konzept D5 Stufe 2)

   Der Bericht ist die Antwort auf „was liegt jetzt auf dem Git-Server". Er
   steht als eigener Kasten über allem anderen in Schritt 5 und trägt die vier
   Schritte des Pushes als kurze Liste. Auch hier ist das WORT die Auskunft
   („erledigt", „fehlgeschlagen", „nicht gelaufen"); die Farbe verstärkt sie nur,
   damit der Zustand ohne Farbsehen lesbar bleibt. */
.ta-push-report
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--ta-border);
    border-left-width: 3px;
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
}

.ta-push-report.is-ok      { border-left-color: var(--ta-ok); }
.ta-push-report.is-failed  { border-left-color: var(--ta-danger); }
.ta-push-report.is-refused { border-left-color: var(--ta-border-strong); }

.ta-push-report-head
{
    font-size: var(--ta-fs-small);
    font-weight: 600;
    color: var(--ta-text);
}

.ta-push-report.is-ok     .ta-push-report-head { color: var(--ta-ok); }
.ta-push-report.is-failed .ta-push-report-head { color: var(--ta-danger); }

.ta-push-report-text
{
    font-size: var(--ta-fs-small);
    line-height: 1.5;
    color: var(--ta-text-muted);
}

.ta-push-steps
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ta-push-step
{
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 2px 10px;
    align-items: baseline;
    font-size: var(--ta-fs-small);
}

/* Das Zustandswort steht in einer eigenen Spalte: vier Schritte untereinander
   liest man an der Kante entlang, nicht Zeile für Zeile. */
.ta-push-step-state
{
    justify-self: start;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--ta-border);
    background: var(--ta-surface-2);
    color: var(--ta-text-muted);
    font-size: 11px;
    letter-spacing: 0.02em;
}

.ta-push-step-state.is-done    { border-color: var(--ta-ok); color: var(--ta-ok); background: var(--ta-ok-weak); }
.ta-push-step-state.is-failed  { border-color: var(--ta-danger); color: var(--ta-danger); background: var(--ta-danger-weak); }

.ta-push-step-title { color: var(--ta-text); }
.ta-push-step.is-skipped .ta-push-step-title { color: var(--ta-text-muted); }

.ta-push-step-detail
{
    grid-column: 2;
    color: var(--ta-text-faint);
    line-height: 1.5;
}

/* Das Bestätigungsfeld vor dem Push — derselbe Aufbau wie die beiden anderen
   getippten Bestätigungen, nur mit dem Warnsatz darüber. */
.ta-pub-push
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Veröffentlichen, Stufe 2: der Push als VORGANG ──────────────────
   (Slice P2-13, Konzept D5 Stufe 2, Entscheidung Andreas 2026-09-09)

   Der Erst-Push des DRK-Produkts lädt gemessene 16 Minuten. Ohne Anzeige ist
   das ununterscheidbar von „hängt" — deshalb dieses Fenster: die Laufzeit des
   SERVERS und die letzten vier Ausgabezeilen von git.

   Es ist bewusst leise gebaut: eine Fläche, eine Haarlinie, keine Animation.
   Was sich bewegt, sind die Zahlen und der Text darin, und das ist die einzige
   Bewegung, die hier etwas bedeutet. */
.ta-push-report.is-running { border-left-color: var(--ta-accent); }
.ta-push-report.is-running .ta-push-report-head { color: var(--ta-text); }

.ta-push-step-state.is-running
{
    border-color: var(--ta-accent);
    color: var(--ta-accent);
    background: var(--ta-accent-weak);
}

.ta-push-live
{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ta-push-live-head
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ta-push-live-label
{
    font-size: var(--ta-fs-small);
    font-weight: 600;
    color: var(--ta-text-muted);
}

/* Die Uhr steht in Ziffern gleicher Breite: sie ändert sich jede Sekunde, und
   eine Zahl, die dabei springt, zieht das Auge auf die Bewegung statt auf den
   Wert. */
.ta-push-live-time
{
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-body);
    font-variant-numeric: tabular-nums;
    color: var(--ta-text);
}

/* Genau vier Zeilen hoch (4 × 1.5 × Zeilengröße) und feste Höhe: das Feld
   darf beim Nachziehen nicht springen, sonst wandert alles darunter im
   Sekundentakt. Lange Zeilen laufen waagerecht heraus statt umzubrechen —
   git-Fortschrittszeilen sind eine Zeile, auch wenn sie breit sind. */
.ta-push-live-out
{
    margin: 0;
    padding: 8px 10px;
    height: calc(4 * 1.5 * var(--ta-fs-small));
    box-sizing: content-box;
    overflow: auto;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface-2);
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    line-height: 1.5;
    color: var(--ta-text-muted);
    white-space: pre;
    tab-size: 4;
}

.ta-push-live.is-running .ta-push-live-out { color: var(--ta-text); }

/* Die Herkunftszeile unter dem Ausgabefeld: sie erklärt EIN Zeichen und darf
   deshalb nicht mit dem Text darüber um Aufmerksamkeit ringen. */
.ta-push-live-legend
{
    margin: 0;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}

.ta-push-live-hint
{
    margin: 0;
    font-size: var(--ta-fs-small);
    color: var(--ta-warn-text);
}

/* Der scharfgestellte Abbruch („Wirklich abbrechen?"). Dieselbe Form wie jede
   andere leise Schaltfläche — nur die Farbe sagt, dass der nächste Klick eine
   laufende Übertragung unterbricht. */
.ta-form-cancel.is-armed
{
    border-color: var(--ta-danger);
    background: var(--ta-danger-weak);
    color: var(--ta-danger);
    font-weight: 600;
}

.ta-form-cancel.is-armed:hover:not(:disabled) { background: var(--ta-surface-2); }

/* Das Ausgabefeld ist mit der Tastatur erreichbar (tabindex 0), also braucht es
   auch einen sichtbaren Fokus — dieselbe Marke wie überall in dieser Ansicht. */
.ta-push-live-out:focus-visible
{
    outline: 2px solid var(--ta-accent);
    outline-offset: 2px;
}


/* === 04_config.css === */
/*
 * tigeradmin — Konfigurations-Ansicht (Struktur). Farben/Typo aus 01_theme.css,
 * nur über var(--ta-*). Read-only-Sicht: App-Auswahl, Herkunft der Werte und
 * die Einstellungstabelle mit den sechs Spalten aus GET /:app/_config
 * (Datei- vs. Overlay-Wert ehrlich nebeneinander).
 *
 * Ganzflächige Zustände (.ta-state*), Befunde (.ta-findings/.ta-finding),
 * Metazeilen (.ta-meta*), Leerhinweise (.ta-empty-hint) und der Neu-laden-Knopf
 * (.ta-tree-reload) werden aus 02_shell.css/03_systemtree.css mitbenutzt.
 */

/* Die Konfigurations-View braucht mehr Breite als die 900px-Textspalten, weil
   die Tabelle sieben Spalten trägt. */
.ta-view-wide { max-width: 1180px; }

.ta-config
{
    background: var(--ta-surface);
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius);
    padding: var(--ta-pad);
    min-height: 160px;
}

/* ── App-Auswahl ─────────────────────────────────────────────── */
.ta-config-selector
{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: var(--ta-gap);
    border-bottom: 1px solid var(--ta-border);
}

.ta-config-selector-label
{
    font-size: var(--ta-fs-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ta-text-faint);
}

.ta-config-input
{
    flex: 1 1 240px;
    min-width: 180px;
    max-width: 380px;
    padding: 7px 11px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text);
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-body);
}

.ta-config-input:focus
{
    outline: 2px solid var(--ta-accent);
    outline-offset: 1px;
    border-color: var(--ta-accent);
}

.ta-config-load
{
    flex: none;
    padding: 7px 16px;
    border: 1px solid var(--ta-accent);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-accent);
    color: #fff;
    font-family: inherit;
    font-size: var(--ta-fs-small);
    font-weight: 600;
    cursor: pointer;
}

.ta-config-load:hover { background: var(--ta-warn); border-color: var(--ta-warn); }

/* ── Kopf des Ergebnisblocks ─────────────────────────────────── */
.ta-config-head
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ta-gap);
    margin-bottom: 12px;
}

.ta-config-head-left
{
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.ta-config-head-title { font-weight: 600; font-size: var(--ta-fs-body); }

.ta-config-app
{
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
    background: var(--ta-surface-2);
    padding: 2px 7px;
    border-radius: var(--ta-radius-sm);
}

/* ── Herkunft der Werte (Datei-/Overlay-Fundort) ─────────────── */
.ta-config-source
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    margin-bottom: var(--ta-gap);
    background: var(--ta-surface-2);
    border-radius: var(--ta-radius-sm);
}

.ta-config-source-row
{
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.ta-config-source-label
{
    flex: none;
    width: 108px;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-faint);
}

.ta-config-source-path
{
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
    word-break: break-all;
}

.ta-config-source .ta-meta { padding: 4px 0 0; }

/* ── Tabelle ─────────────────────────────────────────────────── */
/* Horizontal scrollbar auf schmalen Flächen, statt die Spalten zu quetschen. */
.ta-config-table-wrap
{
    overflow-x: auto;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-sm);
}

.ta-config-table
{
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ta-fs-small);
}

.ta-config-table thead th
{
    position: sticky;
    top: 0;
    text-align: left;
    padding: 9px 12px;
    background: var(--ta-surface-2);
    color: var(--ta-text-faint);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom: 1px solid var(--ta-border);
}

.ta-config-table tbody td,
.ta-config-table tbody th
{
    padding: 10px 12px;
    vertical-align: top;
    border-bottom: 1px solid var(--ta-border);
}

.ta-config-table tbody tr:last-child td,
.ta-config-table tbody tr:last-child th { border-bottom: 0; }

.ta-config-row.has-overlay { background: var(--ta-accent-weak); }

.ta-config-key
{
    text-align: left;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ta-config-key-name
{
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-body);
    font-weight: 600;
    color: var(--ta-text);
}

.ta-config-cell { min-width: 130px; }
.ta-config-cell-flag { min-width: 92px; white-space: nowrap; }

/* ── Werte ───────────────────────────────────────────────────── */
.ta-config-value
{
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    color: var(--ta-text);
    word-break: break-word;
}

.ta-config-value-block
{
    margin: 0;
    max-width: 320px;
    max-height: 220px;
    overflow: auto;
    padding: 8px 10px;
    background: var(--ta-surface-2);
    border-radius: var(--ta-radius-sm);
    white-space: pre;
    line-height: 1.45;
}

.ta-config-absent
{
    font-size: var(--ta-fs-small);
    color: var(--ta-text-faint);
    font-style: italic;
}

.ta-config-overrides,
.ta-config-assumed
{
    display: inline-block;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.ta-config-overrides { background: var(--ta-accent-weak); color: var(--ta-accent); }
.ta-config-assumed   { background: var(--ta-surface-2);   color: var(--ta-text-faint); }

/* ── Flags (Neustart / overlayfähig) ─────────────────────────── */
.ta-config-flag
{
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.ta-config-flag.is-yes { background: var(--ta-warn-weak); color: var(--ta-warn-text); }
.ta-config-flag.is-no  { background: var(--ta-surface-2);  color: var(--ta-text-faint); }

/* ── Risiko-Badge ────────────────────────────────────────────── */
.ta-config-risk
{
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.ta-config-risk.is-low     { background: var(--ta-ok-weak);     color: var(--ta-ok); }
.ta-config-risk.is-medium  { background: var(--ta-warn-weak);   color: var(--ta-warn-text); }
.ta-config-risk.is-high    { background: var(--ta-danger-weak); color: var(--ta-danger); }
.ta-config-risk.is-unknown { background: var(--ta-surface-2);   color: var(--ta-text-faint); }

/* Ausgangszustand teilt sich die neutrale Zustands-Optik mit dem Systembaum. */
.ta-state-idle .ta-state-icon { background: var(--ta-accent-weak); color: var(--ta-accent); }

/* ── Override-Editor (Runde 10) ──────────────────────────────── */
/* Kopf-Aktionsleiste: Editor-Umschalter + Neu-laden nebeneinander. */
.ta-config-head-actions
{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

/* Umschalter — neutral im Aus-Zustand, Gefahr-Rot im Ein-Zustand (wie die
   Daten-Ansicht). Ohne Instanz deaktiviert. */
.ta-config-edit-toggle
{
    padding: 6px 13px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text-muted);
    font-family: inherit;
    font-size: var(--ta-fs-small);
    font-weight: 600;
    cursor: pointer;
}

.ta-config-edit-toggle:hover:not(:disabled) { background: var(--ta-surface-2); }

.ta-config-edit-toggle.is-on
{
    background: var(--ta-danger);
    border-color: var(--ta-danger);
    color: #fff;
}

.ta-config-edit-toggle:disabled
{
    color: var(--ta-text-faint);
    cursor: not-allowed;
}

/* Ergebnisblock im Edit-Modus: deutlicher Gefahr-Rand + Tönung. */
.ta-config-body.is-edit-mode
{
    border: 2px solid var(--ta-danger);
    border-radius: var(--ta-radius);
    padding: 14px;
    background: var(--ta-danger-weak);
}

/* Warnbanner über der Tabelle. */
.ta-config-editbanner
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 12px;
    background: var(--ta-danger);
    border-radius: var(--ta-radius-sm);
    color: #fff;
}

.ta-config-editbanner-icon { flex: none; font-size: 15px; line-height: 1.5; }

.ta-config-editbanner-text
{
    font-size: var(--ta-fs-small);
    line-height: 1.5;
}

.ta-config-editbanner-text code
{
    font-family: var(--ta-mono);
    background: rgba(255, 255, 255, 0.18);
    padding: 1px 5px;
    border-radius: 3px;
}

/* Der IM7-Ehrlichkeits-Zusatz: eigener Absatz, dezent abgesetzt. */
.ta-config-editbanner-im7
{
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    padding-top: 4px;
    margin-top: 4px;
}

/* Aktions-Spalte / Zeilen-Knöpfe (Setzen/Löschen). */
.ta-config-actioncol { width: 1%; white-space: nowrap; }
.ta-config-actioncell { vertical-align: top; white-space: nowrap; }

.ta-config-row-edit,
.ta-config-row-delete
{
    padding: 4px 11px;
    border-radius: var(--ta-radius-sm);
    font-family: inherit;
    font-size: var(--ta-fs-small);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ta-config-row-edit
{
    border: 1px solid var(--ta-danger);
    background: var(--ta-surface);
    color: var(--ta-danger);
}

.ta-config-row-edit:hover:not(:disabled) { background: var(--ta-danger); color: #fff; }

.ta-config-row-edit:disabled
{
    border-color: var(--ta-border);
    color: var(--ta-text-faint);
    cursor: not-allowed;
}

.ta-config-row-delete
{
    margin-left: 6px;
    border: 1px solid var(--ta-border-strong);
    background: var(--ta-surface);
    color: var(--ta-text-muted);
}

.ta-config-row-delete:hover:not(:disabled) { background: var(--ta-surface-2); }

/* read-only-Hinweis an der Overlay-Zelle eines datei-festen Schlüssels. */
.ta-config-readonly
{
    display: inline-block;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--ta-surface-2);
    color: var(--ta-text-faint);
}

/* ── Editor-Modal ────────────────────────────────────────────── */
.ta-config-modal-backdrop
{
    position: fixed;
    inset: 0;
    background: rgba(28, 33, 38, 0.55);
    z-index: 40;
}

.ta-config-modal
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 41;
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    background: var(--ta-surface);
    border: 2px solid var(--ta-danger);
    border-radius: var(--ta-radius);
    box-shadow: 0 12px 40px rgba(28, 33, 38, 0.35);
}

.ta-config-modal-head
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ta-gap);
}

.ta-config-modal-title
{
    font-size: var(--ta-fs-body);
    font-weight: 700;
    color: var(--ta-danger);
}

.ta-config-modal-close
{
    flex: none;
    width: 28px;
    height: 28px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ta-config-modal-close:hover { background: var(--ta-surface-2); }

.ta-config-modal-ident
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}

.ta-config-modal-ident code
{
    font-family: var(--ta-mono);
    color: var(--ta-text);
    background: var(--ta-surface-2);
    padding: 1px 6px;
    border-radius: 3px;
    word-break: break-all;
}

/* restartRequired-Hinweis im Editor (Neustart nötig). */
.ta-config-modal-restart
{
    padding: 9px 12px;
    border-radius: var(--ta-radius-sm);
    font-size: var(--ta-fs-small);
    line-height: 1.5;
    background: var(--ta-warn-weak);
    border: 1px solid var(--ta-warn);
    color: var(--ta-warn-text);
}

.ta-config-modal-hint
{
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
    line-height: 1.5;
    margin: 0;
}

.ta-config-modal-hint code
{
    font-family: var(--ta-mono);
    color: var(--ta-text);
}

.ta-config-modal-textarea
{
    width: 100%;
    min-height: 200px;
    flex: 1 1 auto;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text);
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    line-height: 1.5;
    white-space: pre;
    overflow: auto;
}

.ta-config-modal-textarea:focus
{
    outline: 2px solid var(--ta-danger);
    outline-offset: 1px;
    border-color: var(--ta-danger);
}

.ta-config-modal-textarea:disabled { opacity: 0.6; }

/* Fehlermeldung im Editor: die Sonderfälle sind auch farblich getrennt. */
.ta-config-modal-error
{
    padding: 10px 12px;
    border-radius: var(--ta-radius-sm);
    font-size: var(--ta-fs-small);
    line-height: 1.5;
    border: 1px solid var(--ta-border);
    background: var(--ta-surface-2);
    color: var(--ta-text);
}

/* Ungültiges JSON / abgelehnte Eingabe (400) — Bernstein-Ton. */
.ta-config-modal-error.is-invalid
{
    background: var(--ta-warn-weak);
    border-color: var(--ta-warn);
    color: var(--ta-warn-text);
}

/* Protokoll nicht schreibbar (503, fail-closed) — Gefahr-Farbe. */
.ta-config-modal-error.is-blocked
{
    background: var(--ta-danger-weak);
    border-color: var(--ta-danger);
    color: var(--ta-danger);
}

/* Kein Zugriff / nicht overlayfähig / Instanz fehlt — neutral-grau abgesetzt. */
.ta-config-modal-error.is-denied
{
    background: var(--ta-surface-2);
    border-color: var(--ta-border-strong);
    color: var(--ta-text-muted);
}

.ta-config-modal-actions
{
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ta-config-modal-cancel,
.ta-config-modal-save
{
    padding: 8px 16px;
    border-radius: var(--ta-radius-sm);
    font-family: inherit;
    font-size: var(--ta-fs-small);
    font-weight: 600;
    cursor: pointer;
}

.ta-config-modal-cancel
{
    border: 1px solid var(--ta-border-strong);
    background: var(--ta-surface);
    color: var(--ta-text);
}

.ta-config-modal-cancel:hover:not(:disabled) { background: var(--ta-surface-2); }

.ta-config-modal-save
{
    border: 1px solid var(--ta-danger);
    background: var(--ta-danger);
    color: #fff;
}

.ta-config-modal-save:hover:not(:disabled) { opacity: 0.9; }

.ta-config-modal-cancel:disabled,
.ta-config-modal-save:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 720px)
{
    .ta-config-source-label { width: auto; }
}


/* === 05_data.css === */
/*
 * tigeradmin — Daten-Ansicht (Struktur). Farben/Typo aus 01_theme.css, nur über
 * var(--ta-*). Read-only-Sicht auf GET /tigeradmin/data/:datasource/:model:
 * Auswahl (Datasource/Model/limit), dauerhafter Protokoll-Hinweis, Selbstauskunft
 * der Route, Blätter-Leiste und die Datensatz-Tabelle.
 *
 * Ganzflächige Zustände (.ta-state*), Leerhinweise (.ta-empty-hint) und der
 * Neu-laden-Knopf (.ta-tree-reload) werden aus 02_shell.css/03_systemtree.css
 * mitbenutzt; hier steht nur, was diese Ansicht zusätzlich braucht.
 */

.ta-data
{
    background: var(--ta-surface);
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius);
    padding: var(--ta-pad);
    min-height: 160px;
}

/* ── Auswahl (Datasource / Model / limit) ────────────────────── */
.ta-data-selector
{
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: var(--ta-gap);
    border-bottom: 1px solid var(--ta-border);
}

.ta-data-field
{
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 200px;
    min-width: 150px;
}

.ta-data-field-narrow { flex: 0 0 110px; min-width: 90px; }

.ta-data-field-label
{
    font-size: var(--ta-fs-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ta-text-faint);
}

.ta-data-input
{
    width: 100%;
    padding: 7px 11px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text);
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-body);
}

.ta-data-input:focus
{
    outline: 2px solid var(--ta-accent);
    outline-offset: 1px;
    border-color: var(--ta-accent);
}

.ta-data-load
{
    flex: none;
    padding: 8px 16px;
    border: 1px solid var(--ta-accent);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-accent);
    color: #fff;
    font-family: inherit;
    font-size: var(--ta-fs-small);
    font-weight: 600;
    cursor: pointer;
}

.ta-data-load:hover { background: var(--ta-warn); border-color: var(--ta-warn); }

/* Perspektive-Feld (viewAs, DW8): eigene Breite, damit eine uuid hineinpasst,
   und ein deutlicher Indigo-Rahmen im aktiven Zustand — dieselbe Farbe wie das
   „würde sehen"-Banner, damit der Betreiber Feld und Wirkung verbindet. */
.ta-data-field-view { flex: 1 1 240px; min-width: 180px; }

.ta-data-input-view { font-size: var(--ta-fs-small); }

.ta-data-field-view.is-active .ta-data-field-label { color: var(--ta-view-text); }

.ta-data-field-view.is-active .ta-data-input-view
{
    border-color: var(--ta-view);
    background: var(--ta-view-weak);
}

.ta-data-input-view:focus
{
    outline: 2px solid var(--ta-view);
    outline-offset: 1px;
    border-color: var(--ta-view);
}

/* ── Dauerhafter Protokoll-Hinweis (DW10/DWF5) ───────────────── */
/* Steht in JEDEM Zustand über der Ansicht — bewusst nicht als Fehlerfarbe,
   sondern als ruhiger, aber unübersehbarer Dauerhinweis (Akzent-Ton). */
.ta-data-notice
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: var(--ta-gap);
    background: var(--ta-accent-weak);
    border: 1px solid var(--ta-accent);
    border-radius: var(--ta-radius-sm);
}

.ta-data-notice-icon
{
    flex: none;
    color: var(--ta-accent);
    font-size: 14px;
    line-height: 1.5;
}

.ta-data-notice-text
{
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
    line-height: 1.5;
}

.ta-data-notice-text strong { color: var(--ta-text); }

/* ── „Würde sehen"-Banner der Perspektiv-Ansicht (DW8) ───────── */
/* Eine EIGENE Farbe (Indigo, var(--ta-view)) — bewusst NICHT das Gefahr-Rot des
   Edit-Modus: Lesen einer fremden Sicht ist etwas anderes als Schreiben. Klar
   unübersehbar, damit die Ansicht erkennbar eine ANSICHT ist und nicht wie das
   echte Konto des betrachteten Nutzers wirkt. */
.ta-data-perspbanner
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
    margin-bottom: var(--ta-gap);
    background: var(--ta-view-weak);
    border: 1px solid var(--ta-view);
    border-left: 4px solid var(--ta-view);
    border-radius: var(--ta-radius-sm);
}

.ta-data-perspbanner-icon
{
    flex: none;
    color: var(--ta-view);
    font-size: 16px;
    line-height: 1.45;
}

.ta-data-perspbanner-text
{
    font-size: var(--ta-fs-small);
    color: var(--ta-view-text);
    line-height: 1.5;
}

.ta-data-perspbanner-text strong { color: var(--ta-view-text); }

.ta-data-persp-uuid
{
    font-family: var(--ta-mono);
    background: rgba(59, 74, 140, 0.12);
    color: var(--ta-view-text);
    padding: 1px 5px;
    border-radius: 3px;
    word-break: break-all;
}

.ta-data-persp-hidden { font-weight: 600; }

/* DW9-Befund im Banner: modelReadable=false ⇒ „keine Leseberechtigung". Als
   eigene Zeile abgesetzt und hervorgehoben, erbt aber die Indigo-Textfarbe des
   Banners (var(--ta-view-text)) — es bleibt ein korrektes Ergebnis, kein Fehler. */
.ta-data-persp-finding
{
    display: block;
    margin-top: 5px;
    font-weight: 700;
}

/* Dezenter Indigo-Rand am Ergebnisblock, solange NICHT der Edit-Modus (rot)
   aktiv ist — dann gewinnt bewusst die Gefahr-Farbe. */
.ta-data-body.is-perspective:not(.is-edit-mode)
{
    border-left: 3px solid var(--ta-view);
    border-radius: var(--ta-radius-sm);
    padding-left: 13px;
}

/* ── Kopf des Ergebnisblocks ─────────────────────────────────── */
.ta-data-head
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ta-gap);
    margin-bottom: 12px;
}

.ta-data-head-left
{
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.ta-data-head-title { font-weight: 600; font-size: var(--ta-fs-body); }

.ta-data-ident
{
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
    background: var(--ta-surface-2);
    padding: 2px 7px;
    border-radius: var(--ta-radius-sm);
}

/* ── Selbstauskunft der Route (Zähler / Flags / Protokoll-Ref) ── */
.ta-data-meta
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--ta-surface-2);
    border-radius: var(--ta-radius-sm);
}

.ta-data-chips
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ta-data-chip
{
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--ta-surface);
    color: var(--ta-text-muted);
    border: 1px solid var(--ta-border);
}

.ta-data-chip.is-warn { background: var(--ta-warn-weak); color: var(--ta-warn-text); border-color: var(--ta-warn-weak); }
.ta-data-chip.is-info { background: var(--ta-accent-weak); color: var(--ta-accent); border-color: var(--ta-accent-weak); }

.ta-data-logref
{
    font-size: var(--ta-fs-small);
    color: var(--ta-text-faint);
}

.ta-data-logref code
{
    font-family: var(--ta-mono);
    color: var(--ta-text-muted);
    word-break: break-all;
}

/* ── Blätter-Leiste ──────────────────────────────────────────── */
.ta-data-pager
{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ta-data-page-btn
{
    padding: 6px 13px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text);
    font-family: inherit;
    font-size: var(--ta-fs-small);
    font-weight: 600;
    cursor: pointer;
}

.ta-data-page-btn:hover:not(:disabled) { background: var(--ta-surface-2); }

.ta-data-page-btn:disabled
{
    opacity: 0.5;
    cursor: default;
}

.ta-data-pager-info
{
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
    font-family: var(--ta-mono);
}

/* ── Tabelle ─────────────────────────────────────────────────── */
/* Horizontal scrollbar auf schmalen Flächen, statt die Spalten zu quetschen. */
.ta-data-table-wrap
{
    overflow-x: auto;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-sm);
}

.ta-data-table
{
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ta-fs-small);
}

.ta-data-table thead th
{
    position: sticky;
    top: 0;
    text-align: left;
    padding: 9px 12px;
    background: var(--ta-surface-2);
    color: var(--ta-text-faint);
    font-family: var(--ta-mono);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 1px solid var(--ta-border);
}

.ta-data-table tbody td
{
    padding: 9px 12px;
    vertical-align: top;
    border-bottom: 1px solid var(--ta-border);
}

.ta-data-table tbody tr:last-child td { border-bottom: 0; }

/* Weich gelöschte Datensätze bleiben laut Route enthalten (state:"removed") —
   dezent abgesetzt, damit „gelöscht" auf einen Blick erkennbar ist. */
.ta-data-row.is-removed { background: var(--ta-danger-weak); }
.ta-data-row.is-removed .ta-data-value { color: var(--ta-text-muted); }

.ta-data-cell { min-width: 120px; }

/* ── Werte ───────────────────────────────────────────────────── */
.ta-data-value
{
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    color: var(--ta-text);
    word-break: break-word;
}

.ta-data-value-block
{
    margin: 0;
    max-width: 340px;
    max-height: 220px;
    overflow: auto;
    padding: 8px 10px;
    background: var(--ta-surface-2);
    border-radius: var(--ta-radius-sm);
    white-space: pre;
    line-height: 1.45;
}

.ta-data-absent
{
    font-size: var(--ta-fs-small);
    color: var(--ta-text-faint);
    font-style: italic;
}

/* ── Zustände: idle/denied/blocked deutlich verschieden ──────── */
/* Ausgangszustand: neutraler Akzent-Ton (wie in der Konfigurations-Ansicht). */
.ta-state-idle .ta-state-icon { background: var(--ta-accent-weak); color: var(--ta-accent); }

/* „Kein Zugriff" (403, kein Backend-Admin): gedämpft, neutral-grau — eine
   fehlende Berechtigung, keine Alarmstufe. */
.ta-state-denied .ta-state-icon { background: var(--ta-surface-2); color: var(--ta-text-muted); }

/* Fail-closed „Protokoll nicht schreibbar" (503): DEUTLICH abgesetzt in der
   Gefahr-Farbe, damit die beschlossene Verweigerung unverwechselbar ist und
   nicht mit dem grauen „kein Zugriff" verschwimmt. */
.ta-state-blocked .ta-state-icon
{
    background: var(--ta-danger-weak);
    color: var(--ta-danger);
}
.ta-state-blocked .ta-state-title { color: var(--ta-danger); }

/* Perspektive: Nutzer nicht gefunden (404 VIEWAS_UNKNOWN). Eigener Zustand in
   der Perspektive-Farbe (Indigo) — klar getrennt vom grauen „kein Zugriff"
   (403) und vom roten „Protokoll nicht schreibbar" (503): hier stimmt nur die
   eingegebene user-uuid nicht. */
.ta-state-viewas-unknown .ta-state-icon
{
    background: var(--ta-view-weak);
    color: var(--ta-view);
}
.ta-state-viewas-unknown .ta-state-title { color: var(--ta-view-text); }

/* Perspektive: Model nicht lesbar (HTTP 200 + modelReadable:false, DW9). Wieder
   die Perspektive-Farbe (Indigo) — es ist ein korrektes Ergebnis der
   Rechteprüfung, KEIN Fehler und keine leere Collection. Klar getrennt vom roten
   „Protokoll nicht schreibbar" (503) und vom grauen „kein Zugriff" (403). */
.ta-state-model-unreadable .ta-state-icon
{
    background: var(--ta-view-weak);
    color: var(--ta-view);
}
.ta-state-model-unreadable .ta-state-title { color: var(--ta-view-text); }

/* ── Admin-Edit-Modus (Runde 3) ──────────────────────────────── */
/* Der aktive Schreibmodus ist unübersehbar in der Gefahr-Farbe markiert. Marke
   (Farben) kommt aus 01_theme.css über var(--ta-danger*), hier nur Struktur. */

.ta-data-head-actions
{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

/* Umschalter: neutral im Aus-Zustand, Gefahr-Farbe (gefüllt) im Ein-Zustand. */
.ta-data-edit-toggle
{
    padding: 6px 13px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text-muted);
    font-family: inherit;
    font-size: var(--ta-fs-small);
    font-weight: 600;
    cursor: pointer;
}

.ta-data-edit-toggle:hover { background: var(--ta-surface-2); }

.ta-data-edit-toggle.is-on
{
    background: var(--ta-danger);
    border-color: var(--ta-danger);
    color: #fff;
}

/* Rahmen des Ergebnisblocks im Edit-Modus: deutlicher Gefahr-Rand + Tönung. */
.ta-data-body.is-edit-mode
{
    border: 2px solid var(--ta-danger);
    border-radius: var(--ta-radius);
    padding: 14px;
    background: var(--ta-danger-weak);
}

/* Der Warnbanner über der Tabelle. */
.ta-data-editbanner
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 12px;
    background: var(--ta-danger);
    border-radius: var(--ta-radius-sm);
    color: #fff;
}

.ta-data-editbanner-icon { flex: none; font-size: 15px; line-height: 1.5; }

.ta-data-editbanner-text
{
    font-size: var(--ta-fs-small);
    line-height: 1.5;
}

.ta-data-editbanner-text code
{
    font-family: var(--ta-mono);
    background: rgba(255, 255, 255, 0.18);
    padding: 1px 5px;
    border-radius: 3px;
}

/* Der DWF4-Zusatz im Edit-Banner, wenn im Edit-Modus zugleich eine Perspektive
   aktiv ist: die Zuschreibung an den Backend-Admin (nie den betrachteten Nutzer)
   dezent abgesetzt, bleibt aber Teil des roten Warnbanners. */
.ta-data-editbanner-persp
{
    display: inline;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    padding-top: 2px;
    margin-top: 2px;
}

/* Aktions-Spalte / „Bearbeiten"-Knopf je Zeile. */
.ta-data-actioncol { width: 1%; white-space: nowrap; }
.ta-data-actioncell { vertical-align: top; }

.ta-data-row-edit
{
    padding: 4px 11px;
    border: 1px solid var(--ta-danger);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-danger);
    font-family: inherit;
    font-size: var(--ta-fs-small);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ta-data-row-edit:hover:not(:disabled) { background: var(--ta-danger); color: #fff; }

.ta-data-row-edit:disabled
{
    border-color: var(--ta-border);
    color: var(--ta-text-faint);
    cursor: not-allowed;
}

/* ── Editor-Modal ────────────────────────────────────────────── */
.ta-data-modal-backdrop
{
    position: fixed;
    inset: 0;
    background: rgba(28, 33, 38, 0.55);
    z-index: 40;
}

.ta-data-modal
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 41;
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    background: var(--ta-surface);
    border: 2px solid var(--ta-danger);
    border-radius: var(--ta-radius);
    box-shadow: 0 12px 40px rgba(28, 33, 38, 0.35);
}

.ta-data-modal-head
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ta-gap);
}

.ta-data-modal-title
{
    font-size: var(--ta-fs-body);
    font-weight: 700;
    color: var(--ta-danger);
}

.ta-data-modal-close
{
    flex: none;
    width: 28px;
    height: 28px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ta-data-modal-close:hover { background: var(--ta-surface-2); }

.ta-data-modal-ident
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}

.ta-data-modal-ident code
{
    font-family: var(--ta-mono);
    color: var(--ta-text);
    background: var(--ta-surface-2);
    padding: 1px 6px;
    border-radius: 3px;
    word-break: break-all;
}

.ta-data-modal-hint
{
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
    line-height: 1.5;
    margin: 0;
}

.ta-data-modal-hint code
{
    font-family: var(--ta-mono);
    color: var(--ta-text);
}

.ta-data-modal-textarea
{
    width: 100%;
    min-height: 240px;
    flex: 1 1 auto;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text);
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    line-height: 1.5;
    white-space: pre;
    overflow: auto;
}

.ta-data-modal-textarea:focus
{
    outline: 2px solid var(--ta-danger);
    outline-offset: 1px;
    border-color: var(--ta-danger);
}

.ta-data-modal-textarea:disabled { opacity: 0.6; }

/* Fehlermeldung im Editor: die zwei Sonderfälle sind auch farblich getrennt. */
.ta-data-modal-error
{
    padding: 10px 12px;
    border-radius: var(--ta-radius-sm);
    font-size: var(--ta-fs-small);
    line-height: 1.5;
    border: 1px solid var(--ta-border);
    background: var(--ta-surface-2);
    color: var(--ta-text);
}

/* Ungültiges JSON (clientseitig) — sachliche Warnung im Bernstein-Ton. */
.ta-data-modal-error.is-invalid
{
    background: var(--ta-warn-weak);
    border-color: var(--ta-warn);
    color: var(--ta-warn-text);
}

/* Protokoll nicht schreibbar (503, fail-closed) — deutlich in Gefahr-Farbe,
   damit die beschlossene Verweigerung nicht mit einer Rechte-Absage verschwimmt. */
.ta-data-modal-error.is-blocked
{
    background: var(--ta-danger-weak);
    border-color: var(--ta-danger);
    color: var(--ta-danger);
}

/* Rechte verweigert (403) — neutral-grau abgesetzt: eine fehlende Berechtigung,
   nicht die fail-closed-Regel. */
.ta-data-modal-error.is-denied
{
    background: var(--ta-surface-2);
    border-color: var(--ta-border-strong);
    color: var(--ta-text-muted);
}

.ta-data-modal-actions
{
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ta-data-modal-cancel,
.ta-data-modal-save
{
    padding: 8px 16px;
    border-radius: var(--ta-radius-sm);
    font-family: inherit;
    font-size: var(--ta-fs-small);
    font-weight: 600;
    cursor: pointer;
}

.ta-data-modal-cancel
{
    border: 1px solid var(--ta-border-strong);
    background: var(--ta-surface);
    color: var(--ta-text);
}

.ta-data-modal-cancel:hover:not(:disabled) { background: var(--ta-surface-2); }

.ta-data-modal-save
{
    border: 1px solid var(--ta-danger);
    background: var(--ta-danger);
    color: #fff;
}

.ta-data-modal-save:hover:not(:disabled) { opacity: 0.9; }

.ta-data-modal-cancel:disabled,
.ta-data-modal-save:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 720px)
{
    .ta-data-field { flex-basis: 100%; }
    .ta-data-field-narrow { flex-basis: 100%; }
    .ta-data-field-view { flex-basis: 100%; }
}


/* === 06_openad.css === */
/*
 * tigeradmin — OpenAD overview (read-only shadow copy), stage A.
 * Structure only; every colour/typo value comes from the tokens in 01_theme.css.
 * Class prefix .ta-ad-* — self-contained, no dependency on 05_data.css.
 */

.ta-openad { display: block; }

/* ── Head: title + datasource field + reload ─────────────────── */
.ta-ad-head
{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ta-gap);
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.ta-ad-head-left { min-width: 0; }
.ta-ad-head-title
{
    margin: 0 0 4px;
    font-size: var(--ta-fs-title);
    font-weight: 600;
    color: var(--ta-text);
}
.ta-ad-head-sub
{
    display: block;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}
.ta-ad-head-sub code { font-family: var(--ta-mono); }
.ta-ad-head-actions
{
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.ta-ad-field
{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ta-ad-field-label
{
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}
.ta-ad-input
{
    font: inherit;
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    padding: 6px 8px;
    width: 140px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text);
}
.ta-ad-input:focus-visible
{
    outline: 2px solid var(--ta-accent);
    outline-offset: 1px;
}
.ta-ad-reload
{
    font: inherit;
    font-size: var(--ta-fs-body);
    padding: 7px 14px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text);
    cursor: pointer;
}
.ta-ad-reload:hover:not(:disabled) { background: var(--ta-surface-2); }
.ta-ad-reload:focus-visible { outline: 2px solid var(--ta-accent); outline-offset: 1px; }
.ta-ad-reload:disabled { cursor: default; color: var(--ta-text-faint); }

/* ── Permanent notice: shadow copy, no LDAP, no write ────────── */
.ta-ad-notice
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--ta-border);
    border-left: 3px solid var(--ta-accent);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
    line-height: 1.45;
}
.ta-ad-notice-icon { color: var(--ta-accent); line-height: 1.45; }
.ta-ad-notice-text strong { color: var(--ta-text); }
.ta-ad-notice-text code { font-family: var(--ta-mono); }

/* ── Stack status line ───────────────────────────────────────── */
.ta-ad-status
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px 0 14px;
    border-bottom: 1px solid var(--ta-border);
    margin-bottom: 18px;
}
.ta-ad-status-label
{
    font-size: var(--ta-fs-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ta-text-muted);
}
.ta-ad-status-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ta-ad-status-hint
{
    flex-basis: 100%;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-faint);
}

/* ── Chips (state / kind / notes) ────────────────────────────── */
.ta-ad-chip
{
    display: inline-block;
    padding: 2px 8px;
    margin: 1px 4px 1px 0;
    border-radius: 999px;
    border: 1px solid var(--ta-border);
    background: var(--ta-surface-2);
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
    white-space: nowrap;
}
.ta-ad-chip.is-ok   { background: var(--ta-ok-weak);   color: var(--ta-ok);        border-color: transparent; }
.ta-ad-chip.is-warn { background: var(--ta-warn-weak); color: var(--ta-warn-text); border-color: transparent; }
.ta-ad-chip.is-plain { background: transparent; }
.ta-ad-chip.is-kind-mandant      { background: var(--ta-accent-weak); color: var(--ta-accent);    border-color: transparent; }
.ta-ad-chip.is-kind-rechtegruppe { background: var(--ta-view-weak);   color: var(--ta-view-text); border-color: transparent; }
.ta-ad-chip.is-kind-app          { background: var(--ta-ok-weak);     color: var(--ta-ok);        border-color: transparent; }

/* ── Sections + tables ───────────────────────────────────────── */
.ta-ad-section { margin-bottom: 28px; }
.ta-ad-section-title
{
    margin: 0 0 10px;
    font-size: var(--ta-fs-body);
    font-weight: 600;
    color: var(--ta-text);
}
.ta-ad-count
{
    margin-left: 6px;
    font-weight: 400;
    color: var(--ta-text-faint);
}
.ta-ad-table-wrap
{
    overflow-x: auto;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius);
    background: var(--ta-surface);
}
.ta-ad-table
{
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ta-fs-small);
}
.ta-ad-table thead th
{
    text-align: left;
    padding: 9px 12px;
    font-weight: 600;
    color: var(--ta-text-muted);
    background: var(--ta-surface-2);
    border-bottom: 1px solid var(--ta-border);
    white-space: nowrap;
}
.ta-ad-table tbody td
{
    padding: 8px 12px;
    vertical-align: top;
    border-bottom: 1px solid var(--ta-border);
    color: var(--ta-text);
}
.ta-ad-table tbody tr:last-child td { border-bottom: 0; }
.ta-ad-row.is-inactive td { color: var(--ta-text-muted); }
.ta-ad-cell { min-width: 110px; }
.ta-ad-cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.ta-ad-cell-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ta-ad-ident
{
    display: block;
    font-weight: 600;
}
.ta-ad-dn
{
    display: block;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--ta-text-faint);
}
.ta-ad-other { display: block; margin-top: 3px; }
.ta-ad-absent { color: var(--ta-text-faint); }
.ta-ad-empty,
.ta-ad-footnote
{
    margin: 8px 0 0;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
    line-height: 1.45;
}
.ta-ad-footnote code { font-family: var(--ta-mono); }

/* ── Error box (read failure) ────────────────────────────────── */
.ta-ad-error
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--ta-danger);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-danger-weak);
    color: var(--ta-danger);
    font-size: var(--ta-fs-body);
}
.ta-ad-error-detail { font-size: var(--ta-fs-small); font-family: var(--ta-mono); }

@media (max-width: 720px)
{
    .ta-ad-head { align-items: stretch; }
    .ta-ad-dn { max-width: 200px; }
}

/* ── Stage B slice 1: live column, actions, member panel ─────── */
/* Structure only — colours come from the 01_theme.css tokens. */
.ta-ad-cell-actions { white-space: nowrap; text-align: right; }
.ta-ad-row.is-open td { border-bottom: 0; }
.ta-ad-row-detail > td
{
    padding: 0 12px 14px;
    background: var(--ta-surface-2);
    border-bottom: 1px solid var(--ta-border);
}

.ta-ad-btn
{
    font: inherit;
    font-size: var(--ta-fs-small);
    padding: 5px 10px;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    color: var(--ta-text);
    cursor: pointer;
    white-space: nowrap;
}
.ta-ad-btn:hover:not(:disabled) { background: var(--ta-surface-2); }
.ta-ad-btn:focus-visible { outline: 2px solid var(--ta-accent); outline-offset: 1px; }
.ta-ad-btn:disabled { cursor: default; color: var(--ta-text-faint); }
.ta-ad-btn.is-active { border-color: var(--ta-accent); color: var(--ta-accent); }
.ta-ad-btn.is-primary
{
    background: var(--ta-accent);
    border-color: var(--ta-accent);
    color: var(--ta-surface);
}
.ta-ad-btn.is-primary:hover:not(:disabled) { background: var(--ta-warn); border-color: var(--ta-warn); }
.ta-ad-btn.is-primary:disabled { background: var(--ta-accent-weak); border-color: var(--ta-accent-weak); color: var(--ta-text-faint); }
.ta-ad-btn.is-danger
{
    background: var(--ta-danger);
    border-color: var(--ta-danger);
    color: var(--ta-surface);
}
.ta-ad-btn.is-danger:hover:not(:disabled) { background: var(--ta-warn-text); border-color: var(--ta-warn-text); }
.ta-ad-btn.is-danger:disabled { background: var(--ta-danger-weak); border-color: var(--ta-danger-weak); color: var(--ta-text-faint); }
.ta-ad-btn.is-quiet
{
    background: transparent;
    border-color: transparent;
    color: var(--ta-text-muted);
}
.ta-ad-btn.is-quiet:hover:not(:disabled) { background: var(--ta-surface); color: var(--ta-danger); }

/* Panel (expanded row) */
.ta-ad-panel
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    margin-top: 4px;
    border: 1px solid var(--ta-border);
    border-left: 3px solid var(--ta-accent);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
}
.ta-ad-panel-head
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 16px;
}
.ta-ad-panel-title
{
    font-size: var(--ta-fs-body);
    font-weight: 600;
    color: var(--ta-text);
}
.ta-ad-panel-title code { font-family: var(--ta-mono); color: var(--ta-accent); }
.ta-ad-panel-source
{
    font-size: var(--ta-fs-small);
    color: var(--ta-text-faint);
}

/* Member list */
.ta-ad-members
{
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-sm);
}
.ta-ad-member
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--ta-border);
}
.ta-ad-member:last-child { border-bottom: 0; }
.ta-ad-member.is-confirming { background: var(--ta-danger-weak); }
.ta-ad-member.is-empty { color: var(--ta-text-faint); }
.ta-ad-member-id { min-width: 0; }
.ta-ad-member-id .ta-ad-ident { display: inline; }
.ta-ad-member-id .ta-ad-dn { max-width: 420px; }

/* Confirm step (inline, both directions) */
.ta-ad-confirm
{
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.ta-ad-confirm-text
{
    font-size: var(--ta-fs-small);
    color: var(--ta-text);
}
.ta-ad-confirm-text code { font-family: var(--ta-mono); }

/* Add form */
.ta-ad-add
{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
.ta-ad-input-uid { width: 220px; }
.ta-ad-add-hint
{
    flex-basis: 100%;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-faint);
}

/* Notices: neutral (write disabled), warn (read failed), ok / error (write result) */
.ta-ad-live-notice
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    margin: 0 0 10px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    font-size: var(--ta-fs-small);
    line-height: 1.45;
    color: var(--ta-text-muted);
}
.ta-ad-live-notice strong { color: var(--ta-text); margin-right: 4px; }
.ta-ad-live-notice.is-neutral { border-left: 3px solid var(--ta-border-strong); }
.ta-ad-live-notice.is-warn { background: var(--ta-warn-weak); color: var(--ta-warn-text); border-color: transparent; }
.ta-ad-live-notice.is-ok { background: var(--ta-ok-weak); color: var(--ta-ok); border-color: transparent; }
.ta-ad-live-notice.is-error { background: var(--ta-danger-weak); color: var(--ta-danger); border-color: transparent; }
.ta-ad-dismiss { margin-left: auto; padding: 0 6px; line-height: 1; }

/* Write-status banner at the top of the section (GET …/ad/groups writeBindSource). */
.ta-ad-write-status { margin: 0 0 14px; }
.ta-ad-write-status.is-compact { padding: 4px 10px; font-size: var(--ta-fs-small); }
.ta-ad-write-status.is-compact strong { color: inherit; }

/* Last-Mandant warning inside the remove confirm. */
.ta-ad-confirm-warn
{
    display: block;
    margin-top: 4px;
    font-weight: 600;
    color: var(--ta-danger);
}

@media (max-width: 720px)
{
    .ta-ad-member { flex-direction: column; align-items: flex-start; }
    .ta-ad-member-id .ta-ad-dn { max-width: 240px; }
    .ta-ad-input-uid { width: 100%; }
}


/* === 07_users.css === */
/*
 * tigeradmin — "Nutzer" section (read-only tree Mandant → Nutzer).
 * Tree nodes reuse 03_systemtree.css; head/reload/error reuse 06_openad.css.
 * This file only adds the user leaf body and the Produkte/Rechtegruppen chips.
 * Structure only; every colour value comes from the tokens in 01_theme.css.
 */

.ta-users { display: block; }

.ta-user-hint
{
    margin: 0 0 12px;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}

.ta-user-totals
{
    margin: 0 0 10px;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}

/* ── User leaf: chip rows under the tree row ─────────────────── */
.ta-node-user .ta-tree-label { font-weight: 500; }
.ta-node-user.is-inactive .ta-tree-label { color: var(--ta-text-muted); }

.ta-user-body
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px 10px 36px;   /* aligned under the label, past the icon column */
}

.ta-user-chips
{
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.ta-user-chips-title
{
    flex: none;
    width: 96px;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-faint);
}

.ta-user-chips-list
{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.ta-user-chip
{
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: var(--ta-fs-small);
    white-space: nowrap;
}
.ta-user-chip.is-kind-app          { background: var(--ta-ok-weak);   color: var(--ta-ok); }
.ta-user-chip.is-kind-rechtegruppe { background: var(--ta-view-weak); color: var(--ta-view-text); }

.ta-user-chip-none
{
    font-size: var(--ta-fs-small);
    color: var(--ta-text-faint);
}

/* Orphan branch ("Ohne Mandant") is a diagnostic — dashed frame sets it apart. */
.ta-node-mandant-orphan { border-style: dashed; }


/* === 08_rechtegruppen.css === */
/*
 * tigeradmin — "Rechtegruppen" section (tree Global/Mandant → Produkt →
 * Rechtegruppe + inline editor).
 * Tree nodes reuse 03_systemtree.css; head/reload/error/buttons reuse
 * 06_openad.css; form base classes (ta-form-*) reuse 03_systemtree.css.
 * This file only adds the leaf body, the scope accents and the editor grid.
 * Structure only; every colour value comes from the tokens in 01_theme.css.
 */

.ta-rechte { display: block; }

.ta-rg-hint
{
    margin: 0 0 12px;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}
.ta-rg-hint code { font-family: var(--ta-mono); }

/* ── Scope accents on level 1 ────────────────────────────────── */
.ta-node-scope-global > summary .ta-tree-label { color: var(--ta-view-text); }
.ta-node-scope-unknown > summary .ta-tree-label { color: var(--ta-warn-text); }
.ta-node-produkt-orphan > summary .ta-tree-label { color: var(--ta-warn-text); }

/* ── Rechtegruppe leaf ───────────────────────────────────────── */
.ta-node-rechtegruppe .ta-tree-label { font-weight: 500; }
/* Whole head row toggles the inline editor (delegated via data-trg-action). */
.ta-node-rechtegruppe .ta-rg-row-toggle { cursor: pointer; }
.ta-node-rechtegruppe .ta-rg-row-toggle:hover { background: var(--ta-surface-2); }
/* Open state: one clear marker (accent bar + tinted surface) instead of the former outline. */
.ta-node-rechtegruppe.is-editing
{
    border-left: 4px solid var(--ta-accent);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-accent-weak);
}
.ta-node-rechtegruppe .ta-rg-edit { margin-left: auto; }
.ta-node-rechtegruppe .ta-rg-edit + .ta-tree-uuid { margin-left: 8px; }
/* Accent toggle button with caret (▾ closed / ▴ open). */
.ta-rg-toggle
{
    border-color: var(--ta-accent);
    color: var(--ta-accent);
    font-weight: 600;
}
.ta-rg-toggle:hover { background: var(--ta-accent-weak); }
.ta-rg-caret { margin-left: 4px; }

.ta-rg-body
{
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 12px 10px 36px;   /* aligned under the label, past the icon column */
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}
.ta-rg-ad code { font-family: var(--ta-mono); color: var(--ta-text); }
.ta-rg-ad.is-anonym { color: var(--ta-text-faint); }
.ta-rg-ad-label { color: var(--ta-text-faint); }
.ta-rg-summary { font-family: var(--ta-mono); color: var(--ta-text); }
.ta-rg-summary.is-nothing { font-family: var(--ta-font); color: var(--ta-warn-text); }
.ta-rg-desc { color: var(--ta-text-muted); }

/* ── Success line after a write ──────────────────────────────── */
.ta-rg-success
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid var(--ta-ok);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-ok-weak);
    font-size: var(--ta-fs-small);
    color: var(--ta-text);
}
.ta-rg-success .ta-ad-dismiss { margin-left: auto; }

/* ── Editor (inline accordion: inside the edited leaf or below the head) ── */
.ta-rg-inline-editor
{
    margin: 8px 12px 12px 36px;   /* aligned with .ta-rg-body, past the icon column */
    padding-top: 12px;
    border-top: 1px solid var(--ta-border);
}
.ta-rg-inline-editor.is-create { margin: 12px 0 0; }
.ta-rg-inline-editor .ta-rg-form { width: 100%; box-sizing: border-box; margin-top: 0; }
.ta-rg-form
{
    margin-top: 16px;
    border-left: 3px solid var(--ta-accent);
}
.ta-rg-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 16px;
}
.ta-rg-field-wide { grid-column: 1 / -1; }
.ta-rg-select { font: inherit; }
.ta-rg-textarea
{
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    resize: vertical;
    min-height: 72px;
}
.ta-rg-error-code { font-family: var(--ta-mono); font-size: var(--ta-fs-small); margin-left: 6px; }

.ta-rg-section
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0;
    padding: 10px 12px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
}
.ta-rg-section-head
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ta-rg-section-title { font-weight: 600; font-size: var(--ta-fs-body); }

.ta-rg-model-rows { display: flex; flex-direction: column; gap: 6px; }
.ta-rg-model-row
{
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    align-items: center;
    gap: 8px 12px;
}
.ta-rg-model-input { font-family: var(--ta-mono); }
.ta-rg-checks
{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: var(--ta-fs-small);
}
.ta-rg-check
{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--ta-mono);
    cursor: pointer;
}
.ta-rg-row-remove { padding: 3px 7px; }

.ta-rg-failclosed
{
    margin: 4px 0 0;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}
.ta-rg-failclosed.is-warn
{
    padding: 6px 10px;
    border: 1px solid var(--ta-warn);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-warn-weak);
    color: var(--ta-warn-text);
    font-weight: 500;
}
.ta-rg-server-warn
{
    margin: 0 0 8px;
    font-size: var(--ta-fs-small);
    color: var(--ta-warn-text);
}

@media (max-width: 720px)
{
    .ta-rg-model-row { grid-template-columns: 1fr auto; }
    .ta-rg-checks { grid-column: 1 / -1; }
}


/* === 09_registry.css === */
/*
 * tigeradmin — "Produkte" section (registry: catalog vs. installation vs. apps/).
 * Head/reload/error reuse 06_openad.css, findings reuse 03_systemtree.css.
 * This file adds the fact list of the registry card, the comparison table and
 * the status badges. Structure only; every colour comes from 01_theme.css.
 */

.ta-registry { display: block; }

.ta-reg-hint
{
    margin: 0 0 12px;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}

/* ── Registry card: title row with the refresh button, then facts ── */
.ta-reg-card-head
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ta-gap);
    flex-wrap: wrap;
}
.ta-reg-card-head h2 { margin: 0; }

.ta-reg-facts
{
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 18px;
    row-gap: 6px;
    margin: 12px 0 0;
    font-size: var(--ta-fs-body);
}
.ta-reg-facts dt { margin: 0; color: var(--ta-text-muted); }
.ta-reg-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ta-reg-facts code { font-family: var(--ta-mono); font-size: var(--ta-fs-small); }

.ta-reg-faint
{
    margin-left: 6px;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-faint);
}

/* ── Badges (probe, git, status) — same shape as .ta-ad-chip ──── */
.ta-reg-badge
{
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--ta-border);
    background: var(--ta-surface-2);
    color: var(--ta-text-muted);
    font-size: var(--ta-fs-small);
    font-weight: 600;
    white-space: nowrap;
}
.ta-reg-badge.is-ok      { background: var(--ta-ok-weak);     color: var(--ta-ok);        border-color: transparent; }
.ta-reg-badge.is-warn    { background: var(--ta-warn-weak);   color: var(--ta-warn-text); border-color: transparent; }
.ta-reg-badge.is-danger  { background: var(--ta-danger-weak); color: var(--ta-danger);    border-color: transparent; }
.ta-reg-badge.is-neutral { font-weight: 500; }

/* ── Empty states ─────────────────────────────────────────────── */
.ta-reg-snippet
{
    margin: 8px 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface-2);
    font-family: var(--ta-mono);
    font-size: var(--ta-fs-small);
    line-height: 1.5;
    overflow-x: auto;
}

.ta-reg-notice
{
    margin: var(--ta-gap) 0 0;
    padding: 10px 14px;
    border: 1px solid var(--ta-warn);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-warn-weak);
    color: var(--ta-warn-text);
    font-size: var(--ta-fs-small);
    line-height: 1.5;
}
.ta-reg-notice code { font-family: var(--ta-mono); }

/* ── Comparison table ─────────────────────────────────────────── */
/* Wider cap than the other wide views (1180px) so "unter apps/" gets the
   remainder on large screens; the table itself must fit a 1200px viewport:
   1200 − 240 sidebar − 1 border − 40 content padding − 40 card padding − 2 card
   border = 877px inside the card (≈ 862px with a classic 15px scrollbar). */
#taRegistry.ta-view-wide { max-width: 1440px; }

.ta-reg-table-card,
.ta-reg-findings-card { margin-top: var(--ta-gap); }

/* The table never leaves the card: fixed layout + 100% width; only below its
   min-width of 850px (viewport < ~1175px, i.e. narrower than the 1200px target)
   THIS wrapper scrolls horizontally inside the card as a last resort, so the
   tinted rows and the action button stay within the card edge. */
.ta-reg-table-scroll { overflow-x: auto; padding-bottom: 2px; }

.ta-reg-table
{
    width: 100%;
    min-width: 850px; /* = fixed columns 590px (see below) + 260px for "unter apps/" */
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--ta-fs-body);
}
.ta-reg-table th,
.ta-reg-table td
{
    padding: 8px;
    border-bottom: 1px solid var(--ta-border);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}
.ta-reg-table th
{
    font-size: var(--ta-fs-small);
    font-weight: 600;
    color: var(--ta-text-muted);
}
.ta-reg-table tbody tr:last-child td { border-bottom: 0; }
.ta-reg-table code { font-family: var(--ta-mono); font-size: var(--ta-fs-small); }

/* Column widths (fixed layout reads them from the header cells; +16px padding
   each). Rendered widths: key 104 + source 82 + lock 146 + status 122 +
   action 136 = 590px; "Typ" (56px) only appears from 1400px viewport on and
   is not part of the minimum. "unter apps/" has no width and takes the
   remainder (≥ 260px at min-width, ≈ 530px at 1440px viewport). */
th.ta-reg-col-key    { width: 88px; }
th.ta-reg-col-type   { width: 40px; }
th.ta-reg-col-source { width: 66px; }
th.ta-reg-col-lock   { width: 130px; }
th.ta-reg-col-status { width: 106px; }
th.ta-reg-col-action { width: 120px; }

.ta-reg-col-key code { overflow-wrap: anywhere; }
.ta-reg-col-type  { color: var(--ta-text-muted); white-space: nowrap; }
.ta-reg-col-apps  { min-width: 0; }
.ta-reg-col-status .ta-reg-badge { white-space: normal; }

/* "Quelle": catalog + manifest as two small check lines, pin ref underneath. */
.ta-reg-source { display: flex; flex-direction: column; gap: 2px; font-size: var(--ta-fs-small); }
.ta-reg-source-line { color: var(--ta-text-muted); }
.ta-reg-source-pin { overflow-wrap: anywhere; }

/* "unter apps/": check + names + toggle wrap as one inline flow. */
.ta-reg-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ta-reg-apps-toggle
{
    font: inherit;
    font-size: var(--ta-fs-small);
    font-weight: 600;
    padding: 1px 8px;
    border: 1px solid var(--ta-accent);
    border-radius: 999px;
    background: transparent;
    color: var(--ta-accent);
    cursor: pointer;
    white-space: nowrap;
}
.ta-reg-apps-toggle:hover { background: var(--ta-accent-weak); }
.ta-reg-apps-toggle:focus-visible { outline: 2px solid var(--ta-accent); outline-offset: 1px; }

.ta-reg-check
{
    display: inline-block;
    min-width: 14px;
    text-align: center;
    font-weight: 700;
}
.ta-reg-check.is-yes { color: var(--ta-ok); }
.ta-reg-check.is-no  { color: var(--ta-text-faint); }

/* A row whose status is a finding is tinted faintly, so it stands out in a long list. */
.ta-reg-row.is-status-danger td { background: var(--ta-danger-weak); }

/* ── "Aufgelöst" cell (lock entry, two or three lines) + action cell ── */
.ta-reg-col-lock { min-width: 0; }

.ta-reg-lock { display: flex; flex-direction: column; gap: 3px; }
/* Line 1: `ref @ short` + verdict badge inline (wraps only if the badge is long). */
.ta-reg-lock-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ta-reg-lock-main code { white-space: nowrap; }
.ta-reg-lock-main .ta-reg-faint { margin-left: 0; }
/* Optional line between: "Release: <short>" — only while the checkout under
   releases/ holds another stand than the one that runs (after a rollback).
   Size and colour come from .ta-reg-faint, only its inline margin is dropped. */
.ta-reg-lock-release { margin-left: 0; }
/* Line 3: fetchedAt + release count, muted and small. */
.ta-reg-lock-meta
{
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}

/* One primary button (120px column) with the muted "what follows" line under
   it; the busy label may wrap instead of leaving the cell. */
.ta-reg-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ta-reg-resolve-btn { white-space: normal; text-align: left; }
.ta-reg-resolve-btn.is-busy { cursor: progress; }
.ta-reg-actions-next
{
    font-size: var(--ta-fs-small);
    line-height: 1.3;
    color: var(--ta-text-faint);
}

/* ── Refresh note (outcome of POST …/refresh) ─────────────────── */
.ta-reg-refresh-note
{
    margin: 10px 0 0;
    padding: 6px 10px;
    border-radius: var(--ta-radius-sm);
    border: 1px solid var(--ta-border);
    background: var(--ta-surface-2);
    font-size: var(--ta-fs-small);
    color: var(--ta-text-muted);
}
.ta-reg-refresh-note.is-ok     { background: var(--ta-ok-weak);     color: var(--ta-ok);     border-color: transparent; }
.ta-reg-refresh-note.is-danger { background: var(--ta-danger-weak); color: var(--ta-danger); border-color: transparent; }

/* ── Inline panel under a product row (confirmation / running / result / error) ── */
.ta-reg-panel-row > td { padding: 0 0 12px; background: var(--ta-surface); }

.ta-reg-panel
{
    margin: 4px 10px 0;
    padding: 12px 14px;
    border: 1px solid var(--ta-border);
    border-left: 3px solid var(--ta-accent);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface-2);
    font-size: var(--ta-fs-body);
    line-height: 1.5;
}
.ta-reg-panel h3 { margin: 0 0 8px; font-size: var(--ta-fs-body); font-weight: 600; }
.ta-reg-panel h4 { margin: 12px 0 6px; font-size: var(--ta-fs-small); font-weight: 600; color: var(--ta-text-muted); }
.ta-reg-panel p  { margin: 0 0 8px; }
.ta-reg-panel code { font-family: var(--ta-mono); font-size: var(--ta-fs-small); }

.ta-reg-confirm-list { margin: 0 0 8px; padding-left: 20px; }
.ta-reg-confirm-list li { margin: 2px 0; }
.ta-reg-confirm-not
{
    padding: 8px 10px;
    border-radius: var(--ta-radius-sm);
    background: var(--ta-ok-weak);
    color: var(--ta-ok);
}
.ta-reg-confirm-warn
{
    padding: 8px 10px;
    border-radius: var(--ta-radius-sm);
    background: var(--ta-warn-weak);
    color: var(--ta-warn-text);
}
.ta-reg-confirm-actions,
.ta-reg-result-actions { display: flex; gap: 8px; margin-top: 10px; }

.ta-reg-result.is-ok     { border-left-color: var(--ta-ok); }
.ta-reg-result.is-warn   { border-left-color: var(--ta-warn); }
.ta-reg-result.is-danger { border-left-color: var(--ta-danger); }

.ta-reg-result-head { display: flex; align-items: flex-start; gap: 8px; }
.ta-reg-result-head h3 { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ta-reg-result-head .ta-ad-error { flex: 1; margin: 0; }
.ta-reg-result-facts { margin-top: 4px; }
.ta-reg-hash { overflow-wrap: anywhere; }
.ta-reg-no-findings { margin: 0; }
.ta-reg-error-code { font-family: var(--ta-mono); font-size: var(--ta-fs-small); margin-left: 6px; }

/* Findings with a severity: the base .ta-finding (03_) is the warn tone. */
.ta-reg-result-findings { margin-top: 0; }
.ta-reg-sev
{
    display: inline-block;
    min-width: 52px;
    margin-right: 4px;
    font-size: var(--ta-fs-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.ta-reg-finding-code { margin-right: 6px; }
.ta-finding.is-high { color: var(--ta-danger); }
.ta-finding.is-high .ta-finding-icon { background: var(--ta-danger); }
.ta-finding.is-low  { color: var(--ta-text); }
.ta-finding.is-low  .ta-finding-icon { background: var(--ta-border-strong); }
.ta-finding.is-info { color: var(--ta-text-muted); }
.ta-finding.is-info .ta-finding-icon { background: var(--ta-text-faint); }

/* Spinner: a rotating ring, transform-only; stands still for reduced motion. */
.ta-reg-spinner
{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ta-reg-spin 0.8s linear infinite;
}
@keyframes ta-reg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce)
{
    .ta-reg-spinner { animation: none; border-right-color: currentColor; opacity: 0.6; }
}

/* "Typ" (column 2) is mostly "?" and only shown on wide screens; hiding it
   below 1400px keeps the minimum at the 590px fixed columns above. */
@media (max-width: 1399px)
{
    .ta-reg-table th:nth-child(2),
    .ta-reg-table td:nth-child(2) { display: none; }
}

@media (max-width: 720px)
{
    .ta-reg-facts { grid-template-columns: 1fr; row-gap: 2px; }
    .ta-reg-facts dt { margin-top: 6px; }
}

/* ── Swap / rollback (registry slice 3, WP5) ──────────────────────
   Buttons in the action cell, the S9 dialog (diff with ⚠ boxes, type-to-
   confirm field), and the persistent half-swap banner. Colours only via
   --ta-* tokens; the ⚠ boxes reuse the warn/danger weak surfaces. */

.ta-reg-swap-wrap { display: inline-flex; max-width: 100%; }
.ta-reg-swap-btn,
.ta-reg-rollback-btn { white-space: normal; text-align: left; }
.ta-reg-swap-btn.is-busy,
.ta-reg-rollback-btn.is-busy { cursor: progress; }
.ta-reg-swap-btn:disabled,
.ta-reg-rollback-btn:disabled { cursor: not-allowed; }

/* Dialog: a swap is the sharp end of the registry — the left edge says so. */
.ta-reg-swap-dialog { border-left-color: var(--ta-danger); }
.ta-reg-swap-dialog.is-rollback { border-left-color: var(--ta-warn); }
.ta-reg-swap-dialog h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ta-reg-swap-dialog h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ta-reg-swap-fixed { margin-top: 12px; }

/* Diff list per app */
.ta-reg-diff-app { margin-bottom: 8px; }
.ta-reg-diff-app h4 { margin-top: 8px; }
.ta-reg-diff-none { margin: 0 0 4px; }
.ta-reg-diff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ta-reg-diff-change.is-info { padding: 2px 0; }
.ta-reg-diff-key { font-weight: 600; }
.ta-reg-diff-arrow { color: var(--ta-text-muted); margin: 0 2px; }
.ta-reg-diff-warnbox
{
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--ta-warn);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-warn-weak);
    color: var(--ta-warn-text);
}
.ta-reg-diff-change.is-danger .ta-reg-diff-warnbox
{
    border-color: var(--ta-danger);
    background: var(--ta-danger-weak);
    color: var(--ta-danger);
}
.ta-reg-diff-warnicon { flex: 0 0 auto; font-size: var(--ta-fs-body); line-height: 1.5; }
.ta-reg-diff-warnbody { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ta-reg-diff-effect { font-size: var(--ta-fs-small); }

/* Type-to-confirm form (S9): field + actions, the field never wider than the key needs. */
.ta-reg-swap-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ta-reg-swap-form .ta-form-field { max-width: 360px; }
.ta-reg-typed { font-family: var(--ta-mono); }
.ta-reg-swap-form .ta-reg-confirm-actions { margin-top: 2px; }
.ta-form-submit.is-danger
{
    background: var(--ta-danger);
    border-color: var(--ta-danger);
}
.ta-form-submit.is-danger:disabled { cursor: not-allowed; }

/* Half-swap banner: persistent, top of the section, no dismiss. */
.ta-reg-halfswap
{
    margin: 0 0 var(--ta-gap);
    padding: 12px 14px;
    border: 2px solid var(--ta-danger);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-danger-weak);
    color: var(--ta-danger);
    font-size: var(--ta-fs-body);
    line-height: 1.5;
}
.ta-reg-halfswap p { margin: 6px 0 0; }
.ta-reg-halfswap code { font-family: var(--ta-mono); font-size: var(--ta-fs-small); }
.ta-reg-halfswap-entry { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ta-danger); }
.ta-reg-halfswap-entry h4 { margin: 0 0 4px; font-size: var(--ta-fs-small); font-weight: 600; }
.ta-reg-halfswap-inventory { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ta-reg-halfswap-inventory li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ta-reg-halfswap .ta-findings { margin-top: 4px; }

/* Banner headlines (fix round #4): one <strong> per wording — "Halb
   umgeschaltet …" and, per key, "Vorheriger Tausch wurde nicht
   abgeschlossen (Phase …)". Stacked, both in the banner's danger tone. */
.ta-reg-halfswap-headline { display: block; }
.ta-reg-halfswap-headline + .ta-reg-halfswap-headline { margin-top: 4px; }
.ta-reg-halfswap-entry h4 .ta-reg-badge { margin-left: 6px; vertical-align: middle; }
.ta-reg-halfswap-entry.is-unresolved { border-top-color: var(--ta-warn); }

/* Rollback dialog (fix round #2): the stand a rollback returns TO. */
.ta-reg-rollback-target { font-weight: 600; }
.ta-reg-rollback-target code { font-family: var(--ta-mono); font-size: var(--ta-fs-small); }

/* Result panel: the "a further rollback is possible" note. */
.ta-reg-result-note { margin: 8px 0 0; color: var(--ta-text-muted); font-size: var(--ta-fs-small); }
.ta-reg-result-note code { font-family: var(--ta-mono); }