/**
 * ══════════════════════════════════════════════════════════════════════════
 *  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 Light-Anpassungen (default) ─────────────────────────────── */
.EasyMDEContainer .editor-toolbar {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
}
.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;
}
.EasyMDEContainer .editor-toolbar button {
    width: 30px;
    height: 30px;
}

/* ══════════════════════════════════════════════════════════════════════════
 *  TinyMDE – Bootstrap-Integration + Dark-Theme
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── TinyMDE Light (Default) ─────────────────────────────────────────── */
.tinymde-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: .35rem .5rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-bottom: none;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}

.tinymde-toolbar button {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-sm);
    color: var(--bs-body-color);
    width: 30px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .78rem;
    transition: all .12s;
}
.tinymde-toolbar button:hover {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}
.tinymde-toolbar button.active {
    background: var(--sev-accent-bg);
    color: var(--sev-accent);
    border-color: var(--sev-accent-border);
}

.tinymde-toolbar .TinyMDE_CommandBar_separator {
    width: 1px;
    margin: 2px 4px;
    background: var(--bs-border-color);
    align-self: stretch;
}

/* TinyMDE Editor-Feld */
.TinyMDE {
    font-family: 'Inter', var(--bs-font-monospace) !important;
    font-size: .88rem !important;
    line-height: 1.65 !important;
    padding: .6rem .75rem !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius) !important;
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    min-height: 180px;
    outline: none !important;
}
.TinyMDE:focus-within {
    border-color: var(--sev-accent) !important;
    box-shadow: 0 0 0 .2rem var(--sev-accent-bg) !important;
}

/* TinyMDE Syntax-Highlighting */
.TinyMDE .TinyMDE_Header      { color: var(--bs-emphasis-color); font-weight: 600; }
.TinyMDE .TinyMDE_Bold        { font-weight: 700; }
.TinyMDE .TinyMDE_Italic      { font-style: italic; }
.TinyMDE .TinyMDE_Strikethrough { text-decoration: line-through; opacity: .6; }
.TinyMDE .TinyMDE_Link        { color: var(--sev-accent); }
.TinyMDE .TinyMDE_URL         { color: var(--bs-secondary-color); font-size: .85em; }
.TinyMDE .TinyMDE_Code        { background: var(--bs-tertiary-bg); border-radius: 3px; padding: .1em .3em; font-family: var(--bs-font-monospace); font-size: .85em; }
.TinyMDE .TinyMDE_CodeBlock   { background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius); padding: .3em .5em; }
.TinyMDE .TinyMDE_Blockquote  { border-left: 3px solid var(--sev-accent); padding-left: .6em; color: var(--bs-secondary-color); }
.TinyMDE .TinyMDE_ListBullet,
.TinyMDE .TinyMDE_ListNumber  { color: var(--sev-accent); font-weight: 600; }
.TinyMDE .TinyMDE_HR          { color: var(--bs-border-color); }
.TinyMDE .TinyMDE_Mark        { color: var(--bs-secondary-color); opacity: .5; }

/* ── TinyMDE Dark-Theme ──────────────────────────────────────────────── */
.tinymde-dark .tinymde-toolbar {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}
.tinymde-dark .tinymde-toolbar button {
    color: var(--bs-body-color);
}
.tinymde-dark .tinymde-toolbar button:hover {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

.tinymde-dark .TinyMDE {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}
.tinymde-dark .TinyMDE .TinyMDE_Header { color: var(--bs-emphasis-color); }
.tinymde-dark .TinyMDE .TinyMDE_Link   { color: var(--sev-accent); }
.tinymde-dark .TinyMDE .TinyMDE_Code,
.tinymde-dark .TinyMDE .TinyMDE_CodeBlock { background: rgba(255,255,255,.06); }