/* === Golf (tournament) styles ===
 * Golf-specific UI: leaderboard tables, selection badges, filters, hole grids,
 * 3-ball groups, and form controls. Split out of the former styles/masters.css.
 * Pairs with base/hub.css (page shell) and style/score-colors.css (cell colors).
 * Loaded by every views/golf/* page (and account, which renders golf picks). */

/* --- Selection badges in detail row --- */
.selection-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.sel-badge {
  font-size: 10px;
  font-family: monospace;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
}

.sel-badge.win { background: var(--lime); color: var(--lime-ink); }
.sel-badge.t5 { background: var(--accent-2); color: var(--panel-lo); }
.sel-badge.t10 { background: var(--purple); color: var(--panel-lo); }
.sel-badge.three-ball { background: var(--warn); color: var(--panel-lo); }

/* --- Leaderboard filter toggles --- */
.lb-filters {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.lb-filter-btn {
  font-size: 10px;
  font-family: monospace;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.lb-filter-btn:hover {
  border-color: var(--text-5);
}

.lb-filter-btn.active.mine { border-color: var(--warn); color: var(--warn); }
.lb-filter-btn.active.win { border-color: var(--lime); color: var(--lime); }
.lb-filter-btn.active.t5 { border-color: var(--accent-2); color: var(--accent-2); }
.lb-filter-btn.active.t10 { border-color: var(--purple); color: var(--purple); }
.lb-filter-btn.active.three-ball { border-color: var(--warn); color: var(--warn); }

/* --- Leaderboard sticky header --- */
.lb-sticky-header {
  position: sticky;
  z-index: 10;
  background: var(--panel-lo);
  padding: 12px 0;
}

.cut-heading {
  margin: 24px 0 8px;
  padding: 8px 12px;
  color: var(--bad-soft);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  border-top: 1px solid var(--hairline);
}

/* --- Tables --- */
.masters-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.masters-table th {
  padding: 10px 9px;
  text-align: left;
  font-size: 11px;
  font-family: monospace;
  color: var(--text-3);
  font-weight: 600;
  white-space: nowrap;
  background: var(--panel-lo);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 5;
}

.masters-table td {
  padding: 8px 9px;
  font-family: monospace;
  font-size: 11px;
  color: var(--text-2);
  border-bottom: 1px solid var(--hairline);
}

.masters-table .player-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-bright);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The cursor is the whole affordance -- no hover repaint, the same as every
 * other table in the app. */
.masters-table tr.clickable {
  cursor: pointer;
}

/* --- Selected golfer highlight --- */
.selected-golfer {
  background: var(--accent-soft-2) !important;
}

.selected-golfer td:first-child {
  box-shadow: inset 3px 0 0 var(--accent-2);
}

/* --- Hole-by-hole grid --- */
.hole-grid {
  display: grid;
  grid-template-columns: auto repeat(9, 1fr) auto repeat(9, 1fr) auto;
  gap: 1px;
  font-family: monospace;
  font-size: 11px;
  margin-top: 4px;
}

.hole-grid .hole-header {
  font-size: 9px;
  color: var(--hairline-hi);
  text-align: center;
  padding: 2px 4px;
}

.hole-cell {
  text-align: center;
  font-size: 11px;
  padding: 3px 4px;
  border-radius: 2px;
  min-width: 22px;
}

.round-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-5);
  font-family: monospace;
  padding: 3px 0;
  white-space: nowrap;
}

.nine-group {
  margin-bottom: 6px;
}

.nine-group + .nine-group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid var(--hairline);
}

.nine-row {
  display: flex;
  align-items: center;
  gap: 1px;
  width: 100%;
}

.nine-holes {
  display: flex;
  gap: 1px;
  flex: 1;
}

.nine-holes .hole-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.hole-col .hole-cell {
  width: 100%;
}

.hole-header {
  color: var(--text-2);
  font-weight: 600;
}

.hole-par {
  color: var(--text-3);
  font-size: 10px;
}

.nine-group .nine-row + .nine-row {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--panel-hi2);
}

.round-total {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  justify-content: center;
}

.round-total.hole-header {
  font-weight: 400;
}

/* --- Detail row --- */
.detail-row td {
  padding: 10px 14px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--panel-hi2);
  max-width: 0;
}

.rounds-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- 3-ball --- */
.three-ball-results-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.three-ball-group {
  border: 3px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  width: calc(50% - 3px);
  box-sizing: border-box;
}


.three-ball-group .group-row {
  display: grid;
  grid-template-columns: 1fr 36px 28px;
  padding: 8px 12px;
  align-items: center;
  border-bottom: 1px solid var(--panel-hi2);
  font-family: monospace;
  font-size: 12px;
}

.three-ball-group .group-row:last-child {
  border-bottom: none;
}

.three-ball-group .group-row.my-golfer {
  font-weight: 700;
}

.three-ball-group .group-row.winning {
  background: var(--good-tint);
}

.three-ball-group .group-row.losing {
  background: var(--bad-tint);
}

.three-ball-group .group-row.tied {
  background: var(--warn-tint);
}

.group-row .golfer-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-row .round-score {
  text-align: center;
}

.group-row .thru-col {
  text-align: right;
  color: var(--text-3);
}

/* --- Form controls --- */
.masters-select, .masters-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.masters-select:focus, .masters-btn:focus {
  outline: none;
  border-color: var(--accent-2);
}

.masters-btn {
  cursor: pointer;
  font-weight: 600;
}

.masters-btn:hover {
  background: var(--surface-2);
}

.masters-btn.active {
  background: var(--accent-2);
  color: var(--panel-lo);
  border-color: var(--accent-2);
}

.masters-btn.danger {
  color: var(--bad-soft);
  border-color: var(--bad-soft);
}

.masters-btn.danger:hover {
  background: var(--bad-tint);
}

/* --- Search input --- */
.masters-search {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  width: 100%;
  max-width: 300px;
  margin-bottom: 12px;
}

.masters-search:focus {
  outline: none;
  border-color: var(--accent-2);
}

.masters-search::placeholder {
  color: var(--text-5);
}

/* --- Select golfers table --- */

.masters-table input[type="checkbox"] {
  accent-color: var(--accent-2);
  width: 16px;
  height: 16px;
  margin: 0 auto;
  display: block;
  cursor: pointer;
}

/* --- Refresh badge --- */
.refresh-badge {
  font-size: 11px;
  color: var(--text-5);
  font-family: monospace;
  display: inline-block;
}

/* --- Round selector --- */
.round-selector {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

/* --- Group form --- */
.group-form {
  background: var(--panel-hi);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 12px;
}

.group-form .form-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.group-form .form-row:last-child {
  margin-bottom: 0;
}

.group-form label {
  font-size: 10px;
  color: var(--hairline-hi);
  font-family: monospace;
  min-width: 70px;
}

.group-form select {
  flex: 1;
}

/* --- Autocomplete --- */
.autocomplete-wrap {
  position: relative;
  flex: 1;
}

.masters-autocomplete {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 28px 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  width: 100%;
  box-sizing: border-box;
}

.masters-autocomplete:focus {
  outline: none;
  border-color: var(--accent-2);
}

.masters-autocomplete::placeholder {
  color: var(--text-5);
}

.autocomplete-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-4);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  display: none;
}

.autocomplete-clear.visible {
  display: block;
}

.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}

.autocomplete-list.open {
  display: block;
}

.autocomplete-list li {
  padding: 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.autocomplete-list li.highlighted {
  background: var(--surface-2);
}

.autocomplete-list li:active {
  background: var(--accent-2);
  color: var(--panel-lo);
}

/* --- Scrollable table wrapper --- */
.table-wrap {
  border: 1px solid var(--panel-hi2);
  border-radius: 6px;
  overflow: hidden;
}

/* --- Selection counts --- */
.selection-counts {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  font-family: monospace;
  font-size: 11px;
  color: var(--text-3);
}

.selection-counts .count-badge {
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--hairline);
}

.selection-counts .count-badge.full {
  border-color: var(--good);
  color: var(--good);
}

/* --- Loading --- */
.masters-loading {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-5);
  font-size: 13px;
}

/* --- No data --- */
.masters-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-5);
  font-size: 13px;
  font-family: monospace;
}

/* --- 3-ball results header --- */
.results-header {
  display: grid;
  grid-template-columns: 1fr 36px 28px;
  padding: 6px 12px;
  font-size: 10px;
  color: var(--hairline-hi);
  font-family: monospace;
  font-weight: 600;
  background: var(--panel-hi);
  border-bottom: 1px solid var(--hairline);
}

@media (max-width: 600px) {
  .masters-table th,
  .masters-table td {
    padding: 8px 6px;
  }

  .masters-table .player-name {
    font-size: 11px;
  }

  .hole-grid {
    font-size: 10px;
  }

  .hole-cell {
    min-width: 18px;
    padding: 2px 2px;
  }
}