/* ------------------------------------------------------------
   dragdrop.css
   ------------------------------------------------------------
   Styles for DragDropCore.js — filesystem-like drag & drop UI.
   Uses project variables declared in :root (see main stylesheet).
   This file provides:
     - visuals for .node (files) and .child / .children (folders)
     - placeholder visuals for drop targets
     - highlight & drag states
     - collapsible children behavior
   ------------------------------------------------------------
   Author: MIE1981
   Version: 1.0
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Root container (the virtual filesystem)
   ------------------------------------------------------------ */
.root {
  background: linear-gradient(180deg, var(--colour-bg-deep1), var(--colour-bg-deep2));
  color: var(--colour-text);
  padding: 12px;
  border: 1px solid var(--colour-border);
  border-radius: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --gap: 8px;
}

/* ------------------------------------------------------------
   Folder (.child)
   ------------------------------------------------------------ */
.child {
  margin: 6px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.03));
  box-shadow: 0 1px 0 var(--colour-card-shadow);
  transition:
    box-shadow var(--transition-speed),
    background var(--transition-speed),
    border-color var(--transition-speed);
}

/* Highlight when hovered as a drop target */
.child.dd-highlight {
  outline: 2px dashed var(--colour-accent);
  background: linear-gradient(90deg, var(--colour-bg-highlight), transparent);
}

/* ------------------------------------------------------------
   Folder content wrapper (.child-content)
   ------------------------------------------------------------ */
.child-content {
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* ------------------------------------------------------------
   File container (.nodes)
   ------------------------------------------------------------ */
.nodes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 6px;
}

/* ------------------------------------------------------------
   Single file (.node)
   ------------------------------------------------------------ */
.node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--colour-card-bg);
  border: 1px solid var(--colour-border);
  box-shadow: 0 1px 0 var(--colour-card-shadow);
  cursor: grab;
  user-select: none;
  transition:
    transform var(--transition-speed),
    box-shadow var(--transition-speed),
    background var(--transition-speed);
}

/* While dragging the source element */
.node.dd-dragging,
.child.dd-dragging {
  opacity: 0.45;
  transform: scale(0.995);
  cursor: grabbing;
}

/* ------------------------------------------------------------
   Subfolders container (.children)
   ------------------------------------------------------------ */
.children {
  padding-left: 12px;
  border-left: 1px dashed var(--colour-border);
  margin-left: 6px;
}

/* ------------------------------------------------------------
   Drop placeholder (.dd-placeholder)
   ------------------------------------------------------------ */
.dd-placeholder {
  height: 42px;
  border-radius: 6px;
  border: 2px dashed var(--colour-accent);
  background: linear-gradient(90deg, var(--colour-bg-highlight), transparent);
  display: flex;
  align-items: center;
  padding: 8px 10px;
  color: var(--colour-on-accent);
  font-weight: 600;
  gap: 8px;
  transition:
    background var(--transition-speed),
    transform var(--transition-speed),
    opacity var(--transition-speed);
  opacity: 0.85;
}

/* Optional "line" mode (for slimmer placeholder) */
.dd-placeholder.line {
  height: 0;
  border: none;
  border-top: 2px dashed var(--colour-accent);
  background: none;
  margin: 6px 0;
  opacity: 0.9;
}

/* Placeholder spacing in empty containers */
.nodes:empty > .dd-placeholder,
.children:empty > .dd-placeholder {
  margin: 4px 0;
}

/* ------------------------------------------------------------
   Collapsed folder behavior (optional helper)
   ------------------------------------------------------------ */
.child.collapsed > .child-content {
  display: none;
}

/* ------------------------------------------------------------
   File/folder labels
   ------------------------------------------------------------ */
.node .label,
.child > .child-header {
  color: var(--colour-link);
  font-weight: 500;
}

/* ------------------------------------------------------------
   Subtle separators
   ------------------------------------------------------------ */
.node + .node {
  margin-top: 2px;
}

/* ------------------------------------------------------------
   Focus & accessibility
   ------------------------------------------------------------ */
.node:focus {
  outline: 2px solid var(--colour-bg-highlight);
  outline-offset: 2px;
}

.dd-placeholder[aria-hidden="true"] {
  display: none;
}