/*
 * Usuarios & Acessos, e a tela de "sem acesso".
 *
 * As duas moram aqui porque sao as duas metades do permissionamento: uma
 * atribui perfil, a outra e o que a pessoa ve enquanto nao tem nenhum.
 */

/* ---------- aviso da fila de pendentes ---------- */
.usuarios-pendentes:empty {
  display: none;
}

/*
 * O aviso some sozinho quando a fila zera - ver montarPendentes. Um aviso
 * permanente em zero vira parte do fundo e deixa de ser lido justamente no dia
 * em que passa de zero.
 */
.usuarios-aviso {
  margin-bottom: var(--gutter);
}

/* ---------- filtros ---------- */
/* Sairam daqui: viraram a gaveta lateral de <sf-filtros>, com estilo proprio
   em css/components/filtros.css. */

/* ---------- tabela ---------- */
.usuarios-carregando {
  display: grid;
  place-items: center;
  padding: var(--esp-8);
}

.usuarios-tabela-area {
  overflow-x: auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-container);
}

.usuarios-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--txt-corpo-p);
}

.usuarios-tabela th,
.usuarios-tabela td {
  padding: var(--esp-2) var(--esp-3);
  text-align: left;
  border-bottom: 1px solid var(--cor-borda);
  max-width: 260px;
}

.usuarios-tabela thead th {
  position: sticky;
  top: 0;
  background: var(--cor-superficie-baixa);
  vertical-align: top;
  white-space: nowrap;
}

.usuarios-tabela tbody tr:last-child td {
  border-bottom: 0;
}

/*
 * A linha de quem esta sem perfil e destacada por uma BARRA na borda de inicio,
 * nao por fundo colorido: fundo competiria com o selo de situacao, que ja diz a
 * mesma coisa em texto e cor, e deixaria a tabela listrada de amarelo no dia em
 * que meia equipe entrasse de uma vez.
 */
.usuarios-linha--pendente td:first-child {
  box-shadow: inset 3px 0 0 var(--cor-alerta);
}

.usuarios-pessoa {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* "você" ao lado do proprio perfil: as travas do servidor recusam alterar o
   proprio perfil, e sem o aviso o botao pareceria quebrado. */
.usuarios-eu {
  margin-inline-start: var(--esp-2);
  color: var(--cor-texto-fraco);
}

.usuarios-situacao {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  white-space: nowrap;
}

.usuarios-situacao--sucesso {
  color: var(--cor-sucesso-texto);
}

.usuarios-situacao--alerta {
  color: var(--cor-alerta-texto);
  font-weight: 600;
}

.usuarios-situacao--info {
  color: var(--cor-info-texto);
}

.usuarios-situacao--neutro {
  color: var(--cor-texto-fraco);
}

.usuarios-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
  margin-top: var(--esp-3);
  font-size: var(--txt-rotulo);
}

/* ---------- modal de cadastro e edicao ---------- */
/*
 * Largura: os 34rem serviam a um formulario de quatro campos curtos. A matriz
 * de SUCOMs mudou o conteudo - cada linha tem nome de superintendencia mais
 * duas contagens, e em 34rem o nome truncava enquanto as contagens se
 * espremiam. `min()` porque a largura fixa vazaria no celular.
 */
.usuarios-dialogo {
  --width: min(46rem, 94vw);
}

/*
 * Os campos do formulario respiram: os componentes do Web Awesome nao tem
 * margem propria, e empilhados encostam um no outro.
 *
 * `wa-switch` PRECISA estar nesta lista, e nao e cosmetico: `.usuarios-nota`
 * tem margem superior NEGATIVA calculada para cancelar exatamente o
 * `margin-bottom` daqui - e o que cola a explicacao no campo que ela explica.
 * Um componente de fora da lista nao ganha a margem, e a negativa da nota o
 * cobre. Era o texto de "Vê todas as SUCOMs" passando por baixo da chave.
 */
.usuarios-dialogo wa-input,
.usuarios-dialogo wa-select,
.usuarios-dialogo wa-switch {
  display: block;
  margin-bottom: var(--esp-4);
}

.usuarios-dialogo-intro,
.usuarios-dialogo-identidade {
  margin: 0 0 var(--esp-4);
}

.usuarios-dialogo-identidade {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--esp-3);
  background: var(--cor-superficie-baixa);
  border-radius: var(--raio-controle);
}

.usuarios-aviso-eu {
  margin-bottom: var(--esp-4);
}

/*
 * O convite, no cadastro de quem ainda nao entrou.
 *
 * Uma FAIXA, e nao um campo do formulario: o botao age sozinho no clique e nao
 * espera o "Salvar" - e a borda tracejada e o que diz isso antes de a pessoa
 * clicar. Um botao encostado no meio de inputs pareceria mais um campo, e o
 * e-mail sai sem confirmacao.
 */
.usuarios-convite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
  padding: var(--esp-3);
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-controle);
}

.usuarios-convite-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/*
 * O resultado do reenvio, colado na faixa que o produziu.
 *
 * A margem negativa cancela a da faixa acima - mesmo mecanismo de
 * `.usuarios-nota`, e pela mesma razao: uma resposta que flutua longe do botao
 * que a gerou parece resposta de outra coisa.
 */
.usuarios-convite-recado {
  margin: calc(var(--esp-4) * -1 + var(--esp-1)) 0 var(--esp-4);
  font-size: var(--txt-rotulo);
}

.usuarios-convite-recado--ok {
  color: var(--cor-sucesso-texto);
}

.usuarios-convite-recado--erro {
  color: var(--cor-erro-texto);
}

/* A nota explica o campo ACIMA dela, entao sobe para junto dele - a margem do
   proprio campo abriria um vao que a desgruda do que ela explica. */
.usuarios-nota {
  margin: calc(var(--esp-4) * -1 + var(--esp-1)) 0 var(--esp-4);
  font-size: var(--txt-rotulo);
}

/*
 * O que cada perfil alcanca, ao lado do seletor.
 *
 * Fica sempre visivel, e nao num tooltip: escolher perfil e a decisao de
 * seguranca desta tela, e esconder o significado das opcoes atras de um
 * apontamento do mouse e a maneira mais certa de alguem escolher errado.
 */
.usuarios-perfis-ajuda {
  margin: calc(var(--esp-4) * -1 + var(--esp-1)) 0 var(--esp-4);
  padding-inline-start: var(--esp-4);
  font-size: var(--txt-rotulo);
  color: var(--cor-texto-fraco);
}

.usuarios-perfis-ajuda li + li {
  margin-top: 2px;
}

.usuarios-perfis-ajuda strong {
  color: var(--cor-texto);
}

/* A contagem na coluna "Ve" da tabela. */
.usuarios-escopo-contagem {
  font-variant-numeric: tabular-nums;
}

.usuarios-dialogo-erro {
  margin-top: var(--esp-3);
}

.usuarios-dialogo-rodape {
  display: flex;
  gap: var(--esp-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ---------- historico ---------- */
/* Fechado por padrao: e a resposta de "quem deu admin para essa pessoa", uma
   pergunta que se faz as vezes, nao a cada abertura do modal. */
.usuarios-historico {
  margin-top: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
  padding-top: var(--esp-3);
  font-size: var(--txt-rotulo);
}

.usuarios-historico summary {
  cursor: pointer;
  color: var(--cor-texto-fraco);
}

.usuarios-historico-lista {
  list-style: none;
  margin: var(--esp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.usuarios-historico-lista li {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) minmax(0, 10rem);
  gap: var(--esp-2);
  align-items: baseline;
}

@media (max-width: 40rem) {
  .usuarios-historico-lista li {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.usuarios-historico-acao {
  display: flex;
  gap: var(--esp-2);
  flex-wrap: wrap;
}

.usuarios-historico-autor {
  text-align: end;
}

@media (max-width: 40rem) {
  .usuarios-historico-autor {
    text-align: start;
  }
}

/* ---------- tela de sem acesso ---------- */
/*
 * Ocupa a janela inteira (semShell na tabela de rotas). A navegacao mostraria
 * areas que esta pessoa nao alcanca, e o cabecalho ofereceria uma busca que
 * responderia 403.
 */
.sem-acesso {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-6);
  padding: var(--margem-tela);
  background: var(--cor-fundo);
}

.sem-acesso-cartao {
  width: 100%;
  max-width: 30rem;
  padding: var(--esp-6);
  text-align: center;
}

.sem-acesso-icone {
  font-size: 2.5rem;
  color: var(--cor-texto-fraco);
}

.sem-acesso-titulo {
  margin: var(--esp-3) 0 var(--esp-2);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-titulo-m);
  color: var(--cor-titulo);
}

.sem-acesso-texto {
  margin: 0 0 var(--esp-4);
  color: var(--cor-texto);
}

/* O e-mail usado aparece porque o erro mais comum aqui e ter entrado com a
   conta errada - e quem esta na tela nao ve qual conta o navegador escolheu. */
.sem-acesso-conta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--esp-3);
  margin-bottom: var(--esp-4);
  background: var(--cor-superficie-baixa);
  border-radius: var(--raio-controle);
}

.sem-acesso-email {
  font-weight: 600;
}

.sem-acesso-detalhe {
  margin: 0 0 var(--esp-5);
  font-size: var(--txt-corpo-p);
}

.sem-acesso-acoes {
  display: flex;
  gap: var(--esp-2);
  justify-content: center;
  flex-wrap: wrap;
}

.sem-acesso-codigo {
  margin: var(--esp-5) 0 0;
  font-size: var(--txt-rotulo-p);
}

.sem-acesso-powered {
  justify-content: center;
}