/* hq/css/sidebar.css - sidebar canonica do HQ, mesmo padrao do WGEasy
   (frontend/src/styles/wg-sidebar.css: breakpoint 768px, drawer off-canvas
   + overlay no mobile, accordion de submenu), reescrita em CSS puro e com
   a paleta da Andreia Viana (--av-*) no lugar da laranja do WGEasy. */

/* 248px = largura real da sidebar; +40px de respiro pro conteudo nao
   encostar na borda (mesmo valor do padding lateral/vertical que cada
   pagina ja usa nos outros 3 lados). Achado real do cliente (print
   2026-07-08 09:15): "sem espacamento diagramacao dos blocos".
   Largura subiu de 220 -> 248px (2026-07-20) para o rotulo mais longo
   ("Respostas Automaticas", 22 chars) caber em UMA linha sem quebrar,
   junto com white-space: nowrap nos links/secoes abaixo. */
body {
  padding-left: 288px;
}

.wg-sidebar {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 248px;
  background: var(--av-bg-card);
  border-right: 1px solid var(--av-border);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 40;
  transition: left 0.2s ease;
}
.wg-sidebar * {
  box-sizing: border-box;
}

.wg-sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

/* Lockup horizontal (icone + wordmark lado a lado) - substitui a versao
   empilhada do manual de marca, que so define o formato vertical. Mesmos
   assets extraidos oficialmente (favicon-andreia-viana.png), so recompostos
   horizontalmente; o wordmark e texto real (nao imagem) na mesma fonte da
   marca, para caber com nitidez nos 220px da sidebar. */
.wg-sidebar-brand-lockup {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.wg-sidebar-brand-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.wg-sidebar-brand-word {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--av-roxo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wg-sidebar-close {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--av-text-muted);
  cursor: pointer;
}

.wg-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Ocupa o espaco entre a marca e o botao de recolher, e rola internamente
     quando os itens do menu passam da altura da tela (min-height:0 e o que
     permite o flex item encolher e ativar o scroll). */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Titulo de grupo (rotulo, sem link) - adicionado via Modo Edicao para
   organizar itens de menu relacionados sob um cabecalho visual. */
.wg-sidebar-group-label {
  margin: 14px 12px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--av-text-muted);
}

.wg-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--av-radius-sm);
  color: var(--av-text-muted);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.wg-sidebar-link:hover {
  background: var(--av-bg);
}
.wg-sidebar-link.active {
  color: var(--av-roxo);
  font-weight: 600;
  background: var(--av-border);
}

/* Icone Material Symbols Outlined por item de menu (2026-07-08) - padrao
   canonico de HQ zero-build do ecossistema WG (ver hq/css/brand.css).
   Substituiu o chip textual de 2 letras provisorio. So aparece sozinho
   quando a sidebar esta recolhida; expandida, fica ao lado do rotulo. */
.wg-sidebar-link-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--av-roxo);
  font-size: 18px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wg-sidebar-link.active .wg-sidebar-link-icon {
  background: var(--av-roxo);
  color: #fff;
}

.wg-sidebar-section-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--av-radius-sm);
  background: none;
  border: none;
  color: var(--av-text-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.wg-sidebar-section-head-label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
}
.wg-sidebar-section-head:hover {
  background: var(--av-bg);
}
.wg-sidebar-chevron {
  transition: transform 0.15s ease;
}
.wg-sidebar-section-head[aria-expanded="true"] .wg-sidebar-chevron {
  transform: rotate(90deg);
}

.wg-sidebar-subnav {
  display: none;
  flex-direction: column;
  padding-left: 12px;
  gap: 2px;
}
.wg-sidebar-subnav.open {
  display: flex;
}

.wg-mobile-toggle {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 50;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--av-border);
  background: var(--av-bg-card);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.wg-mobile-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--av-text);
  border-radius: 2px;
}

.wg-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(42, 32, 51, 0.35);
  backdrop-filter: blur(3px);
  z-index: 30;
}
.wg-sidebar-overlay.open {
  display: block;
}

/* Botao de recolher/expandir - fixo no rodape da sidebar, sempre visivel. */
.wg-sidebar-collapse-toggle {
  margin-top: auto;
  align-self: flex-end;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--av-border);
  background: var(--av-bg-card);
  color: var(--av-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.wg-sidebar-collapse-toggle:hover {
  background: var(--av-bg);
  color: var(--av-roxo);
}

/* Sidebar recolhida (2026-07-08) - largura reduzida a um trilho de icones;
   preferencia por navegador via localStorage (ajuste de tela, nao dado de
   negocio, por isso nao vai pro Supabase). Desativada em mobile (a sidebar
   ja vira drawer off-canvas la, recolher nao faz sentido junto). */
body.wg-sidebar-collapsed {
  padding-left: 92px;
}
body.wg-sidebar-collapsed .wg-sidebar {
  width: 72px;
  padding: 24px 12px;
}
body.wg-sidebar-collapsed .wg-sidebar-brand {
  justify-content: center;
}
body.wg-sidebar-collapsed .wg-sidebar-brand-word,
body.wg-sidebar-collapsed .wg-sidebar-link-label,
body.wg-sidebar-collapsed .wg-sidebar-section-head-label,
body.wg-sidebar-collapsed .wg-sidebar-chevron,
body.wg-sidebar-collapsed .wg-sidebar-group-label,
body.wg-sidebar-collapsed .wg-sidebar-subnav {
  display: none;
}
body.wg-sidebar-collapsed .wg-sidebar-link,
body.wg-sidebar-collapsed .wg-sidebar-section-head {
  justify-content: center;
  padding: 10px;
}
body.wg-sidebar-collapsed .wg-sidebar-collapse-toggle {
  align-self: center;
}

@media (max-width: 768px) {
  body.wg-sidebar-collapsed {
    padding-left: 0;
  }
  body.wg-sidebar-collapsed .wg-sidebar {
    width: 240px;
    padding: 24px 16px;
  }
  body.wg-sidebar-collapsed .wg-sidebar-brand-word,
  body.wg-sidebar-collapsed .wg-sidebar-link-label,
  body.wg-sidebar-collapsed .wg-sidebar-section-head-label,
  body.wg-sidebar-collapsed .wg-sidebar-chevron,
  body.wg-sidebar-collapsed .wg-sidebar-group-label {
    display: revert;
  }
  body.wg-sidebar-collapsed .wg-sidebar-subnav.open {
    display: flex;
  }
  body.wg-sidebar-collapsed .wg-sidebar-collapse-toggle {
    display: none;
  }
}

@media (max-width: 768px) {
  body {
    padding-left: 0;
    padding-top: 72px;
  }
  .wg-mobile-toggle {
    display: flex;
  }
  .wg-sidebar {
    left: -260px;
    width: 240px;
    box-shadow: 2px 0 24px rgba(42, 32, 51, 0.12);
  }
  .wg-sidebar.open {
    left: 0;
  }
  .wg-sidebar-close {
    display: block;
  }
}