/* Navbar component — role-aware navigation bar */

.app-navbar {
  background-color: var(--pico-card-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  /* Use padding-block (logical) so this selector wins over Pico's
     body > header { padding-block: ... } on the same property */
  padding-block: var(--sp-3);
  /* Remove Pico's 1rem top/bottom on each <li>, which inflates the nav row */
  --pico-nav-element-spacing-vertical: var(--sp-0);
}

.app-navbar nav {
  margin-bottom: 0;
}

.app-navbar .app-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-18);
  color: var(--color-ink);
}

.app-navbar .app-brand:hover {
  text-decoration: none;
}

.app-navbar .app-brand img {
  height: var(--control-h-sm);
}

.app-navbar .app-user {
  font-size: var(--fs-14);
  color: var(--color-ink-muted);
}

/* Sign-out — remove Pico tooltip dotted underline on non-button elements */
.app-navbar .app-signout[data-tooltip] {
  border-bottom: none;
  cursor: pointer;
}

.app-navbar .app-signout button {
  margin-bottom: 0;
  padding: var(--sp-1) var(--sp-2);
  line-height: 1;
}

.app-navbar .app-signout button svg {
  width: var(--fs-20);
  height: var(--fs-20);
  display: block;
}

@media (max-width: 576px) {
  .app-navbar nav {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .app-navbar nav ul {
    gap: var(--sp-1);
  }

  .app-navbar .app-brand {
    font-size: var(--fs-16);
  }

  .app-navbar .app-brand img {
    height: var(--sp-6);
  }
}