/*
 * A administracao, por cima da casca da dashboard do dono.
 *
 * `casca.css` e `pulso.css` ja trazem a barra, o topo e o comportamento no celular — sao os
 * MESMOS da dashboard, de proposito: quem sai de uma tela para a outra nao pode sentir que
 * trocou de produto. Aqui fica so o que e desta pagina: as vistas, os cartoes da visao geral, a
 * atividade recente, as filas como chips, os paineis de configuracao e a faixa de cobranca.
 */

/* `.app` e uma grade; `hidden` precisa vencer a grade, senao a tela negada aparece em cima. */
#tela-admin[hidden] { display: none; }

/* ------------------------------------------------------------------------------- topo */

.topo-vista { color: var(--texto); }

/* A contagem ao lado de "Licenses" na barra: um numero pequeno, na cor de atencao. */
.nav-conta {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--raio-pilula);
  background: color-mix(in srgb, var(--atencao) 18%, transparent);
  color: var(--atencao);
  font-size: 0.7rem;
  font-weight: 600;
}

/* ------------------------------------------------------------------------------ vistas */

/* Uma vista por vez. `hidden` no atributo, e nao classe: e o que o script troca. */
.vista[hidden] { display: none; }
.vista { animation: surgir-acima var(--t-medio) var(--saida) both; }

/* ------------------------------------------------------------------------ visao geral */

/* Quatro numeros grandes, e cada um e uma porta para a fila que o explica. */
.visao-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.visao-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 16px;
  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);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--t-rapido) var(--entrada), transform var(--t-medio) var(--saida);
}

/* A faixa da esquerda diz o TOM da fila; o numero diz o tamanho. */
.visao-cartao::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--texto-tenue);
}

.visao-cartao:hover { border-color: var(--linha-viva); transform: translateY(-2px); }
.visao-cartao:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: 2px; }

.visao-cartao--atencao::before { background: var(--atencao); }
.visao-cartao--dinheiro::before { background: var(--ouro); }
.visao-cartao--dinheiro .visao-num { color: var(--ouro); }

.visao-rotulo {
  font-family: var(--maquina);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.visao-num {
  font-family: var(--titulo);
  font-size: 2.3rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.visao-nota { font-size: 0.78rem; color: var(--texto-tenue); }

/* A segunda linha da visao: o que precisa de mim, a carteira — e a atividade, na largura toda. */
/*
 * `stretch`, e nao `start`.
 *
 * Os tres blocos da primeira fila tem alturas naturais bem diferentes — a mistura de planos e
 * curta, as vendas sao longas. Com `start`, o mais curto deixa um buraco sem moldura no meio da
 * tela, que se le como "faltou carregar alguma coisa". Terminando na mesma linha, o vazio fica
 * DENTRO do cartao, e ai e so respiro.
 */
.visao-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 14px;
  align-items: stretch;
}

.visao-bloco {
  padding: 16px 18px 18px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--vidro);
  box-shadow: var(--relevo), var(--sombra-cartao);
}

.visao-bloco--largo { grid-column: 1 / -1; }

.visao-bloco-titulo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  margin: 0 0 12px;
  font-family: var(--titulo);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}

/* "Needs you": so as filas com alguma coisa dentro, cada uma um link para a lista filtrada. */
.visao-filas { display: grid; gap: 4px; }

.visao-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid var(--texto-tenue);
  border-radius: var(--raio-p);
  color: var(--texto-fraco);
  text-decoration: none;
  font-size: 0.86rem;
  transition: background var(--t-rapido) var(--entrada), color var(--t-rapido) var(--entrada);
}

.visao-fila:hover { background: var(--vidro-alto); color: var(--texto); }
.visao-fila b { color: var(--texto); font-variant-numeric: tabular-nums; }
.visao-fila--atencao { border-left-color: var(--atencao); }
.visao-fila--dinheiro { border-left-color: var(--ouro); }
.visao-fila--erro { border-left-color: var(--erro); }

.visao-quieto { margin: 0; font-size: 0.9rem; color: var(--texto-fraco); }

/* Onde eu tenho acesso agora. Uma linha por licenca, com a saida ao lado dela. */
.acessos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.acesso-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 0.9rem;
}

/* A saida fica sempre visivel, e nao no hover: o gesto que se quer ao fechar um chamado. */
.acesso-linha button { flex: 0 0 auto; }
.visao-mais { margin-top: 12px; display: inline-flex; }

/* ------------------------------------------------------------------------- atividade
   O que aconteceu por ultimo: emissao, alteracao, revogacao, pagamento. Uma linha por evento,
   com o ponto no tom do que aconteceu e o instante em mono, ancorado a direita. */

.atividade-lista { list-style: none; margin: 0; padding: 0; display: grid; }

.atividade-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 12px;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--linha) 55%, transparent);
}

.atividade-item:last-child { border-bottom: 0; }

.atividade-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-tenue); align-self: center; }
.atividade-ponto--roxo { background: var(--roxo-claro); }
.atividade-ponto--ouro { background: var(--ouro); }
.atividade-ponto--erro { background: var(--erro); }
.atividade-ponto--atencao { background: var(--atencao); }

.atividade-texto { min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.atividade-texto b { font-weight: 600; color: var(--texto); font-size: 0.9rem; }
.atividade-detalhe { color: var(--texto-fraco); font-size: 0.82rem; overflow-wrap: anywhere; }
.atividade-quando { color: var(--texto-tenue); font-size: 0.72rem; white-space: nowrap; }

/* O evento que aponta para uma licenca e um botao com cara de texto: clicar filtra a lista. */
.atividade-alvo {
  font: inherit;
  font-weight: 600;
  padding: 0;
  min-height: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--texto);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.atividade-alvo:hover { color: var(--roxo-claro); background: none; }

/* ------------------------------------------------------------------------------ filas */

/* As filas sao CHIPS numa faixa acima da lista: o filtro mora ao lado do que ele filtra. */
.filas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }

.fila {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 0.85rem 0 0.7rem;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--texto-tenue);
  border-radius: var(--raio-pilula);
  background: var(--vidro);
  color: var(--texto-fraco);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--relevo);
  transition: background var(--t-rapido) var(--entrada), color var(--t-rapido) var(--entrada), border-color var(--t-rapido) var(--entrada);
}

.fila-num { font-size: 0.86rem; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }

.fila:hover { background: var(--vidro-alto); color: var(--texto); }
.fila:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: 2px; }

/* A fila VALENDO: fundo cheio, para ser a resposta a "por que a lista esta assim?". */
.fila[aria-pressed='true'] {
  background: linear-gradient(90deg, color-mix(in srgb, var(--roxo) 30%, transparent), color-mix(in srgb, var(--roxo) 12%, transparent));
  border-color: var(--linha-viva);
  color: var(--texto);
}

/* Vazia APAGA em vez de sumir: sumir mudaria a posicao das outras a cada ronda. */
.fila[data-vazia='sim'] { opacity: 0.45; }

.fila--atencao { border-left-color: var(--atencao); }
.fila--dinheiro { border-left-color: var(--ouro); }
.fila--erro { border-left-color: var(--erro); }
.fila--fraca { border-left-color: var(--texto-tenue); }
.fila--dinheiro .fila-num { color: var(--ouro); }

/* ----------------------------------------------------------------------------- filtros */

.filtros { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.25rem; }

.filtro { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--texto-fraco); font-size: 0.9rem; cursor: pointer; }
.filtro span { white-space: nowrap; }

#filtro-busca {
  flex: 1 1 18rem;
  min-height: 42px;
  padding: 0 0.85rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--preto);
  color: var(--texto);
  font-size: 0.9rem;
}

/* -------------------------------------------------------------------- paineis de config */

/* Um painel de configuracao e um cartao com titulo e dica, sempre ABERTO. */
.painel-config {
  padding: 18px 20px 20px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: linear-gradient(180deg, var(--vidro-alto), var(--vidro) 60%);
  box-shadow: var(--relevo), var(--sombra-cartao);
}

.painel-config + .painel-config { margin-top: 14px; }

.painel-config h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  margin: 0 0 10px;
  font-family: var(--titulo);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.painel-config .regras-nota { margin-top: 0; }

/* A dica ao lado do titulo: o que abrir custa, ou o que mudar alcanca. */
.painel-dica,
.ajuste-dica {
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--texto-fraco);
  letter-spacing: 0;
}

.ajustes > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.6rem; }
.ajustes[open] > summary .ajuste-dica { opacity: 0.55; }

/* O formulario da comunidade: rotulo em cima do campo, e o botao no fim da linha. */
.forma-comunidade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 14px;
}

.campo-rotulado { display: grid; gap: 5px; }
.campo-rotulado > span { font-size: 0.78rem; color: var(--texto-fraco); }
.campo-rotulado--largo { grid-column: 1 / -1; }
.forma-comunidade .primario { justify-self: start; }

/*
 * A zona perigosa: a restauracao substitui todo o banco. Nao ganha vermelho gritante — ela nao
 * e um erro, e um alarme permanente vira ruido. Ganha a borda e o titulo na cor de falha.
 */
.painel-config--perigo {
  margin-top: 22px;
  border-color: color-mix(in srgb, var(--erro) 40%, var(--linha));
  background: linear-gradient(180deg, color-mix(in srgb, var(--erro) 6%, var(--vidro-alto)), var(--vidro) 60%);
}

.painel-config--perigo h2 { color: var(--erro); }
.painel-config--perigo .painel-dica { color: color-mix(in srgb, var(--erro) 72%, var(--texto-fraco)); }

/* O botao que confirma tambem veste o perigo: e o ultimo passo antes do irreversivel. */
.painel-config--perigo .primario { background: var(--erro); border-color: var(--erro); color: var(--preto); box-shadow: none; }
.painel-config--perigo .primario:hover { filter: brightness(1.08); }

/* --------------------------------------------------- os retratos diarios da central

   Eles moram DENTRO do bloco de perigo, e por isso nao vestem o vermelho: a lista e leitura,
   e o vermelho e do que escreve. Um indice em tom de alerta ensinaria o admin a ignorar o
   alerta — e ai ele o ignora no formulario logo acima, que e onde ele importa. */
.subtitulo-config {
  margin: 22px 0 6px;
  font-size: 0.82rem;
  font-weight: 620;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.lista-instantaneos { list-style: none; margin: 10px 0 0; padding: 0; }

.linha-instantaneo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--linha) 55%, transparent);
  font-size: 0.86rem;
}

.linha-instantaneo:last-child { border-bottom: none; }

/* A data empurra o resto para a direita: o peso e o link ficam alinhados entre as linhas. */
.linha-instantaneo > span:first-child { flex: 1; min-width: 0; color: var(--texto); }
.linha-instantaneo > .mono { color: var(--texto-fraco); font-size: 0.8rem; }

.linha-instantaneo > a {
  flex: none;
  color: var(--roxo-claro);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.linha-instantaneo > a:hover { border-bottom-color: currentColor; }
.linha-instantaneo > a:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: 2px; }

/* ------------------------------------------------------ a faixa de estado da cobranca
   "Estou vendendo?" antes de qualquer configuracao. O farol e uma barra vertical. */
.cobranca {
  position: relative;
  margin: 0 0 14px;
  padding: 1.15rem 1.25rem 1.15rem 1.6rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: linear-gradient(180deg, var(--vidro-alto), var(--vidro));
  box-shadow: var(--relevo), var(--sombra-cartao);
  overflow: hidden;
}

.cobranca-farol { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--texto-fraco); }
.cobranca[data-tom='ok'] .cobranca-farol { background: var(--ok); }
.cobranca[data-tom='parado'] .cobranca-farol { background: var(--atencao); }

.cobranca-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }

.cobranca-titulo { margin: 0; font-family: var(--titulo); font-size: 1.15rem; letter-spacing: -0.01em; }
.cobranca[data-tom='ok'] .cobranca-titulo { color: var(--ok); }
.cobranca[data-tom='parado'] .cobranca-titulo { color: var(--atencao); }

.cobranca-resumo { margin: 0; color: var(--texto-fraco); font-size: 0.92rem; flex: 1 1 16rem; }

/* Cada motivo e um passo com ENDERECO: onde se resolve, e se exige reinicio. */
.cobranca-passo { margin-top: 0.9rem; }

.cobranca-onde { margin: 0 0 0.35rem; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-fraco); }

.cobranca-itens { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; }
.cobranca-itens.mono { font-family: var(--maquina); font-size: 0.84rem; }

/* Os enderecos dos webhooks: leitura de maquina, entao mono e com o copiar ao lado. */
.cobranca-webhooks { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--linha); }

.cobranca-webhook { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0.35rem 0; }
.cobranca-webhook-nome { flex: none; min-width: 7rem; font-size: 0.86rem; color: var(--texto-fraco); }

.cobranca-webhook-url {
  flex: 1 1 18rem;
  min-width: 0;
  overflow-x: auto;
  padding: 0.3rem 0.5rem;
  border-radius: var(--raio-p);
  background: var(--preto);
  font-family: var(--maquina);
  font-size: 0.8rem;
  white-space: nowrap;
}

.cobranca-copiar { flex: none; padding: 0.3rem 0.7rem; font-size: 0.8rem; min-height: 32px; }

@media (max-width: 700px) { .cobranca-webhook-nome { min-width: 100%; } }

/* ---------------------------------------------------------------------------- celular */

@media (max-width: 860px) {
  /* A casca ja deita a barra. NAO dar `padding-right` a barra para abrir folga: o Chrome encolhe
     o retangulo do sticky pelo padding. */
  .visao-num { font-size: 1.7rem; }
  .painel-config { padding: 14px 14px 16px; }
  /* O instante desce para a segunda linha: no celular ele nao disputa com o titulo do evento. */
  .atividade-item { grid-template-columns: 10px minmax(0, 1fr); }
  .atividade-quando { grid-column: 2; }
}

/* ==================================================================== a FROTA

   Uma tela de operacao, e nao de configuracao: nenhum botao, e a leitura de relance vale mais
   que a precisao. Por isso as versoes sao BARRAS — "a maioria ja atualizou?" se responde pelo
   comprimento, e os numeros ficam ao lado para quem precisa do exato. */

.frota-versao {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.frota-versao + .frota-versao { border-top: 1px solid var(--linha); }

.frota-versao-nome { font-size: 0.84rem; color: var(--texto); overflow-wrap: anywhere; }
.frota-versao-conta { font-size: 0.84rem; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }

.frota-barra {
  height: 8px;
  border-radius: var(--raio-pilula);
  background: var(--elevado);
  overflow: hidden;
}

/* Minimo de 2px: uma versao com um painel so precisa APARECER, e 0,4%% de largura nao aparece. */
.frota-barra-fatia { min-width: 2px; height: 100%%; background: var(--roxo); border-radius: inherit; }

.frota-lista { display: grid; }

/* Acima de uma duzia a lista rola dentro de si, e nao empurra o resto da pagina para fora.
   Mesma regra das duas colunas de Players, e o mesmo `scrollbar-gutter` para nao pular. */
.frota-lista--rola { max-height: 60vh; overflow-y: auto; scrollbar-gutter: stable; }