/*
 * 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.
 */

/* Sortable drag states */

/* Ghost element (placeholder where item will be dropped) */
.sortable-ghost {
  opacity: 0.4;
  background-color: rgb(224 231 255); /* indigo-100 */
  border: 2px dashed rgb(165 180 252); /* indigo-300 */
  border-radius: 0.375rem;
}

/* Element being dragged */
.sortable-drag {
  opacity: 0.9;
  transform: rotate(2deg);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* Chosen but not yet dragged */
.sortable-chosen {
  box-shadow: 0 0 0 2px rgb(129 140 248); /* indigo-400 */
  border-radius: 0.375rem;
}

/* Disabled containers */
[data-sortable-disabled-value="true"] {
  opacity: 0.5;
}

/* Cursor during drag */
body.dragging {
  cursor: grabbing !important;
}

body.dragging * {
  cursor: grabbing !important;
}

/* Task completion animation */
.task-moving {
  animation: taskSlide 0.3s ease-out;
}

@keyframes taskSlide {
  from {
    opacity: 0.5;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}