/**
 * TreeNavigation Styles
 * 
 * Modern minimal tree navigation (Notion/Linear style):
 * - CSS-only disclosure triangle with smooth rotation
 * - No guide lines — clean indentation only
 * - Depth-aware sizing via data-depth attribute
 * - Hover-reveal toggle for subtle UX
 */

.treeNavigation {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 0.5rem;
}

/* ============================================ */
/* SEPARATOR                                    */
/* ============================================ */

.separator {
  height: 1px;
  background: var(--border-color, #e2e8f0);
  margin: 0.5rem 0.75rem;
}

/* ============================================ */
/* SECTION                                      */
/* ============================================ */

.treeSection {
  margin-bottom: 0.25rem;
}

.sectionHeader {
  padding: 0.5rem 0.75rem;
}

.sectionTitle {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-tertiary, #94a3b8);
  text-transform: uppercase;
}

.sectionContent {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* ============================================ */
/* TREE NODE                                    */
/* ============================================ */

.treeNodeContainer {
  display: flex;
  flex-direction: column;
}

.treeNode {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  text-align: left;
  color: var(--text-secondary, #64748b);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  transition: background 0.15s ease, color 0.15s ease;
}

.treeNode:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.04));
  color: var(--text-primary, #1a1a1a);
}

/* Leaf node active — strong pill highlight */
.treeNode.active {
  background: var(--primary-light, #e0e7ff);
  color: var(--primary-color, #2563eb);
  font-weight: 500;
}

/* Group/parent active — subtle text color only, no background */
.treeNode.activeGroup {
  color: var(--primary-color, #2563eb);
}

.treeNode.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/*
 * Label-only row under a parent that shows an icon: indent so text lines up with the
 * parent's title, not with the icon column (see .nodeIcon width + .treeNode gap).
 */
.treeNodeAlignWithParentTitle {
  padding-left: calc(0.5rem + 0.875rem + 0.375rem);
}

/* ============================================ */
/* DEPTH-SPECIFIC STYLES (via data-depth)       */
/* ============================================ */

.treeNode[data-depth="0"] {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  padding: 0.5rem 0.5rem;
}

.treeNode[data-depth="1"] {
  font-size: 0.8125rem;
  font-weight: 500;
}

.treeNode[data-depth="2"],
.treeNode[data-depth="3"],
.treeNode[data-depth="4"],
.treeNode[data-depth="5"] {
  font-size: 0.75rem;
  font-weight: 400;
}

/* ============================================ */
/* NODE CHILDREN (INDENTATION ONLY)             */
/* ============================================ */

.treeNodeChildren {
  margin-left: 0.75rem;
  padding-left: 0.5rem;
}

/* ============================================ */
/* TOGGLE (CSS-only disclosure triangle)        */
/* ============================================ */

.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
}

/* The triangle — pure CSS, no icon needed */
.toggle::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 4.5px solid var(--text-tertiary, #94a3b8);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform 0.2s ease, border-color 0.15s ease;
}

/* Rotate triangle when expanded */
.toggleExpanded::after {
  transform: rotate(90deg);
}

/* Hover feedback */
.toggle:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.06));
}

.toggle:hover::after {
  border-left-color: var(--text-primary, #1a1a1a);
}

/* Active node toggle */
.treeNode.active .toggle::after,
.treeNode.activeGroup .toggle::after {
  border-left-color: var(--primary-color, #2563eb);
}

/* Spacer for leaf nodes (keeps alignment with toggle nodes) */
.toggleSpacer {
  width: 1.125rem;
  flex-shrink: 0;
}

/* ============================================ */
/* NODE ELEMENTS                                */
/* ============================================ */

.nodeIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.8;
}

.treeNode.active .nodeIcon,
.treeNode.activeGroup .nodeIcon {
  opacity: 1;
}

.nodeLabel {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nodeBadge {
  font-size: 0.625rem;
  padding: 0.0625rem 0.375rem;
  background: var(--surface-color, #f0f0f0);
  border-radius: 9999px;
  color: var(--text-tertiary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  flex-shrink: 0;
}

/* Badge variants */
.badgePrimary {
  background: var(--primary-color, #2563eb);
  color: white;
}

.badgeSuccess {
  background: var(--success-color, #22c55e);
  color: white;
}

.badgeWarning {
  background: var(--warning-color, #f59e0b);
  color: white;
}

/* Active node badge */
.treeNode.active .nodeBadge {
  background: var(--primary-color, #2563eb);
  color: white;
}

/* ============================================ */
/* NODE ACTIONS (hover-reveal inline icons)     */
/* ============================================ */

.nodeActions {
  display: none;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  margin-left: auto;
}

.treeNode:hover .nodeActions {
  display: flex;
}

/* ============================================ */
/* DARK THEME                                   */
/* ============================================ */

:global(.dark-theme) .separator {
  background: var(--border-dark, #333);
}

:global(.dark-theme) .sectionTitle {
  color: var(--text-tertiary-dark, #666);
}

:global(.dark-theme) .treeNode {
  color: var(--text-secondary-dark, #aaa);
}

:global(.dark-theme) .treeNode:hover {
  background: var(--hover-bg-dark, rgba(255, 255, 255, 0.06));
  color: var(--text-primary-dark, #fff);
}

:global(.dark-theme) .treeNode.active {
  background: var(--primary-dark-bg, #1e3a5f);
  color: var(--primary-light, #93c5fd);
}

:global(.dark-theme) .treeNode.activeGroup {
  color: var(--primary-light, #93c5fd);
}

:global(.dark-theme) .treeNode[data-depth="0"] {
  color: var(--text-primary-dark, #fff);
}

:global(.dark-theme) .toggle::after {
  border-left-color: var(--text-tertiary-dark, #555);
}

:global(.dark-theme) .toggle:hover {
  background: var(--hover-bg-dark, rgba(255, 255, 255, 0.08));
}

:global(.dark-theme) .toggle:hover::after {
  border-left-color: var(--text-primary-dark, #ddd);
}

:global(.dark-theme) .treeNode.active .toggle::after,
:global(.dark-theme) .treeNode.activeGroup .toggle::after {
  border-left-color: var(--primary-light, #93c5fd);
}

:global(.dark-theme) .nodeIcon {
  opacity: 0.7;
}

:global(.dark-theme) .treeNode.active .nodeIcon,
:global(.dark-theme) .treeNode.activeGroup .nodeIcon {
  opacity: 1;
}

:global(.dark-theme) .nodeBadge {
  background: var(--surface-dark, #2a2a2a);
  color: var(--text-tertiary-dark, #888);
}

:global(.dark-theme) .treeNode.active .nodeBadge {
  background: var(--primary-color, #2563eb);
  color: white;
}