/* Modernized Projected Results page (projected_results#index). Scoped under .modernProjectedResultsPage so it
   never affects Weekly Results, Alternate Picks, Standings, or Scorecard, which reuse some of the same
   .weeklyResults/#weeklyResultsTable/.tableFooterRow markup and the shared weekly_results/_golfer_name,
   _golfer_earnings, _common_footer, and {choose_1,choose_3}/_results_table_header partials -- only this page's
   own wrapper is modernized. Mirrors the treatment already applied to the Weekly Results page
   (public/stylesheets/modern/weekly_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 these pages.

   One functional difference from Weekly Results: rows are tinted per-round (R1/R2/R3) rather than a single
   zebra color, so users can tell at a glance which round's projection they're looking at -- lighter versions of
   the legacy .projectedResultsRowR1/R2/R3 colors (application.css) are used instead of the flat grey zebra used
   on the FINAL results page.

   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; .highlightRow (current user, via highlightCurrentUserRows()) is explicitly restored
   since it would otherwise lose to the per-round row-tint rules below, the same fix applied elsewhere this
   session. The choose_1 and choose_3 formats unfortunately use two different table IDs in the existing markup
   (#projectedResultsTable vs #weeklyResultsTable) -- both are targeted below wherever the rule isn't already
   scoped generically via .weeklyResults table. */

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

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

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

.modernProjectedResultsPage .projectedResultsDisclaimer {
  max-width: 725px;
  margin-top: 10px;
  margin-bottom: 14px;
  padding: 10px 16px;
  background: #f4f6fb;
  border: 1px solid #e2e6f2;
  border-radius: 8px;
  color: #333;
  font-size: 13px;
  line-height: 1.6;
}

.modernProjectedResultsPage .projectedResultsDisclaimer a {
  color: #0b1a67;
  font-weight: 600;
  text-decoration: none;
}

.modernProjectedResultsPage .projectedResultsDisclaimer a:hover {
  text-decoration: underline;
}

.modernProjectedResultsPage .alert.alert-danger.ptfgAlert {
  padding: 10px 16px;
  background: #fdecea;
  border: none;
  border-left: 4px solid #c30900;
  border-radius: 6px;
  color: #7a1a10;
  font-size: 13px;
  line-height: 1.6;
}

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

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

.modernProjectedResultsPage #projectedResultsTable thead tr#header,
.modernProjectedResultsPage #weeklyResultsTable thead tr#header {
  background-color: #0b1a67;
}

.modernProjectedResultsPage #projectedResultsTable thead tr#header td,
.modernProjectedResultsPage #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;
}

.modernProjectedResultsPage #projectedResultsTable thead tr#header td a.sortheader,
.modernProjectedResultsPage #weeklyResultsTable thead tr#header td a.sortheader {
  color: #fff;
}

.modernProjectedResultsPage #projectedResultsTable thead tr#header td a.sortheader:hover,
.modernProjectedResultsPage #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. */
.modernProjectedResultsPage #weeklyResultsTable thead tr#header td.weeklyResultsSub {
  background-color: #0b6726;
  color: #fff;
}

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

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

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

/* Per-round row tints (lighter versions of the legacy .projectedResultsRowR1/R2/R3 colors in application.css)
   so users can still tell which round they're viewing at a glance, just muted to match the rest of the modern
   table styling instead of the original fairly saturated legacy colors. */
.modernProjectedResultsPage #projectedResultsTable tbody tr.projectedResultsRowR1 td,
.modernProjectedResultsPage #weeklyResultsTable tbody tr.projectedResultsRowR1 td {
  background-color: #eaf7ec;
}

.modernProjectedResultsPage #projectedResultsTable tbody tr.projectedResultsRowR2 td,
.modernProjectedResultsPage #weeklyResultsTable tbody tr.projectedResultsRowR2 td {
  background-color: #fdf6e0;
}

.modernProjectedResultsPage #projectedResultsTable tbody tr.projectedResultsRowR3 td,
.modernProjectedResultsPage #weeklyResultsTable tbody tr.projectedResultsRowR3 td {
  background-color: #fdece0;
}

.modernProjectedResultsPage #projectedResultsTable tbody tr.whiteRow td,
.modernProjectedResultsPage #weeklyResultsTable tbody tr.whiteRow td {
  background-color: #fff;
}

.modernProjectedResultsPage #projectedResultsTable tbody tr:hover td,
.modernProjectedResultsPage #weeklyResultsTable tbody tr:hover td {
  background-color: #eef1fa;
}

.modernProjectedResultsPage #projectedResultsTable tbody tr.highlightRow td,
.modernProjectedResultsPage #weeklyResultsTable tbody tr.highlightRow td {
  background-color: #d0a9f5;
}

.modernProjectedResultsPage #projectedResultsTable td.number,
.modernProjectedResultsPage #weeklyResultsTable td.number {
  text-align: right;
}

.modernProjectedResultsPage #projectedResultsTable td.centerText,
.modernProjectedResultsPage #weeklyResultsTable td.centerText {
  text-align: center;
}

.modernProjectedResultsPage .tableFooterRow td {
  background: #f8f9fc;
  border: none;
  padding: 10px 8px 4px;
  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. Targeted by touch capability rather than viewport width for
   the same reason as Weekly Results/Scorecard (see weekly_results_modern.css) -- this controller is also in
   WIDE_VIEWPORT_CONTROLLERS, so mobile browsers get a pinned width=1000 viewport and a normal width-based
   media query would never fire on the devices it's meant for. */
@media (hover: none) and (pointer: coarse) {
  .modernProjectedResultsPage .weeklyResults {
    display: block;
    width: auto;
    max-width: none;
    overflow: visible;
    border: none;
    border-radius: 0;
  }
}