/*
  Final color contract
  --------------------
  This file intentionally loads after every feature stylesheet. The legacy hub
  has both dark-shell and light-table themes; keeping their foreground and
  background colors paired here prevents later feature rules from combining a
  foreground from one theme with a background from the other.
*/
:root {
  --ui-shell: #1d1d1a;
  --ui-shell-raised: #292926;
  --ui-shell-line: #41413c;
  --ui-shell-text: #f7f7f4;
  --ui-shell-muted: #c8c8c1;
  --ui-table: #ffffff;
  --ui-table-alt: #f6f6f3;
  --ui-table-head: #e9e9e4;
  --ui-table-sticky: #eeeeea;
  --ui-table-sticky-alt: #e6e6e1;
  --ui-table-total: #d9d9d3;
  --ui-table-line: #c9c9c3;
  --ui-table-text: #111111;
  --ui-table-muted: #555550;
  /* Sampled from the 2026 event reference wall and lifted slightly for screens. */
  --ui-accent: #eeef45;
}

/* The source mark stays untouched in assets; this reversible filter moves the
   orange pixels into the same high-visibility yellow family as the UI accent. */
.brand-logo {
  filter: brightness(0) saturate(100%) invert(93%) sepia(91%) saturate(672%) hue-rotate(353deg) brightness(103%) contrast(90%);
}

/* Dark page chrome always carries light type. */
.content-section,
.content-section.detail-section,
.table-panel,
.box-table-panel,
.history-table-panel,
.profile-session-section,
.team-profile-stats-panel,
.full-leaderboard-panel,
.boys-pool-standings-panel,
.overview-leader-categories-panel,
.leaderboard-section,
.standings-section,
.upcoming-schedule-section,
.program-age-nav {
  border-color: var(--ui-shell-line) !important;
  background: var(--ui-shell) !important;
  color: var(--ui-shell-text) !important;
}

.content-section > h2,
.content-section > h3,
.content-section .section-header h2,
.content-section .section-header h3,
.table-panel > h3,
.box-table-panel > h3,
.history-table-panel > h3,
.full-leaderboard-head h3,
.team-profile-title-block h2,
.program-age-nav > span {
  color: var(--ui-shell-text) !important;
}

.content-section .section-header p,
.full-leaderboard-head p,
.full-leaderboard-head span,
.team-profile-title-block p {
  color: var(--ui-shell-muted) !important;
}

/* The season masthead is a dark hero, so its display title carries the event accent. */
.last-week-callout h2 {
  color: var(--ui-accent) !important;
}

.last-week-callout p {
  color: var(--ui-shell-muted) !important;
}

/* Secondary controls on dark panels need a stronger idle state than body muted text. */
.leaderboard-mode-button:not([aria-pressed="true"]),
.leaderboard-view-control > span,
.leaderboard-division-filter > span,
.overview-table-filter > span,
.schedule-filter-row label > span,
.upcoming-date-heading em,
.upcoming-time-heading em {
  color: var(--ui-shell-muted) !important;
}

/* Breadcrumbs use the event yellow and stay legible on charcoal. */
.content-section .breadcrumbs {
  color: var(--ui-shell-muted) !important;
}

.content-section .breadcrumbs a {
  color: var(--ui-accent) !important;
}

.content-section .breadcrumbs a:hover,
.content-section .breadcrumbs a:focus-visible {
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-color: var(--ui-accent);
  text-underline-offset: 4px;
}

.content-section .breadcrumbs span[aria-current="page"] {
  color: var(--ui-shell-text) !important;
}

.content-section .breadcrumb-divider {
  color: #898981 !important;
}

/* Dense data views always use dark ink on white/gray cells. */
.box-table,
.profile-session-table,
.full-leaderboard-table,
.team-roster-table,
.team-stats-table,
.boys-pool-table,
.history-table,
.home-pool-section table {
  background: var(--ui-table) !important;
  color: var(--ui-table-text) !important;
}

.box-table th,
.profile-session-table th,
.full-leaderboard-table th,
.team-roster-table th,
.team-stats-table th,
.boys-pool-table th,
.history-table th,
.home-pool-section th {
  border-color: var(--ui-table-line) !important;
  background: var(--ui-table-head) !important;
  color: var(--ui-table-text) !important;
  font-weight: 400 !important;
}

.box-table td,
.profile-session-table td,
.full-leaderboard-table td,
.team-roster-table td,
.team-stats-table td,
.boys-pool-table td,
.history-table td,
.home-pool-section td {
  border-color: var(--ui-table-line) !important;
  background: var(--ui-table) !important;
  color: var(--ui-table-text) !important;
}

.box-table tbody tr:nth-child(even) td,
.profile-session-table tbody tr:nth-child(even) td,
.full-leaderboard-table tbody tr:nth-child(even) td,
.team-roster-table tbody tr:nth-child(even) td,
.team-stats-table tbody tr:nth-child(even) td,
.boys-pool-table tbody tr:nth-child(even) td,
.history-table tbody tr:nth-child(even) td,
.home-pool-section tbody tr:nth-child(even) td {
  background: var(--ui-table-alt) !important;
}

.box-table tbody tr:hover td,
.profile-session-table tbody tr:hover td,
.full-leaderboard-table tbody tr:hover td,
.team-roster-table tbody tr:hover td,
.team-stats-table tbody tr:hover td,
.boys-pool-table tbody tr:hover td,
.history-table tbody tr:hover td,
.home-pool-section tbody tr:hover td {
  background: #ecece7 !important;
}

/* Sticky identity cells remain distinct without becoming a dark sub-table. */
.box-table th:first-child,
.profile-session-table th:first-child,
.profile-session-table th:nth-child(2),
.full-leaderboard-table th.player-column,
.team-roster-table th:first-child,
.team-stats-table th.team-name-column,
.history-table th:first-child {
  background: var(--ui-table-head) !important;
  color: var(--ui-table-text) !important;
}

.box-table td:first-child,
.profile-session-table td:first-child,
.profile-session-table td:nth-child(2),
.full-leaderboard-table td.player-column,
.team-roster-table td:first-child,
.team-stats-table td.team-name-column,
.history-table td:first-child {
  background: var(--ui-table-sticky) !important;
  color: var(--ui-table-text) !important;
}

.box-table tbody tr:nth-child(even) td:first-child,
.profile-session-table tbody tr:nth-child(even) td:first-child,
.profile-session-table tbody tr:nth-child(even) td:nth-child(2),
.full-leaderboard-table tbody tr:nth-child(even) td.player-column,
.team-roster-table tbody tr:nth-child(even) td:first-child,
.team-stats-table tbody tr:nth-child(even) td.team-name-column,
.history-table tbody tr:nth-child(even) td:first-child {
  background: var(--ui-table-sticky-alt) !important;
}

.box-table tbody tr:hover td:first-child,
.profile-session-table tbody tr:hover td:first-child,
.profile-session-table tbody tr:hover td:nth-child(2),
.full-leaderboard-table tbody tr:hover td.player-column,
.team-roster-table tbody tr:hover td:first-child,
.team-stats-table tbody tr:hover td.team-name-column,
.history-table tbody tr:hover td:first-child {
  background: #ddddD7 !important;
}

.team-total-row td,
.team-total-row td:first-child,
.profile-summary-row td,
.profile-summary-row td:first-child {
  background: var(--ui-table-total) !important;
  color: var(--ui-table-text) !important;
}

/* Interactive text inside light data cells must follow the cell, not the shell. */
.box-table :is(a, strong, button),
.profile-session-table :is(a, strong, button),
.full-leaderboard-table :is(a, strong, button),
.team-roster-table :is(a, strong, button),
.team-stats-table :is(a, strong, button),
.boys-pool-table :is(a, strong, button),
.history-table :is(a, strong, button),
.home-pool-section table :is(a, strong, button) {
  color: var(--ui-table-text) !important;
}

/* Metric-ring centers are dark even though the surrounding history cell is light. */
.history-table .history-metric-ring strong {
  position: relative;
  z-index: 1;
  color: #111111 !important;
  font-weight: 700 !important;
}

.history-table .history-metric-ring {
  position: relative;
  --ring-color: #111111;
  background: conic-gradient(var(--ring-color) var(--metric-fill), #c7c7c1 0);
}

.history-table .history-metric-ring::before {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--history-ring-center, var(--ui-table));
  content: "";
}

.history-table tbody tr:nth-child(even) {
  --history-ring-center: var(--ui-table-alt);
}

.history-table tbody tr:hover {
  --history-ring-center: #ecece7;
}

.history-table .history-metric-ring.tier-bronze {
  --ring-color: #b87333;
}

.history-table .history-metric-ring.tier-silver {
  --ring-color: #c4c9cf;
}

.history-table .history-metric-ring.tier-gold {
  --ring-color: #d5a21b;
}

.metric-ring-card.tier-none {
  --ring-color: #111111;
}

.metric-ring-card.tier-bronze,
.cram-tier-value.tier-bronze {
  --ring-color: #b87333;
}

.metric-ring-card.tier-silver,
.cram-tier-value.tier-silver {
  --ring-color: #aeb4bb;
}

.metric-ring-card.tier-gold,
.cram-tier-value.tier-gold {
  --ring-color: #d5a21b;
}

.cram-tier-value {
  display: inline-flex;
  min-width: 42px;
  justify-content: center;
  border-bottom: 4px solid var(--ring-color, #111111);
  color: #111111 !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.25;
}

.history-table .history-metric-ring.tone-green {
  --ring-color: #37a66f;
}

.history-table .history-metric-ring.tone-blue {
  --ring-color: #45aeea;
}

.history-table .history-metric-ring.tone-orange {
  --ring-color: #e9902f;
}

.history-table .history-metric-ring.tone-red {
  --ring-color: #cf4b3d;
}

.history-table .history-metric-ring.tone-violet {
  --ring-color: #936de5;
}

.box-table td a:hover,
.profile-session-table td a:hover,
.full-leaderboard-table td a:hover,
.team-roster-table td a:hover,
.team-stats-table td a:hover,
.boys-pool-table td a:hover,
.history-table td a:hover,
.home-pool-section td a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Rank labels live in white cards, despite being nested inside a dark section. */
.overview-leader-category-card .overview-leader-rank,
.home-leaderboard-card .leaderboard-rank,
.nba-leaderboard-card .leaderboard-rank {
  color: var(--ui-table-muted) !important;
}

.team-roster-sort-button:hover,
.team-roster-sort-button[aria-pressed="true"],
.full-leaderboard-sort-button:hover,
.full-leaderboard-sort-button[aria-pressed="true"],
.team-stats-sort-button:hover,
.team-stats-sort-button[aria-pressed="true"] {
  color: var(--ui-table-text) !important;
}

.team-roster-sort-button,
.full-leaderboard-sort-button,
.team-stats-sort-button {
  font-weight: 400 !important;
}

/* The summary rail is an event accent, not another black band. */
.full-leaderboard-panel {
  padding: 0 !important;
}

.full-leaderboard-head {
  align-items: center;
  margin: 0;
  padding: 12px 14px;
  background: var(--ui-accent) !important;
  color: #111111 !important;
}

/*
  Keep the summary rail attached to the visible scroll viewport. The table can
  continue underneath it horizontally, but the section title and row count do
  not disappear with off-screen stat columns.
*/
.full-leaderboard-panel > .full-leaderboard-head {
  position: sticky;
  left: 0;
  z-index: 12;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

.full-leaderboard-head :is(h3, p, span) {
  color: #111111 !important;
}

.full-leaderboard-head :is(p, span) {
  font-weight: 700;
}

/* Let the identity column shrink-wrap its longest visible name. */
.full-leaderboard-table:not(.team-stats-table) {
  table-layout: auto;
}

.full-leaderboard-table th.player-column,
.full-leaderboard-table td.player-column {
  width: 1% !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap;
}

/*
  The legacy 2360px team table scaled every declared column proportionally,
  which made the frozen Team cell hundreds of pixels wider than its content.
  These widths add up to the table canvas, keeping the identity column compact
  and leaving the extra room where it is useful: the scannable stat columns.
*/
.team-stats-table .rank-column {
  width: 48px !important;
}

.team-stats-table .team-name-column {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

.team-stats-table .team-record-column {
  width: 100px !important;
}

.team-stats-table .stat-column {
  width: 83px !important;
}

/* Stat-free team/player directories shown while public Cerebro surfaces are off. */
.entity-directory-search {
  display: grid;
  width: min(100%, 420px);
  gap: 6px;
  margin: 0 0 18px;
  color: var(--ui-shell-text);
  font-weight: 700;
}

.entity-directory-search input {
  min-height: 46px;
  border: 1px solid var(--ui-table-line);
  border-radius: 0;
  padding: 0 14px;
  background: var(--ui-table);
  color: var(--ui-table-text);
  font: 700 16px Helvetica, Arial, sans-serif;
}

.entity-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  border: 1px solid var(--ui-shell-line);
  background: var(--ui-shell-line);
}

.entity-directory-grid > .empty-state,
.entity-directory-grid > .empty-state-loading {
  grid-column: 1 / -1;
}

.entity-directory-link {
  display: grid;
  align-content: center;
  min-height: 78px;
  gap: 5px;
  padding: 14px 16px;
  background: var(--ui-table);
  color: var(--ui-table-text) !important;
  text-decoration: none;
}

.entity-directory-link:hover,
.entity-directory-link:focus-visible {
  background: var(--ui-table-alt);
  outline: 2px solid var(--ui-accent);
  outline-offset: -2px;
}

.entity-directory-link strong {
  color: var(--ui-table-text);
  font-size: 17px;
}

.entity-directory-link span {
  color: var(--ui-table-muted);
  font-size: 13px;
}

/* Event yellow is reserved for dark title rails and primary box-score actions. */
.boys-pool-card h3,
.home-pool-section h5,
.overview-leader-category-card h4,
.box-team-title,
.profile-session-heading {
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent) !important;
  color: #111111 !important;
}

.boys-pool-card h3 *,
.home-pool-section h5 *,
.overview-leader-category-card h4 *,
.box-team-title *,
.profile-session-heading * {
  color: #111111 !important;
}

.box-link,
.upcoming-box-link,
.home-box-link {
  border-color: var(--ui-accent) !important;
  border-radius: 0 !important;
  background: var(--ui-accent) !important;
  color: #111111 !important;
}

.box-link:hover,
.upcoming-box-link:hover,
.home-box-link:hover {
  border-color: #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
}

input,
select,
.overview-search-filter input,
.team-stats-search-filter input,
.leaderboard-player-search-filter input,
.schedule-filter-row input {
  border-radius: 0 !important;
}

.detail-loading-screen {
  display: grid;
  min-height: clamp(460px, 72vh, 760px);
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.detail-loading-screen h2,
.detail-loading-screen p {
  margin: 0;
}

.detail-loading-spinner {
  width: 58px;
  height: 58px;
  border: 6px solid #55554f;
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: detail-loading-spin .8s linear infinite;
}

@keyframes detail-loading-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Table title bars and controls retain the restrained event treatment. */
.box-team-title,
.profile-session-heading,
.home-pool-section h5 {
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent) !important;
  color: #111111 !important;
}

.box-team-title :is(h3, a, span, strong, em),
.profile-session-heading :is(span, strong, em),
.home-pool-section h5 {
  color: #111111 !important;
}

.box-team-title h3 {
  min-width: 0;
  margin: 0;
  font-size: clamp(36px, 3vw, 54px);
  line-height: 1;
}

@media (max-width: 720px) {
  .box-team-title h3 {
    font-size: 28px;
  }
}

.overview-leader-category-card h4,
.overview-leader-category-card h4 span,
.overview-leader-category-card h4 b,
.box-team-title h3,
.box-team-title h3 a,
.box-team-title span,
.box-team-title strong,
.box-team-title em {
  color: #111111 !important;
}

.print-box-button,
.print-box-button:hover {
  border-color: #ffffff !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #111111 !important;
}

.overview-full-link.overview-full-link-accent,
.overview-full-link.overview-full-link-accent:hover {
  border-color: var(--ui-accent) !important;
  border-radius: 0 !important;
  background: var(--ui-accent) !important;
  color: #111111 !important;
}

.overview-full-link.overview-full-link-accent:hover {
  filter: brightness(.94);
}

.empty-state:not(.empty-state-loading) {
  border-color: #55554f;
  background: var(--ui-shell-raised);
  color: var(--ui-shell-muted);
}

:is(a, button, input, select):focus-visible {
  outline: 3px solid var(--ui-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
