/*!
 * sedilo-core 1.18.30 — Status-Tokens & Betriebsstatus-Kacheln
 *
 * WARUM DIESE DATEI EXISTIERT
 * Der Design-Vertrag (Kompendium Teil 6, § 6) verbietet Ad-hoc-Farbwerte in
 * Views; Modul-CSS bindet an Theme-Token mit Fallback. Für Statuszustände
 * (ok/warn/danger/neutral) gab es bis 1.18.29 KEIN Token — die Admin-Übersicht
 * trug deshalb acht Hex-Literale im Markup. Folgen, beide gemessen:
 *   · Kachel-WERT bei „ok" 3,58:1 und bei „warn" 3,43:1 — AA verlangt 4,5:1.
 *   · Rahmen `#e0e6ef` blieb im Dunkelmodus hell (13,2:1 gegen den Grund).
 * Diese Datei ist die eine Quelle. Sie wird global über UiAsset geladen, damit
 * auch RegionalMap dieselben Zustandsfarben benutzt, ohne sie zu kopieren.
 *
 * KONTRASTE (gemessen gegen --sedilo-surface: #ffffff hell / #1b2536 dunkel)
 *   ok        #15803d → 5,02:1  |  dunkel #4ade80 → 8,83:1
 *   warn      #a15c00 → 5,19:1  |  dunkel #f0b429 → 8,26:1
 *   danger    #c0341d → 5,60:1  |  dunkel #f87171 → 5,56:1
 *   neutral   #4b5563 → 7,56:1  |  dunkel #9aa4b2 → 6,10:1
 *   auf Fläche: weiße Schrift auf #c0341d → 5,60:1 (Zähler-Badge)
 *
 * Sollte das Theme diese Token später selbst liefern (2.9.4+), gewinnt das
 * Theme automatisch: hier steht nur der Fallback.
 */

:root {
    --sedilo-status-ok: #15803d;
    --sedilo-status-warn: #a15c00;
    --sedilo-status-danger: #c0341d;
    --sedilo-status-neutral: #4b5563;
    --sedilo-status-accent: #0a46e6;   /* 6,93:1 auf Weiß */

    /* Flächen-Varianten: Zähler-Badges, Chips — immer mit weißer Schrift. */
    --sedilo-status-danger-solid: #c0341d;
    --sedilo-status-danger-solid-text: #ffffff;
}

[data-bs-theme="dark"] {
    --sedilo-status-ok: #4ade80;
    --sedilo-status-warn: #f0b429;
    --sedilo-status-danger: #f87171;
    --sedilo-status-neutral: #9aa4b2;
    --sedilo-status-accent: #6f9dff;   /* 5,82:1 auf #1b2536 */

    /* Fläche bleibt dunkelrot: Weiß darauf hält 5,60:1 in beiden Modi. */
    --sedilo-status-danger-solid: #c0341d;
    --sedilo-status-danger-solid-text: #ffffff;
}

/* ── Betriebsstatus-Kacheln (Admin-Übersicht) ───────────────────────────── */

.sedilo-statuscards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sedilo-statuscard {
    flex: 1 1 30%;
    min-width: 150px;
    min-height: 44px; /* Touch-Target § 57 */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--sedilo-hairline, rgba(16, 35, 63, 0.08));
    border-left: 4px solid var(--sedilo-statuscard-color, var(--sedilo-status-neutral, #4b5563));
    border-radius: var(--sedilo-radius-card, 8px);
    text-decoration: none;
    color: inherit;
    background: var(--sedilo-surface, #fff);
    transition: background-color var(--sedilo-dur-fast, 110ms) var(--sedilo-ease, ease);
}

.sedilo-statuscard:hover,
.sedilo-statuscard:focus {
    background: var(--sedilo-tint-hover, rgba(10, 70, 230, 0.06));
    text-decoration: none;
    color: inherit;
}

.sedilo-statuscard:focus-visible {
    outline: none;
    box-shadow: var(--sedilo-focus, 0 0 0 3px rgba(6, 47, 158, 0.55));
}

.sedilo-statuscard__icon {
    font-size: 1.4em;
    color: var(--sedilo-statuscard-color, var(--sedilo-status-neutral, #4b5563));
    flex: 0 0 auto;
}

.sedilo-statuscard__text {
    min-width: 0;
}

.sedilo-statuscard__label {
    display: block;
    font-size: 0.85em;
    color: var(--sedilo-status-neutral, #4b5563);
}

.sedilo-statuscard__value {
    display: block;
    font-weight: 600;
    color: var(--sedilo-statuscard-color, var(--sedilo-status-neutral, #4b5563));
}

/* 1.18.33 (D-2) — Hinweiszeile: die Begründung unter dem Wert.
   `--sedilo-status-neutral` misst 7,56:1 hell und 6,10:1 dunkel — der Satz,
   der die Ampel erklärt, darf nicht schlechter lesbar sein als sie selbst. */
.sedilo-statuscard__hint {
    display: block;
    font-size: 0.8em;
    color: var(--sedilo-status-neutral, #4b5563);
    margin-top: 2px;
}

/* Kacheln mit Ausgang bekommen Platz für den Knopf und stehen oben bündig,
   damit Label/Wert/Hinweis nicht um den Knopf herumfließen. */
.sedilo-statuscard--action {
    align-items: flex-start;
    flex-wrap: wrap;
}

.sedilo-statuscard--action .sedilo-statuscard__icon {
    margin-top: 2px;
}

/* Kein <a> in <a>: Die Karte ist der Link, dies ist nur seine Ansage.
   `aria-hidden` im Markup — der Screenreader liest den Karten-Link, der
   Text steht dort vollständig (Label + Wert + Hinweis). */
.sedilo-statuscard__cta {
    flex: 0 0 auto;
    margin-left: auto;
    align-self: center;
    pointer-events: none;
}

/* ── „Wartet auf dich" (1.18.33, D-2) ───────────────────────────────────── */

.sedilo-tasks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sedilo-task {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Touch-Target § 57: 44 px auch dann, wenn der Text einzeilig bleibt. */
    min-height: 44px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sedilo-hairline, rgba(16, 35, 63, 0.08));
}

.sedilo-task:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.sedilo-task:first-child {
    padding-top: 0;
}

.sedilo-task__dot {
    flex: 0 0 auto;
    font-size: 0.6em;
    color: var(--sedilo-task-color, var(--sedilo-status-warn, #a15c00));
}

.sedilo-task__text {
    flex: 1 1 auto;
    min-width: 0;
}

.sedilo-task__label {
    display: block;
    font-weight: 600;
}

/* Die Fälligkeit ist der Grund, warum die Zeile hier steht — sie muss lesbar
   sein: neutral misst 7,56:1 hell / 6,10:1 dunkel. */
.sedilo-task__hint {
    display: block;
    font-size: 0.85em;
    color: var(--sedilo-status-neutral, #4b5563);
}

.sedilo-task__action {
    flex: 0 0 auto;
}

/* Ein leerer Block ist eine gute Nachricht — und sieht auch so aus. */
.sedilo-task-empty {
    margin: 0;
    color: var(--sedilo-status-ok, #15803d);
    font-weight: 600;
}

.sedilo-task-total {
    display: inline-block;
    padding: 1px 8px;
    margin-left: 6px;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: middle;
}

/* ── Kennzahl-Kacheln (Mitglieder, Beiträge …) ──────────────────────────── */

.sedilo-kpi-col {
    margin-bottom: 16px;
}

.sedilo-kpi {
    display: block;
    border: 1px solid var(--sedilo-hairline, rgba(16, 35, 63, 0.08));
    border-radius: var(--sedilo-radius-card, 8px);
    padding: 14px 16px;
    /* 1.18.30 — vorher `background:#fff`: die Kachel blieb im Dunkelmodus weiß. */
    background: var(--sedilo-surface, #fff);
    height: 100%;
}

/* 1.18.33 (D-2) — Jede Zahl ist eine Frage; ein Dashboard, das nicht
   antwortet, wird nicht benutzt. Also ist jede Kachel ein Weg. */
.sedilo-kpi--link {
    text-decoration: none;
    color: inherit;
    transition: background-color var(--sedilo-dur-fast, 110ms) var(--sedilo-ease, ease);
}

.sedilo-kpi--link:hover,
.sedilo-kpi--link:focus {
    background: var(--sedilo-tint-hover, rgba(10, 70, 230, 0.06));
    text-decoration: none;
    color: inherit;
}

.sedilo-kpi--link:focus-visible {
    outline: none;
    box-shadow: var(--sedilo-focus, 0 0 0 3px rgba(6, 47, 158, 0.55));
}

.sedilo-kpi__value {
    display: block;
    font-size: 26px;
    font-weight: 700;
    /* Azur hält 6,93:1 auf Weiß, aber nur 2,22:1 auf dunklem Grund. */
    color: var(--sedilo-status-accent, #0a46e6);
}

/* 1.18.33 (D-2) — Der Zuwachs macht den Bestand erst zur Aussage.
   Grün nur bei echtem Plus; ±0 und Minus bleiben neutral — ein Minus bei den
   Mitgliedern rot zu färben, wäre eine Wertung, keine Zahl. */
.sedilo-kpi__delta {
    font-size: 14px;
    font-weight: 600;
    margin-left: 6px;
    color: var(--sedilo-status-neutral, #4b5563);
    white-space: nowrap;
}

.sedilo-kpi__delta--up {
    color: var(--sedilo-status-ok, #15803d);
}

.sedilo-kpi__label {
    display: block;
    font-size: 13px;
}

/* ── Übersicht: Weiterführung & Bilanz (1.18.33, D-2) ───────────────────── */

.sedilo-overview-more {
    margin: 4px 0 0;
    font-size: 13px;
}

.sedilo-overview-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Progressive Disclosure ohne JavaScript: `<details>` ist nativ tastatur- und
   screenreaderfähig und braucht keinen PJAX-Sweep. */
.sedilo-overview-details {
    margin-top: 14px;
    border-top: 1px solid var(--sedilo-hairline, rgba(16, 35, 63, 0.08));
    padding-top: 10px;
}

.sedilo-overview-details > summary {
    cursor: pointer;
    /* 44 px Touch-Target § 57 — ein Aufklapper ist ein Bedienelement. */
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--sedilo-status-neutral, #4b5563);
}

.sedilo-overview-details > summary:focus-visible {
    outline: none;
    box-shadow: var(--sedilo-focus, 0 0 0 3px rgba(6, 47, 158, 0.55));
    border-radius: var(--sedilo-radius-card, 8px);
}

.sedilo-overview-details__table {
    font-size: 13px;
    margin-bottom: 0;
}

.sedilo-overview-details__note {
    font-size: 12.5px;
    color: var(--sedilo-status-warn, #a15c00);
    margin: 8px 0 0;
}

/* ── Warn-Panel (Karteileichen u. Ä.) ───────────────────────────────────── */

.sedilo-panel--danger {
    border-color: var(--sedilo-status-danger, #c0341d);
}

.sedilo-panel__head--danger {
    color: var(--sedilo-status-danger, #c0341d);
}

/* ── Zähler-Badge (z. B. offene Meldungen) ──────────────────────────────── */

.sedilo-count-badge {
    background: var(--sedilo-status-danger-solid, #c0341d);
    color: var(--sedilo-status-danger-solid-text, #fff);
    border-radius: var(--sedilo-radius-pill, 999px);
}