@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-neon-cyan: #00f0ff;
  --color-neon-purple: #a855f7;
  --color-neon-pink: #ec4899;
  --color-neon-green: #22ee88;
  --color-neon-orange: #ff6b2b;
  --color-neon-yellow: #facc15;
  --color-neon-red: #ff3b5c;

  --color-surface-dark: #0a0b10;
  --color-surface-card: #12141c;
  --color-surface-raised: #1a1d29;
  --color-surface-border: #2d3142;
  --color-surface-hover: #232735;

  --shadow-neon-cyan: 0 0 10px rgba(0, 240, 255, 0.3), 0 0 20px rgba(0, 240, 255, 0.1);
  --shadow-neon-purple: 0 0 10px rgba(168, 85, 247, 0.3), 0 0 20px rgba(168, 85, 247, 0.1);
  --shadow-neon-pink: 0 0 10px rgba(236, 72, 153, 0.3), 0 0 20px rgba(236, 72, 153, 0.1);
}

/* Base styles */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  @apply antialiased;
}

/* Smooth transitions when toggling dark mode */
html.transitioning,
html.transitioning *,
html.transitioning *::before,
html.transitioning *::after {
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Custom scrollbar for dark mode */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.dark ::-webkit-scrollbar-track {
  background: var(--color-surface-dark);
}
.dark ::-webkit-scrollbar-thumb {
  background: var(--color-surface-border);
  border-radius: 10px;
  border: 2px solid var(--color-surface-dark);
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #4a4f6a;
}

/* Drag-and-drop styles */
.sortable-ghost {
  opacity: 0.15 !important;
  transform: scale(0.95);
  background: var(--color-neon-cyan) !important;
}

.sortable-drag {
  opacity: 0.9 !important;
  transform: rotate(1.5deg) scale(1.02);
  z-index: 9999;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 255, 0.2) !important;
}

.sortable-chosen {
  cursor: grabbing !important;
}

.drop-zone-active {
  background-color: rgba(0, 240, 255, 0.03) !important;
  border: 2px dashed rgba(0, 240, 255, 0.2) !important;
  border-radius: 0.75rem;
}

/* Neon glow utilities */
.glow-cyan {
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2), 0 0 30px rgba(0, 240, 255, 0.1);
}
.glow-purple {
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.2), 0 0 30px rgba(168, 85, 247, 0.1);
}
.glow-pink {
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.2), 0 0 30px rgba(236, 72, 153, 0.1);
}
.glow-green {
  box-shadow: 0 0 15px rgba(34, 238, 136, 0.2), 0 0 30px rgba(34, 238, 136, 0.1);
}
.glow-orange {
  box-shadow: 0 0 15px rgba(255, 107, 43, 0.2), 0 0 30px rgba(255, 107, 43, 0.1);
}

.text-glow-cyan {
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}
.text-glow-purple {
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}
.text-glow-pink {
  text-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

/* Accessibility & Focus States */
:focus-visible {
  outline: 2px solid var(--color-neon-cyan);
  outline-offset: 2px;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  --tw-ring-color: rgba(0, 240, 255, 0.5);
  border-color: rgba(0, 240, 255, 0.6) !important;
  box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.1);
}

/* Skip to content - accessibility */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: var(--color-neon-cyan);
  color: #0a0b10;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0 0 0.75rem 0.75rem;
  transition: top 0.2s ease;
}
.skip-to-content:focus {
  top: 0;
  outline: none;
}

/* Page transitions */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  transform: translateY(5px);
}

/* Animated neon grid background */
.neon-grid-bg {
  position: relative;
  overflow: hidden;
}
.neon-grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
  animation: grid-drift 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes grid-drift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

/* Ambient glow orb for auth pages */
.neon-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
  pointer-events: none;
  animation: orb-float 8s ease-in-out infinite alternate;
}
.neon-orb-cyan {
  background: var(--color-neon-cyan);
  width: 400px;
  height: 400px;
  top: -10%;
  right: -5%;
}
.neon-orb-purple {
  background: var(--color-neon-purple);
  width: 350px;
  height: 350px;
  bottom: -10%;
  left: -5%;
  animation-delay: -4s;
}

@keyframes orb-float {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -20px) scale(1.1); }
}

/* Skeleton loading animation */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 0.5rem;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Neon underline link hover effect */
.neon-underline {
  position: relative;
}
.neon-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-neon-cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
  transition: width 0.3s ease;
}
.neon-underline:hover::after,
.neon-underline.router-link-active::after {
  width: 100%;
}

/* Priority left-border accent for task cards */
.priority-border-critical { border-left: 3px solid var(--color-neon-red); }
.priority-border-high { border-left: 3px solid var(--color-neon-orange); }
.priority-border-medium { border-left: 3px solid var(--color-neon-yellow); }
.priority-border-low { border-left: 3px solid var(--color-neon-green); }

/* Pulse ring animation for live indicators */
.pulse-ring {
  position: relative;
}
.pulse-ring::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--color-neon-cyan);
  animation: pulse-ring-anim 2s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse-ring-anim {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Modal enter/leave animation */
.modal-enter-active {
  transition: opacity 0.25s ease-out;
}
.modal-enter-active .modal-panel {
  transition: opacity 0.25s ease-out, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-enter-from {
  opacity: 0;
}
.modal-enter-from .modal-panel {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
}
.modal-leave-active {
  transition: opacity 0.15s ease-in;
}
.modal-leave-active .modal-panel {
  transition: opacity 0.15s ease-in, transform 0.15s ease-in;
}
.modal-leave-to {
  opacity: 0;
}
.modal-leave-to .modal-panel {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}

/* Badge/count bounce animation */
@keyframes count-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.count-pop {
  animation: count-pop 0.3s ease;
}

/* Reduced motion: respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .neon-grid-bg::before,
  .neon-orb,
  .sortable-ghost,
  .sortable-drag {
    animation: none !important;
    transition: none !important;
  }
  .page-enter-active,
  .page-leave-active,
  .modal-enter-active,
  .modal-leave-active {
    transition-duration: 0.01ms !important;
  }
  .skeleton {
    animation: none !important;
  }
  .pulse-ring::after {
    animation: none !important;
  }
}

/* Tooltip utility */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  padding: 4px 10px;
  background: var(--color-surface-card);
  color: #e5e7eb;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 6px;
  border: 1px solid var(--color-surface-border);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 50;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
