.app-header {
  min-height: var(--size.header.height, 64px);
  background: rgb(var(--comp.header.bg, var(--surface.rgb, 255 255 255)));
  color: rgb(var(--comp.header.fg, var(--fg.rgb, 17 24 39)));
  box-shadow: var(--elevation.navbar, var(--shadow.lift, 0 2px 8px rgba(15, 23, 42, 0.08)));
  border-bottom: 1px solid var(--comp.header.border, rgba(15, 23, 42, 0.08));
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.app-header .navbar-brand {
  font-weight: 600;
  color: rgb(var(--comp.header.brand.fg, var(--comp.header.fg, var(--fg.rgb, 17 24 39))));
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  text-decoration: none;
}

.app-header .navbar-brand img {
  height: var(--comp.header.logo.height, 40px);
}

.app-header .brand-subtitle {
  color: rgb(var(--comp.header.brand.subtitle.fg, var(--brand.accent.rgb, 0 122 255)));
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1rem;
}

.app-header .navbar-nav .nav-link {
  font-weight: 500;
  color: rgb(var(--comp.header.nav.fg, var(--fg.rgb, 17 24 39)));
  transition: color 0.2s ease;
}

.app-header .navbar-nav .nav-link:hover,
.app-header .navbar-nav .nav-link:focus {
  color: rgb(var(--comp.header.nav.fg.hover, var(--brand.accent.rgb, 0 122 255)));
}

.app-header .dropdown-menu {
  background: rgb(var(--comp.header.dropdown.bg, var(--surface.rgb, 255 255 255)));
  border: 1px solid rgba(var(--border.strong.rgb, 148 163 184) / 0.35);
  border-radius: var(--radius.md, 8px);
  box-shadow: var(--comp.header.dropdown.shadow, var(--shadow.layer, 0 6px 16px rgba(15, 23, 42, 0.12)));
  padding: 0.5rem 0;
}

.app-header .dropdown-item {
  color: rgb(var(--comp.header.nav.fg, var(--fg.rgb, 17 24 39)));
  border-radius: var(--radius.sm, 6px);
  margin: 0 0.5rem;
}

.app-header .dropdown-item:hover,
.app-header .dropdown-item:focus {
  background: rgb(var(--brand.accent.rgb, 0 122 255) / 0.12);
  color: rgb(var(--comp.header.nav.fg.hover, var(--brand.accent.rgb, 0 122 255)));
}

@media (max-width: 991.98px) {
  .app-header .navbar-collapse {
    background: rgb(var(--comp.header.bg, var(--surface.rgb, 255 255 255)));
    border-radius: 0 0 var(--radius.lg, 12px) 12px;
    box-shadow: var(--shadow.lift, 0 2px 8px rgba(15, 23, 42, 0.08));
    padding: 0.5rem 1rem;
  }
}