/* 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;
  min-height: 2rem;
}

/* Single-line rows are exactly 2rem and vertically centered so font-weight
   changes (active 600 → inactive 400) cannot shift the text baseline. The
   height is a floor (min-height), not a fixed value: a label that wraps to
   two lines grows the row, and the active highlight (the anchor's own
   background) grows with it instead of being clipped at 2rem. */
.nav-tree-node > a {
  display: flex;
  align-items: center;
  min-height: 2rem;
  overflow-wrap: anywhere;
}

/* 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;
}