/* Sortable styles */
.sortable-drag {
  transform: rotate(5deg) scale(1.05) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  opacity: 0.9 !important;
  z-index: 1000 !important;
}
.sortable-ghost {
  opacity: 0.3 !important;
}
.sortable-chosen {
  background: #dcfce7 !important;
  border-color: #22c55e !important;
}

/* Dark mode sortable styles */
.dark .sortable-chosen {
  background: #065f46 !important;
  border-color: #10b981 !important;
}
.cursor-move {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
* {
  -webkit-user-drag: none;
}
.sortable-drag * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  pointer-events: none !important;
}
.drop-zone {
  border: 2px dashed #cbd5e1;
  transition: all 0.2s ease;
}
.drop-zone.drag-over {
  border-color: #3b82f6;
  background-color: #eff6ff;
}
.image-preview {
  max-width: 100%;
  max-height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.confetti-container {
  overflow: hidden;
}

.confetti-particle {
  user-select: none;
  pointer-events: none;
  z-index: 9999;
  animation: confetti-fall 3s linear forwards;
}

@keyframes confetti-fall {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Mobile improvements */
@media (max-width: 768px) {
  /* Improve tap targets on mobile */
  button,
  .cursor-pointer {
    min-height: 44px;
  }

  /* Better active states for mobile */
  .active\:bg-blue-50:active {
    background-color: #eff6ff;
  }

  .dark .active\:bg-gray-700:active {
    background-color: #374151;
  }

  .active\:bg-gray-200:active {
    background-color: #e5e7eb;
  }

  .dark .active\:bg-gray-600:active {
    background-color: #4b5563;
  }
}
.fade-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2rem;
  width: 100%;
  z-index: 10;
  background: linear-gradient(
    to bottom,
    rgb(243 244 246 / var(--tw-bg-opacity, 1)),
    transparent
  );
  pointer-events: none;
}

.fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2rem;
  width: 100%;
  z-index: 10;
  background: linear-gradient(
    to top,
    rgb(243 244 246 / var(--tw-bg-opacity, 1)),
    transparent
  );
  pointer-events: none;
}

/* Dark mode fade styles */
.dark .fade-top {
  background: linear-gradient(
    to bottom,
    rgb(31 41 55 / var(--tw-bg-opacity, 1)),
    transparent
  );
}

.dark .fade-bottom {
  background: linear-gradient(
    to top,
    rgb(31 41 55 / var(--tw-bg-opacity, 1)),
    transparent
  );
}

/* Animation for copy feedback */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  10% {
    opacity: 1;
    transform: translateX(0);
  }
  80% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}

.animate-fade-in-out {
  animation: fadeInOut 2s ease-in-out;
}