/* --- style.css --- */
/*
  Most styling is now handled by Tailwind CSS utility classes in script.js.
  This file is kept for complex states like drag-and-drop visual feedback.
*/

/* Drag & Drop Styles */
.form-field-row.drag-over-top {
  border-top: 2px solid #4f46e5; /* indigo-600 */
}

.form-field-row.drag-over-bottom {
  border-bottom: 2px solid #4f46e5; /* indigo-600 */
}

.drag-handle {
  cursor: grab;
  user-select: none;
  color: #94a3b8; /* slate-400 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; /* w-10 */
  padding-right: 1rem;
}
.drag-handle:hover {
    color: #475569; /* slate-600 */
}

.form-field-row.dragging {
    opacity: 0.5;
    background: #f1f5f9; /* slate-100 */
}

.drag-handle:active,
.form-field-row.dragging .drag-handle {
  cursor: grabbing;
}