/* Modern CSS Reset and Base Styles - Schedules Page */
:root {
  /* Your Color Palette - Same as Profile & About */
  --primary-color: #043d7c;
  --primary-light: rgba(4, 61, 124, 0.08);
  --primary-dark: #032c59;
  --secondary-color: #3068cc;
  
  /* Refreshed neutrals */
  --neutral-text: #334155;
  --neutral-light: #f1f5f9;
  
  /* Additional colors for better contrast */
  --accent-color: #e63946;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  
  /* Pure colors */
  --white: #ffffff;
  --black: #000000;
  
  /* Gray scale for better contrast */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  
  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Animation Durations */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

/* Modern CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* --- Game Card Row Layout --- */
.game-card .game-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 56px;
    padding: 0 0.5rem;
}

.match-time-box {
    min-width: 64px;
    max-width: 64px;
    background: #f1f5f9;
    color: #334155;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    padding: 0.5rem 0.25rem;
    margin-right: 1rem;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.tbd-game .match-time-box {
    color: var(--neutral-text) !important;
    font-style: italic;
    background: #f8fafc;
}

.match-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-width: 0;
    flex: 1 1 0%;
}

.match-location-box {
    min-width: 110px;
    max-width: 180px;
    color: #475569;
    font-size: 0.95rem;
    font-weight: 500;
    margin-left: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--white);
  min-height: 100vh;
  color: var(--neutral-text);
}

/* Page Header - Modern Glass Effect */
.bg-light {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
  position: relative;
  overflow: hidden;
  color: var(--white) !important;
}


.bg-light .container {
  position: relative;
  z-index: 2;
}

.bg-light h1 {
  color: var(--white) !important;
  font-size: var(--text-4xl);
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
}

@keyframes bounce {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(-65%); }
}

/* Modern Filter Bar - Glass Morphism Design */
.filter-bar {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2xl);
  margin-bottom: var(--space-xl);
  position: relative;
  overflow: hidden;
  transition: all var(--duration-normal) ease;
}


.filter-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
}

.filter-bar:hover::before {
  opacity: 1;
}

.filter-bar:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* Modern Form Controls */
.form-group {
  position: relative;
}

.form-label {
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-sm);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* REPLACE WITH THIS SINGLE, CONSISTENT VERSION: */
.form-label::before {
  content: '';
  width: 4px;
  height: 18px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-right: var(--space-xs); /* Ensure consistent spacing */
}

/* Date Input Styling */
.form-control,
input[type="text"] {
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    min-height: 42px !important;
    padding: 0.375rem 0.5rem !important;
}

.form-control::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transition: width var(--duration-normal) ease;
}

.form-control:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 4px var(--primary-light);
  outline: none;
}

.form-control:focus::before {
  width: 100%;
}

.form-control::placeholder {
  color: var(--gray-500);
}

/* Clear Filters Button - Compact Design for Better Layout */
#clearFilters {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid var(--error-color) !important;
  color: var(--error-color) !important;
  font-weight: 600 !important;
  font-size: 0.65rem !important; /* Smaller font */
  padding: var(--space-xs) var(--space-sm) !important; /* Smaller padding */
  border-radius: var(--radius-md) !important; /* Smaller radius */
  transition: all var(--duration-fast) ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 42px !important; /* Smaller height to match inputs better */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  margin-top: auto !important;
  width: auto !important; /* Let it size to content */
  min-width: 80px !important; /* Minimum width for usability */
  max-width: 100px !important; /* Maximum width to save space */
}

#clearFilters::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.2), transparent);
  transition: left 0.5s ease;
}

#clearFilters:hover {
  background: var(--error-color) !important;
  border-color: var(--error-color) !important;
  color: var(--white) !important;
  transform: translateY(-1px) scale(1.01) !important; /* Smaller scale */
  box-shadow: var(--shadow-sm) !important; /* Smaller shadow */
}

#clearFilters:hover::before {
  left: 100%;
}

#clearFilters i {
  color: inherit !important;
  margin-right: 0.125rem !important; /* Smaller margin */
  font-size: 0.8em !important; /* Smaller icon */
}

/* Show/hide clear button based on filters */
#clearFilters.d-none {
  display: none !important;
}

/* Adjust filter grid layout to accommodate clear button */
.filter-bar .row {
  --bs-gutter-x: 0.75rem; /* Smaller gutter */
}

.filter-bar .col-auto {
  flex: 0 0 auto;
  width: auto;
  padding-right: var(--space-sm) !important; /* Add small spacing */
}

/* Adjust column sizes to fit better */
.filter-bar .col-md-4 {
  flex: 0 0 auto;
  width: 30%; /* Slightly smaller */
}

.filter-bar .col-md-3 {
  flex: 0 0 auto;
  width: 25%; /* Smaller for date */
}

/* Fire Dashed Border Design for ALL Match Containers */

/* Main schedule content container - when games are showing */
#scheduleContent {
  display: grid;
  gap: var(--space-xl);
  background: var(--white);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-2xl);
  padding: var(--space-2xl);
  margin: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
}

/* Match day headers inside the dashed container */
.match-day-header {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: var(--white);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-lg);
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.2); /* Add subtle white border */
  box-shadow: var(--shadow-lg); /* Enhanced shadow */
}

/* Individual match cards get enhanced styling within dashed container */
.match-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) ease;
  overflow: hidden;
  position: relative;
  margin-bottom: var(--space-lg);
  /* Add subtle inner dashed border */
  background-image: linear-gradient(var(--white), var(--white)), 
                    repeating-linear-gradient(90deg, transparent, transparent 8px, var(--gray-100) 8px, var(--gray-100) 12px);
  background-clip: padding-box, border-box;
}

/* Enhanced hover effects for match cards */
.match-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--secondary-color);
  background-image: linear-gradient(var(--white), var(--white)), 
                    repeating-linear-gradient(90deg, transparent, transparent 8px, var(--primary-light) 8px, var(--primary-light) 12px);
}

/* General no schedule - enhance the existing design */
#noSchedule {
  text-align: center;
  padding: var(--space-3xl);
  background: var(--white);
  border-radius: var(--radius-2xl);
  border: 3px dashed var(--secondary-color); /* Make it secondary color and thicker */
  margin: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg); /* Add shadow */
}

/* Make sure alert content appears above patterns */
.team-matches.schedule-feed .alert,
#noSchedule .alert {
  position: relative;
  z-index: 1;
  background: rgba(241, 245, 249, 0.95) !important; /* Slightly transparent */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Enhanced loading state with dashed border */
.enhanced-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) 0;
  background: var(--white);
  border-radius: var(--radius-2xl);
  margin: var(--space-xl) 0;
  border: 2px dashed var(--primary-color); /* Add dashed border to loading */
  position: relative;
  overflow: hidden;
}

.badge.bg-warning {
  background: var(--error-color) !important;
  color: var(--white) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* Make the team alert look exactly like the main no schedule alert */
.team-matches.schedule-feed .alert {
  background: var(--neutral-light) !important;
  border: 1px solid var(--gray-200) !important;
  color: var(--gray-700) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-2xl) !important;
  font-size: var(--text-lg) !important;
  border-left: 4px solid var(--primary-color) !important;
  margin: 0 !important;
  position: relative;
  z-index: 1;
  background: rgba(241, 245, 249, 0.95) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Make the team alert icon look exactly like the main no schedule icon */
.team-matches.schedule-feed .alert i {
  font-size: var(--text-2xl) !important;
  color: var(--primary-color) !important;
  margin-bottom: var(--space-md) !important;
  display: block !important;
  margin-right: 0 !important; /* Override the me-2 class */
}

/* Remove the inline margin class effect */
.team-matches.schedule-feed .alert .fas.fa-info-circle.me-2 {
  margin-right: 0 !important;
}

/* Animated dashed border effect */
@keyframes dash-move {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 20; }
}

/* Desktop layout optimization */
@media (min-width: 769px) {
  .filter-bar .row {
    display: flex;
    align-items: end;
    flex-wrap: nowrap; /* Prevent wrapping on desktop */
    gap: var(--space-sm);
  }
  
  .filter-bar .col-auto {
    flex-shrink: 0;
  }
  
  .filter-bar .col-md-4 {
    flex: 1 1 28%; /* Flexible but prefer 28% */
    min-width: 200px;
  }
  
  .filter-bar .col-md-3 {
    flex: 1 1 22%; /* Flexible but prefer 22% */
    min-width: 180px;
  }
}

/* Modern Loading Animation */
.enhanced-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) 0;
  background: var(--white);
  border-radius: var(--radius-2xl);
  margin: var(--space-xl) 0;
  border: 2px dashed var(--primary-color); /* Add dashed border to loading */
  position: relative;
  overflow: hidden;
}

.loading-ball {
  width: 80px;
  height: 80px;
  position: relative;
  animation: bounce 1.5s infinite ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.loading-ball::before {
  content: '\f1e3';
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  font-size: 60px;
  color: var(--primary-color);
  animation: rotate 3s linear infinite;
  display: block;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  filter: drop-shadow(0 0 20px rgba(48, 104, 204, 0.3));
}

.loading-shadow {
  width: 80px;
  height: 12px;
  background: rgba(4, 61, 124, 0.1);
  border-radius: 50%;
  filter: blur(4px);
  animation: shadow-move 1.5s infinite ease-in-out;
}

.loading-text {
  margin-top: var(--space-lg);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--primary-color);
  animation: pulse 1.5s infinite;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-30px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes shadow-move {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(0.6);
    opacity: 0.1;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.match-header {
  padding: var(--space-xl);
  background: linear-gradient(135deg, var(--neutral-light), var(--white));
  border-bottom: 1px solid var(--gray-200);
}

.league-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: var(--white);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

/* Horizontal Match Layout */
.match-teams {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: 60px;
}

.match-time {
  font-size: var(--text-sm);
  color: var(--gray-600);
  font-weight: 700;
  background: var(--gray-100);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  min-width: 60px;
  text-align: center;
  flex-shrink: 0;
}

.home-team {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}

.home-team-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--gray-800);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Team badge with preserved aspect ratio */
.team-badge {
  max-width: 30px;
  max-height: 30px;
  width: auto;
  height: auto;
  transition: all var(--duration-normal) ease;
  flex-shrink: 0;
  object-fit: contain; /* Ensures the entire logo is visible */
  display: block;
}

.vs-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  flex-shrink: 0;
}

.vs-text {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--primary-color);
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

.away-team {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-start;
}

.away-team-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--gray-800);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-location {
  font-size: var(--text-sm);
  color: var(--gray-600);
  font-weight: 600;
  text-align: right;
  flex-shrink: 0;
  min-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-details {
  padding: var(--space-xl);
  background: var(--white);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--gray-100);
}

.detail-row:last-child {
  border-bottom: none;
}

.filter-bar.sticky-filters {
  padding-top: var(--space-xl) !important; /* 2rem = 32px of whitespace */
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-lg) !important;
}

.select-option.team-option img[alt="All Teams logo"],
.select-option.league-option img[alt="All Leagues logo"] {
  display: none !important;
}

/* Adjust spacing when no icon */
.select2-selection__rendered[title="All Teams"] .select-option,
.select2-selection__rendered[title="All Leagues"] .select-option {
  gap: 0 !important;
  justify-content: flex-start;
}


.detail-label {
  font-weight: 600;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Modern Badge Design - Consistent with Schedules Page */
.badge.bg-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  font-size: var(--text-xs) !important;
  padding: var(--space-xs) var(--space-md) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: var(--shadow-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all var(--duration-fast) ease !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

/* Subtle shimmer effect on hover */
.badge.bg-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}


.badge.bg-primary:hover::before {
  left: 100%;
}

/* Hover state */
.badge.bg-primary:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(255, 255, 255, 0.4);
}

.detail-label i {
  color: var(--secondary-color);
  width: 16px;
  text-align: center;
}

.detail-value {
  color: var(--gray-800);
  font-weight: 500;
}

/* Match Status Indicators */
.match-status {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.match-status.scheduled {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success-color);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.match-status.live {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error-color);
  border: 1px solid rgba(239, 68, 68, 0.2);
  animation: pulse 2s infinite;
}

.match-status.finished {
  background: rgba(100, 116, 139, 0.1);
  color: var(--gray-500);
  border: 1px solid rgba(100, 116, 139, 0.2);
}

/* No Results State */
#noSchedule {
  text-align: center;
  padding: var(--space-3xl);
  background: var(--white);
  border-radius: var(--radius-2xl);
  border: 3px dashed var(--secondary-color); /* Make it secondary color and thicker */
  margin: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg); /* Add shadow */
}

#noSchedule .alert {
  background: var(--neutral-light);
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  font-size: var(--text-lg);
  border-left: 4px solid var(--primary-color);
}

#noSchedule .alert i {
  font-size: var(--text-2xl);
  color: var(--primary-color);
  margin-bottom: var(--space-md);
  display: block;
}

/* Override the existing .form-control styles specifically for date input */
#dateFilter.form-control {
  background: var(--white) !important;
  border: 2px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-md) !important;
  font-size: var(--text-base) !important;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  color: var(--neutral-text) !important;
  transition: all var(--duration-fast) ease !important;
  min-height: 48px !important;
  height: auto !important;
  position: relative;
  overflow: hidden;
}

/* Remove the gradient line for date input */
#dateFilter.form-control::before {
  display: none !important;
}

/* Ensure the flatpickr dropdown matches the overall theme */
.flatpickr-calendar {
  background: var(--white);
  border: 2px solid var(--secondary-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.flatpickr-day {
  color: var(--neutral-text);
}

.flatpickr-day:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.flatpickr-day.selected {
  background: var(--secondary-color);
  color: var(--white);
}

.flatpickr-day.today {
  border-color: var(--primary-color);
}

.flatpickr-current-month {
  color: var(--primary-color);
}

.flatpickr-weekday {
  color: var(--gray-600);
  font-weight: 600;
}

/* Hide badges specifically in team-filtered contexts */
.team-matches.schedule-feed .badge.bg-primary,
.team-matches .badge.bg-primary.rounded-pill.ms-2 {
  display: none !important;
}

/* Keep badges visible for league filtering and general views */
.match-day-header .badge.bg-primary:not(.team-filtered) {
  display: inline-flex !important;
}

/* Scroll offset for sticky header */
html {
  scroll-padding-top: 200px; /* Adjust this value to match your sticky filter bar height */
}

/* Accessibility & Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .loading-ball::before {
    animation: none;
  }
  
  .bg-light h1::after {
    animation: none;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --gray-200: #000000;
    --gray-300: #333333;
    --primary-color: #0000FF;
    --secondary-color: #000080;
  }
}

/* Print Styles */
@media print {
  .navbar,
  .filter-bar {
    display: none !important;
  }
  
  .bg-light {
    background: white !important;
    color: black !important;
  }
  
  .match-card {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #000 !important;
    page-break-inside: avoid;
  }
  
  .match-day-header {
    background: white !important;
    color: black !important;
    border: 1px solid #000 !important;
  }
}

/* Focus Indicators */
*:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Icon colors consistency */
main .fas, 
main .fab, 
main .far, 
main .fal, 
main .fad, 
main .fass, 
main .fasr, 
main .fasl, 
main .fa,
.navbar .fas,
.navbar .fab,
.navbar .far,
.navbar .fal,
.navbar .fad,
.navbar .fass,
.navbar .fasr,
.navbar .fasl,
.navbar .fa {
    color: var(--primary-color) !important;
}

/* Navbar icons should be white */
.navbar .nav-link .fas,
.navbar .nav-link .fab,
.navbar .nav-link .far {
    color: var(--white) !important;
}

/* Loading states */
.loading-shimmer {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Modern animations */
.fade-in {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}


@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Responsive Design - Clean & Professional */
@media (max-width: 990px) {

    .desktop-time-display,
  .desktop-location-display {
    display: none !important;
  }
  .mobile-chevron {
    display: flex !important;
    align-items: center;
    cursor: pointer;
    font-size: 1.1em;
    color: #64748b;
    margin-left: 8px;
    transition: transform 0.2s;
  }
  .game-row {
    cursor: pointer;
  }
  .match-details-section {
    display: none;
    padding: 0.75rem 0.5rem 0.5rem 0.5rem;
    background: white;
    border-radius: 0 0 0.75rem 0.75rem;
    border-top: 1px solid #e2e8f0;
    margin-top: 0.25rem;
    font-size: 0.98em;
    animation: fadeIn 0.2s;
  }
  .match-details-section.show {
    display: block;
  }
  .match-time-detail, .match-location-detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #334155;
    font-weight: 500;
  }
  .bg-light .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  /* Schedule Content - Remove dashed border on mobile */
  #scheduleContent {
    padding: var(--space-lg) !important;
    margin: var(--space-sm) 0 !important;
    border-radius: var(--radius-sm) !important;
  }
  
  /* No Schedule message - Remove dashed border on mobile */
  #noSchedule {
    padding: var(--space-2xl) var(--space-lg);
    margin: var(--space-lg) 0;
    border-radius: var(--radius-xl);
    border: none !important; /* Remove dashed border */
    background: var(--gray-50); /* Light background instead */
    box-shadow: var(--shadow-sm); /* Subtle shadow instead */
  }
  
  /* Enhanced loading - Remove dashed border on mobile */
  .enhanced-loading {
    padding: var(--space-2xl) 0;
    background: var(--gray-50); /* Light background instead */
    border-radius: var(--radius-xl);
    margin: var(--space-xl) 0;
    border: none !important; /* Remove dashed border */
    box-shadow: var(--shadow-sm); /* Subtle shadow instead */
  }
  /* Page Header - More compact */
  .bg-light {
    padding: var(--space-xl) 0;
  }
  
  .bg-light h1 {
    font-size: var(--text-3xl);
    margin-bottom: 0;
  }
  
  /* Container adjustments */
  .container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
  
  /* Filter Bar - Hide on mobile (replaced with floating button) */
  .filter-bar {
    display: none !important;
  }
  
  /* Enhanced Loading - More compact */
  .enhanced-loading {
    padding: var(--space-2xl) 0;
  }
  
  .loading-ball {
    width: 60px;
    height: 60px;
  }
  
  .loading-ball::before {
    font-size: 48px;
  }
  
  .loading-shadow {
    width: 60px;
    height: 10px;
  }
  
  .loading-text {
    font-size: var(--text-lg);
    margin-top: var(--space-lg);
  }
  
  /* Schedule Content - Better spacing */
  #scheduleContent {
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    border-radius: var(--radius-xl);
  }
  
  /* Month sections */
  .month-section {
    margin-bottom: var(--space-2xl);
  }
  
  .month-section h2,
  .month-section h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-lg);
  }
  
  /* Date sections */
  .date-section {
    margin-bottom: var(--space-xl);
  }
  
  .date-section h3,
  .date-section h4,
  .date-section h5 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-md);
  }
  
  .date-section .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
  
  /* League sections */
  .league-section {
    margin-bottom: var(--space-lg);
  }
  
  .league-header {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
  }
  
  .league-header h4,
  .league-header h5,
  .league-header h6 {
    font-size: var(--text-base);
  }
  
  .league-header img {
    width: 20px !important;
    height: 20px !important;
  }
  
  /* Team Header - Compact layout */
  .team-header {
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
  }
  
  .team-header img {
    width: 40px !important;
    height: 40px !important;
  }
  
  .team-header h2 {
    font-size: var(--text-xl);
  }
  
  .team-header .badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
  }
  
  /* Game Cards - Mobile optimized */
  .game-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-lg);
    /* Remove fixed height/min-height if present */
  }
  .game-card .card-body {
    padding: var(--space-md);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .game-row {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .match-teams {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: var(--space-xs);
  }
  .home-team, .away-team {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }
.team-name {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  font-size: 0.7rem !important;
  font-weight: 600;
  display: inline-block;
  max-width: 100%;
}
  
  /* Hide desktop elements on mobile */
  .desktop-time-display,
  .desktop-location-display {
    display: none !important;
  }
  
  
  .home-team,
  .away-team {
    flex: 1;
    min-width: 0;
  }
  
  .team-badge {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }

    /* Reduce gap between team name and logo */
  .home-team, .away-team {
    gap: 4px !important; /* was 10px or more */
  }
  
  /* Reduce gap between home, vs, and away */
  .match-teams {
    gap: 8px !important; /* was 24px or more */
  }
  
  /* Reduce padding in vs-container */
  .vs-container {
    padding: 0 2px !important; /* was var(--space-xs) or more */
  }
  
  /* Remove extra margin from team-badge images */
  .team-badge {
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
  }
  
  .vs-container {
    flex-shrink: 0;
    padding: 0 var(--space-xs);
  }
  
  .vs {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--primary-color);
  }
  
  /* Match details (collapsible) */
  .match-details-section {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--gray-200);
    transition: all var(--duration-fast) ease;
  }
  
  .match-details-section.show {
    background: var(--gray-50);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
  }
  
  .match-details-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0 !important;
  }
    .match-time-detail i,
  .match-location-detail i {
    margin-right: 3px !important; /* Reduce icon-to-text gap */
    margin-bottom: 0 !important;  /* Remove any bottom margin */
  }
  .match-time-detail,
  .match-location-detail {
    margin-bottom: 0 !important;
    gap: 3px !important; /* Reduce gap between icon and text */
    align-items: center;
  }
  /* No Schedule message */
  #noSchedule {
    padding: var(--space-2xl) var(--space-lg);
    margin: var(--space-lg) 0;
    border-radius: var(--radius-xl);
  }
  
  #noSchedule .alert {
    padding: var(--space-lg);
    font-size: var(--text-base);
    border-radius: var(--radius-lg);
  }
  
  #noSchedule .alert i {
    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);
  }
  
  /* Floating buttons */
  .filter-btn,
  .calendar-btn {
    width: 56px;
    height: 56px;
    bottom: var(--space-xl);
    box-shadow: var(--shadow-lg);
    border-radius: 50%;
    transition: transform var(--duration-fast) ease;
  }
  
  .filter-btn {
    right: var(--space-xl);
    background: var(--primary-color);
  }
  
  .calendar-btn {
    left: var(--space-xl);
    background: var(--secondary-color);
  }
  
  .filter-btn:hover,
  .calendar-btn:hover {
    transform: scale(1.05);
  }
  
  .filter-count {
    width: 20px;
    height: 20px;
    font-size: 0.65rem;
    top: -4px;
    right: -4px;
  }
  
  /* Mobile Filter Drawer */
  .filter-drawer {
    width: 90%;
    right: -100%; /* Always fully off-screen */
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  }
  
  .drawer-header {
    padding: var(--space-lg);
    background: var(--primary-color);
    color: var(--white);
    border-radius: var(--radius-xl) 0 0 0;
  }
  
  .drawer-title {
    font-size: var(--text-lg);
    font-weight: 600;
  }
  
  .drawer-close {
    color: var(--white);
    font-size: var(--text-xl);
  }
  
  .drawer-content {
    padding: var(--space-lg);
  }
  
  .drawer-filter-group {
    margin-bottom: var(--space-xl);
  }
  
  .drawer-filter-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }
  
  .drawer-filter-label i {
    color: var(--primary-color);
    width: 16px;
  }
  
  .form-select {
    padding: var(--space-md);
    font-size: var(--text-base);
    border-radius: var(--radius-lg);
    border: 2px solid var(--gray-200);
    min-height: 44px;
  }
  
  .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
  }
  
  /* Mobile Active Filters */
  .mobile-active-filters {
    margin: var(--space-md) 0 var(--space-xl);
  }
  
  .mobile-filter-badge {
    background: var(--primary-light);
    color: var(--primary-color);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    border: 1px solid var(--primary-color);
  }
  
  .badge-remove {
    color: var(--primary-color);
    margin-left: var(--space-sm);
  }
    
    /* Drawer Actions - Inverted button styling */
    .drawer-actions {
      padding: var(--space-md) var(--space-lg);
      border-top: 1px solid var(--gray-200);
      display: flex;
      gap: var(--space-sm);
    }
    
    .drawer-actions .btn {
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
      font-weight: 600;
      border-radius: var(--radius-md);
      min-height: 40px;
      border: 2px solid var(--primary-color); /* Same border for both */
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      transition: all var(--duration-fast) ease;
    }
    
    /* Clear All button - outlined style */
    .btn-outline-secondary {
      background: var(--white) !important;
      border-color: var(--primary-color) !important;
      color: var(--primary-color) !important;
    }
    
    .btn-outline-secondary:hover {
      background: var(--primary-color) !important;
      border-color: var(--primary-color) !important;
      color: var(--white) !important;
      transform: translateY(-1px);
    }
    
    /* Apply Filters button - filled style */
    .btn-primary {
      background: var(--primary-color) !important;
      border-color: var(--primary-color) !important;
      color: var(--white) !important;
    }
    
    .btn-primary:hover {
      background: var(--white) !important;
      border-color: var(--primary-color) !important;
      color: var(--primary-color) !important;
      transform: translateY(-1px);
    }
    
  /* Calendar styling for mobile */
  .flatpickr-calendar.floating-calendar {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 2px solid var(--primary-color);
  }
  
  /* Icons - subtle reduction */
  .fas, .fab, .far, .fal, .fad, .fass, .fasr, .fasl, .fa {
    font-size: 0.9em !important;
  }
  
  /* Highlight animation for date jumping */
  .highlight-section {
    animation: highlight-fade 2s ease;
    border-radius: var(--radius-lg);
  }
  
  @keyframes highlight-fade {
    0%, 30% { 
      background-color: var(--primary-light);
      transform: scale(1.01);
    }
    100% { 
      background-color: transparent;
      transform: scale(1);
    }
  }
}

/* Extra small screens (phones ≤576px) */
@media (max-width: 576px) {
  .game-card .card-body {
    padding: var(--space-sm);
  }
  .game-row {
    padding: 0 var(--space-xs);
    min-height: 44px;
  }
  .team-badge {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }
  .team-name {
    font-size: 0.65rem !important;
  }
  .match-details-section {
    font-size: 0.92em;
    padding: 0.5rem 0.25rem 0.25rem 0.25rem;
  }
  .match-details-content {
    gap: 0.25rem;
  }
}

/* iPad/tablet screens (portrait/landscape: 990px–996px) */
@media (min-width: 990px) and (max-width: 996px) {
  .game-card .card-body {
    padding: var(--space-md);
  }
  .game-row {
    min-height: 48px;
    gap: 0.75rem;
  }
  .team-badge {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }
  .team-name {
    font-size: 0.8rem !important;
  }
  .match-details-section {
    font-size: 1em;
    padding: 0.75rem 0.5rem 0.5rem 0.5rem;
  }
  .match-details-content {
    gap: 0.4rem;
  }
}

/* Landscape Mobile */
@media (max-width: 990px) and (orientation: landscape) {
  .bg-light {
    padding: var(--space-lg) 0;
  }
  
  .enhanced-loading {
    padding: var(--space-xl) 0;
  }
  
  .team-header {
    padding: var(--space-md);
  }
  
  .filter-btn,
  .calendar-btn {
    bottom: var(--space-lg);
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  .game-card {
    min-height: 60px;
  }
  
  .match-teams {
    min-height: 48px;
  }
  
  .filter-btn,
  .calendar-btn {
    min-width: 56px;
    min-height: 56px;
  }
  
  .form-select {
    min-height: 48px;
  }
  
  .btn {
    min-height: 48px;
  }
}

@media (max-width: 990px) {
  .d-flex.flex-wrap.gap-2.ms-md-auto.mt-2.mt-md-0.align-items-md-center {
display: none !important;
  }
  .d-flex.flex-wrap.gap-2.ms-md-auto.mt-2.mt-md-0.align-items-md-center .badge {
display: none !important;
  }
}

@media (max-width: 990px) {
  .team-header {
    padding: 0.3rem 0 0.3rem 0 !important;
    margin-bottom: 0.2rem !important;
  }
  .team-header .d-flex.align-items-center.mb-2.mb-md-0 {
    margin-left: -5px !important; /* Move logo and team name 5px left */
  }
  .team-header img {
    width: 32px !important;
    height: 32px !important;
    margin-right: 0.4rem !important;
  }
  .team-header .h3,
  .team-header h2 {
    font-size: 1.05rem !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
  }
  .team-header .d-flex.flex-wrap.gap-2.ms-md-auto.mt-2.mt-md-0.align-items-md-center {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    gap: 0.2rem !important;
  }
  .team-header .badge {
    font-size: 0.62rem !important;
    padding: 0.15em 0.35em !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
  }
  .team-header.mb-4 {
    margin-bottom: 0.2rem !important;
  }
  .team-header.pb-2 {
    padding-bottom: 0.1rem !important;
  }
  .team-header.border-bottom {
    border-bottom-width: 1px !important;
  }
}

/* Abstract, simple month section header for both PC and mobile */
.month-section h3,
.month-section .h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-color);
  background: none;
  border-bottom: 1.5px solid var(--gray-200);
  padding-bottom: 0.5rem;
  margin-bottom: 1.2rem;
  letter-spacing: 0.01em;
  text-align: left;
  box-shadow: none;
  border-radius: 0;
  line-height: 1.2;
}

/* Mobile: slightly smaller and more compact */
@media (max-width: 990px) {
  .month-section h3,
  .month-section .h4 {
    font-size: 1.05rem;
    padding-bottom: 0.35rem;
    margin-bottom: 0.7rem;
    border-bottom-width: 1px;
    text-align: left;
  }
}

@media (max-width: 990px) {
  .match-time-detail {
    font-size: 0.85em !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
  }
  .match-location-detail {
    font-size: 0.85em !important;
    margin-right: 10px !important;
    margin-left: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
  }
  .match-time-detail i,
  .match-location-detail i {
    margin-right: 3px !important;
    font-size: 1em !important;
  }
}

@media (max-width: 990px) {
  .match-details-section .match-details-content {
    margin-top: 10px !important;
  }
}

input[type="text"].form-control[readonly] {
    cursor: pointer;
    /* Optional: add a calendar icon as background */
    background-image: url('data:image/svg+xml;utf8,<svg fill="gray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2" fill="none" stroke="gray" stroke-width="2"/><line x1="16" y1="2" x2="16" y2="6" stroke="gray" stroke-width="2"/><line x1="8" y1="2" x2="8" y2="6" stroke="gray" stroke-width="2"/><line x1="3" y1="10" x2="21" y2="10" stroke="gray" stroke-width="2"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75em center;
    background-size: 1.2em 1.2em;
    padding-right: 2.2em; /* Make space for the icon */
}

@media (max-width: 990px) {
  .match-ticket-detail {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 0.85em !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }
  .match-ticket-detail .ticket-link-btn {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: inherit !important;
    text-decoration: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  .match-ticket-detail .ticket-link-btn i {
    font-size: 1em !important;
    margin: 0 2px 0 0 !important;
    position: relative;
    top: 1px;
  }
  .match-ticket-detail .ticket-link-btn span {
    font-size: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
  }
  .match-ticket-detail .ticket-link-btn i.fa-arrow-up-right-from-square {
    font-size: 0.95em !important;
    margin-left: 2px !important;
    top: 1px !important;
  }
}

@media (max-width: 990px) {
  .match-details-content {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important; /* Equal space between all three */
    margin-top: 10px !important;
    width: 100%;
    margin-left: -8px !important;
  }
  .match-time-detail,
  .match-location-detail,
  .match-ticket-detail {
    flex: 1 1 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.85em !important;
  }
  .match-ticket-detail {
    margin-top: 0 !important;
  }
  .match-ticket-detail .ticket-link-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 769px) {
  .ticket-link-btn i.fa-ticket-alt {
    position: relative;
    top: 0.5px;
  }
}

/* Bundesliga-style pagination buttons */
.pagination-controls .btn-outline-primary,
.pagination-controls .btn-outline-primary.btn-sm {
    border-radius: 20px;
    border-width: 2px;
    font-weight: 600;
    font-size: 1rem;
    padding: 6px 22px;
    color: #043d7c;
    background: #fff;
    border-color: #043d7c;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(4,61,124,0.06);
    letter-spacing: 0.03em;
}

.pagination-controls .btn-outline-primary:hover,
.pagination-controls .btn-outline-primary:focus {
    background: #043d7c;
    color: #fff;
    border-color: #043d7c;
    box-shadow: 0 4px 16px rgba(4,61,124,0.12);
    text-decoration: none;
}

.pagination-controls .btn-outline-primary:active {
    background: #021e3a;
    color: #fff;
    border-color: #021e3a;
}

.pagination-controls {
    gap: 1rem !important;
    margin-bottom: 0.5rem;
}

/* Even smaller pagination buttons on mobile */
@media (max-width: 990px) {
    .pagination-controls .btn-outline-primary,
    .pagination-controls .btn-outline-primary.btn-sm {
        font-size: 0.78rem !important;
        padding: 3px 10px !important;
        border-radius: 12px !important;
        min-width: 0 !important;
        min-height: 28px !important;
        height: 28px !important;
        line-height: 1.1 !important;
    }
    .pagination-controls {
        gap: 0.5rem !important;
        margin-bottom: 0.2rem !important;
    }
}

/* Show mobile filter and calendar buttons up to 980px */
@media (max-width: 980px) {
    .filter-bar {
        display: none !important;
    }
    .filter-btn,
    .calendar-btn {
        display: flex !important;
    }
}
@media (min-width: 981px) {
    .filter-btn,
    .calendar-btn {
        display: none !important;
    }
}

.no-games-month {
    min-height: 320px;
    text-align: center;
    opacity: 0.95;
}
.no-games-month img {
    filter: grayscale(0.2);
}
.no-games-month h3 {
    font-weight: 600;
    font-size: 1.35rem;
}
.no-games-month p {
    font-size: 1rem;
}