/*
 * drag-drop.css - Drag and drop visual feedback styles
 * Provides visual indicators for drag operations and placeholders
 */

/* =============================================================================
   CARD PLACEHOLDER
   ============================================================================= */

/*
 * Placeholder - shows where card will drop
 * Based on original minicard.styl lines 31-36
 * Note: Base styling exists in board-cards.css, these are drag-specific overrides
 */
.minicard-wrapper.placeholder {
    background: #cccccc !important; /* darken(white, 20%) */
    border-radius: 8px !important;
    min-height: 40px;
    border: none !important;
    margin-bottom: 8px;
}

.minicard-wrapper.placeholder::after {
    background: none !important;
}

/* Hide all child elements in placeholder */
.minicard-wrapper.placeholder * {
    display: none !important;
}

/* =============================================================================
   LIST DRAG PLACEHOLDER
   ============================================================================= */

/* List drop placeholder - styled to match card placeholder for consistency */
.list.placeholder,
.list-drag-placeholder {
    background: #cccccc !important; /* Match card placeholder */
    border-radius: 8px !important;
    border: none !important;
    box-shadow: none !important;
    /* Height is set dynamically by JavaScript to match the dragged list */
}

/* Hide inner content of list placeholder */
.list-drag-placeholder * {
    display: none !important;
}

/* =============================================================================
   LIST DRAG HELPER (the floating panel shown while a list is dragged)
   ============================================================================= */

/*
 * The real list is transparent (the board background shows through), so when
 * dragged it would otherwise look like loose floating cards. This gives the drag
 * image a solid, theme-agnostic frame; its height is set inline by JS to the
 * board height so every dragged list looks like a consistent full-height column.
 */
.list-drag-helper {
    background: var(--list-drag-helper-bg, #f1f2f4);
    border: 1px solid var(--border-color, #dee4e9);
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.24), 0 3px 8px rgba(16, 24, 40, 0.14);
    overflow: hidden;
    opacity: 0.97;
    /* A slight tilt while dragging, matching the card drag helper. */
    transform: rotate(3deg);
    transform-origin: center center;
}

/* =============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================= */

/* Use GPU acceleration for drag operations */
.minicard-wrapper.placeholder,
.list-drag-placeholder {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Reduce repaints during drag */
.minicard-wrapper {
    contain: layout style paint;
}

.list {
    contain: layout;
}

/* =============================================================================
   CHECKLIST DRAG AND DROP
   ============================================================================= */

/* Checklist drag placeholder */
.checklist-sortable-item.checklist-placeholder {
    background: #e0e0e0;
    border-radius: 4px;
    min-height: 60px;
    margin-bottom: 8px;
    border: 2px dashed #ccc;
}

.checklist-sortable-item.checklist-placeholder * {
    display: none !important;
}

/* Checklist item drag placeholder */
.checklist-item-sortable.checklist-item-placeholder {
    background: #e8e8e8;
    border-radius: 3px;
    min-height: 32px;
    margin-bottom: 4px;
    border: 1px dashed #ccc;
}

.checklist-item-sortable.checklist-item-placeholder * {
    display: none !important;
}

/* Checklist title - cursor grab for dragging */
.checklist-sortable-item .checklist-title {
    cursor: grab;
}

.checklist-sortable-item .checklist-title:active {
    cursor: grabbing;
}

/* Checklist item text - cursor grab for dragging */
.checklist-item-sortable .item-title {
    cursor: grab;
}

.checklist-item-sortable .item-title:active {
    cursor: grabbing;
}

/* Performance optimizations for checklist drag */
.checklist-sortable-item,
.checklist-item-sortable {
    contain: layout style;
}

.checklist-placeholder,
.checklist-item-placeholder {
    will-change: transform;
    backface-visibility: hidden;
}

/* =============================================================================
   RESPONSIVE DRAG AND DROP
   ============================================================================= */

@media (max-width: 768px) {
    .minicard-wrapper.placeholder {
        min-height: 35px;
        margin-bottom: 6px;
    }
}

/* =============================================================================
   CALENDAR RESCHEDULE CURSOR LOCK
   ============================================================================= */

/*
 * While a calendar bar is being moved/resized, the cursor must not flicker as
 * the pointer crosses elements with their own cursor styles (bars: grab, day
 * cells: pointer, buttons ...). pulse-calendar-drag.js gates these classes on
 * <html> for the duration of the gesture; !important beats every element-level
 * cursor, including inline ones set by the drag system.
 */
.pls-cal-cursor-grabbing,
.pls-cal-cursor-grabbing * {
    cursor: grabbing !important;
}

.pls-cal-cursor-resize,
.pls-cal-cursor-resize * {
    cursor: ew-resize !important;
}