/* Titillium Web – Hausschrift der QuACX GmbH (SIL Open Font License, siehe fonts/OFL.txt) */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/TitilliumWeb-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/TitilliumWeb-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/TitilliumWeb-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/TitilliumWeb-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/TitilliumWeb-Bold.ttf') format('truetype');
}

html, body {
    font-family: 'Titillium Web', 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---------- Kopf- und Seitenleiste in dunklem Türkis ----------
   Farbwerte stammen aus der Petrol-Reihe des QuACX-Corporate-Designs:
   #1e698c (Kopfleiste), #10556f (Seitenleiste), #00afd7 (Türkis als Akzent). */

.quacx-appbar {
    /* Feine Kante, damit sich Kopf- und Seitenleiste trotz ähnlicher Farbe trennen */
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.quacx-appbar-untertitel {
    color: rgba(255, 255, 255, .65);
}

.quacx-logo {
    height: 30px;
}

/* Navigationseinträge auf dunklem Grund */
.quacx-drawer .mud-nav-link {
    color: rgba(255, 255, 255, .82);
}

.quacx-drawer .mud-nav-link .mud-icon-root {
    color: inherit;
}

.quacx-drawer .mud-nav-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, .08);
    color: #ffffff;
}

/* Aktiver Eintrag: Türkis als Akzent, links abgesetzt */
.quacx-drawer .mud-nav-link.active {
    color: #ffffff;
    background-color: rgba(0, 175, 215, .22);
    box-shadow: inset 3px 0 0 0 #00afd7;
}

.quacx-drawer .mud-nav-link.active .mud-icon-root {
    color: #00afd7;
}

.quacx-drawer .mud-divider {
    border-color: rgba(255, 255, 255, .15);
}

/* ---------- Zustand einer SOP-Version ----------
   Dieselben Farbwerte, die im ProjectTracker die Ampel tragen; hier stehen sie für den
   Zustand einer Fassung. Grün heißt: das ist die gültige. */

.zustand-punkt {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.zustand-entwurf       { background-color: transparent; box-shadow: inset 0 0 0 1px #b9c5c9; }
.zustand-pruefung      { background-color: #faa500; }
.zustand-freigegeben   { background-color: #32beb4; }
.zustand-abgeloest     { background-color: #82a0aa; }
.zustand-zurueckgezogen { background-color: #d64550; }

/* ---------- Markdown ----------
   Die Vorschau der Kapitel. Bewusst schlicht: Sie soll zeigen, was im PDF steht, und nicht
   nach etwas aussehen, was das PDF nachher nicht kann. */

.markdown-eingabe textarea {
    font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: .85rem;
    line-height: 1.5;
}

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

.markdown-vorschau p,
.markdown-vorschau ul,
.markdown-vorschau ol {
    margin: 0 0 .75rem;
    line-height: 1.6;
}

.markdown-vorschau ul, .markdown-vorschau ol { padding-left: 1.4rem; }
.markdown-vorschau li { margin-bottom: .25rem; }

.markdown-vorschau blockquote {
    margin: 0 0 .75rem;
    padding: .25rem 0 .25rem .9rem;
    border-left: 3px solid var(--mud-palette-primary);
    color: var(--mud-palette-text-secondary);
}

.markdown-vorschau table {
    border-collapse: collapse;
    margin-bottom: .75rem;
    width: 100%;
}

.markdown-vorschau th, .markdown-vorschau td {
    border: 1px solid var(--mud-palette-divider);
    padding: .35rem .6rem;
    text-align: left;
}

.markdown-vorschau th { background-color: var(--mud-palette-background-gray); }

.markdown-vorschau img { max-width: 100%; height: auto; }

/* ---------- Vergleich zweier Fassungen ----------
   Die Farbe trägt die Aussage nicht allein - wer sie nicht unterscheidet, saehe zwei gleich
   aussehende Bloecke. Das Vorzeichen in der ersten Spalte sagt dasselbe noch einmal. */

.diff {
    font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: .82rem;
    line-height: 1.55;
    overflow-x: auto;
}

.diff-zeile {
    display: flex;
    gap: .6rem;
    padding: 0 .8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.diff-zeichen {
    flex: 0 0 1ch;
    color: var(--mud-palette-text-secondary);
    user-select: none;
}

.diff-text { flex: 1 1 auto; }

.diff-plus { background-color: rgba(50, 190, 180, .16); }
.diff-plus .diff-zeichen { color: #1f8078; }

.diff-minus { background-color: rgba(214, 69, 80, .14); }
.diff-minus .diff-zeichen { color: #d64550; }

/* Einzeiler in Tabellen: langer Text wird abgeschnitten statt die Zeile zu sprengen */
.status-text {
    display: block;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Identity-Seiten (Login) nutzen Bootstrap – Grundfarben anpassen */
.btn-primary {
    background-color: #00afd7;
    border-color: #00afd7;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #1e698c;
    border-color: #1e698c;
}

a, .btn-link {
    color: #1e698c;
}

/* Die Seitenspalte unter /Account nutzt Bootstrap-Pillen. Ohne diese Zeilen stuenden sie in
   Bootstrap-Blau - neben Kopf- und Seitenleiste in Petrol ein Fremdkoerper. */
.nav-pills {
    --bs-nav-pills-link-active-bg: #00afd7;
    --bs-nav-pills-link-active-color: #fff;
}

.nav-pills .nav-link {
    color: #1e698c;
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: rgba(0, 175, 215, .12);
}

.validation-message, .text-danger {
    color: #d64550;
}