/*
 * AlphaDNA Event Radar (Phase 1) — Widgets 1:1 nach der abgenommenen
 * Integrations-Vorschau (AlphaDNA-Event-Radar-Integration-Preview-2026-06-05.html).
 * Präfix er-. Nur var(--fn-*)-Tokens.
 */

.er-page {
    background: var(--fn-bg);
    border: var(--fn-border-width) solid var(--fn-border-strong);
    border-radius: var(--fn-radius-lg);
    padding: 0 0 18px;
    font-family: var(--fn-font);
    color: var(--fn-text);
    min-height: calc(100vh - 7rem);
}

.er-crumb {
    padding: 14px 28px;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
    display: flex; align-items: baseline; gap: 14px;
}
.er-here { font-size: 16px; font-weight: var(--fn-font-weight-bold); }
.er-sub { font-size: 12px; color: var(--fn-text-tertiary); }
.er-loading { padding: 28px; color: var(--fn-text-secondary); font-size: 13.5px; }

.er-grid { display: grid; grid-template-columns: 320px 1fr; gap: 16px; padding: 22px 28px 0; }
@media (max-width: 1100px) { .er-grid { grid-template-columns: 1fr; } }

.er-widget {
    /* Rollen-Regel (DesignTokens.md): Karten auf der Seite = --fn-bg-alt; --fn-surface ist
       schwebenden Flächen vorbehalten. Vorher surface → wirkte heller als alle anderen Module. */
    background: var(--fn-bg-alt);
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius);
    padding: 16px;
    box-shadow: var(--fn-elevation-1);
}
.er-widget h4 {
    font-size: 13px; font-weight: var(--fn-font-weight-bold); margin: 0 0 14px;
    display: flex; align-items: center; gap: 8px;
}
.er-live { margin-left: auto; font-size: 10px; color: var(--fn-text-tertiary); font-weight: var(--fn-font-weight-regular); }

/* Portfolio Event Risk */
.er-risk-rows { display: flex; flex-direction: column; gap: 9px; }
.er-risk-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.er-risk-row .er-lbl { width: 64px; color: var(--fn-text-secondary); }
.er-risk-row .er-bar { flex: 1; height: 8px; background: var(--fn-bg-muted); border-radius: var(--fn-radius-pill); overflow: hidden; }
.er-risk-row .er-bar i { display: block; height: 100%; border-radius: var(--fn-radius-pill); transition: width .25s ease; }
.er-risk-row .er-cnt { width: 96px; text-align: right; color: var(--fn-text); font-family: var(--fn-font-mono); font-size: 11.5px; }

.er-green { background: var(--fn-event-green); }
.er-yellow { background: var(--fn-event-yellow); }
.er-orange { background: var(--fn-event-orange); }
.er-red { background: var(--fn-event-red); }

.er-risk-total {
    margin-top: 14px; padding-top: 12px; border-top: var(--fn-border-width) solid var(--fn-border);
    display: flex; align-items: center; justify-content: space-between; font-size: 12.5px;
}
.er-total-label { color: var(--fn-text-secondary); }
.er-total-sub { font-size: 11px; color: var(--fn-text-tertiary); }
.er-score { font-family: var(--fn-font-mono); font-weight: var(--fn-font-weight-bold); font-size: 16px; }
.er-score-ok { color: var(--fn-success); }
.er-score-warn { color: var(--fn-warning); }
.er-score-hot { color: var(--fn-cat-orange); }

/* Kritische Ereignisse */
table.er-events { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
table.er-events th {
    text-align: left; color: var(--fn-text-tertiary); font-weight: var(--fn-font-weight-medium);
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    padding: 7px 10px; border-bottom: var(--fn-border-width) solid var(--fn-border-strong);
}
table.er-events td { padding: 9px 10px; border-bottom: var(--fn-border-width) solid var(--fn-border); vertical-align: middle; overflow: hidden; }
table.er-events tr:last-child td { border-bottom: none; }
table.er-events tbody tr:hover td { background: var(--fn-bg-muted); }
table.er-events tr.er-hot td { background: var(--fn-danger-soft); }
table.er-events th.center, table.er-events td.center { text-align: center; }
table.er-events th.num, table.er-events td.num { text-align: right; }
table.er-events .mono { font-family: var(--fn-font-mono); font-size: 11.5px; }
table.er-events .er-name { color: var(--fn-text); font-weight: var(--fn-font-weight-medium); white-space: nowrap; text-overflow: ellipsis; }

.er-impact { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.er-track { width: 64px; height: 6px; background: var(--fn-bg-muted); border-radius: var(--fn-radius-pill); overflow: hidden; }
.er-track i { display: block; height: 100%; border-radius: var(--fn-radius-pill); }
.er-val { font-family: var(--fn-font-mono); font-size: 11.5px; width: 28px; }

.er-footnote { padding: 14px 28px 0; font-size: 11.5px; color: var(--fn-text-tertiary); }