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

/* ============================================
   EVENTRO DESIGN SYSTEM
   Premium, dark-mode-first, glassmorphic UI
   ============================================ */

@layer base {

  /* === Global Reset & Defaults === */
  html {
    @apply antialiased;
    scroll-behavior: smooth;
  }

  body {
    @apply font-sans;
    min-height: 100vh;
  }

  html.dark body {
    background-color: #1A1A2E !important;
    color: #e2e8f0 !important;
  }

  /* Fix for select options in dark mode */
  select option {
    @apply bg-background-900 text-text;
  }

  .turbo-progress-bar {
    height: 3px;
    background-color: #00c9a7;
  }

  /* === Typography === */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-display font-semibold;
  }

  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl;
  }

  h2 {
    @apply text-3xl md:text-4xl;
  }

  h3 {
    @apply text-2xl md:text-3xl;
  }

  h4 {
    @apply text-xl md:text-2xl;
  }

  h5 {
    @apply text-lg md:text-xl;
  }

  h6 {
    @apply text-base md:text-lg;
  }

  p {
    @apply text-text-secondary leading-relaxed;
  }

  a {
    @apply text-primary-400 hover:text-primary-300 transition-colors duration-200;
  }

  /* === Form Elements Defaults === */
  label {
    @apply block text-sm font-medium text-text-secondary mb-2;
  }

  /* === Selection === */
  ::selection {
    background: rgba(139, 30, 93, 0.4);
    @apply text-white;
  }
}

@layer components {

  /* === Glassmorphism Base === */
  .glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  }

  .glass-dark {
    background: rgba(26, 26, 46, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  }

  .glass-card {
    background: rgba(15, 23, 42, 0.6);
    /* Darker background (slate-900 tie-in) */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Reduced border opacity */
    @apply rounded-xl;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
  }

  .glass-input {
    background: rgba(15, 23, 42, 0.3);
    /* Darker input background */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Reduced border opacity */
  }

  .glass-input:focus {
    @apply border-primary-500;
    box-shadow: 0 0 0 2px rgba(139, 30, 93, 0.3);
  }

  /* === Buttons - Gradient Primary === */
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 font-semibold rounded-xl transition-all duration-300 cursor-pointer;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-background-900;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply btn text-white hover:text-white;
    background: linear-gradient(135deg, #00c9a7 0%, #11574c 50%, #0a7866 100%);
    box-shadow: 0 4px 20px rgba(63, 53, 59, 0.4);
    color: #ffffff !important;
  }

  .btn-primary:hover {
    background: linear-gradient(135deg, #00c9a7 0%, #11574c 50%, #0a7866 100%);
    box-shadow: 0 6px 30px rgba(53, 47, 50, 0.5);
    transform: translateY(-2px);
    @apply text-white;
    color: #ffffff !important;
  }

  .btn-secondary {
    @apply btn bg-white text-primary-500 border-2 border-primary-500;
  }

  /* Force white text on hover for secondary too */
  .btn-secondary:hover {
    @apply bg-primary-500;
    box-shadow: 0 4px 20px rgba(42, 37, 40, 0.3);
    color: #ffffff !important;
  }

  .btn-accent {
    @apply btn text-background-900;
    background: linear-gradient(135deg, #07a580 0%, #067361 100%);
    box-shadow: 0 4px 15px rgba(232, 180, 184, 0.4);
  }

  .btn-accent:hover {
    background: linear-gradient(135deg, #ffb3c0 0%, #ff6b88 100%);
    transform: translateY(-2px);
  }

  .btn-ghost {
    @apply btn bg-transparent text-white border border-white/30;
  }

  .btn-ghost:hover {
    @apply bg-white/10;
  }

  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-500 focus:ring-red-500;
  }

  .btn-sm {
    @apply px-4 py-2 text-sm rounded-lg;
  }

  .btn-lg {
    @apply px-8 py-4 text-lg;
  }

  .btn-icon {
    @apply p-3;
  }

  /* === Cards === */
  .card {
    @apply glass-card p-6;
  }

  .card-hover {
    @apply card hover:bg-white/10 hover:border-white/20 transition-all duration-300;
  }

  .card-interactive {
    @apply card-hover cursor-pointer hover:scale-[1.02] hover:shadow-lg;
  }

  /* === Forms === */
  .form-group {
    @apply mb-6;
  }

  .form-label {
    @apply block text-sm font-medium text-text-secondary mb-2;
  }

  .form-input {
    @apply glass-input rounded-lg px-4 py-3 text-white placeholder-text-muted w-full transition-all duration-200;
  }

  .form-select {
    @apply form-input appearance-none bg-no-repeat;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
  }

  .form-checkbox {
    @apply w-5 h-5 rounded border-white/20 bg-white/5 text-primary-500;
    @apply focus:ring-primary-500 focus:ring-offset-background-900;
  }

  .form-radio {
    @apply form-checkbox rounded-full;
  }

  .form-error {
    @apply mt-2 text-sm text-red-400;
  }

  .form-hint {
    @apply mt-2 text-sm text-text-muted;
  }

  /* === Alerts === */
  .alert {
    @apply glass-card p-4 flex items-start gap-3;
  }

  .alert-success {
    @apply alert border-emerald-500/30 bg-emerald-500/10;
  }

  .alert-warning {
    @apply alert border-amber-500/30 bg-amber-500/10;
  }

  .alert-error {
    @apply alert border-red-500/30 bg-red-500/10;
  }

  .alert-info {
    @apply alert border-blue-500/30 bg-blue-500/10;
  }

  /* === Badges === */
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
  }

  .badge-primary {
    @apply badge bg-primary-500/20 text-primary-300 border border-primary-500/30;
  }

  .badge-gold {
    @apply badge bg-gold-500/20 text-gold-300 border border-gold-500/30;
  }

  .badge-success {
    @apply badge bg-emerald-500/20 text-emerald-300 border border-emerald-500/30;
  }

  .badge-warning {
    @apply badge bg-amber-500/20 text-amber-300 border border-amber-500/30;
  }

  .badge-danger {
    @apply badge bg-red-500/20 text-red-300 border border-red-500/30;
  }

  /* === Navigation === */
  .nav-link {
    @apply px-4 py-2 text-text-secondary hover:text-white hover:bg-white/5 rounded-lg transition-all duration-200;
  }

  .nav-link-active {
    @apply nav-link text-primary-400 bg-primary-500/10;
  }

  /* === Tables === */
  .table {
    @apply w-full text-left;
  }

  .table thead {
    @apply border-b border-white/10;
  }

  .table th {
    @apply px-4 py-3 text-xs font-semibold text-text-muted uppercase tracking-wider;
  }

  .table td {
    @apply px-4 py-4 text-text-secondary border-b border-white/5;
  }

  .table tbody tr {
    @apply hover:bg-white/5 transition-colors;
  }

  /* === Modals === */
  .modal-overlay {
    @apply fixed inset-0 bg-black/60 backdrop-blur-sm z-40;
  }

  .modal {
    @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50;
    @apply glass-card w-full max-w-lg max-h-[90vh] overflow-auto;
  }

  .modal-header {
    @apply flex items-center justify-between p-6 border-b border-white/10;
  }

  .modal-body {
    @apply p-6;
  }

  .modal-footer {
    @apply flex items-center justify-end gap-3 p-6 border-t border-white/10;
  }

  /* === Dropdowns === */
  .dropdown {
    @apply relative inline-block;
  }

  .dropdown-menu {
    @apply absolute right-0 mt-2 w-56 glass-card py-2 z-50;
    @apply opacity-0 invisible translate-y-2 transition-all duration-200;
  }

  .dropdown.open .dropdown-menu {
    @apply opacity-100 visible translate-y-0;
  }

  .dropdown-item {
    @apply block px-4 py-2 text-sm text-text-secondary hover:bg-white/5 hover:text-white;
  }

  /* === Avatars === */
  .avatar {
    @apply inline-flex items-center justify-center rounded-full bg-primary-500/20 text-primary-400 font-medium overflow-hidden;
  }

  .avatar-sm {
    @apply w-8 h-8 text-sm;
  }

  .avatar-md {
    @apply w-10 h-10 text-base;
  }

  .avatar-lg {
    @apply w-12 h-12 text-lg;
  }

  .avatar-xl {
    @apply w-16 h-16 text-xl;
  }

  .avatar img {
    @apply w-full h-full object-cover;
  }

  /* === Tabs === */
  .tabs {
    @apply flex items-center gap-1 p-1 glass-card;
  }

  .tab {
    @apply px-4 py-2 text-sm font-medium text-text-muted rounded-lg transition-all duration-200;
    @apply hover:text-text-secondary;
  }

  .tab-active {
    @apply tab bg-primary-500 text-white;
  }

  /* === Progress bars === */
  .progress {
    @apply w-full h-2 bg-white/10 rounded-full overflow-hidden;
  }

  .progress-bar {
    @apply h-full bg-primary-500 rounded-full transition-all duration-500;
  }

  /* === Skeleton loaders === */
  .skeleton {
    @apply animate-pulse bg-white/10 rounded;
  }

  .skeleton-text {
    @apply skeleton h-4 w-full;
  }

  .skeleton-circle {
    @apply skeleton rounded-full;
  }

  /* === Empty states === */
  .empty-state {
    @apply flex flex-col items-center justify-center text-center py-16 px-6;
  }

  .empty-state-icon {
    @apply w-16 h-16 text-text-muted mb-4;
  }

  .empty-state-title {
    @apply text-xl font-semibold text-white mb-2;
  }

  .empty-state-text {
    @apply text-text-muted max-w-md;
  }

  /* === Ticket card (Eventro specific) === */
  .ticket-card {
    @apply glass-card relative overflow-hidden;
  }

  .ticket-card::before {
    content: '';
    @apply absolute left-0 top-0 bottom-0 w-1;
    background: linear-gradient(to bottom, #00c9a7, #ff6b88);
  }

  .ticket-card-free::before {
    background: linear-gradient(to bottom, #10B981, #34D399);
  }

  .ticket-card-vip::before {
    background: linear-gradient(to bottom, #ff6b88, #ff5276);
  }

  /* === Event card === */
  .event-card {
    @apply glass-card overflow-hidden;
  }

  .event-card-image {
    @apply w-full h-48 object-cover transition-transform duration-500;
  }

  .event-card:hover .event-card-image {
    @apply scale-105;
  }

  .event-card-body {
    @apply p-5;
  }

  .event-card-title {
    @apply text-lg font-semibold text-white transition-colors line-clamp-2;
  }

  .event-card:hover .event-card-title {
    @apply text-primary-400;
  }

  .event-card-meta {
    @apply flex items-center gap-2 text-sm text-text-muted mt-2;
  }

  /* === Section styling === */
  .section {
    @apply py-16 lg:py-24;
  }

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

  .section-subtitle {
    @apply text-lg text-text-secondary max-w-2xl;
  }
}

@layer utilities {

  /* === Text utilities === */
  .text-gradient {
    background: linear-gradient(135deg, #00c9a7 0%, #ff6b88 50%, #ff6b88 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-gradient-warm {
    background: linear-gradient(135deg, #ff6b88 0%, #b97dff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-balance {
    text-wrap: balance;
  }

  /* === Layout utilities === */
  .container-narrow {
    @apply max-w-3xl mx-auto px-4 sm:px-6;
  }

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

  .container-full {
    @apply w-full px-4 sm:px-6 lg:px-8;
  }

  /* === Visual utilities === */
  .divider {
    @apply border-t border-white/10;
  }

  .ring-glow {
    @apply ring-2 ring-primary-500/50;
  }

  /* === Animations === */
  .animate-in {
    @apply animate-fade-in;
  }

  .animate-slide {
    @apply animate-slide-up;
  }
}

/* === Scrollbar styling === */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 30, 93, 0.3) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: rgba(139, 30, 93, 0.3);
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: rgba(139, 30, 93, 0.5);
}

/* === Print utilities === */
@media print {
  .no-print {
    display: none !important;
  }
}

/* === Actiontext / Trix compatibility === */
.trix-content {
  @apply prose prose-invert max-w-none;
}

.trix-content a {
  @apply text-primary-400 hover:text-primary-300;
}

/* === Focus visible for accessibility === */
*:focus-visible {
  @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-background-900;
}

/* === Cursor blink for typed text === */
.typed-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: #00c9a7;
  margin-left: 2px;
  animation: blink 1s infinite;
  vertical-align: text-bottom;
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

/* === Word Rotation Animation (CSS-only) === */
.word-rotate {
  display: block;
  position: relative;
  height: 1.2em;
  overflow: hidden;
}

.word-rotate .word {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: word-cycle 10s infinite;
}

/* Stagger each word - 2s per word for 5 words = 10s total */
.word-rotate .word:nth-child(1) {
  animation-delay: 0s;
}

.word-rotate .word:nth-child(2) {
  animation-delay: 2s;
}

.word-rotate .word:nth-child(3) {
  animation-delay: 4s;
}

.word-rotate .word:nth-child(4) {
  animation-delay: 6s;
}

.word-rotate .word:nth-child(5) {
  animation-delay: 8s;
}

@keyframes word-cycle {

  0%,
  5% {
    opacity: 0;
    transform: translateY(50%);
  }

  10%,
  15% {
    opacity: 1;
    transform: translateY(0);
  }

  18%,
  20% {
    opacity: 0;
    transform: translateY(-50%);
  }

  100% {
    opacity: 0;
  }
}