/*
 * 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: 4px !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: 4px !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: 4px;
    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: 4px;
    min-height: 32px;
    margin-bottom: 4px;
    border: 1px dashed #ccc;
}

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

/* Lists are dragged by their header (the drag engine's handleSelector); cards
   themselves stay cursor:pointer because click-to-open is their primary action. */
.list.js-list .list-header {
    cursor: grab;
}

.list.js-list .list-header:active {
    cursor: grabbing;
}

/* 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;
}

/* =============================================================================
   STATUS DRAG AND DROP (status management table)
   ============================================================================= */

/*
 * The status list is an AntDesign <table>. pulse-status-drag.js creates a
 * placeholder <tr> inside the tbody and a floating helper appended to <body> —
 * the helper is outside every component scope, so these rules must be global.
 */

/* Placeholder <tr>: keep the row's footprint with a dashed drop outline instead
   of collapsing to a thin bar. Cells carry inline widths mirrored from the source. */
.status-drag-placeholder {
    background-color: var(--pl-semantic-primary-color-primary-bg, #E9FAFD);
    border: 2px dashed var(--pl-semantic-primary-color-primary, #0070B5);
    opacity: 0.7;
    box-sizing: border-box;
}

.status-drag-placeholder td {
    box-sizing: border-box;
}

/*
 * A cloned <tr> outside a <table> loses table layout, so the helper wraps the
 * clone in a fixed-layout table carrying the source <colgroup>. Without this the
 * cells shrink to content width and the status name and action buttons overlap.
 */
.status-drag-helper {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    background: white;
    opacity: 0.95;
    z-index: 10000;
    overflow: hidden;
}

.status-drag-helper table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.status-drag-helper td {
    padding: 8px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

/* =============================================================================
   GENERIC DRAG CURSOR LOCK
   ============================================================================= */

/*
 * While a PulseDragSystem drag is active, the dragged element is hidden and the
 * helper is pointer-events:none — the cursor would otherwise flicker to whatever
 * element passes under the pointer. pulse-drag-system.js gates this class on
 * <html> for the duration of the gesture (same pattern as the calendar lock below).
 */
.pls-drag-cursor-grabbing,
.pls-drag-cursor-grabbing * {
    cursor: grabbing !important;
}

/* =============================================================================
   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;
}