/* Drag and drop — affordances layered on PF v6 drag-and-drop markup for the phaDragDrop factory.
   PatternFly draggable items are borderless at rest: the only in-flight visual is PF's own
   pf-m-dragging on .pf-v6-c-draggable (box-shadow + brand-blue outline) and pf-m-ghost-row on
   data-list / dual-list rows. The smooth slide of the other items as you drag is a FLIP animation
   the factory applies inline (transform transition) — PF animates the same way, via JS not CSS.
   This file only adds the grab cursor, row padding/spacing, and the vertical multi-zone layout. */

/* Default variant (basic / multiple-zones): a plain, borderless text row. The grip is a full-height
   handle flush to the left edge (no row padding around it); the label carries the row's spacing. */
.pha-dd-draggable {
  display: flex;
  align-items: center;
  border-radius: var(--pf-t--global--border--radius--small);
}

.pha-dd-label {
  display: flex;
  align-items: center;
  padding-block: var(--pf-t--global--spacer--sm);
  padding-inline-end: var(--pf-t--global--spacer--md);

  /* pin the body text colour so the label can't inherit a light/white colour from any context
     (the overlay clone + the in-list placeholder must keep normal dark text while dragging) */
  color: var(--pf-t--global--text--color--regular);
}

/* The grip (six dots) IS the drag handle — like PF's DragButton, dragging only starts here, not
   from the whole row. Plain-button affordance: subtle icon, PF's plain-action grey on hover/press.
   Full-height + flush left (align-self stretch, no row padding) so the grey fills the row edge to
   edge with no gap — its only padding is inline, to give the dots breathing room. */
.pha-dd-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem; /* width is the source of truth... */
  aspect-ratio: 1; /* ...height derived from it → a square hover target */
  flex-shrink: 0;
  border-radius: var(--pf-t--global--border--radius--small);

  /* the dots inherit the plain-button text colour like PF's DragButton (dark in light theme, WHITE
     in dark theme) — a constant colour that does NOT change on hover/press; only the bg greys */
  color: var(--pf-t--global--text--color--regular);
  cursor: grab;
  touch-action: none;
}

.pha-dd-grip:hover,
.pha-dd-grip:active {
  background-color: var(--pf-t--global--background--color--action--plain--hover);
}

.pha-dd-grip:active {
  cursor: grabbing;
}

.pha-dd-grip:focus-visible {
  outline: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--brand--default);
  outline-offset: -1px;
}

/* Dual-list rows are draggable too */
.pha-dd-row {
  cursor: grab;
}

/* Every draggable row suppresses touch scrolling so a touch drag reorders instead of panning the
   page (the grab cursor lives on the actual handle — the grip, or the whole row for dual-list) */
[data-dd-item] {
  touch-action: none;
}

/* The lifted row as it glides under the pointer (it stays in the list; the factory sets
   position:relative + z-index inline so it renders above its siblings, and a translateY to follow
   the cursor). Works for every variant since data-list / dual-list rows are not .pf-v6-c-draggable.
   Mirrors PF's pf-m-dragging: opaque background, elevation shadow, brand outline. */
.pha-dd-grabbed {
  cursor: grabbing;
  background-color: var(--pf-t--global--background--color--primary--default);
  box-shadow: var(--pf-t--global--box-shadow--md);
  border-radius: var(--pf-t--global--border--radius--small);
  outline: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--brand--default);
  outline-offset: -1px;
}

/* The original row left in the list while the overlay clone is dragged — the placeholder. Matching
   PF's captured DOM (pf-v6-c-droppable.pf-m-dragging): the row's background and text do NOT change;
   its only marks are a 1px brand-blue outline via ::after (PF's --droppable--m-dragging--after tokens:
   regular width, brand colour, small radius; before--Opacity is 0 so there is NO background tint) and
   the grip staying pressed-grey (same grey as hover — PF sets its drag button aria-pressed="true"). */
.pha-dd-placeholder {
  position: relative;
}

.pha-dd-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--brand--default);
  border-radius: var(--pf-t--global--border--radius--small);
  pointer-events: none;
}

.pha-dd-placeholder .pha-dd-grip {
  background-color: var(--pf-t--global--background--color--action--plain--hover);
}

/* While any drag is in flight: grabbing cursor everywhere, no accidental text selection */
body.pha-dd-dragging {
  cursor: grabbing;
  user-select: none;
}

/* Multiple-zones: the two labelled drop zones stack vertically (PF separates them with a line
   break), not side by side */
.pha-dd-zones {
  display: flex;
  flex-direction: column;
  gap: var(--pf-t--global--spacer--lg);
}

.pha-dd-zone-title {
  font-weight: var(--pf-t--global--font--weight--body--bold);
  margin-block-end: var(--pf-t--global--spacer--sm);
}

/* The droppable list within a zone keeps a min-height so an emptied zone still accepts drops */
.pha-dd-zone-list {
  min-height: 3rem;
}