.nav-link.active {
  background-color: transparent !important;
}

.nav-link svg {
  color: var(--icon-color) !important;
}

.nav-link.active svg {
  color: var(--icon-active-color) !important;
}

.nav-link:not(.active):hover {
  background-color: var(--page-bg);
}

.nav-link.app-logo-link {
  background: transparent !important;
}

.nav-link {
  text-align: left;
  font-weight: 500 !important;
  color: var(--page-text-secondary) !important;
}

.nav-link {
  margin-left: 5px;
  margin-right: 5px;
}

/* Force all nav-item wrappers to stretch full width */
.nav > div {
  width: 100% !important;
}

/* Make nav-link use full width and align items properly */
.nav .nav-link {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/* Add spacing between icon and text */
.nav .nav-link .menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.nav .nav-link.active .menu-item .menu-text {
  color: var(--main-color) !important;
}
:root[data-mantine-color-scheme="dark"] .nav .nav-link.active .menu-item .menu-text {
  color: var(--main-color) !important;
}

#app-logo {
  content: url("/assets/images/logo_light.svg");
}

:root[data-mantine-color-scheme="dark"] #app-logo {
  content: url("/assets/images/logo_dark.svg");
}