/* ── Underline Navigation Tabs ─────────────────────────────────────
   Use: .gp-nav-tabs > button.gp-nav-tab[.active]
   Optionally scrollable: add .gp-nav-tabs--scroll on the container
   Badge inside tab: span.gp-nav-tab-badge
──────────────────────────────────────────────────────────────────── */

.gp-nav-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--gp-border);
  margin-bottom: 24px;
}

.gp-nav-tabs--scroll {
  overflow-x: auto;
  scrollbar-width: none;
  gap: 4px;
}

.gp-nav-tabs--scroll::-webkit-scrollbar { display: none; }

.gp-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gp-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}

.gp-nav-tab:hover { color: var(--gp-text-primary); }

.gp-nav-tab.active {
  color: var(--gp-accent);
  border-bottom-color: var(--gp-accent);
  font-weight: 600;
}

/* Badge inside a tab (e.g. athlete count) */
.gp-nav-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  background: var(--gp-surface-2);
  color: var(--gp-text-secondary);
  transition: background 0.15s, color 0.15s;
}

.gp-nav-tab.active .gp-nav-tab-badge {
  background: var(--gp-accent-light);
  color: var(--gp-accent);
}

/* Tab panel visibility */
.gp-nav-panel { display: none; }
.gp-nav-panel.active { display: block; }