/* 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).

   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 .weeklyResultsTitle {
  font-size: 20px;
  margin-bottom: 12px;
}

.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;
}

/* Main scorecard table */
.modernScorecardPage .weeklyResults {
  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: 16px;
}

.modernScorecardPage .weeklyResults table {
  float: none;
  width: auto;
  margin: 0;
  border-collapse: collapse;
}

.modernScorecardPage #weeklyResultsTable thead tr#header {
  background-color: #0b1a67;
}

.modernScorecardPage #weeklyResultsTable thead tr#header td {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.2px;
  padding: 3px 4px;
  border: 1px solid #24358c;
  white-space: nowrap;
}

.modernScorecardPage #weeklyResultsTable thead tr#header td a.sortheader {
  color: #fff;
}

.modernScorecardPage #weeklyResultsTable thead tr#header td a.sortheader:hover {
  color: #dde3f2;
}

/* Pick-type header labels (Starter/Sub/Mulligan) get a solid PTFG-brand-colored background chip instead of
   just tinted text -- Starter's navy already matches the table's own header color (PTFG Blue), so Sub (PTFG
   Green) and Mulligan (PTFG Red) get their own solid background blocks so the distinction is unmistakable at a
   glance, not just a subtle text-color shift. */
.modernScorecardPage #weeklyResultsTable thead tr#header td.weeklyResultsSub {
  background-color: #0b6726;
  color: #fff;
}

.modernScorecardPage #weeklyResultsTable thead tr#header td.weeklyResultsMulligan {
  background-color: #c30900;
  color: #fff;
}

.modernScorecardPage #weeklyResultsTable thead tr#header td.weeklyResultsNetSubEffect {
  color: #c9ccd9;
}

.modernScorecardPage #weeklyResultsTable tbody td {
  border: 1px solid #e2e6f2;
  padding: 2px 4px;
  font-size: 11px;
}

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

.modernScorecardPage #weeklyResultsTable tbody tr.whiteRow td {
  background-color: #fff;
}

.modernScorecardPage #weeklyResultsTable tbody tr:hover td {
  background-color: #eef1fa;
}

.modernScorecardPage #weeklyResultsTable tbody tr.highlightRow td {
  background-color: #d0a9f5;
}

.modernScorecardPage #weeklyResultsTable td.number {
  text-align: right;
}

.modernScorecardPage #weeklyResultsTable td.centerText {
  text-align: center;
}

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

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

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

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

.modernScorecardPage .scorecardEmptyState {
  max-width: 500px;
  padding: 14px 18px;
  background: #eaf2fc;
  border-left: 4px solid #1c5bc4;
  border-radius: 6px;
  color: #1c3f66;
  font-size: 14px;
  line-height: 1.6;
  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;
  }
}