/* Sortable drag and drop styles */
.handle {
  cursor: grab;
  /* Grow the touch target to ~44px without shifting layout */
  padding: 0.625rem;
  margin: -0.625rem;
}

.handle:active {
  cursor: grabbing;
}

.sortable-drag {
  opacity: 0.8;
  background-color: rgb(243 244 246); /* gray-100 */
  cursor: move;
  transition: background-color 0.2s ease;
}

@media (prefers-color-scheme: dark) {
  .sortable-drag {
    background-color: rgb(55 65 81); /* gray-700 */
  }
}

.sortable-ghost {
  opacity: 0.5;
  background-color: rgb(219 234 254); /* blue-100 */
  /* Outline instead of border so the row keeps its size mid-drag */
  outline: 2px solid rgb(59 130 246); /* blue-500 */
  outline-offset: -2px;
  transition: background-color 0.2s ease, outline-color 0.2s ease;
}

@media (prefers-color-scheme: dark) {
  .sortable-ghost {
    background-color: rgb(30 58 138); /* blue-900 */
    outline-color: rgb(96 165 250); /* blue-400 */
  }
}

.sortable-chosen {
  background-color: rgb(249 250 251); /* gray-50 */
  transition: background-color 0.2s ease;
}

@media (prefers-color-scheme: dark) {
  .sortable-chosen {
    background-color: rgb(75 85 99); /* gray-600 */
  }
}