/**
 * DevAll ERP - Navigation Enhancements Only
 * Refined menu/sidebar styling
 */

/* ============================================
   CSS VARIABLES (Navigation Only)
   ============================================ */
:root {
  --gradient-accent: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

/* ============================================
   REFINED NAVIGATION
   ============================================ */
.nav-item-refined {
  position: relative;
  padding: 0.875rem 1.25rem;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
  font-size: 0.875rem;
}

.nav-item-refined:hover {
  background: oklch(0.95 0.01 250);
  transform: translateX(4px);
}

[data-theme="dark"] .nav-item-refined:hover {
  background: oklch(0.25 0.02 250);
}

.nav-item-refined.active {
  background: oklch(0.96 0.03 45);
  font-weight: 600;
}

[data-theme="dark"] .nav-item-refined.active {
  background: oklch(0.28 0.05 45);
}

.nav-item-refined.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: var(--gradient-accent);
  border-radius: 0 4px 4px 0;
}

.nav-item-refined svg,
.nav-item-refined i {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.nav-item-refined.active svg,
.nav-item-refined.active i,
.nav-item-refined:hover svg,
.nav-item-refined:hover i {
  opacity: 1;
}