@import "tailwindcss";

@layer components {
  /* Layout */
  .section {
    @apply py-20 lg:py-32;
  }

  .section-alt {
    @apply py-20 lg:py-32 bg-slate-900/50;
  }

  .section-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .section-header {
    @apply text-center mb-16;
  }

  .section-title {
    @apply text-3xl sm:text-4xl font-bold text-white mb-4;
  }

  .section-subtitle {
    @apply text-lg text-white/60 max-w-2xl mx-auto;
  }

  /* Navbar */
  .landing-nav {
    @apply fixed top-0 left-0 right-0 z-50 bg-slate-900/80 backdrop-blur-md border-b border-white/10;
  }

  .nav-link {
    @apply text-sm text-white/70 hover:text-white transition-colors;
  }

  /* Landing page buttons (emerald theme) */
  .btn-landing {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer text-white bg-emerald-600 hover:bg-emerald-500;
  }

  .btn-landing-secondary {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-semibold rounded-xl transition-all cursor-pointer text-white bg-white/10 border border-white/20 hover:bg-white/20;
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium bg-emerald-500/20 text-emerald-300 border border-emerald-500/30;
  }

  .badge-lg {
    @apply px-4 py-1.5 text-sm;
  }

  .badge-pending {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-amber-500/20 text-amber-300 border border-amber-500/30;
  }

  .fixture-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .fixture-card {
    @apply bg-white/10 border-white/10 backdrop-blur-sm rounded-lg border p-2 hover:bg-white/15 transition-colors relative;
    width: 120px;
  }

  .fixture-card-live {
    @apply bg-red-500/10 border-red-500/30;
  }

  .team-name-truncate {
    @apply text-xs font-medium text-white truncate;
    max-width: 70px;
  }

  .fixture-modal {
    @apply bg-transparent border-none p-4 max-w-sm w-full mx-auto;
  }

  .fixture-modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
  }

  .fixture-modal-content {
    @apply bg-slate-800 rounded-xl border border-white/10 p-4 shadow-xl;
  }

  .fixture-modal[open] {
    animation: modal-fade-in 0.2s ease-out;
  }

  @keyframes modal-fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }

  .fixture-card .prediction-form {
    @apply flex items-center gap-1;
  }

  .fixture-card .prediction-input {
    @apply w-7 text-center px-0.5 py-0.5 bg-white/10 rounded text-xs text-white;
  }

  .fixture-card .prediction-btn {
    @apply px-1.5 py-0.5 text-xs font-medium text-white rounded cursor-pointer transition-colors;
  }

  /* Stats */
  .stat-value {
    @apply text-2xl font-bold text-white;
  }

  .stat-label {
    @apply text-white/50;
  }

  .stat-divider {
    @apply h-8 w-px bg-white/20;
  }

  /* Buttons */
  .btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer text-white bg-indigo-600 hover:bg-indigo-500;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer text-white bg-white/10 border border-white/20 hover:bg-white/20 backdrop-blur-sm;
  }

  .btn-lg {
    @apply py-3 text-base;
  }

  /* Cards */
  .card {
    @apply bg-white/10 backdrop-blur-sm border border-white/10 rounded-lg;
  }

  .card-interactive {
    @apply bg-white/10 backdrop-blur-sm border border-white/10 rounded-lg hover:bg-white/15 transition-colors;
  }

  /* Inputs */
  .input {
    @apply block w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent;
  }

  /* Auth forms (login, register, password reset) */
  .auth-label {
    @apply block text-sm font-medium text-white/90 mb-1;
  }

  .auth-input {
    @apply block w-full px-4 py-3 bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent;
  }

  /* Alerts */
  .alert-success {
    @apply px-4 py-3 rounded-lg backdrop-blur-sm bg-green-500/20 border border-green-400/30 text-green-300;
  }

  .alert-error {
    @apply px-4 py-3 rounded-lg backdrop-blur-sm bg-red-500/20 border border-red-400/30 text-red-300;
  }

  /* Empty states */
  .empty-state {
    @apply text-center py-12 bg-white/5 backdrop-blur-sm rounded-lg border border-white/10;
  }

  /* Tournament banners */
  .tournament-banner {
    @apply flex items-center justify-between gap-4 px-4 py-3 rounded-lg mb-4;
  }

  .tournament-banner-content {
    @apply flex items-center gap-3;
  }

  .tournament-banner-icon {
    @apply text-2xl;
  }

  .tournament-banner-logo {
    @apply w-8 h-8 object-contain;
  }

  .tournament-banner-text {
    @apply flex flex-col sm:flex-row sm:items-center sm:gap-2;
  }

  .tournament-banner-text strong {
    @apply text-white font-semibold;
  }

  .tournament-banner-text span {
    @apply text-white/80 text-sm;
  }

  .tournament-banner-cta {
    @apply px-3 py-1.5 text-sm font-medium rounded-lg transition-colors whitespace-nowrap;
  }

  .banner-urgent {
    @apply bg-red-500/20 border border-red-500/30;
  }

  .banner-urgent .tournament-banner-cta {
    @apply bg-red-500 hover:bg-red-400 text-white;
  }

  .banner-warning {
    @apply bg-amber-500/20 border border-amber-500/30;
  }

  .banner-warning .tournament-banner-cta {
    @apply bg-amber-500 hover:bg-amber-400 text-white;
  }

  .banner-info {
    @apply bg-indigo-500/20 border border-indigo-500/30;
  }

  .banner-info .tournament-banner-cta {
    @apply bg-indigo-500 hover:bg-indigo-400 text-white;
  }

  .prediction-saved {
    animation: prediction-pulse 0.6s ease-out;
  }

  @keyframes prediction-pulse {
    0% {
      background-color: rgb(34 197 94 / 0.4);
      box-shadow: 0 0 20px rgb(34 197 94 / 0.3);
      transform: scale(1.02);
    }
    100% {
      background-color: transparent;
      box-shadow: none;
      transform: scale(1);
    }
  }

  .prediction-saved-modal {
    animation: modal-success 0.5s ease-out;
  }

  @keyframes modal-success {
    0% {
      background-color: rgb(34 197 94 / 0.3);
      border-radius: 0.5rem;
    }
    100% {
      background-color: transparent;
    }
  }
}