/* 
  Sidebar Component Styles
  Defines styling for application sidebar navigation
*/
.admin-layout aside#sidebar {
  background: var(--clr-surface-a10);
  border-right: 1px solid var(--clr-surface-a0);
  padding: 1.5rem 1.5rem; /* Increased padding */
  position: relative;
  overflow: hidden;
  width: 350px;
}

#sidebar {
  background-color: rgb(from var(--color-border-light) r g b / .5);
  border-inline-end-width: var(--sidebar-border-width, 0);
  display: flex;
  flex-direction: column;
  grid-area: sidebar;
  overflow-x: hidden;
  padding: var(--sidebar-padding, 0);
  row-gap: var(--size-2);
  view-transition-name: sidebar;
}

.admin-layout aside#sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    rgba(88, 154, 81, 0.01), 
    rgba(88, 154, 81, 0.05), 
    rgba(88, 154, 81, 0.01));
  z-index: 1;
}

/* Sidebar container */
.sidebar,
nav.sidebar,
.side-navigation,
aside.sidebar {
  background-color: var(--clr-surface-a10);
  color: var(--clr-light-a0);
  width: 250px;
  height: 100%;
  overflow-y: auto;
}

/* Sidebar menu list */
.sidebar ul,
.side-navigation ul,
nav.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Sidebar menu items - fix alignment */
.sidebar li a,
.side-navigation li a,
nav.sidebar li a,
.sidebar-link,
.sidebar .nav-link,
.side-navigation .sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--clr-primary-a20);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  text-decoration: none;
  transition: all var(--transition-base);
  text-align: start !important;
  justify-content: flex-start !important;
}

/* Active and hover states */
.sidebar li a:hover,
.side-navigation li a:hover,
.sidebar-link:hover,
.sidebar-nav-item a:hover,
.sidebar-nav-item a:focus {
  color: var(--clr-primary-a20);
  background-color: var(--clr-surface-a30);
}

.sidebar li a.active,
.side-navigation li a.active,
.sidebar-link.active,
.sidebar .nav-link.active,
.side-navigation .nav-link.active {
  background-color: var(--clr-surface-a30);
  color: var(--clr-primary-a20);
}

/* Section headers */
.sidebar-header,
.side-navigation-heading {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-surface-a50);
  text-align: start !important;
}

/* Icons in sidebar */
.sidebar svg,
.side-navigation svg,
.sidebar-icon,
.side-navigation-icon,
.sidebar i,
.side-navigation i {
  margin-inline-end: var(--space-3);
  color: var(--clr-light-a0);
  width: 20px;
  height: 20px;
}

.sidebar li a:hover svg,
.side-navigation li a:hover svg,
.sidebar li a:hover i,
.side-navigation li a:hover i {
  color: var(--clr-primary-a20);
}

.sidebar li a.active svg,
.side-navigation li a.active svg,
.sidebar li a.active i,
.side-navigation li a.active i {
  color: var(--clr-primary-a20);
}

/* Nested menus */
.sidebar-submenu,
.side-navigation-submenu {
  padding-inline-start: var(--space-6);
}

/* Mobile sidebar toggle */
.sidebar-toggle {
  display: none;
}

@media (max-width: 768px) {
  .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--clr-surface-a30);
    color: var(--clr-light-a0);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
  }
  
  .sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    z-index: 1000;
    transition: left 0.3s ease;
    box-shadow: 4px 0 10px rgba(var(--clr-surface-a30-rgb), 0.2);
  }
  
  .sidebar.open {
    left: 0;
  }
}

 
.sidebar-menu__button[aria-current="page"] {
  color: var(--clr-primary-a20) !important;
  font-weight: var(--font-semibold) !important;
}

.sidebar-menu__button[aria-current="page"] svg.lucide-icon {
  color: var(--clr-primary-a20) !important;
}

/* Hover state for all buttons */
.sidebar-menu__button:hover {
  background-color: var(--clr-surface-a20) !important;
}

/* Make sure both text and icons change color on hover for non-active buttons */
.sidebar-menu__button:hover:not([aria-current="page"]) svg.lucide-icon {
  color: inherit !important;
}

/* Hover state color preservation for active buttons */
.sidebar-menu__button[aria-current="page"]:hover {
  color: var(--clr-primary-a20) !important;
}

/* Ensure icons stay visible on hover for active buttons */
.sidebar-menu__button[aria-current="page"]:hover svg.lucide-icon {
  color: var(--clr-primary-a20) !important;
}

.overflow-ellipsis {
  padding-inline-start: var(--space-1);
}

.sidebar-menu__button:focus {
  outline: none;
}