/* ==========================================================================
   admin.css — Painel /admin
   Mesma linguagem visual do site (tokens compartilhados), porém mais sóbrio:
   é uma ferramenta de operação, não uma vitrine.
   ========================================================================== */

.epg-admin,
.epg-admin-login {
  min-height: 100vh;
  background-color: var(--epg-surf-0);
  color: var(--epg-txt);
}

.epg-admin__inner {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--epg-gutter);
}

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

.epg-admin__topo {
  border-bottom: 1px solid var(--epg-line);
  background-color: var(--epg-surf-1);
}

.epg-admin__topo .epg-admin__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--epg-space-md);
  min-height: 3.25rem;
}

.epg-admin__marca {
  margin: 0;
  font-family: var(--epg-font-display);
  font-size: var(--epg-fs-md);
  font-weight: var(--epg-fw-bold);
}

.epg-admin__conta {
  display: flex;
  align-items: center;
  gap: var(--epg-space-sm);
}

.epg-admin__email {
  font-size: var(--epg-fs-2xs);
  color: var(--epg-txt-3);
}

/* -------------------------------------------------------------- conteúdo -- */

.epg-admin__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--epg-space-xl);
  padding-block: var(--epg-space-xl) var(--epg-space-2xl);
}

.epg-admin__secao {
  display: flex;
  flex-direction: column;
  gap: var(--epg-space-sm);
}

.epg-admin__titulo {
  margin: 0;
  font-family: var(--epg-font-display);
  font-size: var(--epg-fs-lg);
  font-weight: var(--epg-fw-semibold);
}

.epg-admin__nota {
  margin: 0;
  font-size: var(--epg-fs-xs);
  color: var(--epg-txt-3);
}

/* Avisos de resultado de ação */
.epg-admin__aviso {
  margin: 0;
  padding: var(--epg-space-sm) var(--epg-space-md);
  border-radius: var(--epg-radius-sm);
  border: 1px solid var(--epg-line);
  background-color: var(--epg-surf-2);
  font-size: var(--epg-fs-sm);
}

.epg-admin__aviso--ok {
  border-color: var(--epg-noar-borda);
  color: var(--epg-noar-claro);
}

.epg-admin__aviso--erro {
  border-color: var(--epg-erro, #FF6B6B);
  color: var(--epg-erro, #FF6B6B);
}

/* ---------------------------------------------------------------- cards -- */

.epg-admin__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--epg-space-sm);
}

.epg-admin__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--epg-space-md);
  border: 1px solid var(--epg-line);
  border-radius: var(--epg-radius-md);
  background-color: var(--epg-surf-1);
}

.epg-admin__num {
  font-family: var(--epg-font-mono);
  font-size: var(--epg-fs-xl);
  font-weight: var(--epg-fw-semibold);
  font-variant-numeric: tabular-nums;
}

.epg-admin__rot {
  font-size: var(--epg-fs-2xs);
  color: var(--epg-txt-3);
}

/* --------------------------------------------------------------- tabela -- */

.epg-admin__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--epg-fs-sm);
}

.epg-admin__tabela th,
.epg-admin__tabela td {
  padding: var(--epg-space-sm);
  text-align: start;
  border-bottom: 1px solid var(--epg-line);
}

.epg-admin__tabela th {
  font-size: var(--epg-fs-2xs);
  font-weight: var(--epg-fw-medium);
  color: var(--epg-txt-3);
  text-transform: uppercase;
  letter-spacing: var(--epg-ls-wide);
}

.epg-admin__tabela td {
  font-variant-numeric: tabular-nums;
  color: var(--epg-txt-2);
}

.epg-admin__selo {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--epg-radius-pill);
  border: 1px solid var(--epg-line);
  font-size: var(--epg-fs-3xs);
  font-family: var(--epg-font-mono);
}

.epg-admin__selo--ok   { color: var(--epg-noar-claro); border-color: var(--epg-noar-borda); }
.epg-admin__selo--erro { color: var(--epg-erro, #FF6B6B); border-color: var(--epg-erro, #FF6B6B); }

/* -------------------------------------------------------------- tarefas -- */

.epg-admin__tarefa {
  padding: var(--epg-space-md);
  border: 1px solid var(--epg-line);
  border-radius: var(--epg-radius-md);
  background-color: var(--epg-surf-1);
}

.epg-admin__tarefa + .epg-admin__tarefa {
  margin-top: var(--epg-space-sm);
}

.epg-admin__tarefa-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--epg-space-md);
  flex-wrap: wrap;
}

.epg-admin__tarefa-nome {
  margin: 0;
  font-size: var(--epg-fs-base);
  font-weight: var(--epg-fw-semibold);
}

.epg-admin__tarefa-desc {
  margin: 2px 0 0;
  font-size: var(--epg-fs-xs);
  color: var(--epg-txt-3);
}

.epg-admin__log {
  margin-top: var(--epg-space-sm);
  font-size: var(--epg-fs-2xs);
}

.epg-admin__log summary {
  cursor: pointer;
  color: var(--epg-txt-3);
}

.epg-admin__log pre {
  margin: var(--epg-space-2xs) 0 0;
  padding: var(--epg-space-sm);
  max-height: 16rem;
  overflow: auto;
  border-radius: var(--epg-radius-sm);
  background-color: var(--epg-surf-0);
  border: 1px solid var(--epg-line);
  font-family: var(--epg-font-mono);
  font-size: var(--epg-fs-3xs);
  line-height: 1.5;
  color: var(--epg-txt-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------------------------------------------------------------- login -- */

.epg-admin-login {
  display: grid;
  place-items: center;
  padding: var(--epg-space-lg);
}

.epg-login {
  width: 100%;
  max-width: 22rem;
  padding: var(--epg-space-xl);
  border: 1px solid var(--epg-line);
  border-radius: var(--epg-radius-lg);
  background-color: var(--epg-surf-1);
}

.epg-login__titulo {
  margin: 0 0 2px;
  font-family: var(--epg-font-display);
  font-size: var(--epg-fs-xl);
  font-weight: var(--epg-fw-bold);
}

.epg-login__sub {
  margin: 0 0 var(--epg-space-lg);
  font-size: var(--epg-fs-xs);
  color: var(--epg-txt-3);
}

.epg-login__form {
  display: flex;
  flex-direction: column;
  gap: var(--epg-space-md);
}

.epg-login__campo {
  display: flex;
  flex-direction: column;
  gap: var(--epg-space-2xs);
  font-size: var(--epg-fs-2xs);
  color: var(--epg-txt-3);
}

.epg-login__input {
  height: 2.25rem;
  padding-inline: var(--epg-space-sm);
  border: 1px solid var(--epg-line);
  border-radius: var(--epg-radius-sm);
  background-color: var(--epg-surf-2);
  color: var(--epg-txt);
  font-size: var(--epg-fs-sm);
}

.epg-login__input:focus-visible {
  outline: var(--epg-foco);
  outline-offset: 1px;
  border-color: var(--epg-line-forte);
}

.epg-login__botao {
  justify-content: center;
  margin-top: var(--epg-space-2xs);
}

.epg-login__voltar {
  margin: var(--epg-space-lg) 0 0;
  font-size: var(--epg-fs-2xs);
  text-align: center;
}

@media (max-width: 600px) {
  .epg-admin__tarefa-topo { align-items: flex-start; }
  .epg-admin__tabela { font-size: var(--epg-fs-xs); }
}

/* ------------------------------------------------------- candidatos ------ */

/* Opções de TMDb/IMDb sob o título consultado. Cartaz visível ao lado do ano
   e da fonte: é assim que se decide qual dos cinco "Umbrella" está passando. */
.epg-admin__candidatos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--epg-space-sm);
  margin-top: var(--epg-space-sm);
}

.epg-admin__candidato {
  display: flex;
  align-items: center;
  gap: var(--epg-space-sm);
  padding: var(--epg-space-2xs);
  border: 1px solid var(--epg-line);
  border-radius: var(--epg-radius-sm);
  background-color: var(--epg-surf-2);
}

.epg-admin__candidato-img {
  flex: none;
  width: 3.25rem;
  height: 4.75rem;
  object-fit: cover;
  border-radius: var(--epg-radius-xs);
  background-color: var(--epg-surf-0);
}

.epg-admin__candidato-img--vazio {
  display: grid;
  place-items: center;
  color: var(--epg-txt-3);
  font-family: var(--epg-font-mono);
}

.epg-admin__candidato-txt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--epg-fs-xs);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------- sugestões ------ */

/* Lista que aparece enquanto se digita no campo de consulta. Ancorada no
   próprio campo, por isso o container recebe position: relative. */
.epg-login__campo {
  position: relative;
}

.epg-admin__sugestoes {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  top: calc(100% + 2px);
  max-height: 22rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--epg-line-forte, var(--epg-line));
  border-radius: var(--epg-radius-sm);
  background-color: var(--epg-surf-1);
  box-shadow: var(--epg-elev-2);
}

.epg-admin__sugestao {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--epg-space-2xs) var(--epg-space-sm);
  cursor: pointer;
  font-size: var(--epg-fs-sm);
  border-bottom: 1px solid var(--epg-line);
}

.epg-admin__sugestao:last-child {
  border-bottom: 0;
}

.epg-admin__sugestao:hover,
.epg-admin__sugestao--ativa {
  background-color: var(--epg-surf-2);
}

/* Retorno visual do salvamento automático na lista de canais. */
.epg-admin__tabela tr[data-estado="salvando"] { opacity: 0.55; }
.epg-admin__tabela tr[data-estado="ok"] td { background-color: rgb(64 200 120 / 0.10); }
.epg-admin__tabela tr[data-estado="erro"] td { background-color: rgb(255 107 107 / 0.12); }

.epg-admin__nota[data-erro="1"] { color: var(--epg-erro, #FF6B6B); }

/* Sinopse da candidata na fila de cartazes: mesma razao da janela do site --
   e o unico campo que separa duas obras de mesmo nome. */
.epg-admin__candidato-sinopse {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: var(--epg-fs-2xs);
  line-height: 1.45;
  color: var(--epg-txt-3);
}

.epg-admin__candidato-sinopse--vazia {
  font-style: italic;
  color: var(--epg-txt-4);
}

.epg-admin__candidato {
  align-items: flex-start;
}