/*
 * axe-overrides.css — WCAG AA contrast fixes voor axe-core compatibiliteit.
 *
 * Geladen als allerlaatste stylesheet. Overschrijft Bootstrap-variabelen en
 * color-mix()-waarden die axe-core niet betrouwbaar kan berekenen.
 */

/* ── Bootstrap btn-outline-info ─────────────────────────────────────────── */
/* Bootstrap zet --bs-btn-color: #0dcaf0 (cyaan op wit = ~1.8:1, fails WCAG).
   axe-core leest het CSS-variabele; override met directe color-property.   */
.btn.btn-outline-info,
.btn-outline-info.btn {
    color: #0c4a6e !important;           /* 7.2:1 op wit */
    border-color: #0c4a6e !important;
}
.btn.btn-outline-info:hover,
.btn.btn-outline-info:active,
.btn-outline-info.btn:hover,
.btn-outline-info.btn:active {
    color: #ffffff !important;
    background-color: #0c4a6e !important;
    border-color: #0c4a6e !important;
}

/* ── Bootstrap btn-outline-warning ──────────────────────────────────────── */
/* Bootstrap zet --bs-btn-color: #ffc107 (geel op wit = ~2.1:1, fails WCAG).*/
.btn.btn-outline-warning,
.btn-outline-warning.btn {
    color: #7a4f00 !important;           /* 6.1:1 op wit */
    border-color: #7a4f00 !important;
}
.btn.btn-outline-warning:hover,
.btn.btn-outline-warning:active,
.btn-outline-warning.btn:hover,
.btn-outline-warning.btn:active {
    color: #ffffff !important;
    background-color: #7a4f00 !important;
    border-color: #7a4f00 !important;
}

/* Dark mode overrides voor outline knoppen */
[data-theme="dark"] .btn.btn-outline-info,
[data-theme="dark"] .btn-outline-info.btn {
    color: #7dd3fc !important;           /* 5.7:1 op #062A4A */
    border-color: #7dd3fc !important;
}
[data-theme="dark"] .btn.btn-outline-warning,
[data-theme="dark"] .btn-outline-warning.btn {
    color: #fcd34d !important;           /* 6.2:1 op #062A4A */
    border-color: #fcd34d !important;
}

/* ── KPI-card trend kleuren (dark mode) ─────────────────────────────────── */
/* axe-core kan geneste CSS-variabelen in de achtergrond niet altijd oplossen.
   Stel expliciete opaque achtergrond + contrasterende tekstkleur in.         */
[data-theme="dark"] .kpi-card {
    background-color: #062A4A !important; /* opaque, zodat axe contrast berekent */
}
[data-theme="dark"] .kpi-card.kpi-ok,
[data-theme="dark"] .kpi-card.kpi-fault,
[data-theme="dark"] .kpi-card.kpi-warn,
[data-theme="dark"] .kpi-card.kpi-info {
    background-color: #062A4A !important;
}
[data-theme="dark"] .kpi-card-trend {
    color: rgba(249,245,241,0.80) !important; /* ~5.1:1 op #062A4A */
}
[data-theme="dark"] .kpi-card-trend.up {
    color: #6EE7A0 !important;            /* ~6.4:1 op #062A4A */
}
[data-theme="dark"] .kpi-card-trend.down {
    color: #FCA5A5 !important;            /* ~5.6:1 op #062A4A */
}

/* ── Dashboard filter labels (light mode) ───────────────────────────────── */
/* Filterbar achtergrond is #f4f6f9; span-kleur moet ≥4.5:1 contrast hebben. */
[data-theme="light"] .dashboard-filter-field span {
    color: #1e3a5f !important;            /* 9.2:1 op #f4f6f9 */
}
[data-theme="light"] .dashboard-filter-reset {
    color: #1e3a5f !important;
    background-color: #ffffff !important;
    border-color: #9baec8 !important;
}
[data-theme="light"] .dashboard-filter-reset:hover {
    color: #0e1f35 !important;
    background-color: #f0f4f9 !important;
}
/* Neutraal dark mode: filters op donkere achtergrond */
[data-theme="dark"] .dashboard-filter-field span {
    color: #e8f0f8 !important;            /* ~9:1 op #062A4A */
}
[data-theme="dark"] .dashboard-filter-reset {
    color: #e8f0f8 !important;
    background-color: #0c3a66 !important;
    border-color: #1e5080 !important;
}