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

/* Custom Christmas Styles */
@layer base {
  body {
    @apply bg-gradient-to-b from-christmas-ice to-white;
    font-family: 'Poppins', sans-serif;
  }
}

@layer components {
  .btn-christmas {
    @apply px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg;
  }
  
  .btn-primary {
    @apply btn-christmas bg-christmas-red text-white hover:bg-christmas-red-dark;
  }
  
  .btn-secondary {
    @apply btn-christmas bg-christmas-green text-white hover:bg-christmas-green-dark;
  }
  
  .btn-gold {
    @apply btn-christmas bg-christmas-gold text-christmas-red-dark hover:bg-yellow-500;
  }
  
  .card-christmas {
    @apply bg-white rounded-xl shadow-xl border-2 border-christmas-red p-6 transform transition-all duration-300 hover:shadow-2xl;
  }
  
  .festive-heading {
    @apply font-festive text-christmas-red text-4xl md:text-5xl lg:text-6xl text-center mb-6 drop-shadow-lg;
  }
  
  .snow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
  }
  
  .snowflake {
    position: absolute;
    top: -10px;
    color: white;
    font-size: 1em;
    animation: snowfall linear infinite;
    opacity: 0.8;
  }
  
  .input-christmas {
    @apply w-full px-4 py-3 border-2 border-christmas-green rounded-lg focus:outline-none focus:border-christmas-red focus:ring-2 focus:ring-christmas-red transition-all;
  }
  
  .badge-leader {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-christmas-gold text-christmas-red-dark;
  }
  
  .badge-student {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-christmas-green text-white;
  }
}

/* Snow particles animation */
@keyframes snowfall {
  0% {
    transform: translateY(-10px) translateX(0);
  }
  50% {
    transform: translateY(50vh) translateX(50px);
  }
  100% {
    transform: translateY(100vh) translateX(-50px);
  }
}

/* Festive decorations */
.holly-decoration::before {
  content: '🎄';
  margin-right: 0.5rem;
}

.holly-decoration::after {
  content: '🎄';
  margin-left: 0.5rem;
}

/* WYSIWYG Editor Styles */
.editor-toolbar {
  @apply bg-christmas-snow border-2 border-christmas-green rounded-t-lg p-2 flex gap-2;
}

.editor-content {
  @apply border-2 border-t-0 border-christmas-green rounded-b-lg p-4 min-h-[200px] bg-white;
}

.editor-content:focus {
  @apply outline-none ring-2 ring-christmas-red;
}

/* Sortable drag and drop styles */
.sortable-ghost {
  opacity: 0.4;
  background: #f0f0f0;
}

.sortable-drag {
  opacity: 1;
  cursor: move;
}

.group-container {
  @apply min-h-[150px] p-4 bg-gradient-to-br from-christmas-ice to-white rounded-lg border-2 border-dashed border-christmas-green;
}

.student-card {
  @apply bg-white p-3 rounded-lg shadow-md border-l-4 border-christmas-red cursor-move transition-all hover:shadow-lg hover:scale-105;
}

/* Loading spinner */
.spinner {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 3px solid #C41E3A;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive table */
.table-christmas {
  @apply w-full bg-white rounded-lg overflow-hidden shadow-lg;
}

.table-christmas thead {
  @apply bg-christmas-red text-white;
}

.table-christmas th {
  @apply px-4 py-3 text-left font-semibold;
}

.table-christmas td {
  @apply px-4 py-3 border-b border-gray-200;
}

.table-christmas tbody tr:hover {
  @apply bg-christmas-snow;
}