/* ============================================================================
   Cantoário WMS — Padrão de tela de cadastro

   Esqueleto visual que todo cadastro do sistema herda: cabeçalho, filtro, grid,
   estados e diálogos. Nenhum valor literal — cor, espaço, tamanho, raio, sombra
   e duração saem de design-system.css.
   ============================================================================ */

.wms-cadastro {
  display: flex;
  flex-direction: column;
  gap: var(--gap-secao);
}

/* --------------------------------------------------------------------------
   CABEÇALHO
   -------------------------------------------------------------------------- */

.wms-cadastro__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  flex-wrap: wrap;
}

.wms-cadastro__identidade {
  /* Cresce para empurrar o que vier depois dela para a direita. Sem isto, o `space-between` do
     topo só acerta quando há exatamente dois filhos: o terceiro — o atalho da documentação —
     jogaria a ação primária para o meio do cabeçalho. */
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  min-width: 0;
}

/* Símbolo da tela num disco: dá âncora visual ao título e repete, em toda tela,
   o ícone que o menu usa para chegar até ela. */
.wms-cadastro__simbolo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--espaco-6);
  height: var(--espaco-6);
  border-radius: var(--raio-pilula);
  background: var(--cor-primaria-100);
  color: var(--cor-primaria-600);
  box-shadow: var(--sombra-marca-1);
}

.wms-cadastro__titulo {
  margin: 0;
  font-weight: var(--fonte-peso-forte);
  letter-spacing: -0.01em;
  color: var(--cor-texto);
}

.wms-cadastro__apoio {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

/* A ação primária fica sempre no mesmo canto, em toda tela de cadastro: quem
   aprende uma tela precisa achar o botão de incluir nas outras sem procurar. */
.wms-cadastro__acao {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   FILTRO
   -------------------------------------------------------------------------- */

/* Alternador de inativos: caixa e rótulo como um item só da faixa.
   Centralizado por conta própria, e não trocando o `align-items` da faixa — os
   campos continuam alinhados pela base, que é onde a linha de escrita deles fica;
   o que precisava sair do rodapé era só este par, que tem metade da altura.
   O alvo mínimo vale para o rótulo também: no galpão se clica de luva. */
.wms-cadastro__alternador {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  align-self: center;
  min-height: var(--alvo-min);
}

.wms-cadastro__alternador label {
  cursor: pointer;
  user-select: none;
}

.wms-cadastro__filtros {
  display: flex;
  align-items: flex-end;
  gap: var(--gap-campo);
  flex-wrap: wrap;
  padding: var(--espaco-4);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
}

/* --------------------------------------------------------------------------
   GRID
   -------------------------------------------------------------------------- */

.wms-cadastro__grid {
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

/* Os tokens de densidade eram declarados e aplicados por `data-densidade`, mas ninguém os
   consumia — o atributo prometia um efeito que não existia, e todo grid nascia no tamanho padrão
   do tema. É aqui que a promessa passa a valer. */
.wms-cadastro__grid .rz-data-grid-data td,
.wms-cadastro__grid .rz-data-grid-data th {
  height: var(--densidade-linha-altura);
  padding: var(--densidade-padding-y) var(--densidade-padding-x);
  font-size: var(--densidade-fonte);
}

/* Situação de cadastro — ativo e inativo. Paleta própria, fora do vocabulário reservado ao status
   de mercadoria: "Liberado" tem significado operacional próprio no estoque, e produto vai mostrar
   as duas coisas na mesma tela. */
.wms-situacao--ativo {
  color: var(--cor-sucesso);
  background: var(--cor-sucesso-fundo);
}

.wms-situacao--inativo {
  color: var(--cor-texto-secundario);
  background: var(--cor-fundo-sutil);
}

/* Cadastro incompleto — existe e ainda não serve. Não é "quarentena", que é estado de mercadoria. */
.wms-situacao--pendente {
  color: var(--cor-aviso);
  background: var(--cor-aviso-fundo);
}

/* Inativo: apagado e em itálico, não só numa cor. Cor sozinha não comunica
   estado neste sistema — vale para linha de grid como vale para chip. */
.wms-cadastro__linha--inativa {
  color: var(--cor-texto-tenue);
  font-style: italic;
}

.wms-cadastro__total {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-tenue);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   ESTADOS — carregando, erro, sem permissão e vazio
   -------------------------------------------------------------------------- */

.wms-cadastro__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-5);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
  color: var(--cor-texto-secundario);
  animation: wms-cadastro-entra var(--transicao-longa);
}

.wms-cadastro__aviso--erro {
  border-color: var(--cor-erro);
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
}

.wms-cadastro__aviso--bloqueio {
  border-color: var(--cor-aviso);
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
}

.wms-cadastro__aviso-icone {
  flex-shrink: 0;
  font-size: var(--fonte-tam-2xl);
}

.wms-cadastro__aviso-titulo {
  margin: 0 0 var(--espaco-2);
  font-weight: var(--fonte-peso-medio);
}

.wms-cadastro__aviso-texto {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
}

.wms-cadastro__vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-7) var(--gap-pagina);
  text-align: center;
}

/* Ícone dentro de um disco: solto sobre o branco ele lê como sobra de layout, e
   esta é a única imagem que o estado vazio tem. */
.wms-cadastro__vazio-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--espaco-7);
  height: var(--espaco-7);
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-sutil);
  box-shadow: var(--sombra-1);
  font-size: var(--fonte-tam-2xl);
  color: var(--cor-texto-tenue);
}

.wms-cadastro__vazio-titulo {
  margin: 0;
  font-size: var(--fonte-tam-lg);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto);
}

.wms-cadastro__vazio-texto {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

@keyframes wms-cadastro-entra {
  from {
    opacity: 0;
    transform: translateY(calc(var(--espaco-2) * -1));
  }
}

/* --------------------------------------------------------------------------
   FORMULÁRIO EM DIÁLOGO
   -------------------------------------------------------------------------- */

.wms-formulario {
  display: flex;
  flex-direction: column;
  gap: var(--gap-secao);
}

.wms-formulario__campos {
  display: flex;
  flex-direction: column;
  gap: var(--gap-campo);
}

/* Crítica de campo. Fica logo abaixo do campo que a originou — quem precisa mudar é ele, e uma
   mensagem no rodapé do formulário obriga a pessoa a procurar qual. */
.wms-formulario__critica {
  margin: calc(var(--espaco-2) * -1) 0 0;
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
  color: var(--cor-erro);
  animation: wms-cadastro-entra var(--transicao-media);
}

/* Regra do campo, dita antes da tentativa. Ocupa o mesmo lugar da crítica — quando ela aparece,
   esta some, e o formulário não muda de altura no meio do preenchimento. */
.wms-formulario__ajuda {
  margin: calc(var(--espaco-2) * -1) 0 0;
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
  color: var(--cor-texto-tenue);
}

/* Consequência que a pessoa precisa ler ANTES de decidir, e não depois de gravar. Hoje é a união
   de permissões ao acumular cargos no mesmo setor. Amarelo de atenção, não vermelho de erro: nada
   está errado, e o caminho segue — o que muda é que ele tem um efeito que não se vê na tela. */
.wms-formulario__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  padding: var(--espaco-3);
  border: 1px solid var(--cor-aviso);
  border-radius: var(--raio-md);
  background: var(--cor-aviso-fundo);
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
  color: var(--cor-texto);
}

.wms-formulario__aviso .rz-icon {
  flex: 0 0 auto;
  font-size: var(--fonte-tam-lg);
  color: var(--cor-aviso);
}

/* Bloco que grava sozinho, dentro de um formulário que grava no Salvar — hoje, os vínculos de
   acesso dentro do cadastro de usuário.

   A divisória acima não é enfeite: ela marca onde o Salvar deixa de valer. O que está acima dela
   só é gravado no botão; o que está abaixo já valeu no momento do clique. Sem a separação visual,
   quem cancelasse o formulário esperaria ter desfeito o vínculo que acabou de conceder. */
.wms-formulario__secao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  margin-top: var(--espaco-2);
  padding-top: var(--espaco-5);
  border-top: 1px solid var(--cor-borda);
}

.wms-formulario__secao-titulo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
  font-size: var(--fonte-tam-sm);
  font-weight: var(--fonte-peso-forte);
  letter-spacing: var(--fonte-espaco-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-tenue);
}

.wms-formulario__secao-titulo .rz-icon {
  font-size: var(--fonte-tam-md);
}

/* Dois campos que se leem juntos — nome e login, e-mail e matrícula, início e fim de vigência.
   Em tela estreita voltam a empilhar, porque metade de um campo de data não serve para nada. */
.wms-formulario__par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-campo);
  align-items: start;
}

/* Célula do par: o campo e a crítica dele andam juntos. Sem este agrupamento, a crítica de um
   vira a terceira célula do grid e desalinha a coluna inteira — o campo da direita sobe uma
   linha e passa a ficar ao lado do erro do vizinho. */
.wms-formulario__campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  min-width: 0;
}

@media (max-width: 40rem) {
  .wms-formulario__par {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   VÍNCULOS DO USUÁRIO
   -------------------------------------------------------------------------- */

.wms-vinculos {
  display: flex;
  flex-direction: column;
  gap: var(--gap-secao);
}

.wms-vinculos__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wms-vinculos__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao-media), border-color var(--transicao);
}

.wms-vinculos__item:hover {
  border-color: var(--cor-primaria-300);
  box-shadow: var(--sombra-marca-1);
}

.wms-vinculos__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--espaco-6);
  height: var(--espaco-6);
  border-radius: var(--raio-pilula);
  background: var(--cor-primaria-100);
  color: var(--cor-primaria-600);
}

.wms-vinculos__texto {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: var(--fonte-altura-compacta);
}

.wms-vinculos__setor {
  font-size: var(--fonte-tam-md);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto);
}

.wms-vinculos__detalhe {
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

/* A concessão fica separada da lista por uma régua: é onde se escreve, e não onde se lê. */
.wms-vinculos__novo {
  display: flex;
  align-items: flex-end;
  gap: var(--espaco-2);
  flex-wrap: wrap;
  padding-top: var(--espaco-4);
  border-top: var(--borda-largura) solid var(--cor-borda);
}

/* Os quatro campos dividem a linha e o botão fica no tamanho dele. As bases são desiguais de
   propósito: nome de departamento e de cargo são curtos, o motivo é frase. `min-width: 0` porque
   item de flex não encolhe abaixo do conteúdo sem isso, e um deles empurraria o resto para a
   linha de baixo. */
.wms-vinculos__novo > .rz-form-field {
  flex: 1 1 9rem;
  min-width: 0;
}

.wms-vinculos__novo > .rz-form-field:nth-of-type(4) {
  flex: 2 1 12rem;
}

.wms-vinculos__novo > .rz-button {
  flex: 0 0 auto;
}

/* Abaixo disto os cinco não cabem sem virar tira. Dois por linha, e o botão inteiro embaixo. */
@media (max-width: 60rem) {
  .wms-vinculos__novo > .rz-form-field {
    flex: 1 1 calc(50% - var(--espaco-2));
  }

  .wms-vinculos__novo > .rz-button {
    flex: 1 1 100%;
  }
}

/* Marcadores do formulário, lado a lado — tipo do item e visibilidade se leem juntos. */
.wms-formulario__marcadores {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  flex-wrap: wrap;
}

.wms-formulario__marcadores :where(label) {
  margin-right: var(--espaco-4);
}

/* --------------------------------------------------------------------------
   CADASTRO DE MENU — árvore, não grid (design.md D9)
   -------------------------------------------------------------------------- */

.wms-menu__arvore,
.wms-menu__filhos,
.wms-menu__resultados {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O recuo do filho é o que mostra a hierarquia. Vem com uma guia à esquerda porque, a partir do
   terceiro nível, só o espaço já não diz de quem o item pende. */
.wms-menu__filhos {
  margin-top: var(--espaco-2);
  margin-left: var(--espaco-5);
  padding-left: var(--espaco-4);
  border-left: var(--borda-largura) solid var(--cor-borda);
}

.wms-menu__linha,
.wms-menu__resultado {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao-media), border-color var(--transicao);
}

.wms-menu__linha:hover,
.wms-menu__resultado:hover {
  border-color: var(--cor-primaria-300);
  box-shadow: var(--sombra-marca-1);
}

/* Inativo apagado e em itálico, além do chip: cor sozinha não comunica estado neste sistema. */
.wms-menu__linha--inativa {
  color: var(--cor-texto-tenue);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   MATRIZ DE PERMISSÃO
   -------------------------------------------------------------------------- */

.wms-permissoes {
  display: flex;
  flex-direction: column;
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
  overflow-x: auto;
}

.wms-permissoes__cabecalho,
.wms-permissoes__linha {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) repeat(5, 6rem);
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--densidade-padding-y) var(--espaco-4);
  min-height: var(--densidade-linha-altura);
}

.wms-permissoes__cabecalho {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: var(--borda-largura) solid var(--cor-borda);
  background: var(--cor-fundo-sutil);
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-forte);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-tenue);
}

.wms-permissoes__linha {
  border-bottom: var(--borda-largura) solid var(--cor-borda);
  transition: background var(--transicao);
}

.wms-permissoes__linha:last-child {
  border-bottom: none;
}

.wms-permissoes__linha:hover {
  background: var(--cor-primaria-050);
}

/* Concessão que o pai não deixa alcançar. Fundo âmbar porque é engano, não erro: a permissão
   existe e funciona por endereço direto — o que falta é o item aparecer no menu. */
.wms-permissoes__linha--difere {
  background: var(--cor-aviso-fundo);
}

/* O recuo é o que mostra de quem o item pende. Vem de variável em linha porque o nível é dado,
   e não classe: quatro classes fixas seriam quatro regras para a mesma conta. */
.wms-permissoes__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  min-width: 0;
  padding-left: calc(var(--recuo, 0) * var(--espaco-5));
}

.wms-permissoes__coluna {
  display: flex;
  justify-content: center;
  text-align: center;
}

/* --------------------------------------------------------------------------
   AÇÕES DA LINHA
   -------------------------------------------------------------------------- */

.wms-acoes-da-linha {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--espaco-1);
}

/* Alvo de toque também na linha do grid: o operador pode estar de luva, e ação de linha é onde
   ele mais erra o clique. */
.wms-acoes-da-linha :where(.rz-button) {
  min-width: var(--alvo-min);
  min-height: var(--alvo-min);
}

/* Confirmar à direita, do lado onde o polegar e o olho terminam a leitura. */
.wms-formulario__acoes,
.wms-confirmacao__acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--espaco-3);
  padding-top: var(--espaco-2);
}

/* --------------------------------------------------------------------------
   CONFIRMAÇÃO
   -------------------------------------------------------------------------- */

.wms-confirmacao {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-4);
  padding-bottom: var(--espaco-4);
}

.wms-confirmacao__simbolo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--espaco-7);
  height: var(--espaco-7);
  border-radius: var(--raio-pilula);
  box-shadow: var(--sombra-1);
}

.wms-confirmacao__simbolo--perigo {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
}

.wms-confirmacao__simbolo--atencao {
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
}

.wms-confirmacao__corpo {
  min-width: 0;
}

.wms-confirmacao__pergunta {
  margin: 0 0 var(--espaco-2);
  font-size: var(--fonte-tam-lg);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto);
}

.wms-confirmacao__consequencia {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
  color: var(--cor-texto-secundario);
}

/* O que o registro carrega junto — dependentes, vínculos, uso em outro lugar. É
   o que faz a pessoa decidir com o efeito à vista, em vez de no escuro. */
.wms-confirmacao__detalhes {
  margin: var(--espaco-3) 0 0;
  padding-left: var(--espaco-5);
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
  color: var(--cor-texto-secundario);
}

/* A justificativa que a trilha vai guardar. Separada do corpo por uma régua: é o que a pessoa
   precisa escrever, e não mais um texto que ela precisa ler. */
.wms-confirmacao__motivo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  padding-top: var(--espaco-4);
  border-top: var(--borda-largura) solid var(--cor-borda);
}

/* --- Marcas do parâmetro de sistema ---------------------------------------------------------

   Paleta própria, pelo mesmo motivo de `wms-situacao`: "sensível" e "sem uso" não são estado de
   mercadoria, e o vocabulário de status do estoque é reservado. */

.wms-parametro__chave {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  align-items: center;
}

/* Alterá-lo muda autorização ou derruba sessão. Cor de aviso, não de erro: nada está errado —
   é uma decisão que precisa ser tomada de olhos abertos. */
.wms-parametro__marca--sensivel {
  color: var(--cor-aviso);
  background: var(--cor-aviso-fundo);
}

/* Nenhum código lê a chave. Discreto de propósito: é informação, não problema — o parâmetro pode
   ter sido cadastrado antes do código que vai consumi-lo.

   Secundário, e não tênue: o tênue é o neutro 500, que o próprio design system registra em 4,33:1
   sobre superfície tingida — abaixo do mínimo da WCAG AA. É o mesmo degrau que
   `.wms-situacao--inativo` usa, duas telas acima, para o mesmo tipo de rótulo apagado. */
.wms-parametro__marca--sem-uso {
  color: var(--cor-texto-secundario);
  background: var(--cor-fundo-sutil);
}

.wms-parametro__marca .rz-icon {
  font-size: var(--fonte-tam-md);
}

/* Agrupa o atalho da documentação com a ação primária, para os dois ficarem juntos à direita em
   vez de espalhados pelo cabeçalho. */
.wms-cadastro__acoes-do-topo {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  flex: 0 0 auto;
}

/* Atalho para a explicação da tela. Discreto de propósito: ele responde uma pergunta que nem
   sempre existe, e competir com a ação primária tiraria peso justamente de quem veio operar. */
.wms-atalho-doc {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio-pilula);
  color: var(--cor-texto-secundario);
  font-size: var(--fonte-tam-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transicao), color var(--transicao);
}

.wms-atalho-doc:hover {
  background: var(--cor-fundo-sutil);
  color: var(--cor-texto);
}

.wms-atalho-doc:focus-visible {
  outline: 2px solid var(--cor-primaria-500);
  outline-offset: 2px;
}

.wms-atalho-doc__icone {
  font-size: var(--fonte-tam-md);
}

@media (prefers-reduced-motion: reduce) {
  .wms-atalho-doc {
    transition: none;
  }
}

/* Duas ou mais ações no topo de uma tela. Envolve para não empurrar o título quando o cabeçalho
   estreita — o `space-between` do bloco de identidade já acerta com dois filhos, e este é o segundo. */
.wms-cadastro__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
}