/* 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. Sizing/rounding/border and scrolling are split across two nested elements rather than
   combined on one -- with only one axis (horizontal) ever actually overflowing, `overflow-x: auto` alone left
   the bottom corners of the table's own content rendering square instead of following the outer border-radius
   (a browser corner-clipping quirk, see also the similar Firefox-specific split on the Statistics page in
   statistics_modern.css). The outer .weeklyResults box only sizes/rounds/clips (via overflow: hidden, which
   reliably clips regardless of which axis needs it); the inner .weeklyResultsScroll only scrolls. A plain
   `border` is used here instead of the box-shadow-ring trick used on other pages -- box-shadow's rounded corners
   don't render cleanly when paired with overflow: hidden (a gap opens at each corner), and now that scrolling
   lives on the inner element, the outer border is never at risk of being covered by a scrollbar, so there's no
   longer a reason to avoid a real border here. */
.modernProjectedResultsPage .weeklyResults {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #e2e6f2;
  border-radius: 10px;
  margin-bottom: 16px;
}

.modernProjectedResultsPage .weeklyResultsScroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* border-collapse: collapse tables don't reliably respect an ancestor's rounded overflow clip -- the collapsed
   cell borders are painted as their own layer that can escape the curve right at the corner, which is the gap
   being seen at the bottom corners. border-collapse: separate (with zero spacing, so it's visually identical)
   avoids that merged-border paint path entirely and clips cleanly. */
.modernProjectedResultsPage .weeklyResults table {
  float: none;
  width: auto;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.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: 1px solid #e2e6f2;
  padding: 10px 8px 4px;
  font-size: 11px;
  color: #6b7280;
  white-space: normal;
  line-height: 1.6;
}

/* Belt-and-suspenders fix for the bottom-corner gap: round the actual corner table cells directly instead of
   relying solely on the ancestor .weeklyResults div's overflow-clip to produce the curve. This doesn't depend on
   any browser's overflow/border-radius clipping behavior at all, so it renders identically everywhere regardless
   of what's causing the clip-based approach to leave a gap. The footer row is a single <td colspan="100%">, so
   it gets both bottom corners; the header row's first/last cells each get one top corner. */
.modernProjectedResultsPage #projectedResultsTable thead tr#header td:first-child,
.modernProjectedResultsPage #weeklyResultsTable thead tr#header td:first-child {
  border-top-left-radius: 10px;
}

.modernProjectedResultsPage #projectedResultsTable thead tr#header td:last-child,
.modernProjectedResultsPage #weeklyResultsTable thead tr#header td:last-child {
  border-top-right-radius: 10px;
}

.modernProjectedResultsPage .tableFooterRow td {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* 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;
  }
}