/* ==========================================================================
   TodaRota · shell
   Sidebar de dois estágios + topbar. As 19 telas do sistema moram aqui dentro.
   ========================================================================== */

/* App-shell: a janela inteira, sem rolagem de página. Sidebar e topbar
   ficam fixas; só o conteúdo rola por dentro (ver .main / .page). É o que
   mantém a aba de recolher no centro real da tela, não da página longa.

   Os dois painéis FLUTUAM sobre a mesa (--bg-app), separados por uma calha.
   É a calha que dá a leitura de profundidade e onde a aba de recolher mora. */
.shell {
  display: flex;
  gap: var(--s3);
  height: 100vh;
  padding: var(--s3);
  background: var(--bg-app);
  overflow: hidden;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar {
  width: var(--sidebar);
  flex: none;
  background: var(--bg-chrome);
  border-radius: var(--r-panel);
  display: flex;
  flex-direction: column;
  transition: width .18s ease;
}

.shell.is-collapsed .sidebar { width: var(--sidebar-collapsed); }

.sidebar__brand {
  height: var(--chrome-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--s5);
  border-bottom: 1px solid var(--line-chrome);
}
.sidebar__brand span {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* O símbolo. Altura fixa e largura automática para não distorcer. */
.sidebar__mark {
  height: 24px;
  width: auto;
  flex: none;
  display: block;
}
.shell.is-collapsed .sidebar__mark { height: 22px; }
.shell.is-collapsed .sidebar__brand {
  padding: 0;
  justify-content: center;
}
.shell.is-collapsed .sidebar__brand span { display: none; }

/* overflow-x: hidden é obrigatório aqui. Sem ele, quando a janela é baixa a
   barra vertical aparece, come ~15px de largura, os rótulos com nowrap não
   cabem mais e nasce uma barra HORIZONTAL — o efeito "isso é um iframe". */
.nav {
  flex: 1;
  padding: 10px 0 6px;
  overflow-x: hidden;
  overflow-y: auto;
}

.shell.is-collapsed .nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 0;
}

/* ---- Cabeçalho de grupo (clicável: colapsa o grupo) ------------------- */

.nav__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s3) var(--s3) 6px var(--s5);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-6);
  white-space: nowrap;
  cursor: pointer;
  transition: color .12s ease;
}
.nav__title:hover { color: var(--text-5); }
.shell.is-collapsed .nav__title { display: none; }

/* A seta do cabeçalho: aponta pra baixo (aberto), gira ao fechar. */
.nav__chev {
  margin-left: auto;
  flex: none;
  transition: transform .15s ease;
}
.nav__section.is-closed .nav__chev { transform: rotate(-90deg); }

/* Grupo fechado: some o grupo inteiro — guia e paradas junto. */
.nav__section.is-closed .nav__group { display: none; }
/* Mas no modo recolhido (64px) os ícones ficam sempre visíveis. */
.shell.is-collapsed .nav__section.is-closed .nav__group { display: flex; }

.nav__admin {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: lowercase;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r-pill);
  padding: 1px 6px;
  color: var(--text-5);
}

/* Só existe no estado recolhido, no lugar do cabeçalho de grupo. */
.nav__sep {
  display: none;
  width: 28px;
  height: 1px;
  background: var(--line-chrome);
  margin: 7px 0;
}
.shell.is-collapsed .nav__sep { display: block; }

/* ==========================================================================
   A ROTA — assinatura 1
   O grupo aberto é um trajeto: guia vertical + uma parada por item.
   Não é enfeite: o produto é sobre rotas, a navegação é desenhada como uma.
   ========================================================================== */

.nav__group {
  position: relative;
  margin: 0 var(--s2) 6px;
}
.shell.is-collapsed .nav__group {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* A guia começa e termina no centro da primeira e da última parada
   (metade da altura do item), para não sobrar ponta solta. */
.nav__guide {
  position: absolute;
  left: var(--s5);
  top: 19px;
  bottom: 19px;
  width: 1px;
  /* centrada no MESMO eixo do nó, não encostada nele */
  transform: translateX(-50%);
  background: var(--line-guide);
}
.shell.is-collapsed .nav__guide { display: none; }

/* Os dois fixos do topo NÃO são paradas de um trajeto: são o ponto de
   partida. Por isso não carregam guia nem nó — sem cabeçalho e sem colapso,
   a rota ali fica órfã e lê como grupo quebrado. Só o ícone alinha com o
   resto da coluna. */
.nav__section--fixed .nav__guide,
.nav__section--fixed .nav__node { display: none; }

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  margin: 1px 0;
  padding: 0 10px 0 38px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  color: var(--text-3);
  font-size: var(--t-md);
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.nav__item:hover {
  background: rgba(255, 255, 255, .035);
  color: var(--text);
}

/* Fixos são nível de topo: vão FLUSH. O recuo de 38px é o que marca
   "filho de um grupo" — dá-lo a quem não tem grupo abre um vazio dentro
   do item e apaga a hierarquia. */
.nav__section--fixed .nav__item { padding-left: 12px; }
.nav__section--fixed { margin-bottom: var(--s2); }

/* A parada no trajeto: losango, não círculo. Quadrado girado 45°, centrado
   exatamente sobre a guia (translate -50% nos dois eixos), então o tamanho
   pode mudar sem desalinhar. */
.nav__node {
  position: absolute;
  /* -1px porque .nav__item tem borda de 1px: filho absoluto conta a partir da
     caixa de padding, então sem isso o losango sai do eixo da guia. */
  left: calc(var(--s5) - 1px);
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--line-node);
  border-radius: 1.5px;
  background: var(--bg-chrome);
  transition: border-color .12s ease, background .12s ease;
}
.nav__item:hover .nav__node { border-color: var(--text-5); }

/* Item ativo: superfície tingida de laranja, não caixa cinza com relevo.
   Item de menu ativo é ESTADO, não tecla — o relevo pertence a botão e
   filtro. A parada correspondente acende junto. */
.nav__item.is-active {
  background: rgba(242, 118, 46, .11);
  color: var(--accent);
  font-weight: 500;
}
.nav__item.is-active:hover { background: rgba(242, 118, 46, .15); }
.nav__item.is-active .nav__node {
  border-color: var(--accent);
  background: var(--accent);
}

.nav__badge {
  margin-left: auto;
  background: var(--accent);
  color: var(--on-accent-badge);
  font-size: var(--t-xs);
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}

.nav__icon { flex: none; }

/* Se a largura apertar (barra vertical presente), o rótulo trunca com
   reticências em vez de ser cortado no meio da letra. */
.nav__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Estado recolhido: o item vira botão quadrado de 40px -------------- */

.shell.is-collapsed .nav__item {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  justify-content: center;
  gap: 0;
}
.shell.is-collapsed .nav__label,
.shell.is-collapsed .nav__node { display: none; }

.shell.is-collapsed .nav__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  margin: 0;
  min-width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  padding: 0 3px;
  font-size: 9px;
  border: 1.5px solid var(--bg-chrome);
}

/* ==========================================================================
   Área principal e topbar
   ========================================================================== */

/* O painel principal. min-height:0 deixa o filho (.page) encolher e criar
   a própria rolagem; overflow:hidden faz o raio recortar o conteúdo. */
.main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.topbar {
  height: var(--chrome-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s6);
  background: var(--bg-chrome);
  border-bottom: 1px solid var(--line-chrome);
}

/* ---- Controle do painel lateral ---------------------------------------
   Mora no canto superior esquerdo do conteúdo, a convenção que o usuário
   já conhece. Posição fixa, idêntica nos dois estados da sidebar — não
   depende da altura da janela nem de quanto o menu cresceu.
   O ícone é de PAINEL, não seta: solta aqui, uma seta não diria o que
   está sendo recolhido. */
.panel-toggle {
  flex: none;
  width: 36px;
  height: 36px;
  margin-right: var(--s1);
  display: grid;
  place-items: center;
  background: var(--control-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  box-shadow: var(--key);
  color: var(--text-3);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.panel-toggle:hover {
  background: var(--control-bg-hover);
  border-color: var(--hairline-hover);
  color: var(--text);
}
.panel-toggle:active { box-shadow: var(--key-down); }

.topbar__search {
  position: relative;
  flex: 1;
  max-width: 420px;
  margin-left: var(--s2);
}
.topbar__search svg {
  position: absolute;
  left: var(--s3);
  top: 11px;
  pointer-events: none;
}

.topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.topbar__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--control-bg);
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--control-bg);
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-2);
}

/* ---- Menu suspenso do filtro de período -------------------------------- */

.dropdown { position: relative; }

.dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  padding: var(--s1);
  background: var(--bg-card);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
  z-index: 20;
}
.dropdown__menu[hidden] { display: none; }

.dropdown__opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s2) 10px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--text-3);
  cursor: pointer;
}
.dropdown__opt:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.dropdown__opt.is-on { color: var(--accent); }