/* ============================================================================
   onda-11-topnav.css — TOPNAV CENTRAL (substitui sidebar 240px da Onda 8)

   Decisão Gustavo (Opção A): trocar navegação lateral por topbar no topo.
     ┌────────────────────────────────────────────────────────────────┐
     │ [logo] Inspira CRM   Dashboard CRM Serviços Marcas   Admin▾  G▾  │
     └────────────────────────────────────────────────────────────────┘
        esquerda            4 abas centralizadas        admin + user dir.

   Cascade obrigatória:
     tokens → components → tracking → onda-7b → onda-7d → onda-7e
       → onda-8 → onda-10 → ONDA-11
   Carrega POR ÚLTIMO. Sobrescreve onda-8: esconde .app-sidebar, neutraliza
   margin-left do .app-content, conteúdo largura cheia abaixo de topbar sticky.

   REUSA 100% os tokens editorial-luxo da Onda 8 (petróleo / cream / dourado /
   Fraunces / Inter). NÃO cria paleta paralela.
   ============================================================================ */

:root[data-theme="light"] {
  --topnav-h: 78px;   /* +30% (era 60px) — header com mais respiro, menos espremido */
}

/* ============================================================================
   0) ESCONDER SIDEBAR + NEUTRALIZAR LAYOUT DA ONDA 8
   ============================================================================ */
:root[data-theme="light"] .app-sidebar {
  display: none !important;
}

/* Conteúdo passa a ocupar largura cheia: zera o margin-left:240px da Onda 8 e
   reseta max-width (que somava sidebar-w). Top padding abre espaço pra topbar
   fixa. */
:root[data-theme="light"] body.has-topnav .app-content,
:root[data-theme="light"] body.has-topnav main.app-content,
:root[data-theme="light"] body.has-topnav .app-main {
  margin-left: 0;
  max-width: var(--content-max);
  margin-right: auto;
  margin-left: auto;
  padding-top: calc(var(--topnav-h) + var(--content-pad-y));
}

/* Container interno permanece neutralizado (igual Onda 8) — sem offset duplo. */
:root[data-theme="light"] body.has-topnav .app-content > .container,
:root[data-theme="light"] body.has-topnav .app-content .container {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}


/* ============================================================================
   1) TOPNAV — barra sticky no topo, full-width, fundo petróleo deep
   ============================================================================ */
:root[data-theme="light"] .app-topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topnav-h);
  /* Marca Dra. Sharon Raicher: bordô. NÃO usa var(--ink-deep) (petróleo) de
     propósito — esse token também pinta popovers/menus claros e mudá-lo
     quebraria outras superfícies. Cor cravada só aqui no fundo do header. */
  background: #7A0F2E;
  color: var(--canvas);
  z-index: 50;
  font-family: var(--font-sans);
  box-shadow: var(--shadow-1);
}

:root[data-theme="light"] .app-topnav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;     /* brand | nav central | actions */
  align-items: center;
  gap: var(--sp-4);
  height: var(--topnav-h);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad-x);
  box-sizing: border-box;
}

/* Filete dourado fino na base da topbar (assinatura Onda 8) */
:root[data-theme="light"] .app-topnav__divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(166, 135, 92, 0.55) 22%,
    rgba(166, 135, 92, 0.55) 78%,
    transparent 100%
  );
  pointer-events: none;
}


/* ============================================================================
   2) BRAND (esquerda)
   ============================================================================ */
:root[data-theme="light"] .app-topnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  justify-self: start;
  min-width: 0;
  padding: 4px 4px;
  border-radius: 4px;
}

:root[data-theme="light"] .app-topnav__logo {
  /* Logo horizontal (350×81) branca. Fixa a ALTURA e deixa a largura automática
     pra não distorcer; cap de largura pra não invadir as abas centrais. */
  height: 30px;
  width: auto;
  max-width: 200px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

:root[data-theme="light"] .app-topnav__wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-lg);                  /* 18px */
  font-weight: 600;
  line-height: var(--lh-control);
  color: var(--canvas);
  letter-spacing: -0.01em;
  white-space: nowrap;
}


/* ============================================================================
   3) NAV CENTRAL — 4 tabs centralizadas
   ============================================================================ */
:root[data-theme="light"] .app-topnav__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-self: center;
  min-width: 0;
}

:root[data-theme="light"] .topnav-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--topnav-h);
  padding: 0 var(--sp-4);
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  color: rgba(250, 246, 239, 0.74);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

:root[data-theme="light"] .topnav-tab:hover {
  color: var(--canvas);
}

:root[data-theme="light"] .topnav-tab.is-active {
  color: var(--canvas);
  font-weight: 600;
}

/* Indicador da aba ativa: filete embaixo do texto.
   Era bottom:0 = colava no .app-topnav__divider (filete dourado full-width do
   rodapé do header) → os dois se fundiam e a barra "sumia". Subimos pra ~16px
   (logo abaixo do texto, separado do divider), +1px de espessura e dourado mais
   claro pra ficar nítido no header escuro. (Gustavo 2026-06-02) */
:root[data-theme="light"] .topnav-tab.is-active::after {
  content: "";
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: 16px;
  height: 3px;
  background: var(--color-accent-soft, #C9A877);
  border-radius: 2px;
}

:root[data-theme="light"] .topnav-tab__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}


/* ============================================================================
   4) ACTIONS (direita) — Admin▾ + user pill
   ============================================================================ */
:root[data-theme="light"] .app-topnav__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  justify-self: end;
  min-width: 0;
}


/* ---- Admin dropdown -------------------------------------------------------- */
:root[data-theme="light"] .topnav-admin {
  position: relative;
}

:root[data-theme="light"] .topnav-admin__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  color: rgba(250, 246, 239, 0.74);
  cursor: pointer;
  white-space: nowrap;
  transition: none;   /* sem animacao ao passar o mouse (pedido do dono) */
}

:root[data-theme="light"] .topnav-admin__toggle:hover {
  color: var(--canvas);
  background: rgba(250, 246, 239, 0.06);
}

:root[data-theme="light"] .topnav-admin__toggle.is-open,
:root[data-theme="light"] .topnav-admin__toggle.is-active {
  color: var(--canvas);
  background: rgba(166, 135, 92, 0.14);
  border-color: rgba(166, 135, 92, 0.30);
}

:root[data-theme="light"] .topnav-admin__chevron {
  width: 12px;
  height: 12px;
  opacity: 0.75;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}

:root[data-theme="light"] .topnav-admin__toggle.is-open .topnav-admin__chevron {
  transform: rotate(180deg);
}

/* Menu popover — surface clara editorial (igual user-menu) */
:root[data-theme="light"] .topnav-admin__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 248px;
  background: var(--surface-pure);
  border: 1px solid var(--neutral-50);
  border-radius: 10px;
  box-shadow: var(--shadow-3);
  padding: 8px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: o8-fade-in var(--dur-fast) var(--ease-out);
}

/* Titulo de secao do menu admin (GESTAO / EQUIPE / SISTEMA).
   Cor dourada (--text-eyebrow, ~5:1 AA) — antes era --text-tertiary (~4:1, sutil demais). */
:root[data-theme="light"] .topnav-admin__section-title {
  margin: 0;
  padding: 10px 12px 4px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-eyebrow);
  user-select: none;
}

:root[data-theme="light"] .topnav-admin__section-title + .topnav-admin__item {
  margin-bottom: 2px;
}
/* Divisor robusto: todo titulo que NAO for o primeiro do menu ganha filete em cima.
   Independe da adjacencia com .topnav-admin__item (itens ocultos por x-show seguem
   no DOM e quebravam o seletor de irmao adjacente). O 1o titulo (GESTAO) fica sem linha. */
:root[data-theme="light"] .topnav-admin__section-title:not(:first-child) {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

:root[data-theme="light"] .topnav-admin__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm-plus);
  font-weight: 500;
  color: var(--ink-deep);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

:root[data-theme="light"] .topnav-admin__item:hover {
  background: var(--canvas-2);
}

:root[data-theme="light"] .topnav-admin__item.is-active {
  background: var(--canvas-3);
  color: var(--gold-deep);
  font-weight: 600;
}

:root[data-theme="light"] .topnav-admin__item:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-gold);
}

:root[data-theme="light"] .topnav-admin__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  color: var(--ink-500);
}

:root[data-theme="light"] .topnav-admin__item.is-active .topnav-admin__icon {
  color: var(--gold-deep);
}

:root[data-theme="light"] .topnav-admin__counter {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
  letter-spacing: 0.02em;
}


/* ---- User pill ------------------------------------------------------------- */
:root[data-theme="light"] .topnav-user {
  position: relative;
}

:root[data-theme="light"] .topnav-user__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 10px 0 8px;
  background: transparent;            /* sem caixa no estado normal (ficava feio) */
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--canvas);
  font-family: var(--font-sans);
  transition: none;   /* sem animacao ao passar o mouse (pedido do dono) */
}

/* Sem efeito de hover (passar o mouse nao muda nada); so destaca quando o
   menu do perfil esta ABERTO. */
:root[data-theme="light"] .topnav-user__pill.is-open {
  background: rgba(250, 246, 239, 0.10);
  border-color: rgba(23, 60, 70, 0.25); /* petróleo neutro sutil (era dourado) */
}

:root[data-theme="light"] .topnav-user__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink-700);
  color: var(--gold-fill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  flex-shrink: 0;
}

:root[data-theme="light"] .topnav-user__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  text-align: left;
}

:root[data-theme="light"] .topnav-user__name {
  font-size: var(--fs-sm-plus);
  font-weight: 500;
  color: var(--canvas);
  line-height: var(--lh-control);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

:root[data-theme="light"] .topnav-user__role {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);   /* era cream-ouro 0.55 (4.2:1) — branco 0.78 ~9:1 AAA no header escuro */
  line-height: 1;
}

:root[data-theme="light"] .topnav-user__chevron {
  width: 12px;
  height: 12px;
  opacity: 0.7;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}

:root[data-theme="light"] .topnav-user__pill.is-open .topnav-user__chevron {
  transform: rotate(180deg);
}

/* user-menu --topnav: ancora abaixo da pill, alinhado à direita.
   Sobrescreve o .user-menu legacy (top:44px right:0 do onda-7e). */
:root[data-theme="light"] .user-menu--topnav {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  bottom: auto;
  min-width: 220px;
  /* Animação própria SÓ vertical: o keyframe base `topbar-popover-in` usa
     translate(-50%) (pra menu centralizado), mas este menu é ancorado à
     direita (right:0). O -50% fazia ele aparecer deslocado pra ESQUERDA e
     saltar pra DIREITA ao fim da animação (sem fill-mode). Aqui sobrescreve
     com translateY puro — sem deslocamento horizontal. (Gustavo 2026-06-02) */
  animation: user-menu-topnav-in var(--duration-fast) var(--ease-out);
  transform-origin: top right;
}
@keyframes user-menu-topnav-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================================
   5) RESPONSIVO — telas estreitas
   Abas centrais viram scroll horizontal; wordmark some no muito estreito;
   role do user some, fica só avatar + nome curto.
   ============================================================================ */
@media (max-width: 1024px) {
  :root[data-theme="light"] .app-topnav__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
  }
  :root[data-theme="light"] .app-topnav__nav {
    justify-self: stretch;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: flex-start;
  }
  :root[data-theme="light"] .app-topnav__nav::-webkit-scrollbar {
    display: none;
  }
  :root[data-theme="light"] .topnav-tab {
    padding: 0 12px;
  }
  :root[data-theme="light"] body.has-topnav .app-content,
  :root[data-theme="light"] body.has-topnav main.app-content,
  :root[data-theme="light"] body.has-topnav .app-main {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
}

@media (max-width: 720px) {
  :root[data-theme="light"] .app-topnav__wordmark {
    display: none;
  }
  :root[data-theme="light"] .topnav-tab span:not(.topnav-tab__icon) {
    /* mantém label; ícone + label cabem com scroll horizontal */
  }
  :root[data-theme="light"] .topnav-user__meta {
    display: none;          /* só avatar no mobile */
  }
  :root[data-theme="light"] .topnav-user__pill {
    padding: 0 8px;
    gap: 6px;
  }
  :root[data-theme="light"] .topnav-admin__toggle span {
    /* esconde label "Admin", deixa só chevron-ícone implícito — opcional */
  }
}


/* ============================================================================
   6) PREFERS-REDUCED-MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] .topnav-admin__chevron,
  :root[data-theme="light"] .topnav-user__chevron,
  :root[data-theme="light"] .topnav-admin__menu {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   FIM — onda-11-topnav.css
   ============================================================================ */