/* ==========================================================================
   SMTABLE COMPONENT (SMTable Phase 0)
   Shared table styling for the .sm-table component rendered by
   partials/data_table.html and driven by sm-table.js.

   Base look reproduces .table-sabres-header (components/_tables.css) under
   the .sm-table class name: navy gradient thead, gold header text, zebra
   rows, hover, gold DataTables sort arrows.

   Modifiers (opt-in, applied by sm-table.js / templates):
     .sm-table--sticky-header  sticky thead rows; offsets from CSS variables
                               --sm-sticky-row2-top / --sm-sticky-row3-top
                               written by JS (px fallbacks only)
     .sm-table--sticky-col     sticky first column

   Sticky cell backgrounds use the inset box-shadow trick
   (box-shadow: inset 0 0 0 1000px <color>) + border: none so no gaps
   appear between cells while scrolling (see cap/contract_comps.css).
   ========================================================================== */

/* ==========================================================================
   Base Header Look — navy gradient, gold text
   ========================================================================== */

.sm-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: max-content;
  min-width: 100%;
}

/* Header rows stay transparent so rounded corner cells clip to the page/card
   background instead of a square row fill showing behind them. */
.sm-table thead tr {
  background: transparent !important;
}

.sm-table thead {
  border-top: none !important;
}

.sm-table thead th {
  background: var(--sabres-navy) !important;
  background-color: var(--sabres-navy) !important;
  color: var(--sabres-gold) !important;
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  white-space: nowrap;
  text-align: center !important;
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
}

.sm-table tbody td {
  border: none !important;
  white-space: nowrap;
  text-align: center !important;
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
}

/* Allow wrapping on specific cells (e.g. player name lists) */
.sm-table td.sm-cell-wrap {
  white-space: normal !important;
  min-width: 160px;
  max-width: 300px;
  text-align: left !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.sm-table td.sm-cell-wrap-compact {
  width: 18rem;
  min-width: 14rem;
  max-width: 18rem;
}

.sm-table td.sm-cell-wrap-center {
  text-align: center !important;
}

.sm-table td.sm-cell-wrap-wide {
  width: 42rem;
  min-width: 36rem;
  max-width: 42rem;
}

/* Rounded corners on the column header row — only when no super-header above */
.sm-table:not(:has(th.sm-table-group-header)) thead tr:has(th[data-field]) th:first-child {
  border-top-left-radius: 8px;
}

.sm-table:not(:has(th.sm-table-group-header)) thead tr:has(th[data-field]) th:last-child {
  border-top-right-radius: 8px;
}

/* Group super-header cells — light tint, navy text; the gold separator belongs
   only on the final super-header row before the normal column headers. */
.sm-table thead th.sm-table-group-header {
  background: #e4ebf4 !important;
  background-color: #e4ebf4 !important;
  color: var(--sabres-navy) !important;
  font-weight: var(--font-semibold);
  border-top: none !important;
  border-bottom: none !important;
  border-right: 1px solid rgba(0, 48, 135, 0.1) !important;
  border-left: none !important;
  text-align: center !important;
}

.sm-table
  thead
  tr:has(th.sm-table-group-header):not(:has(+ tr th.sm-table-group-header))
  th.sm-table-group-header {
  border-bottom: 3px solid var(--sabres-gold) !important;
}

/* First and last cells in the first group-header row get rounded top corners */
.sm-table thead tr:first-child:has(th.sm-table-group-header) th:first-child {
  border-top-left-radius: 8px;
}

.sm-table thead tr:first-child:has(th.sm-table-group-header) th:last-child {
  border-top-right-radius: 8px;
  border-right: none !important;
}

/* Empty group header (ungrouped trailing columns) — same tint and separator behavior */
.sm-table thead th.sm-table-group-header--empty {
  background: #e4ebf4 !important;
  background-color: #e4ebf4 !important;
  border-bottom: none !important;
  border-right: 1px solid rgba(0, 48, 135, 0.1) !important;
  border-top: none !important;
  border-left: none !important;
}

/* Group header help button — click target for Bootstrap popovers */
.sm-table .sm-group-popover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

.sm-table .sm-group-popover i {
  font-size: 0.75em;
  opacity: 0.7;
}

.sm-table .sm-group-popover:hover i,
.sm-table .sm-group-popover:focus-visible i {
  opacity: 1;
}

.sm-table .sm-col-tooltip i {
  font-size: 0.75em;
  opacity: 0.7;
  cursor: pointer;
}

.sm-table .sm-col-tooltip:hover i,
.sm-table .sm-col-tooltip:focus-visible i {
  opacity: 1;
}

/* Popover on group headers — constrain width for readability */
.sm-table-group-popover.popover {
  max-width: 480px;
}

/* ==========================================================================
   Filter Row (appended to thead by sm-table.js)
   ========================================================================== */

.sm-table thead tr.sm-filter-row {
  background: var(--gray-50) !important;
}

.sm-table thead tr.sm-filter-row th {
  background: var(--gray-50) !important;
  background-color: var(--gray-50) !important;
  background-clip: border-box;
  box-shadow: inset 0 0 0 1000px var(--gray-50);
  color: var(--sabres-navy) !important;
  padding: 0.4rem 0.3rem;
}

.sm-table thead tr.sm-filter-row th input,
.sm-table thead tr.sm-filter-row th select {
  font-size: 0.85rem;
  padding: 0.25rem 0.4rem;
}

.sm-table thead tr.sm-filter-row .sm-range-min,
.sm-table thead tr.sm-filter-row .sm-range-max {
  flex: 0 0 60px;
  font-size: 0.75rem;
  padding: 0.2rem 0.3rem;
  width: 60px;
}

.sm-table thead tr.sm-filter-row .sm-date-min,
.sm-table thead tr.sm-filter-row .sm-date-max {
  min-width: 8.5rem;
}

.sm-table thead tr.sm-filter-row input[type='number']::-webkit-outer-spin-button,
.sm-table thead tr.sm-filter-row input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sm-table thead tr.sm-filter-row input[type='number'] {
  -moz-appearance: textfield;
}

.sm-filter-dropdown {
  display: inline-block;
  position: relative;
  width: 100%;
}

.sm-filter-dropdown .dropdown-menu {
  max-height: 400px;
  overflow-y: auto;
  min-width: 250px;
}

.sm-filter-dropdown .sm-ms-options {
  max-height: 300px;
  overflow-y: auto;
}

.sm-filter-dropdown .form-check {
  margin-bottom: 0.25rem;
  padding-left: 1.5em;
}

.sm-filter-dropdown .sm-ms-search {
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

/* ==========================================================================
   DataTables Sort Arrows — Gold Color
   ========================================================================== */

.sm-table thead th.sorting::before,
.sm-table thead th.sorting::after,
.sm-table thead th.sorting_asc::before,
.sm-table thead th.sorting_asc::after,
.sm-table thead th.sorting_desc::before,
.sm-table thead th.sorting_desc::after {
  filter: brightness(0) saturate(100%) invert(79%) sepia(46%) saturate(1000%)
    hue-rotate(358deg) brightness(101%) contrast(97%);
  opacity: 0.5;
}

.sm-table thead th.sorting_asc::before,
.sm-table thead th.sorting_desc::after {
  opacity: 1;
}

/* ==========================================================================
   Zebra Striping + Hover
   ========================================================================== */

.sm-table tbody tr {
  background-color: transparent !important;
}

.sm-table tbody tr:nth-child(odd) td {
  background-color: #f8f9fa;
}

.sm-table tbody tr:nth-child(even) td {
  background-color: #fff;
}

/* Chroma.js writes value-encoded backgrounds onto these cells; row hover must
   not overwrite those backgrounds. */
.sm-table
  tbody
  tr:hover
  td:not(
    :is(
      .shade,
      .summary_table,
      .reverse-scale,
      .gsaa,
      .context-stats,
      .g-context-stats,
      .g-context-stats-reverse,
      .g-context-stats-missing,
      .qot,
      .qot-opposite,
      .gp,
      [style*='background']
    )
  ) {
  background-color: #e9ecef !important;
}

.sm-table
  tbody
  tr:hover
  td:is(
    .shade,
    .summary_table,
    .reverse-scale,
    .gsaa,
    .context-stats,
    .g-context-stats,
    .g-context-stats-reverse,
    .g-context-stats-missing,
    .qot,
    .qot-opposite,
    .gp,
    [style*='background']
  ) {
  --bs-table-accent-bg: transparent;
  box-shadow: none;
}

.sm-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

.sm-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

/* ==========================================================================
   Percentile Suffix (toggled by sm-table.js)
   ========================================================================== */

.sm-table .percentile-display {
  font-size: 0.85em;
  color: #666;
}

/* ==========================================================================
   Wrapper scroll container
   .table-responsive (overflow-x: auto) already makes the wrapper a scroll
   container, which traps position: sticky inside a box that never scrolls
   vertically — so the wrapper must own vertical scrolling too. Default
   offset measured on the pilot pages (~240px of navbar/heading/controls
   chrome above the wrapper + page padding); tune per page by setting
   --sm-table-max-height on any ancestor.
   ========================================================================== */

.sm-table-wrapper {
  max-height: var(--sm-table-max-height, calc(100vh - 264px));
  overflow: auto;
  border-radius: 8px;
}

/* ==========================================================================
   Sticky Header / Sticky Column (desktop only)
   Offsets come from --sm-sticky-row2-top / --sm-sticky-row3-top, written by
   sm-table.js after measuring rendered row heights; px values are fallbacks.
   Z-index scale: header rows 11 (filter row 10), header∩sticky-col 15,
   body sticky col 5.
   Selectors carrying position: sticky on label-row cells include .dataTable
   (added by DataTables at init, always present) to reach (0,3,3): DT2 ships
   `table.dataTable thead > tr > th.dt-orderable-*` at (0,2,4) with
   position: relative, which beats the plain (0,2,3) forms.
   ========================================================================== */

@media (min-width: 769px) {
  /* -- Sticky header rows ------------------------------------------------ */

  /* Solid navy fill for sticky header cells */
  .sm-table.sm-table--sticky-header thead th {
    border: none !important;
    background: var(--sabres-navy) !important;
    background-color: var(--sabres-navy) !important;
  }

  /* Group super-header cells keep their Option C fill */
  .sm-table.sm-table--sticky-header thead th.sm-table-group-header {
    background: #e4ebf4 !important;
    background-color: #e4ebf4 !important;
    border-left: none !important;
    border-right: 1px solid rgba(0, 48, 135, 0.1) !important;
    border-bottom: 3px solid var(--sabres-gold) !important;
  }

  .sm-table.sm-table--sticky-header thead th.sm-table-group-header:last-child,
  .sm-table.sm-table--sticky-header thead th.sm-table-group-header--empty:last-child {
    border-right: none !important;
  }

  .sm-table--sticky-header.dataTable thead tr:nth-child(1) th {
    position: sticky;
    top: 0;
    z-index: 11;
  }

  .sm-table--sticky-header.dataTable thead tr:nth-child(2) th {
    position: sticky;
    top: var(--sm-sticky-row2-top, 33px);
    z-index: 11;
  }

  /* Filter row sticks below the header rows */
  .sm-table--sticky-header.dataTable thead tr.sm-filter-row th {
    position: sticky;
    top: var(--sm-sticky-row3-top, 66px);
    z-index: 10;
    background: var(--gray-50) !important;
    background-color: var(--gray-50) !important;
    box-shadow: inset 0 0 0 1000px var(--gray-50);
  }

  /* -- Sticky first column ----------------------------------------------- */

  .sm-table--sticky-col.dataTable thead th:first-child,
  .sm-table--sticky-col tbody td:first-child {
    position: sticky;
    left: 0;
  }

  /* Header ∩ sticky column — column header row */
  .sm-table--sticky-col.dataTable thead tr:has(th[data-field]) th:first-child {
    z-index: 15;
    background: var(--sabres-navy) !important;
    background-color: var(--sabres-navy) !important;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.08);
    border: none !important;
  }

  /* Header ∩ sticky column — group super-header row */
  .sm-table--sticky-col.dataTable thead tr:has(th.sm-table-group-header) th:first-child {
    z-index: 15;
    background: #e4ebf4 !important;
    background-color: #e4ebf4 !important;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.08);
    border: none !important;
    border-bottom: 3px solid var(--sabres-gold) !important;
  }

  /* Wide colspan group-header cell must not pin horizontally */
  .sm-table--sticky-col thead tr th.sm-table-group-header:first-child {
    left: auto;
  }

  .sm-table--sticky-col.dataTable thead th.sm-table-group-header:first-child {
    background: #e4ebf4 !important;
    background-color: #e4ebf4 !important;
    border-right: 1px solid rgba(0, 48, 135, 0.1) !important;
    box-shadow: none;
  }

  .sm-table--sticky-col.dataTable thead th.sm-table-group-header:first-child:last-child {
    border-right: none !important;
  }

  .sm-table--sticky-col thead tr.sm-filter-row th:first-child {
    z-index: 15;
    background: var(--gray-50) !important;
    background-color: var(--gray-50) !important;
    box-shadow:
      2px 0 5px rgba(0, 0, 0, 0.08),
      inset 0 0 0 1000px var(--gray-50);
  }

  /* Body cells — explicit solid backgrounds per row state */
  .sm-table--sticky-col tbody td:first-child {
    z-index: 5;
    background-color: #fff !important;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.08);
  }

  .sm-table--sticky-col tbody tr:nth-child(odd) td:first-child {
    background-color: #f8f9fa !important;
  }

  .sm-table--sticky-col tbody tr:nth-child(even) td:first-child {
    background-color: #fff !important;
  }

  .sm-table--sticky-col
    tbody
    tr:hover
    td:first-child:not(
      :is(
        .shade,
        .summary_table,
        .reverse-scale,
        .gsaa,
        .context-stats,
        .g-context-stats,
        .g-context-stats-reverse,
        .g-context-stats-missing,
        .qot,
        .qot-opposite,
        .gp,
        [style*='background']
      )
    ) {
    background-color: #e9ecef !important;
  }
}

/* ==========================================================================
   Static Table Variant — shared look for server-rendered non-DataTables tables
   ========================================================================== */

.sm-static-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-bottom: 0;
  table-layout: auto;
  width: 100%;
}

.table-responsive:has(> .sm-static-table) {
  border-radius: 8px;
  overflow: auto;
}

.sm-static-table thead tr {
  background: transparent !important;
}

.sm-static-table thead th {
  background: var(--sabres-navy) !important;
  background-color: var(--sabres-navy) !important;
  border: none !important;
  color: var(--sabres-gold) !important;
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  padding: 0.4rem 0.5rem;
  text-align: center !important;
  white-space: nowrap;
}

.sm-static-table thead tr:first-child th:first-child {
  border-top-left-radius: 8px;
}

.sm-static-table thead tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

/* Super-header rows for hand-rendered static tables — stacked super-headers
   share the light/navy treatment; the gold separator belongs only on the
   final super-header row before the normal column headers. */
.sm-static-table thead tr:has(th.top-top-table-header) th,
.sm-static-table thead tr:has(th.top-table-header) th,
.sm-static-table thead tr.super-header th,
.sm-static-table thead tr:first-child th[colspan] {
  background: #e4ebf4 !important;
  background-color: #e4ebf4 !important;
  border-bottom: none !important;
  color: var(--sabres-navy) !important;
  font-weight: var(--font-bold);
  padding: 0.45rem 0.5rem !important;
  text-transform: none;
}

.sm-static-table
  thead
  tr:is(
    :has(th.top-top-table-header),
    :has(th.top-table-header),
    .super-header,
    :first-child:has(th[colspan])
  ):not(
    :has(
      + tr.super-header,
      + tr th.top-top-table-header,
      + tr th.top-table-header,
      + tr th[colspan]
    )
  )
  th {
  border-bottom: 3px solid var(--sabres-gold) !important;
}
.sm-static-table tbody td {
  border: none !important;
  padding: 0.4rem 0.5rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.sm-static-table tbody tr {
  background-color: transparent !important;
}

.sm-static-table tbody tr:nth-child(odd) td {
  background-color: #f8f9fa;
}

.sm-static-table tbody tr:nth-child(even) td {
  background-color: #fff;
}

.sm-static-table
  tbody
  tr:hover
  td:not(
    :is(
      .shade,
      .summary_table,
      .reverse-scale,
      .gsaa,
      .context-stats,
      .g-context-stats,
      .g-context-stats-reverse,
      .g-context-stats-missing,
      .qot,
      .qot-opposite,
      .gp,
      [style*='background']
    )
  ) {
  background-color: #e9ecef !important;
}

.sm-static-table
  tbody
  tr:hover
  td:is(
    .shade,
    .summary_table,
    .reverse-scale,
    .gsaa,
    .context-stats,
    .g-context-stats,
    .g-context-stats-reverse,
    .g-context-stats-missing,
    .qot,
    .qot-opposite,
    .gp,
    [style*='background']
  ) {
  --bs-table-accent-bg: transparent;
  box-shadow: none;
}

.sm-static-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

.sm-static-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

.sm-static-table--compact thead th,
.sm-static-table--compact tbody td {
  font-size: 0.8rem;
  padding: 0.3rem 0.4rem;
}

.sm-static-table--details tr + tr td {
  border-top: 1px solid var(--gray-200) !important;
}

.sm-static-table--details td {
  background-color: #fff !important;
  text-align: left !important;
}

.sm-static-table--details td:last-child {
  text-align: right !important;
}

.sm-static-table--details tbody tr:hover td {
  background-color: #fff !important;
}

.sm-static-table--sticky-player thead th:first-child,
.sm-static-table--sticky-player tbody td:first-child {
  left: 0;
  position: sticky;
}

.sm-static-table--sticky-player thead th:first-child {
  background: var(--sabres-navy) !important;
  background-color: var(--sabres-navy) !important;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.08);
  z-index: 15;
}

.sm-static-table--sticky-player tbody td:first-child {
  background-color: #fff !important;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.08);
  z-index: 5;
}

.sm-static-table--sticky-player tbody tr:nth-child(odd) td:first-child {
  background-color: #f8f9fa !important;
}

.sm-static-table--sticky-player tbody tr:nth-child(even) td:first-child {
  background-color: #fff !important;
}

.sm-static-table--sticky-player
  tbody
  tr:hover
  td:first-child:not(
    :is(
      .shade,
      .summary_table,
      .reverse-scale,
      .gsaa,
      .context-stats,
      .g-context-stats,
      .g-context-stats-reverse,
      .g-context-stats-missing,
      .qot,
      .qot-opposite,
      .gp,
      [style*='background']
    )
  ) {
  background-color: #e9ecef !important;
}

/* ==========================================================================
   DPV Color Classes — Green for positive, red for negative
   ========================================================================== */

.dpv-pos {
  color: #1b7a3e;
  font-weight: 500;
}

.dpv-neg {
  color: #b32424;
  font-weight: 500;
}

/* ==========================================================================
   SAB-65 Skater Stats UI — opt-in modifiers
   Every rule below is gated behind a modifier class (.sm-table--compact,
   .sm-table--popover-filters, .sm-table--group-gradient) or the shared
   .sm-toggle-token control pill, so unmodified SMTable pages (goalie,
   undervalued) render identically.
   ========================================================================== */

/* -- Control pills (btn-check tokens in .sm-table-controls) --------------- */
.sm-toggle-token {
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
  font-weight: var(--font-medium, 500);
}

/* -- Game-type segmented toggle (SAB-65) ----------------------------------- */
/* One-of-N pill group: white pill container, active segment filled navy. */
.sm-segmented {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--gray-300, #dee2e6);
  border-radius: 999px;
  padding: 3px;
}

.sm-segmented .sm-segment {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sabres-navy, #002654);
  font-size: 0.8rem;
  font-weight: var(--font-medium, 500);
  padding: 0.35rem 1rem;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
}

.sm-segmented .sm-segment:hover {
  background: #e8edf5;
}

.sm-segmented .btn-check:checked + .sm-segment {
  background: var(--sabres-navy, #002654);
  color: #fff;
}

.sm-segmented .btn-check:focus-visible + .sm-segment {
  outline: 2px solid var(--sabres-gold, #fcb514);
  outline-offset: 1px;
}

/* -- Compact cells + thin column dividers (SAB-65 #2, #3) ----------------- */
.sm-table--compact thead th,
.sm-table--compact tbody td {
  font-size: 0.78rem;
  padding: 0.22rem 0.4rem;
}

/* Vertical hairlines between body columns; the sticky first column keeps its
   own box-shadow separator, so skip its left edge and the outer edge. */
.sm-table--compact tbody td:not(:first-child) {
  border-left: 1px solid var(--gray-200) !important;
}

/* Faint dividers on the column-label header row to match the body grid. */
.sm-table--compact thead tr:has(th[data-field]) th[data-field]:not(:first-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Compact range filters fill the column when the filter row is used. */
.sm-table--compact thead tr.sm-filter-row .sm-range-min,
.sm-table--compact thead tr.sm-filter-row .sm-range-max {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* -- Per-column expandable filters (SAB-65 #1, #5) ------------------------ */
.sm-col-filter {
  display: inline-block;
  position: relative;
  margin-left: 0.2rem;
  vertical-align: middle;
}

.sm-col-filter-toggle {
  border: 0;
  background: transparent;
  color: var(--sabres-gold);
  opacity: 0.5;
  padding: 0 0.15rem;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
}

.sm-col-filter-toggle:hover,
.sm-col-filter-toggle:focus-visible {
  opacity: 1;
}

.sm-col-filter--active .sm-col-filter-toggle {
  opacity: 1;
  color: #fff;
}

.sm-col-filter--active .sm-col-filter-toggle::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sabres-gold);
}

.sm-col-filter-menu {
  min-width: 12rem;
  padding: 0.5rem;
  text-align: left;
}

.sm-col-filter-menu .sm-range-min,
.sm-col-filter-menu .sm-range-max {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.sm-col-filter-menu .sm-ms-options {
  max-height: 260px;
  overflow-y: auto;
}

.sm-col-filter-menu .sm-ms-search {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

/* -- Gradient super-headers (SAB-65 #7) ----------------------------------- */
/* Per-group tint is written inline (important) by sm-table.js applyGroupGradient;
   this only smooths the change and keeps navy text legible. */
.sm-table--group-gradient thead th.sm-table-group-header {
  transition: background-color 0.2s ease;
  color: var(--sabres-navy) !important;
}