/* ─── Períodos do Ranking — override do grid de envio_atividade.css ─── */
.periodo-grid {
  margin-bottom: 60px;
  grid-template-areas:
    "nome      nome"
    "inicio    fim"
    "cadastrar cadastrar";
}

.env-area-nome-periodo { grid-area: nome; }
.env-area-inicio       { grid-area: inicio; }
.env-area-fim          { grid-area: fim; }
.env-area-cadastrar    { grid-area: cadastrar; align-self: start; }

.editar-periodo-grid {
  grid-template-areas:
    "nome      nome"
    "inicio    fim"
    "salvar    voltar";
}
.env-area-salvar { grid-area: salvar; align-self: start; }
.env-area-voltar { grid-area: voltar; align-self: start; }

.env-input,
.env-select {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: none;
  border-radius: 20px;
  padding: 17px 16px;
  font-family: var(--font-montserrat);
  font-size: 14px;
  letter-spacing: 0.28px;
  color: var(--white);
}
.env-input[type="date"] { color-scheme: dark; }

.status-badge {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--font-montserrat);
  font-size: 12px;
  font-weight: 500;
}
.status-badge.atual     { background: rgba(34,197,94,0.18); color: #86efac; }
.status-badge.agendado  { background: rgba(253,114,34,0.18); color: #fdba8c; }
.status-badge.encerrado { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }

@media (max-width: 900px) {
  .periodo-grid {
    grid-template-areas:
      "nome"
      "inicio"
      "fim"
      "cadastrar";
  }
  .editar-periodo-grid {
    grid-template-areas:
      "nome"
      "inicio"
      "fim"
      "salvar"
      "voltar";
  }
}