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

/* Custom styles for enhanced search and discovery */

@layer components {
  /* Search form enhancements */
  .search-form-container {
    @apply bg-white rounded-lg shadow-md p-6 mb-6;
  }

  .search-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
  }

  .search-suggestions {
    @apply absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto;
  }

  .suggestion-item {
    @apply px-4 py-2 hover:bg-gray-100 cursor-pointer border-b border-gray-200 last:border-b-0 transition-colors;
  }

  .suggestion-item.selected {
    @apply bg-blue-100;
  }

  /* Player card enhancements */
  .player-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-all duration-300;
  }

  .player-card:hover {
    @apply transform scale-105;
  }

  .player-image-container {
    @apply relative h-48 bg-gray-200 overflow-hidden;
  }

  .player-image {
    @apply w-full h-full object-cover transition-transform duration-300;
  }

  .player-card:hover .player-image {
    @apply transform scale-110;
  }

  .media-indicator {
    @apply absolute top-2 right-2 flex space-x-1;
  }

  .media-badge {
    @apply text-white text-xs px-2 py-1 rounded-full;
  }

  .media-badge.images {
    @apply bg-blue-500;
  }

  .media-badge.videos {
    @apply bg-red-500;
  }

  /* Filter badges */
  .filter-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
  }

  .filter-badge.search {
    @apply bg-blue-100 text-blue-800;
  }

  .filter-badge.position {
    @apply bg-green-100 text-green-800;
  }

  .filter-badge.team {
    @apply bg-purple-100 text-purple-800;
  }

  .filter-badge.country {
    @apply bg-yellow-100 text-yellow-800;
  }

  .filter-badge.league {
    @apply bg-red-100 text-red-800;
  }

  .filter-badge.media {
    @apply bg-indigo-100 text-indigo-800;
  }

  .filter-badge.videos {
    @apply bg-pink-100 text-pink-800;
  }

  /* Similarity indicators */
  .similarity-badge {
    @apply bg-green-500 text-white text-xs px-2 py-1 rounded-full;
  }

  .similarity-badge.team {
    @apply bg-blue-500;
  }

  /* Loading states */
  .loading-spinner {
    @apply animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600;
  }

  /* Empty state */
  .empty-state {
    @apply text-center py-12;
  }

  .empty-state-icon {
    @apply mx-auto h-12 w-12 text-gray-400;
  }

  .empty-state-title {
    @apply mt-2 text-sm font-medium text-gray-900;
  }

  .empty-state-description {
    @apply mt-1 text-sm text-gray-500;
  }

  /* Responsive grid adjustments */
  @screen sm {
    .player-grid {
      @apply grid-cols-1;
    }
  }

  @screen md {
    .player-grid {
      @apply grid-cols-2;
    }
  }

  @screen lg {
    .player-grid {
      @apply grid-cols-3;
    }
  }

  @screen xl {
    .player-grid {
      @apply grid-cols-4;
    }
  }

  /* Animation utilities */
  .fade-in {
    @apply animate-pulse;
  }

  .slide-in {
    @apply transform transition-all duration-300 ease-out;
  }

  .slide-in.from-left {
    @apply -translate-x-full opacity-0;
  }

  .slide-in.from-right {
    @apply translate-x-full opacity-0;
  }

  .slide-in.visible {
    @apply translate-x-0 opacity-100;
  }

  /* Focus styles for accessibility */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }

  /* Custom scrollbar for suggestions */
  .suggestions-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #CBD5E0 #F7FAFC;
  }

  .suggestions-scrollbar::-webkit-scrollbar {
    width: 6px;
  }

  .suggestions-scrollbar::-webkit-scrollbar-track {
    background: #F7FAFC;
  }

  .suggestions-scrollbar::-webkit-scrollbar-thumb {
    background-color: #CBD5E0;
    border-radius: 3px;
  }

  .suggestions-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #A0AEC0;
  }
}

/* Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
  .player-card {
    @apply bg-gray-800 text-white;
  }

  .search-form-container {
    @apply bg-gray-800 text-white;
  }

  .search-input {
    @apply bg-gray-700 border-gray-600 text-white;
  }
}