/* Critical Navigation CSS - Inlined for critical path optimization */
/* Contains essential navigation styles to prevent FOUC and layout shifts */

/* CSS Variables - Critical for navigation theming */
:root {
  --nav-bg: 31 41 55; /* gray-800 */
  --nav-text: 146 147 156; /* #92939C - inactive */
  --nav-text-active: 228 231 240; /* #E4E7F0 - active */
  --nav-text-secondary: 156 163 175; /* gray-400 */
  --nav-border: 75 85 99; /* gray-600 */
  --nav-hover-subtle: 55 65 81; /* Very subtle gray-700 */
  --nav-active-bg: 55 65 81; /* Active background - gray-700 (more subtle) */
  --nav-submenu: 17 24 39; /* gray-900 */
  --nav-active: 59 130 246; /* blue-500 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --nav-bg: 31 41 55;
    --nav-text: 146 147 156;
    --nav-text-active: 228 231 240;
    --nav-text-secondary: 156 163 175;
    --nav-border: 55 65 81; /* gray-700 */
    --nav-hover-subtle: 31 41 55; /* Very subtle gray-800 */
    --nav-active-bg: 31 41 55; /* Active background - gray-800 (more subtle) */
    --nav-submenu: 31 41 55; /* gray-800 */
    --nav-active: 96 165 250; /* blue-400 */
  }
}

/* Navigation typography classes - Critical path */
.text-nav {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  font-display: swap;
}

.text-nav-sub {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  font-display: swap;
}

/* Core navigation styles - Critical for layout */
.nav-link {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.nav-link:hover {
  transform: translateX(2px);
}

.nav-link.active {
  background-color: rgb(var(--nav-active-bg)) !important;
  color: rgb(var(--nav-text-active)) !important;
}

/* Sidebar container - Critical layout */
.sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: rgb(75 85 99) rgb(55 65 81);
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: rgba(55, 65, 81, 0.3);
  border-radius: 2px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgb(107 114 128) 0%, rgb(75 85 99) 100%);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgb(156 163 175) 0%, rgb(107 114 128) 100%);
}

/* Logo container - Critical layout */
.logo-container {
  padding: 1rem 1rem .75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: none !important;
}

/* Focus indicators for accessibility - Critical */
.nav-link:focus-visible {
  outline: 2px solid rgb(59 130 246);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --nav-text: 255 255 255;
    --nav-text-active: 255 255 255;
    --nav-border: 255 255 255;
    --nav-active-bg: 0 0 0;
  }

  .nav-link {
    border: 1px solid rgb(var(--nav-border));
  }

  .nav-link.active {
    border: 2px solid rgb(var(--nav-text-active));
  }
}

/* SVG Icon color states - Critical for icon theming */
.nav-icon-container svg {
  width: 24px;
  height: 24px;
  color: rgb(var(--nav-text));
  transition: color 0.3s ease;
}

.nav-link.active .nav-icon-container svg {
  color: rgb(var(--nav-text-active)) !important;
}

.nav-link:hover .nav-icon-container svg {
  color: rgb(var(--nav-text-active));
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }

  .nav-link:hover {
    transform: none;
  }

  .nav-icon-container svg {
    transition: none;
  }
}