/* DRAG CONTAINER */
.global-drag-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm-08);
}

/* ITEM */
.global-drag-item {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg-16);
  transition: var(--transition-fast);
  cursor: grab;
  user-select: none;
}

.global-drag-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.global-drag-item:active {
  cursor: grabbing;
}

/* DRAGGING */
.global-drag-item.dragging {
  opacity: 0.5;
  transform: scale(0.98);
  box-shadow: var(--shadow-lg);
  z-index: 100;
}

/* DROP TARGET */
.global-drag-item.drag-over {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* DROP INDICATOR TOP */
.global-drag-item.drop-top::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background: var(--color-primary);
}

/* DROP INDICATOR BOTTOM */
.global-drag-item.drop-bottom::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background: var(--color-primary);
}

/* HANDLE */
.global-drag-handle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: grab;
  color: var(--color-text-secondary);
}

.global-drag-handle i {
  font-size: var(--font-lg-16);
}

.global-drag-handle:hover {
  color: var(--color-primary);
}

/* ROW */
.global-drag-row {
  display: flex;
  align-items: center;
  gap: var(--space-md-12);
  padding: var(--space-md-12);
}

/* CONTENT */
.global-drag-content {
  flex: 1;
  min-width: 0;
}

/* TITLE */
.global-drag-title {
  font-size: var(--font-md-14);
  font-weight: var(--font-semibold-600);
  color: var(--color-text);
}

/* SUBTITLE */
.global-drag-subtitle {
  margin-top: var(--space-xs-04);
  font-size: var(--font-sm-12);
  color: var(--color-text-secondary);
}

/* ACTIONS */
.global-drag-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm-08);
  flex-shrink: 0;
}

/* EMPTY ZONE */
.global-drag-empty {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg-16);
  padding: var(--space-2xl-32);
  text-align: center;
  color: var(--color-text-secondary);
}

/* PLACEHOLDER */
.global-drag-placeholder {
  height: 60px;
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius-lg-16);
  background: var(--color-primary-light);
}

/* DISABLED */
.global-drag-item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.global-drag-item.disabled .global-drag-handle {
  cursor: not-allowed;
}