/* Menu unificado — folha única do aside (Story 8.9 / D14.3).
 *
 * Consolida os estados do menu que estavam espalhados por criaative.css
 * (regras de nav/aside em :19, :28, :34-36, :41, :55, :67, :73-76). O que mora
 * aqui é o CONTRATO VISUAL do menu — item atual, foco, alvo de toque, ícones,
 * mecânica de grupo — nas duas telas: painel legado e Configurações no Next.
 * Larguras e paddings de layout continuam em criaative.css: esta folha carrega
 * depois e vence nos estados, sem duplicar geometria.
 *
 * Nenhum estado usa hex de marca fixo. Item atual = --brand-primary /
 * --brand-on-primary (contrato da 8.7). Foco = --cr-fixed-focus, que NÃO segue
 * a marca: contorno de foco é afordância de acessibilidade, e herdar a cor da
 * empresa faria o indicador herdar contraste arbitrário (WCAG 2.4.7 / 1.4.11).
 * Ver D12.5 v1.1, D15.3 e §2.1 de docs/design/MENU-UNIFICADO.md.
 */

/* Bloco --cr-fixed-*: o que permanece Criaative dentro do espaço da empresa,
 * por decisão e não por esquecimento (D12.3). Primeiro consumidor do prefixo
 * reservado em marca.css. --cr-fixed-focus é a antiga --ui-focus (D15.3),
 * renomeada aqui junto com o bloco que lhe dá sentido. Valor inalterado. */
:root {
  --cr-fixed-focus: #075567; /* contorno de foco — contraste garantido, nunca a marca */
  --cr-fixed-ink: #3d4a4e;   /* texto do rodapé da Criaative */
  --cr-fixed-line: #e6eaea;  /* régua superior do rodapé */
}

/* ---------- Ícones ---------- *
 * Sprite em /assets/icons.svg, consumido por <use>. stroke:currentColor faz o
 * ícone herdar a cor do item: no item atual ele inverte para --brand-on-primary
 * sem nenhuma regra extra. Substitui o stroke:var(--teal) fixo de criaative.css:28. */
.screen-panel nav .area-icon,
.settings-sidebar nav .area-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Os ícones de texto ◇/✦ (criaative.css:19) saem: o sprite os substitui. */
.screen-panel nav > button::before,
.screen-panel nav > a::before,
.screen-panel nav .nav-category::before,
.screen-panel .category-row > .nav-category::before {
  content: none;
}

/* ---------- Item de menu: estados (§2) ---------- */
.screen-panel nav > button,
.screen-panel nav > a,
.screen-panel .nav-subcategories > button,
.screen-panel .nav-subcategories > a,
.settings-sidebar nav a {
  color: var(--ui-text, #35474d);
}

/* Hover usa --brand-soft, substituindo o #f4f6f6 fixo de criaative.css:19. */
.screen-panel nav > button:hover,
.screen-panel nav > a:hover,
.screen-panel .nav-subcategories > button:hover,
.screen-panel .nav-subcategories > a:hover,
.settings-sidebar nav a:hover {
  background: var(--brand-soft, #f4f6f6);
}

/* Item atual: uma regra só para os dois ambientes, com a cor da empresa.
 * Substitui var(--orange)/#fff0e9 de criaative.css:19 e o
 * #e9f3f4!important/#075567!important/box-shadow:inset 3px 0 #0b6475 de :36. */
.screen-panel nav .current,
.screen-panel nav [aria-current='page'],
.settings-sidebar nav [aria-current='page'] {
  background: var(--brand-primary, #0b6475) !important;
  color: var(--brand-on-primary, #fff) !important;
  box-shadow: none;
  font-weight: 600;
}

/* O ícone do item atual acompanha o texto, sem exceção por seletor de área. */
.screen-panel nav .current .area-icon,
.screen-panel nav [aria-current='page'] .area-icon,
.screen-panel nav [aria-current='page'] .area-icon path,
.settings-sidebar nav [aria-current='page'] .area-icon {
  color: var(--brand-on-primary, #fff) !important;
  stroke: currentColor !important;
}

/* Grupo cujo filho é o atual: sinaliza contexto sem competir. Um só item por
 * vez com fundo de marca (§2). */
.screen-panel .category-row:has([aria-current='page']) > .nav-category:not([aria-current='page']),
.settings-sidebar .menu-group:has([aria-current='page']) > .menu-parent:not([aria-current='page']) {
  font-weight: 600;
}

/* ---------- Foco visível (§2.1) ---------- *
 * outline-offset:2px é obrigatório, não decorativo: põe o contorno sobre o
 * fundo branco do menu e não sobre o item. Sobre o item atual, cujo fundo é
 * --brand-primary, um contorno encostado desapareceria (#075567 sobre #BC543F
 * dá 1,8:1; sobre o branco do menu, 8,4:1). */
.screen-panel nav button:focus-visible,
.screen-panel nav a:focus-visible,
.screen-panel .submenu-toggle:focus-visible,
.screen-panel .cr-footer a:focus-visible,
.settings-sidebar nav a:focus-visible,
.settings-sidebar .submenu-toggle:focus-visible,
.cr-footer a:focus-visible {
  outline: 3px solid var(--cr-fixed-focus);
  outline-offset: 2px;
}

/* ---------- Alvo de toque (§2.2) ---------- *
 * 44px em TODO item, inclusive nas subcategorias, que estavam em 40px
 * (criaative.css:41) e por isso não cumpriam WCAG 2.5.5 / 2.5.8. */
.screen-panel nav > button,
.screen-panel nav > a,
.screen-panel .category-row > button:first-child,
.screen-panel .nav-subcategories > button,
.screen-panel .nav-subcategories > a,
.screen-panel .category-row > .submenu-toggle,
.settings-sidebar nav a {
  min-height: var(--ui-target, 44px);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Espaçamento vertical mínimo entre alvos adjacentes: 4px (§2.2). */
.screen-panel .nav-subcategories > button + button,
.screen-panel .nav-subcategories > a + a,
.screen-panel .nav-subcategories > button + a,
.screen-panel .nav-subcategories > a + button {
  margin-top: 4px;
}

/* ---------- Grupos recolhíveis (§4) ---------- */
.screen-panel .category-row > .submenu-toggle,
.settings-sidebar .submenu-toggle {
  flex: none;
  width: var(--ui-target, 44px);
  height: var(--ui-target, 44px);
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ui-text, #35474d);
}

.screen-panel .category-row > .submenu-toggle:hover,
.settings-sidebar .submenu-toggle:hover {
  background: var(--brand-soft, #f4f6f6);
}

/* O chevron gira quando o grupo está aberto. A rotação é do ícone, não do
 * botão, para o alvo de toque não girar junto. */
.submenu-toggle .area-icon {
  transition: transform 0.18s;
}

.submenu-toggle[aria-expanded='true'] .area-icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .submenu-toggle .area-icon {
    transition: none;
  }
}

/* ---------- Logo do menu e da barra mobile (§3) ---------- *
 * Invariante: uma logo da empresa na tela por vez. Nunca zero, nunca duas.
 * O ponto de corte 800px é o mesmo em que criaative.css:23 transforma o aside
 * em painel deslizante — não se inventa breakpoint novo.
 * A troca é dirigida pelo aria-expanded que painel.js já mantém: sem JS novo e
 * sem duplicar o estado numa classe. */
/* A logo do aside: imagem quando a empresa tem uma, nome em texto quando não
 * tem. Os dois nunca aparecem juntos — painel.js esconde a imagem vazia. */
.screen-panel .logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.screen-panel .logo strong {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Com logo cadastrada, o nome em texto sai de cena: a imagem já diz quem é. */
.screen-panel .logo img:not([hidden]) ~ strong,
.screen-panel .header-logo img:not([hidden]) ~ strong {
  display: none;
}

.screen-panel .header-logo {
  display: none;
}

@media (max-width: 800px) {
  .screen-panel .header-logo {
    display: flex;
    align-items: center;
    min-height: var(--ui-target, 44px);
  }

  .screen-panel .header-logo img {
    height: 28px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
  }

  /* Sem logo cadastrada: o nome da empresa em texto. NUNCA o wordmark da
   * Criaative como substituto — isso é vazamento de marca dentro do espaço
   * da empresa (§3.2). */
  .screen-panel .header-logo strong {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }

  /* Menu aberto: a logo da barra some e fica só a do aside. */
  .screen-panel:has(#menu-toggle[aria-expanded='true']) .header-logo {
    display: none;
  }
}

/* ---------- Rodapé único da Criaative (§5, AC8) ---------- *
 * As três telas (painel, /empresas e Configurações) ganham o mesmo rodapé, com
 * APENAS a identificação da Criaative. Cor em --cr-fixed-*, nunca --brand-*:
 * a assinante tem a marca dela no menu; a Criaative assina no rodapé. */
.cr-footer {
  margin-top: 40px;
  padding: 20px 0 24px;
  border-top: 1px solid var(--cr-fixed-line);
  text-align: center;
}

/* Um link só, envolvendo logo e texto: dois links lado a lado para o mesmo
 * destino é ruído para leitor de tela. */
.cr-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--ui-target, 44px);
  padding: 0 10px;
  border-radius: 10px;
  color: var(--cr-fixed-ink);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
}

.cr-footer img {
  height: 19px;
  width: auto;
  /* Monocromática: não pode competir com a marca da empresa. O filter evita
   * um segundo arquivo de imagem só para a versão cinza. */
  filter: grayscale(1) opacity(0.62);
}

.cr-footer a:hover {
  text-decoration: underline;
}

/* ---------- Token .kicker (§6, AC12) ---------- *
 * 12px é o piso de legibilidade que a auditoria adotou (A11Y-001 reprovou 9px);
 * em caixa alta com peso 600 a diferença para 13px some na percepção. O
 * uppercase mora no CSS, não no HTML: o leitor de tela lê palavra normal, não
 * sigla soletrada. letter-spacing relativo acompanha o tamanho. */
.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand-primary, #0b6475);
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 6px;
}

/* ---------- Menu do Next (Configurações) ---------- *
 * O Next ganha a mesma mecânica de grupo que o painel já tinha. */
.settings-sidebar nav a {
  text-decoration: none;
  padding: 10px;
  border-radius: 10px;
}

.settings-sidebar .category-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.settings-sidebar .category-row > a {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}