/* Custom Navigation Components */

/* Enhanced Sidebar Menu Items */
.menu-item-enhanced {
  @apply relative flex items-center gap-3 rounded-lg px-3 py-2;
  @apply text-gray-700 hover:bg-gray-100 hover:text-gray-900;
  @apply transition-all duration-200 group;
  @apply dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white;
}

.menu-item-enhanced.active {
  @apply bg-brand-50 text-brand-600 border-r-2 border-brand-500;
  @apply dark:bg-brand-900 dark:text-brand-400 dark:border-brand-400;
}

.menu-item-enhanced .menu-icon {
  @apply w-5 h-5 text-gray-500 group-hover:text-gray-700;
  @apply dark:text-gray-400 dark:group-hover:text-gray-300;
}

.menu-item-enhanced.active .menu-icon {
  @apply text-brand-500;
  @apply dark:text-brand-400;
}

/* Breadcrumb Navigation */
.breadcrumb {
  @apply flex items-center space-x-2 text-sm text-gray-600;
  @apply dark:text-gray-400;
}

.breadcrumb-item {
  @apply hover:text-brand-600 transition-colors duration-200;
  @apply dark:hover:text-brand-400;
}

.breadcrumb-separator {
  @apply text-gray-400;
  @apply dark:text-gray-600;
}

/* Tab Navigation */
.tab-nav {
  @apply flex border-b border-gray-200;
  @apply dark:border-gray-700;
}

.tab-item {
  @apply px-4 py-2 text-sm font-medium text-gray-600;
  @apply hover:text-brand-600 border-b-2 border-transparent;
  @apply transition-all duration-200;
  @apply dark:text-gray-400 dark:hover:text-brand-400;
}

.tab-item.active {
  @apply text-brand-600 border-brand-500;
  @apply dark:text-brand-400 dark:border-brand-400;
}

/* Mobile Menu Overlay */
.mobile-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 z-40;
  @apply transition-opacity duration-300;
}