/*
 * Ponte do Shell Global. O legado é CSS normal e prevalece sobre camadas
 * normais; por isso esta folha isolada vem depois dele. Só classes app-* são
 * novas, enquanto os seletores/IDs históricos permanecem como adaptadores.
 */
.app-header {
  min-height: clamp(3.75rem, 5vw, 4.5rem);
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: clamp(var(--space-3), 3vw, var(--space-8));
  border-bottom-color: var(--color-border);
  background: var(--color-background-deep);
  box-shadow: var(--shadow-lg);
}

.app-header .app-brand {
  flex: 0 1 auto;
  min-width: 0;
}

.app-header .app-brand img {
  width: clamp(8.75rem, 14vw, 12.5rem);
}

.app-header .app-menu-toggle {
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.app-header .app-menu-toggle span {
  background: var(--color-primary);
}

.app-navigation {
  border-color: var(--color-border-emphasis);
  border-radius: var(--radius-lg);
  background: var(--color-background-deep);
  box-shadow: var(--shadow-lg);
}

.app-navigation .nav-image-link {
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  transition: border-color var(--transition-standard), color var(--transition-standard),
    box-shadow var(--transition-standard), transform var(--transition-standard);
}

.app-navigation .nav-image-link:hover,
.app-navigation .nav-image-link:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}

.app-navigation .nav-image-link:focus-visible,
.app-header .app-menu-toggle:focus-visible,
.app-feedback-region .toast button:focus-visible {
  outline-color: var(--color-primary-hover);
}

.app-navigation .nav-image-link[aria-current="page"] {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
  box-shadow: inset 0 -2px 0 var(--color-primary), var(--shadow-lg);
}

.app-navigation .nav-image-link[aria-current="page"]::after {
  inset: auto var(--space-3) var(--space-2);
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  box-shadow: none;
}

.app-navigation .passwords-menu > .nav-image-button.active {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

.app-navigation .passwords-dropdown,
.app-navigation .admin-dropdown {
  border-color: var(--color-border-emphasis);
  border-radius: var(--radius-lg);
  background: var(--color-background-deep);
  box-shadow: var(--shadow-lg);
}

.app-main {
  min-height: calc(100dvh - var(--layout-header-height));
}

.app-feedback-region {
  z-index: var(--z-toast);
}

.app-feedback-region .toast {
  border-color: var(--color-border);
  border-left-color: var(--color-info);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
}

.app-feedback-region .toast span,
.app-feedback-region .toast button {
  color: var(--color-text-secondary);
}

.app-feedback-region .toast.success {
  border-left-color: var(--color-success);
}

.app-feedback-region .toast.warning {
  border-left-color: var(--color-warning);
}

.app-feedback-region .toast.error {
  border-left-color: var(--color-danger);
}

@media (min-width: 1280px) {
  .app-header {
    padding-inline: clamp(var(--space-4), 3vw, var(--space-8));
  }

  .app-navigation {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-navigation .nav-image-link {
    min-height: 2.75rem;
    padding-inline: var(--space-2);
    font-size: var(--font-size-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-header .nav-image-link,
  .app-header .app-menu-toggle,
  .app-feedback-region .toast {
    transition-duration: 1ms;
  }
}