/*
   ============================================================
   DaXPortal — Wiki-Verwaltung CSS
   Styles für den Wiki-Admin-Bereich (Eintragseditor, Baum-Navigation,
   Status-Badges, etc.).
   Styles für die Benutzer-Leseansicht befinden sich in wiki-content.css.
   ============================================================
*/

/* ── Wiki-Baum: Navigationsstruktur (Admin) ─────────────────────── */
/*
   Der Artikelbaum auf der linken Seite der Wiki-Bereichsverwaltung.
   Zeigt Einträge hierarchisch gegliedert an und erlaubt Auswahl.
*/
.wiki-tree {
    font-size: .9rem;
}

/*
   Einzelner Knoten im Baum.
   Horizontales Flex-Layout für Icon + Titel + Status-Badge.
   overflow/text-overflow verhindert, dass lange Titel den Baum aufbrechen.
*/
.wiki-tree-node {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .5rem;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wiki-tree-node:hover {
    background: var(--dx-color-bg-secondary, #f0f0f0);
}

/*
   Ausgewählter Eintrag: hellblauer Hintergrund + fettere Schrift,
   damit sofort erkennbar ist, welcher Eintrag gerade bearbeitet wird.
*/
.wiki-tree-node.selected {
    background: var(--dx-color-primary-bg, #e3f0ff);
    font-weight: 600;
}

/*
   Container für Untereinträge mit Einrückung und gestrichelter Linie
   als visuellem Hierachie-Indikator.
*/
.wiki-tree-children {
    padding-left: 1.25rem;
    border-left: 1px dashed #ddd;
    margin-left: .6rem;
}

/* ── Wiki-Status-Badges ─────────────────────────────────────────── */
/*
   Farbige Zustandskennzeichnungen für Wiki-Einträge.
   Zeigen den Bearbeitungs- und Veröffentlichungsstatus kompakt an.
   flex-shrink:0 verhindert, dass der Badge im Flex-Layout gequetscht wird.
*/
.wiki-status-badge {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Entwurf: grau — noch nicht zur Prüfung eingereicht */
.wiki-status-entwurf         { background: #e0e0e0; color: #555; }
/* In Prüfung: gelb — wartet auf Freigabe durch Reviewer */
.wiki-status-inpruefung      { background: #fff3cd; color: #856404; }
/* Freigegeben: hellblau — intern genehmigt, aber noch nicht öffentlich */
.wiki-status-freigegeben     { background: #cfe2ff; color: #084298; }
/* Veröffentlicht: grün — öffentlich sichtbar für berechtigte Benutzer */
.wiki-status-veroeffentlicht { background: #d1e7dd; color: #0a3622; }
/* Archiviert: dunkelgrau — nicht mehr aktiv, nur historisch vorhanden */
.wiki-status-archiviert      { background: #343a40; color: #fff; }

/* ── Split-Layout (Baum + Formular) ────────────────────────────── */
/*
   Zweispaltiges Layout auf der Wiki-Bereichsdetailseite:
   Links der Navigationsbaum, rechts das Bearbeitungsformular.
*/
.wiki-split {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/*
   Linke Spalte: Artikelbaum mit fester Breite und rechtem Trennstrich.
   flex-shrink:0 verhindert, dass die Spalte kleiner als die Breite wird.
*/
.wiki-tree-panel {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid #ddd;
    padding-right: .75rem;
}

/*
   Rechte Spalte: Formular oder Detailansicht.
   flex:1 lässt diese Spalte den gesamten verbleibenden Platz einnehmen.
   min-width:0 ist notwendig, damit flex-children korrekt umbrechen.
*/
.wiki-form-panel {
    flex: 1;
    min-width: 0;
}

/* ── Leer-Zustand ───────────────────────────────────────────────── */
/*
   Wird angezeigt wenn noch kein Eintrag im Baum ausgewählt wurde.
   Zentrierter Hinweistext mit etwas Abstand.
*/
.wiki-empty-state {
    color: #999;
    text-align: center;
    padding: 3rem 1rem;
}

/* ── Toolbar: Aktionsleiste über dem Baum ───────────────────────── */
/*
   Leiste mit "Neuer Eintrag", "Bearbeiten", "Löschen" etc.
   Sitzt über dem Split-Layout.
*/
.wiki-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

/*
   Aktionsleiste unterhalb des Formularfeldes mit "Abbrechen" und "Speichern".
   Trennlinie oben macht den Formularabschluss optisch deutlich.
*/
.wiki-form-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .5rem 0;
    border-top: 1px solid #eee;
    margin-top: .75rem;
}

/* ── Abschnitt-Titel innerhalb des Formulars ────────────────────── */
/*
   Kleiner Abschnittstitel in Großbuchstaben, z.B. über "Anhänge"
   oder "Metadaten" im Bearbeitungsformular.
*/
.wiki-section-title {
    font-weight: 600;
    color: #555;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: .75rem 0 .25rem;
}

/* ── Vorlagen-Auswahl ───────────────────────────────────────────── */
/*
   Auswählbare Karten im "Vorlage auswählen"-Popup.
   Zeigen Name und Beschreibung der Vorlage.
   Hervorhebung durch Rahmenfarbe und Hintergrund bei Hover/Auswahl.
*/
.vorlage-option {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem .85rem;
    border: 1px solid var(--dx-border, #e2e5e9);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.vorlage-option:hover {
    border-color: var(--dx-red, #e3001a);
    background: var(--dx-bg, #f9fafb);
}

/* Aktuell ausgewählte Vorlage: roter Rahmen + heller Hintergrund */
.vorlage-option.aktiv {
    border-color: var(--dx-red, #e3001a);
    background: #fff5f5;
}

/* ── Wiki-Anhänge (Admin-Bearbeitungsformular) ──────────────────── */
/*
   Liste der hochgeladenen Anhänge im Bearbeitungsformular.
   Jeder Eintrag zeigt Icon, Dateiname, Größe und Löschen-Button.
*/
.wiki-anhang-admin-liste {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/*
   Einzelner Anhang-Eintrag: Icon + Name + Größe + Löschen-Button.
   background aus dem Design-Token-Hintergrund für leichte Abhebung.
*/
.wiki-anhang-admin-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem;
    border: 1px solid var(--dx-border, #e2e5e9);
    border-radius: 4px;
    font-size: .85rem;
    background: var(--dx-bg, #f9fafb);
}

/* ── Versionsliste ──────────────────────────────────────────────── */
/*
   Einzelner Versionspunkt in der Versionsliste des Versionen-Tabs.
   Zeigt Versionsnummer-Badge, Datum, Autor, Kommentar und Aktionsbutton.
*/
.wiki-version-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border: 1px solid var(--dx-border, #e2e5e9);
    border-radius: 6px;
    background: var(--dx-bg, #f9fafb);
    margin-bottom: .3rem;
}

/* ── Audit-Log ──────────────────────────────────────────────────── */
/*
   Einträge im Audit-Tab: linker farbiger Balken als Zeitstrahl-Indikator,
   darunter Aktion und Zeitstempel.
*/
.wiki-audit-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .4rem .6rem;
    border-left: 3px solid var(--dx-border, #e2e5e9);
    margin-bottom: .25rem;
    font-size: .85rem;
}

/* ── Backlinks ──────────────────────────────────────────────────── */
/*
   Andere Wiki-Artikel, die auf diesen Eintrag verlinken.
   Ähnlich wie wiki-version-item, aber ohne Hintergrundfarbe.
*/
.wiki-backlink-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .6rem;
    border: 1px solid var(--dx-border, #e2e5e9);
    border-radius: 4px;
    margin-bottom: .25rem;
    font-size: .88rem;
}

/* ── Wiki-Link-Assistent: Suchergebnisse ────────────────────────── */
/*
   Suchergebnis-Einträge im "Wiki-Link einfügen"-Dialog.
   Klick wählt das Ziel des einzufügenden Links aus.
*/
.wiki-wl-result {
    padding: .4rem .6rem;
    border: 1px solid var(--dx-border, #e2e5e9);
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: .2rem;
}

.wiki-wl-result:hover {
    background: var(--dx-color-bg-secondary, #f0f0f0);
}

/* Aktuell ausgewähltes Suchergebnis: roter Rahmen */
.wiki-wl-result.aktiv {
    border-color: var(--dx-red, #e3001a);
    background: #fff5f5;
}

/* ── Versions-Diff / Vorschau-Panel ─────────────────────────────── */
/*
   Scrollbarer Container für die Versionsvorschau.
   max-height verhindert, dass sehr lange Artikel das Popup sprengen.
*/
.wiki-diff-panel {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--dx-border, #e2e5e9);
    border-radius: 4px;
    padding: .75rem;
}

/* ── Status-Workflow-Leiste ─────────────────────────────────────── */
/*
   Horizontale Leiste mit Status-Badge + Workflow-Aktionsbuttons
   (Zur Prüfung, Freigeben, Veröffentlichen, Archivieren).
   Wird sowohl in der Detailansicht als auch im Bearbeiten-Modus gezeigt.
*/
.wiki-status-workflow-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

/* ── Formular-Aktionsleiste (Abbrechen/Speichern) ───────────────── */
/*
   Footer-Bereich des Bearbeitungsformulars.
   Trennlinie am oberen Rand signalisiert das Ende des Formularbereichs.
*/
.wiki-form-actions {
    display: flex;
    gap: .5rem;
    margin-top: 1.25rem;
    padding-top: .75rem;
    border-top: 1px solid #eee;
}

/* ── Hilfe-Funktion: Trefferliste ───────────────────────────────── */
/*
   Basisstyles für klickbare Artikel-Karten auf der Hilfe-Funktionsseite.
   Horizontales Flex-Layout für Icon, Titel und Beschreibung.
*/
.wiki-funktion-treffer {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .75rem 1rem;
    border: 1px solid var(--dx-border, #e2e5e9);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, border-color .2s;
    background: #fff;
}

/*
   Hover-Hervorhebung: Schatten und Rahmenfarbe wechseln zu Markenrot,
   damit die Karte als klickbar erkennbar ist.
*/
.wiki-funktion-treffer:hover {
    box-shadow: var(--dx-shadow-md);
    border-color: var(--dx-red) !important;
    color: inherit;
    text-decoration: none;
}