/*
 * ANYVA Management-Übersicht (Executive-Startseite) und wiederverwendbare Dashboard-Komponenten.
 *
 * Geltungsbereich: ausschließlich Klassen mit Präfix .exd- (Komponenten unter Anyva.UI.Components/Dashboard).
 * Kein Selektor greift auf DevExpress-Komponenten oder XAF-Views zu. Farben/Abstände/Radien kommen aus den
 * Design-Tokens (Theme/anyva-tokens.css) mit Fallbacks, damit die Seite auch in anderen Themes lesbar bleibt
 * (sie ist für "ANYVA Hell" gestaltet; in anderen Themes bleibt sie lesbar, weil die Karten immer helle Flächen mit dunklem Text sind, wirkt dort aber nicht abgestimmt).
 *
 * Responsives Verhalten über Container Queries auf .exd (Breite des Arbeitsbereichs, nicht des Fensters):
 *   < 720 px   eine Spalte
 *   ≥ 720 px   zwei Spalten
 *   ≥ 1240 px  zwölf Spalten (Präsentationsmonitor): Kette 8 | Risikoveränderung 4 · Risiko 6 | Resilienz 6 · Handlungsbedarf 12
 */

.exd {
    --exd-critical: var(--anyva-critical, #b42318);
    --exd-critical-bg: var(--anyva-critical-bg, #fdecea);
    --exd-attention: var(--anyva-attention, #8a4b00);
    --exd-attention-bg: var(--anyva-attention-bg, #fff4df);
    --exd-neutral-bg: var(--anyva-neutral-bg, #e9eef7);
    --exd-text: var(--anyva-text, #1a2433);
    --exd-muted: var(--anyva-text-muted, #5b6b82);
    --exd-border: var(--anyva-border, #e3e8f1);
    --exd-surface: var(--anyva-surface, #fff);
    --exd-surface-2: var(--anyva-surface-2, #f7f9fc);
    --exd-accent: var(--anyva-blue-600, #1d4fd8);

    container-type: inline-size;
    container-name: exd;
    box-sizing: border-box;
    padding: .625rem .25rem 1rem;
    font-family: var(--anyva-font, inherit);
    font-variant-numeric: tabular-nums;
}

.exd *, .exd *::before, .exd *::after { box-sizing: border-box; }

/* --- Kopf -------------------------------------------------------------------------------------------- */
.exd-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin: 0 .25rem .875rem;
}

.exd-title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--anyva-navy-900, inherit);
}

.exd-title-note { margin-left: .75rem; font-size: .875rem; font-weight: 400; letter-spacing: 0; color: var(--anyva-text-muted, inherit); opacity: .9; }

.exd-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1rem; }
.exd-stamp { font-size: .8125rem; color: var(--anyva-text-muted, inherit); opacity: .9; }

.exd-sample-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .875rem;
    border-radius: 999px;
    border: 1px dashed #d99a3d;
    background: var(--exd-attention-bg);
    color: var(--exd-attention);
    font-size: .8125rem;
    font-weight: 600;
}

.exd-sample-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #e08a00; }

/* --- Raster ------------------------------------------------------------------------------------------ */
.exd-grid { display: grid; gap: .875rem; grid-template-columns: minmax(0, 1fr); }

@container exd (min-width: 720px) {
    .exd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exd-c-chain, .exd-c-actions { grid-column: 1 / -1; }
}

@container exd (min-width: 1240px) {
    .exd-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .exd-c-chain { grid-column: span 8; }
    .exd-c-reduction { grid-column: span 4; }
    .exd-c-risk, .exd-c-resilience { grid-column: span 6; }
    .exd-c-actions { grid-column: span 12; }
}

/* --- Karte ------------------------------------------------------------------------------------------- */
.exd-card {
    color: var(--exd-text);
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem 1.25rem 1.125rem;
    background: var(--exd-surface);
    border: 1px solid var(--exd-border);
    border-radius: var(--anyva-radius-lg, 14px);
    box-shadow: var(--anyva-shadow-card, 0 1px 2px rgba(15, 31, 53, .06));
}

.exd-card-head { margin-bottom: .625rem; }

.exd-eyebrow {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--exd-accent);
}

.exd-card-title {
    margin: .25rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--anyva-navy-900, #0f1f35);
}

.exd-card-subtitle { margin: .25rem 0 0; font-size: .8125rem; color: var(--exd-muted); }
.exd-card-body { flex: 1 1 auto; min-width: 0; }

/* --- Kennzahl ---------------------------------------------------------------------------------------- */
.exd-metric { min-width: 0; }
.exd-metric-value { font-size: 2.5rem; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.exd-metric-label { margin-top: .375rem; font-size: .875rem; font-weight: 600; }
.exd-metric-hint { margin-top: .25rem; font-size: .75rem; line-height: 1.35; color: var(--exd-muted); }
.exd-metric-compact .exd-metric-value { font-size: 1.625rem; }
.exd-metric-compact .exd-metric-label { font-size: .8125rem; font-weight: 500; color: var(--exd-muted); }

.exd-tone-critical .exd-metric-value, .exd-fact-value.exd-tone-critical { color: var(--exd-critical); }
.exd-tone-attention .exd-metric-value, .exd-fact-value.exd-tone-attention { color: var(--exd-attention); }
.exd-tone-neutral .exd-metric-value { color: var(--anyva-navy-900, #0f1f35); }

.exd-split { display: grid; grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.exd-split-main { min-width: 0; }

.exd-subhead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
    margin: 1rem 0 .5rem;
    padding-top: .875rem;
    border-top: 1px solid var(--exd-border);
    font-size: .8125rem;
    font-weight: 600;
}

.exd-subhead span { font-weight: 400; color: var(--exd-muted); font-size: .75rem; }

/* --- Segmentbalken und Legende ------------------------------------------------------------------------- */
.exd-segbar { display: flex; gap: 2px; height: .875rem; border-radius: 999px; overflow: hidden; background: var(--exd-neutral-bg); }
.exd-seg { min-width: 4px; }
.exd-seg-empty { background: repeating-linear-gradient(135deg, #cfd7e6 0 4px, #e6ebf4 4px 8px); }

.exd-seg-risk-extreme { background: #b42318; }
.exd-seg-risk-high { background: #e8590c; }
.exd-seg-risk-medium { background: #8fa7d6; }
.exd-seg-risk-low { background: #d3dcee; }

.exd-seg-reduction-lowered { background: var(--exd-accent); }
.exd-seg-reduction-same { background: #8fa7d6; }
.exd-seg-reduction-na { background: repeating-linear-gradient(135deg, #b8c3d9 0 4px, #dde3ef 4px 8px); }

.exd-legend { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.exd-legend-stack { display: grid; grid-template-columns: minmax(0, 1fr); }
.exd-legend li { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; min-width: 0; }
.exd-swatch { width: .75rem; height: .75rem; border-radius: 3px; flex: none; }
.exd-legend-label { color: var(--exd-muted); }
.exd-legend-stack .exd-legend-label { flex: 1 1 auto; }
.exd-legend-value { font-weight: 600; }

/* --- Kapseln ----------------------------------------------------------------------------------------- */
.exd-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.exd-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .375rem;
    padding: .3125rem .75rem;
    border-radius: 999px;
    font-size: .8125rem;
    background: var(--exd-neutral-bg);
    color: var(--anyva-text, #1a2433);
}

.exd-chip-value { font-weight: 700; }
.exd-chip-label { font-weight: 500; }
.exd-chip-attention { background: var(--exd-attention-bg); color: var(--exd-attention); }
.exd-chip-critical { background: var(--exd-critical-bg); color: var(--exd-critical); }

/* --- Wirksamkeitskette ---------------------------------------------------------------------------------- */
.exd-chain {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exd-stage {
    position: relative;
    padding: .75rem .875rem .875rem;
    border: 1px solid var(--exd-border);
    border-radius: var(--anyva-radius, 10px);
    background: var(--exd-surface-2);
}

.exd-stage:not(:last-child)::after {
    content: "›";
    position: absolute;
    top: 50%;
    right: -.8rem;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--anyva-border-strong, #cbd5e1);
    z-index: 1;
}

.exd-stage-head { display: flex; align-items: center; gap: .5rem; }

.exd-stage-step {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--exd-neutral-bg);
    font-size: .6875rem;
    font-weight: 700;
    color: var(--anyva-navy-800, #16294a);
}

.exd-stage-label { margin-top: 0; font-size: .8125rem; line-height: 1.3; font-weight: 600; }
.exd-stage-count { margin-top: .375rem; font-size: 2.125rem; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--anyva-navy-900, #0f1f35); }
.exd-stage-of { margin-top: .25rem; font-size: .75rem; color: var(--exd-muted); }
.exd-stage-drop { float: right; font-size: .6875rem; font-weight: 600; color: var(--exd-muted); }

.exd-stage-track { height: .4375rem; margin-top: .625rem; border-radius: 999px; background: var(--exd-neutral-bg); overflow: hidden; }
.exd-stage-fill { display: block; height: 100%; border-radius: 999px; }
.exd-stage-1 .exd-stage-fill { background: #b7c6e4; }
.exd-stage-2 .exd-stage-fill { background: #8ba5dc; }
.exd-stage-3 .exd-stage-fill { background: #5580e3; }
.exd-stage-4 { border-color: #b7c9f3; background: var(--anyva-blue-50, #eff4ff); }
.exd-stage-4 .exd-stage-fill { background: var(--exd-accent); }
.exd-stage-4 .exd-stage-count { color: var(--exd-accent); }

.exd-chain-exceptions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .875rem; }
.exd-chain-exceptions-title { margin-right: .25rem; font-size: .75rem; font-weight: 600; color: var(--exd-muted); }
.exd-chain-basis { margin-left: auto; font-size: .75rem; color: var(--exd-muted); }

/* --- Fakten (Resilienz) ------------------------------------------------------------------------------- */
.exd-facts { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.exd-facts li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label value" "note value";
    column-gap: 1rem;
    align-items: center;
    padding: .5rem .875rem;
    border: 1px solid var(--exd-border);
    border-radius: var(--anyva-radius, 10px);
    background: var(--exd-surface-2);
}

.exd-fact-label { grid-area: label; font-size: .875rem; font-weight: 600; }
.exd-fact-note { grid-area: note; font-size: .75rem; color: var(--exd-muted); }
.exd-fact-value { grid-area: value; font-size: 1.375rem; font-weight: 700; }

.exd-not-captured {
    padding: .1875rem .625rem;
    border: 1px dashed var(--anyva-border-strong, #cbd5e1);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--exd-muted);
}

/* --- Handlungsbedarf --------------------------------------------------------------------------------- */
.exd-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2rem; }

@container exd (min-width: 960px) {
    .exd-actions { grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.6fr); }
}

.exd-counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; align-content: start; }

.exd-counters .exd-metric {
    padding: .625rem .875rem;
    border: 1px solid var(--exd-border);
    border-radius: var(--anyva-radius, 10px);
    background: var(--exd-surface-2);
}

.exd-decisions { display: grid; margin: 0; padding: 0; list-style: none; }

.exd-decision {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .875rem;
    align-items: center;
    padding: .4375rem 0;
    border-bottom: 1px solid var(--exd-border);
}

.exd-decision:first-child { padding-top: 0; }
.exd-decision:last-child { padding-bottom: 0; border-bottom: 0; }
.exd-decision-dot { width: .625rem; height: .625rem; border-radius: 50%; background: var(--anyva-border-strong, #cbd5e1); }
.exd-decision-critical .exd-decision-dot { background: var(--exd-critical); }
.exd-decision-attention .exd-decision-dot { background: #e0a24a; }
.exd-decision-title { font-size: .875rem; font-weight: 600; line-height: 1.35; }
.exd-decision-context { margin-top: .125rem; font-size: .75rem; color: var(--exd-muted); }

@container exd (min-width: 1240px) {
    .exd-decision-main { display: flex; align-items: baseline; gap: .75rem; min-width: 0; }
    .exd-decision-title { flex: 0 1 auto; }
    .exd-decision-context { margin-top: 0; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.exd-decision-due { font-size: .75rem; font-weight: 600; white-space: nowrap; color: var(--exd-muted); }
.exd-decision-critical .exd-decision-due { color: var(--exd-critical); }

/* --- Zustände ---------------------------------------------------------------------------------------- */
.exd-state { padding: 2rem; border: 1px dashed var(--exd-border); border-radius: var(--anyva-radius-lg, 14px); color: var(--exd-muted); text-align: center; }
.exd-state-error { display: grid; gap: .25rem; color: var(--exd-critical); border-color: var(--exd-critical); background: var(--exd-critical-bg); }

/* --- Schmale Arbeitsbereiche: Kette untereinander --------------------------------------------------------- */
@container exd (max-width: 880px) {
    .exd-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exd-stage:nth-child(2)::after { display: none; }
    .exd-split { grid-template-columns: minmax(0, 1fr); }
}

@container exd (max-width: 520px) {
    .exd-chain { grid-template-columns: minmax(0, 1fr); }
    .exd-stage::after { display: none; }
}

/* --- Erläuterung unter einer Karte ------------------------------------------------------------------------ */
.exd-footnote {
    margin: 1rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid var(--exd-border);
    font-size: .75rem;
    line-height: 1.5;
    color: var(--exd-muted);
}

/* --- Bewertungslage (Risikokarte): Überschrift und Kapseln in einer Zeile ------------------------------------ */
.exd-assess {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: .875rem;
    padding-top: .75rem;
    border-top: 1px solid var(--exd-border);
}

.exd-assess .exd-subhead { margin: 0; padding: 0; border: 0; }

/* ═══ Echtdaten-Dashboard (Vertrag v2): Zustände, Klickziele, Geltungsbereich ═══════════════════════════════════ */

/* Raster nach Blockschlüssel */
@container exd (min-width: 1240px) {
    .exd-b-measures-chain { grid-column: span 12; }
    .exd-b-measures-implementation { grid-column: span 5; }
    .exd-b-overdue { grid-column: span 7; }
    .exd-b-audit-findings, .exd-b-resilience-criticality, .exd-b-risk-structure { grid-column: span 6; }
    .exd-dq { grid-column: span 12; }
}
@container exd (min-width: 720px) and (max-width: 1239px) {
    .exd-b-measures-chain, .exd-b-measures-implementation, .exd-dq { grid-column: 1 / -1; }
}
.exd-dq { margin-top: .875rem; }

/* Töne */
.exd-tone-success .exd-metric-value { color: #067647; }
.exd-tone-info .exd-metric-value { color: #175cd3; }
.exd-tone-muted .exd-metric-value { color: var(--exd-muted); }
.exd-metric-word .exd-metric-value, .exd-tone-muted .exd-metric-value { font-size: 1.0625rem; font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.exd-seg-tone-neutral { background: #b8c3d9; }
.exd-seg-tone-info { background: #175cd3; }
.exd-seg-tone-attention { background: #e0a24a; }
.exd-seg-tone-critical { background: #b42318; }
.exd-seg-tone-success { background: #067647; }

/* Klickbare Kennzahlen: echte Schaltflächen (Tastatur, Fokus) */
.exd-metric-link, .exd-stage-link, .exd-legend-link {
    font-family: inherit; color: inherit; text-align: left; cursor: pointer;
    background: none; border: 0; padding: 0;
}
.exd-counters .exd-metric-link { padding: .625rem .875rem; border: 1px solid var(--exd-border); border-radius: var(--anyva-radius, 10px); background: var(--exd-surface-2); }
.exd-metric-link:hover, .exd-metric-link:focus-visible { border-color: var(--exd-accent); box-shadow: 0 0 0 2px rgba(29, 79, 216, .15); outline: none; }
.exd-metric-link .exd-metric-value, .exd-stage-link, .exd-legend-link { text-decoration: underline; text-decoration-color: rgba(29, 79, 216, .35); text-underline-offset: 3px; }
.exd-metric-link > span { display: block; }
.exd-legend-link { font-weight: 700; }
.exd-legend-link:hover, .exd-stage-link:hover { color: var(--exd-accent); }
.exd-metric-link:focus-visible, .exd-stage-link:focus-visible, .exd-legend-link:focus-visible { outline: 2px solid var(--exd-accent); outline-offset: 2px; border-radius: 4px; }

.exd-counters-flex { display: flex; flex-wrap: wrap; gap: .625rem; }
.exd-counters-flex .exd-metric { flex: 1 1 11rem; min-width: 10rem; }
.exd-excepts { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .5rem; }
.exd-excepts .exd-metric { flex: 1 1 11rem; min-width: 10rem; padding: .5rem .75rem; border: 1px solid var(--exd-border); border-radius: var(--anyva-radius, 10px); background: var(--exd-surface-2); }

/* Geltungsbereich, Modus, Aktualisieren */
.exd-scopebar { margin: 0 0 .875rem; padding: .5rem .875rem; font-size: .8125rem; color: var(--exd-text); background: var(--exd-surface-2); border: 1px solid var(--exd-border); border-left: 3px solid var(--exd-accent); border-radius: var(--anyva-radius, 10px); }
.exd-scope { margin: 0 0 .625rem; font-size: .75rem; color: var(--exd-muted); }
.exd-basis { margin: .625rem 0 0; font-size: .75rem; color: var(--exd-muted); }
.exd-live-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .625rem; font-size: .75rem; font-weight: 600; color: #067647; background: #ecfdf3; border: 1px solid #abefc6; border-radius: 999px; }
.exd-live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #12b76a; }
.exd-refresh { font: inherit; font-size: .75rem; font-weight: 600; padding: .25rem .75rem; color: var(--exd-accent); background: transparent; border: 1px solid var(--exd-border); border-radius: 8px; cursor: pointer; }
.exd-refresh:hover:not(:disabled) { border-color: var(--exd-accent); }
.exd-refresh:disabled { opacity: .5; cursor: default; }

/* Hinweise */
.exd-toast { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .875rem; padding: .5rem .875rem; font-size: .8125rem; color: var(--exd-attention); background: var(--exd-attention-bg); border: 1px solid #fedf89; border-radius: var(--anyva-radius, 10px); }
.exd-toast-close { font: inherit; font-size: 1.125rem; line-height: 1; color: inherit; background: none; border: 0; cursor: pointer; }
.exd-unavailable { display: grid; gap: .25rem; padding: .875rem 1rem; font-size: .875rem; color: var(--exd-muted); background: var(--exd-surface-2); border: 1px dashed var(--exd-border); border-radius: var(--anyva-radius, 10px); }
.exd-unavailable strong { color: var(--exd-text); }
.exd-definition { margin-top: .75rem; font-size: .75rem; color: var(--exd-muted); }
.exd-definition summary { cursor: pointer; font-weight: 600; color: var(--exd-accent); }
.exd-definition p { margin: .375rem 0 0; line-height: 1.5; }
.exd-chain-exceptions-title { display: block; margin-top: .75rem; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--exd-muted); }

/* Dunkles Theme: Karten bleiben helle Flächen; Hinweisflächen angepasst */
.dxbl-theme-dark .exd-live-chip { background: #05301d; color: #75e0a7; border-color: #067647; }
.exd-seg-tone-scale1 { background: #d1e9ff; }
.exd-seg-tone-scale2 { background: #84caff; }
.exd-seg-tone-scale3 { background: #2e90fa; }
.exd-seg-tone-scale4 { background: #175cd3; }
.exd-metric-link { display: block; width: 100%; }
.exd-b-measures-implementation { order: 1; }
.exd-b-overdue { order: 2; }
.exd-b-measures-chain { order: 3; }
.exd-b-audit-findings { order: 4; }
.exd-b-resilience-criticality { order: 5; }
.exd-b-risk-structure { order: 6; }
.exd-dq { order: 7; }
@container exd (min-width: 1240px) {
    .exd-b-resilience-criticality { grid-column: span 6; }
}
@container exd (min-width: 720px) and (max-width: 1239px) {
    .exd-b-resilience-criticality { grid-column: auto; }
}
.exd-metric-link { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }