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

/* Base node in the tree — fixed height prevents connector "dancing" when
   font-weight changes between active (600) and inactive (400) states.
   Height = text-sm line-height (1.25rem) + py-1.5 top+bottom (0.75rem) = 2rem */
.nav-tree-node {
  position: relative;
  height: 2rem;
}

/* Lock anchor height and vertically center text so font-weight changes
   (active 600 → inactive 400) cannot shift the text baseline. */
.nav-tree-node > a {
  display: flex;
  align-items: center;
  height: 2rem;
  overflow: hidden;
}

/* L-shaped connector: vertical line from parent level + horizontal line to child.
   Uses fixed rem values (not percentages) so font-weight changes on active/inactive
   states cannot shift the connector position. */
.nav-tree-connector {
  position: absolute;
  top: 0;
  height: 1rem;
  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: visible;
  transition: opacity 200ms ease-in-out;
}