/* ==========================================================================
   Estrutura V44.1
   - Computador (≥ 901 px): menu com nomes na barra do topo; o dock inferior some.
   - Cabeçalho das páginas compacto e igual em todos os setores:
     etiqueta + título (+ descrição curta na mesma linha) à esquerda,
     ações à direita encostadas na borda do conteúdo, linha divisória e 16 px até o conteúdo.
   Carregado por último para valer sobre os estilos antigos dos módulos.
   ========================================================================== */

:root{--page-title-size:clamp(24px,1.9vw,28px);--shell-gutter:max(30px,calc((100vw - 1840px) / 2 + 30px))}

/* ---------- Cabeçalho das páginas (todas as larguras) ---------- */
#appView :is(.page-header,.home-head,.sales-command,.referrals-head,.dashboard-head,.seller-dashboard-head,.teams-minimal-head,.fca-head,.weekly-head){
  min-height:0;margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--line);overflow:visible}
#appView .home-head:before{display:none}
#appView :is(.page-header,.home-head,.sales-command,.referrals-head,.dashboard-head,.seller-dashboard-head,.teams-minimal-head,.fca-head,.weekly-head) h2{
  margin:4px 0 0;font-size:var(--page-title-size);font-weight:750;line-height:1.1;letter-spacing:-.035em}
/* Bloco do título: etiqueta em cima; título e descrição curta na mesma linha */
#appView :is(.page-header,.home-head,.referrals-head,.dashboard-head,.seller-dashboard-head,.teams-minimal-head,.fca-head,.weekly-head)>:first-child,#appView .sales-command>.sales-title-copy{
  min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:0;padding:0;border:0}
#appView :is(.page-header,.home-head,.sales-command,.referrals-head,.dashboard-head,.seller-dashboard-head,.teams-minimal-head,.fca-head,.weekly-head)>:first-child>.eyebrow{flex:0 0 100%}
#appView :is(.page-header,.home-head,.sales-command,.referrals-head,.dashboard-head,.seller-dashboard-head,.teams-minimal-head,.fca-head,.weekly-head)>:first-child>p{
  margin:0;max-width:640px;color:var(--text-3);font-size:13px;line-height:1.45}
#appView :is(.page-header-actions,.referrals-head-actions,.fca-manager-primary){align-items:flex-end}

@media (min-width:901px){
  /* Barra do topo: marca | menu | perfil, alinhada à mesma grade do conteúdo */
  #appView .global-top-controls,#appView .global-top-controls.is-scrolled{
    top:0;left:0;right:0;height:64px;padding:0 var(--shell-gutter);border:0;border-bottom:1px solid var(--line);border-radius:0;
    background:var(--page);background:color-mix(in srgb,var(--page) 92%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:none}
  #appView .global-top-controls.is-scrolled{box-shadow:0 8px 22px rgba(18,41,69,.07)}
  html[data-theme="dark"] #appView .global-top-controls.is-scrolled{box-shadow:0 8px 22px rgba(0,0,0,.28)}
  #appView .topbar-context{display:none}
  #appView .profile-trigger{width:40px;height:40px}

  #appView .bottom-nav{top:12px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);z-index:44;max-width:calc(100vw - 2 * var(--shell-gutter) - 300px);
    padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  #appView .bottom-nav-items{gap:2px;overflow:visible}
  #appView .bottom-nav .nav-item{height:40px;min-width:40px;padding:0 12px;border-radius:10px;font-size:13px}
  #appView .bottom-nav .nav-item:hover{transform:none;background:var(--surface-2)}
  #appView .bottom-nav .nav-item.active{box-shadow:none}
  #appView .bottom-nav .nav-label{max-width:none;margin-left:7px;opacity:1;transform:none;transition:none}
  #appView .bottom-nav .nav-icon svg{width:17px;height:17px}

  /* Conteúdo começa logo abaixo da barra; sem espaço reservado para o dock */
  #appView .content{padding-top:88px;padding-bottom:48px}
  #appView .content.teams-view{padding-top:88px;padding-bottom:24px}

  /* Cabeçalhos em uma linha: título à esquerda, ações à direita na borda do conteúdo */
  #appView :is(.page-header,.home-head,.referrals-head,.teams-minimal-head,.fca-head,.weekly-head){
    display:flex;align-items:flex-end;justify-content:space-between;gap:20px}

  /* Vendas: título | conferência | números + ação, todos na base */
  #appView .sales-command{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:28px}
  #appView .sales-command-center{padding:0}
  #appView .sales-command-right{align-items:flex-end}

  /* Dashboard: título + atalhos na 1ª linha; filtros numa barra própria abaixo */
  #appView .dashboard-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title utility" "controls controls";align-items:end;gap:14px 20px}
  #appView .dashboard-title-block{grid-area:title}
  #appView .dashboard-utility-row{grid-area:utility;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;padding:0}
  #appView .dashboard-primary-controls{grid-area:controls;justify-content:flex-start;align-items:flex-end;flex-wrap:wrap;gap:10px;padding:12px 0 0;border-top:1px dashed var(--line)}
}

/* Faixa intermediária: menu só com ícones (o item ativo mantém o nome) */
@media (min-width:901px) and (max-width:1240px){
  #appView .bottom-nav .nav-item:not(.active) .nav-label{display:none}
  #appView .bottom-nav .nav-item:not(.active){padding:0 11px}
}

/* Celular e tablet: menu continua embaixo; cabeçalho empilha */
@media (max-width:900px){
  #appView :is(.page-header,.home-head,.referrals-head,.teams-minimal-head,.fca-head,.weekly-head,.sales-command,.dashboard-head){gap:12px}
}

/* Rótulos acima dos controles do cabeçalho ficam só para leitores de tela:
   o próprio controle já diz o que é ("Todos os vendedores", "Outubro de 2026").
   Assim todas as ações têm a mesma altura e o título fica na mesma posição em todas as páginas. */
#appView :is(.referral-seller-filter)>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#appView :is(.referral-seller-filter){gap:0}
#appView .referral-seller-filter select{height:42px}

@media (min-width:901px){
  /* Dashboard: período com largura natural (não estica pela tela toda) */
  /* Vendas: contadores da conferência em uma linha, sem rótulo extra */
  #appView .sales-center-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
  #appView .sales-command-center{align-self:end;padding-bottom:4px}
  #appView .audit-overview{gap:6px 16px}
  /* Início: mês atual em duas linhas, alinhado à base do título */
}
/* O traço destaque decorativo existia só no modo escuro; removido para os dois temas ficarem iguais. */
html[data-theme="dark"] #appView :is(.page-header,.home-head,.sales-command,.dashboard-head,.seller-dashboard-head,.referrals-head,.teams-minimal-head,.fca-head,.weekly-head)::after{display:none}

/* Menu do topo sem espaço para todos os nomes: só ícones nos itens não ativos (definido pelo app). */
@media (min-width:901px){
  #appView .bottom-nav.is-compact .nav-item:not(.active) .nav-label{display:none}
  #appView .bottom-nav.is-compact .nav-item:not(.active){padding:0 11px}
}
@media (min-width:901px){
  #appView .bottom-nav.is-tight .nav-item{padding:0 8px;font-size:12.5px}
  #appView .bottom-nav.is-tight .nav-label{margin-left:5px}
  #appView .bottom-nav.is-tight .nav-item.active::after{left:8px;right:8px}
}