/* Documentation Sidebar Navigation */
.docs-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.docs-nav-header {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border-light);
}

.docs-nav-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.docs-nav-title:hover {
  color: var(--color-primary);
}

.docs-nav-tree {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Performance optimization: Content visibility removed due to DevTools crash (Error Code 5)
   when inspecting deep recursive navigation trees.
.docs-nav-tree > * {
  content-visibility: auto;
  contain-intrinsic-size: 40px;
}
*/

/* Navigation Groups (Sections) */
.docs-nav-group {
  display: flex;
  flex-direction: column;
}

/* Wrapper containing toggle button + link */
.docs-nav-group-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--border-radius-small);
  transition: all var(--transition-fast), box-shadow 0.2s ease;
  padding: 0.125rem;
  position: relative;
}

.docs-nav-group-toggle-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-border-subtle);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* Left accent bar for parent items with active children */
.docs-nav-group-toggle-wrapper::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient-border-subtle);
  border-radius: 2px 0 0 2px;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 1;
}

.docs-nav-group-toggle-wrapper:hover {
  background: var(--color-bg-hover);
  /* Light mode: Neumorphic hover */
  box-shadow:
    inset 0.3px 0.3px 0.8px rgba(255, 255, 255, 0.4),
    inset -0.3px -0.3px 0.8px rgba(0, 0, 0, 0.08),
    1px 1px 2px rgba(0, 0, 0, 0.05),
    -0.3px -0.3px 1px rgba(255, 255, 255, 0.3);
}

.docs-nav-group-toggle-wrapper:hover::before {
  opacity: 0;
  /* Hidden in light mode, shown in dark mode */
}

.docs-nav-group-toggle-wrapper:active {
  /* Light mode: Neumorphic pressed */
  box-shadow:
    inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.1),
    inset -0.3px -0.3px 0.5px rgba(255, 255, 255, 0.2),
    0.3px 0.3px 0.5px rgba(0, 0, 0, 0.03);
  background: var(--color-bg-tertiary);
}

.docs-nav-group-toggle-wrapper:active::before {
  opacity: 0;
}

/* Toggle button (just the arrow icon) */
.docs-nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: none;
  border: none;
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: all var(--transition-fast);
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* No shadow - wrapper handles it */
}

.docs-nav-group-toggle svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-secondary);
  transition: transform var(--transition-smooth);
  flex-shrink: 0;
  will-change: transform;
}

.docs-nav-group-toggle:hover svg {
  color: var(--color-text-primary);
}

.docs-nav-group-toggle-wrapper:active {
  background: var(--color-bg-tertiary);
}

.docs-nav-group-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

/* Section link (the title, clickable to navigate) */
.docs-nav-group-link {
  flex: 1;
  padding: 0.5rem 0.75rem 0.5rem 0.25rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: var(--border-radius-small);
  transition: all var(--transition-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* No shadow - wrapper handles it */
}

.docs-nav-group-link:hover {
  color: var(--color-primary);
}

.docs-nav-group-link.active,
.docs-nav-group-link[aria-current="page"] {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* Subtle indicator for parent groups containing active child - accent bar only */
/* Only show subtle accent bar, don't highlight the entire wrapper/link */
.docs-nav-group:has(.docs-nav-link.active) .docs-nav-group-toggle-wrapper::after,
.docs-nav-group:has(.docs-nav-link[aria-current="page"]) .docs-nav-group-toggle-wrapper::after {
  opacity: 0.6;
  /* Subtle accent bar to indicate parent contains active child */
  background: var(--gradient-border);
}

/* Keep parent groups expanded when they contain active children */
.docs-nav-group:has(.docs-nav-link.active) .docs-nav-group-items,
.docs-nav-group:has(.docs-nav-link[aria-current="page"]) .docs-nav-group-items {
  display: flex;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.docs-nav-group:has(.docs-nav-link.active) .docs-nav-group-toggle[aria-expanded],
.docs-nav-group:has(.docs-nav-link[aria-current="page"]) .docs-nav-group-toggle[aria-expanded] {
  /* JavaScript will set aria-expanded="true" */
}

/* Also handle when the group link itself is active */
.docs-nav-group-toggle-wrapper:has(.docs-nav-group-link.active),
.docs-nav-group-toggle-wrapper:has(.docs-nav-group-link[aria-current="page"]) {
  /* Skeumorphic Key-like State */
  background: linear-gradient(to bottom, var(--color-bg-primary), var(--color-bg-secondary));
  border: 1px solid var(--color-border);
  /* Top highlight, bottom shadow for 3D pop */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 2px 0 var(--color-border-strong);
  transform: translateY(-1px);
  z-index: 1;
}

.docs-nav-group-toggle-wrapper:has(.docs-nav-group-link.active)::after,
.docs-nav-group-toggle-wrapper:has(.docs-nav-group-link[aria-current="page"])::after {
  opacity: 1;
  background: var(--gradient-border);
}

[data-theme="dark"] .docs-nav-group-link.active,
[data-theme="dark"] .docs-nav-group-link[aria-current="page"] {
  background: var(--color-primary-light);
}

.docs-nav-group-items {
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  padding-left: 0.875rem;
  margin-top: 0.25rem;
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
  will-change: transform, opacity;
}

/* Show items when expanded (controlled by JavaScript) */
.docs-nav-group-items.expanded {
  display: flex;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Navigation Links */
.docs-nav-link {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--border-radius-small);
  border-inline-start: 3px solid transparent;
  margin-inline-start: -3px;
  transition: all var(--transition-fast), box-shadow 0.2s ease;
  position: relative;
}

.docs-nav-link::before {
  content: '';
  position: absolute;
  inset-inline-start: -3px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient-border-subtle);
  border-radius: 2px 0 0 2px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.docs-nav-link:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
  /* Light mode: Neumorphic hover */
  box-shadow:
    inset 0.3px 0.3px 0.8px rgba(255, 255, 255, 0.4),
    inset -0.3px -0.3px 0.8px rgba(0, 0, 0, 0.08),
    1px 1px 2px rgba(0, 0, 0, 0.05),
    -0.3px -0.3px 1px rgba(255, 255, 255, 0.3);
}

.docs-nav-link:hover::before {
  opacity: 0;
  /* Hidden in light mode */
}

.docs-nav-link:active {
  background: var(--color-bg-tertiary);
  /* Light mode: Neumorphic pressed */
  box-shadow:
    inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.1),
    inset -0.3px -0.3px 0.5px rgba(255, 255, 255, 0.2),
    0.3px 0.3px 0.5px rgba(0, 0, 0, 0.03);
}

.docs-nav-link:active::before {
  opacity: 0;
}

/* Ensure only one active link at a time - use aria-current for semantic correctness */
.docs-nav-link.active,
.docs-nav-link[aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--weight-medium);
  /* Skeumorphic Key-like State */
  background: linear-gradient(to bottom, var(--color-bg-primary), var(--color-bg-secondary));
  border: 1px solid var(--color-border);
  /* Top highlight, bottom shadow for 3D pop */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 2px 0 var(--color-border-strong);
  transform: translateY(-1px);
  z-index: 1;
}

.docs-nav-link.active::before,
.docs-nav-link[aria-current="page"]::before {
  opacity: 0;
  /* Hidden in light mode, shown in dark mode */
  background: var(--gradient-border);
  width: 3px;
}

[data-theme="dark"] .docs-nav-link.active,
[data-theme="dark"] .docs-nav-link[aria-current="page"] {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-bottom-width: 3px;
  border-bottom-color: #000;
  /* Darker shade for dimension in dark mode */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

/* Active trail (parent of active page) */
.docs-nav-link.active-trail {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

/* Nested sections */
.docs-nav-group .docs-nav-group {
  margin-left: 0.375rem;
}

/* ============================================================================
   Dark Mode - Docs Nav
   ============================================================================ */


[data-theme="dark"] .docs-nav-link:hover {
  /* Subtle neumorphic hover for dark mode */
  box-shadow:
    inset 0.3px 0.3px 0.8px rgba(255, 255, 255, 0.12),
    inset -0.3px -0.3px 0.8px rgba(0, 0, 0, 0.3),
    1px 1px 2px rgba(0, 0, 0, 0.2),
    -0.3px -0.3px 1px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .docs-nav-link:active {
  /* Subtle neumorphic pressed state for dark mode */
  box-shadow:
    inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.3),
    inset -0.3px -0.3px 0.5px rgba(255, 255, 255, 0.08),
    0.3px 0.3px 0.5px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   Dark Mode: Use gradient borders instead of neumorphic shadows
   ============================================================================ */

[data-theme="dark"] .docs-nav-group-toggle-wrapper {
  /* Remove neumorphic shadow in dark mode */
  box-shadow: none;
}

[data-theme="dark"] .docs-nav-group-toggle-wrapper::before {
  opacity: 0;
  /* Start hidden */
}

[data-theme="dark"] .docs-nav-group-toggle-wrapper:hover {
  /* Remove neumorphic hover in dark mode */
  box-shadow: none;
}

[data-theme="dark"] .docs-nav-group-toggle-wrapper:hover::before {
  opacity: 0.4;
  /* Show gradient border in dark mode */
}

[data-theme="dark"] .docs-nav-group-toggle-wrapper:active {
  /* Remove neumorphic pressed in dark mode */
  box-shadow: none;
}

[data-theme="dark"] .docs-nav-group-toggle-wrapper::after {
  opacity: 0;
  /* Start hidden */
}

/* Dark mode: Subtle indicator for parent groups containing active child */
[data-theme="dark"] .docs-nav-group:has(.docs-nav-link.active) .docs-nav-group-toggle-wrapper::after,
[data-theme="dark"] .docs-nav-group:has(.docs-nav-link[aria-current="page"]) .docs-nav-group-toggle-wrapper::after {
  opacity: 0.7;
  /* Subtle accent bar in dark mode */
  background: var(--gradient-border);
}

/* Keep parent groups expanded when they contain active children (dark mode) */
[data-theme="dark"] .docs-nav-group:has(.docs-nav-link.active) .docs-nav-group-items,
[data-theme="dark"] .docs-nav-group:has(.docs-nav-link[aria-current="page"]) .docs-nav-group-items {
  display: flex;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Also handle when the group link itself is active */
[data-theme="dark"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link.active),
[data-theme="dark"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link[aria-current="page"]) {
  background: linear-gradient(to bottom, var(--color-bg-secondary), var(--color-bg-tertiary));
  border: 1px solid var(--color-border);
  /* Dark mode skeumorphism */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 2px 0 #000;
  transform: translateY(-1px);
}

[data-theme="dark"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link.active)::after,
[data-theme="dark"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link[aria-current="page"])::after {
  opacity: 0.9;
  background: var(--gradient-border);
}

[data-theme="dark"] .docs-nav-link {
  /* Remove neumorphic shadow in dark mode */
  box-shadow: none;
}

[data-theme="dark"] .docs-nav-link::before {
  opacity: 0;
  /* Start hidden */
}

[data-theme="dark"] .docs-nav-link:hover {
  /* Remove neumorphic hover in dark mode */
  box-shadow: none;
}

[data-theme="dark"] .docs-nav-link:hover::before {
  opacity: 0.5;
  /* Show gradient border in dark mode */
}

[data-theme="dark"] .docs-nav-link:active {
  /* Remove neumorphic pressed in dark mode */
  box-shadow: none;
}

[data-theme="dark"] .docs-nav-link:active::before {
  opacity: 0.7;
  background: var(--gradient-border);
}

[data-theme="dark"] .docs-nav-link.active,
[data-theme="dark"] .docs-nav-link[aria-current="page"] {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-bottom-width: 3px;
  border-bottom-color: #000;
  /* Darker shade for dimension in dark mode */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

[data-theme="dark"] .docs-nav-link.active::before,
[data-theme="dark"] .docs-nav-link[aria-current="page"]::before {
  opacity: 0.9;
  /* Strong gradient border in dark mode for visibility */
  background: var(--gradient-border);
}

/* ============================================
   PALETTE-SPECIFIC ACTIVE NAVIGATION STYLING
   ============================================ */

/* Brown Bengal - Warm amber active sidebar navigation */
[data-palette="brown-bengal"] .docs-nav-link.active,
[data-palette="brown-bengal"] .docs-nav-link[aria-current="page"],
[data-palette="brown-bengal"] .docs-nav-group-link.active,
[data-palette="brown-bengal"] .docs-nav-group-link[aria-current="page"] {
  background: var(--color-primary-light);
}

[data-theme="dark"][data-palette="brown-bengal"] .docs-nav-link.active,
[data-theme="dark"][data-palette="brown-bengal"] .docs-nav-link[aria-current="page"],
[data-theme="dark"][data-palette="brown-bengal"] .docs-nav-group-link.active,
[data-theme="dark"][data-palette="brown-bengal"] .docs-nav-group-link[aria-current="page"] {
  background: var(--color-primary-light);
}

/* Palette-specific: Only highlight when group link itself is active, not when it contains active child */
[data-palette="brown-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link.active),
[data-palette="brown-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link[aria-current="page"]) {
  background: var(--color-primary-light);
}

[data-theme="dark"][data-palette="brown-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link.active),
[data-theme="dark"][data-palette="brown-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link[aria-current="page"]) {
  background: var(--color-primary-light);
}

/* Blue Bengal - Soft powder blue active sidebar navigation */
[data-palette="blue-bengal"] .docs-nav-link.active,
[data-palette="blue-bengal"] .docs-nav-link[aria-current="page"],
[data-palette="blue-bengal"] .docs-nav-group-link.active,
[data-palette="blue-bengal"] .docs-nav-group-link[aria-current="page"] {
  background: var(--color-primary-light);
}

[data-theme="dark"][data-palette="blue-bengal"] .docs-nav-link.active,
[data-theme="dark"][data-palette="blue-bengal"] .docs-nav-link[aria-current="page"],
[data-theme="dark"][data-palette="blue-bengal"] .docs-nav-group-link.active,
[data-theme="dark"][data-palette="blue-bengal"] .docs-nav-group-link[aria-current="page"] {
  background: var(--color-primary-light);
}

/* Palette-specific: Only highlight when group link itself is active, not when it contains active child */
[data-palette="blue-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link.active),
[data-palette="blue-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link[aria-current="page"]) {
  background: var(--color-primary-light);
}

[data-theme="dark"][data-palette="blue-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link.active),
[data-theme="dark"][data-palette="blue-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link[aria-current="page"]) {
  background: var(--color-primary-light);
}

/* Silver Bengal - High contrast monochrome active sidebar navigation */
[data-palette="silver-bengal"] .docs-nav-link.active,
[data-palette="silver-bengal"] .docs-nav-link[aria-current="page"],
[data-palette="silver-bengal"] .docs-nav-group-link.active,
[data-palette="silver-bengal"] .docs-nav-group-link[aria-current="page"] {
  background: var(--color-primary-light);
}

[data-theme="dark"][data-palette="silver-bengal"] .docs-nav-link.active,
[data-theme="dark"][data-palette="silver-bengal"] .docs-nav-link[aria-current="page"],
[data-theme="dark"][data-palette="silver-bengal"] .docs-nav-group-link.active,
[data-theme="dark"][data-palette="silver-bengal"] .docs-nav-group-link[aria-current="page"] {
  background: var(--color-primary-light);
}

/* Palette-specific: Only highlight when group link itself is active, not when it contains active child */
[data-palette="silver-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link.active),
[data-palette="silver-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link[aria-current="page"]) {
  background: var(--color-primary-light);
}

[data-theme="dark"][data-palette="silver-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link.active),
[data-theme="dark"][data-palette="silver-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link[aria-current="page"]) {
  background: var(--color-primary-light);
}

/* Charcoal Bengal - Dramatic slate active sidebar navigation */
[data-palette="charcoal-bengal"] .docs-nav-link.active,
[data-palette="charcoal-bengal"] .docs-nav-link[aria-current="page"],
[data-palette="charcoal-bengal"] .docs-nav-group-link.active,
[data-palette="charcoal-bengal"] .docs-nav-group-link[aria-current="page"] {
  background: var(--color-primary-light);
}

[data-theme="dark"][data-palette="charcoal-bengal"] .docs-nav-link.active,
[data-theme="dark"][data-palette="charcoal-bengal"] .docs-nav-link[aria-current="page"],
[data-theme="dark"][data-palette="charcoal-bengal"] .docs-nav-group-link.active,
[data-theme="dark"][data-palette="charcoal-bengal"] .docs-nav-group-link[aria-current="page"] {
  background: var(--color-primary-light);
}

/* Palette-specific: Only highlight when group link itself is active, not when it contains active child */
[data-palette="charcoal-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link.active),
[data-palette="charcoal-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link[aria-current="page"]) {
  background: var(--color-primary-light);
}

[data-theme="dark"][data-palette="charcoal-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link.active),
[data-theme="dark"][data-palette="charcoal-bengal"] .docs-nav-group-toggle-wrapper:has(.docs-nav-group-link[aria-current="page"]) {
  background: var(--color-primary-light);
}
