/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* ============================================================
   PERMISSÕES (tarefa r14): a tela de perfis e pessoas (assets/js/telas/permissoes.js), e o "Como era /
   Como ficou" das mudanças de permissão na ficha da Auditoria (assets/js/telas/auditoria.js).
   Só token (assets/css/tokens.css): cor, fonte e raio vêm de lá, e o tema escuro e o tema de cada
   sistema chegam sozinhos, porque nada aqui escreve cor à mão.
   Movimento só em mudança de estado, 150 a 200 ms, por transição de CSS; o bloco global de "reduzir
   movimento" (tokens.css) zera tudo isso sozinho.
   No dedo (`pointer: coarse`) todo alvo sobe para 44 px, como no resto do painel (erp-kit.css, "piso
   de toque"); as caixas de marcar são rótulos inteiros, então o alvo é o rótulo, não a caixinha.
   ============================================================ */

.perm {
  container-type: inline-size;
  display: grid;
  gap: 16px;
  min-width: 0;
}
.perm .abas {
  justify-self: start;
}
.perm-apoio {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.5;
}
.perm-rotulo {
  display: block;
  margin-bottom: 4px;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 600;
}
.perm-erro {
  margin: 6px 0 0;
  color: var(--perigo);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.perm-erro[hidden] {
  display: none;
}
.perm-vazio {
  margin: 0;
  padding: 16px;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.5;
}
.perm-falha {
  display: grid;
  gap: 12px;
  justify-items: start;
  max-width: 62ch;
}
.perm-falha p {
  margin: 0;
}

/* a frase de quem só olha, e a trava da conta do Carvalho: uma linha com o cadeado, sem caixa grossa */
.perm-so-olhar,
.perm-trava {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.5;
}
.perm-so-olhar svg,
.perm-trava svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--muted-foreground);
}

/* ---------- as duas colunas: a lista e o editor ---------- */
.perm-duas {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@container (max-width: 820px) {
  .perm-duas {
    grid-template-columns: minmax(0, 1fr);
  }
}

.perm-lista {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.perm-lista ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* NO CELULAR A LISTA NÃO ROLA POR DENTRO, de propósito: uma caixa que rola dentro da página rolando
   é dois dedos brigando, e os itens escondidos dela "sobrepunham" o editor para o medidor de colisão
   (o Chromium mede o que está fora da área visível da caixa). A lista é curta: poucos perfis, e a busca
   acha a pessoa. */
.perm-item {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--foreground);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--rapido) ease,
    border-color var(--rapido) ease;
}
@media (hover: hover) and (pointer: fine) {
  .perm-item:hover {
    background: var(--accent);
  }
}
.perm-item[aria-current="true"] {
  border-color: var(--ring);
  background: var(--accent);
}
.perm-item-nome {
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.perm-item-sub {
  color: var(--muted-foreground);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.perm-item-marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 12px;
}
.perm-busca {
  width: 100%;
}

/* ---------- o editor ---------- */
.perm-editor {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.perm-cab {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.perm-cab > p {
  margin: 0;
}
.perm-nome-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.perm-nome-linha .perm-campo {
  flex: 1 1 220px;
  min-width: 0;
}
.perm-tipo {
  font-size: 14px;
  line-height: 1.5;
}
.perm-cab-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* no celular os tres botoes do perfil ficam um embaixo do outro, cada um com a linha inteira: com a largura
   de cada um, o terceiro caia sozinho numa segunda linha (fileira quebrada, 2 + 1, MEDIDO a 390, 375 e 360) */
@media (max-width: 639.98px) {
  .perm-cab-acoes > * {
    flex: 1 1 100%;
  }
}
.perm-pessoa-nome h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.perm-pessoa-nome {
  display: grid;
  gap: 4px;
  justify-items: start;
}

/* O BLOCO DO PERFIL, logo abaixo do nome (pedido do Carvalho, 25/09/2026: o seletor pequeno no meio da
   tela se escondia). O nome do perfil vem grande, e "Trocar perfil" é um botão de verdade, não um link
   perdido no meio de texto. */
.perm-perfil-bloco {
  display: grid;
  gap: 6px;
}
.perm-perfil-atual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.perm-perfil-nome {
  margin: 0;
  color: var(--foreground);
  font-size: 20px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.perm-perfil-bloco .seletor {
  max-width: 320px;
}
.perm-perfil-aviso {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--muted);
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.5;
}
.perm-perfil-aviso[hidden] {
  display: none;
}
.perm-entra {
  font-size: 14px;
}
.perm-legenda {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.8;
}
.perm-btn-perigo.btn.vazado {
  border-color: color-mix(in srgb, var(--perigo) 50%, var(--border));
  color: var(--perigo);
}
@media (hover: hover) and (pointer: fine) {
  .perm-btn-perigo.btn.vazado:not(:disabled):hover {
    border-color: var(--perigo);
    background: var(--perigo-fundo);
  }
}
.btn.primario.perm-btn-perigo-cheio {
  background: var(--perigo);
  color: var(--background);
}

/* o formulário de perfil novo, dentro do editor: sem janela, porque não protege nada */
.perm-novo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px dashed var(--input);
  border-radius: var(--radius);
}
.perm-novo-campo {
  display: grid;
  min-width: 0;
}
.perm-novo-campo .seletor,
.perm-novo-campo .campo {
  width: 100%;
}
.perm-novo-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.perm-novo .perm-erro {
  grid-column: 1 / -1;
}

/* ---------- um sistema: o interruptor e os grupos ---------- */
.perm-sistemas {
  display: grid;
  gap: 16px;
}
.perm-sistema {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  min-width: 0;
}
.perm-sistema-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.perm-sistema-cab h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.perm-desligado {
  margin: 0;
  color: var(--alerta);
  font-size: 13px;
  font-weight: 600;
}
.perm-desligado[hidden] {
  display: none;
}
/* desligado, as telas continuam como estão, mas apagadas: nada delas vale */
.perm-sistema--desligado .perm-grupo {
  opacity: 0.55;
}

.perm-chave {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
/* O INTERRUPTOR: a caixa de marcar de verdade, com papel de "switch", desenhada por cima. Continua
   sendo um <input>: pega foco, responde a espaço e é anunciada como ligada ou desligada. */
/* `.perm input.` e não só a classe: a regra geral de caixa de marcar (erp-kit.css, `input[type="checkbox"]`)
   pesa mais que uma classe sozinha e encolhia o interruptor para 16 px */
.perm input.perm-interruptor {
  appearance: none;
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--input);
  border-radius: 999px;
  background: var(--muted);
  cursor: pointer;
  transition:
    background-color var(--rapido) ease,
    border-color var(--rapido) ease;
}
.perm input.perm-interruptor::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--muted-foreground);
  transition:
    transform var(--medio) var(--saida),
    background-color var(--rapido) ease;
}
.perm input.perm-interruptor:checked {
  border-color: var(--primary);
  background: var(--primary);
}
.perm input.perm-interruptor:checked::after {
  transform: translateX(16px);
  background: var(--primary-foreground);
}
.perm input.perm-interruptor:disabled,
.perm .perm-acao input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.perm-grupo {
  border-top: 1px solid var(--border);
}
.perm-grupo > summary {
  display: flex;
  /* sem quebrar a linha inteira (r25): com os nomes das telas embaixo do nome do grupo, quebrar jogava a seta
     numa linha e a contagem noutra; quem quebra agora é só o texto de dentro do nome */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  min-height: 40px;
  padding: 6px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
}
.perm-grupo > summary::-webkit-details-marker {
  display: none;
}
.perm-grupo > summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid var(--muted-foreground);
  border-bottom: 2px solid var(--muted-foreground);
  transform: rotate(-45deg);
  transition: transform var(--rapido) ease;
}
.perm-grupo[open] > summary::before {
  transform: rotate(45deg);
}
.perm-grupo-nome {
  flex: 1 1 0;
  min-width: 0;
}
/* os nomes das telas do grupo, embaixo do nome dele, na letra de apoio (r25) */
.perm-grupo-telas {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}
.perm-grupo-conta {
  flex: none;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 500;
}
.perm-grupo-corpo {
  display: grid;
  gap: 4px;
  padding: 0 0 12px;
}
.perm-grupo-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 8px;
}

/* ---------- uma tela: o nome e uma caixa por ação ----------
   As quatro colunas de ação têm a mesma largura em toda linha, para o olho descer uma coluna ("quem
   pode excluir aqui?") sem saltar. A ação que a tela não tem deixa o lugar vazio. */
.perm-tela {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: center;
  padding: 6px 4px;
}
/* A LINHA ZEBRADA NÃO TEM CANTO REDONDO, de propósito: com canto ela vira "caixa" para o medidor de
   colisão da casa (scripts/medir-colisao-comum.mjs), e as linhas de um grupo FECHADO (que o Chromium
   ainda mede, dentro do <details>) apareciam sobrepostas às do grupo aberto. Uma lista é uma lista. */
.perm-tela:nth-child(even) {
  background: color-mix(in srgb, var(--muted) 60%, transparent);
}
.perm-tela--parte {
  margin-left: 20px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
.perm-tela--apagada .perm-acoes {
  opacity: 0.55;
}
.perm-tela-nome {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.perm-nota {
  margin: 0;
  color: var(--alerta);
  font-size: 12px;
  font-weight: 600;
}
.perm-nota[hidden] {
  display: none;
}
.perm-acoes {
  display: grid;
  grid-template-columns: repeat(4, 84px);
  gap: 4px;
}
.perm-acao {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 2px 6px;
  min-height: 36px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  transition: background-color var(--rapido) ease;
}
@media (hover: hover) and (pointer: fine) {
  .perm-acao:not(.perm-acao--nao-tem):hover {
    background: var(--accent);
  }
}
.perm .perm-acao input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
}
.perm-acao:focus-within {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}
.perm-acao--nao-vale .perm-acao-nome {
  text-decoration: line-through;
  color: var(--muted-foreground);
}
.perm-dizem {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted-foreground);
  /* 13 px: e a frase do que cada acao deixa fazer ("Criar: cadastrar box e inquilino..."), texto corrido no
     computador (regua da Apple, r38) */
  font-size: 13px;
  line-height: 1.5;
}
.perm-dizem b {
  color: var(--foreground);
  font-weight: 600;
}

/* a origem de cada marca, na pessoa: em palavras, e a cor só reforça */
.perm-marca {
  flex-basis: 100%;
  color: var(--muted-foreground);
  font-size: 11px;
  line-height: 1.3;
}
.perm-chave .perm-marca {
  flex-basis: auto;
}
.perm-legenda .perm-marca {
  font-size: 12px;
  font-weight: 600;
}
.perm-marca--dado {
  color: var(--ok);
  font-weight: 600;
}
.perm-marca--tirado {
  color: var(--perigo);
  font-weight: 600;
}
.perm-editor[data-editor="pessoa"] .perm-acoes {
  grid-template-columns: repeat(4, 104px);
}

/* No editor estreito (o celular, o iPad em pé), o nome vai para cima e as ações descem para uma
   fileira própria, que quebra em duas quando nem assim cabe (320 px). */
@container (max-width: 820px) {
  .perm-tela {
    grid-template-columns: minmax(0, 1fr);
  }
  .perm-acoes,
  .perm-editor[data-editor="pessoa"] .perm-acoes {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  }
  .perm-tela--parte {
    margin-left: 8px;
  }
}

/* ---------- a barra das mudanças não salvas ----------
   `sticky` no pé da tela: enquanto houver mudança ela fica à vista, por mais comprida que a lista de
   telas seja, e some quando não há nada para salvar. */
.perm-barra {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 12px 16px calc(12px + var(--recorte-base, 0px));
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--sombra-lg);
}
.perm-barra[hidden] {
  display: none;
}
.perm-barra-texto {
  display: grid;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}
.perm-barra-frase {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.perm-barra-lista > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.perm-barra-lista[open] {
  max-height: 40vh;
  overflow-y: auto;
}
.perm-barra-grupo {
  margin-top: 6px;
  font-size: 13px;
}
.perm-barra-grupo ul {
  margin: 4px 0 0;
  padding-left: 18px;
}
.perm-barra-grupo li {
  line-height: 1.5;
}
.perm-barra-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.perm-janela {
  display: grid;
  gap: 10px;
  max-width: 56ch;
}
.perm-janela p {
  margin: 0;
  line-height: 1.5;
}
.perm-janela-botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- a mudança de permissão na ficha da Auditoria ----------
   "Como era" e "Como ficou" guardam a quebra de linha que o servidor escreveu (uma coisa por linha),
   e o texto comprido fecha em oito linhas, com "Ver tudo" para abrir. */
.aud-mudanca {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.aud-bloco {
  display: grid;
  gap: 6px;
  align-content: start;
  justify-items: start;
  min-width: 0;
}
.aud-bloco h3 {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 600;
}
.aud-texto {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.aud-texto--fechado {
  max-height: calc(8 * 1.5em + 20px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

/* ---------- piso de toque ---------- */
@media (pointer: coarse) {
  .perm-acao,
  .perm-chave,
  .perm-grupo > summary,
  .perm-barra-lista > summary,
  .perm-item {
    min-height: 44px;
  }
  .perm .btn,
  .perm .seletor,
  .perm .campo {
    min-height: 44px;
  }
}

/* No mais estreito (320 px) as quatro ações quebram em duas fileiras, e o lugar vazio da ação que a
   tela não tem viraria uma fileira em branco: ali ele some, e as caixas que existem sobem juntas. */
@container (max-width: 340px) {
  .perm-acao--nao-tem {
    display: none;
  }
}

/* NO COMPUTADOR A LISTA ACOMPANHA A ROLAGEM: o editor de um perfil é comprido (quatro sistemas), e
   rolar até a Polo não pode deixar a coluna da esquerda em branco, sem o caminho para outro perfil.
   Ela para logo abaixo do topo do painel e, se for mais alta que a janela, rola por dentro. Só com
   as duas colunas: no celular a lista fica em cima do editor e não prende nada. */
@container (min-width: 821px) {
  .perm-lista {
    position: sticky;
    top: calc(var(--topo-h, 57px) + 12px);
    max-height: calc(100vh - var(--topo-h, 57px) - 24px);
    overflow-y: auto;
  }
}