/* Sidebar UX Enhancement Styles */
/* Modern, collapsible sidebar with smooth transitions and accessibility */

/* ============================================
   Sidebar States & Transitions
   ============================================ */

.sidebar-container {
  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
}

/* Expanded state (default) */
.sidebar-expanded {
  width: 16rem; /* 256px */
}

/* Collapsed state (icon-only) */
.sidebar-collapsed {
  width: 5rem; /* 80px */
}

/* Auto-collapse on medium screens */
@media (min-width: 768px) and (max-width: 1024px) {
  .sidebar-container.auto-collapse {
    width: 5rem;
  }
}

/* Hover expansion on collapsed sidebar */
.sidebar-collapsed:hover,
.sidebar-collapsed:focus-within {
  width: 16rem;
}

/* Hide text elements when collapsed */
.sidebar-collapsed .nav-text,
.sidebar-collapsed .logo-text,
.sidebar-collapsed .user-details {
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, visibility 150ms ease;
}

/* Show text on hover */
.sidebar-collapsed:hover .nav-text,
.sidebar-collapsed:focus-within .nav-text,
.sidebar-collapsed:hover .logo-text,
.sidebar-collapsed:focus-within .logo-text,
.sidebar-collapsed:hover .user-details,
.sidebar-collapsed:focus-within .user-details {
  opacity: 1;
  visibility: visible;
  transition-delay: 100ms;
}

/* Center icons when collapsed */
.sidebar-collapsed .nav-item,
.sidebar-collapsed .logo-container {
  justify-content: center;
}

.sidebar-collapsed:hover .nav-item,
.sidebar-collapsed:focus-within .nav-item,
.sidebar-collapsed:hover .logo-container,
.sidebar-collapsed:focus-within .logo-container {
  justify-content: flex-start;
}

/* ============================================
   Navigation Items - Pill-shaped Design
   ============================================ */

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.75rem 0.75rem; /* py-3 px-3 */
  margin: 0.25rem 0.5rem; /* my-1 mx-2 */
  font-size: 1rem; /* text-base */
  font-weight: 500; /* font-medium */
  border-radius: 0.75rem; /* rounded-lg */
  color: #d1d5db; /* text-gray-300 */
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 4px solid transparent;
}

/* Hover state */
.nav-item:hover {
  background-color: rgba(55, 65, 81, 0.5); /* bg-gray-700/50 */
  color: #ffffff; /* text-white */
  transform: translateX(2px);
}

/* Active state - Pill-shaped with accent border */
.nav-item-active {
  background: rgba(37, 99, 235, 0.1); /* bg-primary-500/10 */
  border-left-color: #2563EB; /* border-l-4 border-primary-500 */
  color: #ffffff; /* text-white */
  font-weight: 600; /* font-semibold */
}

/* Icon styling */
.nav-item-icon {
  flex-shrink: 0;
  width: 1.5rem; /* w-6 */
  height: 1.5rem; /* h-6 */
  margin-right: 1rem; /* mr-4 */
  color: #9ca3af; /* text-gray-400 */
  transition: color 200ms ease;
}

.nav-item:hover .nav-item-icon {
  color: #d1d5db; /* text-gray-300 */
}

.nav-item-active .nav-item-icon {
  color: #2563EB; /* text-primary-500 */
}

/* Text styling */
.nav-text {
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
}

/* ============================================
   Logo Area
   ============================================ */

.logo-container {
  display: flex;
  align-items: center;
  padding: 1.5rem 1rem; /* px-4 py-6 */
  transition: justify-content 250ms ease;
}

.logo-image {
  height: 2.5rem; /* h-10 */
  width: auto;
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.logo-text {
  margin-left: 0.75rem; /* ml-3 */
  color: #ffffff;
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700; /* font-bold */
  letter-spacing: -0.025em; /* tracking-tight */
  white-space: nowrap;
  transition: opacity 200ms ease, visibility 200ms ease;
}

/* ============================================
   User Menu Section
   ============================================ */

.user-menu {
  border-top: 1px solid #374151; /* border-t border-gray-700 */
  padding: 1rem;
  background-color: #374151; /* bg-gray-700 */
}

.user-avatar {
  height: 3rem; /* h-12 */
  width: 3rem; /* w-12 */
  border-radius: 9999px; /* rounded-full */
  flex-shrink: 0;
  transition: all 200ms ease;
  ring: 2px solid #4b5563; /* ring-2 ring-gray-600 */
}

.user-avatar:hover {
  ring-color: #2563EB; /* hover:ring-primary-500 */
  transform: scale(1.05);
}

.user-details {
  margin-left: 0.75rem; /* ml-3 */
  flex: 1;
  min-width: 0; /* Allow text truncation */
  transition: opacity 200ms ease, visibility 200ms ease;
}

.user-name {
  font-size: 0.875rem; /* text-sm */
  font-weight: 600; /* font-semibold */
  color: #ffffff; /* text-white */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-logout {
  font-size: 0.75rem; /* text-xs */
  font-weight: 500; /* font-medium */
  color: #d1d5db; /* text-gray-300 */
  transition: color 150ms ease;
  display: inline-flex;
  align-items: center;
  margin-top: 0.25rem; /* mt-1 */
}

.user-logout:hover {
  color: #f3f4f6; /* hover:text-gray-200 */
}

/* ============================================
   Toggle Button
   ============================================ */

.sidebar-toggle {
  position: absolute;
  top: 1.5rem; /* top-6 */
  right: -0.75rem; /* -right-3 */
  width: 1.5rem; /* w-6 */
  height: 1.5rem; /* h-6 */
  background-color: #1f2937; /* bg-gray-800 */
  border: 2px solid #374151; /* border-2 border-gray-700 */
  border-radius: 9999px; /* rounded-full */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms ease;
  z-index: 10;
  color: #9ca3af; /* text-gray-400 */
}

.sidebar-toggle:hover {
  background-color: #2563EB; /* hover:bg-primary-500 */
  border-color: #2563EB; /* hover:border-primary-500 */
  color: #ffffff; /* hover:text-white */
  transform: scale(1.1);
}

.sidebar-toggle:focus {
  outline: none;
  ring: 2px;
  ring-color: #2563EB; /* focus:ring-2 focus:ring-primary-500 */
  ring-offset: 2px;
  ring-offset-color: #1f2937;
}

/* Rotate icon when collapsed */
.sidebar-collapsed .sidebar-toggle {
  transform: rotate(180deg);
}

.sidebar-collapsed .sidebar-toggle:hover {
  transform: rotate(180deg) scale(1.1);
}

/* ============================================
   Accessibility Enhancements
   ============================================ */

/* Focus visible states */
.nav-item:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 0.75rem;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .sidebar-container,
  .nav-item,
  .nav-text,
  .logo-text,
  .user-details,
  .user-avatar,
  .sidebar-toggle {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .nav-item-active {
    border-left-width: 6px;
    background: rgba(37, 99, 235, 0.2);
  }
  
  .nav-item:hover {
    background-color: rgba(55, 65, 81, 0.8);
  }
}

/* ============================================
   Mobile - No collapse functionality
   ============================================ */

@media (max-width: 767px) {
  .sidebar-toggle {
    display: none;
  }
  
  .sidebar-container {
    width: 16rem; /* Always expanded on mobile */
  }
}

/* ============================================
   Navigation Groups
   ============================================ */

.nav-group {
  padding: 0.5rem 0; /* py-2 */
}

.nav-group + .nav-group {
  margin-top: 0.5rem; /* space-y-2 */
  padding-top: 0.5rem;
  border-top: 1px solid rgba(75, 85, 99, 0.3); /* subtle separator */
}

/* ============================================
   Scrollbar Styling (for long nav lists)
   ============================================ */

.sidebar-nav::-webkit-scrollbar {
  width: 0.375rem; /* 6px */
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: #4b5563; /* bg-gray-600 */
  border-radius: 0.375rem;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: #6b7280; /* bg-gray-500 */
}

/* ============================================
   Animation Utilities
   ============================================ */

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

.animate-slide-in-left {
  animation: slideInLeft 300ms cubic-bezier(0.4, 0, 0.2, 1);
}