/* Casamax · Frota — menu lateral (decisão de 16/10/2026; no padrão do Sam desde 22/10/2026).
 *
 * As telas agrupadas por assunto à esquerda (app/web/menu.py): o grupo da tela em que a pessoa está abre os itens de
 * dentro; os outros abrem com um clique, no próprio menu (10/11/2026). Desde 22/10 o menu segue a barra lateral do Sam: fundo
 * branco com linha fina à direita, ícone de traço em cada grupo, item ativo na tinta da marca (rosado leve com o texto
 * em vermelho) e o cartão da pessoa embaixo. O logo fica sempre sobre fundo claro (no escuro, numa placa branca).
 * No celular o menu vira uma gaveta aberta por um botão na barra de cima.
 */

:root {
  --topo-altura: 0px;                 /* sem barra de cima no computador: painéis e cabeçalhos colam no topo */
  --lateral-largura: 248px;
  --lateral-fundo: #FFFFFF;
  --lateral-texto: #5A5A55;
  --lateral-forte: #12100B;
  --lateral-suave: #6F6F69;
  --lateral-linha: #EEEEEC;
  --lateral-toque: #F4F4F2;
  --lateral-ativo: #FBEFEF;
  --lateral-ativo-texto: #A60101;
  --lateral-flutua: #FFFFFF;
}
:root[data-theme="dark"] {
  --lateral-fundo: #141413;
  --lateral-texto: #B5B5AF;
  --lateral-forte: #EDEDEA;
  --lateral-suave: #85857F;
  --lateral-linha: #262624;
  --lateral-toque: #1E1E1C;
  --lateral-ativo: #2C1717;
  --lateral-ativo-texto: #FF8A80;
  --lateral-flutua: #1D1D1B;
}

body.com-menu {
  display: grid;
  grid-template-columns: var(--lateral-largura) minmax(0, 1fr);
  min-height: 100vh;
}
body.sem-menu .conteudo-geral { min-height: 100vh; }
.conteudo-geral { min-width: 0; }

/* ------------------------------------------------------------------ a barra lateral */

.lateral {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow: hidden;                    /* quem rola, se precisar, é só a lista do meio: logo e cartão ficam parados */
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 12px 12px;
  background: var(--lateral-fundo);
  border-right: 1px solid var(--lateral-linha);
  color: var(--lateral-texto);
}
.lateral .marca, .barra-celular .marca, .topo-simples .marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  color: #12100B;
  text-decoration: none;
}
.lateral .marca .logo, .barra-celular .marca .logo, .topo-simples .marca .logo { display: block; height: 22px; width: auto; }
/* a marca no alto do menu: sobre o branco; no tema escuro, numa placa branca (o logo nunca vai sobre fundo escuro) */
.lateral > .marca { flex: none; height: 44px; padding: 0 12px; border-radius: 6px; }
:root[data-theme="dark"] .lateral > .marca { background: #FFFFFF; }

/* Barra de rolagem (revisão de 10/11/2026: "essa aba de rolagem não existe, muito feio"). Com um grupo aberto por vez o
   menu cabe na tela; numa tela baixa, a lista ainda rola, mas sem trilho à vista: a barra fina só aparece com o mouse
   em cima, como no Linear, no Notion e no GitHub. */
.menu {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -6px; padding: 0 6px;      /* folga para o anel de foco não ser cortado pela rolagem */
  scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.menu:hover, .menu:focus-within { scrollbar-color: var(--lateral-linha) transparent; }
.menu::-webkit-scrollbar { width: 6px; }
.menu::-webkit-scrollbar-thumb { border-radius: 3px; background: transparent; }
.menu:hover::-webkit-scrollbar-thumb { background: var(--lateral-linha); }
.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--lateral-texto);
  font: 500 14px/1.2 var(--fonte);
  text-decoration: none;
  transition: background-color .12s, color .12s;
}
button.menu-item { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
.menu-item .icone { width: 18px; height: 18px; color: var(--lateral-suave); }
.menu-rotulo { flex: 1; min-width: 0; }
.menu-item:hover { background: var(--lateral-toque); color: var(--lateral-forte); text-decoration: none; }
.menu-item:hover .icone { color: var(--lateral-forte); }
.menu-grupo.ativo > .menu-item { color: var(--lateral-ativo-texto); font-weight: 600; background: var(--lateral-ativo); }
.menu-grupo.ativo > .menu-item .icone { color: var(--lateral-ativo-texto); }
.menu-item:focus-visible, .menu-sub a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(166, 1, 1, .2); }

.menu-sub {
  display: none;                       /* só o grupo aberto mostra os itens; os links ficam no HTML */
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px 21px;
  padding-left: 12px;
  border-left: 1px solid var(--lateral-linha);
}
.menu-sub a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 4px;
  color: var(--lateral-texto);
  font: 500 14px/1.2 var(--fonte);
  text-decoration: none;
}
.menu-sub a:hover { background: var(--lateral-toque); color: var(--lateral-forte); text-decoration: none; }
.menu-sub a[aria-current="page"] { color: var(--lateral-forte); font-weight: 600; background: var(--lateral-toque); }
.menu-sub a[aria-current="page"]::after { content: ""; width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--lateral-ativo-texto); }
.menu-sub-titulo { display: none; }

/* Seta do grupo que tem itens: aponta para o lado no grupo fechado e para baixo no aberto. */
.menu-seta {
  flex: none; width: 6px; height: 6px; margin-right: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); opacity: .55; transition: transform .15s;
}
.menu-grupo.aberto > .menu-item .menu-seta { transform: rotate(45deg); }

/* Os itens abrem dentro do menu, com um clique no grupo (revisão de 10/11/2026). Antes, passar o mouse abria um painel
   ao lado do menu: ele cobria a página, sumia no caminho do mouse e ficava preso aberto depois do clique. Agora o grupo
   clicado mostra os itens no mesmo lugar e do mesmo jeito do grupo da tela atual (base.html guarda qual está aberto). */
.menu-grupo.aberto > .menu-sub { display: flex; }
.menu-grupo.aberto:not(.ativo) > .menu-item { color: var(--lateral-forte); }
@media (min-width: 1101px) {
  .lateral { z-index: 20; }              /* acima do conteúdo (cabeçalho fixo das tabelas: até 4) e abaixo das fichas (24 e 25) */
  /* As abas da página que repetem os itens do menu (Relatórios, Auditoria, Configurações) ficam só no menu enquanto ele está
     à vista ("as abas não deveriam estar aqui, só no menu", 10/11/2026). Com o menu em gaveta, continuam na página. */
  .abas.abas-do-menu { display: none; }
}

.lateral-rodape {
  position: relative;
  flex: none;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--lateral-linha);
}
/* o cartão da pessoa é o botão que abre o menu da conta */
.usuario-cartao {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--lateral-linha);
  border-radius: 6px;
  background: var(--lateral-toque);
  color: var(--lateral-forte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
.usuario-cartao:hover, .usuario-cartao.ativo, .usuario-cartao[aria-expanded="true"] { background: var(--lateral-fundo); border-color: var(--borda-forte); }
.usuario-cartao:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(166, 1, 1, .2); }
.usuario-cartao .menu-seta { margin-left: auto; transform: rotate(-135deg); }          /* o menu abre para cima */
.usuario-cartao[aria-expanded="true"] .menu-seta { transform: rotate(45deg); }
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #12100B;
  color: #FFFFFF;
  font: 600 13px/1 var(--fonte);
  letter-spacing: -.02em;
}
:root[data-theme="dark"] .avatar { background: #EDEDEA; color: #12100B; }
.usuario-texto { display: grid; min-width: 0; line-height: 18px; }
.usuario-texto strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-texto span {
  font: 500 11px/1.6 var(--fonte-mono, monospace);
  letter-spacing: .12em; text-transform: uppercase; color: var(--lateral-suave);
}

/* menu da conta: abre por cima do cartão (DropdownMenu do Sam) */
.menu-conta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  display: grid;
  gap: 1px;
  padding: 6px;
  border: 1px solid var(--lateral-linha);
  border-radius: 6px;
  background: var(--lateral-flutua);
  box-shadow: var(--sombra-menu, 0 12px 32px rgba(18, 16, 11, .12));
}
.menu-conta[hidden] { display: none; }
.conta-rotulo {
  padding: 8px 10px 6px;
  font: 500 11px/1 var(--fonte-mono, monospace);
  letter-spacing: .14em; text-transform: uppercase; color: var(--lateral-suave);
}
.menu-conta a, .conta-sair {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--lateral-forte);
  font: 500 14px/1.3 var(--fonte);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-conta .icone { width: 16px; height: 16px; color: var(--lateral-suave); }
.menu-conta a:hover, .conta-sair:hover { background: var(--lateral-toque); text-decoration: none; }
.menu-conta form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--lateral-linha); }
.conta-sair { color: var(--lateral-ativo-texto); }
.menu-conta .conta-sair .icone { color: currentColor; }
.conta-tema {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 4px; padding: 10px 10px 6px; border-top: 1px solid var(--lateral-linha);
  color: var(--lateral-texto); font-size: 14px;
}

/* escolha do tema (menu da conta e Meu perfil): o TabsList do Sam, trilho cinza e o escolhido em destaque */
.seletor-tema { display: inline-flex; gap: 2px; padding: 3px; border-radius: 6px; background: var(--lateral-toque); }
.seletor-tema button {
  padding: 5px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--lateral-texto);
  font: 500 13px/1.2 var(--fonte);
  cursor: pointer;
}
.seletor-tema button[aria-pressed="true"] { background: var(--lateral-fundo); color: var(--lateral-forte); font-weight: 600; box-shadow: 0 1px 2px rgba(18, 16, 11, .12); }
:root[data-theme="dark"] .seletor-tema button[aria-pressed="true"] { background: #33332F; }
.perfil-bloco .seletor-tema { background: var(--superficie-3); }
.perfil-bloco .seletor-tema button { color: var(--texto-2); font-size: 14px; padding: 8px 16px; }
.perfil-bloco .seletor-tema button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); }

.topo-simples { padding: 14px 24px; background: #FFFFFF; border-bottom: 1px solid #EEEEEC; }
.topo-simples .marca { padding: 0; }

.barra-celular, .menu-fundo { display: none; }

/* ------------------------------------------------------------------ perfil */

.perfil-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.perfil-bloco { padding: 20px 22px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); }
.perfil-bloco h2.secao { margin-top: 0; }
.perfil-identidade { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px dashed var(--borda-forte); }
.perfil-identidade > div { display: grid; gap: 4px; min-width: 0; }
.perfil-identidade strong { font: 700 20px/26px var(--fonte); letter-spacing: -.02em; color: var(--texto); }
.avatar.avatar-grande { width: 56px; height: 56px; font-size: 22px; }

/* ------------------------------------------------------------------ celular e tablet: o menu vira gaveta */
/* Até 1100 px (revisão das tabelas, 09/11/2026): com o menu fixo de 248 px, sobravam ~700 px e quase toda lista
   rolava de lado em 1024 px. Sem ele, a tela de 1024 tem o mesmo espaço da de 1280 com o menu. */

@media (max-width: 1100px) {
  :root { --topo-altura: 56px; }
  body.com-menu { display: block; }
  .barra-celular {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--topo-altura);
    padding: 0 12px;
    background: #FFFFFF;
    border-bottom: 1px solid #EEEEEC;
  }
  .btn-menu {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
  }
  .btn-menu:hover { background: #F4F4F2; }
  .btn-menu span, .btn-menu span::before, .btn-menu span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: #12100B;
    border-radius: 2px;
  }
  .btn-menu span { position: relative; }
  .btn-menu span::before, .btn-menu span::after { content: ""; position: absolute; left: 0; }
  .btn-menu span::before { top: -6px; }
  .btn-menu span::after { top: 6px; }
  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(300px, 86vw);
    transform: translateX(-102%);
    transition: transform .16s ease-out;
  }
  body.menu-aberto .lateral { transform: none; box-shadow: 12px 0 40px rgba(18, 16, 11, .15); }
  body.menu-aberto .menu-fundo {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(18, 16, 11, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .lateral > .marca { display: none; }
  /* na gaveta vale a mesma sanfona do computador: um grupo aberto por vez (antes ficavam todos abertos e a gaveta rolava) */
}
@media (prefers-reduced-motion: reduce) { .lateral { transition: none; } }

.perfil-tema { display: flex; align-items: center; gap: 14px; margin: 10px 0 18px; font-weight: 500; }
.perfil-sair { margin: 0; padding-top: 16px; border-top: 1px dashed var(--borda-forte); }