/* Modernized Alternate Picks page (alternate_picks#index). Scoped under .modernAlternatePicksPage so it never
   affects Weekly Results, Projected Results, Standings, or Scorecard, which reuse some of the same
   .weeklyResults/.weeklyResultsTitle markup. Mirrors the treatment already applied to those pages (see
   weekly_results_modern.css / projected_results_modern.css) -- kept as a separate file for now, to be
   consolidated into one shared stylesheet later since the table styling is largely identical across all of
   them.

   One functional difference: the zebra stripe intentionally uses the legacy .standingsRow color (not the blue
   .weeklyResultsRow color) so this page still reads as visually distinct from Weekly Results, per the existing
   comment in index.rhtml ("Use standings row color to differentiate Alternate Picks page from Weekly Results
   page") -- kept here as a lighter version of that same tan, the same way the round colors were lightened on
   Projected Results.

   Functional/inline colors left completely unchanged: .weeklyResultsWinningGolfer (yellow highlight) marks the
   tournament winner; .ptfgGreen/.ptfgRed/.ptfgDarkOrange (row text color, via row_style_if_alt_pick_used) show
   whether an alternate pick was applied; .highlightRow (current user, via highlightCurrentUserRows()) is
   explicitly restored since it would otherwise lose to the zebra-row rules below, the same fix applied
   elsewhere this session. */

.modernAlternatePicksPage .weeklyResultsTitle {
  font-size: 20px;
  margin-bottom: 12px;
}

.modernAlternatePicksPage .alternatePicksFilter {
  margin-bottom: 14px;
}

.modernAlternatePicksPage .countryClubFilter {
  font-size: 13px;
}

.modernAlternatePicksPage .countryClubFilterChoices {
  border: 1px solid #cfd4e0;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
}

.modernAlternatePicksPage .alternatePicksMsg .alert.alert-success {
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  padding: 10px 16px;
  background: #eaf7ec;
  border: none;
  border-left: 4px solid #0b6726;
  border-radius: 6px;
  color: #1a4d24;
  font-size: 13px;
  line-height: 1.6;
}

.modernAlternatePicksPage .alternatePicksMsg .alert.alert-danger {
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  padding: 10px 16px;
  background: #fdecea;
  border: none;
  border-left: 4px solid #c30900;
  border-radius: 6px;
  color: #7a1a10;
  font-size: 13px;
  line-height: 1.6;
}

.modernAlternatePicksPage .alternatePicksMsg .alert img {
  vertical-align: middle;
  margin-right: 6px;
}

/* Main results table */
.modernAlternatePicksPage .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;
}

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

.modernAlternatePicksPage #weeklyResultsNoShowReport thead tr#header {
  background-color: #0b1a67;
}

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

.modernAlternatePicksPage #weeklyResultsNoShowReport thead tr#header td a.sortheader {
  color: #fff;
}

.modernAlternatePicksPage #weeklyResultsNoShowReport thead tr#header td a.sortheader:hover {
  color: #dde3f2;
}

.modernAlternatePicksPage #weeklyResultsNoShowReport tbody td {
  border: 1px solid #e2e6f2;
  padding: 2px 4px;
  font-size: 10px;
}

/* Lighter version of the legacy .standingsRow tan, kept as its own hue (rather than reusing the blue used on
   Weekly Results/Scorecard) so this page still reads as visually distinct at a glance. */
.modernAlternatePicksPage #weeklyResultsNoShowReport tbody tr.standingsRow td {
  background-color: #f2ecd4;
}

.modernAlternatePicksPage #weeklyResultsNoShowReport tbody tr.whiteRow td {
  background-color: #fff;
}

.modernAlternatePicksPage #weeklyResultsNoShowReport tbody tr:hover td {
  background-color: #eef1fa;
}

.modernAlternatePicksPage #weeklyResultsNoShowReport tbody tr.highlightRow td {
  background-color: #d0a9f5;
}

.modernAlternatePicksPage #weeklyResultsNoShowReport td.number {
  text-align: right;
}

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

/* On touchscreens, let the wide table overflow the page instead of scrolling inside its 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. See scorecard_modern.css for why touch capability is used
   instead of a viewport-width media query on these WIDE_VIEWPORT_CONTROLLERS pages. */
@media (hover: none) and (pointer: coarse) {
  .modernAlternatePicksPage .weeklyResults {
    display: block;
    width: auto;
    max-width: none;
    overflow: visible;
    border: none;
    border-radius: 0;
  }
}