/* Kanban Board Drag & Drop Styles */

/* Primary color definition */
:root {
  --primary-rgb: 231, 102, 161; /* #e766a1 */
}

/* Hover state for draggable items */
[data-card-id]:hover {
  cursor: pointer;
}

/* Dragging states */
.draggable--is-dragging {
  cursor: grabbing !important;
}

.draggable-source--is-dragging {
  cursor: grabbing !important;
}

/* When dragging over containers */
.draggable-container--over {
  background-color: rgba(156, 163, 175, 0.05);
  position: relative;
}

.draggable-container--over::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 2px dashed rgba(156, 163, 175, 0.5);
  border-radius: 6px;
  pointer-events: none;
  z-index: 1;
}

/* Mirror (the element being dragged) - fully visible */
.draggable-mirror {
  cursor: grabbing !important;
  opacity: 1;
  transform: rotate(2deg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  z-index: 9999 !important;
}

/* Additional kanban-specific styles */
.kanban-column {
  min-height: 200px;
}

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

.kanban-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Column-specific card hover colors with proper depth - All 12 colors */
.column-red > [data-card-id]:hover {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.column-amber > [data-card-id]:hover {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.column-blue > [data-card-id]:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.column-emerald > [data-card-id]:hover {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.column-gray > [data-card-id]:hover {
  border-color: rgba(107, 114, 128, 0.4);
  box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.column-slate > [data-card-id]:hover {
  border-color: rgba(100, 116, 139, 0.4);
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.column-zinc > [data-card-id]:hover {
  border-color: rgba(113, 113, 122, 0.4);
  box-shadow: 0 0 0 2px rgba(113, 113, 122, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.column-purple > [data-card-id]:hover {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.column-pink > [data-card-id]:hover {
  border-color: rgba(236, 72, 153, 0.4);
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.column-indigo > [data-card-id]:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.column-teal > [data-card-id]:hover {
  border-color: rgba(20, 184, 166, 0.4);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.column-orange > [data-card-id]:hover {
  border-color: rgba(249, 115, 22, 0.4);
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Hide the original card content but show a dashed placeholder */
.draggable-source--is-dragging {
  position: relative;
  color: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.draggable-source--is-dragging * {
  opacity: 0 !important;
}

.draggable-source--is-dragging::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px dashed rgba(156, 163, 175, 0.6);
  border-radius: 8px;
  background-color: rgba(156, 163, 175, 0.05);
  pointer-events: none;
  z-index: 1;
}

/* Drop zone indicators */
.draggable-container--over {
  transition: all 0.2s ease;
}

/* Only animate cards that are NOT being dragged (the ones moving out of the way) */
[data-card-id]:not(.draggable-source--is-dragging):not(.draggable--original):not(.draggable-mirror) {
  transition: transform 2s ease-out;
}

/* Ensure dragged elements have no transition */
.draggable-source--is-dragging,
.draggable-mirror,
.draggable--original {
  transition: none !important;
}

/* Board Header Icon Button Animations */
.board-header-icon-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.board-header-icon-btn:active {
  transform: scale(0.95);
}

/* Specific animation for back button */
.board-header-back-btn:hover svg {
  transform: translateX(-2px);
}

/* Specific animation for settings button */
.board-header-settings-btn:hover svg {
  transform: rotate(90deg);
}