/* Sortable.js のドラッグ&ドロップ用スタイル */

/* ゴースト要素（ドラッグ中のプレースホルダー） */
.sortable-ghost {
  opacity: 0.4;
  background-color: #f3f4f6;
  border: 2px dashed #9ca3af;
}

/* 選択された要素 */
.sortable-chosen {
  cursor: grabbing;
  opacity: 1 !important;
}

/* ドラッグ中の要素 */
.sortable-drag {
  opacity: 0.9 !important;
  transform: rotate(2deg);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  cursor: grabbing !important;
}

/* フォールバック要素 */
.sortable-fallback {
  opacity: 1 !important;
  transform: rotate(2deg) scale(1.02);
}

/* ドラッグハンドルのスタイル */
.cursor-move:hover {
  color: #374151;
}

/* ドラッグ中のアイテムスタイル */
.sortable-ghost .cursor-move {
  opacity: 0.3;
}

/* ドラッグ可能要素の視覚的フィードバック */
[data-controller*="sortable"] > div:hover {
  cursor: grab;
}

[data-controller*="sortable"] > div:active {
  cursor: grabbing;
}