/* Drag and Drop Grid Styles */

/* Component layout container */
#component-layout {
  position: relative;
  user-select: none;
}

/* Component items */
.component-item {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: move;
}

.component-item:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* Dragging state */
.component-item.dragging {
  z-index: 1000;
  cursor: grabbing;
}

/* Prevent text selection during drag */
.component-item * {
  pointer-events: none;
  user-select: none;
}

/* Make the close button clickable */
.component-item form[method="post"] button {
  pointer-events: auto;
  cursor: pointer;
}

/* Make the checkbox clickable */
.component-item input[type="checkbox"] {
  pointer-events: auto;
  cursor: pointer;
}

/* Grid overlay (created by JS) */
.grid-overlay {
  z-index: -1;
}

/* Collision warning animation */
.collision-warning {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-50%) translateY(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(-50%) translateY(3px); }
}

/* Visual feedback for drop zones */
#component-layout.drag-over {
  background-color: rgba(59, 130, 246, 0.05);
}

/* Hide the tip while dragging */
.component-item.dragging + .bg-blue-50 {
  opacity: 0.5;
}