/* ══════════════════════════════════════════════════════════════════════════
   Merkkleur (teal, zie logo) i.p.v. Bootstrap's standaard blauw (#0d6efd) voor
   de rol "primary": knoppen, links, focusringen, aangevinkte checkboxes/
   radio's, actieve tabs/dropdown-items/paginering, voortgangsbalk. Bootstrap
   5.3 compileert .btn-primary/.btn-outline-primary met LETTERLIJKE hex-
   waarden i.p.v. via var(--bs-primary) - een enkele CSS-variabele overrulen
   dekt dus niet alles, vandaar de losse regels hieronder per component
   (zelfde aanpak als FerroxXFlow/Services/Appearance/AccentColorPalette.cs +
   App.razor, maar hier vaste waarden: dit product heeft geen Weergave-
   instellingen om de accentkleur per tenant aan te passen).

   #107e77 is exact Flow's standaardaccent (AppearanceSettings.AccentColorHex)
   zodat elk FerroxX Flow-product dezelfde merkkleur toont. De overige 5
   Bootstrap-rollen (secondary/success/danger/warning/info) blijven ongemoeid:
   Flow's standaardwaarden daarvoor zijn zelf al Bootstrap's eigen stockkleur,
   dus die hoeven niet overruled te worden.

   Moet ná bootstrap.min.css/site.css/app.css laden, zodat deze wint bij
   gelijke class-specificiteit (zelfde volgorde-afspraak als Flow's eigen
   App.razor: AccentOverrideCss vóór fx-tokens.css/fx-components.css).
   ══════════════════════════════════════════════════════════════════════════ */

:root, [data-bs-theme=light], [data-bs-theme=dark] {
    --bs-primary: #107e77;
    --bs-primary-rgb: 16, 126, 119;
    --bs-primary-text-emphasis: #0b5853;
    --bs-primary-bg-subtle: #e7f2f1;
    --bs-primary-border-subtle: #9fcbc9;
    --bs-link-color: #107e77;
    --bs-link-color-rgb: 16, 126, 119;
    --bs-link-hover-color: #0e6f69;
    --bs-link-hover-color-rgb: 14, 111, 105;
    --bs-focus-ring-color: rgba(16, 126, 119, 0.25);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #107e77;
    --bs-btn-border-color: #107e77;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0e6f69;
    --bs-btn-hover-border-color: #0e6f69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d655f;
    --bs-btn-active-border-color: #0d655f;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #107e77;
    --bs-btn-disabled-border-color: #107e77;
    --bs-btn-focus-shadow-rgb: 16, 126, 119;
}

.btn-outline-primary {
    --bs-btn-color: #107e77;
    --bs-btn-border-color: #107e77;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #107e77;
    --bs-btn-hover-border-color: #107e77;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #107e77;
    --bs-btn-active-border-color: #0d655f;
    --bs-btn-disabled-color: #107e77;
    --bs-btn-disabled-border-color: #107e77;
    --bs-btn-focus-shadow-rgb: 16, 126, 119;
}

.form-control:focus, .form-select:focus {
    border-color: #0e6f69;
    box-shadow: 0 0 0 0.25rem rgba(16, 126, 119, 0.25);
}

.form-check-input:focus {
    border-color: #0e6f69;
    box-shadow: 0 0 0 0.25rem rgba(16, 126, 119, 0.25);
}

.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
    background-color: #107e77;
    border-color: #107e77;
}

.dropdown-menu, .dropdown-menu-dark {
    --bs-dropdown-link-active-bg: #107e77;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: #107e77;
}

.list-group {
    --bs-list-group-active-bg: #107e77;
    --bs-list-group-active-border-color: #107e77;
}

.pagination {
    --bs-pagination-active-bg: #107e77;
    --bs-pagination-active-border-color: #107e77;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(16, 126, 119, 0.25);
}

.progress, .progress-stacked {
    --bs-progress-bar-bg: #107e77;
}