/*
 * Redesign — Etapa 2: Sidebar e Header.
 *
 * Escopado inteiramente a body[data-theme-preset="dark"] (decisao do
 * cliente: o preset claro nao recebe o novo visual). Usa os tokens
 * --ds-* definidos em design-tokens.css (Etapa 1).
 *
 * Cuidado de escopo: --docs-sidebar-bg e --app-header-bg-color NAO sao
 * sobrescritas aqui via variavel porque --app-canvas-bg (usado no fundo
 * da area de conteudo principal, fora do escopo desta etapa) cai em
 * fallback nelas (ver app-layout.css:9 `--app-canvas-bg: var(--docs-
 * sidebar-bg, var(--app-header-bg-color, #0a1220))`). Pra nao vazar
 * pro conteudo principal antes da hora (isso e' trabalho da Etapa 3+),
 * o fundo da sidebar/header e aplicado direto nos seletores
 * (`.docs-sidebar`, `header`), nunca redefinindo essas duas variaveis
 * compartilhadas.
 *
 * O sistema hoje roda em modo de sidebar "docs" (nav_menu_style=docs no
 * banco - confirmado antes de escrever este arquivo), entao o alvo real
 * e docs-sidebar.css, nao o pro-ui.css/app-sidebar "classico".
 */

body[data-theme-preset="dark"] {
  /* Sidebar (docs mode) - variaveis exclusivas da sidebar, sem fallback
     pra --app-canvas-bg, seguras de sobrescrever direto. */
  --docs-sidebar-accent: var(--ds-sidebar-accent-foreground);
  --docs-sidebar-accent-bright: var(--ds-sidebar-accent-foreground);
  --docs-sidebar-active-bg: var(--ds-sidebar-accent);
  --docs-sidebar-hover-row: color-mix(in srgb, var(--ds-sidebar-accent) 60%, transparent);
  --docs-sidebar-hover-link: color-mix(in srgb, var(--ds-sidebar-accent) 60%, transparent);
  --docs-sidebar-radius: var(--ds-radius-md);
  --docs-sidebar-font: 14px;
  --docs-sidebar-font-nested: 13px;
  --docs-sidebar-item-py: 8px;
  --docs-sidebar-item-px: 12px;
  --docs-sidebar-item-gap: 2px;
  --docs-sidebar-text-shadow: none;
  --docs-sidebar-width: var(--ds-sidebar-width);
  --ui-sidebar-width: var(--ds-sidebar-width);
  --docs-sidebar-width: var(--ds-sidebar-width);

  /* Header/topbar - compartilhado com a altura da faixa da logo na sidebar */
  --ui-topbar-height: var(--ds-header-height);
}

/* Fundo da sidebar - direto no seletor, nao na variavel (ver nota acima) */
body[data-theme-preset="dark"] .docs-sidebar {
  background: var(--ds-sidebar) !important;
}
/* SEM border-right aqui de proposito: a sidebar e' sticky e comeca do
   y=0 da tela (por baixo da faixa do cabecalho), entao essa borda
   "vazava" visualmente pra dentro do cabecalho quando a pagina rolava
   - virava uma linha estranha cortando a faixa do topo. O sistema ja
   tem OUTRA linha divisoria pra isso (app-layout.css, pseudo-elemento
   .app-layout::after), que nasce corretamente ABAIXO do cabecalho -
   so' precisava ter a cor atualizada (ver regra abaixo). */
body[data-theme-preset="dark"] .app-layout::after {
  background: var(--ds-sidebar-border) !important;
}
body[data-theme-preset="dark"] .docs-sidebar__link-inner,
body[data-theme-preset="dark"] .docs-sidebar__category-title {
  color: var(--ds-sidebar-foreground);
  font-weight: 400;
}
body[data-theme-preset="dark"] .docs-sidebar__link.is-active .docs-sidebar__link-inner,
body[data-theme-preset="dark"] .docs-sidebar__category.is-active-branch > .docs-sidebar__category-head .docs-sidebar__category-title {
  font-weight: 500;
}
body[data-theme-preset="dark"] .docs-sidebar__brand-link {
  color: var(--ds-foreground);
}
/* Linha vertical guia conectando os itens do submenu (Financeiro >
   Receita/Despesas/Boletos/Bancos/Cartões etc.) - pedido explicito do
   cliente, apontado com seta na imagem. Nao existia nenhuma linha real
   antes, so' o alinhamento do padding-left parecia uma. */
body[data-theme-preset="dark"] .docs-sidebar__panel-inner {
  border-left: none;
  margin-left: 20px;
  position: relative;
}
body[data-theme-preset="dark"] .docs-sidebar__panel-inner::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--ds-sidebar-border) 18%,
    var(--ds-sidebar-border) 82%,
    transparent
  );
}

/* Header - mesmo cuidado: aplicado direto no seletor <header>, nao via --app-header-bg-color */
body[data-theme-preset="dark"] header {
  background: var(--ds-bg) !important;
  border-bottom: 1px solid var(--ds-border);
}
/* Celula da logo (.sidebar-header/.app-layout__brand) fica ao lado do
   <header> mas e' uma <div>, nao pega a regra acima - ficava com um
   fundo levemente diferente (--app-canvas-bg, nao migrado), criando
   uma linha de costura visivel entre a logo e o header. Mesma cor dos
   dois lados agora. */
body[data-theme-preset="dark"] .app-layout__brand,
body[data-theme-preset="dark"] .sidebar-header {
  background: var(--ds-bg) !important;
}
/* Linha vertical continua sidebar/conteudo: em vez de tentar alinhar
   DUAS bordas separadas no pixel (uma na celula da logo, outra no
   pseudo-elemento abaixo do cabecalho - nunca bateu certo, ficava
   com uma "quebra" onde uma encontra a outra), uma UNICA linha
   (.app-layout::after, que ja existia) agora cobre da altura 0 ate
   embaixo. Fonte unica = sem risco de desalinhamento. */
body[data-theme-preset="dark"] .app-layout::after {
  top: 0 !important;
  /* z-index original (5) e' menor que o da sidebar (90) e do
     cabecalho (100) - a linha ficava coberta/escondida atras deles.
     Precisa ficar por cima dos dois pra aparecer de verdade. */
  z-index: 200 !important;
}
/* Figma: a celula da logo tem border-b border-sidebar-border separando
   ela do menu de navegacao logo abaixo (h-14 ... border-b). Aqui a
   celula da logo e' um elemento irmao, empilhado sobre a sidebar (nao
   aninhado dentro dela), mas visualmente e' a mesma composicao - falta
   essa linha divisoria. */
body[data-theme-preset="dark"] .app-layout__brand,
body[data-theme-preset="dark"] .sidebar-header {
  border-bottom: 1px solid var(--ds-sidebar-border);
}
body[data-theme-preset="dark"] .header-user-chip {
  background: var(--ds-secondary) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-lg) !important;
  color: var(--ds-foreground) !important;
  /* Base rule usa min-height:36px - a pilula do filtro/Limpar filtro
     usa 34px. 2px de diferenca ficava visivel comparando de perto. */
  min-height: 34px !important;
}
body[data-theme-preset="dark"] .header-user-menu.is-open .header-user-chip,
body[data-theme-preset="dark"] button.header-user-chip:hover {
  background: var(--ds-secondary) !important;
  border-color: color-mix(in srgb, var(--ds-accent) 30%, transparent) !important;
}
body[data-theme-preset="dark"] .header-user-avatar {
  background: var(--ds-primary) !important;
  color: var(--ds-primary-foreground) !important;
  /* base rule (index.php:12470) usa 28x28 - Figma usa w-6 h-6 (24x24) */
  width: 24px !important;
  height: 24px !important;
  font-size: 10px !important;
}
body[data-theme-preset="dark"] .header-user-menu-panel {
  background: var(--ds-popover) !important;
  border: 1px solid var(--ds-border) !important;
}
/* Cabecalho novo do dropdown (avatar grande + nome + email), pedido
   explicito do cliente com referencia visual. So' existe dentro do
   painel (renderHeaderUserChip()), sem tocar em nenhuma logica -
   e-mail ja vinha disponivel em currentUser(). */
body[data-theme-preset="dark"] .header-user-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
}
body[data-theme-preset="dark"] .header-user-avatar.header-user-avatar--lg {
  width: 40px !important;
  height: 40px !important;
  font-size: 14px !important;
}
body[data-theme-preset="dark"] .header-user-menu-header-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
body[data-theme-preset="dark"] .header-user-menu-header-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-theme-preset="dark"] .header-user-menu-email {
  font-size: 11px;
  color: var(--ds-muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Seta do grupo (Financeiro/Sistemas/Servicos) quando aberto/ativo
   ficava com uma "caixa" atras (fundo + sombra + peso maior) diferente
   dos outros grupos - forcando tudo neutro e na mesma cor apagada dos
   demais, sem negrito. */
body[data-theme-preset="dark"] .docs-sidebar__caret,
body[data-theme-preset="dark"] .docs-sidebar__category.is-open > .docs-sidebar__category-head .docs-sidebar__caret,
body[data-theme-preset="dark"] .docs-sidebar__category.is-active-branch > .docs-sidebar__category-head .docs-sidebar__caret {
  background: transparent !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--ds-sidebar-foreground) 70%, transparent) !important;
}
body[data-theme-preset="dark"] .docs-sidebar__caret-icon {
  filter: none !important;
  color: inherit !important;
  width: 13px !important;
  height: 13px !important;
}
/* :hover tinha color:#fff !important hardcoded (docs-sidebar.css) -
   forcando a mesma cor apagada tambem no hover, pra nao virar branco/
   ciano so' porque o mouse passou por cima. */
body[data-theme-preset="dark"] .docs-sidebar__caret:hover {
  background: transparent !important;
  color: color-mix(in srgb, var(--ds-sidebar-foreground) 70%, transparent) !important;
}
body[data-theme-preset="dark"] .docs-sidebar__category.is-open > .docs-sidebar__category-head .docs-sidebar__category-title,
body[data-theme-preset="dark"] .docs-sidebar__category.is-active-branch > .docs-sidebar__category-head .docs-sidebar__category-title {
  text-shadow: none !important;
}
/* Seta do "Administrador": era o caractere de texto "▾" (peso/formato
   diferente por fonte/SO) - agora e' svg, precisa de tamanho/alinhamento. */
body[data-theme-preset="dark"] .header-user-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* opacity:.75 (base rule, index.php) era da epoca do "▾" em texto -
     somava com a cor ja apagada do svg, ficando mais escuro que a
     seta do calendario. */
  opacity: 1;
}
body[data-theme-preset="dark"] .header-user-caret svg {
  width: 13px;
  height: 13px;
  transition: transform .15s ease;
  /* .header-user-chip herda color:var(--ds-foreground) (mais claro) -
     a seta do calendario usa --ds-muted-foreground. Igualando. */
  color: var(--ds-muted-foreground);
}
body[data-theme-preset="dark"] .header-user-menu.is-open .header-user-caret svg {
  transform: rotate(180deg);
}


/*
 * Fix global (padrao pra todas as paginas, nao so' Dashboard): a
 * Dashboard usa scroll interno proprio no .app-layout__main
 * (overflow-y:auto, ver redesign-dashboard-master.css) - esse
 * scrollbar interno aparece/desaparece dependendo da altura do
 * conteudo (quantos cards/graficos cabem), e como nao reservava
 * espaco fixo, empurrava o conteudo uns px pra esquerda so' quando
 * aparecia - diferente das outras paginas, que rolam pelo <html>
 * (esse sim ja tem scrollbar-gutter:stable, app-layout.css:556).
 * Reservando o gutter aqui tambem deixa a largura do conteudo
 * consistente em qualquer pagina, tenha ou nao scroll interno.
 * Nao afeta paginas sem overflow:auto/scroll nesse elemento (regra so'
 * tem efeito visual quando o overflow computado permite scroll).
 */
body[data-theme-preset="dark"] .app-layout__main {
  scrollbar-gutter: stable;
}


/*
 * Widget de status/pausa do atendente, adicionado ao lado do menu de
 * usuario no header (pedido do cliente: mostrar status de
 * disponibilidade - "Online"/"Banheiro"/etc - referencia visual
 * "Witcom - Online / PAUSAS"). Mesmo tratamento visual dos tokens
 * --ds-* ja aplicado em .header-user-chip/.header-user-menu-panel
 * acima, pra ficar consistente.
 */
body[data-theme-preset="dark"] .header-status-chip {
  background: var(--ds-secondary) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-lg) !important;
  color: var(--ds-foreground) !important;
  min-height: 34px !important;
}
body[data-theme-preset="dark"] button.header-status-chip:hover,
body[data-theme-preset="dark"] button.header-status-chip[aria-expanded="true"] {
  background: var(--ds-secondary) !important;
  border-color: color-mix(in srgb, var(--ds-accent) 30%, transparent) !important;
  color: var(--ds-foreground) !important;
}
body[data-theme-preset="dark"] .header-status-menu-panel {
  background: var(--ds-popover) !important;
  border: 1px solid var(--ds-border) !important;
}
body[data-theme-preset="dark"] .header-status-menu-sep-label {
  color: var(--ds-muted-foreground);
  opacity: 1;
}
body[data-theme-preset="dark"] button.header-status-menu-item:hover {
  background: color-mix(in srgb, var(--ds-accent) 16%, transparent) !important;
  color: var(--ds-foreground) !important;
}
body[data-theme-preset="dark"] .header-status-caret {
  color: var(--ds-muted-foreground);
}

/* 2026-09-09 (v2) - contador ("bolinha com numero") de conversas de Suporte
   aguardando resposta, no item de menu correspondente. Posicionamento
   absoluto: funciona nos dois estilos de menu (classic e docs). Alimentado
   por assets/js/suporte-nav-badge.js -> ...?acao=badge. Generico: vale pra
   qualquer item que ganhe um [data-nav-badge]. */
#app-side-nav a.docs-sidebar__link,
#app-side-nav nav a { position: relative; }
#app-side-nav .docs-sidebar__link-inner { position: relative; }

#app-side-nav .nav-badge {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  z-index: 2;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .28);
  pointer-events: none;
}
#app-side-nav .nav-badge[hidden] { display: none; }