/*
 * A FICHA de uma licenca: o cartao da lista, e nada da casca em volta.
 *
 * O que se FAZ com a licenca (revogar, chave assinada, arquivar) mora em `adminGestao.css`, e
 * essa fronteira ja existia: ler e agir sao duas classes de gesto, e so a segunda destroi algo.
 */

/* ---------------------------------------------------------------------------- a licenca */

/* O respiro entre fichas e MAIOR que o respiro dentro delas: senao o olho le a lista como um
   bloco continuo. */
#lista-licencas { display: grid; gap: 1.1rem; }

.licenca {
  padding: 1rem 1.15rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: linear-gradient(180deg, var(--vidro-alto), var(--vidro) 70%);
  box-shadow: var(--relevo), var(--sombra-cartao);
  transition: border-color var(--t-rapido) var(--entrada), background var(--t-rapido) var(--entrada);
}

/* O acender no hover marca em qual linha o olho esta durante a varredura. */
#lista-licencas > .licenca:hover { border-color: var(--linha-viva); }

/* A revogada continua na lista, apagada. Sumir com ela apagaria a unica prova visivel de que a
   decisao foi tomada. */
.licenca--revogada { opacity: 0.72; border-color: color-mix(in srgb, var(--erro) 45%, var(--linha)); }

/* Arquivada e mais apagada que revogada, e sem a borda vermelha: "eu ja resolvi isto". */
.licenca--arquivada { opacity: 0.55; border-color: var(--linha); box-shadow: none; }

.licenca-cabeca { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.9rem; }

/* O id LIDERA a ficha: e o que se procura, com um chamado na mao. */
.licenca-id { font-size: 1.05rem; font-weight: 650; letter-spacing: 0.01em; color: var(--texto); }

/* O chip do plano fala na cor do plano — a mesma rampa da barra de planos. */
.licenca .chip { font-size: 0.72rem; padding: 3px 10px; }
.licenca[data-nivel='hatchling'] .chip { color: var(--texto-fraco); border-color: var(--borda); background: transparent; }
.licenca[data-nivel='elder'] .chip { color: var(--ouro); border-color: color-mix(in srgb, var(--ouro) 45%, transparent); background: var(--ouro-fraco); }

/* As etiquetas de ESTADO, empurradas para a direita: terminam sempre no mesmo x. */
.licenca-marcas { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-left: auto; }
.licenca-marcas:empty { display: none; }

.etiqueta {
  padding: 0.12rem 0.5rem;
  border-radius: var(--raio-pilula);
  border: 1px solid currentColor;
  font-family: var(--maquina);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.etiqueta--erro { color: var(--erro); }
.etiqueta--atencao { color: var(--atencao); }
.etiqueta--fraca { color: var(--texto-fraco); }

/* QUATRO colunas fixas, e nao `auto-fit`: numa lista que existe para ser VARRIDA, colunas que
   nao alinham entre linhas significam que o olho tem de reler cada ficha do zero. */
.licenca-dados { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem 1.4rem; margin: 0 0 0.8rem; }

.licenca-dados dt { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-fraco); font-family: var(--maquina); }

.licenca-dados dd { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--texto); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* A nota: prosa, largura inteira, e so quando existe. */
.licenca-nota { margin: 0 0 0.8rem; padding-left: 0.7rem; border-left: 2px solid var(--linha-viva); font-size: 0.88rem; color: var(--texto-fraco); overflow-wrap: anywhere; }

@media (max-width: 760px) { .licenca-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .licenca-dados { grid-template-columns: minmax(0, 1fr); } }

/* A revogacao FALA BAIXO: a etiqueta no alto ja diz o estado; esta linha e o detalhe. */
.licenca-revogacao { margin: 0 0 0.8rem; padding-left: 0.7rem; border-left: 2px solid color-mix(in srgb, var(--erro) 55%, transparent); font-size: 0.85rem; color: var(--texto-fraco); }

/* ---------------------------------------------------------------------------- maquinas */

.maquinas { margin: 0.5rem 0 0; padding: 0 0 0 1.1rem; display: grid; gap: 0.4rem; font-size: 0.82rem; }
.maquinas li { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.fraco { color: var(--texto-fraco); }

/* ---------------------------------------------------------------------------- historico
 * As alteracoes da licenca: renovacao, upgrade — quem, quando, antes e depois. E o que
 * responde "eu paguei por Elder" com registro, e nao com memoria. */

.historico { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; font-size: 0.82rem; }

.historico li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.2rem 0.75rem;
  align-items: baseline;
  padding: 0.4rem 0.6rem;
  border-radius: var(--raio-p);
  background: color-mix(in srgb, var(--preto) 55%, var(--vidro));
}

.historico-quando { color: var(--texto-tenue); font-size: 0.74rem; white-space: nowrap; }
.historico-mudanca { color: var(--texto); font-weight: 600; }
.historico-nota { grid-column: 2 / -1; color: var(--texto-fraco); font-size: 0.8rem; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------- revogar */

.forma-revogar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }

/*
 * O acesso de suporte ganha moldura, e os vizinhos fantasma nao.
 *
 * `.fantasma` so mostra a borda no hover, e isso serve para arquivar e desfazer — que sao raros.
 * Entrar na dashboard de um cliente e o gesto de TODO atendimento: sem moldura ele le como texto,
 * e o caminho mais curto para resolver um chamado seria o menos visivel da ficha.
 */
.acesso-suporte {
  border-color: var(--borda);
  color: var(--texto);
  margin-top: 0.5rem;
}

.acesso-suporte:hover { border-color: var(--roxo); }

.motivo {
  flex: 1 1 16rem;
  min-height: 40px;
  padding: 0 0.7rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--preto);
  color: var(--texto);
  font-size: 0.88rem;
}

/* O botao que mata a chave de um cliente pagante: contorno, e nao preenchido. Preenchido de
   vermelho ele viraria o elemento mais chamativo de uma pagina que eu abro para LER. */
.perigo {
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--erro);
  border-radius: var(--raio-p);
  background: transparent;
  box-shadow: none;
  color: var(--erro);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.perigo:hover, .perigo:focus-visible { background: color-mix(in srgb, var(--erro) 14%, transparent); border-color: var(--erro); }
.perigo.armado { background: var(--erro); color: var(--preto); font-weight: 600; }
.perigo:disabled { opacity: 0.5; cursor: default; }

/* ------------------------------------------------------------------- a chave assinada */

/* A chave e o unico portador do produto. Borda ambar, nao roxa — abrir isto tem peso diferente
   de ler quando a licenca expira. */
.bloco-chave { margin-top: 0.75rem; border-color: color-mix(in srgb, var(--atencao) 35%, var(--linha)); }
.bloco-chave > summary { color: var(--atencao); }
.bloco-chave.carregando > summary { cursor: progress; opacity: 0.6; }

.aviso-chave { margin: 0.5rem 0; font-size: 0.85rem; line-height: 1.5; }

/* Rolagem propria, e nao quebra de linha livre: a chave e uma unica sequencia longa. */
.campo-chave {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--preto);
  color: var(--texto);
  font-family: var(--maquina);
  font-size: 0.8rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  resize: vertical;
}