/* =====================================================
   BADGE COLOR DICTIONARY
   Depends on the CSS variables defined in colors-vars.css
   ===================================================== */

/* =====================================================
   BADGES
   ===================================================== */

/* Links inside any badge (_Badge.cshtml's LinkPage/Href) match the badge's own
   text color instead of the default link blue. */
.badge a {
    color: inherit !important;
}

.badge.text-bg-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-white-ish) !important;
}

.badge.text-bg-secondary {
    background-color: var(--color-secondary) !important;
    color: var(--color-primary) !important;
}

.badge.text-bg-success {
    background-color: var(--color-success) !important;
    color: var(--color-white-ish) !important;
}

.badge.text-bg-warning {
    background-color: var(--color-warning) !important;
    /* Deep-blue text on the vibrant yellow bg -- white-on-warning is 2.02:1 (AA fail).
       See #299. */
    color: var(--color-primary) !important;
}

.badge.text-bg-danger {
    background-color: var(--color-danger) !important;
    color: var(--color-white-ish) !important;
}

.badge.text-bg-info {
    background-color: var(--color-info) !important;
    color: var(--color-white-ish) !important;
}

.badge.text-bg-light {
    background-color: var(--color-light) !important;
    color: var(--color-primary) !important;
}

.badge.text-bg-dark {
    background-color: var(--color-dark) !important;
    color: var(--color-white-ish) !important;
}

/* =====================================================
   OUTLINE BADGES
   ===================================================== */

.badge.badge-outline.bg-primary {
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-secondary {
    color: var(--color-secondary) !important;
    border: 1px solid var(--color-secondary) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-success {
    color: var(--color-success) !important;
    border: 1px solid var(--color-success) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-warning {
    color: var(--color-warning) !important;
    border: 1px solid var(--color-warning) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-danger {
    color: var(--color-danger) !important;
    border: 1px solid var(--color-danger) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-info {
    color: var(--color-info) !important;
    border: 1px solid var(--color-info) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-light {
    color: var(--color-light) !important;
    border: 1px solid var(--color-light) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-dark {
    color: var(--color-dark) !important;
    border: 1px solid var(--color-dark) !important;
    background-color: var(--color-white-ish) !important;
}

/* =====================================================
   CUSTOM BADGE COLOR VARIABLES

   Contrast-checked palette from #202's audit (real WCAG relative-luminance
   calculation, not eyeballed -- see the issue for the full before/after
   swatch table). Every text/background pair below clears 4.5:1 (WCAG AA
   for normal text) in its solid (text-bg-*) form.

   Engagement status: Proposed/DXR InProgress keep the existing gold
   background but switch text to --color-primary (was --color-dark,
   2.41:1 FAIL / 2.02:1 FAIL -> 7.40:1). Approved gets its own darker blue
   + white text (was --color-info + --color-dark, 1.41:1 FAIL -> 7.01:1),
   distinct from Active's green. Active/DXR Completed get a darker green +
   white text (was --color-success, 3.41:1 FAIL -> 5.23:1). Archived/
   Canceled/DXR Archived are unchanged -- already passing.

   Org type: previously all five values shared the flat bg-secondary/
   dark-text treatment with zero differentiation. Now: Prospect = light
   sky blue, Client = the same darkened green used for
   EngagementStatus.Active/DXR.Completed (same hue, different badge column,
   by design), Partner = purple, Vendor = burnt orange, Other = unchanged
   gray -- chosen by common-English association with each word.

   NOTE: the badge-outline variant reuses these same hex values as text+
   border color against a white background rather than as a background
   color -- for the lighter hues (org-type-prospect's sky blue in
   particular) that pairing does not itself clear 4.5:1 against white.
   No enum badge in the app currently renders in Outline fill (grep for
   BadgeFill.Outline confirms only one non-enum "info" badge uses it), so
   this doesn't affect anything live today -- flagging for whoever adds
   the first outline-rendered enum badge, since the hex values themselves
   are final per #202, not a starting point for a separate outline-only set.
   ===================================================== */

:root,
[data-bs-theme=light] {
    --color-badge-approved-blue: #2c5d82;
    --color-badge-approved-blue-rgb: 44, 93, 130;
    --color-badge-green-dark: #2f7a4d;
    --color-badge-green-dark-rgb: 47, 122, 77;
    --color-badge-purple: #6b4c9a;
    --color-badge-purple-rgb: 107, 76, 154;
    --color-badge-burnt-orange: #b35c1e;
    --color-badge-burnt-orange-rgb: 179, 92, 30;
    --color-badge-sky-blue: #8ec4e0;
    --color-badge-sky-blue-rgb: 142, 196, 224;

    --color-eng-status-proposed: var(--color-warning);
    --color-eng-status-proposed-rgb: var(--color-warning-rgb);
    --color-eng-status-approved: var(--color-badge-approved-blue);
    --color-eng-status-approved-rgb: var(--color-badge-approved-blue-rgb);
    --color-eng-status-active: var(--color-badge-green-dark);
    --color-eng-status-active-rgb: var(--color-badge-green-dark-rgb);
    --color-eng-status-archived: var(--color-secondary);
    --color-eng-status-archived-rgb: var(--color-secondary-rgb);
    --color-eng-status-canceled: var(--color-danger);
    --color-eng-status-canceled-rgb: var(--color-danger-rgb);

    --color-dxr-status-in-progress: var(--color-warning);
    --color-dxr-status-in-progress-rgb: var(--color-warning-rgb);
    --color-dxr-status-completed: var(--color-badge-green-dark);
    --color-dxr-status-completed-rgb: var(--color-badge-green-dark-rgb);
    --color-dxr-status-archived: var(--color-secondary);
    --color-dxr-status-archived-rgb: var(--color-secondary-rgb);

    --color-org-type-prospect: var(--color-badge-sky-blue);
    --color-org-type-prospect-rgb: var(--color-badge-sky-blue-rgb);
    --color-org-type-client: var(--color-badge-green-dark);
    --color-org-type-client-rgb: var(--color-badge-green-dark-rgb);
    --color-org-type-partner: var(--color-badge-purple);
    --color-org-type-partner-rgb: var(--color-badge-purple-rgb);
    --color-org-type-vendor: var(--color-badge-burnt-orange);
    --color-org-type-vendor-rgb: var(--color-badge-burnt-orange-rgb);
    --color-org-type-other: var(--color-secondary);
    --color-org-type-other-rgb: var(--color-secondary-rgb);

    --color-tag: var(--color-secondary);
    --color-tag-rgb: var(--color-secondary-rgb);

    /* #311: reuses the same gold/green pairing as eng-status-proposed/active -- "not logged
       in yet" reads as an in-progress/attention state, "logged in" as the settled/good one. */
    --color-user-status-pending: var(--color-warning);
    --color-user-status-pending-rgb: var(--color-warning-rgb);
    --color-user-status-active: var(--color-badge-green-dark);
    --color-user-status-active-rgb: var(--color-badge-green-dark-rgb);

    /* Tabler's own named orange/yellow (not this app's danger/warning brand colors) --
       used only for the Dev Mode / QA Mode nav badges. */
    --color-tabler-orange: #f76707;
    --color-tabler-orange-rgb: 247, 103, 7;
    --color-tabler-yellow: #f59f00;
    --color-tabler-yellow-rgb: 245, 159, 0;
}

/* =====================================================
   ENGAGEMENT STATUS BADGES
   ===================================================== */

.badge.text-bg-eng-status-proposed {
    background-color: var(--color-eng-status-proposed) !important;
    color: var(--color-primary) !important;
}

.badge.badge-outline.bg-eng-status-proposed {
    color: var(--color-eng-status-proposed) !important;
    border: 1px solid var(--color-eng-status-proposed) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.text-bg-eng-status-approved {
    background-color: var(--color-eng-status-approved) !important;
    color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-eng-status-approved {
    color: var(--color-eng-status-approved) !important;
    border: 1px solid var(--color-eng-status-approved) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.text-bg-eng-status-active {
    background-color: var(--color-eng-status-active) !important;
    color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-eng-status-active {
    color: var(--color-eng-status-active) !important;
    border: 1px solid var(--color-eng-status-active) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.text-bg-eng-status-archived {
    background-color: var(--color-eng-status-archived) !important;
    color: var(--color-primary) !important;
}

.badge.badge-outline.bg-eng-status-archived {
    color: var(--color-eng-status-archived) !important;
    border: 1px solid var(--color-eng-status-archived) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.text-bg-eng-status-canceled {
    background-color: var(--color-eng-status-canceled) !important;
    color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-eng-status-canceled {
    color: var(--color-eng-status-canceled) !important;
    border: 1px solid var(--color-eng-status-canceled) !important;
    background-color: var(--color-white-ish) !important;
}

/* =====================================================
   DXR (DIAGNOSTIC RUN) STATUS BADGES
   ===================================================== */

.badge.text-bg-dxr-status-in-progress {
    background-color: var(--color-dxr-status-in-progress) !important;
    color: var(--color-primary) !important;
}

.badge.badge-outline.bg-dxr-status-in-progress {
    color: var(--color-dxr-status-in-progress) !important;
    border: 1px solid var(--color-dxr-status-in-progress) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.text-bg-dxr-status-completed {
    background-color: var(--color-dxr-status-completed) !important;
    color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-dxr-status-completed {
    color: var(--color-dxr-status-completed) !important;
    border: 1px solid var(--color-dxr-status-completed) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.text-bg-dxr-status-archived {
    background-color: var(--color-dxr-status-archived) !important;
    color: var(--color-primary) !important;
}

.badge.badge-outline.bg-dxr-status-archived {
    color: var(--color-dxr-status-archived) !important;
    border: 1px solid var(--color-dxr-status-archived) !important;
    background-color: var(--color-white-ish) !important;
}

/* =====================================================
   ORG TYPE BADGES
   ===================================================== */

.badge.text-bg-org-type-prospect {
    background-color: var(--color-org-type-prospect) !important;
    color: var(--color-primary) !important;
}

.badge.badge-outline.bg-org-type-prospect {
    color: var(--color-org-type-prospect) !important;
    border: 1px solid var(--color-org-type-prospect) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.text-bg-org-type-client {
    background-color: var(--color-org-type-client) !important;
    color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-org-type-client {
    color: var(--color-org-type-client) !important;
    border: 1px solid var(--color-org-type-client) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.text-bg-org-type-partner {
    background-color: var(--color-org-type-partner) !important;
    color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-org-type-partner {
    color: var(--color-org-type-partner) !important;
    border: 1px solid var(--color-org-type-partner) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.text-bg-org-type-vendor {
    background-color: var(--color-org-type-vendor) !important;
    color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-org-type-vendor {
    color: var(--color-org-type-vendor) !important;
    border: 1px solid var(--color-org-type-vendor) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.text-bg-org-type-other {
    background-color: var(--color-org-type-other) !important;
    color: var(--color-primary) !important;
}

.badge.badge-outline.bg-org-type-other {
    color: var(--color-org-type-other) !important;
    border: 1px solid var(--color-org-type-other) !important;
    background-color: var(--color-white-ish) !important;
}

/* =====================================================
   USER STATUS BADGES (#311)
   ===================================================== */

.badge.text-bg-user-status-pending {
    background-color: var(--color-user-status-pending) !important;
    color: var(--color-primary) !important;
}

.badge.badge-outline.bg-user-status-pending {
    color: var(--color-user-status-pending) !important;
    border: 1px solid var(--color-user-status-pending) !important;
    background-color: var(--color-white-ish) !important;
}

.badge.text-bg-user-status-active {
    background-color: var(--color-user-status-active) !important;
    color: var(--color-white-ish) !important;
}

.badge.badge-outline.bg-user-status-active {
    color: var(--color-user-status-active) !important;
    border: 1px solid var(--color-user-status-active) !important;
    background-color: var(--color-white-ish) !important;
}

/* =====================================================
   BADGE ACTIONS (e.g. remove button)
   ===================================================== */

.badge .btn-close {
    font-size: 0.5rem;
    vertical-align: middle;
}

/* =====================================================
   TAG BADGES
   ===================================================== */

.badge.text-bg-tag {
    background-color: var(--color-tag) !important;
    color: var(--color-primary) !important;
}

.badge.text-bg-tag .btn-close {
    background-image: none;
    -webkit-mask-image: var(--tblr-btn-close-bg);
    mask-image: var(--tblr-btn-close-bg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 1em auto;
    mask-size: 1em auto;
    background-color: var(--color-primary) !important;
    opacity: 1 !important;
}

.badge.badge-outline.bg-tag {
    color: var(--color-tag) !important;
    border: 1px solid var(--color-tag) !important;
    background-color: var(--color-white-ish) !important;
}

/* =====================================================
   NAV MODE BADGES (Dev Mode / QA Mode)
   ===================================================== */

.badge.text-bg-tabler-orange {
    background-color: var(--color-tabler-orange) !important;
    color: var(--color-white-ish) !important;
}

.badge.text-bg-tabler-yellow {
    background-color: var(--color-tabler-yellow) !important;
    color: var(--color-white-ish) !important;
}