/* Sortable (generieke herordening, sortable_controller.js) — DSC-117, en
 * hergebruikt door de herordenbare lijsten in sectie L (DSC-160/164).
 *
 * Drie lagen tijdens het slepen:
 *   - de handle zelf (grab/grabbing, touch-action: none voor pointer-drag);
 *   - het item in de lijst als drop-placeholder (.ds-sortable-ghost):
 *     ghost-opacity met een gestippelde brand-omlijning op de doelpositie;
 *   - de meeschuivende preview-kloon (.ds-sortable-preview): raised-schaduw
 *     en een lichte kanteling, zoals de drag-taal in motion.css (DSC-190). */

[data-sortable-handle] {
  touch-action: none;
  cursor: grab;
}
.ds-sortable-dragging,
.ds-sortable-dragging [data-sortable-handle] {
  cursor: grabbing;
}

/* Item op de doelpositie: ghost + gestippelde omlijning (drop-placeholder). */
.ds-sortable-ghost {
  opacity: 0.4;
  outline: 2px dashed var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* Kloon die de cursor volgt; puur visueel, nooit interactief. */
.ds-sortable-preview {
  position: fixed;
  z-index: 60;
  margin: 0;
  pointer-events: none;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  transform: rotate(1deg);
}

/* Paginaboom cross-niveau slepen (DSC-160, FEEDBACK ronde 11): het gesleepte
 * item blijft rustig op zijn plek (alleen gedimd) en een aparte indicator toont
 * de drop-plek, zodat de boom NIET meeflikkert. */
.ds-tree-source {
  opacity: 0.4;
}
/* Sibling-invoeglijn (ervoor/erna), ingesprongen tot het doelniveau; een stip
 * links markeert het startpunt. */
.ds-drop-line {
  position: fixed;
  z-index: 61;
  height: 2px;
  margin-top: -1px;
  background: var(--color-brand);
  border-radius: 9999px;
  pointer-events: none;
}
.ds-drop-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -1px;
  border-radius: 9999px;
  background: var(--color-brand);
}
/* "Wordt subpagina van deze rij": de doelrij licht op (embed-doel). */
.ds-drop-into {
  outline: 2px solid var(--color-brand);
  outline-offset: -1px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
}
/* Tijdens het slepen in de boom geen misleidend hover-vlak op de rijen: alleen
 * de bewuste indicatoren (.ds-drop-line / .ds-drop-into) mogen tonen waar het
 * item landt. Zonder dit lijkt elke rij waar je overheen zweeft een drop-doel -
 * ook bij een menusectie, die daar juist NIET mag landen (feedback Lennart). */
.ds-sortable-dragging [data-page-tree-manage-target="row"]:hover {
  background-color: transparent;
}