/* Estrutura da marca: logo, barra de navegação, telas de entrada e estados
   vazios. Ver docs/marca/INSTRUCOES-DESIGN.md. */

/* ── Logo (app/views/shared/_logo.html.erb) ─────────────────────────── */

.logo {
  display: inline-flex;
  line-height: 0;
  color: var(--bs-body-color);
}

.logo svg {
  display: block;
  height: var(--logo-height, 40px);
  width: auto;
}

.logo--sm { --logo-height: 32px; }
.logo--md { --logo-height: 44px; }
.logo--lg { --logo-height: 64px; }
.logo--xl { --logo-height: 96px; }

.logo__bg { fill: var(--brand-teal); }
.logo__bubble { fill: #fff; }
.logo__heart { fill: var(--brand-coral); }
.logo__word { fill: currentColor; }
.logo__accent { fill: var(--color-primary-500); }

/* ── Barra de navegação ─────────────────────────────────────────────── */

.app-nav {
  position: sticky;
  top: 0;
  z-index: 1020;
  margin-bottom: var(--space-4);
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--color-border);
}

.app-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-2) var(--space-4);
}

.app-nav__brand {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}

.app-nav__brand:hover {
  text-decoration: none;
}

.app-nav__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

/* Menu da pessoa: avatar com a inicial + nome (só em tela larga). */
.user-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-2) 2px 2px;
  min-height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--bs-body-color);
  font-size: var(--text-sm);
  font-weight: 500;
}

.user-menu-toggle:hover,
.user-menu-toggle[aria-expanded="true"] {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

@media (pointer: coarse) {
  .user-menu-toggle {
    min-height: 44px;
  }
}

.user-menu-toggle__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-hero-from) 0%, var(--brand-hero-to) 100%);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
}

.user-menu {
  min-width: 13rem;
}

.user-menu form {
  margin: 0;
}

.user-menu .dropdown-item {
  width: 100%;
  background: transparent;
  color: var(--bs-body-color);
  font-size: var(--text-sm);
}

.user-menu .dropdown-item:hover,
.user-menu .dropdown-item:focus {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

.user-menu .dropdown-item .icon {
  color: var(--color-muted);
}

/* ── Telas de entrada (login, cadastro, senha) ──────────────────────── */

.auth-page {
  max-width: 26rem;
  margin: 0 auto;
  padding-block: var(--space-8) var(--space-12);
}

.auth-page--wide {
  max-width: 40rem;
}

.auth-page__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  text-align: center;
}

.auth-page__tagline {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-base);
  text-wrap: balance;
}

.auth-card {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--bs-body-bg);
  box-shadow: var(--shadow-sm);
}

.auth-card h1,
.auth-card h2,
.auth-card h4 {
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
  font-weight: 700;
}

.auth-card label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
}

.auth-card .form-check-label {
  display: inline;
  font-size: var(--text-base);
  font-weight: 400;
}

.auth-card .form-control {
  min-height: 44px;
}

.auth-page__links {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--text-sm);
}

/* ── Estado vazio (app/views/shared/_empty_state.html.erb) ──────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.empty-state__art {
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-2);
}

.empty-state__bubble { fill: var(--color-primary-100); }
.empty-state__heart { fill: var(--brand-coral); }

.empty-state__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
}

.empty-state__text {
  max-width: 24rem;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-wrap: balance;
}

.empty-state__action {
  margin-top: var(--space-3);
}