/* ─────────────────────────────────────────────────────────────────────────────────────────────
   sidebar.css — estilo da sidebar compartilhada (markup injetado por /js/sidebar.js).

   Até 25/09/2026 este CSS era uma string dentro de sidebar.js, injetada em runtime depois do
   <style> de cada página. Virou arquivo linkado no <head> (depois de /css/dashboard.css), o que
   inverte a ordem: agora o <style> inline das páginas vem DEPOIS e venceria qualquer empate de
   especificidade. Por isso as poucas regras que precisam ganhar de CSS de página (padding da
   .topbar) usam "body .topbar" (especificidade maior) em vez de depender da ordem.
   Usa os tokens de dashboard.css (--text, --border2...), que precisa estar linkado antes.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

.sidebar{width:var(--sidebar-w,224px);min-height:100vh;background:linear-gradient(160deg,#fbe3e0 0%,#f6e9ec 45%,#eef1fb 100%);
  border-right:1px solid rgba(28,43,57,.08);display:flex;flex-direction:column;padding:22px 0;
  position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:200;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.sidebar-header{display:flex;justify-content:flex-end;padding:4px 10px 0}
.sidebar-close-btn{width:32px;height:32px;border-radius:8px;border:none;background:transparent;color:rgba(28,43,57,.5);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:15px;transition:background .15s,color .15s}
.sidebar-close-btn:hover{background:rgba(28,43,57,.08);color:rgba(28,43,57,.85)}
.brand{display:flex;align-items:center;gap:11px;padding:0 20px 22px;margin-bottom:14px;border-bottom:1px solid rgba(28,43,57,.08)}
.brand-mark{width:34px;height:34px;border-radius:10px;object-fit:cover;flex-shrink:0}
.brand-text{display:flex;flex-direction:column;line-height:1.3}
.brand-name{font-size:14px;font-weight:700;color:#1c2b39}
.brand-sub{font-size:12px;color:#5d6a77}

/* ── Seletor de marca (DashboardBrand em js/sidebar.js). Fica na sidebar, não na topbar de cada
   página: marca é o contexto de tudo que se vê, diferente de país/período, que são filtros de
   análise e continuam por página. É o mesmo componente UI.select da topbar (mesmo .filter-pill/
   .csel-pop), só esticado na largura da sidebar. ── */
.brand-switch{padding:0 12px;margin:-4px 0 18px}
.brand-switch .csel{width:100%}
.brand-switch .filter-pill{width:100%;justify-content:flex-start;background:rgba(255,255,255,.7);border-color:rgba(28,43,57,.14);padding:0 12px}
.brand-switch .filter-pill:hover{background:#fff;border-color:rgba(28,43,57,.3)}
.brand-switch .filter-pill .val{flex:1;min-width:0}
.brand-switch .filter-pill .val .opt-label{overflow:hidden;text-overflow:ellipsis}
.brand-switch .csel-pop{left:0;right:0;min-width:0}
/* A marca aparece só pelo logo, na pill e na lista (30/09/2026). O nome continua no HTML, escondido
   só visualmente (mesmas regras de .sr-only), pra leitor de tela seguir dizendo qual marca é. Marca
   sem logo, ou com logo que não carregou (.logo-missing, ver hideBrokenImages em ui.js), mostra o
   nome normalmente. */
.brand-switch img.opt-logo{height:18px;max-width:120px}
.brand-switch .csel-opt:has(img.opt-logo):not(.logo-missing) .opt-label,
.brand-switch .filter-pill .val:has(img.opt-logo):not(.logo-missing) .opt-label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand-switch .csel-opt{min-height:40px}

/* Aviso de marca sem conexão, injetado abaixo da .topbar em qualquer página (renderBrandNotice). */
.brand-not-connected{display:flex;align-items:flex-start;gap:10px;margin:var(--sp-4,16px) var(--sp-8,32px) 0;padding:12px 14px;
  border:1px solid #f0d48a;background:#fdf6e3;color:#6b5514;border-radius:11px;font-size:13px;line-height:1.5}
.brand-not-connected i{font-size:15px;line-height:1.3;flex-shrink:0}

.nav-group{margin-bottom:22px;padding:0 12px}
.nav-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5d6a77;padding:0 10px;margin-bottom:6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:500;color:#1c2b39;
  cursor:pointer;transition:background .15s,color .15s;text-decoration:none}
.nav-item:hover{background:rgba(28,43,57,.07)}
.nav-item.active{background:#1c2b39;color:#fff}
.nav-icon{font-size:14px;width:16px;text-align:center;flex-shrink:0;opacity:.85}
.sidebar-open-btn{display:none;position:fixed;left:14px;top:14px;z-index:300;width:36px;height:36px;border-radius:9px;
  border:1px solid var(--border2);background:var(--surface);color:var(--sub);cursor:pointer;align-items:center;
  justify-content:center;font-size:17px;box-shadow:0 2px 10px rgba(28,43,57,.12)}
body.sidebar-hidden .sidebar-open-btn{display:flex}
body.sidebar-mobile-open .sidebar-open-btn{display:none!important}
.sidebar-overlay{position:fixed;inset:0;background:rgba(28,43,57,.4);z-index:150;opacity:0;pointer-events:none;transition:opacity .2s}
body.sidebar-mobile-open .sidebar-overlay{opacity:1;pointer-events:auto}
body.sidebar-mobile-open .sidebar{transform:translateX(0)!important}
body.sidebar-hidden .sidebar{transform:translateX(-100%)}

/* O botão de abrir a sidebar é position:fixed no canto superior esquerdo, por cima de qualquer
   página. Sempre que ele aparece (mobile sempre; desktop com a sidebar minimizada) ele ficava em
   cima do título do .topbar (bug real encontrado pelo Luan em 24/07/2026). "body .topbar" em vez
   de ".topbar": este arquivo vem antes do <style> das páginas, então precisa de especificidade
   maior pra ganhar do ".topbar{padding:...}" de cada uma. */
body.sidebar-hidden .topbar{padding-left:64px}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar-open-btn{display:flex}
  body .topbar{padding-left:64px}
  .brand-not-connected{margin:14px 16px 0}
}