/* bootstrap-evf-badge.css */

/* ==========================================================
   EVF: Fix badge/label contrast for Bootstrap .text-bg-* and .badge.bg-*
   Put this AFTER bootstrap.css AND after your EVF token overrides.
   ========================================================== */

/* Theme "on-color" tokens (text color to use on colored surfaces) */
:root,
[data-bs-theme="light"] {
    --evf-on-colored: var(--evf-creammap); /* text on dark-ish colored backgrounds */
    --evf-on-neutral: var(--evf-bluecoat-base); /* text on light backgrounds */
}

[data-bs-theme="dark"] {
    --evf-on-colored: var(--evf-tarink); /* text on light-ish colored backgrounds */
    --evf-on-neutral: var(--evf-icesail-base); /* text on dark backgrounds */
}

/* ---------- LIGHT THEME: badges / text-bg ---------- */
/* Most of your semantic colors are dark in light theme => 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-on-colored) !important;
}

/* Light background labels => use dark text */
:root .text-bg-light,
[data-bs-theme="light"] .text-bg-light {
    color: var(--evf-on-neutral) !important;
}

/* If you use <span class="badge bg-warning">…</span> (without text-bg-*) */
: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-on-colored) !important;
}

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

/* ---------- DARK THEME: badges / text-bg ---------- */
/* Your semantic colors are light-ish in dark theme => 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-on-colored) !important; /* tarink */
}

/* Dark background labels => use light text */
[data-bs-theme="dark"] .text-bg-dark {
    color: var(--evf-on-neutral) !important; /* icesail-base */
}

/* Same for <span class="badge bg-…"> usage */
[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-on-colored) !important; /* tarink */
}

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

/* ==========================================================
   EVF: Add borders where badges blend into the page background
   Put this AFTER the contrast fix block.
   ========================================================== */

/* Light theme: light badge on light background needs a border */
: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;
}

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