/**
 * idf-sortable v0.2.0 — Drag-Visuals
 *
 * Setzt das visuelle Feedback für IDF.createSortable. Anlehnend an die
 * Directus-UI: angefasstes Item bekommt einen weichen Schatten und ist
 * deutlich abgehoben, der Source-Slot wird transparent. Kein dicker
 * Rahmen um Drop-Zonen — die Liste soll beim Verschieben nicht "hopsen".
 *
 * v0.2.0 ergänzt Tree-Mode-Visuals: Drop-Indicator (vertikale Linie
 * zwischen Items, eingerückt bei Sub-Geste), Detach-Container (versteckt
 * Sub-Aufgaben während Block-Drag), Ghost-Indent-Marker.
 *
 * Voraussetzung: idf-core.css (Variablen --surface, --text-muted, ...).
 * WICHTIG: Der Tree-Mode setzt den Drop-Indicator per `position: absolute`
 * relativ zum Sortable-Container. Der Container MUSS daher
 * `position: relative` haben — sonst springt der Indicator.
 */

/* ----------------------------------------------------------------------------
 * Drag-Handle (Greifer-Symbol links am Listeneintrag)
 * ---------------------------------------------------------------------------- */

.idf-sortable-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-muted);
  cursor: grab;
  user-select: none;
  border-radius: var(--radius-sm, 4px);
  transition: background 120ms ease, color 120ms ease;
}
.idf-sortable-handle:hover {
  background: var(--hover);
  color: var(--text);
}

/* Sobald gegriffen: cursor: grabbing auf dem Handle UND auf dem ganzen Item. */
.idf-sortable-chosen,
.idf-sortable-chosen .idf-sortable-handle {
  cursor: grabbing !important;
}

/* ----------------------------------------------------------------------------
 * Source-Slot (Item bleibt im DOM, wird aber durchscheinend, solange das
 * Original-Item gezogen wird)
 * ---------------------------------------------------------------------------- */

.idf-sortable-ghost {
  opacity: 0.35;
}

/* ----------------------------------------------------------------------------
 * Drag-Repräsentation (schwebt unter dem Cursor, leicht hervorgehoben)
 *
 * Achtung: SortableJS klont das Item für den Drag — der Klon erbt das
 * Layout des Originals. Wir geben ihm Schatten und minimale Skalierung,
 * damit klar ist: "das hier ziehst du gerade".
 * ---------------------------------------------------------------------------- */

.idf-sortable-drag {
  cursor: grabbing;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transform: scale(1.015);
  opacity: 0.95;
}

/* Body-Klasse während eines aktiven Drags — verhindert Text-Selektion und
   setzt globalen Cursor. Tree-Mode setzt diese Klasse automatisch in
   onStart/onEnd; simple-Mode setzt sie nicht (Aufrufer kann das selbst). */
body.idf-sortable-dragging {
  cursor: grabbing;
  user-select: none;
}

/* ----------------------------------------------------------------------------
 * Tree-Mode Visuals
 *
 * Drop-Indicator: vertikale 2-px-Linie zwischen den Items, eingerückt bei
 * Sub-Geste. Der Indicator ist EIN Element pro Sortable-Instanz, das im
 * Container hängt und per `transform: translate(x, y)` positioniert wird.
 *
 * Detach-Container: versteckt die Sub-Aufgaben während Block-Drag. Sie
 * dürfen nicht via `display: none` raus, weil Browser den Layout-Reflow
 * verlieren — wir parken sie in einem `position: absolute`-Container,
 * der visuell außerhalb des Viewports liegt.
 * ---------------------------------------------------------------------------- */

/* Drop-Indicator-Linie (`.idf-sortable-tree-indicator`) entfernt mit v0.5.0.
   Das Drop-Feedback liefert jetzt der native SortableJS-Lücken-Reflow: das
   halbtransparente Platzhalter-Item (`.idf-sortable-ghost`) gleitet mit
   `animation: 150ms` an die Zielstelle (wie Directus/WordPress). Die separate
   2px-Linie war als alleiniger Hinweis zu schwach (Joerg-Feedback). Die
   Einrück-Stufe zeigt weiterhin der versetzte Drag-Klon
   (`.idf-sortable-tree-indent-1/-2`). */

/* Detach-Container: versteckt Sub-Aufgaben während Block-Drag, ohne sie
   aus dem DOM zu entfernen. So bleiben Daten und Event-Handler intakt. */
.idf-sortable-tree-detach {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.idf-sortable-tree-detached {
  /* Defensive: falls jemand den Detach-Container per CSS umpositioniert,
     bleibt das Item trotzdem unsichtbar. */
  visibility: hidden;
}

/* Indent-Klasse am Drag-Element ("ich werde gleich Sub"). Dezente
   Einrückung, damit der User sofort sieht, dass die Geste greift.
   v0.4.0: pro Level eine eigene Klasse — bei maxLevel: 2 kann der
   User per Geste auf 2 Stufen indentieren. */
.idf-sortable-tree-indent-1 {
  margin-left: 24px;
  transition: margin-left 80ms ease;
}
.idf-sortable-tree-indent-2 {
  margin-left: 48px;
  transition: margin-left 80ms ease;
}

/* Während ein Tree-Drag aktiv ist, schalten wir Hover-Visuals der Liste
   ab (CSS-Hook für Konsumenten — Modul kann eigenes :not(.idf-sortable-
   tree-active) im Hover verwenden, falls nötig). */
.idf-sortable-tree-active {
  cursor: grabbing;
}