@layer base {
  :root {
    --sidebar-backdrop-blur: blur(20px);
    --sidebar-shadow:
      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --sidebar-shadow-lg:
      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --sidebar-gradient-start: var(--color-bg-start);
    --sidebar-gradient-end: var(--color-bg-end);
  }

  .dark {
    --sidebar-shadow:
      0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
    --sidebar-shadow-lg:
      0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  }
}

@layer utilities {
  .scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .scrollbar-none::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .sidebar-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted-foreground) / 0.2) transparent;
  }

  .sidebar-scrollbar::-webkit-scrollbar {
    width: 6px;
  }

  .sidebar-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
  }

  .sidebar-scrollbar::-webkit-scrollbar-thumb {
    background-color: hsl(var(--muted-foreground) / 0.2);
    border-radius: 3px;
    transition: background-color 0.2s ease;
  }

  .sidebar-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--muted-foreground) / 0.3);
  }

  .focus-ring {
    @apply focus-visible:ring-primary/20 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none;
  }

  .hover-lift {
    @apply transition-all duration-200 hover:scale-[1.02] hover:shadow-sm;
  }

  .hover-glow {
    @apply hover:shadow-primary/10 transition-all duration-300 hover:shadow-lg;
  }

  .backdrop-blur-sidebar {
    backdrop-filter: var(--sidebar-backdrop-blur);
    -webkit-backdrop-filter: var(--sidebar-backdrop-blur);
  }

  .animate-slide-in {
    animation: slideIn 0.3s ease-out;
  }

  .animate-fade-in {
    animation: fadeIn 0.2s ease-out;
  }

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

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .glass-effect {
    background: hsl(var(--card) / 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid hsl(var(--border) / 0.2);
  }

  .user-section-modern {
    background: hsl(var(--card) / 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid hsl(var(--border) / 0.1);
    transition: all 0.2s ease-out;
  }

  .user-section-modern:hover {
    background: hsl(var(--muted) / 0.3);
    border-color: hsl(var(--border) / 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px hsl(var(--foreground) / 0.05);
  }

  .dropdown-modern {
    background: hsl(var(--popover) / 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid hsl(var(--border) / 0.2);
    box-shadow:
      0 10px 25px hsl(var(--foreground) / 0.1),
      0 4px 6px hsl(var(--foreground) / 0.05);
  }

  .sidebar-integrated {
    background: linear-gradient(
      135deg,
      hsl(var(--sidebar) / 0.8) 0%,
      hsl(var(--sidebar-accent) / 0.4) 50%,
      hsl(var(--sidebar) / 0.9) 100%
    );
    backdrop-filter: var(--sidebar-backdrop-blur);
    -webkit-backdrop-filter: var(--sidebar-backdrop-blur);
    border-right: 1px solid hsl(var(--sidebar-border) / 0.3);
    position: relative;
    box-shadow: inset 1px 0 0 hsl(var(--sidebar-accent) / 0.1);
  }

  .sidebar-integrated::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      var(--sidebar-gradient-start) 0%,
      transparent 20%,
      transparent 80%,
      var(--sidebar-gradient-end) 100%
    );
    opacity: 0.8;
    z-index: -1;
  }

  .sidebar-menu-item-integrated {
    background: linear-gradient(
      90deg,
      transparent 0%,
      hsl(var(--sidebar-accent) / 0.05) 50%,
      transparent 100%
    );
    transition: all 0.2s ease-out;
  }

  .sidebar-menu-item-integrated:hover {
    background: linear-gradient(
      90deg,
      hsl(var(--sidebar-accent) / 0.1) 0%,
      hsl(var(--sidebar-accent) / 0.15) 50%,
      hsl(var(--sidebar-accent) / 0.1) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .sidebar-section-glass {
    background: linear-gradient(
      135deg,
      hsl(var(--sidebar-accent) / 0.03) 0%,
      hsl(var(--sidebar) / 0.05) 50%,
      hsl(var(--sidebar-accent) / 0.03) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid hsl(var(--sidebar-border) / 0.2);
    border-radius: 0.75rem;
    transition: all 0.2s ease-out;
  }

  .sidebar-section-glass:hover {
    background: linear-gradient(
      135deg,
      hsl(var(--sidebar-accent) / 0.05) 0%,
      hsl(var(--sidebar) / 0.08) 50%,
      hsl(var(--sidebar-accent) / 0.05) 100%
    );
    border-color: hsl(var(--sidebar-border) / 0.3);
  }
}
