/* Shared foregrounds work with both light and dark school brand colors. */
:root {
  --accent-ink: #b43838;
  --surface-accent-ink: var(--accent-ink);
  --nav-accent-ink: var(--main-text-color, #111111);
  --focus-color: var(--accent-ink);
  --control-border-color: #767676;
}
.navbar, .sidebar {
  --accent-ink: var(--nav-accent-ink);
  --focus-color: var(--nav-accent-ink);
  color: var(--main-text-color);
}
.nav-dropdown-menu, .notification-menu, .season-select {
  --accent-ink: var(--surface-accent-ink);
  --focus-color: var(--surface-accent-ink);
}
html .navbar .logo, html .sidebar-brand {
  color: var(--main-text-color);
}
html .navbar .nav-links > a:not(.active),
html .navbar .notification-btn,
html .sidebar a:not(.active),
html .sidebar-header {
  color: var(--main-text-color);
}
html .navbar .nav-links > a.active,
html .sidebar a.active {
  background: var(--accent-color);
  color: var(--accent-text-color);
}
html .season-select {
  background: var(--card-bg) !important;
  color: var(--card-bg-text-color);
  border-color: var(--control-border-color);
}
html .season-select :is(label, select) {
  color: var(--card-bg-text-color) !important;
}
html :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
  border-color: var(--control-border-color);
}
html :is(input, textarea)::placeholder {
  color: var(--text-muted, #595959);
  opacity: 1;
}
html[data-ui][data-theme] body :is(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid var(--focus-color) !important;
  outline-offset: 3px !important;
}
html :is(button, input, select, textarea):disabled {
  opacity: 1 !important;
  cursor: not-allowed;
}
html .ranking-block-header {
  background: var(--accent-color);
  color: var(--accent-text-color);
  text-shadow: none;
}
html .medal-gold, html .medal-silver, html .medal-bronze {
  color: #000000;
}
html .action-btn svg, html .card-header .icon svg {
  stroke: currentColor;
}

html .navbar .nav-links > a:not(.active):hover,
html .navbar .nav-dropdown-btn:hover,
html .sidebar :is(a, button):not(.active):hover {
  background: var(--nav-hover-bg);
  color: var(--main-text-color) !important;
}
html .navbar .nav-links > a.active:is(:hover, :focus),
html .sidebar a.active:is(:hover, :focus) {
  background: var(--accent-color);
  color: var(--accent-text-color) !important;
}
html[data-ui][data-theme] :is(.tab-btn, .view-btn, .gender-btn, .filter-btn, .match-level-btn, .match-type-btn, .trend-toggle):is(.active, [aria-pressed="true"], [aria-selected="true"]) {
  border-color: var(--button-border-color) !important;
}

/* Selected buttons use their border; only keyboard focus adds an outer ring. */
html[data-ui][data-theme] :is(.tab-btn, .view-btn, .gender-btn, .filter-btn, .match-level-btn, .match-type-btn, .trend-toggle):is(.active, [aria-pressed="true"], [aria-selected="true"]):not(:focus-visible) {
  outline: none !important;
}

html .navbar .notification-btn:hover {
  background: transparent;
  color: var(--accent-color) !important;
}