:root {
  --clr-pure-bg: #000000;
  --clr-card-bg: #181b26;
  --clr-surface-mid: #30354b;
  --clr-border-muted: #3a405a;
  --clr-text-muted: #6b89a6;
  --clr-accent: #9cd2f1;
  --clr-light-ghost: #f6f5fa;
}

/* Navbar Base */
.navbar-custom {
  background-color: var(--clr-card-bg);
  border-bottom: 1px solid var(--clr-border-muted);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar-brand-custom {
  color: var(--clr-accent) !important;
}

/* Nav Links */
.navbar-custom .nav-link {
  color: var(--clr-light-ghost);
  transition: color 0.2s ease;
  border-radius: 0.375rem;
}
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus {
  color: var(--clr-accent);
}

/* Dropdown Menus */
.dropdown-menu-custom {
  background-color: var(--clr-surface-mid);
  border: 1px solid var(--clr-border-muted);
  overflow: hidden; /* Ensures hover background respects rounded corners */
}

/* Dropdown Items */
.dropdown-menu-custom .dropdown-item {
  color: var(--clr-light-ghost);
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}
.dropdown-menu-custom .dropdown-item:hover,
.dropdown-menu-custom .dropdown-item:focus {
  background-color: var(--clr-accent);
  color: var(--clr-pure-bg);
}

.btn-accent {
  background-color: var(--clr-accent) !important;
  color: #000000 !important;
  font-weight: 600;
  transition: all 0.2s ease;
  border: 1px solid var(--clr-accent) !important;
}
.btn-accent:hover {
  background-color: transparent !important;
  color: var(--clr-accent) !important;
}

.dropdown-divider-custom {
  border-color: var(--clr-border-muted);
  opacity: 0.3;
  margin: 0;
}

.avatar-icon-wrapper {
  width: 34px;
  height: 34px;
  border: 1px solid var(--clr-surface-mid);
}

.btn-signin {
  font-size: 0.85rem;
}