/* Sidebar: marca, links de navegação, rodapé com user e estado colapsado.

   Camada de vidro flutuante (Fase 1 do plano Apple-style, 2026-08-07) -
   antes era position:sticky, ocupando uma coluna cheia do grid (border-right
   como única "borda"). Agora é position:fixed, flutua com um respiro de
   16px em volta (top/left/bottom), cantos bem arredondados e fundo
   translúcido + backdrop-filter - mesma ideia de "controles/navegação
   acima do conteúdo" da HIG da Apple (Liquid Glass), validada antes no
   protótipo mockups-design/C-apple-glass.html. Largura vem de --side-w
   (definida em .layout/.layout.collapsed, ver layout.css) em vez de um
   valor fixo, pra transicionar junto com o margin-left do .main. */
.side {
  position: fixed;
  top: 16px;
  left: 16px;
  bottom: 16px;
  width: var(--side-w);
  z-index: 40;
  border-radius: var(--radius-xl);
  /* borda com gradiente (adaptado do mockup "Geoex Automations",
     2026-08-08) - truque de 2 backgrounds empilhados: o vidro da sidebar
     em padding-box (preenche por dentro da borda) + --side-border-gradient
     em border-box (só aparece na faixa de 1px da borda, já que border-color
     é transparent) - ver --side-border-gradient em base/tokens.css pro
     valor por tema (colorido/azul no escuro, branco translúcido no claro,
     mesma escolha do mockup original). */
  border: 1px solid transparent;
  background: linear-gradient(var(--side-glass-bg), var(--side-glass-bg)) padding-box,
              var(--side-border-gradient);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  box-shadow: var(--shadow-lg);
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* marca */
.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  position: relative;
}
/* logo oficial da Ally (2026-08-24, v3 - pedido do usuario: removeu o
   subtitulo "Projeto Ally v0.1", e agora e' 1 UNICA imagem por estado -
   sem variante clara/escura (mesmo arquivo nos 2 temas, tanto aqui quanto
   no favicon/login). 2 pseudo-elementos empilhados (position:absolute,
   mesmo canto) - impossivel aparecerem "lado a lado" (bug da v1 com 2
   <img> irmaos, ver historico). Largura do container muda com
   .layout.collapsed (fade+scale sincronizado com o toggle da sidebar,
   mesma duracao/easing de --side em .side). */
.side-brand-mark {
  position: relative;
  width: 92px;
  height: 28px;
  flex-shrink: 0;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.layout.collapsed .side-brand-mark { width: 28px; }

.side-brand-mark::before,
.side-brand-mark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ::before = wordmark "Ally" por extenso - visivel com a sidebar aberta */
.side-brand-mark::before {
  width: 92px;
  height: 26px;
  transform: translateY(-50%) scale(1);
  opacity: 1;
  background-image: url('/static/img/ally-wordmark-blue.png');
}
/* ::after = mesmo glifo do favicon da aba (sem quadrado de fundo) -
   visivel so com a sidebar fechada, centralizado (.side-brand vira coluna
   centralizada em .layout.collapsed, ver regra mais abaixo) */
.side-brand-mark::after {
  width: 28px;
  height: 28px;
  transform: translateY(-50%) scale(0.75);
  opacity: 0;
  background-image: url('/static/img/ally-favicon.png');
}

/* fechado: inverte qual pseudo-elemento fica visivel */
.layout.collapsed .side-brand-mark::before { opacity: 0; transform: translateY(-50%) scale(0.75); }
.layout.collapsed .side-brand-mark::after  { opacity: 1; transform: translateY(-50%) scale(1); }

/* botão de toggle */
.side-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.side-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-card-hov); }
.side-toggle svg   { width: 13px; height: 13px; transition: transform 0.25s ease; }

/* navegação */
.side-section { padding: 8px 12px 0; }
.side-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
  margin: 14px 6px 8px;
  font-weight: 600;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--radius-md); /* 2026-09-01: era 7px, meio quadrado
    perto dos cards/paineis do resto do app (que usam --radius-md em geral,
    ver tokens.css) - alinhado aqui pro item ativo (e o hover) curvar igual */
  color: var(--text-dim);
  font-size: 13.5px;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 1px;
}
.side-link:hover         { background: var(--bg-card-hov);  color: var(--text); }
/* item ativo: fundo suave (já existia) + sombra/anel sutil (adaptado do
   mockup "Geoex Automations", 2026-08-08) - anel INTERNO com a cor de
   acento (efeito "vidro iluminado por dentro") + uma sombra externa mais
   escura, só perceptível no tema escuro (contra fundo claro esse combo
   fica pesado/sujo em vez de sutil - mesma escolha do mockup original,
   que também zera esse efeito no tema claro). */
.side-link.active {
  background: var(--accent-soft);
  color: var(--text);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(78, 125, 255, 0.35);
}
[data-theme="light"] .side-link.active { box-shadow: none; }
.side-link.active svg    { color: var(--accent); }
.side-link svg           { width: 16px; height: 16px; color: var(--text-faint); flex-shrink: 0; }
.side-link .badge {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text-faint);
  background: var(--bg);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  font-weight: var(--fw-medium);
  font-family: var(--font-mono);
}

/* rodapé */
.side-footer {
  margin-top: auto;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Toggle de tema dentro do rodapé: reaproveita a aparência do .side-link,
   mas é um <button>, não um <a> — zera os estilos nativos de botão que o
   .side-link (pensado pra âncora) não cobre. */
.side-toggle-theme {
  background: none;
  border: none;
  width: 100%;
  font: inherit;
  text-align: left;
}
.side-toggle-theme .icone-claro,
.side-toggle-theme .icone-escuro { width: 16px; height: 16px; color: var(--text-faint); flex-shrink: 0; }

.side-user { display: flex; align-items: center; gap: 10px; }
.side-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
}
.side-user-meta { display: flex; flex-direction: column; min-width: 0; }
.side-user-name {
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  /* nome (ou e-mail, no fallback) pode ser mais comprido que a sidebar -
     trunca com "..." em vez de quebrar linha e empurrar o status/logout. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-user-mode {
  color: var(--text-faint);
  font-size: 10.5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.side-user-mode::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok);
}
.side-logout {
  margin-left: auto;
  color: var(--text-faint);
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.side-logout:hover { color: var(--text); background: var(--bg-card-hov); }
.side-logout svg   { width: 15px; height: 15px; }

/* estado colapsado — a largura em si (64px) vem de --side-w
   (.layout.collapsed em layout.css); aqui só o que muda de aparência
   dentro da sidebar quando ela fica estreita. */
.layout.collapsed .side-link > span:not(.badge),
.layout.collapsed .side-link .badge,
.layout.collapsed .side-user-meta,
.layout.collapsed .side-logout { opacity: 0; pointer-events: none; width: 0; display: none; }
/* colapsado: empilha logo + botão de toggle verticalmente, centralizados,
   para não ficarem espremidos lado a lado na coluna de 64px */
.layout.collapsed .side-brand       { flex-direction: column; justify-content: center; align-items: center; padding: 0 0 18px; gap: 10px; }
/* colapsado, o toggle vira um botão avulso empilhado embaixo do logo (não
   mais encostado na borda do card de marca) - a caixa quadrada de canto
   quase reto (6px, herdado do estado expandido) destoava do resto da
   sidebar flutuante/vidro (cantos bem arredondados) - vira um círculo
   completo, mesmo padrão de botão-ícone pequeno isolado usado em outros
   cantos do sistema (pedido do usuário 2026-08-07, com print: "essa seta
   embaixo quando fechado" ficava esquisita). */
.layout.collapsed .side-toggle      { position: static; transform: none; width: 30px; height: 30px; border-radius: var(--radius-full); }
.layout.collapsed .side-section     { padding: 8px 8px 0; }
.layout.collapsed .side-link        { justify-content: center; padding: 10px; gap: 0; position: relative; }
.layout.collapsed .side-link svg    { margin: 0; }
.layout.collapsed .side-toggle svg  { transform: rotate(180deg); }
.layout.collapsed .side-footer      { padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.layout.collapsed .side-toggle-theme { justify-content: center; padding: 8px; gap: 0; }
.layout.collapsed .side-toggle-theme span { display: none; }
.layout.collapsed .side-user        { justify-content: center; gap: 0; }
.layout.collapsed .side-section-title {
  margin: 14px 0 8px;
  height: 1px;
  background: var(--border);
  font-size: 0;
  letter-spacing: 0;
  color: transparent;
  padding: 0;
  width: 100%;
  display: block;
  opacity: 0.6;
}
/* tooltip ao hover no estado colapsado */
.layout.collapsed .side-link::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 50;
}
.layout.collapsed .side-link:hover::after { opacity: 1; }

/* =====================================================================
   Responsivo — sidebar como gaveta (drawer) no celular.
   Até 768px a sidebar sai do fluxo e vira um painel deslizante: um botão
   hambúrguer fixo a abre e um backdrop escuro a fecha. O JS (base.html)
   remove a classe .collapsed no mobile, então o modo "só ícones" não se
   aplica aqui — a gaveta é sempre completa, com rótulos.
   ===================================================================== */

/* botão hambúrguer e backdrop ficam ocultos no desktop */
.nav-open-btn { display: none; }
.nav-backdrop { display: none; }

/* trava o scroll do fundo enquanto a gaveta está aberta */
body.nav-locked { overflow: hidden; }

@media (max-width: 768px) {
  /* o main ocupa toda a largura — a gaveta é sobreposta a ele, não mais
     uma coluna do grid (a sidebar flutuante desktop usa margin-left, ver
     .main em layout.css - aqui zera pro celular). */
  .main { margin-left: 0; }

  /* sidebar vira gaveta off-canvas, escondida à esquerda - encosta nas
     bordas (sem o respiro/cantos arredondados da versão flutuante
     desktop) e ocupa a altura toda, então zera bottom/border-radius que
     a versão desktop define. */
  .side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: auto;
    width: 248px;
    max-width: 84vw;
    height: 100vh;
    height: 100dvh;
    z-index: 70;
    border-radius: 0;
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  .layout.nav-open .side {
    transform: translateX(0);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  }

  /* o toggle de "recolher" não faz sentido dentro da gaveta */
  .side-toggle { display: none; }

  /* backdrop escuro clicável atrás da gaveta */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 65;
  }
  .layout.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* botão hambúrguer fixo no canto superior esquerdo */
  .nav-open-btn {
    display: inline-flex;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 60;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  .nav-open-btn:hover {
    background: var(--bg-card-hov);
    border-color: var(--border-strong);
  }
  .nav-open-btn svg { width: 18px; height: 18px; }
}