/* === Sidebar (desktop) === */
.sidebar {
  background-color: var(--color-secondary);
  min-height: 100vh;
  padding: 0;
  margin-bottom: 0 !important;
}

/* === Root list === */
.aut-nav-sidebar {
  --nav-item-pad-x: var(--spacing-lg);
  --nav-item-pad-y: var(--spacing-md);
  --nav-icon-size: 16px;
  --nav-border-w: 3px;
  list-style: none;
  margin: 0;
  padding: 0; /* top padding not needed */
  width: 100%;
  background-color: var(--color-secondary);
}

.aut-nav-sidebar > li {
  margin-bottom: var(--spacing-xs);
}

/* Row: link left, toggle right */
.aut-nav__menu-item {
  display: flex;
  align-items: center;
  padding-left: var(--spacing-sm);
}

.aut-nav__menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--primary-background);
}

/* === First-level links === */
.aut-nav-sidebar .aut-nav__menu-item > a {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
  color: #fff;
  font-size: var(--font-size-body);
  border-left: none;
}

.aut-nav-sidebar .aut-nav__menu-item > a > i {
  padding-right: 10px;
}

/* === Active state (applies to the <li>) === */
.aut-nav-sidebar li[data-state="active"] {
  background-color: var(--primary-background);
}

/* Active link colors */
.aut-nav-sidebar li[data-state="active"] > .aut-nav__menu-item > a {
  color: var(--primary-foreground);
}

/* Active hover adds left border emphasis */
.aut-nav-sidebar li[data-state="active"] > .aut-nav__menu-item > a:hover,
.aut-nav-sidebar li[data-state="active"] > .aut-nav__menu-item > a:active {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--primary-foreground);
  border-left: var(--nav-border-w) solid var(--color-primary-hover);
  font-weight: var(--font-weight-bold);
}

/* === Toggle button (chevron) === */
.aut-nav-sidebar .submenu-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  color: var(--primary-background);
  cursor: pointer;
}

.aut-nav-sidebar li[data-state="active"] .submenu-toggle {
  color: var(--primary-foreground);
}

.aut-nav-sidebar .submenu-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--primary-foreground);
}

/* === Submenu === */
.aut-nav-sidebar li > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Let Bootstrap handle collapse show/hide
   (no need for .collapse:not(.show){display:none}) */

/* Submenu link */
.aut-nav-sidebar li > ul li > a {
  display: block;
  text-decoration: none;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-body);
  padding: var(--nav-item-pad-y) var(--nav-item-pad-x);
  padding-left: calc(var(--nav-item-pad-x) + 20px);
  border-left: none;
}

.aut-nav-sidebar li > ul li > a:hover {
  color: var(--primary-background);
  background-color: rgba(255, 255, 255, 0.1);
  border-left: var(--nav-border-w) solid var(--color-primary-hover);
}

/* Keep submenu background consistent when parent is active */
.aut-nav-sidebar li[data-state="active"] ul {
  background-color: var(--color-secondary);
}

.aut-nav-sidebar li > ul li[data-state="active"] > a {
  color: var(--primary-foreground);
}

/* Third Level */
ul.aut-submenu--level3 {
  list-style: none;
}

.aut-submenu--level3 > li > a {
  display: block;
  text-decoration: none;
  font-style: italic;
  font-size: var(--font-size-body);
  border-left: none;
}

.aut-submenu--level3 > li > a:hover,
.aut-submenu--level3 > li > a:active {
  color: var(--color-text-tertiary);
  background: transparent;
  border-left: none;
}

.aut-submenu--level3 > li > a.active,
.aut-submenu--level3 > li[data-state="active"] > a {
  font-weight: var(--font-weight-semibold);
  background: transparent;
  border-left: none;
}

/* === Offcanvas (mobile) === */
#mobileNav {
  --bs-offcanvas-bg: var(--color-secondary);
  --bs-offcanvas-color: var(--primary-background);
  --bs-offcanvas-border-color: var(--color-border);
  --bs-offcanvas-backdrop-bg: rgba(0, 0, 0, 0.35);
  --bs-offcanvas-backdrop-opacity: 0.9;
  --bs-offcanvas-width: min(85vw, 320px);
  padding: 0;
}

/* Header + body share same background/foreground */
#mobileNav .offcanvas-header,
#mobileNav .offcanvas-body {
  background-color: var(--color-secondary);
  color: var(--primary-background);
}

/* Close button theming */
#mobileNav .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.85;
}
#mobileNav .btn-close:hover {
  opacity: 1;
}

/* === A11y helper === */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}