/* Modernized Scorecard page (Individual/Majors/FedEx Cup/Commissioner's Cup Scorecard -- all render this same
   individual.rhtml template). Scoped under .modernScorecardPage so it never affects the many OTHER pages that
   reuse the same .weeklyResults/#weeklyResultsTable/.standings markup and the shared
   weekly_results/{choose_1,choose_3}/_results_table_header, _golfer_name, _golfer_earnings, and _footer
   partials (Weekly Results, Projected Results, Alternate Picks, and the main Standings page all render some of
   these too, and were intentionally left untouched -- only this page's own wrapper is modernized).

   Most of this page's results-table shell (title, thead styling, tbody borders/hover, footer base, the
   box-shadow-ring wrapper, and Sub/Mulligan/NetSubEffect header chips) is shared byte-for-byte with Weekly
   Results, Projected Results, and/or Alternate Picks and now lives in weekly_results_family_modern.css -- only
   what's unique to this page (the Standings Position strip, the period/team picker table, totals row, empty
   state) stays here.

   Functional/inline colors left completely unchanged: .weeklyResultsStart (navy)/.weeklyResultsSub (green)/
   .weeklyResultsMulligan (red)/.weeklyResultsNetSubEffect (grey) column-header + link colors indicate pick
   type; .weeklyResultsWinningGolfer (yellow highlight) marks the tournament winner; .dropped (strikethrough)
   marks a dropped golfer; standings_position_color() emits inline background colors per standings place
   (blue/red/green/purple/orange "medal" colors) on the Standings Position strip -- white text is added below
   only for the cells that don't already carry their own inline color (i.e. the colored-medal cells), so the
   "no ranking yet" black-text case is untouched. */

.modernScorecardPage > table:first-of-type {
  border-collapse: collapse;
  margin-bottom: 14px;
}

.modernScorecardPage > table:first-of-type td {
  border: none;
  padding: 0 6px 0 0;
  vertical-align: middle;
}

.modernScorecardPage .dropDownLabel {
  font-weight: 600;
  font-size: 13px;
  color: #333;
}

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

.modernScorecardPage #standingsPickPeriodYearSpacer {
  width: 16px;
}

/* Standings Position strip */
.modernScorecardPage .standingsPositionContainerTable table {
  margin: 0;
  border-spacing: 0;
}

.modernScorecardPage .standings {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #e2e6f2;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 14px;
}

.modernScorecardPage .standings tr {
  border: none;
}

.modernScorecardPage .standings td {
  border: 1px solid #e2e6f2;
  padding: 6px 12px;
  font-size: 11px;
  line-height: 1.5;
}

.modernScorecardPage #standingsPositionContainer {
  background: #0b1a67;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid #0b1a67;
}

.modernScorecardPage .standings td[style*="background"] {
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.modernScorecardPage #weeklyResultsTable tbody tr.scorecardRow td {
  background-color: #d9eaf7;
}

.modernScorecardPage .scorecardTotalsRow td {
  background: #eef1fa;
  border: 1px solid #e2e6f2;
  font-weight: 700;
  color: #0b1a67;
}

.modernScorecardPage .scorecardTotalsLabel {
  text-align: right;
}

.modernScorecardPage .tableFooterRow td {
  border: none;
  padding: 10px 8px 4px;
}

.modernScorecardPage .dataUnavailable {
  font-size: 14px;
  color: #6b7280;
  margin-top: 8px;
  margin-bottom: 40px;
}

.modernScorecardPage .scorecardEmptyState {
  max-width: 500px;
  padding: 14px 18px;
  margin-bottom: 40px;
}

/* On touchscreens, let the wide tables overflow the page instead of scrolling inside their own boxed card --
   swiping right moves the whole page, matching how the rest of a mobile page scrolls, rather than requiring a
   precise swipe inside a small contained region. Targeted by touch capability (not viewport width) because this
   controller is in WIDE_VIEWPORT_CONTROLLERS (app/helpers/application_helper.rb) -- mobile browsers here get
   <meta name="viewport" content="width=1000"> so the tab bar doesn't stack, which pins the CSS layout width to
   1000px even on a phone, so a width-based media query would never fire on the devices it's meant for. The
   per-cell borders already give the table its own grid lines, so dropping the outer card border/radius here
   isn't a visual loss. */
@media (hover: none) and (pointer: coarse) {
  .modernScorecardPage .standings,
  .modernScorecardPage .weeklyResults {
    display: block;
    width: auto;
    max-width: none;
    overflow: visible;
    border: none;
    border-radius: 0;
    -webkit-overflow-scrolling: auto;
  }
}