/* ============================================================
   Pro SST — TOPBAR (seletor de painéis, layout novo)
   ------------------------------------------------------------
   Estrutura importada do Figma "Torse.ai - Sales Pipeline Setting
   Page CRM Dashboard" (file MM4FHrpadR23GcnahJ24Lh, frame 496:2248
   "Top Bar"), com a PALETA da Pro SST no lugar do laranja da Torse.

   Ativado por `body.topbar-nova` — interruptor por SESSÃO
   (?topbar=nova / ?topbar=classica), mesmo modelo do `ui_sobrio`.
   ADITIVO: sem a classe no body este arquivo é inerte e o seletor
   de painéis renderiza 100% como hoje.

   CSS ESCRITO À MÃO DE PROPÓSITO: o Tailwind do projeto é um bundle
   pré-compilado — classe utilitária nova só existe depois de alguém
   rodar o build (foi o que quebrou o desktop no PR #973). Aqui o
   visual novo não depende do build.

   ------------------------------------------------------------
   O QUE ISSO CONSERTA (os "botões tortos" dos prints)

   1. Nenhum botão tinha altura fixa — cada um crescia com o próprio
      conteúdo.
   2. Padding inconsistente: Control/Finance/Atendimento/SST+/Portal
      usavam px-3 py-2 gap-1.5, mas Marketing e RH usavam px-4 py-2
      gap-2 — largura e respiro diferentes dos vizinhos.
   3. Faltava white-space:nowrap + flex-shrink:0. Era a causa real do
      print: sem largura sobrando, "Portal do Cliente" quebrava em 3
      linhas, ficava ~3x mais alto e DESALINHAVA A LINHA INTEIRA.
   4. O chip "Acessando: <empresa>" usava py-1.5 e text-[11px] — outra
      altura, colado num ml-3.

   Aqui todos viram a MESMA aba de 36px, nowrap, que nunca quebra.

   ------------------------------------------------------------
   Tokens do Figma (extraídos do arquivo, não "no olho"):
     barra        62px · #FFFFFF · borda inferior #DBE2EB
     item         36px · padding 8px 12px · gap 8px · ícone 20x20
     label off    14/500  #4E657F      ícone off  #687D96
     label on     14/700  + borda INFERIOR 2px no acento (não é pílula)
   Acento: trocado do #FF5315 (marca Torse.ai) para o azul Pro SST.
   ============================================================ */

body.topbar-nova {
  --tb-text:      #4E657F;  /* label inativo */
  --tb-icon:      #687D96;  /* ícone inativo */
  --tb-border:    #DBE2EB;  /* borda da barra e dos chips */
  --tb-hover-bg:  #F4F7FB;
  --tb-on-text:   #153060;  /* navy Pro SST */
  --tb-on-accent: #1E5CAD;  /* azul Pro SST — sublinhado + ícone ativo */
  --tb-lock:      #9AA8B8;
  --tb-surface:   #FFFFFF;  /* fundo dos chips (unidade, "Acessando") */
  --tb-h:         36px;
}

/* Tema escuro: sem isto o ativo saia navy (#153060) sobre o header escuro e os
   inativos quase sumiam; o chip de unidade ficava um bloco branco (print 24/09).
   Mesmo esquema do dashboard/kanban novos: texto claro, ativo no azul claro. */
html[data-theme="dark"] body.topbar-nova {
  --tb-text:      #AAB4C0;
  --tb-icon:      #8A96A5;
  --tb-border:    #2A313C;
  --tb-hover-bg:  #1B222C;
  --tb-on-text:   #E8ECF2;
  --tb-on-accent: #7FB2EE;
  --tb-lock:      #5D6775;
  --tb-surface:   #161B23;
}

/* A barra: branca com a borda do design. O header já é bg-white
   border-b; aqui só alinhamos a COR da borda ao token do Figma. */
body.topbar-nova header.sticky { border-bottom-color: var(--tb-border); }

/* ---------- A faixa de itens ---------- */
body.topbar-nova .tb-nav {
  display: flex;
  align-items: center;
  gap: 2px;            /* o design encosta as abas; o respiro é o padding */
}

/* O contêiner da faixa (no base*.html) é `justify-center` + `overflow-x-auto`.
   Centralizar conteúdo que TRANSBORDA corta os dois lados, e o lado esquerdo
   fica inalcançável: a rolagem começa no zero, que já está fora da vista. Medido
   em 1600px de viewport: 125px do primeiro item — o ATIVO — sumiam. Isso é
   anterior a esta mudança; o nowrap só deixou mais evidente.

   `safe center` centraliza enquanto cabe e, quando não cabe, se comporta como
   `start` — nada é cortado no começo e o resto alcança pela rolagem. Navegador
   sem suporte a `safe` descarta a linha e fica no comportamento de hoje. */
body.topbar-nova div:has(> .tb-nav) { justify-content: safe center; }

/* ---------- Cada item (aba) ----------
   Os seletores carregam !important porque o markup antigo traz
   utilitárias do Tailwind (bg-*, border-*, rounded-xl, shadow-lg) e,
   nos itens ativos, um style="" INLINE com gradiente e box-shadow.
   Inline vence folha de estilo — sem !important o gradiente ficaria. */
body.topbar-nova .tb-item {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px !important;

  /* (1) altura fixa + (2) padding igual para TODOS */
  height: var(--tb-h);
  padding: 0 12px !important;

  /* (3) o conserto do "Portal do Cliente" em 3 linhas */
  white-space: nowrap;
  flex-shrink: 0;

  /* tira a pílula: o design é aba com sublinhado */
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1;
  color: var(--tb-text) !important;
  opacity: 1 !important;

  /* reserva o espaço do sublinhado do ativo para nada "pular" no hover */
  border-bottom: 2px solid transparent !important;
  transition: color .15s, background-color .15s, border-color .15s;
}

body.topbar-nova .tb-item svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto;
  color: var(--tb-icon) !important;
}

body.topbar-nova .tb-item:hover {
  color: var(--tb-on-text) !important;
  background: var(--tb-hover-bg) !important;
}
body.topbar-nova .tb-item:hover svg { color: var(--tb-on-text) !important; }

/* ---------- Item ativo: aba sublinhada ---------- */
body.topbar-nova .tb-item--on {
  color: var(--tb-on-text) !important;
  font-weight: 700 !important;
  border-bottom-color: var(--tb-on-accent) !important;
}
body.topbar-nova .tb-item--on svg { color: var(--tb-on-accent) !important; }

/* ---------- Item bloqueado (cadeado) ----------
   Continua legível e claramente indisponível, sem o bloco cinza. */
body.topbar-nova .tb-item--lock,
body.topbar-nova .tb-item--lock:hover {
  color: var(--tb-lock) !important;
  background: none !important;
  cursor: not-allowed;
}
body.topbar-nova .tb-item--lock svg { color: var(--tb-lock) !important; }
/* o cadeadinho auxiliar continua menor que o ícone principal */
body.topbar-nova .tb-item--lock svg:last-child {
  width: 13px !important;
  height: 13px !important;
  margin-left: 0;
}

/* ---------- Chip "Acessando: <empresa>" ----------
   (4) Alinha à mesma linha dos itens em vez da altura própria de antes.
   Vira um chip de 30px com a borda do design (medida do Figma para os
   botões de ação da direita). */
body.topbar-nova .tb-ctx {
  height: 30px;
  margin-left: 10px !important;
  padding: 0 10px !important;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 8px !important;
  border: 1px solid var(--tb-border) !important;
  background: var(--tb-surface) !important;
  color: var(--tb-on-text) !important;
  font-size: 12px !important;
}
body.topbar-nova .tb-ctx svg { color: var(--tb-icon); }
body.topbar-nova .tb-ctx a:hover svg { color: #C0392B; }

/* ---------- Telas estreitas ----------
   A coluna do meio já rola na horizontal (overflow-x-auto, no base.html).
   Com nowrap + shrink-0 ela passa a ROLAR em vez de quebrar — que é
   justamente o conserto. De propósito NÃO escondemos o label para caber
   mais: ícone sozinho deixaria "Control" e "Finance" ambíguos. Aqui só
   apertamos o padding. */
@media (max-width: 1365px) {   /* era 1279: em 1280 faltavam 20px (29/09) */
  body.topbar-nova .tb-item { padding: 0 9px !important; }
  body.topbar-nova .tb-nav { gap: 0; }
}

/* Notebook (29/09, print de cliente: abas passando por cima do seletor de
   unidade). A coluna da direita (unidade + busca + icones) ocupava ~634px e
   sobrava pouco para as abas: em 1366 ja nao cabiam e em ~1100 (notebook com
   zoom 125%) so aparecia "Control | Fina...", o resto inalcancavel.
   1) A caixa "Buscar..." do topo nao busca nada (sem form, sem script): some
      ate 1535px e devolve ~220px as abas.
   2) Ate 1279px as abas ficam so com o icone, menos a do painel ATUAL, que
      mantem o nome; o nome das outras aparece no title (hover). */
@media (max-width: 1535px) {
  body.topbar-nova .tb-busca { display: none !important; }
}
@media (max-width: 1279px) {
  body.topbar-nova .tb-item:not(.tb-item--on) .tb-label { display: none; }
}

/* ---------- Seletor de UNIDADE (lado direito do header) ----------
   Ficou no desenho antigo quando a faixa virou abas de 36px: bloco de ~48px,
   borda de 2px em gradiente e cantos de 12px, colado no chip "Acessando" —
   o "quadrado feio" do print de 24/09. Aqui vira o mesmo chip de 36px da
   barra: borda fina do design, fundo branco, ícone 24px e rótulo compacto. */
body.topbar-nova .tb-unit {
  height: var(--tb-h);
  padding: 0 10px 0 6px !important;
  gap: 8px !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 8px !important;
  background: var(--tb-surface) !important;
  box-shadow: none !important;
}
body.topbar-nova .tb-unit:hover {
  background: var(--tb-hover-bg) !important;
  border-color: #C5D0DC !important;
}
body.topbar-nova .tb-unit > div:first-child {   /* quadradinho do ícone/logo */
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
}
body.topbar-nova .tb-unit > div:first-child svg { width: 14px !important; height: 14px !important; }
body.topbar-nova .tb-unit p:first-child {       /* "UNIDADE" */
  font-size: 9px !important;
  letter-spacing: .06em;
  color: var(--tb-icon) !important;
}
body.topbar-nova .tb-unit p:last-child {        /* nome da unidade */
  font-size: 13px !important;
  line-height: 16px !important;
  color: var(--tb-on-text) !important;
}

/* O chip "Acessando: <empresa>" repete a faixa roxa logo acima ("Voce esta
   acessando como: X" + "Sair e voltar ao Comando"). Na barra ele era o ultimo
   item da coluna que rola — sem largura, saia CORTADO ("Acessando: Pro SS")
   e encostado no seletor de unidade. Onde a faixa existe, ele sai; nos
   paineis sem a faixa (Finance, Atendimento...) continua, porque la e o
   unico jeito de sair da empresa. */
body.topbar-nova:has(.tb-banner-acesso) .tb-ctx { display: none !important; }

/* ---------- Dropdown do seletor de UNIDADE ----------
   Continuava no desenho antigo: faixa verde em gradiente no topo, icone
   laranja no "Todas", avatares em gradiente e linhas de 64px (print 28/09).
   Aqui vira o mesmo menu limpo da barra: painel branco com borda fina,
   titulo escuro, linhas de 44px, selecionada em azul claro com o check. */
body.topbar-nova .tb-unit-drop {
  width: 300px !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: 10px !important;
  background: var(--tb-surface) !important;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06) !important;
  padding: 6px;
}
body.topbar-nova .tb-unit-head {
  background: none !important;
  padding: 8px 10px 10px !important;
  border-bottom: 1px solid var(--tb-border);
  margin-bottom: 6px;
}
body.topbar-nova .tb-unit-head p:first-child { color: var(--tb-on-text) !important; font-size: 14px !important; font-weight: 700 !important; }
body.topbar-nova .tb-unit-head p:last-child  { color: var(--tb-icon) !important; font-size: 12px !important; margin-top: 1px; }

body.topbar-nova .tb-unit-busca {
  position: relative;
  margin: 0 2px 6px;
}
body.topbar-nova .tb-unit-busca svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--tb-icon); pointer-events: none;
}
body.topbar-nova .tb-unit-busca input {
  width: 100%; height: 34px; padding: 0 10px 0 32px;
  border: 1px solid var(--tb-border); border-radius: 8px;
  background: var(--tb-surface); color: var(--tb-on-text); font-size: 13px;
}
body.topbar-nova .tb-unit-busca input:focus { outline: 0; border-color: var(--tb-on-accent); box-shadow: 0 0 0 3px rgba(30, 92, 173, .12); }

body.topbar-nova .tb-unit-lista { max-height: 320px !important; }
body.topbar-nova .tb-unit-opt {
  gap: 10px !important;
  min-height: 44px;
  padding: 6px 10px !important;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
}
body.topbar-nova .tb-unit-opt + .tb-unit-opt { margin-top: 2px; }
body.topbar-nova .tb-unit-opt:hover { background: var(--tb-hover-bg) !important; }
body.topbar-nova .tb-unit-opt p:first-child { font-size: 13px !important; font-weight: 600 !important; color: var(--tb-on-text) !important; }
body.topbar-nova .tb-unit-opt p:last-child  { font-size: 11.5px !important; color: var(--tb-icon) !important; }
body.topbar-nova .tb-unit-opt .check-active { width: 18px !important; height: 18px !important; color: var(--tb-on-accent) !important; }

/* selecionada */
body.topbar-nova .tb-unit-opt--on { background: #EEF4FC !important; }
body.topbar-nova .tb-unit-opt--on:hover { background: #E6EFFA !important; }
body.topbar-nova .tb-unit-opt--on p:first-child { color: var(--tb-on-accent) !important; }
html[data-theme="dark"] body.topbar-nova .tb-unit-opt--on,
html[data-theme="dark"] body.topbar-nova .tb-unit-opt--on:hover { background: rgba(127, 178, 238, .12) !important; }

/* avatares: sem gradiente, quadradinho neutro com iniciais/icone no acento */
body.topbar-nova .tb-unit-av {
  width: 30px !important; height: 30px !important;
  border-radius: 7px !important;
  background: #EEF3F9 !important;
  border: 1px solid var(--tb-border);
}
body.topbar-nova .tb-unit-av span { color: var(--tb-on-accent) !important; font-size: 11px !important; }
body.topbar-nova .tb-unit-av svg { width: 16px !important; height: 16px !important; color: var(--tb-on-accent) !important; }
body.topbar-nova .tb-unit-av--logo { background: #FFF !important; padding: 2px; }
html[data-theme="dark"] body.topbar-nova .tb-unit-av { background: #1B222C !important; }

/* Celular: o botao de unidade fica na ESQUERDA da barra e o painel (ancorado
   em right-0) abria para fora da tela (print 28/09). Abaixo de 640px o painel
   vira uma folha fixa com 12px de respiro nas laterais, logo abaixo do botao
   (--tb-drop-top e calculado no clique). */
@media (max-width: 640px) {
  body.topbar-nova .tb-unit-drop {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: var(--tb-drop-top, 72px) !important;
    width: auto !important;
    margin-top: 0 !important;
  }
  body.topbar-nova .tb-unit-lista { max-height: calc(100vh - var(--tb-drop-top, 72px) - 110px) !important; }
}