/* =============================================================
   PropCITZ — App Header
   Topbar (mobile) + Navbar horizontal (desktop) + Drawer (mobile)
   Depende de tokens.css.
   ============================================================= */


/* ── 1. HEADER BASE ──────────────────────────────────────────
   Elemento único que se adapta entre 50px (mobile) e 60px (desktop).
   ─────────────────────────────────────────────────────────── */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 50px;
  background: var(--color-nav-bg);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  z-index: 300;
}

@media (min-width: 768px) {
  .app-header {
    height: 60px;
    padding: 0 24px;
    gap: 0;
  }
}


/* ── 2. LOGO ─────────────────────────────────────────────────*/
.app-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.app-logo__icon {
  width: 22px;
  height: 22px;
  background: var(--color-primary-cta);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-logo__text {
  color: #FFFFFF;
  font-size: var(--font-size-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* separador visual logo / nav só no desktop */
@media (min-width: 768px) {
  .app-logo {
    padding-right: 20px;
    margin-right: 4px;
    border-right: 1px solid rgba(255,255,255,0.12);
  }
}


/* ── 3. NAVEGAÇÃO DESKTOP ────────────────────────────────────*/
.app-nav {
  display: none;          /* oculto no mobile */
  align-items: center;
  flex: 1;
  gap: 0;
  height: 60px;
}

@media (min-width: 768px) {
  .app-nav { display: flex; }
}

/* ── CTA "Nova Simulação" ── */
.app-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-primary-cta);
  color: #FFFFFF;
  font-size: var(--font-size-base);
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  margin-right: 10px;
  transition: background 0.15s;
  line-height: 1;
  border: none;
}

.app-nav__cta:hover,
.app-nav__cta:focus {
  background: var(--color-primary-cta-hover);
  color: #FFFFFF;
  text-decoration: none;
}

/* sem indicador ativo no CTA */
.app-nav__cta::after { display: none !important; }

/* ── Links de navegação ── */
.app-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 14px;
  color: rgba(255,255,255,0.6);
  font-size: var(--font-size-md);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.app-nav__link:hover,
.app-nav__link:focus {
  color: rgba(255,255,255,0.88);
  text-decoration: none;
}

/* item ativo: texto branco + risca azul na base */
.app-nav__link--active {
  color: #FFFFFF;
  font-weight: 500;
}

.app-nav__link--active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-nav-active-indicator);
  border-radius: 2px 2px 0 0;
}


/* ── 4. ÁREA DO USUÁRIO (DESKTOP) ────────────────────────────*/
.app-user {
  display: none;          /* oculto no mobile */
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .app-user { display: flex; }
}

.app-user__badge {
  background: rgba(59,130,246,0.20);
  color: #93C5FD;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  line-height: 1.6;
  white-space: nowrap;
}

.app-user__name {
  color: rgba(255,255,255,0.80);
  font-size: var(--font-size-md);
  font-weight: 400;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-user__avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--color-primary-cta);
  color: #FFFFFF;
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  user-select: none;
}

/* botão logout discreto no desktop */
.app-user__logout {
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
  line-height: 1;
}

.app-user__logout:hover { color: rgba(255,255,255,0.65); }


/* ── 5. HAMBURGUER (MOBILE) ──────────────────────────────────*/
.app-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  background: none;
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 7px;
  color: rgba(255,255,255,0.70);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
  padding: 0;
}

.app-hamburger:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.90);
}

@media (min-width: 768px) {
  .app-hamburger { display: none; }
}


/* ── 6. DRAWER (MOBILE) ──────────────────────────────────────*/
.drawer-container {
  position: fixed;
  top: 50px; left: 0; right: 0; bottom: 0;
  z-index: 400;
  display: flex;
  pointer-events: none;
  visibility: hidden;
}

/* estado aberto */
.drawer-container.is-open {
  pointer-events: all;
  visibility: visible;
}

/* overlay: faixa esquerda clicável para fechar */
.drawer-overlay {
  width: 52px;
  flex-shrink: 0;
  background: rgba(15,29,58,0.55);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.drawer-container.is-open .drawer-overlay {
  opacity: 1;
}

/* painel principal */
.drawer-panel {
  flex: 1;
  background: var(--color-nav-bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.drawer-container.is-open .drawer-panel {
  transform: translateX(0);
}

/* esconde drawer no desktop */
@media (min-width: 768px) {
  .drawer-container { display: none !important; }
}


/* ── 6a. DRAWER — seção do usuário ──────────────────────── */
.drawer-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.drawer-user__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary-cta);
  color: #FFFFFF;
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  user-select: none;
}

.drawer-user__info {
  flex: 1;
  min-width: 0;
}

.drawer-user__name {
  color: #FFFFFF;
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.drawer-user__badge {
  display: inline-block;
  background: rgba(59,130,246,0.20);
  color: #93C5FD;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  margin-top: 3px;
  line-height: 1.5;
}


/* ── 6b. DRAWER — botão CTA ─────────────────────────────── */
.drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 14px 4px;
  background: var(--color-primary-cta);
  color: #FFFFFF;
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: 7px;
  padding: 9px 16px;
  transition: background 0.15s;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.drawer-cta:hover,
.drawer-cta:focus {
  background: var(--color-primary-cta-hover);
  color: #FFFFFF;
  text-decoration: none;
}


/* ── 6c. DRAWER — labels de seção ─────────────────────────*/
.drawer-section-label {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  padding: 14px 16px 5px;
}


/* ── 6d. DRAWER — itens de nav ─────────────────────────── */
.drawer-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: rgba(255,255,255,0.55);
  font-size: var(--font-size-sm);
  font-weight: 400;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  border-radius: 0;
}

.drawer-nav-item i {
  font-size: 15px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  color: rgba(255,255,255,0.35);
  transition: color 0.12s;
}

.drawer-nav-item:hover,
.drawer-nav-item:focus {
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
}

.drawer-nav-item:hover i,
.drawer-nav-item:focus i {
  color: rgba(255,255,255,0.55);
}

/* item ativo */
.drawer-nav-item--active {
  background: rgba(37,99,235,0.18);
  color: #FFFFFF;
  font-weight: 500;
}

.drawer-nav-item--active i {
  color: #60A5FA;
}

.drawer-nav-item--active:hover,
.drawer-nav-item--active:focus {
  background: rgba(37,99,235,0.22);
  color: #FFFFFF;
}

.drawer-nav-item--active:hover i,
.drawer-nav-item--active:focus i {
  color: #60A5FA;
}


/* ── 6e. DRAWER — rodapé (sair) ─────────────────────────── */
.drawer-footer {
  margin-top: auto;
  padding: 8px 16px 14px;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.drawer-logout-form {
  margin: 0;
}

.drawer-logout-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.25);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  padding: 8px 0;
  width: 100%;
  transition: color 0.15s;
}

.drawer-logout-btn i {
  font-size: 15px;
  width: 16px;
  text-align: center;
  color: rgba(255,255,255,0.25);
  transition: color 0.15s;
}

.drawer-logout-btn:hover {
  color: rgba(255,255,255,0.50);
}

.drawer-logout-btn:hover i {
  color: rgba(255,255,255,0.45);
}


/* ── 7. DROPDOWN "GERENCIAR" (DESKTOP) ──────────────────────
   Aparece como item do app-nav com submenu em painel branco.
   ─────────────────────────────────────────────────────────── */

/* container com posicionamento relativo */
.app-nav__dropdown {
  position: relative;
  height: 60px;
  display: flex;
  align-items: center;
}

/* botão toggle — mesma aparência de app-nav__link */
.app-nav__dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 60px;
  padding: 0 14px;
  color: rgba(255,255,255,0.60);
  font-size: var(--font-size-md);
  font-weight: 400;
  letter-spacing: 0.02em;
  background: none;
  border: none;
  font-family: var(--font-family);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color 0.15s;
}

.app-nav__dropdown-toggle:hover,
.app-nav__dropdown-toggle:focus {
  color: rgba(255,255,255,0.88);
  outline: none;
}

/* toggle ativo (algum item filho está na página atual) */
.app-nav__dropdown-toggle--active {
  color: #FFFFFF;
  font-weight: 500;
}

.app-nav__dropdown-toggle--active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-nav-active-indicator);
  border-radius: 2px 2px 0 0;
}

/* ícone chevron — rotaciona quando aberto */
.app-nav__dropdown-chevron {
  font-size: 11px;
  transition: transform 0.18s ease;
  display: inline-block;
}

.app-nav__dropdown.is-open .app-nav__dropdown-chevron {
  transform: rotate(180deg);
}

/* painel do dropdown */
.app-nav__dropdown-menu {
  position: absolute;
  top: 100%;           /* encosta direto sob o header, sem gap */
  left: 0;
  min-width: 240px;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px 4px;
  z-index: 500;

  /* fechado por padrão */
  display: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* aberto via JS (.is-open no container) */
.app-nav__dropdown.is-open .app-nav__dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* itens do dropdown */
.app-nav__dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s;
}

.app-nav__dropdown-item i {
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: color 0.12s;
}

.app-nav__dropdown-item:hover,
.app-nav__dropdown-item:focus {
  background: var(--color-neutral-bg);
  color: var(--color-text-primary);
  text-decoration: none;
  outline: none;
}

/* item que corresponde à página atual */
.app-nav__dropdown-item--active {
  background: var(--color-info-bg);
  color: var(--color-primary);
  font-weight: 500;
}

.app-nav__dropdown-item--active i {
  color: var(--color-primary);
}

.app-nav__dropdown-item--active:hover {
  background: var(--color-info-bg);
  color: var(--color-primary);
}


/* ── 8. CONTEÚDO PRINCIPAL ──────────────────────────────────
   Offset para o header fixo.
   ─────────────────────────────────────────────────────────── */
.app-content {
  padding-top: calc(50px + 20px);
  padding-bottom: 20px;
}

@media (min-width: 768px) {
  .app-content {
    padding-top: calc(60px + 28px);
    padding-bottom: 28px;
  }
}