/* Visual feedback for app-draggable.js drag-and-drop reorder.
   Apply on any page that includes /js/app-draggable.js so the dragged
   item and the drop target are visually distinct. */

[draggable="true"] { cursor: grab; }
[draggable="true"]:active { cursor: grabbing; }

.drag-dragging {
  opacity: 0.4 !important;
  transition: opacity 0.12s ease;
}

.drag-drop-target {
  box-shadow: inset 3px 0 0 #fbbf24 !important;
  outline: 1px dashed rgba(251, 191, 36, 0.6) !important;
  outline-offset: -2px;
}