/* Modernized Statistics page. Scoped under .modernStatisticsPage so it never affects the League Career page,
   which renders the exact same #statsTable markup (_stats_table.rhtml / _stats_table_pick_3_classic.rhtml /
   _stats_table_let_it_ride.rhtml partials are shared between the two), or the shared _year_picker.rhtml /
   _country_club_picker.rhtml partials also used on Standings, Weekly Results, and ITM Standings. Table
   structure/IDs used by the sortable JS (sortable_us.js) are left untouched -- only colors/spacing/borders
   change. */

.modernStatisticsPage #pageTitle {
  margin-bottom: 14px;
}

.modernStatisticsPage > table {
  border-collapse: collapse;
  margin-bottom: 2px !important;
}

.modernStatisticsPage > table td {
  border: none;
  padding: 3px 6px 3px 0;
  vertical-align: middle;
}

.modernStatisticsPage .dropDownLabel,
.modernStatisticsPage .countryClubFilter {
  font-weight: 600;
  font-size: 12px;
  color: #333;
}

.modernStatisticsPage > table select {
  border: 1px solid #cfd4e0;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
}

.modernStatisticsPage #statsResultsThroughHeader {
  font-weight: 700;
  color: #0b1a67;
  font-size: 13px;
  padding-top: 4px;
  padding-bottom: 0;
}

.modernStatisticsPage .stats {
  margin-top: 0;
}

.modernStatisticsPage .stats {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #e2e6f2;
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
}

.modernStatisticsPage .stats table {
  float: none;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.modernStatisticsPage #statsTable thead tr#header {
  background-color: #0b1a67;
}

.modernStatisticsPage #statsTable thead tr#header td {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.3px;
  padding: 5px 4px;
  border: 1px solid #24358c;
  white-space: nowrap;
  text-align: center;
}

.modernStatisticsPage #statsTable thead tr#header td a.sortheader {
  color: #fff;
}

.modernStatisticsPage #statsTable thead tr#header td a.sortheader:hover {
  color: #dde3f2;
}

/* Two stacked header rows (column-group labels like "Weekly Finishes", then the actual sortable column
   names) both carry id="header" (a pre-existing markup quirk, not introduced here) and looked identical since
   the base rule above targets tr#header -- lighten the top (group-label) row so it reads as a distinct
   category strip above the main navy sort-header row instead of blending into it. The selector below repeats
   "tr#header" (rather than switching to tr:first-child) specifically to match that base rule's specificity
   (two ID selectors) so this override actually wins the cascade instead of losing to it. */
.modernStatisticsPage #statsTable thead tr#header:first-child {
  background-color: #dde3f2;
}

.modernStatisticsPage #statsTable thead tr#header:first-child td {
  color: #0b1a67;
  border-color: #c7cfe6;
  font-size: 9px;
  letter-spacing: 0.5px;
}

.modernStatisticsPage #statsTable thead tr#header:first-child td a.sortheader {
  color: #0b1a67;
}

.modernStatisticsPage #statsTable thead tr#header:first-child td a.sortheader:hover {
  color: #1c3f66;
}

.modernStatisticsPage #statsTable tbody td {
  border: 1px solid #e2e6f2;
  padding: 5px 5px;
  font-size: 12px;
}

.modernStatisticsPage #statsTable tbody tr.statsRow td {
  background-color: #f4f6fb;
}

.modernStatisticsPage #statsTable tbody tr.whiteRow td {
  background-color: #fff;
}

.modernStatisticsPage #statsTable tbody tr:hover td {
  background-color: #eef1fa;
}

.modernStatisticsPage #statsTable tbody tr.highlightRow td {
  background-color: #ddc5f7;
}

.modernStatisticsPage #statsTable td.number {
  text-align: right;
}

.modernStatisticsPage #statsTable td.centerText {
  text-align: center;
}

.modernStatisticsPage #statsTable tbody td a {
  color: #0b1a67;
  font-weight: 600;
  text-decoration: none;
}

.modernStatisticsPage #statsTable tbody td a:hover {
  text-decoration: underline;
}

.modernStatisticsPage #statsTable tfoot td {
  background: #fff;
  border: none;
  padding: 10px 8px 4px;
  font-size: 11px;
  color: #6b7280;
  white-space: normal;
  line-height: 1.6;
}

.modernStatisticsPage .statsNote {
  font-size: 11px;
  color: #6b7280;
}