@layer components {
/* Navigation components */

header {
  height: 45px;
  position: relative;
}

.nav {
  display: flex !important;
  align-items: center;
  gap: 2rem;
  height: 45px;
  padding: 0 1rem;
  background-color: var(--primary-500);
  color: white;
}

.nav a { color: white !important; }
.nav a:hover { color: rgba(255, 255, 255, 0.8) !important; }

/* Environment-based colors */
.nav.dark {
  background-color: var(--neutral-800);
}

.nav.light {
  background-color: var(--primary-500);
}

.nav--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.nav__brand {
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
}

.nav__content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.nav__item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-family-sans-serif);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.nav__item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.nav__item--active {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.nav__divider {
  width: 1px;
  height: 1.5rem;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 0.5rem;
}

.nav__spacer {
  flex: 1;
}

/* Dropdown in nav */
.nav [aria-expanded],
.nav .language-menu {
  position: relative !important;
}

.nav .dropdown-toggle {
  cursor: pointer;
}

.nav .dropdown-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 1rem !important;
  background: white !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  min-width: 200px !important;
  z-index: 1001 !important;
}

.nav [aria-expanded="true"] .dropdown-menu,
.nav .dropdown-menu.open {
  display: block !important;
}

.nav .dropdown-menu li {
  display: block !important;
}

.nav .dropdown-menu a {
  display: block !important;
  padding: 0.5rem 1rem !important;
  color: var(--neutral-700) !important;
}

.nav .dropdown-menu a:hover {
  background: var(--neutral-100) !important;
  color: var(--neutral-900) !important;
}

/* List resets in nav */
.nav ul,
.nav ol {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav .element-menu {
  gap: 1.25rem !important;
  font-size: 0.875rem !important;
}

.nav .element-menu .element,
.nav .element {
  font-family: var(--font-family-sans-serif);
  font-size: inherit;
}

/* Search input in nav */
.nav__search {
  display: flex !important;
  align-items: center;
  height: 100%;
  flex: 1;
}

.nav__search form {
  display: flex !important;
  align-items: center;
  margin: 0 !important;
  flex: 1;
}

.nav__search input {
  padding: 0.35rem 0.75rem;
  font-size: var(--font-size-xs);
  border: none;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--neutral-900);
  flex: 1;
}

.nav__search input:focus {
  outline: none;
  background-color: white;
}

.nav__search input::placeholder {
  color: var(--neutral-500);
}

/* User menu in nav */
.nav__user {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__user-toggle {
  display: flex;
  align-items: center;
  padding: 0.25rem;
  background: transparent !important;
  border: none !important;
  border-radius: 50%;
  cursor: pointer;
}

.nav__user-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav__user-avatar {
  width: 2rem;
  height: 2rem !important;
  border-radius: 50%;
}

.nav__user-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: white;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 120px;
  z-index: 1001;
}

.nav__user-menu--visible {
  display: block;
}

.nav .nav__user-menu-item {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--neutral-700) !important;
  text-decoration: none;
  font-family: var(--font-family-sans-serif);
}

.nav .nav__user-menu-item:hover {
  background: var(--neutral-100);
  color: var(--neutral-900) !important;
}

/* Mobile styles */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }

  .nav {
    gap: 0.3125rem;
    padding: 0 0.5rem;
  }

  .nav .dropdown-menu {
    left: auto !important;
  }

  .nav__brand,
  .nav__divider,
  .nav__spacer {
    display: none !important;
  }

  .nav__content {
    gap: 0.25rem;
    min-width: 0;
  }

  .nav__search {
    flex: 1;
    min-width: 0;
  }

  .nav__search form {
    flex: 1;
    width: 100%;
  }

  .nav__search input {
    flex: 1;
    width: 100%;
    min-width: 0;
    font-size: 1rem;
  }

  .nav .element-menu {
    gap: 0.5rem !important;
    font-size: 1.1rem !important;
  }

  .nav .element-menu .element {
    font-size: 1.1rem !important;
    padding: 0.25rem 0.5rem !important;
  }

  .nav .element-menu .element i {
    font-size: 1.2rem !important;
  }
}
}