/* Sidebar tree navigation — L-shaped CSS connectors and tree indentation */

/* Base node in the tree */
.nav-tree-node {
  position: relative;
}

/* L-shaped connector: vertical line from parent level + horizontal line to child */
.nav-tree-connector {
  position: absolute;
  top: 0;
  height: 50%;
  width: 0.5rem;
  border-left: 1px solid rgb(209 213 219);   /* Tailwind gray-300 */
  border-bottom: 1px solid rgb(209 213 219);
  pointer-events: none;
}

/* Active node emphasis — bold text with subtle background highlight */
.nav-tree-node--active {
  font-weight: 600;
  background-color: rgb(238 242 255);  /* Tailwind indigo-50 */
  color: rgb(55 48 163);               /* Tailwind indigo-800 */
}

.nav-tree-node--active:hover {
  background-color: rgb(224 231 255);  /* Tailwind indigo-100 */
}

/* Children container with subtle expand animation */
.nav-tree-children {
  overflow: hidden;
  transition: opacity 200ms ease-in-out;
}