/*
 * Topbar wide layout — CORRIGIDO em 17/09/2026 (auditoria de zoom automatizada)
 * ==============================================================================
 * PROBLEMA (reproduzido com medição, ver wstudios-producao/audit/out):
 *   A versão anterior posicionava o contador (.topbar-center) com
 *   `position:absolute; left:140px` e a faixa de ações com
 *   `padding: 0 152px 0 24px` — deslocamentos FIXOS em px, dentro de
 *   @media (min-width:1600px).
 *   Como o título da página muda de tamanho (por página e por idioma) e o zoom
 *   do navegador altera a largura em CSS-px, os textos se cruzavam:
 *     - contador "31.442"  x  botão "Custos dos Modelos"  (zoom >= 110%)
 *     - título da página   x  indicador "gerando"         (zoom 50% a 110%)
 * SOLUÇÃO:
 *   A topbar volta a ser uma linha flex de verdade. Nada sai do fluxo, nenhum
 *   deslocamento fixo em px, o título corta com reticências e o contador nunca
 *   é invadido. Regras de blindagem valem em qualquer largura/zoom.
 */

@media (min-width: 1600px) {
  .topbar {
    position: relative;
    min-height: var(--topbar-h);
  }

  .topbar-row-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 20px);
    min-width: 0;
  }

  /* Contador volta ao fluxo: empurra o layout em vez de flutuar sobre ele. */
  .topbar-row-main .topbar-center {
    position: static;
    left: auto;
    width: auto;
    max-width: 46%;
    flex: 0 1 auto;
    justify-content: flex-end;
    padding: 0;
  }
}

/* ---------------------------------------------------------------------------
 * Blindagem anti-sobreposição — vale em qualquer largura e qualquer zoom.
 * Regra: nenhum irmão da topbar invade o espaço do outro; quem não couber
 * encolhe (min-width:0) ou corta com reticências (text-overflow:ellipsis).
 * ------------------------------------------------------------------------ */

.topbar-row-main,
.topbar-left,
.topbar-center,
.topbar-right,
.topbar-actions-group,
#topbar-actions-primary {
  min-width: 0;
}

.topbar-left {
  flex: 1 1 auto;
}

/* Título da página: sempre na mesma linha, cortando com "..." se faltar espaço. */
.topbar-left .page-title,
.topbar-left h1,
.topbar-left h2,
#page-title,
.page-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-right {
  flex: 0 0 auto;
}

/* A faixa de ações não quebra nem rola no meio em telas estreitas: lá o CSS
   mobile do site já resolve (ele empilha). As regras abaixo valem só de 601px
   para cima, para não interferir no layout de celular. */
@media (min-width: 601px) {
  #topbar-actions-primary {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #topbar-actions-primary::-webkit-scrollbar {
    height: 0;
    display: none;
  }

  .topbar-actions-group {
    flex-wrap: nowrap;
  }
}

.vh-topbar-label,
.topbar .btn-plans-topbar,
.topbar .topbar-actions-toggle {
  white-space: nowrap;
}

/* A etiqueta "⚡ Popular" não pode cobrir o nome do plano (zoom >= 110%). */
.plan-popular-badge {
  max-width: 46%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-name {
  padding-right: 96px;
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .plan-name {
    padding-right: 76px;
  }
}

/* ---------------------------------------------------------------------------
 * Botões de ação da topbar: rótulos nunca quebram em duas linhas no meio de um
 * botão (era o que fazia o ícone do toggle de fumaça "invadir" o rótulo vizinho
 * em zoom alto). O encolhimento continua por conta do flex do layout original.
 * ------------------------------------------------------------------------ */
.topbar .mouse-smoke-label,
.topbar .vh-topbar-label,
.topbar .topbar-actions-toggle {
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * ÚLTIMA SEÇÃO (precisa ficar no fim do arquivo para vencer as regras acima):
 * em telas estreitas (celular, ou zoom muito alto num monitor grande) quem manda
 * é o layout mobile do próprio site. Aqui devolvemos o comportamento original,
 * para que o bloco esquerdo não seja espremido contra o direito — era isso que
 * fazia o botão de menu encostar no ícone de avisos com 480px de largura.
 * ------------------------------------------------------------------------ */
@media (max-width: 600px) {
  .topbar-left {
    min-width: auto;
  }

  .topbar-left .page-title,
  .topbar-left h1,
  .topbar-left h2,
  #page-title,
  .page-title {
    min-width: auto;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .topbar-right {
    flex: 0 1 auto;
  }

  .plan-name {
    padding-right: 76px;
  }
}