/* tree.css — SVG-Baum: Knoten, Kanten, Highlights, Animationen */

/* Edges (Verbindungslinien) */
.edge {
  fill: none;
  stroke: #cbd5e1;
  stroke-width: 2;
  transition: stroke 0.3s, stroke-width 0.3s;
}

.edge.highlighted,
.edge.anim-highlight {
  stroke: var(--primary, #4a6cf7);
  stroke-width: 3;
}

/* Nodes (Knoten) */
.node {
  cursor: pointer;
}

.node .node-bg {
  fill: #ffffff;
  stroke: #e2e8f0;
  stroke-width: 2;
  transition: fill 0.2s, stroke 0.3s, stroke-width 0.3s;
}

.node:hover .node-bg {
  stroke: #94a3b8;
  fill: #f8fafc;
}

.node.folder .node-bg {
  fill: #fffbeb;
  stroke: #fcd34d;
}

.node.folder:hover .node-bg {
  fill: #fef3c7;
}

.node-label {
  font-size: 18px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-weight: 600;
  fill: #1e293b;
  pointer-events: none;
  user-select: none;
}

/* Highlighted state */
.node.highlighted .node-bg,
.node.anim-highlight .node-bg {
  stroke: var(--primary, #4a6cf7);
  stroke-width: 3;
  fill: #e8ecff;
}

.node.highlighted.folder .node-bg,
.node.anim-highlight.folder .node-bg {
  fill: #e8ecff;
  stroke: var(--primary, #4a6cf7);
}

/* Current directory marker (relative paths) */
.node.current-dir .node-bg {
  stroke: #3b82f6;
  stroke-width: 3;
  stroke-dasharray: 8 4;
  fill: #dbeafe;
  animation: march 1s linear infinite;
}

@keyframes march {
  to { stroke-dashoffset: -18; }
}

/* Correct answer */
.node.correct .node-bg {
  stroke: #22c55e;
  stroke-width: 3.5;
  fill: #dcfce7;
}

/* Wrong answer */
.node.wrong .node-bg {
  stroke: #ef4444;
  stroke-width: 3.5;
  fill: #fee2e2;
}

/* Hover drop shadow */
.node:hover {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.08));
}