/* Tennis-themed color palette and variables */
:root {
  --tennis-green: #2E8B57;
  --tennis-green-light: #3CB371;
  --tennis-green-dark: #228B22;
  --court-clay: #CD853F;
  --court-grass: #32CD32;
  --court-hard: #708090;
  --ball-yellow: #FFD700;
  --ball-yellow-light: rgba(255, 215, 0, 0.1);
  --ball-yellow-glow: rgba(255, 215, 0, 0.2);
  --ball-yellow-accent: rgba(255, 215, 0, 0.05);
  --net-blue: #4169E1;
  --text-primary: #2c3e50;
  --text-secondary: #6c757d;
  --bg-light: #f8f9fa;
  --shadow: 0 2px 10px rgba(0,0,0,0.1);
  --shadow-hover: 0 4px 20px rgba(0,0,0,0.15);
  --shadow-yellow: 0 0 20px rgba(255, 215, 0, 0.15);
}

/* Global styles */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background: linear-gradient(135deg,
    var(--ball-yellow-accent) 0%,
    rgba(46, 139, 87, 0.01) 25%,
    var(--ball-yellow-accent) 50%,
    rgba(46, 139, 87, 0.01) 75%,
    var(--ball-yellow-accent) 100%);
  background-attachment: fixed;
}

/* Tennis court pattern backgrounds */
.tennis-court-bg {
  background-image:
    linear-gradient(90deg, transparent 49%, var(--ball-yellow-light) 49%, var(--ball-yellow-light) 51%, transparent 51%),
    linear-gradient(transparent 49%, rgba(65, 105, 225, 0.03) 49%, rgba(65, 105, 225, 0.03) 51%, transparent 51%);
  background-size: 40px 40px;
}

.tennis-ball-shadow {
  background: radial-gradient(ellipse at center,
    var(--ball-yellow-light) 0%,
    var(--ball-yellow-accent) 40%,
    transparent 70%);
}

/* Hero section with animated gradient */
.hero-section {
  background: linear-gradient(45deg,
    var(--tennis-green) 0%,
    var(--ball-yellow) 25%,
    var(--tennis-green) 50%,
    var(--ball-yellow) 75%,
    var(--tennis-green) 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  color: white;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Navigation improvements */
.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.navbar-brand:hover {
  transform: scale(1.02);
}

.navbar-brand .fa-tennis-ball {
  color: var(--ball-yellow);
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.3));
}

/* Card styling for tennis theme */
.card {
  border: none;
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover), var(--shadow-yellow);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tennis-green), var(--ball-yellow), var(--tennis-green));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover::before {
  opacity: 1;
}

/* Yellow accent border variant */
.yellow-accent-border {
  border-left: 4px solid var(--ball-yellow);
  box-shadow: 0 0 20px var(--ball-yellow-glow);
}

/* Tennis glow effect */
.tennis-glow {
  box-shadow: 0 0 20px var(--ball-yellow-glow);
}

.tennis-glow:hover {
  box-shadow: 0 0 30px var(--ball-yellow-glow);
}

.card-header {
  background: linear-gradient(135deg, var(--tennis-green), var(--tennis-green-light));
  color: white;
  border-bottom: none;
  padding: 1rem 1.5rem;
}

.card-header h5, .card-header h4 {
  margin: 0;
  font-weight: 600;
}

.card-body {
  padding: 1.5rem;
}

/* Button styling */
.btn-tennis {
  background: var(--tennis-green);
  border-color: var(--tennis-green);
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-tennis::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--ball-yellow), transparent);
  transition: left 0.5s ease;
}

.btn-tennis:hover::before {
  left: 100%;
}

.btn-tennis:hover {
  background: var(--tennis-green-dark);
  border-color: var(--tennis-green-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46, 139, 87, 0.3), 0 0 20px var(--ball-yellow-glow);
}

.btn-tennis:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(46, 139, 87, 0.2);
}

.btn-tennis i {
  margin-right: 0.5rem;
}

/* Yellow accent button variant */
.btn-yellow-accent {
  background: linear-gradient(135deg, var(--tennis-green), var(--ball-yellow));
  border: none;
  color: white;
}

.btn-yellow-accent:hover {
  background: linear-gradient(135deg, var(--tennis-green-dark), #FFD700);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* Table improvements */
.table-tennis {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.table-tennis thead th {
  background: linear-gradient(135deg, var(--tennis-green), var(--tennis-green-light));
  color: white;
  border: none;
  font-weight: 600;
  padding: 1rem;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
}

.table-tennis tbody tr {
  transition: all 0.2s ease;
}

.table-tennis tbody tr:hover {
  background: rgba(46, 139, 87, 0.05);
  transform: scale(1.01);
}

.table-tennis tbody td {
  padding: 1rem;
  border-bottom: 1px solid #f1f3f4;
  vertical-align: middle;
}

/* Status badges */
.badge-current {
  background: linear-gradient(135deg, var(--tennis-green), var(--tennis-green-light));
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  box-shadow: 0 0 10px var(--ball-yellow-glow);
}

.badge-not-current {
  background: linear-gradient(135deg, var(--court-clay), #D2691E);
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 20px;
}

.badge-completed {
  background: linear-gradient(135deg, var(--ball-yellow), #FFA500);
  color: #2c3e50;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  box-shadow: 0 0 15px var(--ball-yellow-glow);
}

.badge-pending {
  background: linear-gradient(135deg, #FFE4B5, var(--ball-yellow));
  color: #2c3e50;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 20px;
}

/* Form styling */
.form-control, .form-select {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: rgba(255, 215, 0, 0.02);
}

.form-control:focus, .form-select:focus {
  border-color: var(--tennis-green);
  box-shadow: 0 0 0 0.2rem rgba(46, 139, 87, 0.25), 0 0 15px var(--ball-yellow-glow);
  transform: translateY(-1px);
  background: rgba(255, 215, 0, 0.05);
}

.form-control:valid {
  border-color: var(--tennis-green);
  background: rgba(46, 139, 87, 0.02);
}

.form-control:valid:focus {
  box-shadow: 0 0 0 0.2rem rgba(46, 139, 87, 0.25), 0 0 15px var(--ball-yellow-glow);
}

.form-label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.form-text {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* Alert styling */
.alert {
  border-radius: 12px;
  border: none;
  box-shadow: var(--shadow);
}

.alert-success {
  background: linear-gradient(135deg, #d4edda, #c3e6cb);
  color: #155724;
}

.alert-danger {
  background: linear-gradient(135deg, #f8d7da, #f5c6cb);
  color: #721c24;
}

/* Loading spinner */
.spinner-border-tennis {
  color: var(--tennis-green);
}

/* Responsive improvements */
@media (max-width: 768px) {
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .card-body {
    padding: 1rem;
  }

  .table-tennis {
    font-size: 0.875rem;
  }

  .table-tennis thead th,
  .table-tennis tbody td {
    padding: 0.75rem 0.5rem;
  }
}

/* Utility classes */
.text-tennis {
  color: var(--tennis-green) !important;
}

.bg-tennis {
  background: var(--tennis-green) !important;
}

.border-tennis {
  border-color: var(--tennis-green) !important;
}

/* Yellow accent utilities */
.text-yellow {
  color: var(--ball-yellow) !important;
}

.bg-yellow-accent {
  background: var(--ball-yellow-accent) !important;
}

.border-yellow {
  border-color: var(--ball-yellow) !important;
}

.glow-yellow {
  box-shadow: 0 0 20px var(--ball-yellow-glow) !important;
}

/* Animation classes */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@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 { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Tennis court pattern background (optional) */
.tennis-court-bg {
  background-image:
    linear-gradient(90deg, transparent 49%, rgba(112, 128, 144, 0.1) 49%, rgba(112, 128, 144, 0.1) 51%, transparent 51%),
    linear-gradient(transparent 49%, rgba(65, 105, 225, 0.1) 49%, rgba(65, 105, 225, 0.1) 51%, transparent 51%);
  background-size: 20px 20px;
}

/* Tennis ball pattern overlays */
.tennis-ball-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 80%, var(--ball-yellow-light) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--ball-yellow-accent) 0%, transparent 50%),
    radial-gradient(circle at 60% 40%, var(--ball-yellow-light) 0%, transparent 30%);
  pointer-events: none;
  z-index: 0;
}

.tennis-ball-pattern > * {
  position: relative;
  z-index: 1;
}

/* Accent lines and borders */
.yellow-accent-line {
  position: relative;
}

.yellow-accent-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tennis-green), var(--ball-yellow), var(--tennis-green));
  border-radius: 2px;
}

/* Custom scrollbar with yellow accent */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--tennis-green), var(--ball-yellow));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--tennis-green-dark), #FFD700);
  box-shadow: 0 0 10px var(--ball-yellow-glow);
}