/* ============================================================================
   BASEFLY — NAVEGAÇÃO (etapa 3)
   Seção 5.6. Carrega depois de components.css.

   A camada de tokens da etapa 0 já apontou --sidebar-bg para o Azul Base, mas
   os itens continuavam com cor de texto de fundo claro: item ativo ficava azul
   sobre azul, e o inativo, grafite sobre quase preto. Esta folha resolve o par
   fundo/texto inteiro de uma vez.

   Regra dura da seção 2.5: sobre o Azul Base, o azul primário reprova em
   3,4:1 — texto e foco ali usam o Azul Céu.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   BARRA LATERAL
   --------------------------------------------------------------------------- */
.sidebar{
  background:var(--brand-base);
  border-right:0;                       /* bloco nítido, sem linha de transição */
  padding:var(--s-4) var(--s-3);
}

/* marca */
.brand{ padding:var(--s-2) var(--s-2) var(--s-4); }
.brand-logo{
  background:var(--blue-500);
  color:var(--n-0);
  border-radius:var(--r-sm);
  font-family:var(--font-display);
  font-weight:700;
}
.brand-text{ color:var(--on-dark); font-family:var(--font-display); font-weight:700; }
.brand-text span{ color:var(--brand-sky); }   /* nunca --blue-500 aqui: 3,4:1 */
.brand-sub{ color:var(--brand-sky); font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }

.sidebar-collapse-btn{
  background:transparent; border:0; color:var(--brand-sky); cursor:pointer;
  border-radius:var(--r-sm);
}
.sidebar-collapse-btn:hover{ background:var(--sidebar-hover-bg); color:var(--on-dark); }

/* título de grupo — é rótulo, não título: monoespaçada em caixa alta */
.sidebar-group-title{
  /* --n-500 reprovaria aqui (4,21:1 sobre o Azul Base); --n-300 da 9,17:1 e
     mantem o rotulo em cinza, distinto do azul dos itens */
  color:var(--n-300);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:var(--s-2) var(--s-3) var(--s-1);
}

/* itens */
.nav-item{
  color:var(--brand-sky);               /* 6,5:1 sobre o Azul Base */
  border-radius:var(--r-sm);
  padding:var(--s-2) var(--s-3);
  font-family:var(--font-text);
  font-size:13px;
  font-weight:500;
  text-transform:none;                  /* item de menu é texto, não etiqueta */
  letter-spacing:0;
}
.nav-item:hover{
  background:var(--sidebar-hover-bg);
  color:var(--on-dark);
}
.nav-item.active{
  background:var(--blue-500);
  color:var(--n-0);
  font-weight:600;
}
.nav-item.active .nav-icon,
.nav-item:hover .nav-icon{ color:var(--on-dark); }
.nav-icon{ color:var(--brand-sky); }

.nav-item:focus-visible{ outline:2px solid var(--brand-sky); outline-offset:2px; }

/* a barra de rolagem da lateral também é escura */
.sidebar::-webkit-scrollbar{ width:8px; }
.sidebar::-webkit-scrollbar-track{ background:var(--brand-base); }
.sidebar::-webkit-scrollbar-thumb{ background:var(--n-600); border-radius:var(--r-full); }
.sidebar::-webkit-scrollbar-thumb:hover{ background:var(--n-500); }

.sidebar-resizer:hover{ background:var(--blue-500); }

/* ---------------------------------------------------------------------------
   CABEÇALHO DE PÁGINA — seção 5.6: fundo branco, borda inferior, altura 64 px
   --------------------------------------------------------------------------- */
.topbar{
  background:var(--n-0);
  border-bottom:1px solid var(--n-200);
  min-height:64px;
  padding:var(--s-3) var(--s-6);        /* margem de página: 24 px */
}

/* ---------------------------------------------------------------------------
   ABAS — seção 5.6: ativa em --n-900 com barra de 2 px; inativa em --n-500.
   O projeto tem 9 famílias de aba com nomes diferentes; todas seguem a mesma
   marcação (item + borda inferior), então recebem a mesma regra.
   --------------------------------------------------------------------------- */
.catalog-tab,.import-tab,.notif-tab,.resource-tab,.turnbim-tab,
.proposal-eap-tab,.proposal-pay-tab,.public-form-step-tab,.inbox-acct-tab{
  color:var(--n-500);
  font-family:var(--font-text);
  font-size:14px;
  font-weight:600;
  text-transform:none;
  letter-spacing:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  padding:var(--s-3) var(--s-4);
  background:transparent;
}
.catalog-tab:hover,.import-tab:hover,.notif-tab:hover,.resource-tab:hover,
.turnbim-tab:hover,.proposal-eap-tab:hover,.proposal-pay-tab:hover,
.public-form-step-tab:hover,.inbox-acct-tab:hover{
  color:var(--n-900);
  background:transparent;
}
.catalog-tab.active,.import-tab.active,.notif-tab.active,.resource-tab.active,
.turnbim-tab.active,.proposal-eap-tab.active,.proposal-pay-tab.active,
.public-form-step-tab.active,.inbox-acct-tab.active{
  color:var(--n-900);
  border-bottom-color:var(--blue-500);
  background:transparent;
}

/* trilho das abas */
.catalog-tabs,.import-tabs,.notif-tabs,.resource-tabs,.turnbim-tabs,
.proposal-eap-tabs,.proposal-pay-tabs,.public-form-step-tabs{
  border-bottom:1px solid var(--n-200);
  gap:var(--s-1);
}

/* ---------------------------------------------------------------------------
   CHIPS DE FILTRO — vizinhos das abas, mesma lógica de estado selecionado
   --------------------------------------------------------------------------- */
.filter-chip{
  border:1px solid var(--n-200);
  border-radius:var(--r-sm);
  background:var(--n-0);
  color:var(--n-600);
  font-family:var(--font-text);
  font-size:13px;
  font-weight:500;
  padding:var(--s-1) var(--s-3);
}
.filter-chip:hover{ border-color:var(--n-300); background:var(--n-25); }
.filter-chip.active{
  background:var(--blue-50);
  border-color:var(--blue-500);
  color:var(--blue-700);
  font-weight:600;
}

/* ---------------------------------------------------------------------------
   MARCA BASEFLY
   O brandbook recebido não traz arquivo de símbolo (o compêndio é PDF sem
   vetor extraível), então a assinatura é construída com o que a especificação
   define: Archivo 700, cores da marca e símbolo com raio de 22% do lado
   (seção 4). Quando você me passar o SVG oficial, ele entra no lugar do bloco
   com a inicial — o resto da regra continua valendo.
   --------------------------------------------------------------------------- */
.brand-logo,
.login-brand-logo{
  border-radius:22%;                    /* seção 4: símbolo da marca */
  background:var(--blue-500);
  color:var(--n-0);
  font-family:var(--font-display);
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  letter-spacing:0;
}

/* assinatura no login: fundo claro, então o azul primário pode ser texto */
.login-brand-text{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--n-900);
}
.login-brand-text span{ color:var(--blue-500); }   /* 5,6:1 sobre branco */

/* ---------------------------------------------------------------------------
   Sufixo do produto — "BaseFly.crm"
   O .crm é assinatura técnica, não marca: monoespaçada, peso médio e branco
   rebaixado, para ficar atrás do BaseFly em vez de disputar com ele.
   --------------------------------------------------------------------------- */
.brand-suffix{
  font-style:normal;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.72em;
  letter-spacing:.02em;
  color:var(--on-dark);
  opacity:.45;
  margin-left:1px;
}
.login-brand-text .brand-suffix{ color:var(--n-900); opacity:.4; }