@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes splashDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .animate-slide-up {
    animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

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

:root {
  --foreground-rgb: 17, 24, 39;
  --background-rgb: 249, 250, 251;
  --card-bg: 255, 255, 255;
  --border-color: 229, 231, 235;
  --muted-text: 107, 114, 128;
  --primary-50: 240, 253, 244;
  --primary-100: 220, 252, 231;
  --primary-200: 187, 247, 208;
  --primary-300: 134, 239, 172;
  --primary-400: 74, 222, 128;
  --primary-500: 34, 197, 94;
  --primary-600: 22, 163, 74;
  --primary-700: 21, 128, 61;
  --primary-800: 22, 101, 52;
  --primary-900: 20, 83, 45;
  --neon-green: 57, 255, 20;
  --neon-blue: 0, 255, 255;
}

/* ── DARK MODE CSS VARIABLES ─────────────────────────────── */
.dark {
  --foreground-rgb: 229, 231, 235;
  --background-rgb: 15, 23, 42;
  --card-bg: 30, 41, 59;
  --border-color: 51, 65, 85;
  --muted-text: 148, 163, 184;
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
  font-feature-settings: "rlig" 1, "calt" 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ── DARK MODE GLOBAL OVERRIDES ──────────────────────────── */
/* Background overrides */
.dark .bg-white { background-color: rgb(30, 41, 59) !important; }
.dark .bg-gray-50 { background-color: rgb(15, 23, 42) !important; }
.dark .bg-gray-100 { background-color: rgb(30, 41, 59) !important; }
.dark .bg-gray-200 { background-color: rgb(51, 65, 85) !important; }

/* Text overrides */
.dark .text-gray-900 { color: rgb(241, 245, 249) !important; }
.dark .text-gray-800 { color: rgb(226, 232, 240) !important; }
.dark .text-gray-700 { color: rgb(203, 213, 225) !important; }
.dark .text-gray-600 { color: rgb(148, 163, 184) !important; }
.dark .text-gray-500 { color: rgb(100, 116, 139) !important; }
.dark .text-gray-400 { color: rgb(71, 85, 105) !important; }

/* Border overrides */
.dark .border-gray-50  { border-color: rgb(30, 41, 59) !important; }
.dark .border-gray-100 { border-color: rgb(51, 65, 85) !important; }
.dark .border-gray-200 { border-color: rgb(51, 65, 85) !important; }
.dark .border-gray-300 { border-color: rgb(71, 85, 105) !important; }
.dark .divide-gray-50 > * + * { border-color: rgb(30, 41, 59) !important; }
.dark .divide-gray-100 > * + * { border-color: rgb(51, 65, 85) !important; }
.dark .divide-gray-200 > * + * { border-color: rgb(51, 65, 85) !important; }

/* Hover overrides */
.dark .hover\:bg-gray-50:hover { background-color: rgb(30, 41, 59) !important; }
.dark .hover\:bg-gray-100:hover { background-color: rgb(51, 65, 85) !important; }

/* Input overrides */
.dark input, .dark textarea, .dark select {
  background-color: rgb(30, 41, 59) !important;
  color: rgb(226, 232, 240) !important;
  border-color: rgb(51, 65, 85) !important;
}
.dark input::placeholder, .dark textarea::placeholder {
  color: rgb(100, 116, 139) !important;
}

/* Shadow overrides */
.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important; }
.dark .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5) !important; }
.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important; }
.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6) !important; }

/* Nav & header overrides */
.dark nav, .dark header { background-color: rgb(15, 23, 42) !important; border-color: rgb(51, 65, 85) !important; }

/* Scrollbar dark */
.dark ::-webkit-scrollbar-track { background: rgb(15, 23, 42); }
.dark ::-webkit-scrollbar-thumb { background: rgb(51, 65, 85); }
.dark ::-webkit-scrollbar-thumb:hover { background: rgb(71, 85, 105); }

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors 
    focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 
    disabled:pointer-events-none disabled:opacity-50;
  }

  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 shadow-sm;
  }

  .btn-secondary {
    @apply bg-white text-gray-900 border border-gray-300 hover:bg-gray-50 shadow-sm;
  }

  .btn-outline {
    @apply border border-primary-600 text-primary-600 hover:bg-primary-50;
  }

  .input {
    @apply flex h-9 w-full rounded-md border border-gray-300 bg-white px-3 py-1 text-sm shadow-sm transition-colors
    placeholder:text-gray-500
    focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500
    disabled:cursor-not-allowed disabled:opacity-50;
  }

  .label {
    @apply text-sm font-medium leading-none;
  }

  .card {
    @apply rounded-lg border border-gray-200 bg-white shadow-sm;
  }

  .badge {
    @apply inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset;
  }

  .badge-primary {
    @apply bg-primary-50 text-primary-700 ring-primary-600/20;
  }

  .badge-success {
    @apply bg-green-50 text-green-700 ring-green-600/20;
  }

  .badge-warning {
    @apply bg-yellow-50 text-yellow-700 ring-yellow-600/20;
  }

  .badge-error {
    @apply bg-red-50 text-red-700 ring-red-600/20;
  }
}

/* Custom Animations */
@keyframes pulse-neon {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 5px rgb(var(--neon-green)), 0 0 10px rgb(var(--neon-green)), 0 0 15px rgb(var(--neon-green));
  }
  50% {
    opacity: 0.5;
    box-shadow: 0 0 10px rgb(var(--neon-green)), 0 0 20px rgb(var(--neon-green)), 0 0 30px rgb(var(--neon-green));
  }
}

.animate-neon {
  animation: pulse-neon 2s ease-in-out infinite;
}

/* Match Card Styles */
.match-card {
  @apply relative overflow-hidden rounded-lg border bg-white p-4 shadow-sm transition-all hover:shadow-md;
}

.match-card-premium {
  @apply border-primary-500 bg-gradient-to-br from-primary-50 to-white;
}

/* Progress Bar Styles */
.progress-bar {
  @apply relative h-2 w-full overflow-hidden rounded-full bg-gray-200;
}

.progress-bar-fill {
  @apply absolute left-0 top-0 h-full bg-primary-600 transition-all duration-300;
}

/* Premium Gradient */
.premium-gradient {
  @apply bg-gradient-to-r from-primary-600 to-primary-400 text-white;
}

/* Neon Text Effect */
.neon-text {
  @apply font-bold;
  text-shadow: 0 0 5px rgb(var(--neon-green)), 0 0 10px rgb(var(--neon-green));
}

/* Loading Animation */
.loading-dots {
  @apply flex space-x-1;
}

.loading-dots > div {
  @apply h-2 w-2 rounded-full bg-primary-600;
  animation: bounce-dot 0.5s infinite alternate;
}

.loading-dots > div:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots > div:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce-dot {
  to {
    transform: translateY(-4px);
  }
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background: #cbd5e1;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Toast Notifications */
.toast {
  @apply fixed right-4 top-4 z-50 rounded-lg p-4 shadow-lg;
}

.toast-success {
  @apply bg-green-50 text-green-900;
}

.toast-error {
  @apply bg-red-50 text-red-900;
}

/* Form Validation Styles */
.form-error {
  @apply mt-1 text-xs text-red-600;
}

.input-error {
  @apply border-red-500 focus-visible:ring-red-500;
}

/* Prediction Section Styles */
.prediction-section {
  @apply space-y-4 rounded-lg border bg-white p-4 shadow-sm;
}

/* League Badge Styles */
.league-badge {
  @apply flex items-center space-x-2 rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-900;
}

/* Team Logo Styles */
.team-logo {
  @apply relative h-8 w-8 overflow-hidden rounded-full bg-white shadow-sm;
}