/*
 * 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 and drop styles */
.sortable-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sortable-item {
  transition: opacity 0.2s ease, transform 0.2s ease, margin 0.2s ease;
  position: relative;
}

.sortable-item.opacity-40 {
  opacity: 0.4;
}

.sortable-item.dragging {
  transform: scale(0.95);
}

/* Don't disable pointer events - it blocks drop targets! */
.sortable-item.opacity-40 .drag-handle {
  pointer-events: auto !important;
}

/* Show a thick blue line above the item */
.sortable-item.drag-over-top::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 4px;
  background: #6366f1;
  border-radius: 2px;
  z-index: 10;
}

/* Show a thick blue line below the item */
.sortable-item.drag-over-bottom::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 4px;
  background: #6366f1;
  border-radius: 2px;
  z-index: 10;
}

.drag-handle {
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.drag-handle:hover {
  color: #4f46e5;
}

.drag-handle:active {
  cursor: grabbing;
}