/* DCS Rebanhos — tela de login.
 *
 * Carrega DEPOIS de tokens.css e app.css: o reset, os botões (.btn) e os
 * campos (.field, .input) vêm de lá. Aqui fica só o que é desta tela.
 *
 * Fidelidade ao mockup (img/…17_05_59 (2).png, 1672x941):
 *   foto do nelore ocupando a tela, esmaecendo para verde-escuro à direita;
 *   card creme de ~578px, canto de 28px, sombra funda, deslocado à direita;
 *   rodapé "DCS Labs" sobre a foto, no rodapé da área da imagem.
 */

.login {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46rem);
  min-height: 100dvh;
  background-color: var(--color-login-veil);
  isolation: isolate;
}

/* ------------------------------------------------------------------ *
 * Fundo
 * ------------------------------------------------------------------ */

/* Fixo, e não em background do <body>, para que a rolagem do card em telas
 * baixas não arraste a foto junto. */
.login__backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--color-login-veil);
  background-image: url("../img/login-bg.cd1f85039616.webp");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}

/* No modo escuro, esmaece a foto inteira: transparente no claro. O ::after
 * é o degradê da direita; este cobre tudo por baixo dele. */
.login__backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-login-photo-veil);
}

/* O esmaecimento já vem gravado na imagem, mas ele foi calculado para
 * 1672x941. Em outra proporção, "cover" desloca esse degradê e o card
 * poderia cair sobre a grama clara. Esta camada garante o verde sob o card
 * em qualquer largura — é contraste, não decoração.
 * O literal rgb(17,39,21) é o #112715 amostrado do mockup; existe como
 * reserva para navegador sem color-mix(), e a regra seguinte o substitui. */
.login__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    100deg,
    rgba(17, 39, 21, 0) 34%,
    rgba(17, 39, 21, 0.45) 58%,
    rgba(17, 39, 21, 0.92) 82%,
    rgb(17, 39, 21) 100%
  );
  background-image: linear-gradient(
    100deg,
    color-mix(in srgb, var(--color-login-veil) 0%, transparent) 34%,
    color-mix(in srgb, var(--color-login-veil) 45%, transparent) 58%,
    color-mix(in srgb, var(--color-login-veil) 92%, transparent) 82%,
    var(--color-login-veil) 100%
  );
}

/* ------------------------------------------------------------------ *
 * Card
 * ------------------------------------------------------------------ */

.login__panel {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-8);
}

.login__card {
  /* Referência para o interruptor de tema, ancorado no canto. */
  position: relative;
  width: min(100%, 33rem);
  padding: clamp(var(--space-6), 3.2vw, var(--space-8));
  color: var(--color-text);
  background-color: var(--color-login-card);
  border: 1px solid var(--color-login-card-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
}

/* Interruptor de tema no canto superior direito do card. Cor secundária:
 * é utilidade, não pode competir com a marca nem com o botão Entrar. */
.login__theme {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--color-text-muted);
}

.login__theme:hover,
.login__theme:focus-visible {
  color: var(--color-text);
  background-color: var(--color-surface-muted);
}

.login__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  color: var(--color-brand);
}

/* Proporção 87x64 do traçado, como em .brand-mark: caixa quadrada encolheria
   o desenho até a altura e espremeria as orelhas. */
.login__brand .brand-mark {
  width: 79px;
  height: 58px;
}

.login__brand-text {
  display: flex;
  flex-direction: column;
}

.login__brand-name {
  font-size: clamp(var(--text-xl), 3.4vw, 2rem);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-brand);
}

.login__brand-name strong {
  font-weight: var(--weight-bold);
}

.login__brand-vendor {
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.login__title {
  font-size: clamp(var(--text-2xl), 3.6vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.login__subtitle {
  margin-top: var(--space-2);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.login__form {
  margin-top: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Dentro do card creme, o campo branco puro destoaria da referência: o
 * mockup usa #fbf9f5 no interior e #d7d7d5 na borda. */
.login .input {
  background-color: var(--color-login-field);
  min-height: 52px;
  border-radius: var(--radius-md);
}

/* O preenchimento automático do navegador pinta o campo de azul-claro e
 * quebraria o creme; o box-shadow interno é a única forma de repintar. */
.login .input:-webkit-autofill,
.login .input:-webkit-autofill:hover,
.login .input:-webkit-autofill:focus {
  box-shadow: 0 0 0 100px var(--color-login-field) inset;
  -webkit-text-fill-color: var(--color-text);
}

.login__forgot {
  align-self: flex-end;
  margin-top: calc(var(--space-2) * -1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-link);
  text-decoration: underline;
}

.login__submit {
  min-height: 56px;
  margin-top: var(--space-2);
  font-size: var(--text-md);
}

/* Erro geral (credencial inválida, conta bloqueada, atraso por tentativas).
 * O texto vem da view; aqui só a caixa. */
.login__alert {
  margin-bottom: var(--space-5);
}

/* ------------------------------------------------------------------ *
 * Rodapé sobre a foto
 * ------------------------------------------------------------------ */

.login__footer {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: center;
  padding: var(--space-6) var(--gutter);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--cream-100);
  /* A foto tem céu claro no topo e grama no rodapé: a sombra é o que mantém
   * o texto legível sobre qualquer trecho da imagem. */
  text-shadow: 0 1px 4px rgba(10, 28, 15, 0.85);
}

/* ------------------------------------------------------------------ *
 * Telas estreitas: o card assume a tela, a foto vira fundo escurecido
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .login {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }

  .login__backdrop {
    background-image: url("../img/login-bg-mobile.9ea8d7da54df.webp");
    /* Em tela retrato, "cover" corta as laterais; 30% mantém a vaca e o
     * bezerro enquadrados em vez de centralizar o pasto vazio. */
    background-position: 30% center;
  }

  /* Vertical, e mais forte: aqui a foto está atrás do card inteiro e do
   * rodapé, não ao lado deles. */
  .login__backdrop::after {
    background-image: linear-gradient(
      180deg,
      rgba(10, 28, 15, 0.55) 0%,
      rgba(10, 28, 15, 0.78) 100%
    );
    background-image: linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-login-veil) 55%, transparent) 0%,
      color-mix(in srgb, var(--color-login-veil) 78%, transparent) 100%
    );
  }

  .login__panel {
    grid-column: 1;
    grid-row: 1;
    align-items: stretch;
    padding: var(--gutter);
  }

  .login__card {
    width: 100%;
    max-width: 32rem;
    margin: auto;
    padding: var(--space-6) var(--space-5);
  }

  .login__brand {
    margin-bottom: var(--space-6);
  }

  .login__brand .brand-mark {
    width: 46px;
    height: 46px;
  }

  .login__footer {
    grid-column: 1;
    grid-row: 2;
    padding: var(--space-4) var(--gutter) var(--space-5);
  }
}

@media (max-width: 420px) {
  .login__panel {
    padding: var(--space-2);
  }

  .login__card {
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-xl);
  }

  .login__brand {
    gap: var(--space-3);
  }
}

/* Em tela baixa (celular deitado) o card rola dentro do painel em vez de
 * ser cortado. */
@media (max-height: 640px) {
  .login__panel {
    align-items: flex-start;
    padding-block: var(--space-5);
  }
}