/* ==========================================================================
   Painel administrativo (admin.zoltwo.com)
   --------------------------------------------------------------------------
   Reaproveita os tokens de zoltwo.css -- as cores sao as mesmas da marca --
   mas o layout e proprio: aqui a tela e uma grade densa de dados, nao um
   painel de leitura. Por isso a fonte menor, o espacamento apertado e a
   monospace nos valores, onde alinhar digito com digito importa.

   Sem aurora de fundo: a animacao ajuda o produto a parecer vivo e atrapalha
   uma ferramenta em que se fica lendo numeros.
   ========================================================================== */

.adm {
  background: var(--carvao-fundo);
  font-size: 13px;
}

.adm__app {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

/* --- Lateral ---------------------------------------------------------- */

.adm__lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--carvao);
  border-right: 1px solid var(--carvao-linha);
  overflow: hidden;
}

.adm__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--carvao-linha);
}

.adm__marca img { width: 30px; height: 30px; flex: none; }
.adm__marca-nome { font-weight: 800; font-size: 16px; letter-spacing: -0.03em; color: var(--branco); }
.adm__marca-sub { font-size: 10.5px; color: var(--texto-fraco); letter-spacing: 0.04em; text-transform: uppercase; }

.adm__secao-rotulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  padding: 16px 16px 8px;
}

.adm__tabelas { flex: 1; overflow-y: auto; padding: 0 8px 8px; }

.adm__tabela {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--texto-suave);
  font-size: 12.5px;
  transition: background .12s, color .12s;
}

.adm__tabela:hover { background: rgba(255, 255, 255, .05); color: var(--texto); }

.adm__tabela.ativo {
  background: var(--azul-fundo);
  color: var(--branco);
  box-shadow: inset 2px 0 0 var(--azul);
}

.adm__tabela-nome { font-family: ui-monospace, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; }

.adm__contagem {
  font-size: 10.5px;
  color: var(--texto-fraco);
  background: rgba(255, 255, 255, .05);
  padding: 1px 7px;
  border-radius: 999px;
  flex: none;
  font-variant-numeric: tabular-nums;
}

.adm__tabela.ativo .adm__contagem { background: rgba(0, 145, 255, .2); color: var(--azul-claro); }

.adm__lateral-rodape { padding: 12px 16px; border-top: 1px solid var(--carvao-linha); }
.adm__sair { color: var(--texto-fraco); text-decoration: none; font-size: 12.5px; }
.adm__sair:hover { color: var(--rosa-claro); }

/* --- Conteudo --------------------------------------------------------- */

.adm__conteudo { min-width: 0; padding: 22px 24px 60px; }

.adm__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.adm__titulo {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--branco);
  margin: 0;
}

.adm__subtitulo { color: var(--texto-fraco); font-size: 12.5px; margin: 4px 0 0; }

.adm__stats { display: flex; gap: 10px; flex-wrap: wrap; }

.adm__stat {
  background: var(--carvao-claro);
  border: 1px solid var(--carvao-linha);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 108px;
}

.adm__stat-rotulo { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); }
.adm__stat-valor { font-size: 17px; font-weight: 700; color: var(--branco); margin-top: 2px; }

/* --- Grade de dados --------------------------------------------------- */

.adm__grade {
  background: var(--carvao-claro);
  border: 1px solid var(--carvao-linha);
  border-radius: 12px;
  overflow: auto;
  /* A altura fixa e o que mantem o cabecalho colado no topo enquanto a grade
     rola -- sem isso, `position: sticky` no `th` nao tem container para grudar. */
  max-height: calc(100vh - 210px);
}

.adm__grade table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }

.adm__grade th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #12151d;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  padding: 9px 12px;
  border-bottom: 1px solid var(--carvao-linha);
  white-space: nowrap;
}

.adm__grade th small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .65; }

.adm__grade td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(34, 40, 54, .55);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  color: var(--texto-suave);
  white-space: nowrap;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm__grade tr:hover td { background: rgba(255, 255, 255, .025); }
.adm__grade tr:last-child td { border-bottom: none; }

.adm__nulo { color: var(--texto-fraco); font-style: italic; opacity: .7; }
.adm__bool-t { color: var(--ok); }
.adm__bool-f { color: var(--texto-fraco); }
.adm__num { text-align: right; font-variant-numeric: tabular-nums; }

.adm__acao-celula { position: sticky; right: 0; background: var(--carvao-claro); }
.adm__grade tr:hover .adm__acao-celula { background: #181c26; }

/* --- Barra de ferramentas --------------------------------------------- */

.adm__ferramentas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.adm__busca {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  background: var(--carvao-fundo);
  border: 1px solid var(--carvao-linha);
  border-radius: 9px;
  padding: 8px 12px;
  color: var(--texto);
  font-family: inherit;
  font-size: 12.5px;
}

.adm__busca:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-fundo); }

.adm__paginacao { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--texto-fraco); font-size: 12px; }

.adm__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--carvao-linha);
  background: rgba(255, 255, 255, .04);
  color: var(--texto);
  text-decoration: none;
  cursor: pointer;
}

.adm__btn:hover { background: rgba(255, 255, 255, .08); }
.adm__btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.adm__btn--azul { background: linear-gradient(135deg, var(--azul), #0072d6); border-color: transparent; color: #fff; }
.adm__btn--perigo { color: var(--erro); border-color: rgba(255, 77, 77, .3); background: var(--erro-fundo); }
.adm__btn--perigo:hover { background: rgba(255, 77, 77, .18); }

/* --- Formulario de edicao --------------------------------------------- */

.adm__form { max-width: 720px; }

.adm__campo {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(34, 40, 54, .55);
}

.adm__campo-rotulo { padding-top: 8px; }
.adm__campo-nome { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--texto); font-weight: 600; }
.adm__campo-tipo { font-size: 10.5px; color: var(--texto-fraco); margin-top: 2px; }

.adm__campo input, .adm__campo textarea {
  width: 100%;
  background: var(--carvao-fundo);
  border: 1px solid var(--carvao-linha);
  border-radius: 9px;
  padding: 9px 12px;
  color: var(--texto);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
}

.adm__campo input:focus, .adm__campo textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-fundo);
}

.adm__campo input:disabled, .adm__campo textarea:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: rgba(255, 255, 255, .02);
}

.adm__campo textarea { min-height: 76px; resize: vertical; line-height: 1.5; }

.adm__form-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
}

/* --- Login ------------------------------------------------------------ */

.adm__login { min-height: 100dvh; display: flex; padding: 40px 20px; }
.adm__login-caixa { margin: auto; width: 100%; max-width: 380px; }
.adm__login-marca { text-align: center; margin-bottom: 26px; }
.adm__login-marca img { width: 62px; height: 62px; display: block; margin: 0 auto 12px; }
.adm__login-marca h1 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--branco); margin: 0; }
.adm__login-marca p { color: var(--texto-fraco); font-size: 12.5px; margin: 6px 0 0; letter-spacing: .04em; text-transform: uppercase; }

.adm__login-card {
  background: var(--carvao-claro);
  border: 1px solid var(--carvao-linha);
  border-radius: 14px;
  padding: 26px;
}

.adm__login-card label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--texto); }
.adm__login-card .adm__campo-simples { margin-bottom: 16px; }

.adm__login-card input {
  width: 100%;
  background: var(--carvao-fundo);
  border: 1px solid var(--carvao-linha);
  border-radius: 10px;
  padding: 11px 13px;
  color: var(--texto);
  font-family: inherit;
  font-size: 14px;
}

.adm__login-card input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-fundo); }

.adm__login-card button {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px;
  border: none;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--azul), #0072d6);
  cursor: pointer;
}

.adm__aviso { padding: 10px 14px; border-radius: 9px; margin-bottom: 16px; font-size: 12.5px; border: 1px solid transparent; }
.adm__aviso--erro { color: #ffb0b0; background: var(--erro-fundo); border-color: rgba(255, 77, 77, .3); }
.adm__aviso--ok { color: var(--ok); background: var(--ok-fundo); border-color: rgba(34, 211, 154, .3); }

.adm__vazio { padding: 50px 20px; text-align: center; color: var(--texto-fraco); }

@media (max-width: 860px) {
  .adm__app { grid-template-columns: 1fr; }
  .adm__lateral { position: static; height: auto; max-height: 220px; }
  .adm__conteudo { padding: 18px 16px 40px; }
  .adm__campo { grid-template-columns: 1fr; gap: 6px; }
  .adm__grade { max-height: none; }
}


/* ==========================================================================
   Navegacao por secoes
   ========================================================================== */

.adm__nav { padding: 10px 8px 4px; display: flex; flex-direction: column; gap: 2px; }

.adm__item {
  display: block;
  padding: 8px 11px;
  border-radius: 8px;
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background .12s, color .12s;
}

.adm__item:hover { background: rgba(255, 255, 255, .05); color: var(--texto); }

.adm__item.ativo {
  background: var(--azul-fundo);
  color: var(--branco);
  box-shadow: inset 2px 0 0 var(--azul);
}

.adm__sub-rotulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  padding: 14px 16px 6px;
  border-top: 1px solid var(--carvao-linha);
  margin-top: 8px;
}

/* ==========================================================================
   Cartoes de metrica
   ========================================================================== */

.adm__metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

.adm__metrica {
  position: relative;
  background: var(--carvao-claro);
  border: 1px solid var(--carvao-linha);
  border-radius: 12px;
  padding: 15px 17px;
  overflow: hidden;
}

/* A faixa superior faz a leitura ser pre-atencional: da para varrer o painel e
   situar cada numero antes de ler o rotulo. */
.adm__metrica::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--azul), var(--rosa));
}

.adm__metrica--azul::before { background: var(--azul); }
.adm__metrica--rosa::before { background: var(--rosa); }
.adm__metrica--ok::before   { background: var(--ok); }

.adm__metrica-rotulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.adm__metrica-valor {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--branco);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.adm__metrica-nota { font-size: 11.5px; color: var(--texto-fraco); margin-top: 2px; }

.adm__secao { margin-bottom: 28px; }

.adm__secao-rotulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin: 0 0 10px;
}

/* --- Lista de configuracao -------------------------------------------- */

.adm__config {
  background: var(--carvao-claro);
  border: 1px solid var(--carvao-linha);
  border-radius: 12px;
  overflow: hidden;
}

.adm__config-linha {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(34, 40, 54, .55);
  font-size: 12.5px;
}

.adm__config-linha:last-child { border-bottom: none; }
.adm__config-chave { color: var(--texto-suave); }
.adm__config-valor { font-family: ui-monospace, Consolas, monospace; color: var(--texto); }

/* --- Etiquetas de estado ---------------------------------------------- */

.adm__tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.adm__tag--ok      { color: var(--ok); background: var(--ok-fundo); border-color: rgba(34,211,154,.3); }
.adm__tag--neutra  { color: var(--texto-fraco); background: rgba(255,255,255,.05); border-color: var(--carvao-linha); }
.adm__tag--alerta  { color: var(--alerta); background: var(--alerta-fundo); border-color: rgba(255,179,64,.3); }
.adm__tag--azul    { color: var(--azul-claro); background: var(--azul-fundo); border-color: var(--azul-linha); }
.adm__tag--rosa    { color: var(--rosa-claro); background: var(--rosa-fundo); border-color: var(--rosa-linha); }

.adm__linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

@media (max-width: 1000px) {
  .adm__linha-dupla { grid-template-columns: 1fr; }
  .adm__config-linha { grid-template-columns: 1fr; gap: 3px; }
}