/* Kanban Board Drag and Drop Styles */

/* Dragging state styles */
.kanban-card.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
  z-index: 1000;
}

/* Active drop zone styles */
.kanban-column.drop-zone-active {
  background-color: rgba(59, 130, 246, 0.05);
  outline: 2px dashed rgba(59, 130, 246, 0.5);
  outline-offset: -2px;
}

/* Drag over styles - will be overridden by enhanced version below */

/* Ensure drop zones work even when hovering over cards */
.kanban-column {
  pointer-events: auto;
  position: relative;
}

.kanban-card {
  pointer-events: auto;
  position: relative;
}

/* Ensure dragging cards don't interfere with drop detection */
.kanban-card.dragging {
  pointer-events: none;
}

/* Improve drop zone detection */
.kanban-column .space-y-3 {
  position: relative;
  z-index: 1;
}

/* Mirror (ghost) element styles - for Shopify Draggable compatibility */
.draggable-mirror {
  opacity: 0.8;
  transform: rotate(5deg);
  z-index: 999;
}

.draggable-mirror .kanban-card {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Sortable.js specific styles */
.sortable-ghost {
  opacity: 0.4;
  background-color: rgba(59, 130, 246, 0.1);
  border: 2px dashed #3b82f6;
}

.sortable-chosen {
  opacity: 0.9;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.sortable-drag {
  opacity: 0.8;
  transform: rotate(3deg);
  cursor: grabbing !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.sortable-fallback {
  opacity: 0.8;
  transform: rotate(3deg);
  z-index: 999;
}

/* Disable text selection during drag */
.kanban-board.draggable-container--is-dragging {
  user-select: none;
}

/* Card hover states */
.kanban-card:hover {
  cursor: grab;
}

.kanban-card:active {
  cursor: grabbing;
}

/* Smooth transitions */
.kanban-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kanban-column {
  transition: background-color 0.2s ease, border 0.2s ease;
}

/* Column highlighting */
.kanban-column.draggable-dropzone--occupied {
  background-color: rgba(34, 197, 94, 0.1);
}

/* Animation for dropped items */
.kanban-card.dropped {
  animation: dropAnimation 0.3s ease-out;
}

@keyframes dropAnimation {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Notification styles */
.kanban-notification {
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Insertion indicator styles */
.kanban-insertion-indicator {
  height: 2px;
  background-color: #3b82f6;
  margin: 4px 0;
  border-radius: 1px;
  opacity: 0.8;
  transition: all 0.2s ease;
  box-shadow: 0 0 4px rgba(59, 130, 246, 0.5);
}

/* Enhanced drop zone feedback */
.kanban-column.draggable-dropzone--over {
  background-color: rgba(59, 130, 246, 0.15);
  outline: 2px dashed #3b82f6;
  outline-offset: -2px;
}

/* Better visual separation during drag */
.kanban-column .space-y-3 {
  min-height: 200px;
  padding: 8px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.kanban-column.draggable-dropzone--over .space-y-3 {
  background-color: rgba(59, 130, 246, 0.05);
}