/* Generic EUR/AOA display scopes. Initial mode is rendered server-side. */
[data-currency-surface] .currency-value-eur,
[data-currency-surface] .currency-value-aoa {
    display: none;
}

[data-currency-surface].currency-mode-eur .currency-value-eur,
[data-currency-surface].currency-mode-aoa .currency-value-aoa {
    display: inline;
}

/* Toggle-Control-Optik (.currency-toggle / .currency-toggle-btn)
   lebt in components/_segmented.css (SSoT fuer alle Umschalter).
   Hier nur noch Waehrungs-spezifische Anzeige-Logik. */

.currency-missing,
.aoa-missing {
    color: var(--color-warning);
    font-size: 0.78rem;
}

.currency-alert-aoa {
    display: none;
}

[data-currency-surface].currency-mode-aoa .currency-alert-aoa {
    display: flex;
}

.fx-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-muted);
    background: var(--color-surface);
    font-size: 0.78rem;
    text-decoration: none;
}

.fx-health-badge--ok {
    color: var(--color-success);
    border-color: rgba(34, 197, 94, 0.35);
}

.fx-health-badge--warn {
    color: var(--color-warning);
    border-color: rgba(245, 158, 11, 0.45);
}

.fx-health-badge--down {
    color: var(--color-danger);
    border-color: rgba(220, 53, 69, 0.35);
}

/* Gruppen-Wrapper: Label + Status-Badge + Info-Button (products.write) */
.fx-health {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.fx-health-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

.fx-health-rate {
    font-variant-numeric: tabular-nums;
}

/* Status-Punkt: erbt im Badge die Statusfarbe (currentColor),
   in der Legende per --ok/--warn/--down explizit gefaerbt. */
.fx-health-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.fx-health-dot--ok   { color: var(--color-success); }
.fx-health-dot--warn { color: var(--color-warning); }
.fx-health-dot--down { color: var(--color-danger); }

.fx-health-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}
.fx-health-info:hover { color: var(--color-primary); }
.fx-health-info:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Info-Modal-Inhalt (products-fx-info-modal) */
.fx-info-body {
    display: grid;
    gap: 0.6rem;
}
.fx-info-body p { margin: 0; }
.fx-info-lead { font-weight: 600; }

.fx-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
.fx-info-list li {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.88rem;
    line-height: 1.45;
}
.fx-info-marker {
    flex: 0 0 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.2rem;
    color: var(--color-muted);
}
.fx-info-text { flex: 1 1 auto; }

.fx-info-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.78rem;
    color: var(--color-muted);
}
.products-fx-info-modal .fx-footer-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.aoa-legacy-note {
    margin-top: 0.6rem;
}