/* ============================================================
   BARRA LATERAL E A CASCA DO HUB
   ============================================================
   Carregado só pelas telas do hub, depois do app.css — as ferramentas têm
   esqueleto próprio e não têm barra.

   Fica em arquivo separado do app.css por dois motivos: é a única parte do
   hub que governa o *enquadramento* da página (quem rola, quem fica parado),
   e o app.css já é longo o bastante para que uma seção nova se perca nele.
   ============================================================ */

:root {
  --sidebar-w: 268px;
  /* O trilho recolhido: ícone de 18px, área de toque de 40px e a folga que
     mantém tudo centrado sem encostar na borda. */
  --sidebar-rail: 68px;
}

/* ── A casca ─────────────────────────────────── */
/* A página deixa de rolar; quem rola é a coluna do conteúdo. Sem isto a
   barra sobe junto com o texto e a navegação some na primeira rolagem — e
   "recolher para ampliar a visualização" não significaria nada, porque a
   barra já teria saído da tela sozinha.

   `dvh` depois de `vh`: no celular a barra de endereço do navegador entra e
   sai da conta do `vh`, e a casca ficaria alta demais enquanto ela está
   recolhida. Quem não conhece `dvh` fica com o `vh`, que erra por pouco. */
body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* O cabeçalho não encolhe. Numa casca de altura fixa ele é um item flex como
   os outros, e cederia altura para o conteúdo que não couber. */
body > .vh-header { flex: none; }

.app-shell {
  flex: 1;
  display: flex;
  /* `min-height: 0` senão o flex recusa encolher a casca abaixo do conteúdo
     e a rolagem vaza para a página, que é justamente o que se tirou. */
  min-height: 0;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* ── A barra ─────────────────────────────────── */
.sidebar {
  flex: none;
  z-index: 30;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-0);
  border-right: 1px solid var(--border-1);
  font-family: var(--font-sans);
  transition: width var(--dur-2) var(--ease-standard);
}
[data-sidebar="collapsed"] .sidebar { width: var(--sidebar-rail); }

/* A lista rola sozinha: uma carteira de trinta empresas aberta não pode
   empurrar o botão de recolher para fora da tela. */
.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
}

/* ── Um item ─────────────────────────────────── */
.sidebar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-1), color var(--dur-1);
}
.sidebar-item:hover { background: var(--surface-overlay); color: var(--fg-1); }
.sidebar-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Onde a pessoa está: fundo mais forte e um talo roxo na borda esquerda. Só
   a cor do texto não marcaria o suficiente numa lista de itens do mesmo
   tamanho, corrida de cima a baixo. */
.sidebar-item.is-active,
.sidebar-sub-item.is-active {
  background: var(--surface-overlay-strong);
  color: var(--fg-1);
}
.sidebar-item.is-active::before,
.sidebar-sub-item.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.sidebar-item.is-active .sidebar-icon { color: var(--accent); }

.sidebar-icon {
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px;
}
.sidebar-icon svg { width: 18px; height: 18px; }

/* Nome de empresa e nome de ferramenta são longos; a barra é estreita por
   opção. Uma linha, cortada — o inteiro está no `title`. */
.sidebar-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── O grupo de empresas ─────────────────────── */
/* `<details>`: contrai e expande sem uma linha de JavaScript, como os anos
   da lista de cronogramas. O triângulo nativo sai — não acompanha a
   tipografia da plataforma —, e entra a mesma seta de lá. */
.sidebar-group > summary { list-style: none; }
.sidebar-group > summary::-webkit-details-marker { display: none; }

.sidebar-caret {
  flex: none;
  width: 13px; height: 13px;
  color: var(--fg-3);
  transition: transform var(--dur-1);
}
.sidebar-group[open] > summary .sidebar-caret { transform: rotate(90deg); }

/* A lista recua e ganha um fio vertical: sem ele, contraído o grupo some e
   aberto ele vira uma segunda lista solta, do mesmo peso da primeira. */
.sidebar-sub {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 4px 0 4px 26px;
}
.sidebar-sub::before {
  content: "";
  position: absolute;
  left: 21px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--border-1);
}

.sidebar-sub-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-size: 0.86rem;
  text-decoration: none;
  transition: background var(--dur-1), color var(--dur-1);
}
.sidebar-sub-item:hover { background: var(--surface-overlay); color: var(--fg-1); }
.sidebar-sub-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* O avatar da empresa é o mesmo componente da ficha e do card, num degrau
   que a lista comporta. */
.sidebar-sub-item .company-avatar { width: 22px; height: 22px; }
.sidebar-sub-item .company-avatar.is-initials { font-size: 0.56rem; }

.sidebar-sub-item.is-new { color: var(--accent); font-weight: 600; }
.sidebar-plus {
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: 1px dashed var(--border-2);
  border-radius: 50%;
}
.sidebar-plus svg { width: 12px; height: 12px; }

.sidebar-empty {
  padding: 4px 10px;
  font-size: 0.8rem;
  color: var(--fg-3);
  line-height: 1.45;
}

/* ── Rótulo de seção ─────────────────────────── */
.sidebar-section {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 10px var(--space-2);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-4);
}
/* O fio continua na barra recolhida, onde a palavra não cabe: sem ele as
   ferramentas encostariam nas empresas como se fossem a mesma lista. */
.sidebar-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-1);
}

/* ── Ferramenta que ainda não existe ─────────── */
.sidebar-item.is-soon { color: var(--fg-4); cursor: default; }
.sidebar-item.is-soon:hover { background: none; color: var(--fg-4); }
.sidebar-tag {
  flex: none;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-overlay);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Recolher ────────────────────────────────── */
.sidebar-foot {
  flex: none;
  padding: var(--space-3);
  border-top: 1px solid var(--border-1);
}
.sidebar-toggle .sidebar-icon svg { transition: transform var(--dur-2) var(--ease-standard); }
[data-sidebar="collapsed"] .sidebar-toggle .sidebar-icon svg { transform: rotate(180deg); }

/* ── Recolhida ───────────────────────────────── */
/* Só ícones. O que era texto sai; o que era alvo de clique continua do mesmo
   tamanho, centrado no trilho. O `title` de cada item é o que responde pelo
   nome que sumiu. */
[data-sidebar="collapsed"] .sidebar-label,
[data-sidebar="collapsed"] .sidebar-caret,
[data-sidebar="collapsed"] .sidebar-tag,
[data-sidebar="collapsed"] .sidebar-empty,
[data-sidebar="collapsed"] .sidebar-section span { display: none; }

[data-sidebar="collapsed"] .sidebar-item,
[data-sidebar="collapsed"] .sidebar-sub-item {
  justify-content: center;
  padding-inline: 0;
}
[data-sidebar="collapsed"] .sidebar-section { margin-inline: 4px; }

/* O talo do item ativo sai: recolhido, ele ficaria pendurado a doze pixels
   da borda da barra, parecendo sujeira em vez de marcação. O fundo e o ícone
   roxo continuam dizendo onde a pessoa está. */
[data-sidebar="collapsed"] .sidebar-item.is-active::before,
[data-sidebar="collapsed"] .sidebar-sub-item.is-active::before { display: none; }

/* O recuo e o fio da lista não fazem sentido sem os nomes: os avatares das
   empresas viram mais uma fileira de ícones do trilho. */
[data-sidebar="collapsed"] .sidebar-sub { padding-left: 0; }
[data-sidebar="collapsed"] .sidebar-sub::before { display: none; }

/* O semáforo sai da linha e vai para o canto do avatar: é a informação que
   justifica a empresa continuar visível no trilho. A medida sai do centro,
   e não da borda, porque o trilho é mais magro no celular — ancorado à
   direita, o ponto cairia em cima do avatar lá. */
[data-sidebar="collapsed"] .sidebar-sub-item .status-dot {
  position: absolute;
  top: 2px; right: calc(50% - 15px);
  width: 7px; height: 7px;
}

/* ── O véu ───────────────────────────────────── */
/* Só existe no celular, onde a barra aberta vira painel por cima da tela. */
.sidebar-scrim { display: none; }

/* Quem pediu menos movimento no sistema não vê a barra deslizar: ela troca
   de largura na hora, que é o que o clique pediu. */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-toggle .sidebar-icon svg { transition: none; }
}

@media (max-width: 900px) {
  /* Um trilho mais magro: na tela do celular cada pixel de largura que ele
     toma sai do conteúdo. */
  :root { --sidebar-rail: 56px; }

  /* A barra sai do fluxo e o espaço do trilho fica reservado no `padding`:
     assim abrir o painel não empurra o conteúdo para o lado — ele fica onde
     está, atrás do véu. Absoluta dentro da casca, e não fixa na tela, para
     começar abaixo do cabeçalho sem ninguém precisar saber a altura dele. */
  .app-shell { position: relative; padding-left: var(--sidebar-rail); }

  .sidebar {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    z-index: 70;
    width: var(--sidebar-rail);
  }
  [data-sidebar="expanded"] .sidebar {
    width: min(var(--sidebar-w), 80vw);
    box-shadow: var(--shadow-3);
  }

  [data-sidebar="expanded"] .sidebar-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.45);
  }

  /* ── O botão de recolher, no celular ───────── */
  /* **Ele sobe para o topo do trilho.** Embaixo ficava a uns seiscentos
     pixels do último item da barra, sozinho no canto inferior esquerdo — a
     borda onde o navegador põe a própria barra e o sistema põe os gestos de
     voltar e de ir para casa. E ele não é um enfeite: na tela estreita a
     barra é um painel fechado, e este botão é o **único** caminho para a
     navegação inteira. No alto ele fica na mesma varrida do cabeçalho, que
     é onde a mão procura por isso.

     `order`, e não uma segunda cópia do markup: a barra já é uma coluna
     flex, e a ordem visual é exatamente o que se quer mudar. O fio de
     separação vira o de baixo pelo mesmo motivo — ele separa o botão do que
     vem depois dele, e o que vem depois mudou de lado. */
  .sidebar-foot {
    order: -1;
    border-top: 0;
    border-bottom: 1px solid var(--border-1);
  }

  /* **44px de alvo.** No trilho, cada item media 31 × 40 — abaixo do mínimo
     que um dedo acerta com confiança, e o de recolher é o pior lugar para
     errar o toque. Os 12px de respiro de cada lado viram 6, e é essa
     devolução que dá a largura: o trilho continua com os mesmos 56px, e
     quem cresce é a área de toque dentro dele. Só recolhido — no painel
     aberto a largura nunca foi o problema.

     O respiro sai de uma conta, e não de um número escolhido a olho: o
     `1px` é o fio da borda direita da barra, que o `border-box` desconta do
     trilho antes de sobrar largura para o item. Um `6px` redondo devolveria
     43, e 43 não é 44. */
  [data-sidebar="collapsed"] .sidebar-nav,
  [data-sidebar="collapsed"] .sidebar-foot {
    padding-inline: calc((var(--sidebar-rail) - 1px - 44px) / 2);
  }
  .sidebar-item,
  .sidebar-sub-item { min-height: 44px; }

  /* Recolhido, o botão era um `»` solto sobre o fundo da página: sem
     recipiente nenhum ele se lê como sujeira do desenho, e não como o
     controle que abre o menu. O mesmo degrau de superfície que o resto da
     plataforma usa para dizer "isto aqui se clica". */
  [data-sidebar="collapsed"] .sidebar-toggle {
    background: var(--surface-overlay);
    border: 1px solid var(--border-1);
  }
}

/* ── Selo de pendências ──────────────────────── */
/* O item "Em breve" usa `.sidebar-tag`, que some na barra recolhida — bom
   para um rótulo, ruim para um aviso, que é justamente o que precisa
   sobreviver ao trilho de ícones. Este fica. */
.sidebar-count {
  flex: none;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--vision-warning); color: var(--vision-ink);
  border-radius: var(--radius-pill);
  font-size: 0.64rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Na barra recolhida o número não cabe na linha: vira um ponto no canto do
   ícone, como o semáforo das empresas. A regra daquele é escopada em
   `.sidebar-sub-item`, então esta é irmã dela, e não herdeira. */
[data-sidebar="collapsed"] .sidebar-count.is-group {
  position: absolute;
  top: 4px; right: calc(50% - 16px);
  min-width: 8px; height: 8px; padding: 0;
  font-size: 0; /* o número não cabe; o `sr-only` continua lendo */
}
[data-sidebar="collapsed"] .sidebar-group > summary { position: relative; }

/* Com o grupo aberto, o selo do cabeçalho seria o mesmo número duas vezes na
   tela — ele já está na linha de Recorrentes, que é para onde se vai. */
.sidebar-group[open] > summary .sidebar-count.is-group { display: none; }
[data-sidebar="collapsed"] .sidebar-group[open] > summary .sidebar-count.is-group { display: grid; }