/* Navigation Enhancement Styles */

/* Layout & Structure */
.nav-container {
  @apply lg:pl-72;
  transition: all 0.3s ease-in-out;
}

.nav-container.sidebar-hidden {
  @apply lg:pl-0;
}

.nav-sidebar {
  @apply hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col;
  transition: transform 0.3s ease-in-out;
}

.nav-sidebar.hidden {
  transform: translateX(-100%);
}

/* Mobile Navigation */
.nav-mobile-backdrop {
  transition: opacity 0.3s ease-linear;
}

.nav-mobile-menu {
  transition: transform 0.3s ease-in-out;
}

.nav-mobile-close {
  transition: opacity 0.3s ease-in-out;
}

/* Navigation Links */
.nav-link {
  @apply group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold transition-colors;
}

.nav-link:not(.active) {
  @apply text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-800;
}

.nav-link.active {
  @apply bg-gray-50 dark:bg-gray-800 text-blue-600 dark:text-blue-400;
}

.nav-link .nav-icon {
  @apply h-6 w-6 shrink-0 transition-colors;
}

.nav-link:not(.active) .nav-icon {
  @apply text-gray-400 dark:text-gray-500 group-hover:text-blue-600 dark:group-hover:text-blue-400;
}

.nav-link.active .nav-icon {
  @apply text-blue-600 dark:text-blue-400;
}

/* Top Navigation */
.top-nav {
  @apply sticky top-0 z-40 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-600 flex items-center justify-between h-14 px-4 transition-all duration-300 ease-in-out;
}

.top-nav.with-sidebar {
  @apply lg:pl-72;
}

/* User Dropdown */
.user-dropdown {
  @apply absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-gray-800 py-1 shadow-lg ring-1 ring-black/5 dark:ring-gray-700;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
  pointer-events: none;
}

.user-dropdown.show {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.user-dropdown-item {
  @apply block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors;
}

/* Command Palette */
.command-palette-backdrop {
  @apply fixed inset-0 bg-black/25 dark:bg-black/50 transition-opacity;
}

.command-palette-container {
  @apply fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20;
}

.command-palette {
  @apply mx-auto block max-w-xl transform overflow-hidden rounded-xl bg-white dark:bg-gray-900 shadow-2xl outline-1 outline-black/5 dark:-outline-offset-1 dark:outline-white/10 transition-all;
}

.command-palette-input {
  @apply col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 dark:text-white outline-none placeholder:text-gray-400 dark:placeholder:text-gray-500 bg-transparent;
}

.command-palette-results {
  @apply block max-h-72 scroll-py-2 overflow-y-auto py-2 text-sm text-gray-900 dark:text-white;
}

.command-palette-no-results {
  @apply block p-4 text-center text-sm text-gray-600 dark:text-gray-400;
}

.command-palette-footer {
  @apply border-t border-gray-200 dark:border-gray-600 px-4 py-2 text-xs text-gray-600 dark:text-gray-400;
}

.command-palette-kbd {
  @apply inline-flex items-center rounded border border-gray-300 dark:border-gray-600 px-1 font-sans text-xs text-gray-500 dark:text-gray-400;
}

/* Command Palette Actions */
.command-action {
  @apply group block cursor-default px-4 py-2 select-none focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors;
}

.command-action[aria-selected="true"] {
  @apply bg-blue-600 text-white dark:bg-blue-500;
}

.command-action[aria-selected="true"]:hover {
  @apply bg-blue-700 dark:bg-blue-600;
}

.command-action-icon {
  @apply flex-shrink-0 h-5 w-5 text-gray-400 dark:text-gray-500;
}

.command-action[aria-selected="true"] .command-action-icon {
  @apply text-blue-200 dark:text-blue-300;
}

.command-action-content {
  @apply ml-3 flex-1 min-w-0;
}

.command-action-title {
  @apply text-sm font-medium text-gray-900 dark:text-white truncate;
}

.command-action[aria-selected="true"] .command-action-title {
  @apply text-white;
}

.command-action-description {
  @apply text-xs text-gray-500 dark:text-gray-400 truncate;
}

.command-action[aria-selected="true"] .command-action-description {
  @apply text-blue-200 dark:text-blue-300;
}

.command-action-badge {
  @apply ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300;
}

.command-action[aria-selected="true"] .command-action-badge {
  @apply bg-blue-500 text-white dark:bg-blue-400 dark:text-blue-900;
}

/* Animations */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Mobile specific animations */
.mobile-menu-enter {
  animation: slideIn 0.3s ease-out;
}

.mobile-menu-exit {
  animation: slideOut 0.3s ease-in;
}

.backdrop-enter {
  animation: fadeIn 0.3s ease-out;
}

.backdrop-exit {
  animation: fadeOut 0.3s ease-in;
}

.dropdown-enter {
  animation: scaleIn 0.2s ease-out;
}

.dropdown-exit {
  animation: scaleOut 0.2s ease-in;
}

/* Focus and accessibility */
.nav-hidden-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-hidden-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Focus visible for better keyboard navigation */
.nav-link:focus-visible,
.command-action:focus-visible {
  @apply outline-2 outline-offset-2 outline-blue-500;
}

/* Mobile responsive adjustments */
@media (max-width: 1023px) {
  .nav-container {
    @apply pl-0;
  }
  
  .top-nav {
    @apply pl-4;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .nav-link {
    border: 1px solid transparent;
  }
  
  .nav-link:hover,
  .nav-link.active {
    border-color: currentColor;
  }
  
  .command-action[aria-selected="true"] {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .nav-sidebar,
  .nav-mobile-backdrop,
  .nav-mobile-menu,
  .nav-mobile-close,
  .nav-link,
  .nav-icon,
  .top-nav,
  .user-dropdown,
  .command-palette,
  .command-action {
    transition: none;
  }
  
  .mobile-menu-enter,
  .mobile-menu-exit,
  .backdrop-enter,
  .backdrop-exit,
  .dropdown-enter,
  .dropdown-exit {
    animation: none;
  }
}