/* ============================================
   HOME PAGE - LEAGUE CARDS
   ============================================ */

.leagues-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-6) 0;
}

.league-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 280px;
  max-width: 480px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-250);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
}

.league-card h2 {
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
  color: var(--color-text);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-primary);
  width: 100%;
}

.league-image {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  object-fit: cover;
}

.league-description {
  flex: 1;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
}

/* League card CTA button — solid red (same look as button--primary) */
.league-card .button {
  align-self: center;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.league-card .button:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

/* ============================================
   TEAMS PAGE
   ============================================ */

.teams-season-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.season-tab,
.tournament-tab {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  background: var(--color-white);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.season-tab:hover,
.tournament-tab:hover {
  border-color: var(--color-gray-500);
  color: var(--color-text);
  background: var(--color-gray-100);
}

.season-tab.active,
.tournament-tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.teams-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.team-card {
  flex: 1 1 220px;
  max-width: 320px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-250);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xs);
}

.team-card.user-team {
  border-color: var(--color-primary);
  border-left: 4px solid var(--color-primary);
}

.team-name {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.team-captain {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.roster-player {
  padding: 3px 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-gray-100);
}

.roster-player:last-child {
  border-bottom: none;
}

.roster-player.current-user {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

/* ============================================
 * Group cards: Unassigned & CCSoccer Pool
 * Rendered alongside team cards on /tournament-teams
 * ============================================ */

.team-card.group-card {
  background: var(--color-gray-50, #f8f9fb);
  border-style: dashed;
}

.team-card.unassigned-card {
  border-color: var(--color-gray-400, #9aa0a6);
}

.team-card.pool-card {
  border-color: var(--color-warning, #d99100);
}

.group-card .team-name {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.group-card .group-count {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.group-card .group-subtitle {
  font-style: italic;
}

.scrollable-roster {
  max-height: 480px;
  overflow-y: auto;
  /* Reserve scrollbar gutter so cards don't visually jump when content fits. */
  scrollbar-gutter: stable;
  padding-right: var(--space-2);
}

.roster-empty {
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-muted);
}

/* Not-registered state — card container */
.not-registered-message {
  background: var(--color-white);
  border: 1px solid var(--color-gray-250);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

.not-registered-message p {
  margin: 0 0 var(--space-4) 0;
}

.not-registered-message .button {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.not-registered-message .button:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

/* ============================================
   SCHEDULE PAGE
   ============================================ */

.schedule-season-tabs,
.tournament-schedule-tabs,
.tournament-teams-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

/* ============================================
   MY ACCOUNT HUB
   ============================================ */

.my-account-hub {
  max-width: 860px;
}

.hub-actions-box {
  background: var(--color-white);
  border: 1px solid var(--color-gray-250);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-xs);
}

/* "Actions" heading with red underline */
.hub-actions-title {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-primary);
}

.hub-invites-banner {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.hub-invites-icon {
  font-size: 1.4em;
  flex-shrink: 0;
}

.hub-invites-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-warning-text);
}

.hub-invite-item a {
  color: var(--color-warning-text);
  text-decoration: underline;
}

.hub-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.hub-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  background: var(--color-white);
  border: 1px solid var(--color-gray-250);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.hub-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-gray-400);
}

.hub-card--highlight {
  border-color: var(--color-primary);
  border-left: 4px solid var(--color-primary);
  background: #fff8f8;
}

.hub-card-icon {
  font-size: 1.6em;
  margin-bottom: var(--space-1);
}

.hub-card-title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.hub-card-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ============================================
   MY ORDERS
   ============================================ */

.my-orders {
  max-width: 700px;
}

.my-orders__empty {
  padding: var(--space-10) 0;
  color: var(--color-text-muted);
}

.my-orders__table-wrap {
  overflow-x: auto;
}

.my-orders__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.my-orders__table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-gray-300);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.my-orders__table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-150);
  vertical-align: middle;
}

.my-orders__link {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.my-orders__link:hover {
  text-decoration: underline;
}

.my-orders__state {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  padding: 0.2em 0.6em;
  border-radius: var(--radius-pill);
}

.order-state--completed {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid var(--color-success-border);
}

.order-state--canceled,
.order-state--cancelled {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border: 1px solid var(--color-danger-border);
}

.order-state--draft,
.order-state--pending {
  background: var(--color-gray-100);
  color: var(--color-text-muted);
  border: 1px solid var(--color-gray-300);
}

/* ============================================
   REGISTER CONFIRM (ACCOUNT CREATED) PAGE
   ============================================ */

.register-confirm {
  max-width: 520px;
  margin: var(--space-10) auto;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-gray-250);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8) var(--space-8);
}

.register-confirm__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 2px solid var(--color-success-border);
  border-radius: 50%;
  font-size: 2em;
  font-weight: var(--font-weight-bold);
}

.register-confirm__heading {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-2xl);
  color: var(--color-text);
}

.register-confirm__subhead {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.register-confirm__body {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.register-confirm__next {
  background: var(--color-gray-100);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  margin-bottom: var(--space-6);
}

.register-confirm__next h3 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
}

.register-confirm__btn {
  display: inline-block;
  padding: 0.6em 1.4em;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  margin-bottom: var(--space-4);
  transition: background var(--transition-fast);
}

.register-confirm__btn:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.register-confirm__links {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ============================================
   RULES & CONCUSSION POLICY PAGES
   ============================================ */

.rules-page {
  /* No max-width — theme content region handles layout width */
}

/* Tab nav — pill style matching the season/tournament tabs */
.rules-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.rules-nav__link {
  display: inline-block;
  padding: 6px 16px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  background: var(--color-white);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.rules-nav__link:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.rules-nav__link--active {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Section headings */
.rules-page h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary);
  font-size: var(--text-xl);
  color: var(--color-text);
}

/* Intro text */
.rules-intro {
  margin-bottom: var(--space-2);
}

/* Rules lists */
.rules-list {
  margin: var(--space-3) 0 var(--space-4) 0;
  padding-left: var(--space-5);
}

.rules-list li {
  margin-bottom: var(--space-2);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

/* Two-column comparison layout (Coed vs Men's, Physical vs Cognitive) */
.rules-comparison {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.rules-comparison__column {
  flex: 1 1 280px;
  border: 1px solid var(--color-gray-250);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
}

.rules-comparison__column h3 {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.rules-comparison__column ul {
  margin: 0;
  padding-left: var(--space-4);
}

.rules-comparison__column li {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

/* Source / attribution line */
.rules-source {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.rules-source a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ============================================
   SHARED UTILITIES
   ============================================ */

.schedule-footer-links {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.my-team-grid {
  justify-content: flex-start;
}

@media (max-width: 600px) {
  .leagues-container {
    flex-direction: column;
  }

  .league-card {
    max-width: 100%;
  }

  .hub-cards {
    grid-template-columns: 1fr 1fr;
  }

  .teams-grid {
    flex-direction: column;
  }

  .team-card {
    max-width: 100%;
  }

  .rules-comparison {
    flex-direction: column;
  }

  .register-confirm {
    margin: var(--space-6) 0;
    padding: var(--space-6) var(--space-4);
  }
}

@media (max-width: 400px) {
  .hub-cards {
    grid-template-columns: 1fr;
  }
}