/* Optimistic UI Updates Styles */

/* Deleting state animation */
.task-item.deleting {
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: scale(0.98);
  pointer-events: none;
  position: relative;
}

.task-item.deleting::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1;
}

/* Strikethrough effect for deleting items */
.task-item.deleting .task-title,
.task-item.deleting .child-title {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Disable interactions during deletion */
.task-item.deleting button,
.task-item.deleting a,
.task-item.deleting input,
.task-item.deleting textarea {
  pointer-events: none;
  opacity: 0.5;
}

/* Rollback animation (when delete fails) */
@keyframes rollbackShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.task-item.rollback {
  animation: rollbackShake 0.3s ease;
  border-color: var(--bs-danger);
}

/* Fade out animation */
@keyframes fadeOutAndCollapse {
  0% {
    opacity: 1;
    transform: scale(1);
    max-height: 500px;
  }
  50% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 0;
    transform: scale(0.95);
    max-height: 0;
    padding: 0;
    margin: 0;
    border: none;
  }
}

.task-item.deleting-animated {
  animation: fadeOutAndCollapse 0.3s ease forwards;
  overflow: hidden;
}