/* NOTE: mw-dnd — Structural styles for unified drag-and-drop module
   Visual styles (colors, shadows) are owned by each consumer's CSS file.
   These classes handle positioning, z-index, and pointer-events only. */

/* NOTE: Ghost — fixed-position element following cursor */
.mw-dnd-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    will-change: transform;
    user-select: none;
}

/* NOTE: Ghost label mode — compact text box */
.mw-dnd-ghost--label {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--mud-palette-lines-default);
}

/* NOTE: Source element during drag */
.mw-dnd-source {
    opacity: 0.4;
}

/* NOTE: Insertion line — reorder indicator */
.mw-dnd-insertion-line {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: var(--mud-palette-primary);
    border-radius: 1px;
    transition: top 60ms ease-out, left 60ms ease-out;
}

.mw-dnd-insertion-line::before,
.mw-dnd-insertion-line::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

/* Horizontal line (vertical reorder): dots on left and right */
.mw-dnd-insertion-line[style*="height: 2px"]::before {
    top: -3px;
    left: -4px;
}

.mw-dnd-insertion-line[style*="height: 2px"]::after {
    top: -3px;
    right: -4px;
}

/* Vertical line (horizontal reorder): dots on top and bottom */
.mw-dnd-insertion-line[style*="width: 2px"]::before {
    left: -3px;
    top: -4px;
}

.mw-dnd-insertion-line[style*="width: 2px"]::after {
    left: -3px;
    bottom: -4px;
}

/* NOTE: Drop zone feedback classes — consumers apply visual styles via these hooks */
.mw-dnd-highlight {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* NOTE: Gap spacer — animated insertion placeholder for liveGap behavior */
.mw-dnd-gap-spacer {
    overflow: hidden;
    transition: height 150ms ease, width 150ms ease;
    border-radius: 4px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
    flex-shrink: 0;
}

/* NOTE: Collapsed source — thin line placeholder when source is dragged away */
.mw-dnd-collapsed {
    height: 3px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 2px 0 !important;
    overflow: hidden;
    opacity: 0.3;
    border-radius: 2px;
    background: var(--mud-palette-primary);
    border: none !important;
    transition: height 150ms ease, padding 150ms ease, opacity 150ms ease;
}

/* NOTE: Test page styles (prefixed mw-dt-*) */

.mw-dt-scenario {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 16px;
    position: relative;
}

.mw-dt-scenario-title {
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* NOTE: Scenario 1 — List reorder */
.mw-dt-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 100px;
}

.mw-dt-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    transition: opacity 150ms;
}

.mw-dt-list-item .mw-dt-handle {
    color: var(--mud-palette-text-disabled);
    cursor: grab;
    flex-shrink: 0;
}

/* NOTE: Scenario 2 — Palette to grid */
.mw-dt-palette {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mw-dt-palette-item {
    padding: 8px 12px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    font-size: 13px;
    font-weight: 500;
    transition: opacity 150ms;
}

.mw-dt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    min-height: 200px;
    padding: 8px;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
}

.mw-dt-grid-cell {
    padding: 10px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    min-height: 40px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms, border-color 150ms;
}

.mw-dt-grid-cell.mw-dnd-highlight {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-color: var(--mud-palette-primary);
}

/* NOTE: Scenario 3 — Multi-column schedule */
.mw-dt-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.mw-dt-column {
    min-height: 250px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
}

.mw-dt-column-header {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 13px;
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mw-dt-column-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    min-height: 200px;
    transition: background 150ms;
}

.mw-dt-column-body.mw-dnd-highlight {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.mw-dt-event {
    padding: 8px 10px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 4px;
    cursor: grab;
    user-select: none;
    font-size: 13px;
    transition: opacity 150ms;
}

.mw-dt-event-time {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

/* NOTE: Scenario 4 — Window move */
.mw-dt-window-area {
    position: relative;
    height: 300px;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 19px,
            color-mix(in srgb, var(--mud-palette-lines-default) 30%, transparent) 19px,
            color-mix(in srgb, var(--mud-palette-lines-default) 30%, transparent) 20px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 19px,
            color-mix(in srgb, var(--mud-palette-lines-default) 30%, transparent) 19px,
            color-mix(in srgb, var(--mud-palette-lines-default) 30%, transparent) 20px
        );
}

.mw-dt-window {
    position: absolute;
    width: 220px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    user-select: none;
}

.mw-dt-window-titlebar {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 13px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    cursor: grab;
}

.mw-dt-window-body {
    padding: 12px;
    font-size: 13px;
}

/* NOTE: Event log */
.mw-dt-log {
    max-height: 180px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 12px;
    padding: 8px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
}

.mw-dt-log-entry {
    padding: 2px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-dt-log-entry:last-child {
    border-bottom: none;
}

/* NOTE: Scenario 2 — Per-cell compatibility coloring on hover */
.mw-dt-cell-compatible {
    background: color-mix(in srgb, var(--mud-palette-success) 20%, transparent) !important;
    border-color: var(--mud-palette-success) !important;
    box-shadow: 0 0 0 1px var(--mud-palette-success);
}

.mw-dt-cell-partial {
    background: color-mix(in srgb, var(--mud-palette-warning) 20%, transparent) !important;
    border-color: var(--mud-palette-warning) !important;
    box-shadow: 0 0 0 1px var(--mud-palette-warning);
}

.mw-dt-cell-incompatible {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent) !important;
    border-color: var(--mud-palette-error) !important;
    box-shadow: 0 0 0 1px var(--mud-palette-error);
}

/* NOTE: Scenario 5 — Kanban with liveGap */
.mw-dt-kanban-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.mw-dt-kanban-column {
    min-height: 250px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
}

.mw-dt-kanban-header {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mw-dt-kanban-header--todo {
    background: color-mix(in srgb, var(--mud-palette-info) 15%, transparent);
    color: var(--mud-palette-info);
}

.mw-dt-kanban-header--progress {
    background: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent);
    color: var(--mud-palette-warning);
}

.mw-dt-kanban-header--done {
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
    color: var(--mud-palette-success);
}

.mw-dt-kanban-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    min-height: 200px;
    transition: background 150ms;
}

.mw-dt-kanban-body.mw-dnd-highlight {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.mw-dt-kanban-card {
    padding: 10px 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    font-size: 13px;
    transition: opacity 150ms, height 150ms, padding 150ms;
}

.mw-dt-kanban-card-label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}