/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Task Completion Animations */

/* Base styles for all animations */
.task-row {
  transition: background-color 0.3s ease;
  position: relative;
}

/* 1. Bounce animation */
.task-complete-bounce {
  transform-box: fill-box;      /* SVG: use element's own bounding box as transform reference */
  transform-origin: center;     /* SVG: scale from the element's own center */
  animation: task-bounce 0.9s ease-in-out forwards;
}

@keyframes task-bounce {
  0% {
    transform: scale(1);
    background-color: transparent;
  }

  20% {
    transform: scale(1.14);
    background-color: rgba(74, 222, 128, 0.25);
  }

  40% {
    transform: scale(0.93);
    background-color: rgba(74, 222, 128, 0.1);
  }

  60% {
    transform: scale(1.08);
    background-color: rgba(74, 222, 128, 0.15);
  }

  80% {
    transform: scale(0.97);
    background-color: transparent;
  }

  100% {
    transform: scale(1);
    background-color: transparent;
  }
}

/* 2. Sparkle animation */
.task-complete-sparkle {
  position: relative;
  overflow: hidden;   /* clip gradient sweep to node border */
  animation: task-sparkle-bg 1s ease-in-out forwards;
}

@keyframes task-sparkle-bg {
  0%   { background-color: transparent; }
  35%  { background-color: rgba(74, 222, 128, 0.3); }
  100% { background-color: transparent; }
}

.task-complete-sparkle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 1) 50%, transparent 70%);
  background-size: 300% 300%;
  animation: task-sparkle-gradient 1s ease-in-out forwards;
  pointer-events: none;
}

@keyframes task-sparkle-gradient {
  0% {
    background-position: 150% 150%;
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    background-position: -50% -50%;
    opacity: 0;
  }
}

/* 3. Glow animation */
.task-complete-glow {
  animation: task-glow 1.2s ease-in-out forwards;
}

@keyframes task-glow {
  0% {
    filter: drop-shadow(0 0 0px rgba(74, 222, 128, 0));
  }

  50% {
    filter: drop-shadow(0 0 14px rgba(74, 222, 128, 0.95));
  }

  100% {
    filter: drop-shadow(0 0 0px rgba(74, 222, 128, 0));
  }
}

/* 4. Checkmark animation */
.task-complete-checkmark {
  position: relative;
  overflow: hidden;
}

.task-complete-checkmark::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  color: #4ade80;
  font-size: 5rem;
  opacity: 0;
  animation: task-checkmark 1s ease-in-out forwards;
  pointer-events: none;
}

@keyframes task-checkmark {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  30% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.8;
  }

  70% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.9;
  }

  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* 5. Wave animation */
.task-complete-wave {
  position: relative;
  overflow: hidden;   /* clip ripple expansion to node border */
  animation: task-wave-node 1s ease-out forwards;
}

@keyframes task-wave-node {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.task-complete-wave::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(74, 222, 128, 1) 0%, rgba(74, 222, 128, 0) 70%);
  transform: scale(0);
  transform-origin: center;
  border-radius: 50%;
  animation: task-wave-ripple 1s ease-out forwards;
  pointer-events: none;
}

@keyframes task-wave-ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(5);
    opacity: 0;
  }
}

/* Custom fixes for Task Nibbler UI issues */

/* Fix dropdown selected items in dark mode */
.dark .multiselect-selected,
.dark [data-multiselect-target="option"].multiselect-selected {
  background-color: #2563eb !important;
  /* blue-600 */
  color: white !important;
}

/* Make tree view nodes focusable for keyboard shortcuts */
.task-node {
  outline: none;
}

.task-node:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}