:root {
  /* Color Variables */
  --primary-color: #21a3d2;
  --primary-hover: #1a8bb8;
  --selected-color: #84bd4a;
  --selected-hover: #73a63f;
  --text-color: #333;
  --text-light: #666;
  --background-color: #f5f5f5;
  --white: #ffffff;
  --border-color: #ddd;
  --border-light: #e9ecef;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 15px rgba(0, 0, 0, 0.15);

  /* Typography */
  --font-family: Arial, sans-serif;
  --font-size-base: 16px;
  --font-size-small: 14px;
  --font-size-large: 18px;
  --font-size-h1: 28px;
  --font-size-h2: 24px;

  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-xxl: 40px;

  /* Border Radius */
  --border-radius: 8px;
  --border-radius-sm: 5px;
  --border-radius-lg: 12px;

  /* Transitions */
  --transition: all 0.3s ease;
}

/* Global Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  margin: 0;
  padding: var(--spacing-lg);
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--white);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

h1 {
  color: var(--text-color);
  text-align: center;
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-h1);
  font-weight: bold;
}

h2 {
  color: var(--text-color);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-h2);
  font-weight: bold;
}

/* Date Selector Styles */
.date-selector {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.date-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}

.date-button {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  border: 2px solid var(--primary-color);
  border-radius: var(--border-radius-sm);
  background-color: var(--white);
  color: var(--primary-color);
  cursor: pointer;
  transition: var(--transition);
  min-width: 120px;
  text-align: center;
  font-weight: 500;
}

.date-button:hover {
  background-color: var(--primary-color);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.date-button.selected {
  background-color: var(--selected-color);
  border-color: var(--selected-color);
  color: var(--white);
}

.date-button.selected:hover {
  background-color: var(--selected-hover);
  border-color: var(--selected-hover);
}

/* Sports Filter */
.sports-filter {
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

.sports-filter label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: bold;
  color: var(--text-color);
}

.sports-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}

.sport-button {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-small);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background-color: var(--white);
  color: var(--text-color);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.sport-button:hover {
  background-color: var(--border-light);
  border-color: var(--primary-color);
}

.sport-button.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

.sport-button.active:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* Schedule Table */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-lg);
  background-color: var(--white);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.schedule-table th,
.schedule-table td {
  border: 1px solid var(--border-color);
  padding: var(--spacing-md);
  text-align: left;
}

.schedule-table th {
  background-color: var(--primary-color);
  color: var(--white);
  font-weight: bold;
  font-size: var(--font-size-base);
}

.schedule-table tr:nth-child(even) {
  background-color: #f8f9fa;
}

.schedule-table tr:hover {
  background-color: var(--border-light);
}

.time {
  font-weight: bold;
  color: var(--primary-color);
  white-space: nowrap;
  font-size: var(--font-size-base);
}

.sport-name {
  font-weight: bold;
  color: var(--selected-color);
  font-size: var(--font-size-base);
}

.no-events {
  text-align: center;
  color: var(--text-light);
  font-style: italic;
  padding: var(--spacing-xxl);
  font-size: var(--font-size-large);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  body {
    padding: var(--spacing-sm);
  }

  .container {
    padding: var(--spacing-lg);
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  h1 {
    font-size: 24px;
    margin-bottom: var(--spacing-lg);
  }

  h2 {
    font-size: 20px;
    margin-bottom: var(--spacing-md);
  }

  .date-buttons {
    flex-direction: column;
    align-items: center;
  }

  .date-button {
    width: 100%;
    max-width: 200px;
    min-width: auto;
  }

  .sports-buttons {
    flex-direction: column;
    align-items: center;
  }

  .sport-button {
    width: 100%;
    max-width: 200px;
  }

  .schedule-table {
    font-size: var(--font-size-small);
  }

  .schedule-table th,
  .schedule-table td {
    padding: var(--spacing-sm);
  }

  .schedule-table th {
    font-size: var(--font-size-small);
  }

  .time,
  .sport-name {
    font-size: var(--font-size-small);
  }
}

@media (max-width: 480px) {
  .container {
    padding: var(--spacing-md);
  }

  h1 {
    font-size: 20px;
  }

  h2 {
    font-size: 18px;
  }

  .schedule-table th,
  .schedule-table td {
    padding: var(--spacing-xs);
    font-size: 12px;
  }

  .date-button,
  .sport-button {
    font-size: 14px;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}

/* Group Standings Table */
.group-standings-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-lg);
  background-color: var(--white);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.group-standings-table th,
.group-standings-table td {
  border: 1px solid var(--border-color);
  padding: var(--spacing-md);
  text-align: center;
}

.group-standings-table th {
  background-color: var(--primary-color);
  color: var(--white);
  font-weight: bold;
  font-size: var(--font-size-base);
}

.group-standings-table tr:nth-child(even) {
  background-color: #f8f9fa;
}

.group-standings-table tr:hover {
  background-color: var(--border-light);
}

.group-standing-row.place-advance {
  background-color: #d4edda !important;
  border-left: 4px solid var(--selected-color);
}

.group-standing-row.place-advance:hover {
  background-color: #c3e6cb !important;
}

.place-cell {
  font-weight: bold;
  position: relative;
}

.place-number {
  font-size: var(--font-size-large);
  color: var(--text-color);
}

.advance-icon {
  margin-left: var(--spacing-xs);
  font-size: var(--font-size-base);
}

.team-name-cell {
  text-align: left !important;
  font-weight: 500;
}

.stats-cell {
  font-weight: 500;
  color: var(--text-color);
}

.goal-diff {
  font-weight: bold;
}

.goal-diff.positive {
  color: var(--selected-color);
}

.goal-diff.negative {
  color: #dc3545;
}

.goal-diff.neutral {
  color: var(--text-light);
}

.single-group-standing {
  margin-bottom: var(--spacing-xl);
}

.single-group-standing h5 {
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-large);
  font-weight: bold;
  text-align: center;
}

/* Mobile Responsive for Group Standings */
@media (max-width: 768px) {
  .group-standings-table {
    font-size: var(--font-size-small);
  }

  .group-standings-table th,
  .group-standings-table td {
    padding: var(--spacing-sm);
  }

  .group-standings-table th {
    font-size: var(--font-size-small);
  }

  .place-number {
    font-size: var(--font-size-base);
  }
}

@media (max-width: 480px) {
  .group-standings-table th,
  .group-standings-table td {
    padding: var(--spacing-xs);
    font-size: 12px;
  }

  .single-group-standing h5 {
    font-size: var(--font-size-base);
  }
}