/* ============================================================================
   True North — Redesign: Global Component Skin
   Applies the design tokens to Bootstrap/Metronic components. Also overrides
   the ~100 hard-coded Metronic primary (#009ef7) usages the variable remap
   can't reach. Appearance only — no markup/behavior changes.
   ========================================================================= */

/* ---- Base typography ---- */
body {
  font-family: var(--tn-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;
  color: var(--tn-text-2);
}
body { background-color: var(--tn-app-bg); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--tn-text); letter-spacing: -0.012em; }

/* ============================ BUTTONS ============================ */
.btn {
  font-weight: 500;
  border-radius: var(--tn-radius);
  letter-spacing: -0.006em;
}
.btn.btn-sm { border-radius: var(--tn-radius-sm); }
.btn-primary,
.btn.btn-primary {
  --bs-btn-bg: var(--tn-primary);
  --bs-btn-border-color: var(--tn-primary);
  --bs-btn-hover-bg: var(--tn-primary-hover);
  --bs-btn-hover-border-color: var(--tn-primary-hover);
  --bs-btn-active-bg: var(--tn-primary-active);
  --bs-btn-active-border-color: var(--tn-primary-active);
  --bs-btn-disabled-bg: var(--tn-primary);
  --bs-btn-disabled-border-color: var(--tn-primary);
  background-color: var(--tn-primary);
  border-color: var(--tn-primary);
  color: #fff;
  box-shadow: var(--tn-shadow-xs);
}
.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus { background-color: var(--tn-primary-hover); border-color: var(--tn-primary-hover); color: #fff; }
.btn-primary:active,
.btn.btn-primary:active { background-color: var(--tn-primary-active) !important; border-color: var(--tn-primary-active) !important; }

/* light / soft primary buttons */
.btn.btn-light-primary,
.btn-light-primary {
  color: var(--tn-primary);
  background-color: var(--tn-primary-tint);
  border-color: transparent;
}
.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus,
.btn.btn-light-primary:active,
.btn-check:checked + .btn.btn-light-primary {
  color: #fff; background-color: var(--tn-primary);
}
.btn.btn-active-primary:hover,
.btn.btn-active-light-primary:hover,
.btn.btn-active-primary.active,
.btn.btn-color-primary { color: var(--tn-primary); }

/* light / soft semantic buttons — AA text on the matching tint (Metronic's
   defaults, e.g. btn-light-danger #F1416C on pink, were ~3.4:1) */
.btn.btn-light-danger,  .btn-light-danger  { color: var(--tn-red);    background-color: var(--tn-red-bg);    border-color: transparent; }
.btn.btn-light-success, .btn-light-success { color: var(--tn-green);  background-color: var(--tn-green-bg);  border-color: transparent; }
.btn.btn-light-warning, .btn-light-warning { color: var(--tn-amber);  background-color: var(--tn-amber-bg);  border-color: transparent; }
.btn.btn-light-info,    .btn-light-info    { color: var(--tn-purple); background-color: var(--tn-purple-bg); border-color: transparent; }
.btn.btn-light-danger:hover,  .btn.btn-light-danger:focus  { color: #fff; background-color: var(--tn-red); }
.btn.btn-light-success:hover, .btn.btn-light-success:focus { color: #fff; background-color: var(--tn-green); }
.btn.btn-light-warning:hover, .btn.btn-light-warning:focus { color: #fff; background-color: var(--tn-amber); }
.btn.btn-light-info:hover,    .btn.btn-light-info:focus    { color: #fff; background-color: var(--tn-purple); }

/* success / danger solid buttons — Metronic's app theme sets .btn.btn-success to a
   bright #47BE7D (white = 2.35:1); match its 2-class specificity + !important so our
   deeper AA-safe greens/reds win in light. (dark handled in the DARK block below.) */
.btn.btn-success { background-color: var(--tn-green) !important; border-color: var(--tn-green) !important; color: #fff !important; }
.btn.btn-success:hover, .btn.btn-success:focus, .btn.btn-success:active { background-color: var(--tn-green-hover, #0A6B51) !important; border-color: var(--tn-green-hover, #0A6B51) !important; color: #fff !important; }
.btn.btn-danger { background-color: var(--tn-red) !important; border-color: var(--tn-red) !important; color: #fff !important; }
.btn.btn-danger:hover, .btn.btn-danger:focus, .btn.btn-danger:active { background-color: #A82013 !important; border-color: #A82013 !important; color: #fff !important; }
/* .btn.btn-light — beat Metronic's own .btn.btn-light (its default #7E8299 text = 3.55:1) */
.btn.btn-light   { background-color: var(--tn-surface-2); border-color: var(--tn-border); color: var(--tn-text-3); }
.btn.btn-light:hover { background-color: var(--tn-surface-3); border-color: var(--tn-border-2); color: var(--tn-text-2); }
.btn.btn-secondary { background-color: var(--tn-surface-2); border-color: var(--tn-border); color: var(--tn-text-3); }

/* icon buttons in white header keep contrast */
.btn.btn-icon { border-radius: var(--tn-radius); }

/* ============================ LINKS / TEXT ============================ */
a { color: var(--tn-primary); }
a:hover { color: var(--tn-primary-hover); }
.text-primary { color: var(--tn-primary) !important; }
.text-hover-primary:hover,
.text-hover-primary:hover * { color: var(--tn-primary) !important; }
.link-primary { color: var(--tn-primary) !important; }
.link-primary:hover { color: var(--tn-primary-hover) !important; }
.bg-primary { background-color: var(--tn-primary) !important; }
/* semantic .bg-* (status/priority bullet dots) — theme-aware so a dot matches its
   .text-* label in BOTH themes (Metronic's defaults use --kt-* and drift otherwise) */
.bg-danger  { background-color: var(--tn-red)    !important; }
.bg-success { background-color: var(--tn-green)  !important; }
.bg-warning { background-color: var(--tn-amber)  !important; }
.bg-info    { background-color: var(--tn-purple) !important; }
.bg-light-primary { background-color: var(--tn-primary-tint) !important; }
.border-primary { border-color: var(--tn-primary) !important; }
.text-muted { color: var(--tn-muted) !important; }
/* Metronic's .text-* utilities hard-code non-AA colors (#F1416C/#50CD89…) that the
   --bs-* remap can't reach — force the WCAG-AA semantic tokens (theme-aware). */
.text-danger  { color: var(--tn-red)    !important; }
.text-success { color: var(--tn-green)  !important; }
.text-warning { color: var(--tn-amber)  !important; }
.text-info    { color: var(--tn-purple) !important; }
.text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700 { color: var(--tn-muted) !important; }

/* ============================ CARDS ============================ */
.card {
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius-lg);
  background-color: var(--tn-surface);
  box-shadow: var(--tn-shadow-xs);
}
.card.card-flush,
.card.shadow-none { box-shadow: var(--tn-shadow-xs); }
.card > .card-header,
.card .card-header {
  border-bottom: 1px solid var(--tn-border);
  min-height: 60px;
}
.card .card-header .card-title,
.card .card-title .fw-bold,
.card .card-title { color: var(--tn-text); font-weight: 600; }
.card .card-footer { border-top: 1px solid var(--tn-border); }
.separator { border-bottom: 1px solid var(--tn-border); }
.separator.separator-dashed { border-bottom-style: dashed; border-bottom-color: var(--tn-border); }

/* ============================ FORMS ============================ */
.form-label,
label.form-label { color: var(--tn-text-2); font-weight: 600; font-size: 13px; margin-bottom: 6px; letter-spacing: -.003em; }
.form-label .required::after,
.required::after { color: var(--tn-red); }
.form-control,
.form-select {
  border-radius: var(--tn-radius);
  border-color: var(--tn-input-border);
  color: var(--tn-text-2);
  font-size: 13px;                 /* was 0.8125rem = 10.56px at Metronic's 13px root — too small */
}
/* readable placeholder — Metronic's default (#A1A5B7 = 2.3:1) needs a higher-specificity override */
.form-control::placeholder,
.form-control.form-control-solid::placeholder,
.form-select-solid::placeholder,
textarea.form-control::placeholder { color: var(--tn-muted) !important; opacity: 1 !important; }
.form-control-solid,
.form-select-solid,
.form-control.form-control-solid {
  background-color: var(--tn-surface-2);
  border: 1px solid var(--tn-input-border);
  color: var(--tn-text-2);
}
.form-control-solid:focus,
.form-select-solid:focus,
.form-control:focus,
.form-select:focus {
  background-color: var(--tn-surface);
  border-color: var(--tn-primary);
  /* !important: Metronic's base `.form-control { box-shadow: none !important }` would
     otherwise beat this un-flagged focus ring, so standalone inputs showed a bare border
     and no ring (previously masked only on keyboard focus by the :focus-visible rule).
     This is the single STANDARD ring — same 3px as select2 :focus and .input-group:focus-within. */
  box-shadow: 0 0 0 3px var(--tn-focus-ring) !important;
  color: var(--tn-text-2);
}
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid { border-color: var(--tn-red); }
/* !important so the red invalid ring still beats the now-!important valid ring above */
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(217, 45, 32, .18) !important; }
.invalid-feedback { color: var(--tn-red); font-size: 0.78125rem; }
.form-check-input:checked { background-color: var(--tn-primary); border-color: var(--tn-primary); }
.form-check-input:focus { border-color: var(--tn-primary); box-shadow: 0 0 0 3px var(--tn-focus-ring); }
.form-switch .form-check-input:checked { background-color: var(--tn-primary); }

/* ---- select2 skin (Metronic bootstrap5 theme) ---- */
/* single-select placeholder is a span; MULTI-select placeholder is the inline search
   input's ::placeholder — style BOTH to --tn-muted so they match (Metronic's default
   #A1A5B7 / dark #565674 is faint + inconsistent with single-selects). */
.select2-container--bootstrap5 .select2-selection__placeholder { color: var(--tn-muted) !important; }
.select2-container--bootstrap5 .select2-search__field::placeholder { color: var(--tn-muted) !important; opacity: 1 !important; }
.select2-container--bootstrap5 .select2-selection {
  border-radius: var(--tn-radius) !important;
  border-color: var(--tn-input-border) !important;
  background-color: var(--tn-surface-2) !important;
  min-height: calc(1.5em + 1.1rem + 2px);
}
.select2-container--bootstrap5 .select2-selection__rendered,
.select2-container--bootstrap5 .select2-search__field,
.select2-container--bootstrap5 .select2-results__option { font-size: 13px; }
/* the body-appended select2 dropdown must sit ABOVE the filter side-drawer (z 1065)
   and modals — default is 1051, which hid it behind the drawer */
.select2-container--open { z-index: 1075 !important; }
.select2-container--bootstrap5.select2-container--focus .select2-selection,
.select2-container--bootstrap5.select2-container--open .select2-selection {
  border-color: var(--tn-primary) !important;
  box-shadow: 0 0 0 3px var(--tn-focus-ring) !important;
}
/* the select2 selection <span> carries tabindex, so on keyboard/page-load autofocus it also
   matched the global [tabindex]:focus-visible rule → a 2px offset outline stacked on the
   border+ring above (two borders on autofocus; a mouse click skipped :focus-visible so it
   showed one — that inconsistency is exactly what looked "off"). Kill the outline and pin the
   single STANDARD border+ring so every focus path (autofocus, keyboard, click) looks identical. */
.select2-container--bootstrap5 .select2-selection:focus,
.select2-container--bootstrap5 .select2-selection:focus-visible {
  outline: none !important;
  border-color: var(--tn-primary) !important;
  box-shadow: 0 0 0 3px var(--tn-focus-ring) !important;
}
/* The INLINE search <input> inside a MULTI-select must NOT get its own focus ring:
   the container already shows focus, so a ring here renders as a 2nd inner blue border
   (pill). It otherwise inherits the global :focus-visible ring. Scope to the INLINE
   search ONLY — the dropdown search box (below) still needs its own visible border. */
.select2-container--bootstrap5 .select2-search--inline .select2-search__field,
.select2-container--bootstrap5 .select2-search--inline .select2-search__field:focus,
.select2-container--bootstrap5 .select2-search--inline .select2-search__field:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
/* The DROPDOWN search box (the search input at the top of a single-select popup) must be
   a clearly visible bordered input in both themes. */
.select2-container--bootstrap5 .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--tn-input-border) !important;
  border-radius: var(--tn-radius-sm) !important;
  background-color: var(--tn-surface) !important;
  color: var(--tn-text-2) !important;
  padding: 6px 10px !important;
  outline: none !important;
}
.select2-container--bootstrap5 .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--tn-primary) !important;
  box-shadow: 0 0 0 3px var(--tn-focus-ring) !important;
}
.select2-container--bootstrap5 .select2-dropdown {
  border-color: var(--tn-border) !important;
  border-radius: var(--tn-radius) !important;
  box-shadow: var(--tn-shadow-md);
}
.select2-container--bootstrap5 .select2-results__option--highlighted,
.select2-container--bootstrap5 .select2-results__option[aria-selected="true"] {
  background-color: var(--tn-primary-tint) !important;
  color: var(--tn-primary) !important;
}
.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice {
  background-color: var(--tn-primary-tint) !important;
  border-color: transparent !important;
  color: var(--tn-primary) !important;
  border-radius: var(--tn-radius-sm) !important;
}

/* ============================ TABLES ============================ */
.table {
  --bs-table-hover-bg: var(--tn-surface-2);
  /* mockup uses clean white rows — neutralize Metronic/DataTables zebra */
  --bs-table-striped-bg: transparent;
  --bs-table-striped-color: var(--tn-text-2);
  --bs-table-accent-bg: transparent;
  color: var(--tn-text-3);
}
.table > tbody > tr { background-color: transparent; }
.table > tbody > tr > td { padding-top: 0.8rem; padding-bottom: 0.8rem; }
.table > thead th,
.table.gy-5 thead th,
.table thead tr th {
  color: var(--tn-muted);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--tn-border) !important;
}
.table tbody td { border-bottom: 1px solid var(--tn-border); color: var(--tn-text-2); vertical-align: middle; }
.table tbody tr:hover td { background-color: var(--tn-surface-2); }
.table.table-row-dashed tbody tr { border-bottom-style: dashed; border-color: var(--tn-border); }

/* DataTables wrapper controls */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.page-link.active, .active > .page-link, .page-item.active > .page-link {
  background-color: var(--tn-primary); border-color: var(--tn-primary); color: #fff;
}
.page-link { color: var(--tn-text-3); border-radius: var(--tn-radius-sm); }
/* hover a NON-active, enabled page → subtle tint */
.page-item:not(.active):not(.disabled) > .page-link:hover,
.paginate_button:not(.current):not(.disabled) > .page-link:hover {
  color: var(--tn-primary); background-color: var(--tn-primary-tint);
}
/* hover the ACTIVE/current page → stays solid (just a touch darker), never reverts to tint */
.page-item.active > .page-link:hover, .active > .page-link:hover,
.paginate_button.current:hover, .paginate_button.current > .page-link:hover {
  background-color: var(--tn-primary-hover) !important;
  border-color: var(--tn-primary-hover) !important;
  color: #fff !important;
}
.page-item.disabled .page-link,
.dataTables_paginate .paginate_button.disabled { color: var(--tn-muted) !important; background: transparent !important; }
.page-item.disabled .page-link:hover { background: transparent !important; color: var(--tn-muted) !important; }

/* ============================ BADGES / PILLS ============================ */
.badge {
  border-radius: var(--tn-radius-pill);
  font-weight: 500;
  font-size: 0.6875rem;
  padding: 0.35em 0.7em;
  letter-spacing: 0;
}
.badge.badge-primary,        .badge-primary        { color: var(--tn-blue);   background-color: var(--tn-blue-bg); }
.badge.badge-light-primary,  .badge-light-primary  { color: var(--tn-blue);   background-color: var(--tn-blue-bg); }
.badge.badge-success,        .badge-success        { color: var(--tn-green);  background-color: var(--tn-green-bg); }
.badge.badge-light-success,  .badge-light-success  { color: var(--tn-green);  background-color: var(--tn-green-bg); }
.badge.badge-danger,         .badge-danger         { color: var(--tn-red);    background-color: var(--tn-red-bg); }
.badge.badge-light-danger,   .badge-light-danger   { color: var(--tn-red);    background-color: var(--tn-red-bg); }
.badge.badge-warning,        .badge-warning        { color: var(--tn-amber);  background-color: var(--tn-amber-bg); }
.badge.badge-light-warning,  .badge-light-warning  { color: var(--tn-amber);  background-color: var(--tn-amber-bg); }
.badge.badge-info,           .badge-info           { color: var(--tn-purple); background-color: var(--tn-purple-bg); }
.badge.badge-light-info,     .badge-light-info     { color: var(--tn-purple); background-color: var(--tn-purple-bg); }
.badge.badge-secondary,      .badge-light          { color: var(--tn-text-3); background-color: var(--tn-surface-3); }

/* solid variants keep white text */
.badge.badge-circle, .badge.badge-square { border-radius: var(--tn-radius-sm); }

/* Reviewer-type chips (inline-defined in project / my-project / report views).
   The pale blue #60b2eb / purple #9283d9 gave white text only 2.3:1 / 3.3:1 —
   deepen the fill so white text clears WCAG AA (now ~4.9:1 / 5.2:1). */
.badge.badge-light-first,  .badge-light-first  { background-color: #1E73B8 !important; color: #fff !important; }
.badge.badge-light-second, .badge-light-second { background-color: #7458CE !important; color: #fff !important; }

/* ============================ MODALS ============================ */
.modal-content { border: 1px solid var(--tn-border); border-radius: var(--tn-radius-lg); box-shadow: var(--tn-shadow-md); }
.modal-header { border-bottom: 1px solid var(--tn-border); }
.modal-footer { border-top: 1px solid var(--tn-border); }

/* ============================ STEPPER (project wizard) ============================ */
.stepper.stepper-pills .stepper-item.current .stepper-icon {
  background-color: var(--tn-primary); border-color: var(--tn-primary);
}
.stepper.stepper-pills .stepper-item.completed .stepper-icon {
  background-color: var(--tn-green-bg); color: var(--tn-green);
}
.stepper.stepper-pills .stepper-item.current .stepper-title { color: var(--tn-text); }

/* ============================ MISC ============================ */
.symbol > .symbol-label { border-radius: var(--tn-radius); background-color: var(--tn-surface-3); color: var(--tn-text-3); }
.symbol.symbol-circle > .symbol-label,
.symbol.symbol-circle > img { border-radius: var(--tn-radius-pill); }
.spinner-border.text-primary, .text-primary .spinner-border { color: var(--tn-primary) !important; }
.progress-bar { background-color: var(--tn-primary); }
.menu-sub-dropdown, .dropdown-menu {
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius);
  box-shadow: var(--tn-shadow-md);
}
/* Text selection — force BOTH colours so any selected text is WCAG-AA legible
   (was a pale tint that left light-coloured text low-contrast when highlighted). */
::selection      { background: var(--tn-primary); color: #fff; }
::-moz-selection { background: var(--tn-primary); color: #fff; }
/* dark mode: primary is lighter (#3B7BE8 → white only 4.05:1), so use a darker fill */
[data-theme="dark"] ::selection      { background: #2F6BD8; color: #fff; }
[data-theme="dark"] ::-moz-selection { background: #2F6BD8; color: #fff; }

/* ============================ FOCUS VISIBLE (WCAG 2.4.7) ============================
   A clear keyboard focus indicator on every interactive element. :focus-visible only
   fires for keyboard (not mouse) focus, so it never disturbs pointer users.

   NOTE: form FIELDS (.form-control/.form-select/.form-check-input) are intentionally NOT
   in this list. They already carry the app-wide STANDARD focus indicator via their own
   :focus rule above — a primary border + 0 0 0 3px ring (identical to select2 :focus and
   .input-group:focus-within). Adding the 2px offset outline + 4px ring here on top of that
   rendered as TWO concentric borders, and only on keyboard/autofocus (mouse skips
   :focus-visible) — so the same field looked different on page-load autofocus vs a click.
   Keeping fields out of this rule makes ONE border+ring the single indicator everywhere. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.page-link:focus-visible,
.menu-link:focus-visible,
[data-kt-menu-trigger]:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--tn-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--tn-focus-ring) !important;
  border-radius: var(--tn-radius-sm);
}
/* select2 focus is shown by the border-colour change + box-shadow ring defined in the
   select2 skin above (identical to .form-control:focus). Do NOT add a solid outline on
   top — an outline plus the box-shadow ring renders as two concentric blue borders. */

/* ============================ DARK-MODE CONTRAST DECOUPLING ============================
   In dark mode the primary (#3B7BE8) is legible as TEXT on the near-black surface but
   too light under WHITE (only ~4.05:1). Darken the primary *fills* (buttons, current
   page) so white labels clear WCAG AA, without touching primary text/links. */
[data-theme="dark"] .btn.btn-primary,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .page-link.active,
[data-theme="dark"] .active > .page-link {
  background-color: #2F6BD8 !important;
  border-color: #2F6BD8 !important;
  color: #fff !important;
}
/* Same problem for the other SOLID semantic buttons: their dark tokens (--tn-green
   #34C79B, --tn-red #FF6F63, --tn-amber #F0A73C, --tn-purple) are tuned as TEXT/badge
   colours (light-on-dark) and fail badly under WHITE as a button fill (e.g. Save was
   2.15:1). Use deeper fills for white-text AA; amber takes dark text per convention. */
[data-theme="dark"] .btn.btn-success, [data-theme="dark"] .btn-success {
  background-color: #0C7D5F !important; border-color: #0C7D5F !important; color: #fff !important;
}
[data-theme="dark"] .btn.btn-success:hover, [data-theme="dark"] .btn.btn-success:focus {
  background-color: #0A6B51 !important; border-color: #0A6B51 !important; color: #fff !important;
}
[data-theme="dark"] .btn.btn-danger, [data-theme="dark"] .btn-danger {
  background-color: #C42B1D !important; border-color: #C42B1D !important; color: #fff !important;
}
[data-theme="dark"] .btn.btn-danger:hover, [data-theme="dark"] .btn.btn-danger:focus {
  background-color: #A82013 !important; border-color: #A82013 !important; color: #fff !important;
}
[data-theme="dark"] .btn.btn-info, [data-theme="dark"] .btn-info {
  background-color: #6941C6 !important; border-color: #6941C6 !important; color: #fff !important;
}
[data-theme="dark"] .btn.btn-info:hover, [data-theme="dark"] .btn.btn-info:focus {
  background-color: #5A37AC !important; border-color: #5A37AC !important; color: #fff !important;
}
[data-theme="dark"] .btn.btn-warning, [data-theme="dark"] .btn-warning {
  background-color: #E8963A !important; border-color: #E8963A !important; color: #1E242E !important;
}
[data-theme="dark"] .btn.btn-warning:hover, [data-theme="dark"] .btn.btn-warning:focus {
  background-color: #D9862B !important; border-color: #D9862B !important; color: #1E242E !important;
}
/* keep icons/spinner glyphs legible on these solid fills */
[data-theme="dark"] .btn.btn-success .svg-icon, [data-theme="dark"] .btn.btn-success > i,
[data-theme="dark"] .btn.btn-danger .svg-icon,  [data-theme="dark"] .btn.btn-danger > i,
[data-theme="dark"] .btn.btn-info .svg-icon,    [data-theme="dark"] .btn.btn-info > i { color: #fff !important; }
[data-theme="dark"] .btn.btn-warning .svg-icon, [data-theme="dark"] .btn.btn-warning > i { color: #1E242E !important; }
/* Conversely, primary TEXT sitting on the primary *tint* (light-primary buttons,
   select2 highlighted/selected options) needs the lighter --tn-blue to clear AA. */
[data-theme="dark"] .btn.btn-light-primary,
[data-theme="dark"] .btn-light-primary,
[data-theme="dark"] .select2-container--bootstrap5 .select2-results__option--highlighted,
[data-theme="dark"] .select2-container--bootstrap5 .select2-results__option[aria-selected="true"],
[data-theme="dark"] .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice {
  color: var(--tn-blue) !important;
}
[data-theme="dark"] .btn.btn-light-primary:hover,
[data-theme="dark"] .btn.btn-light-primary:focus {
  background-color: #2F6BD8 !important; color: #fff !important;
}