/* ─── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: #f0f4f0;
  color: #1a1a1a;
  min-height: 100vh;
}

/* ─── Header ───────────────────────────────────────────────────────────────── */
header {
  background: linear-gradient(135deg, #1a4c2e 0%, #2d7a4f 100%);
  color: #fff;
  padding: 20px 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.header-titles h1 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.header-titles .subtitle {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 2px;
}

.header-meta {
  font-size: 0.78rem;
  opacity: 0.75;
  text-align: right;
  line-height: 1.5;
}

.header-controls {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
  flex-wrap: wrap;
}

#search {
  flex: 1;
  min-width: 180px;
  padding: 7px 12px;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  background: rgba(255,255,255,0.15);
  color: #fff;
  outline: none;
}
#search::placeholder { color: rgba(255,255,255,0.6); }
#search:focus { background: rgba(255,255,255,0.25); }

#refresh-btn {
  margin-left: auto;
  padding: 7px 14px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
#refresh-btn:hover { background: rgba(255,255,255,0.3); }

/* ─── Tab bar ──────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 4px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab-btn {
  padding: 9px 18px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 8px 8px 0 0;
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.2px;
}
.tab-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
.tab-btn.active {
  background: #f0f4f0;
  color: #1a4c2e;
}

/* ─── Tab panels ───────────────────────────────────────────────────────────── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── Main ─────────────────────────────────────────────────────────────────── */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

.legend {
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.legend span { display: flex; align-items: center; gap: 4px; }

/* ─── Table shared styles ──────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  background: #fff;
}

table.leaderboard {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.leaderboard thead tr {
  background: #2d7a4f;
  color: #fff;
}

table.leaderboard thead th {
  padding: 11px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

table.leaderboard thead th.rank { width: 52px; text-align: center; }
table.leaderboard thead th.earnings { text-align: right; }
table.leaderboard thead th:last-child { width: 32px; }

/* Sortable column headers */
th.sortable { cursor: pointer; }
th.sortable:hover { background: rgba(255,255,255,0.15); }
th.sortable.sort-asc .sort-icon::after  { content: ' ▲'; }
th.sortable.sort-desc .sort-icon::after { content: ' ▼'; }
th.sortable .sort-icon { opacity: 0.5; font-size: 0.7rem; }
th.sortable.sort-asc .sort-icon,
th.sortable.sort-desc .sort-icon { opacity: 1; }

/* ─── Pool Leaderboard rows ────────────────────────────────────────────────── */
.team-row {
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}
.team-row:hover { background: #f7fbf8; }
.team-row.expanded { background: #eef6f1; }

.team-row td { padding: 12px 14px; }
.team-row td.rank { text-align: center; font-weight: 700; color: #2d7a4f; }
.team-row td.team-name { font-weight: 600; }
.team-row td.earnings { text-align: right; font-weight: 700; color: #1a4c2e; font-size: 0.95rem; }
.team-row td.expand-icon { text-align: center; color: #999; font-size: 0.75rem; }

/* Gold / Silver / Bronze / Winner ranks */
.rank-1 td.rank { background: #ffd700; color: #5a4400 !important; border-radius: 3px; font-weight: 800; }
.rank-2 td.rank { background: #d0d0d0; color: #444 !important; border-radius: 3px; font-weight: 800; }
.rank-3 td.rank { background: #c87533; color: #fff !important; border-radius: 3px; font-weight: 800; }
.rank-4 td.rank { background: #2d7a4f; color: #fff !important; border-radius: 3px; font-weight: 800; }
.rank-5 td.rank { background: #2d7a4f; color: #fff !important; border-radius: 3px; font-weight: 800; }

/* ─── Detail / expand row ──────────────────────────────────────────────────── */
.detail-row td { padding: 0; }
.detail-row.hidden { display: none; }

.golfer-detail {
  background: #f7fbf8;
  border-top: 2px solid #2d7a4f;
  padding: 12px 16px;
  overflow-x: auto;
}

table.golfer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

table.golfer-table thead tr { background: #e8f2ec; }
table.golfer-table thead th {
  padding: 7px 10px;
  text-align: left;
  font-weight: 600;
  color: #1a4c2e;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.golfer-row td {
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.golfer-row:last-child td { border-bottom: none; }

.golfer-row.cut { color: #999; background: #fafafa; }
.golfer-row.cut td:first-child { text-decoration: line-through; }
.golfer-row.not-in-field { color: #bbb; font-style: italic; background: #fafafa; }

.golfer-row td.pos   { font-weight: 600; text-align: center; width: 50px; }
.golfer-row td.score { font-weight: 600; text-align: center; width: 50px; }
.golfer-row td.odds-col  { text-align: center; color: #555; width: 60px; }
.golfer-row td.prize-col { text-align: right; color: #444; width: 110px; }
.golfer-row td.pool-col  { text-align: right; font-weight: 700; color: #1a4c2e; width: 120px; }

/* ─── Round score badges ───────────────────────────────────────────────────── */
.rounds { display: flex; gap: 3px; }
.round-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  background: #e8f2ec;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1a4c2e;
}
.round-empty { background: #f0f0f0; color: #bbb; }
.round-over  { background: #fde8e8; color: #a33; }
.round-even  { background: #e8e8e8; color: #666; }
.round-today { background: #2d7a4f; color: #fff; }
.round-today-under { background: #2d7a4f; color: #fff; }
.round-today-over  { background: #c0392b; color: #fff; }
.round-today-even  { background: #666;    color: #fff; }

/* ─── Teams & Picks tab ────────────────────────────────────────────────────── */
table.picks-table thead th:first-child { width: 22%; }
table.picks-table thead th:nth-child(2) { width: 15%; }
table.picks-table thead th:nth-child(3) { width: 63%; }

.picks-row td { padding: 10px 14px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.picks-row:hover { background: #f7fbf8; }
.picks-row td.team-name { font-weight: 600; }
.picks-row td.earnings   { text-align: right; font-weight: 700; color: #1a4c2e; }

.picks-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pick-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pick-chip.chip-active {
  background: #e8f4ed;
  color: #1a4c2e;
  border-color: #b5ddc7;
}
.pick-chip.chip-cut {
  background: #ffe8e8;
  color: #a03030;
  border-color: #ffbbbb;
  text-decoration: line-through;
}
.pick-chip.chip-nif {
  background: #f0f0f0;
  color: #999;
  border-color: #ddd;
  font-style: italic;
}
.pick-chip .chip-pos {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(0,0,0,0.08);
  padding: 1px 5px;
  border-radius: 8px;
}

/* ─── Tournament tab ───────────────────────────────────────────────────────── */
table.tournament-table thead th.score-col { text-align: center; width: 55px; }
table.tournament-table thead th.today-col { background: rgba(255,255,255,0.15); }
table.tournament-table thead th.earnings  { width: 140px; }

.tourn-row { border-bottom: 1px solid #f0f0f0; transition: background 0.1s; }
.tourn-row:hover { background: #f7fbf8; }
.tourn-row.missed-cut { color: #aaa; background: #fafafa; }
.tourn-row.missed-cut td { font-style: italic; }

.cut-line-row { background: #c0392b; }
.cut-line-cell {
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 8px 14px;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.tourn-row td { padding: 10px 14px; }
.tourn-row td.pos-col   { text-align: center; font-weight: 700; color: #2d7a4f; width: 52px; }
.tourn-row td.score-col { text-align: center; font-weight: 600; }
.tourn-row td.today-col {
  text-align: center;
  font-weight: 700;
  background: #f4faf6;
}
.tourn-row td.prize-col { text-align: right; font-weight: 700; color: #1a4c2e; }

/* Score coloring */
.score-under { color: #c0392b; }
.score-over  { color: #2c3e50; }
.score-even  { color: #555; }

/* Rank highlights for tournament */
.tourn-row.pos-1 td.pos-col { color: #b8860b; font-size: 1rem; }

/* ─── Status badges ────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.badge-cut  { background: #ffe0e0; color: #c0392b; }
.badge-nif  { background: #e8e8e8; color: #888; }
.badge-lead { background: #ffd700; color: #5a4400; }

/* ─── Toast ─────────────────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: #1a4c2e;
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 0.85rem;
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
  z-index: 999;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Loading ────────────────────────────────────────────────────────────────  */
.loading-msg {
  text-align: center;
  padding: 40px;
  color: #666;
  font-size: 1rem;
}

/* ─── Movement badges ───────────────────────────────────────────────────────── */
.move-up, .move-down {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1;
}
.move-up   { color: #2d7a4f; }
.move-down { color: #c0392b; }

.today-delta {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: 0.3px;
}
.delta-up   { color: #2d7a4f; }
.delta-down { color: #c0392b; }
.delta-even { color: #999; }

/* Widen rank/pos columns to accommodate movement badges */
table.leaderboard thead th.rank { width: 72px; }
.tourn-row td.pos-col { width: 72px; }

/* ─── Player link ───────────────────────────────────────────────────────────── */
.player-link {
  cursor: pointer;
  color: inherit;
  border-bottom: 1px dashed rgba(0,0,0,0.25);
  transition: color 0.15s, border-color 0.15s;
}
.player-link:hover { color: #2d7a4f; border-bottom-color: #2d7a4f; }

.pick-chip { cursor: pointer; }
.pick-chip:hover { filter: brightness(0.93); }

/* ─── Player Modal ───────────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 24px 28px;
  min-width: 280px;
  max-width: 620px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  position: relative;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #999;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.modal-close:hover { color: #333; }

.modal-box h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a4c2e;
  margin-bottom: 4px;
  padding-right: 24px;
}

.modal-info {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 14px;
}

.modal-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  font-weight: 600;
  margin-bottom: 8px;
}

.modal-teams {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-teams li {
  background: #f0f7f3;
  border: 1px solid #c8e6d4;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.modal-team-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a4c2e;
  white-space: nowrap;
  padding-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.modal-team-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 5px;
  background: #2d7a4f;
  color: #fff;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  flex-shrink: 0;
}

.modal-team-earnings {
  font-size: 0.75rem;
  font-weight: 700;
  color: #2d7a4f;
  white-space: nowrap;
  margin-left: auto;
  padding-top: 2px;
}

.modal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}

.modal-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.modal-chip-active {
  background: #e8f4ed;
  color: #1a4c2e;
  border-color: #b5ddc7;
}
.modal-chip-selected {
  background: #2d7a4f;
  color: #fff;
  border-color: #1a4c2e;
  box-shadow: 0 0 0 2px rgba(45,122,79,0.3);
}
.modal-chip-cut {
  background: #ffe8e8;
  color: #a03030;
  border-color: #ffbbbb;
  text-decoration: line-through;
}
.modal-chip-nif {
  background: #f0f0f0;
  color: #999;
  border-color: #ddd;
  font-style: italic;
}
.modal-chip-pos {
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(0,0,0,0.1);
  padding: 1px 4px;
  border-radius: 6px;
}

.modal-no-teams {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #999 !important;
  font-style: italic;
  justify-content: center;
}

/* ─── Footer ────────────────────────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: 24px 16px;
  color: #999;
  font-size: 0.75rem;
}

/* ─── Instructions Tab ───────────────────────────────────────────────────────  */
.instructions-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 48px;
  color: #1a1a1a;
}

.instructions-wrap h2 {
  font-size: 1.5rem;
  color: #1a4c2e;
  margin-bottom: 10px;
}

.instructions-wrap h3 {
  font-size: 1.1rem;
  color: #1a4c2e;
  margin: 28px 0 8px;
  border-bottom: 2px solid #d4edda;
  padding-bottom: 4px;
}

.instructions-wrap p {
  margin-bottom: 10px;
  line-height: 1.6;
  font-size: 0.95rem;
}

.instructions-wrap ul {
  margin: 4px 0 10px 20px;
  line-height: 1.8;
  font-size: 0.95rem;
}

.instructions-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 14px;
  font-size: 0.9rem;
}

.instructions-table th {
  background: #1a4c2e;
  color: #fff;
  padding: 8px 12px;
  text-align: left;
}

.instructions-table td {
  padding: 7px 12px;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: top;
}

.instructions-table tr:nth-child(even) td {
  background: #f7fbf7;
}

.instructions-example {
  background: #f0f8f2;
  border-left: 4px solid #2d7a4f;
  padding: 12px 16px;
  margin: 10px 0 14px;
  border-radius: 0 6px 6px 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.delta-example {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────  */
@media (max-width: 700px) {
  .header-titles h1 { font-size: 1.1rem; }
  .header-meta { text-align: left; width: 100%; }
  .tab-btn { padding: 8px 12px; font-size: 0.78rem; }

  table.leaderboard thead th,
  .team-row td { padding: 9px 8px; font-size: 0.82rem; }

  /* Tournament: hide R1-R4 on mobile, keep Today */
  table.tournament-table th:nth-child(5),
  table.tournament-table th:nth-child(6),
  table.tournament-table th:nth-child(7),
  table.tournament-table th:nth-child(8),
  table.tournament-table td:nth-child(5),
  table.tournament-table td:nth-child(6),
  table.tournament-table td:nth-child(7),
  table.tournament-table td:nth-child(8) { display: none; }

  /* Picks: hide earnings column */
  table.picks-table th:nth-child(2),
  table.picks-table td:nth-child(2) { display: none; }

  /* Pool leaderboard: hide expand icon */
  .golfer-row td.prize-col { display: none; }
  table.golfer-table thead th:nth-child(6) { display: none; }
}