/* components/overrides/bootstrap-evf-badge.css
   Purpose:
   - Provide shared badge and text-bg contrast fixes.
   May contain:
   - Shared Bootstrap badge selectors that consume app color roles from the EVF color files
   Must not contain:
   - Raw palette definitions
   - Long-lived global EVF tokens
   - Bootstrap token remaps
   - Page-local badge tweaks
   Dependencies:
   - Requires colors/bootstrap-evf-colors-base.css and colors/bootstrap-evf-colors-app.css to be loaded first.
   Scope:
   - Shared Bootstrap override selectors only.
*/

/* ---------- LIGHT THEME: badges / text-bg ---------- */
/* Most semantic colors are dark in light theme, so use light text. */
:root .text-bg-primary,
:root .text-bg-secondary,
:root .text-bg-success,
:root .text-bg-danger,
:root .text-bg-warning,
:root .text-bg-info,
:root .text-bg-dark,
[data-bs-theme="light"] .text-bg-primary,
[data-bs-theme="light"] .text-bg-secondary,
[data-bs-theme="light"] .text-bg-success,
[data-bs-theme="light"] .text-bg-danger,
[data-bs-theme="light"] .text-bg-warning,
[data-bs-theme="light"] .text-bg-info,
[data-bs-theme="light"] .text-bg-dark {
    color: var(--evf-badge-on-colored) !important;
}

:root .text-bg-light,
[data-bs-theme="light"] .text-bg-light {
    color: var(--evf-badge-on-neutral) !important;
}

:root .badge.bg-primary,
:root .badge.bg-secondary,
:root .badge.bg-success,
:root .badge.bg-danger,
:root .badge.bg-warning,
:root .badge.bg-info,
:root .badge.bg-dark,
[data-bs-theme="light"] .badge.bg-primary,
[data-bs-theme="light"] .badge.bg-secondary,
[data-bs-theme="light"] .badge.bg-success,
[data-bs-theme="light"] .badge.bg-danger,
[data-bs-theme="light"] .badge.bg-warning,
[data-bs-theme="light"] .badge.bg-info,
[data-bs-theme="light"] .badge.bg-dark {
    color: var(--evf-badge-on-colored) !important;
}

:root .badge.bg-light,
[data-bs-theme="light"] .badge.bg-light {
    color: var(--evf-badge-on-neutral) !important;
}

/* ---------- DARK THEME: badges / text-bg ---------- */
/* Most semantic colors are light in dark theme, so use dark text. */
[data-bs-theme="dark"] .text-bg-primary,
[data-bs-theme="dark"] .text-bg-secondary,
[data-bs-theme="dark"] .text-bg-success,
[data-bs-theme="dark"] .text-bg-danger,
[data-bs-theme="dark"] .text-bg-warning,
[data-bs-theme="dark"] .text-bg-info,
[data-bs-theme="dark"] .text-bg-light {
    color: var(--evf-badge-on-colored) !important;
}

[data-bs-theme="dark"] .text-bg-dark {
    color: var(--evf-badge-on-neutral) !important;
}

[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.bg-light {
    color: var(--evf-badge-on-colored) !important;
}

[data-bs-theme="dark"] .badge.bg-dark {
    color: var(--evf-badge-on-neutral) !important;
}

/* Add borders where a badge would otherwise vanish into the page background. */
:root .text-bg-light,
:root .badge.bg-light,
[data-bs-theme="light"] .text-bg-light,
[data-bs-theme="light"] .badge.bg-light {
    border: 1px solid var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .text-bg-dark,
[data-bs-theme="dark"] .badge.bg-dark {
    border: 1px solid var(--bs-border-color) !important;
}

/* Keep inline code readable inside colored surfaces. */
.badge code,
.text-bg-primary code,
.text-bg-secondary code,
.text-bg-success code,
.text-bg-danger code,
.text-bg-warning code,
.text-bg-info code,
.text-bg-light code,
.text-bg-dark code,
.list-group-item.active code {
    color: inherit !important;
}