/* Tela de entrada. Painel da marca AIRlabs à esquerda, acesso à direita. Só o
   arranjo mora aqui — campos, botões e alertas são os componentes do design system. */

.login-page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--ds-surface);
  color: var(--ds-text);
}

/* ── Cores da AIRlabs ──────────────────────────────────── */

/* Só nesta tela os tokens de marca do design system (roxo Accenture) dão lugar aos
   roxos da logo, para botões, links, foco e o seletor de tema não brigarem com o
   painel ao lado. As cores não existem como token, então ficam literais aqui. */
.login-page {
  --ds-brand: #6A00CC;
  --ds-brand-hover: #5A00AE;
  --ds-brand-active: #4C0096;
  --ds-brand-subtle: rgba(106, 0, 204, 0.14);
  --ds-text-link: #6A00CC;
  --ds-text-link-hover: #5A00AE;
  --ds-focus-ring: #6A00CC;
}

/* No escuro o fundo deixa o cinza neutro e vira o azul-marinho da marca, um tom
   abaixo do painel da esquerda para os dois lados continuarem distintos. Os campos
   usam `--ds-surface` e acompanham. O botão mantém o roxo do "AI" (clareia ao
   passar o mouse, como no design system); link e foco ficam lilás, porque o roxo
   escuro não tem contraste sobre o azul-marinho. */
[data-theme="dark"] .login-page {
  --ds-surface: #0D1328;
  --ds-surface-sunken: #0A0F20;
  --ds-border: #242C47;
  --ds-border-field: #4A5373;
  --ds-text-secondary: #B4BAD0;
  --ds-text-tertiary: #8E95AE;
  --ds-brand: #6A00CC;
  --ds-brand-hover: #7A00E0;
  --ds-brand-active: #8209E8;
  --ds-brand-subtle: rgba(155, 92, 242, 0.24);
  --ds-text-link: #B794F6;
  --ds-text-link-hover: #CDB5FA;
  --ds-focus-ring: #B794F6;
}

/* Sem barra superior: o seletor de tema flutua no canto, onde ja estava. */
.login-theme {
  position: absolute;
  top: 16px;
  right: 24px;
  z-index: 1;
}

.login-layout {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
}

/* Componentes do design system definem `display`, o que vence a regra
   `[hidden]{display:none}` do user agent — sem isto, todo elemento marcado com o
   atributo `hidden` (o `auth.js` usa isso para esconder o que o perfil nao pode
   ver) continua visivel. O design system nao traz esse reset. */
[hidden] {
  display: none !important;
}

/* ── Painel da marca ───────────────────────────────────── */

/* Sempre escuro e fora do tema: é a assinatura da AIRlabs, e o contraste do texto
   sobre ele não pode mudar de sentido. As cores saem da logo — o azul-marinho do
   "labs" e os roxos do "AIR" — e não existem como token no design system, então
   ficam literais e só neste bloco. */
.login-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--acn-space-10) clamp(28px, 5vw, 88px);
  background:
    radial-gradient(70% 55% at 0% 100%, rgba(122, 0, 224, 0.32), transparent 70%),
    radial-gradient(55% 45% at 100% 0%, rgba(183, 148, 246, 0.14), transparent 70%),
    #121A33;
  color: var(--acn-neutral-0);
}

/* O "A" da logo em contorno, sangrando pela borda: textura, não conteúdo. */
.login-story::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -14%;
  bottom: -8%;
  width: min(86%, 640px);
  aspect-ratio: 360 / 265;
  background: url("/static/shared/brand/airlabs-motif.svg") no-repeat center / contain;
  opacity: 0.12;
  pointer-events: none;
}

/* Painel enxuto: a logo faz o papel do título e uma linha a acompanha. */
.login-story__body {
  margin-block: auto;
}

.login-logo {
  display: block;
  width: clamp(240px, 30vw, 440px);
  height: auto;
}

.login-story__lead {
  max-width: 32ch;
  margin-top: var(--acn-space-6);
  color: #B4BAD0;
  font-size: var(--acn-fs-20);
  line-height: 1.5;
  /* Frase curta: equilibra as linhas em vez de deixar "lugar." sozinho. */
  text-wrap: balance;
}

/* ── Painel de acesso ──────────────────────────────────── */

.login-access {
  display: grid;
  place-items: center;
  padding: var(--acn-space-10) var(--acn-space-8);
}

.login-form-area {
  width: 100%;
  min-width: 0;
  max-width: 390px;
}

/* A margem de baixo segura o espaço quando a descrição some (autenticação
   desligada); com ela visível, as duas margens colapsam numa só. */
.login-form-area h1 {
  margin-bottom: var(--acn-space-4);
  font-size: var(--acn-fs-32);
  font-weight: var(--acn-fw-semibold);
  letter-spacing: -0.04em;
  line-height: 1.18;
}

.login-description {
  margin: var(--acn-space-4) 0 var(--acn-space-6);
  color: var(--ds-text-secondary);
  font: var(--ds-type-body-sm);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--acn-space-4);
}

/* Botões de largura total: nesta tela cada ação ocupa a coluna inteira. */
.login-btn {
  justify-content: center;
  width: 100%;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: var(--acn-space-3);
  margin: var(--acn-space-5) 0;
  color: var(--ds-text-tertiary);
  font-size: var(--acn-fs-12);
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ds-border);
}

.login-panel {
  margin-top: var(--acn-space-2);
}

.login-help {
  margin-top: var(--acn-space-5);
}

/* Sem login por senha o link some; o parágrafo vazio não deve deixar a margem. */
.login-help:has(> [hidden]) {
  display: none;
}

.login-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-text-link);
  font: inherit;
  font-size: var(--acn-fs-13);
  font-weight: var(--acn-fw-semibold);
  cursor: pointer;
}

.login-link:hover {
  color: var(--ds-text-link-hover);
  text-decoration: underline;
}

#login-notice {
  margin-bottom: var(--acn-space-5);
}

#login-notice p {
  margin: 0;
}

@media (max-width: 900px) {
  .login-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .login-story {
    padding: var(--acn-space-8) var(--acn-space-5);
  }

  /* Abaixo de duas colunas o painel vira um cabeçalho: logo e frase, sem grafismo. */
  .login-story__body {
    margin-block: 0;
  }

  .login-logo {
    width: 180px;
  }

  .login-story__lead {
    margin-top: var(--acn-space-3);
    font-size: var(--acn-fs-14);
  }

  .login-story::after {
    display: none;
  }

  .login-access {
    padding: var(--acn-space-8) var(--acn-space-5);
    place-items: start center;
  }
}