/*
 * Oberfläche von IDA.
 *
 * Grundlage ist Bootstrap 5.3 (lokal). Hier stehen nur die Ergänzungen für
 * die Marke des Kreises und für die Barrierefreiheit.
 *
 * Farben und Kontraste (WCAG 2.1 AA, geprüft gegen Weiß):
 *   #ed1c29  Markenrot          4,38:1 – nur für Flächen und große Elemente
 *   #d81b26  Markenrot dunkler  5,12:1 – Navigation und Schaltflächen mit weißer Schrift
 *   #c81622  Markenrot dunkel   5,84:1 – Links und Text auf Weiß
 */

:root {
    --ida-brand: #ed1c29;
    --ida-brand-contrast: #d81b26;
    --ida-brand-text: #c81622;
    --ida-brand-subtle: #fdeaec;
    --ida-focus: #0a58ca;
}

:root[data-bs-theme="dark"] {
    /* Auf dunklem Grund trägt das helle Markenrot genug Kontrast */
    --ida-brand-text: #ff8b92;
    --ida-brand-subtle: #3a1216;
}

/* ---------------------------------------------------------------- Grundlagen */

body {
    min-height: 100vh;
}

a {
    color: var(--ida-brand-text);
}

a:hover,
a:focus {
    color: #a01118;
}

:root[data-bs-theme="dark"] a:hover,
:root[data-bs-theme="dark"] a:focus {
    color: #ffb3b8;
}

/* Sichtbarer Fokus überall, auch wo Bootstrap ihn zurücknimmt
   (WCAG 2.1 AA, 2.4.7 Fokus sichtbar) */
:focus-visible {
    outline: 3px solid var(--ida-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* Sprunglink zum Inhalt: erst beim Tabben sichtbar (2.4.1 Blöcke umgehen) */
.ida-skip-link {
    position: absolute;
    left: -10000px;
    top: 0;
    z-index: 1100;
    padding: 0.75rem 1.25rem;
    background: #fff;
    color: var(--ida-brand-text);
    font-weight: 600;
    border: 2px solid var(--ida-brand-contrast);
    border-radius: 0 0 0.375rem 0;
}

.ida-skip-link:focus {
    left: 0;
}

/* ------------------------------------------------------------- Navigation */

/* Dieselbe Leiste wie in SUSY: Markenrot mit dunklerem Abschluss. Weiße
   Schrift erreicht darauf 4,4:1 – siehe die Anmerkung oben zu den Kontrasten. */
.ida-navbar {
    background-color: var(--ida-brand);
    border-bottom: 3px solid var(--ida-brand-text);
    --bs-navbar-color: #fff;
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.5);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.ida-navbar .nav-link {
    border-radius: 0.25rem;
    padding-inline: 0.6rem;
}

.ida-navbar .nav-link[aria-current="page"] {
    background-color: rgba(0, 0, 0, 0.22);
    font-weight: 600;
}

/* Trennstrich zwischen dem Zahnrad der Verwaltung und dem Benutzermenü */
.ida-navbar .ida-nav-divider {
    display: inline-block;
    width: 1px;
    height: 1.4rem;
    margin: 0 0.4rem;
    background-color: rgba(255, 255, 255, 0.45);
}

/* Das Benutzermenü ist ein Knopf; Bootstrap gibt ihm sonst den Linkstil */
.ida-navbar .navbar-nav .dropdown-toggle {
    color: #fff;
    text-decoration: none;
}

/* Die Abmeldung steckt in einem Formular, damit Flow den CSRF-Token prüft;
   der Knopf darin soll wie jeder andere Eintrag des Menüs aussehen */
.ida-navbar .dropdown-menu form {
    margin: 0;
}

.ida-navbar .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
}

/* ---------------------------------------------------------- Schaltflächen */

/*
 * Bootstraps graue Umrissknöpfe (Zurück, Abbrechen) sind in #6c757d gehalten.
 * Auf Weiß wirken sie blass, auf dunklem Grund erreichen sie nur rund 3,5:1 –
 * beides liest sich wie "abgeschaltet". Deshalb hier kräftiger, in beiden
 * Darstellungen über 4,5:1 (WCAG 2.1 AA, Abschnitt 13.3).
 */
.btn-outline-secondary {
    --bs-btn-color: #565e64;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-bg: #565e64;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-hover-color: #fff;
}

:root[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #dee2e6;
    --bs-btn-border-color: #adb5bd;
    --bs-btn-hover-bg: #dee2e6;
    --bs-btn-hover-border-color: #dee2e6;
    --bs-btn-hover-color: #212529;
}

/* Dasselbe für das Rot der Löschknöpfe: #dc3545 trägt auf dunklem Grund zu
   wenig Kontrast. */
:root[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #ff8b92;
    --bs-btn-border-color: #ff8b92;
    --bs-btn-hover-bg: #ff8b92;
    --bs-btn-hover-border-color: #ff8b92;
    --bs-btn-hover-color: #212529;
}


.btn-brand {
    background-color: var(--ida-brand-contrast);
    border-color: var(--ida-brand-contrast);
    color: #fff;
}

.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active {
    background-color: #a01118;
    border-color: #a01118;
    color: #fff;
}

.btn-outline-brand {
    border-color: var(--ida-brand-text);
    color: var(--ida-brand-text);
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
    background-color: var(--ida-brand-contrast);
    border-color: var(--ida-brand-contrast);
    color: #fff;
}

/* ------------------------------------------------------------ Seitenkopf */

.ida-page-header {
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

.ida-page-header h1 {
    font-size: 1.6rem;
    margin: 0;
}

/* Fläche in der Markenfarbe, große Schrift – hier ist #ed1c29 zulässig */
.ida-stat-card {
    border-left: 5px solid var(--ida-brand);
}

.ida-stat-card .ida-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

/* ------------------------------------------------------------- Tabellen */

.ida-table th {
    white-space: nowrap;
}

.ida-table td.ida-cell-wrap {
    word-break: break-word;
}

/* -------------------------------------------------------------- Formulare */

.ida-form-section {
    margin-bottom: 2rem;
}

.ida-form-section > legend {
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.35rem;
    margin-bottom: 1rem;
}

.ida-help {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* Fehlerhafte Felder werden zusätzlich zur Farbe mit Rahmen und Text
   gekennzeichnet (1.4.1 Benutzung von Farbe) */
.ida-field-error input,
.ida-field-error select,
.ida-field-error textarea {
    border-color: var(--bs-danger);
    border-width: 2px;
}

.ida-field-error .ida-error-text {
    color: var(--bs-danger-text-emphasis);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ----------------------------------------------------------- Kennzeichen */

.ida-badge-inherited {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-weight: 400;
}

.ida-slug {
    font-family: var(--bs-font-monospace);
    font-size: 0.875em;
}

/* -------------------------------------------------------- Meldungsbereich */

.ida-messages:empty {
    display: none;
}

/* ------------------------------------------------------------- Fußbereich */

.ida-footer {
    margin-top: 3rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--bs-border-color);
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* Animationen abschalten, wenn das System es verlangt (2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ------------------------------------------------- Vorschau der Dokumente */

/* Probleme in der Vorschau: zusätzlich zur Farbe mit Rahmen und Titel
   gekennzeichnet (WCAG 1.4.1 Benutzung von Farbe) */
.ida-placeholder-problem {
    font-family: var(--bs-font-monospace);
    font-size: 0.875em;
    padding: 0 0.2rem;
    border-radius: 0.2rem;
    border: 1px dashed currentColor;
}

.ida-placeholder-problem--unknown,
.ida-placeholder-problem--filter {
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
}

.ida-placeholder-problem--empty {
    color: var(--bs-warning-text-emphasis);
    background-color: var(--bs-warning-bg-subtle);
}

/* Das gerenderte Dokument in der Vorschau */
.ida-preview {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 1.5rem;
    background-color: var(--bs-body-bg);
}

.ida-preview .ida-section + .ida-section {
    margin-top: 1.5rem;
}

.ida-preview h1 { font-size: 1.5rem; }
.ida-preview h2 { font-size: 1.3rem; }
.ida-preview h3 { font-size: 1.15rem; }
.ida-preview h4,
.ida-preview h5,
.ida-preview h6 { font-size: 1rem; }

.ida-preview address {
    font-style: normal;
}

/* -------------------------------------------------------- Versionsvergleich */

.diff-wrapper {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}

.diff-wrapper th,
.diff-wrapper td {
    padding: 0.2rem 0.4rem;
    vertical-align: top;
    border: 1px solid var(--bs-border-color);
}

.diff-wrapper th.n-old,
.diff-wrapper th.n-new {
    width: 3rem;
    text-align: right;
    color: var(--bs-secondary-color);
    font-weight: 400;
}

.diff-wrapper .change-ins td.new,
.diff-wrapper ins {
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    text-decoration: none;
}

.diff-wrapper .change-del td.old,
.diff-wrapper del {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    text-decoration: line-through;
}

.diff-wrapper .change-rep td.old {
    background-color: var(--bs-danger-bg-subtle);
}

.diff-wrapper .change-rep td.new {
    background-color: var(--bs-success-bg-subtle);
}

.diff-wrapper .skipped {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    text-align: center;
}

/* -------------------------------------------------- Abschnitte der Vorlage */

.ida-section-row {
    border-left: 4px solid var(--bs-border-color);
}

.ida-section-row--slot { border-left-color: var(--bs-info); }
.ida-section-row--blocks { border-left-color: var(--bs-success); }
.ida-section-row--generated { border-left-color: var(--bs-secondary); }
.ida-section-row--fixed { border-left-color: var(--ida-brand); }

.ida-section-content {
    font-size: 0.875rem;
    max-height: 8rem;
    overflow: auto;
    background-color: var(--bs-tertiary-bg);
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.ida-placeholder-list code {
    cursor: text;
}

/* ---------------------------------------------------------- Anmeldeseite */

/*
 * Das Bild ist reine Zier und steht deshalb im CSS und nicht als <img> im
 * Markup: Screenreader übergehen es, und es braucht keinen Alternativtext
 * (WCAG 2.1, 1.1.1). Darüber liegt ein dunkler Verlauf, damit die Karte sich
 * sicher abhebt; der Kontrast der Texte entsteht ohnehin auf der
 * undurchsichtigen Karte.
 */
.ida-login {
    /* Trägt die Seite, solange das Bild noch nicht geladen ist */
    background-color: #12263f;
    background-image:
        linear-gradient(rgba(10, 22, 40, 0.28), rgba(10, 22, 40, 0.45)),
        url("../Images/login.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

:root[data-bs-theme="dark"] .ida-login {
    background-image:
        linear-gradient(rgba(5, 12, 24, 0.48), rgba(5, 12, 24, 0.66)),
        url("../Images/login.jpg");
}

/* Über dem Bild braucht die Karte einen kräftigeren Schatten als sonst */
.ida-login .card {
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.35);
}

/*
 * Hinweis auf die Herkunft des Bildes. Er steht auf dem Bild und braucht
 * deshalb einen eigenen Untergrund: Was durch den Verlauf hindurchscheint,
 * ist nicht vorhersehbar, und der Kontrast muss es sein (WCAG 1.4.3). Weiß
 * auf diesem Ton liegt über 12:1, auch dort, wo das Bild hell ist.
 */
.ida-login-note {
    display: inline-block;
    margin: 0;
    padding: 0.35rem 0.75rem;
    border-radius: 1rem;
    background-color: rgba(10, 22, 40, 0.88);
    color: #fff;
    font-size: 0.8125rem;
}

@media (max-width: 575.98px) {
    /* Ein festes Hintergrundbild kostet auf dem Telefon nur Rechenzeit */
    .ida-login {
        background-attachment: scroll;
    }
}

@media print {
    .ida-login {
        background-image: none;
        background-color: #fff;
    }
}

/* ------------------------------------------------------------------ Handbuch
   Die Handbuchseite trägt denselben Text wie das PDF. Hier geht es nur darum,
   lange Fließtexte lesbar zu halten und die Bildschirmfotos einzupassen. */

.ida-manual {
    max-width: 52rem;
}

.ida-manual h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--ida-brand);
    scroll-margin-top: 1rem;
}

.ida-manual section:first-child h2 {
    margin-top: 0;
}

.ida-manual h3 {
    font-size: 1.125rem;
    margin-top: 1.75rem;
}

.ida-manual dt {
    margin-top: 0.5rem;
}

.ida-manual table {
    width: 100%;
    margin: 0.75rem 0 1.25rem;
    border-collapse: collapse;
}

.ida-manual th,
.ida-manual td {
    border: 1px solid var(--bs-border-color);
    padding: 0.35rem 0.5rem;
    vertical-align: top;
    text-align: left;
}

.ida-manual thead th {
    background: var(--bs-tertiary-bg);
}

.ida-manual-figure {
    margin: 1rem 0 1.5rem;
}

.ida-manual-figure img {
    width: 100%;
    height: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
}

.ida-manual-figure figcaption {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.ida-manual-note {
    border-left: 3px solid var(--ida-brand);
    background: var(--bs-tertiary-bg);
    padding: 0.5rem 0.75rem;
    border-radius: 0 0.25rem 0.25rem 0;
}

.ida-manual-toc-list {
    font-size: 0.9375rem;
}

.ida-manual-toc-list li {
    margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------- Zeitpläne */

.ida-cron-line {
    padding: 0.5rem 0.75rem;
    background: var(--bs-tertiary-bg);
    border-radius: 0.25rem;
    word-break: break-all;
}

.ida-cron-input {
    font-family: var(--bs-font-monospace);
    max-width: 10rem;
}

.ida-schedule-form {
    display: inline-block;
}

.ida-job-output {
    max-height: 20rem;
    overflow: auto;
    padding: 0.5rem;
    background: var(--bs-tertiary-bg);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    white-space: pre-wrap;
}

/* ------------------------------------------------------------ HTML-Felder */

/*
 * Die Beschriftung eines Feldes, das die Insel "html-field" übernommen hat:
 * sie zeigt nicht mehr auf das verborgene Textfeld, setzt den Schreibzeiger
 * aber weiterhin in den Editor.
 */
.ida-editor-label {
    cursor: pointer;
}

/* ------------------------------------------------------------- Schaubilder
   Das Schaubild im Handbuch ist ein SVG im Markup (Partials/Manual/Diagram).
   Die Farben stehen hier und – für den Druck – noch einmal im Layout des
   PDF: Der Prüfdienst druckt offline und kennt app.css nicht. */

.ida-diagram {
    display: block;
    width: 100%;
    height: auto;
}

.ida-diagram .dg-box {
    fill: #fff;
    stroke: #adb5bd;
    stroke-width: 1;
}

.ida-diagram .dg-box--type {
    fill: #f1f3f5;
}

.ida-diagram .dg-box--accent {
    fill: #fdf2f2;
    stroke: #ed1c29;
}

.ida-diagram .dg-box--check {
    fill: #fff;
    stroke: #ed1c29;
    stroke-dasharray: 4 3;
}

.ida-diagram .dg-band {
    fill: #495057;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ida-diagram .dg-title {
    fill: #212529;
    font-size: 14px;
    font-weight: 600;
}

.ida-diagram .dg-sub,
.ida-diagram .dg-note {
    fill: #495057;
    font-size: 11.5px;
}

.ida-diagram .dg-note--back {
    fill: #c81622;
}

.ida-diagram .dg-arrow {
    fill: none;
    stroke: #495057;
    stroke-width: 1.5;
}

.ida-diagram .dg-arrow--back {
    stroke: #c81622;
    stroke-dasharray: 5 4;
}

.ida-diagram .dg-head {
    fill: #495057;
}

.ida-diagram .dg-head--back {
    fill: #c81622;
}

:root[data-bs-theme="dark"] .ida-diagram .dg-box {
    fill: #2b3035;
    stroke: #6c757d;
}

:root[data-bs-theme="dark"] .ida-diagram .dg-box--type {
    fill: #343a40;
}

:root[data-bs-theme="dark"] .ida-diagram .dg-box--accent {
    fill: #3a2325;
    stroke: #ff8b92;
}

:root[data-bs-theme="dark"] .ida-diagram .dg-box--check {
    fill: #2b3035;
    stroke: #ff8b92;
}

:root[data-bs-theme="dark"] .ida-diagram .dg-title {
    fill: #f8f9fa;
}

:root[data-bs-theme="dark"] .ida-diagram .dg-band,
:root[data-bs-theme="dark"] .ida-diagram .dg-sub,
:root[data-bs-theme="dark"] .ida-diagram .dg-note {
    fill: #ced4da;
}

:root[data-bs-theme="dark"] .ida-diagram .dg-arrow {
    stroke: #ced4da;
}

:root[data-bs-theme="dark"] .ida-diagram .dg-head {
    fill: #ced4da;
}

/*
 * Der Rückweg steht nach dem allgemeinen Pfeil: beide Regeln sind gleich
 * stark, die spätere gewinnt. Stünde er davor, wäre er im dunklen Modus grau.
 */
:root[data-bs-theme="dark"] .ida-diagram .dg-note--back {
    fill: #ff8b92;
}

:root[data-bs-theme="dark"] .ida-diagram .dg-arrow--back {
    stroke: #ff8b92;
}

:root[data-bs-theme="dark"] .ida-diagram .dg-head--back {
    fill: #ff8b92;
}