/* ============================================================
 * VNUHCM K12 — Brand bridge
 * Maps vendor "primary" (Bootstrap #337ab7, app.css #299be8,
 * details/app.css teal) onto the brand indigo token.
 * MUST load LAST — details/app.css sets teal with !important,
 * so these win on source order + !important.
 * Depends on tokens.css (var(--vnu-*)).
 * ============================================================ */

/* Solid primary buttons → indigo, white text (7.1:1) */
.btn-primary,
.open > .btn-primary.dropdown-toggle {
  background-color: var(--vnu-primary) !important;
  border-color: var(--vnu-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not([disabled]):not(.disabled):hover,
.btn-primary:not([disabled]):not(.disabled):active {
  background-color: var(--vnu-primary-dark) !important;
  border-color: var(--vnu-primary-dark) !important;
  color: #fff !important;
}

/* Surfaces + text + hover states */
.bg-primary { background-color: var(--vnu-primary) !important; }
.border-primary { border-color: var(--vnu-primary) !important; }
.text-primary { color: var(--vnu-primary) !important; }        /* was teal ≈ 2:1 on white — now 7.1:1 */
a.text-primary:hover,
a.text-primary:focus,
.hover-primary:hover,
.hover-primary:focus { color: var(--vnu-primary-dark) !important; }

/* Outline / pure / flat primary variants (detail pages) */
.btn-outline.btn-primary,
.btn-primary-outline,
.btn-pure.btn-primary,
.btn-flat.btn-primary {
  color: var(--vnu-primary) !important;
  border-color: var(--vnu-primary) !important;
  background-color: transparent !important;
}
.btn-outline.btn-primary:hover,
.btn-primary-outline:hover {
  background-color: var(--vnu-primary) !important;
  color: #fff !important;
}

/* Footer: retire off-brand red stripe (#cb2027) → brand indigo accent */
.red-top-sm { border-top-color: var(--vnu-primary) !important; }
.red-top-xs { border-top-color: var(--vnu-primary) !important; }

/* Ghost collapse toggles ("Xem hồ sơ", "Xem tất cả buổi") → brand, not danger red */
.btn-pure.btn-danger { color: var(--vnu-primary) !important; }
.btn-pure.btn-danger:hover,
.btn-pure.btn-danger:focus { color: var(--vnu-primary-dark) !important; }

/* a11y: detail-header dropdown toggles are now <button> (keyboard-operable).
   Neutralize native button chrome so they render identical to the old <span>. */
button.topbar-btn {
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* User-initial avatar badge → brand indigo, white text 7.1:1 (was white-on-orange 2.9:1).
   Global so detail pages get it too, not just the theme layout. */
.avatar.bg-danger {
  background-color: var(--vnu-primary) !important;
  color: #fff !important;
}

/* Footer muted text on dark: 7.9:1 (Bootstrap .text-muted #6c757d = 2.8:1, uses !important) */
.bg-black .text-muted { color: var(--vnu-on-dark-muted) !important; }

/* a11y: restore a visible keyboard focus ring — vendor CSS zeroes outlines.
   :focus-visible → keyboard only, no ring on mouse click. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
[data-toggle="dropdown"]:focus-visible,
.topbar-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--vnu-primary) !important;
  outline-offset: 2px !important;
  border-radius: var(--vnu-radius-sm);
}
/* On the dark footer, an indigo ring is low-contrast — use the light token instead */
.bg-black a:focus-visible,
.bg-black button:focus-visible {
  outline-color: var(--vnu-on-dark) !important;
}