/* MetaTicket Manipur - Global Styles */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Loading animation */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* Fade in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.3s ease-out; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.4s ease-out; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}
.slide-up { animation: slideUp 0.3s ease-out; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Toast notifications */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.toast-enter { animation: slideInRight 0.3s ease-out; }

@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}
.toast-exit { animation: slideOutRight 0.3s ease-in; }

/* Card hover effects */
.event-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* Button press effect */
.btn-press {
  transition: transform 0.1s ease;
}
.btn-press:active {
  transform: scale(0.97);
}

/* Gradient backgrounds */
.gradient-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
}
.gradient-accent {
  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
}
.gradient-success {
  background: linear-gradient(135deg, #22c55e 0%, #14b8a6 100%);
}
.gradient-dark {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
}
.gradient-sangai {
  background: linear-gradient(135deg, #8B1A1A 0%, #D4A843 100%);
}

/* Glass morphism */
.glass {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Category badges */
.badge-music { background: #fef3c7; color: #92400e; }
.badge-sports { background: #dbeafe; color: #1e40af; }
.badge-festival { background: #fce7f3; color: #9d174d; }
.badge-comedy { background: #e0e7ff; color: #3730a3; }
.badge-conference { background: #d1fae5; color: #065f46; }
.badge-cultural { background: #ede9fe; color: #5b21b6; }
.badge-college { background: #fff7ed; color: #9a3412; }
.badge-workshop { background: #f0fdf4; color: #166534; }
.badge-food { background: #fff1f2; color: #9f1239; }
.badge-other { background: #f1f5f9; color: #475569; }

/* QR Code styling */
.qr-container {
  background: white;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Mobile bottom nav */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: white;
  border-top: 1px solid #e2e8f0;
  padding: 6px 0 env(safe-area-inset-bottom, 6px);
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide scrollbar for carousel */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; }

/* Status badges */
.status-published { background: #dcfce7; color: #166534; }
.status-draft { background: #f1f5f9; color: #475569; }
.status-pending_review { background: #fef3c7; color: #92400e; }
.status-cancelled { background: #fee2e2; color: #991b1b; }
.status-completed { background: #dbeafe; color: #1e40af; }
.status-rejected { background: #fee2e2; color: #991b1b; }

/* Tab active indicator */
.tab-active {
  border-bottom: 2px solid #6366f1;
  color: #6366f1;
  font-weight: 600;
}

/* Price tag */
.price-tag {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
}

/* Ticket visual */
.ticket-visual {
  position: relative;
  overflow: hidden;
}
.ticket-visual::before,
.ticket-visual::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #f1f5f9;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.ticket-visual::before { left: -10px; }
.ticket-visual::after { right: -10px; }

/* Image placeholder */
.img-placeholder {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe, #a5b4fc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
  font-size: 2rem;
}

/* ==========================================
   SCANNER PORTAL — Dark Mode UI
   ========================================== */

/* Scanner full-screen safe areas */
.safe-top {
  padding-top: max(12px, env(safe-area-inset-top));
}
.safe-bottom {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Scanner result flash animation */
#scan-flash {
  transition: opacity 0.15s ease-in-out;
}

/* Scan line animation */
@keyframes scanLine {
  0% { top: 5%; }
  50% { top: 90%; }
  100% { top: 5%; }
}
#scan-line.active {
  animation: scanLine 2s ease-in-out infinite;
}

/* Active scale for check-in buttons */
.active\:scale-95:active {
  transform: scale(0.95);
}
.active\:scale-98:active {
  transform: scale(0.98);
}

/* Scanner dark theme custom scrollbar */
#checkin-list::-webkit-scrollbar,
#search-checkin-results::-webkit-scrollbar {
  width: 3px;
}
#checkin-list::-webkit-scrollbar-track,
#search-checkin-results::-webkit-scrollbar-track {
  background: transparent;
}
#checkin-list::-webkit-scrollbar-thumb,
#search-checkin-results::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 4px;
}

/* Glass morphism for scanner login */
.backdrop-blur-xl {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Smooth fade in for scanner results */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeInUp 0.2s ease-out;
}

/* QR Reader override for dark theme */
#qr-reader {
  border: none !important;
}
#qr-reader__dashboard_section_csr button {
  background: #f97316 !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
}
#qr-reader video {
  border-radius: 0 !important;
}

/* Staff portal loading shimmer */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.scanner-skeleton {
  background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 12px;
}