/* Tailwind CSS - Compiled for MySportLeagues */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */
@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }
}

@layer components {
  .btn-primary {
    @apply bg-indigo-600 text-white hover:bg-indigo-700 px-4 py-2 rounded-md font-medium transition-colors;
  }
  
  .btn-secondary {
    @apply bg-white text-indigo-600 hover:bg-gray-50 px-4 py-2 rounded-md font-medium border border-indigo-600 transition-colors;
  }
  
  .input-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500;
  }
  
  .alert-error {
    @apply bg-red-100 border-red-400 text-red-700 border-l-4 p-4;
  }
  
  .alert-success {
    @apply bg-green-100 border-green-400 text-green-700 border-l-4 p-4;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-lg p-6;
  }
  
  .icon-container {
    @apply w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4;
  }
  
  .icon-container.primary {
    @apply bg-indigo-100;
  }
  
  .icon-container.success {
    @apply bg-green-100;
  }
  
  .icon-container.warning {
    @apply bg-yellow-100;
  }
  
  .icon-container.error {
    @apply bg-red-100;
  }
}

/* Mobile-first responsive design */
@media (max-width: 640px) {
  .container {
    @apply px-4;
  }
}

/* Loading animations */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

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

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

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}