/* navbar.css */
/* NAVBAR CONTAINER */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #3b4252;
  border-bottom: 1px solid #4c566a;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

/* FIRST LEVEL - original size */
.nav-primary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  height: 50px;
}

.nav-primary li {
  list-style-type: none;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-primary li a {
  color: #d8dee9;
  text-decoration: none;
  padding: 0 1.5rem;
  display: inline-block;
  height: 100%;
  line-height: 50px;
  transition:
    color 0.2s,
    background-color 0.2s;
}

.nav-primary li a:hover {
  color: #88c0d0;
  background-color: #4c566a;
}

/* Active state for first level */
.nav-primary li a.active {
  color: #88c0d0;
  border-bottom: 2px solid #88c0d0;
}

/* SECOND LEVEL - smaller, independent */
.nav-secondary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  height: 40px;
  background-color: #3b4252;
  border-top: 1px solid #4c566a;
}

.nav-secondary li {
  list-style-type: none;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-secondary li a {
  color: #81a1c1;
  text-decoration: none;
  padding: 0 1rem;
  display: inline-block;
  height: 100%;
  line-height: 40px;
  font-size: 0.85rem;
  transition:
    color 0.2s,
    background-color 0.2s;
}

.nav-secondary li a:hover {
  color: #88c0d0;
  background-color: #4c566a;
}

/* Active state for second level */
.nav-secondary li a.active-secondary {
  color: #88c0d0;
  background-color: #4c566a;
  border-radius: 4px;
}