.drag-ready {
    cursor: url('../icons/cursors/hand.png') 2 2, grab;
    box-shadow: 2px 2px 3px gray;
}

.pl-datafield-block.drag-ready > div {
    pointer-events: none;
}

/* Field-level Drag and Drop Styles (F2F, F2C, C2C) */

/* Applied to block when Ctrl is held in field mode: enables field-level hover feedback.
   Block-wide hand cursor only where records copy is also possible; field-copy-only areas
   (e.g. masks) rely on the per-source-field cursor below so gaps/buttons/backgrounds stay inert. */
.pl-datafield-block.field-drag-mode[data-dd-records='true'] {
    cursor: url('../icons/cursors/hand.png') 2 2, grab;
}

/* Hover feedback only over valid copy sources not already part of an active drag.
   The hand cursor is a fallback: drag-and-drop.js injects per-mode cursor rules
   (generated from _DD_MODE_CURSORS) that override it while Ctrl is held. */
.pl-datafield-block.field-drag-mode .pl-df[data-df-dragsource='true']:not(.dd-field-source):not(.dd-field-target):hover {
    outline: 2px dashed rgba(100, 100, 100, 0.5);
    box-shadow: 2px 2px 3px gray;
    cursor: url('../icons/cursors/hand.png') 2 2, grab;
}

.dd-field-source {
    outline: 2px solid rgba(76, 175, 80, 0.9);
    background-color: rgba(76, 175, 80, 0.15) !important;
    position: relative;
    z-index: 1;
}

.dd-field-target {
    outline: 2px solid #FFC90E;
    background-color: rgba(168, 244, 255, 0.3) !important;
    box-shadow: 0 0 6px rgba(168, 244, 255, 0.7);
    position: relative;
    z-index: 2;
}

/* F2C mode: use dashed outline for targets to visually indicate column-wide operation */
.pl-datafield-block[data-dd-mode="FieldToColumn"] .pl-df.dd-field-target {
    outline-style: dashed;
}

/* C2C mode: dashed outline on both source and target columns */
.pl-datafield-block[data-dd-mode="ColumnToColumn"] .pl-df.dd-field-source,
.pl-datafield-block[data-dd-mode="ColumnToColumn"] .pl-df.dd-field-target {
    outline-style: dashed;
}

/* Enhanced Title Drag and Drop Styles */
.title-drag-source {
    opacity: 0.7;
    cursor: grabbing !important;
    background-color: rgba(0, 123, 255, 0.15);
    border: 2px solid #007bff;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.05) rotate(2deg);
    z-index: var(--z-index-overlay);
    position: relative;
    transition: all 0.2s ease;
}

/* Remove the old blue line indicators - they are replaced by live preview */
.title-drop-target-left {
    position: relative;
}

.title-drop-target-left::before {
    display: none;
}

.title-drop-target-right {
    position: relative;
}

.title-drop-target-right::after {
    display: none;
}

/* Enhanced draggable title styles */
.title:not(.title-drag-source) {
    cursor: grab;
}

.title:not(.title-drag-source):hover {
    background-color: rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease;
}

/* Title container transitions for smooth preview animations */
div[id^="dfc-"] {
    transition: transform 0.2s ease-out;
    transform-origin: left center;
}

/* During drag operation, ensure smooth transitions */
.pl-titleblock.dragging div[id^="dfc-"] {
    transition: transform 0.2s ease-out;
}

/* Disable pointer events on children during drag */
.title-drag-source * {
    pointer-events: none;
}

/* Ensure the page doesn't show text selection cursor during drag */
body.dragging,
body.dragging-title {
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: url("../icons/cursors/hand-back-fist.png"), grabbing !important;
}

/* Smooth transitions for all title movements */
.title-preview-mode {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Suppresses text selection while Shift/Ctrl is pressed over a layout block
   (marking mode, D&D modifiers). Toggled from helpers.js on mousedown/mouseup. */
body.pl-no-select,
body.pl-no-select .pl-block {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Records drag: only whole rows are targets (class toggled by drag-and-drop.js). */
body.pl-records-drag .pl-collapse-expand {
    pointer-events: none;
}

body.pl-records-drag .pl-datafield-block > :not(.pl-dd-left-strip):not(.pl-dd-after-strip) {
    pointer-events: none;
}

/* Always in the DOM (drop zones can't wait for a mid-drag re-render); hit-testable only while records-dragging. */
.pl-dd-left-strip,
.pl-dd-after-strip {
    pointer-events: none;
}

/* Zero-height at rest — the overhang below the last row would otherwise inflate the window's scroll height. */
.pl-dd-after-strip {
    height: 0;
}

body.pl-records-drag .pl-dd-left-strip,
body.pl-records-drag .pl-dd-after-strip {
    pointer-events: auto;
}

body.pl-records-drag .pl-dd-after-strip {
    height: 6px;
}

/* Record-level Drag and Drop Styles (Shift = move, Ctrl in Records mode = copy).
   Class names are emitted by DragAndDropController.GetBlockStyle. */

/* The dragged record (and all its children): tinted green and dimmed in place while a ghost follows the cursor. */
.pl-datafield-block.dd-source {
    background-color: rgba(208, 255, 156, 0.61) !important;
    opacity: 0.7;
}

/* Raise drop targets so their highlight/insertion line paints above adjacent blocks. */
.pl-datafield-block.dd-target,
.pl-datafield-block.dd-target-ahead,
.pl-datafield-block.dd-target-behind {
    z-index: 2;
}

/* Drop INTO the target: the dragged record becomes its child (subordinate). */
.pl-datafield-block.dd-target {
    background-color: rgba(156, 227, 255, 0.61) !important;
    outline: 2px solid #4aa3df;
    outline-offset: -2px;
}

/* Drop BEFORE/AFTER: 2px insertion line; DAG blocks use the box-shadow fallback below. */
.pl-datafield-block:not(.pl-dag-datafield-block).dd-target-ahead::before,
.pl-datafield-block:not(.pl-dag-datafield-block).dd-target-behind::after {
    content: "";
    position: absolute;
    /* --dd-line-indent: the selected drop level's indentation (set inline by PlDfBlock). */
    left: var(--dd-line-indent, 0px);
    right: 0;
    height: 2px;
    background-color: #4aa3df;
    box-shadow: 0 0 3px rgba(74, 163, 223, 0.8);
    z-index: 3;
    pointer-events: none;
    animation: pl-dd-indicator-in 70ms ease-out;
}

.pl-datafield-block:not(.pl-dag-datafield-block).dd-target-ahead::before {
    top: -1px;
}

.pl-datafield-block:not(.pl-dag-datafield-block).dd-target-behind::after {
    bottom: -1px;
}

/* Insertion markers (native parity): three 8x8 triangles pointing at the line;
   one clip-path polygon renders all three — they share a baseline. */
.pl-datafield-block:not(.pl-dag-datafield-block).dd-target-ahead::after,
.pl-datafield-block:not(.pl-dag-datafield-block).dd-target-behind::before {
    content: "";
    position: absolute;
    /* Centered on the insertion line, which starts at --dd-line-indent. */
    left: calc(50% + var(--dd-line-indent, 0px) / 2);
    margin-left: -19px;
    width: 38px;
    height: 8px;
    background-color: #4aa3df;
    z-index: 3;
    pointer-events: none;
    animation: pl-dd-indicator-in 70ms ease-out;
}

.pl-datafield-block:not(.pl-dag-datafield-block).dd-target-ahead::after {
    top: 2px;
    clip-path: polygon(0 8px, 4px 0, 8px 8px, 15px 8px, 19px 0, 23px 8px, 30px 8px, 34px 0, 38px 8px);
}

.pl-datafield-block:not(.pl-dag-datafield-block).dd-target-behind::before {
    bottom: 2px;
    clip-path: polygon(0 0, 4px 8px, 8px 0, 15px 0, 19px 8px, 23px 0, 30px 0, 34px 8px, 38px 0);
}

/* DAG blocks: both pseudo-elements draw the node border — signal with an edge shadow. */
.pl-dag-datafield-block.dd-target-ahead {
    box-shadow: 0 -3px 0 0 #4aa3df;
}

.pl-dag-datafield-block.dd-target-behind {
    box-shadow: 0 3px 0 0 #4aa3df;
}

@keyframes pl-dd-indicator-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}