/*
  layout.css
  Sidebar, topbar, grid, containers.
  Mobile-first: base pensada para 320-720px, depois tablet, depois desktop
  (ver Responsividade_Sempre). Breakpoints padrao: 880 / 720 / 520.
*/

.app-shell {
  display: flex;
  min-height: 100vh;
}

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

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--branco);
  border-right: 1px solid var(--borda);
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: var(--transicao);
}

.sidebar-marca {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--borda);
}

.sidebar-marca .marca-nome {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.02em;
  color: var(--texto);
}

.sidebar-marca .marca-sub {
  font-size: 11px;
  color: var(--texto-fraco);
  font-weight: 500;
}

/* O quadro do logo vale em QUALQUER contexto, nao so dentro da sidebar: a tela
   de login usa o mesmo componente e nao tem sidebar nenhuma. Prender o tamanho
   ao seletor da sidebar deixava a imagem sair no tamanho natural do arquivo no
   login, e um PNG de 512px virava um circulo gigante empurrando o texto. */
.logo-quadro {
  width: 40px;
  height: 40px;
  border-radius: var(--raio-full);
  background: var(--branco);
  border: 2px solid var(--cor-primaria);
  display: grid;
  place-items: center;
  color: var(--cor-primaria);
  flex-shrink: 0;
  overflow: hidden;
}

.logo-quadro i { font-size: 22px; }
.logo-quadro img { width: 100%; height: 100%; object-fit: cover; }

.sidebar-nav {
  flex: 1;
  padding: var(--sp-3) var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

/* ===== Sanfona de grupo (Padrao_Menu_Sidebar, 3 niveis) ===== */

.sidebar-nav .grupo-cab {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 14px var(--sp-3) var(--sp-1);
  text-align: left;
  border-radius: var(--raio-sm);
  transition: var(--transicao);
}

.sidebar-nav .grupo-cab:hover {
  background: var(--fundo);
}

.sidebar-nav .grupo-label {
  font-weight: 700;
  font-size: var(--fs-grupo-label);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--texto-fraco);
  flex: 1;
}

.sidebar-nav .grupo-chevron {
  color: var(--texto-fraco);
  font-size: 12px;
  opacity: .7;
  flex-shrink: 0;
  transition: transform .22s ease;
}

.sidebar-nav .grupo.aberto .grupo-chevron {
  transform: rotate(90deg);
}

/* Abre e fecha por grid-template-rows: anima a altura sem saber a altura */
.sidebar-nav .grupo-corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}

.sidebar-nav .grupo.aberto .grupo-corpo {
  grid-template-rows: 1fr;
}

.sidebar-nav .grupo-corpo > .corpo-interno {
  overflow: hidden;
  min-height: 0;
}

.sidebar-nav .sub-grupo-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-suave);
  padding: 7px var(--sp-3) 5px 14px;
}

.sidebar-nav .grupo-corpo > .corpo-interno > .nav-item {
  margin-left: var(--sp-2);
}

.nav-item.esmaecido {
  color: var(--texto-fraco);
  cursor: not-allowed;
  opacity: .65;
}

.tag-em-breve {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--fundo);
  color: var(--texto-fraco);
  padding: 2px 7px;
  border-radius: var(--raio-full);
}

/* ===== Rodape da sidebar (Padrao_Sidebar_Rodape) ===== */

.sidebar-rodape {
  padding: var(--sp-3);
  border-top: 1px solid var(--borda);
}

.btn-home-side {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px var(--sp-3);
  margin-bottom: var(--sp-2);
  border-radius: var(--raio-sm);
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
  color: var(--branco);
  font-weight: 600;
  font-size: var(--fs-sm);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.btn-home-side:hover {
  color: var(--branco);
  transform: translateY(-1px);
  box-shadow: var(--sombra);
}

.btn-home-side.ativo {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4), var(--sombra-sm);
}

.btn-home-side i { font-size: 17px; flex-shrink: 0; }

.usuario-box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--raio-sm);
}

.usuario-box .avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--raio-full);
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
  color: var(--branco);
  display: grid;
  place-items: center;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.usuario-box .info { min-width: 0; flex: 1; }

.usuario-box .info .nome {
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usuario-box .info .papel {
  font-size: 11px;
  color: var(--texto-fraco);
}

/* Botao so de icone do rodape: quadrado, alinhado com o avatar de 34px */
.btn-icone-quadrado {
  padding: 7px;
  min-height: 0;
}

.form-inline { display: inline-flex; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--raio-sm);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--texto-suave);
  transition: var(--transicao);
}

.nav-item:hover {
  background: var(--fundo-alt);
  color: var(--texto);
}

.nav-item.ativo {
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
  font-weight: 600;
}

/* ===== Area de conteudo (topbar + pagina) ===== */

.conteudo-wrapper {
  flex: 1;
  /* Item de flex nasce com `min-width: auto`, ou seja, nao encolhe abaixo do
     conteudo mais largo que ele tem dentro. Quando a tela traz um caminho de
     arquivo comprido ou uma tabela larga, esse minimo empurra o wrapper para
     fora da janela e a PAGINA INTEIRA passa a rolar de lado, em vez de so a
     tabela rolar dentro do proprio container (Responsividade_Sempre.md:90).
     `min-width: 0` devolve ao wrapper o direito de encolher. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-altura);
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0 var(--sp-5);
}

.topbar .titulo-pagina {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--texto);
}

.topbar-inicio {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.topbar-acoes {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.topbar .btn-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raio-sm);
  font-size: 1.25rem;
  color: var(--texto);
}

.topbar .btn-menu:hover {
  background: var(--fundo-alt);
}

/* A PAGINA E DONA DO RITMO VERTICAL, e nao cada bloco.
 *
 * Antes daqui, `.pagina` era `display: block` sem gap, e `.cd` nao tinha
 * margem: dois cards seguidos encostavam com 0px. A varredura de 2026-07-30
 * achou 24 costuras assim em 17 telas, e o Joviano viu no ar antes de mim.
 *
 * A causa nao era esquecer uma margem numa tela: era o espaco entre blocos nao
 * ter dono. Com o dono na pagina, bloco novo escrito amanha ja nasce com o
 * respiro certo, e esquecer deixa de ser possivel. Pendurar `margin-bottom` em
 * cada componente resolveria as 24 de hoje e criaria a 25a na proxima tela
 * (Escada_Preguica_de_Codigo.md:45-51).
 *
 * `gap` e nao `margin` tambem porque margem colapsa e gap nao: dois blocos
 * vizinhos com margens diferentes dariam um vao imprevisivel.
 *
 * Regra completa e escala de uso: Padrao_Espacamento_e_Respiro na vault.
 */
.pagina {
  flex: 1;
  padding: var(--sp-6) var(--sp-5) 50px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  /* Item de flex nasce com min-width auto e nao encolhe abaixo do conteudo mais
     largo que tem dentro. Sem isto, tabela larga volta a empurrar a pagina de
     lado, que foi o achado da Fase 5 no .conteudo-wrapper. */
  min-width: 0;
}

.pagina > * {
  min-width: 0;
}

/* ===== Overlay de drawer (mobile) ===== */

.overlay-mob {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .4);
  z-index: var(--z-overlay);
}

.overlay-mob.visivel {
  display: block;
}

/* ===== Grid utilitario ===== */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}

.grid-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
}

/* ===== Responsividade (ver Responsividade_Sempre) ===== */

/* Tablet / mobile grande: sidebar vira drawer */
@media (max-width: 880px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.aberta {
    transform: translateX(0);
  }

  .conteudo-wrapper {
    margin-left: 0;
  }

  .topbar .btn-menu {
    display: inline-flex;
    width: 44px;
    height: 44px;
  }

  .pagina {
    padding: 18px var(--sp-4) 50px;
  }
}

/* Mobile */
@media (max-width: 720px) {
  .grid-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .topbar .titulo-pagina {
    font-size: var(--fs-lg);
  }
}

/* Mobile pequeno */
@media (max-width: 520px) {
  .grid-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .pagina {
    padding: 14px var(--sp-3) 50px;
  }
}

body.drawer-aberto {
  overflow: hidden;
}