/* Locaso Sidebar Modernization */
:root {
  --sidebar-bg: #ffffff;
  --sidebar-text: #3d4152;
  --sidebar-border: #f1f1f1;
  --sidebar-hover-bg: #f8f9fa;
  --sidebar-active-bg: #fff0f3;
  --brand-red: #ff385c;
}

#sidebarMenu.sidebar {
  background-color: var(--brand-red) !important;
  border-right: 1px solid var(--sidebar-border);
  box-shadow: none !important;
  color: var(--sidebar-bg) !important;
  font-family: 'Roboto', sans-serif;
}

#sidebarMenu .sidebar-inner {
  background-color: transparent !important;
}

#sidebarMenu .nav-link {
  color: var(--sidebar-bg) !important;
  padding: 0.8rem 1.5rem;
  border-radius: 12px;
  margin: 4px 12px;
  font-weight: 500;
  display: flex !important;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}

#sidebarMenu .nav-link:hover {
  background-color: var(--sidebar-hover-bg) !important;
  color: var(--brand-red) !important;
}

#sidebarMenu .nav-item.active .nav-link {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--brand-red) !important;
}

#sidebarMenu .sidebar-icon svg, 
#sidebarMenu .sidebar-icon i,
#sidebarMenu .nav-link > svg,
#sidebarMenu .nav-link > i {
  color: var(--sidebar-bg);
  width: 20px !important;
  height: 20px !important;
  transition: color 0.2s ease;
}

#sidebarMenu .nav-link:hover .sidebar-icon svg,
#sidebarMenu .nav-link:hover .sidebar-icon i,
#sidebarMenu .nav-link:hover > svg,
#sidebarMenu .nav-link:hover > i,
#sidebarMenu .nav-item.active .sidebar-icon svg,
#sidebarMenu .nav-item.active .sidebar-icon i,
#sidebarMenu .nav-item.active .nav-link > svg,
#sidebarMenu .nav-item.active .nav-link > i {
  color: var(--brand-red);
}

#sidebarMenu .sidebar-text {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#sidebarMenu .multi-level {
  background-color: transparent !important;
  /* color: var(--brand-red); */
}

#sidebarMenu .multi-level .nav-link {
  padding-left: 3.5rem;
  font-size: 0.88rem;
  text-transform: none;
  font-weight: 500;
  /* color: var(--sidebar-bg); */
}
#sidebarMenu .multi-level .nav-link:hover {
  background-color: var(--sidebar-hover-bg) !important;
  color: var(--brand-red) !important;
}

/* Adjust sidebar top margin to account for new navbar desktop height */
@media (min-width: 992px) {
  #sidebarMenu.sidebar {
    margin-top: 64px !important; /* Matches locaso-nav-top-row height from homePage.css */
    width: 260px;
  }
}

/* Mobile adjustments */
@media (max-width: 991px) {
  #sidebarMenu.sidebar {
    margin-top: 0 !important;
    z-index: 1060;
  }
}