/* ===========================================================================
   CAMADA 3 - LAYOUT
   Primitivas reaproveitaveis e os dois shells de pagina.
   =========================================================================== */

/* --- Primitivas ----------------------------------------------------------
   Aceitam variavel local, entao servem em qualquer pagina sem criar variante.
   Espacamento sai daqui, nao de classe utilitaria de margem. */
.ipr-stack   { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.ipr-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }
.ipr-split   { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.ipr-center  { display: grid; place-items: center; }

/* Ja resolve o dashboard futuro de cartoes de indicador, sem CSS novo. */
.ipr-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 16rem), 1fr));
}

/* --- Shell de autenticacao -----------------------------------------------
   Coluna UNICA, centrada na tela. Usado pelo login, pela pagina de erro e por
   todas as telas de credencial futuras.

   Substituiu um split-screen. O motivo nao foi so gosto: com duas colunas, o
   conteudo de cada lado se alinha em relacao a coluna dele, nunca a tela, e
   qualquer diferenca de altura entre os dois lados aparece como desalinho.
   Uma caixa so no centro nao tem com o que desalinhar, em largura nenhuma.

   Bonus: o split exigia grid-template-areas so para inverter a ordem visual e
   deixar o teclado chegar no formulario antes da decoracao. Aqui a ordem do
   DOM ja e a ordem visual, entao esse truque deixou de ser necessario. */
.ipr-auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-10) var(--space-5);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* A pilha central: marca, cartao e rodape. Largura vem do token, entao a
   medida do formulario e a mesma em qualquer tela de credencial. */
.ipr-auth__panel {
  width: min(100%, var(--container-narrow));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

/* --- Shell da aplicacao --------------------------------------------------
   Escrito agora, usado pelas paginas internas. E o que evita a refatoracao
   quando a segunda pagina chegar. */
/*
  RECOLHER A SIDEBAR, sem travar.

  Anima UMA propriedade em UM elemento: a primeira coluna do grid. Tudo que
  muda de aparencia dentro da barra usa so `opacity`, que o compositor resolve
  sem passar por layout.

  O que costuma deixar esse efeito travado, e que aqui esta evitado:
    - animar varias propriedades ao mesmo tempo (width + padding + font-size);
    - deixar o texto REQUEBRAR durante a animacao. `nowrap` + `overflow:
      hidden` na barra fazem o rotulo ser cortado em vez de recalculado a cada
      quadro, que e a diferenca entre suave e picotado;
    - animar por JavaScript, quadro a quadro. Aqui o JS so troca uma classe.
*/
.ipr-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  transition: grid-template-columns var(--dur-panel) var(--ease-out);
}
/* Largura recolhida: cabe o icone e o respiro dele, nada mais. */
.ipr-shell.is-compacta { --sidebar-width: 4.75rem; }
.ipr-sidebar {
  grid-area: sidebar;
  background: var(--color-bg-sunken);
  border-right: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
  /* Corta o que passa da largura enquanto ela encolhe. Sem isto o rotulo
     empurraria a barra e o grid brigaria com o conteudo a cada quadro. */
  overflow: hidden;
  transition: padding-inline var(--dur-panel) var(--ease-out);
}
.ipr-sidebar__brand { padding-inline: var(--space-2); }

/* --- Estados da barra recolhida ------------------------------------------
   Todas as regras abaixo mexem so em opacidade, alinhamento e espacamento
   interno. Nenhuma toca em largura: quem anima largura e o grid, uma vez. */

/* O rotulo some, o icone fica. O `nowrap` esta na propria .ipr-nav__link. */
.ipr-nav__rotulo,
.ipr-sidebar__secao,
.ipr-sidebar__ident,
.ipr-brand__word {
  transition: opacity calc(var(--dur-panel) * .6) var(--ease-out);
}
.ipr-shell.is-compacta :is(.ipr-nav__rotulo, .ipr-sidebar__secao,
                          .ipr-sidebar__ident, .ipr-brand__word) {
  opacity: 0;
  /* Sai da ordem de tabulacao junto: um rotulo invisivel que ainda recebe
     foco e uma armadilha para quem navega por teclado. */
  pointer-events: none;
}
.ipr-shell.is-compacta .ipr-nav__link,
.ipr-shell.is-compacta .ipr-sidebar__usuario { justify-content: center; }
.ipr-shell.is-compacta .ipr-sidebar { padding-inline: var(--space-2); }
.ipr-shell.is-compacta .ipr-sidebar__sair { display: none; }

/* --- Rodape: quem esta logado ------------------------------------------- */
.ipr-sidebar__usuario {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  white-space: nowrap;
}
.ipr-sidebar__ident {
  display: flex;
  flex-direction: column;
  min-width: 0;              /* deixa o truncate funcionar dentro do flex */
  line-height: var(--line-tight);
}
.ipr-sidebar__nome {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ipr-sidebar__cargo {
  font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ipr-sidebar__sair {
  margin-inline-start: auto;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.ipr-sidebar__sair:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.ipr-sidebar__logout { margin: 0; display: contents; }

/* --- Botao que recolhe --------------------------------------------------- */
.ipr-topbar__toggle {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.ipr-topbar__toggle:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
/* A seta gira em vez de trocar de icone: um icone so, e o giro comunica a
   direcao melhor do que dois desenhos diferentes. */
.ipr-topbar__toggle .ipr-icon { transition: rotate var(--dur-panel) var(--ease-out); }
.ipr-shell.is-compacta .ipr-topbar__toggle .ipr-icon { rotate: 180deg; }
.ipr-topbar__esquerda { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.ipr-sidebar__secao {
  padding-inline: var(--space-4);
  margin-block-end: var(--space-2);
}
.ipr-sidebar__rodape {
  /* `auto` no topo consome a sobra da coluna flex e cola o rodape embaixo,
     sem um segundo container so para isso. */
  margin-block-start: auto;
  padding-inline: var(--space-4);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

.ipr-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface-1);
}
.ipr-topbar__title { font-size: var(--font-size-lg); }
.ipr-topbar__user  { display: flex; align-items: center; gap: var(--space-3); }
.ipr-topbar__ident { display: flex; flex-direction: column; line-height: var(--line-tight); }
.ipr-topbar__name  { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.ipr-topbar__perfil {
  font-size: var(--font-size-2xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ipr-topbar__logout { margin: 0; }

.ipr-main {
  grid-area: main;
  padding: var(--space-8);
  overflow: auto;
}

@media (max-width: 1023px) {
  /* A autenticacao nao precisa de nada aqui: coluna unica centrada ja e o
     layout de celular. Ver pages/auth.css para os ajustes de respiro.

     A aplicacao esconde a sidebar; o menu volta quando a primeira pagina
     interna de verdade exigir um drawer. */
  .ipr-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) minmax(0, 1fr);
    grid-template-areas: "topbar" "main";
  }
  .ipr-sidebar { display: none; }
  .ipr-main { padding: var(--space-5); }
}