/**
 * ══════════════════════════════════════════════════════════════════════════
 *  Statuspage – Markdown CSS
 *
 *  1. .markdown-body    – Ausgabe-Styling für gerenderten Markdown
 *  2. .easymde-dark      – Dark-Theme-Override für den EasyMDE-Editor
 * ══════════════════════════════════════════════════════════════════════════
 */

/* ── Markdown-Output (.markdown-body) ───────────────────────────────────
 *
 *  Ergänzt Bootstrap 5 – überschreibt KEINE globalen Heading-Styles.
 *  Headings werden relativ zum Container skaliert, nicht absolut.
 *  Alle Farben nutzen Bootstrap-/Statuspage-CSS-Variablen → theme-responsiv.
 */
.markdown-body {
    font-size: inherit;       /* erbt vom Container (z.B. .small, .card-body) */
    line-height: 1.7;
    color: var(--bs-body-color);
    word-wrap: break-word;
}

.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child  { margin-bottom: 0; }

/*  Headings: kompakte Abstände, erbt Bootstrap-Größen-Verhältnis
 *  Kein expliziter font-size → Bootstrap-Defaults bleiben erhalten.
 *  Nur margin + weight für den kompakten Card-Kontext angepasst. */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin-top: .8em;
    margin-bottom: .4em;
    line-height: 1.35;
}

.markdown-body p { margin-bottom: .6em; }

.markdown-body ul, .markdown-body ol {
    padding-left: 1.6em;
    margin-bottom: .6em;
}
.markdown-body li { margin-bottom: .15em; }

.markdown-body .fa-ul {
    --fa-li-margin: 1.75rem;
    padding-left: 0;
}

.markdown-body blockquote {
    margin: .6em 0;
    padding: .4em .8em;
    border-left: 3px solid var(--sev-accent, #7c3aed);
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

.markdown-body code {
    padding: .15em .35em;
    font-size: .82em;
    background: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius-sm);
    color: var(--sev-accent, #7c3aed);
}

.markdown-body pre {
    margin: .6em 0;
    padding: .7em .9em;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow-x: auto;
}
.markdown-body pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin: .6em 0;
    font-size: .84em;
}
.markdown-body th,
.markdown-body td {
    padding: .35em .6em;
    border: 1px solid var(--bs-border-color);
}
.markdown-body th {
    background: var(--bs-tertiary-bg);
    font-weight: 600;
}

.markdown-body hr {
    border: none;
    border-top: 1px solid var(--bs-border-color);
    margin: 1em 0;
}

.markdown-body a {
    color: var(--sev-accent, #7c3aed);
    text-decoration: underline;
}
.markdown-body a:hover { text-decoration: none; }

.markdown-body img {
    max-width: 100%;
    border-radius: var(--bs-border-radius);
}

.markdown-body del { opacity: .6; }

/* Task-Listen (Checkboxen) */
.markdown-body ul.contains-task-list {
    list-style: none;
    padding-left: .4em;
}
.markdown-body .task-list-item input[type="checkbox"] {
    margin-right: .4em;
}

/* ── EasyMDE Dark-Theme ───────────────────────────────────────────────── */
.easymde-dark .EasyMDEContainer {
    border-color: var(--bs-border-color);
}

.easymde-dark .CodeMirror {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.easymde-dark .CodeMirror-cursor {
    border-left-color: var(--bs-body-color);
}

.easymde-dark .editor-toolbar {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

.easymde-dark .editor-toolbar button {
    color: var(--bs-body-color) !important;
}
.easymde-dark .editor-toolbar button:hover,
.easymde-dark .editor-toolbar button.active {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

.easymde-dark .editor-toolbar i.separator {
    border-left-color: var(--bs-border-color);
    border-right-color: var(--bs-border-color);
}

.easymde-dark .editor-statusbar {
    color: var(--bs-secondary-color);
}

.easymde-dark .editor-preview,
.easymde-dark .editor-preview-side {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.easymde-dark .CodeMirror-selected {
    background: rgba(139, 92, 246, .25) !important;
}

.easymde-dark .CodeMirror .CodeMirror-line .cm-header {
    color: var(--bs-emphasis-color);
}
.easymde-dark .CodeMirror .CodeMirror-line .cm-link {
    color: var(--sev-accent, #a78bfa);
}
.easymde-dark .CodeMirror .CodeMirror-line .cm-url {
    color: var(--bs-secondary-color);
}
.easymde-dark .CodeMirror .CodeMirror-line .cm-comment {
    color: var(--bs-secondary-color);
}

/* ── EasyMDE Dark-Theme: Fullscreen-Hintergründe ─────────────────────── */
.easymde-dark:has(.editor-toolbar.fullscreen) {
    background: var(--bs-body-bg) !important;
}
.easymde-dark .editor-toolbar.fullscreen {
    background: var(--bs-tertiary-bg) !important; /* = gleicher Ton wie non-fullscreen */
}
.easymde-dark .CodeMirror-fullscreen {
    background: var(--bs-body-bg) !important;
}
.easymde-dark .editor-toolbar.fullscreen ~ .editor-preview-side {
    background: var(--bs-body-bg) !important;
}

/* ── EasyMDE Light-Anpassungen (default) ─────────────────────────────── */
.EasyMDEContainer .editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    padding: .35rem .5rem;
    gap: 3px;
    background: var(--bs-tertiary-bg);
}
.EasyMDEContainer .CodeMirror {
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    font-family: 'Inter', var(--bs-font-monospace);
    font-size: .88rem;
}

/* Toolbar-Buttons: Stil analog zu .header-button der Admin-Navbar */
.EasyMDEContainer .editor-toolbar button {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    font-size: .82rem;
    cursor: pointer;
    transition: all .15s;
}
.EasyMDEContainer .editor-toolbar button:hover {
    background: var(--bs-tertiary-hover-bg);
    border-color: var(--bs-secondary-border-subtle);
}
.EasyMDEContainer .editor-toolbar button.active {
    background: var(--sev-accent-bg);
    color: var(--sev-accent);
    border-color: var(--sev-accent-border);
}
/* Icon-Zentrierung: FA-Icons in Toolbar-Buttons exakt mittig */
.EasyMDEContainer .editor-toolbar button i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}
/* Separator: dezente Trennlinie */
.EasyMDEContainer .editor-toolbar i.separator {
    width: 1px;
    margin: 2px 3px;
    border-left: 1px solid var(--bs-border-color);
    border-right: none;
}

/* ── EasyMDE Fullscreen & Side-by-Side: navbar-aware Flex-Layout ─────── *
 *  Im Fullscreen wird der .EasyMDEContainer selbst zu einem position:fixed *
 *  Flex-Column-Container, der unterhalb der Navbar beginnt.               *
 *                                                                          *
 *  --sp-editor-offset wird per JS auf die Navbar-Höhe gesetzt (0 ohne).   *
 *  Toolbar: flex-shrink:0 → nimmt sich genau die Höhe die sie braucht     *
 *           (1 Zeile oder mehrzeilig bei Umbruch – egal).                  *
 *  Editor + Preview: flex:1 → füllen den verbleibenden Platz.             *
 *                                                                          *
 *  Kein calc(), kein Messen der Toolbar-Höhe, kein Gefummel.              *
 *  z-index 1030 liegt über Bootstrap sticky-top (1020).                   *
 *                                                                          *
 *  Alle Regeln sind an die .fullscreen-Klasse gebunden und entfallen      *
 *  beim Verlassen automatisch.                                             *
 * ──────────────────────────────────────────────────────────────────────── */

/* Container → fixed flex column unterhalb der Navbar */
.EasyMDEContainer:has(.editor-toolbar.fullscreen) {
    position: fixed !important;
    top: var(--sp-editor-offset, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1030 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bs-body-bg);
}

/* Toolbar: nimmt sich was sie braucht, wächst nicht */
.EasyMDEContainer .editor-toolbar.fullscreen {
    position: static !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    height: auto !important;       /* EasyMDE-Default (50px) überschreiben */
    z-index: auto !important;
}
/* EasyMDE-Gradient-Pseudo-Elemente deaktivieren (stören im Flex-Layout) */
.EasyMDEContainer .editor-toolbar.fullscreen::before,
.EasyMDEContainer .editor-toolbar.fullscreen::after {
    display: none !important;
}

/* Editor-Fläche: füllt den Rest */
.EasyMDEContainer .CodeMirror-fullscreen {
    position: static !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;      /* flex-child muss min-height:0 haben */
    height: auto !important;
    background: var(--bs-body-bg);
}

/* ── Side-by-Side: CSS Grid statt flex-wrap ──────────────────────────────
 *  flex-direction:column + flex-wrap wrapped in Spalten statt Zeilen,
 *  deshalb wechseln wir bei Side-by-Side auf ein Grid-Layout:
 *    Zeile 1  Toolbar   (auto-Höhe, volle Breite)
 *    Zeile 2  Editor | Preview  (jeweils 50 %, füllt den Rest)
 *    Zeile 3  Statusbar (auto-Höhe, volle Breite)
 * ──────────────────────────────────────────────────────────────────────── */
.EasyMDEContainer:has(.editor-preview-active-side):has(.editor-toolbar.fullscreen) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    /* flex-Reste neutralisieren */
    flex-direction: unset !important;
    flex-wrap: unset !important;
}
/* Toolbar: volle Breite (beide Spalten) */
.EasyMDEContainer:has(.editor-preview-active-side) .editor-toolbar.fullscreen {
    grid-column: 1 / -1 !important;
    flex-basis: auto !important;    /* EasyMDE-Inline flex-basis:100% neutralisieren */
}
/* Editor-Fläche (links) – width:100% überschreibt EasyMDE-Inline width:50%
 * overflow:hidden → CodeMirror scrollt intern über .CodeMirror-scroll;
 * ein äußeres overflow-y:auto erzeugt nur eine redundante Scrollbar. */
.EasyMDEContainer:has(.editor-preview-active-side) .CodeMirror-fullscreen.CodeMirror-sided {
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    background: var(--bs-body-bg);
}
/* Preview-Fläche (rechts) – width:100% überschreibt EasyMDE-Inline width:50% */
.EasyMDEContainer:has(.editor-preview-active-side) .editor-preview-side {
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto;
}
/* Statusbar: volle Breite */
.EasyMDEContainer:has(.editor-preview-active-side) .editor-statusbar {
    grid-column: 1 / -1 !important;
}

/* Statusbar (Fullscreen ohne Side-by-Side – flex-Layout) */
.EasyMDEContainer:has(.editor-toolbar.fullscreen) .editor-statusbar {
    position: static !important;
    flex-shrink: 0 !important;
    width: 100% !important;
}

/* Colorpicker-Popup über allem */
.EasyMDEContainer .sp-color-picker {
    z-index: 1050;
}



/* ══════════════════════════════════════════════════════════════════════════
 *  Color-Picker Popup (EasyMDE Toolbar-Integration)
 *
 *  Positioniert sich absolut innerhalb des .EasyMDEContainer.
 *  Enthält: Theme-Swatches, Basis-Palette, Native Color-Input + Hex-Input.
 * ══════════════════════════════════════════════════════════════════════════ */

.sp-color-picker {
    position: absolute;
    z-index: 1050;
    width: 240px;
    padding: .6rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    font-size: .78rem;
    line-height: 1.4;
}

/* ── Gruppen (Theme / Standard) ─────────────────────────────────────── */
.sp-cp-group {
    margin-bottom: .45rem;
}
.sp-cp-label {
    font-weight: 600;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    margin-bottom: .25rem;
}

/* ── Swatch-Grid ────────────────────────────────────────────────────── */
.sp-cp-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.sp-cp-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .1s, border-color .15s;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.sp-cp-swatch:hover {
    transform: scale(1.2);
    border-color: var(--sev-accent);
}
.sp-cp-swatch:focus-visible {
    outline: 2px solid var(--sev-accent);
    outline-offset: 2px;
}

/* ── Custom Color Row ───────────────────────────────────────────────── */
.sp-cp-custom {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: .5rem 0 .35rem;
    padding-top: .45rem;
    border-top: 1px solid var(--bs-border-color);
}

.sp-cp-native {
    width: 32px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}
.sp-cp-native::-webkit-color-swatch-wrapper {
    padding: 2px;
}
.sp-cp-native::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

.sp-cp-hex {
    flex: 1;
    min-width: 0;
    padding: .2rem .4rem;
    font-size: .78rem;
    font-family: var(--bs-font-monospace);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    outline: none;
}
.sp-cp-hex:focus {
    border-color: var(--sev-accent);
    box-shadow: 0 0 0 .15rem var(--sev-accent-bg);
}

.sp-cp-apply {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-tertiary-bg);
    color: var(--sev-success-text, #16a34a);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, border-color .12s;
}
.sp-cp-apply:hover {
    background: var(--sev-success-bg);
    border-color: var(--sev-success-border);
}

/* ── Farbe-Entfernen Button ─────────────────────────────────────────── */
.sp-cp-remove {
    display: block;
    width: 100%;
    padding: .3rem .5rem;
    font-size: .72rem;
    text-align: center;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.sp-cp-remove:hover {
    background: var(--sev-critical-bg);
    color: var(--sev-critical-text);
    border-color: var(--sev-critical-border);
}


/* ══════════════════════════════════════════════════════════════════════════
 *  Heading-Picker Popup (EasyMDE Toolbar-Integration)
 *
 *  Dropdown mit H1–H6 Buttons + „Überschrift entfernen".
 *  Positioniert sich absolut innerhalb des .EasyMDEContainer.
 * ══════════════════════════════════════════════════════════════════════════ */

.sp-heading-picker {
    position: absolute;
    z-index: 1050;
    width: 220px;
    padding: .45rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    font-size: .78rem;
    line-height: 1.4;
}

.sp-hp-label {
    font-weight: 600;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    margin-bottom: .3rem;
    padding: 0 .25rem;
}

.sp-hp-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-hp-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .3rem .5rem;
    border: none;
    border-radius: var(--bs-border-radius-sm);
    background: none;
    color: var(--bs-body-color);
    cursor: pointer;
    text-align: left;
    transition: background .1s, color .1s;
    white-space: nowrap;
}
.sp-hp-item:hover {
    background: var(--sev-accent-bg, rgba(124, 58, 237, .08));
    color: var(--sev-accent);
}

.sp-hp-preview {
    color: var(--bs-secondary-color);
    font-weight: 400;
    font-size: .78rem;
    margin-left: auto;
}

.sp-hp-remove {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: .72rem !important;
    font-weight: 400 !important;
    color: var(--bs-secondary-color) !important;
}
.sp-hp-remove:hover {
    background: var(--sev-critical-bg) !important;
    color: var(--sev-critical-text) !important;
}

/* Colorpicker/Heading-Popups über allem im EasyMDE-Container */
.EasyMDEContainer .sp-heading-picker {
    z-index: 1050;
}


/* ══════════════════════════════════════════════════════════════════════════
 *  Snippet-Picker Popup (EasyMDE Toolbar-Integration)
 *
 *  Breiteres Popup mit Suchfeld und scrollbarer Ergebnisliste.
 *  Positioniert sich absolut innerhalb des .EasyMDEContainer.
 * ══════════════════════════════════════════════════════════════════════════ */

.sp-snippet-picker {
    position: absolute;
    z-index: 1050;
    width: 360px;
    max-width: calc(100% - 16px);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
    font-size: .82rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.sp-snp-header {
    padding: .5rem .7rem;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
}

/* ── Suchfeld ──────────────────────────────────────────────────────────── */
.sp-snp-search {
    padding: .45rem .55rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.sp-snp-input {
    width: 100%;
    padding: .35rem .55rem;
    font-size: .82rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    outline: none;
}
.sp-snp-input:focus {
    border-color: var(--sev-accent);
    box-shadow: 0 0 0 .15rem var(--sev-accent-bg);
}
.sp-snp-input::placeholder {
    color: var(--bs-secondary-color);
}

/* ── Ergebnisliste ─────────────────────────────────────────────────────── */
.sp-snp-results {
    max-height: 320px;
    overflow-y: auto;
    padding: .3rem;
}

.sp-snp-item {
    padding: .45rem .55rem;
    border-radius: var(--bs-border-radius-sm);
    cursor: pointer;
    transition: background .1s;
}
.sp-snp-item:hover {
    background: var(--sev-accent-bg, rgba(124, 58, 237, .08));
}
.sp-snp-item + .sp-snp-item {
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.06));
}

.sp-snp-title {
    font-weight: 600;
    font-size: .82rem;
    color: var(--bs-body-color);
    margin-bottom: .15rem;
}

.sp-snp-cat {
    font-weight: 400;
    font-size: .68rem;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    padding: .1em .4em;
    border-radius: var(--bs-border-radius-sm);
    margin-left: .4em;
    vertical-align: middle;
}

.sp-snp-content {
    font-size: .74rem;
    color: var(--bs-secondary-color);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* ── Sonderzustände ────────────────────────────────────────────────────── */
.sp-snp-empty,
.sp-snp-loading,
.sp-snp-error {
    padding: .7rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: .78rem;
}
.sp-snp-error {
    color: var(--sev-critical-text, #dc3545);
}

/* ── Hinweis-Footer ────────────────────────────────────────────────────── */
.sp-snp-hint {
    padding: .35rem .7rem;
    font-size: .66rem;
    color: var(--bs-tertiary-color, var(--bs-secondary-color));
    border-top: 1px solid var(--bs-border-color);
    text-align: center;
}

/* Snippet-Popup über allem */
.EasyMDEContainer .sp-snippet-picker {
    z-index: 1050;
}