html,
body,
#root {
  min-height: 100%;
  background-color: #c5ddd8;
}

html,
body {
  overscroll-behavior-y: none;
  touch-action: manipulation;
}

/* SortableJS: Kategorie-Reorder im Edit-Modus */
.sortable-ghost {
  outline: 2px dashed #2e7d32;
  outline-offset: 2px;
  background-color: rgba(46, 125, 50, 0.12) !important;
}

.sortable-drag {
  opacity: 1 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  cursor: grabbing !important;
  user-select: none !important;
}

/* Shopify Droppable: aktuell anvisierte Ziel-Kachel hervorheben */
.tree-drop-target {
  outline: 3px solid #1976d2;
  outline-offset: -3px;
  box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.35);
}

/* Während des Tree-Draggings keine Hover-/Textselektions-Effekte auf den
   Ziel-Kacheln: interaktive Kinder (Buttons, Inputs) vom Maus-Event abkoppeln,
   damit keine :hover ausgelöst wird und der Cursor durchgängig 'grabbing' bleibt. */
body.tree-dragging {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

body.tree-dragging,
body.tree-dragging * {
  cursor: grabbing !important;
}

body.tree-dragging button,
body.tree-dragging input,
body.tree-dragging textarea,
body.tree-dragging .MuiButtonBase-root,
body.tree-dragging .MuiInputBase-root {
  pointer-events: none !important;
}