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

/* Drag & Drop Styles */
body.dragging {
  cursor: grabbing !important;
}

.sortable-ghost {
  opacity: 0.4;
  transform: rotate(2deg);
  filter: blur(0.5px);
}

.sortable-chosen {
  cursor: grabbing !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border-color: rgb(13 71 161) !important; /* primary color */
  border-width: 2px !important;
}

.sortable-drag {
  cursor: grabbing !important;
  opacity: 0.9;
}

/* Drop zone highlighting */
[data-controller="drag-drop"]:has(.sortable-ghost) {
  background-color: rgb(219 234 254 / 0.3); /* blue-100 with opacity */
  border-radius: 0.375rem;
  transition: background-color 0.2s ease;
}

/* Flash animation for successful updates */
.flash-success {
  animation: flash-green 1s ease-out;
}

@keyframes flash-green {
  0% { background-color: rgb(187 247 208); }
  100% { background-color: inherit; }
}

/* Reorder success animation */
.reorder-success {
  animation: reorder-highlight 2s ease-out;
}

@keyframes reorder-highlight {
  0% {
    border-color: rgb(34 197 94);
    border-width: 3px;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5), 0 0 20px rgba(34, 197, 94, 0.3);
  }
  50% {
    border-color: rgb(34 197 94);
    border-width: 3px;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2), 0 0 25px rgba(34, 197, 94, 0.2);
  }
  100% {
    border-color: inherit;
    border-width: inherit;
    box-shadow: none;
  }
}