/**
 * Tela de entrada do Benel CRM.
 *
 * Substitui o login genérico do kit (cartão centrado sobre gradiente, botões de
 * rede social inertes, vídeo de fundo que não existia).
 *
 * A ideia: a esquerda é o campo da marca — azul-marinho da Benel, com o traço da
 * logomarca (a estrada que vira seta) desenhado grande e sangrando para fora. A
 * direita é só o trabalho: e-mail, senha, entrar. Uma coisa forte, o resto quieto.
 *
 * Sem webfont, de propósito: o design system da casa usa a fonte do sistema. O
 * caráter vem de escala, peso e espaçamento.
 *
 * As cores saem de --brand-primary / --brand-secondary, que o theme_vars.php
 * emite a partir do cadastro da empresa. Trocar a cor no cadastro troca esta
 * tela junto.
 */

:root {
    --login-navy: var(--brand-primary, #15004d);
    --login-navy-deep: color-mix(in srgb, var(--brand-primary, #15004d) 78%, #000000);
    --login-violet: var(--brand-secondary, #4a2fa0);
    --login-page: #f2f1f6;
    --login-surface: #ffffff;
    --login-ink: #16121f;
    --login-ink-muted: #625d70;
    --login-borda: #dedae6;
    --login-campo: #ffffff;
    --login-foco: color-mix(in srgb, var(--brand-primary, #15004d) 28%, transparent);
}

html.dark-mode,
body.dark-mode {
    --login-page: #0d0a16;
    --login-surface: #17131f;
    --login-ink: #ece9f2;
    --login-ink-muted: #a49db4;
    --login-borda: #2e2740;
    --login-campo: #1f1a2b;
}

* { box-sizing: border-box; }

body.login-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--login-page);
    color: var(--login-ink);
    font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    -webkit-font-smoothing: antialiased;
}

/* ALTURA FIXA E `overflow: hidden` — o padrao do login da Plex.
   Com `min-height` a linha do grid pode CRESCER, e cresce: basta o conteudo
   de uma coluna passar da viewport para a pagina inteira ganhar barra de
   rolagem. Numa tela de login isso e sempre defeito, porque nao ha nada
   abaixo da dobra para rolar ate.

   `grid-template-rows: 1fr` amarra a linha unica a altura do container; sem
   ela, a linha volta a ser `auto` e o `height` acima nao adianta. */
.login-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: 1fr;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ─────────────────────────────────────────────────────── campo da marca ── */

/* O LADO DA IMAGEM NÃO TEM NADA EM CIMA.
   Nem véu, nem gradiente, nem texto. A foto foi feita para ser vista, e
   qualquer camada na frente troca a cor dela por outra. O `background` fica
   só como cor de espera enquanto o arquivo carrega. */
.login-marca {
    position: relative;
    overflow: hidden;
    background: var(--login-navy);
}

/* `position: absolute` NAO E DETALHE: e o que impede a foto de mandar na
   altura da coluna.

   No fluxo normal, `height: 100%` resolve contra uma altura indefinida e vira
   `auto`: a imagem passa a ocupar a altura natural dela na largura da coluna,
   empurra a coluna, e a pagina ganha barra de rolagem — que foi exatamente o
   que aconteceu. Fora do fluxo, ela preenche o espaco que existe e nunca o
   cria.

   `cover` porque a foto tem proporcao fixa e a coluna nao: esticar deformaria
   o predio e os caminhoes. Cortar e o comportamento certo. */
.login-imagem {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* O nome do sistema é o elemento tipográfico da tela: pesado e apertado, do
   lado do formulário — onde tem fundo próprio e não disputa contraste com o
   céu da foto. Sem destacar uma palavra em cor ou itálico: o peso basta. */
.login-titulo {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--login-ink);
    /* A margem de baixo era do subtitulo, que saiu. Sem ela o titulo encosta
       no texto de apoio do formulario. */
    margin-bottom: 1.5rem;
}


/* Marca · © · versão, centralizado no pé da coluna — o mesmo formato do
   rodapé do painel, para a pessoa reconhecer antes e depois de entrar. */
.login-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem 0.75rem;
    margin-top: auto;
    padding-top: 2rem;
    font-size: 0.75rem;
    color: var(--login-ink-muted);
    text-align: center;
}

.login-rodape-marca { font-weight: 600; }

.login-rodape-versao {
    font-family: ui-monospace, monospace;
    opacity: 0.85;
}

/* ───────────────────────────────────────────────────────────── formulário ── */

/* Coluna, e não centro: o formulário fica no meio e o rodapé é empurrado
   para o pé por `margin-top: auto`. Centrar tudo junto deixaria o rodapé
   colado no formulário. */
/* Se o conteudo nao couber (tela baixa, zoom alto, aviso de erro aberto),
   QUEM ROLA E ESTA COLUNA, nao a pagina. A imagem fica parada do lado. */
.login-form-lado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem);
    background: var(--login-surface);
    overflow-y: auto;
}

.login-form {
    width: 100%;
    max-width: 22.5rem;
}

.login-form-apoio {
    margin: 0.375rem 0 2rem;
    font-size: 0.9375rem;
    color: var(--login-ink-muted);
}

.login-campo + .login-campo { margin-top: 1.125rem; }

.login-campo label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 550;
}

.login-campo input {
    width: 100%;
    padding: 0.6875rem 0.875rem;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--login-ink);
    background: var(--login-campo);
    border: 1px solid var(--login-borda);
    border-radius: 9px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.login-campo input::placeholder { color: color-mix(in srgb, var(--login-ink-muted) 70%, transparent); }

.login-campo input:focus-visible,
.login-campo input:focus {
    outline: none;
    border-color: var(--login-navy);
    box-shadow: 0 0 0 3px var(--login-foco);
}

.login-senha { position: relative; }
.login-senha input { padding-right: 2.875rem; }

.login-senha-olho {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    color: var(--login-ink-muted);
    background: none;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.login-senha-olho:hover { color: var(--login-ink); }
.login-senha-olho:focus-visible {
    outline: none;
    color: var(--login-ink);
    box-shadow: 0 0 0 3px var(--login-foco);
}

.login-entrar {
    width: 100%;
    margin-top: 1.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff;
    background: var(--login-navy);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s ease;
}

.login-entrar:hover:not(:disabled) {
    background: color-mix(in srgb, var(--login-navy) 86%, #ffffff);
}

.login-entrar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--login-foco);
}

.login-entrar:disabled { opacity: 0.72; cursor: progress; }

/* Erro fica no formulário, acima do botão: é onde o olho já está. */
.login-aviso {
    margin-top: 1.125rem;
    padding: 0.6875rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.45;
    border-radius: 9px;
    border: 1px solid transparent;
}

.login-aviso[hidden] { display: none; }

.login-aviso--erro {
    color: #8c1d2b;
    background: #fdeef0;
    border-color: #f6c9cf;
}

.login-aviso--atencao {
    color: #7a4a06;
    background: #fdf3e2;
    border-color: #f3ddb5;
}

body.dark-mode .login-aviso--erro { color: #ffb4bd; background: #3a1219; border-color: #5e1f29; }
body.dark-mode .login-aviso--atencao { color: #ffd99b; background: #3a2a0d; border-color: #5c451a; }

.login-ajuda {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--login-borda);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--login-ink-muted);
}

.login-ajuda a {
    color: var(--login-navy);
    font-weight: 550;
    text-decoration: none;
}

.login-ajuda a:hover { text-decoration: underline; }
.login-ajuda a:focus-visible { outline: 2px solid var(--login-navy); outline-offset: 2px; border-radius: 3px; }
body.dark-mode .login-ajuda a { color: color-mix(in srgb, var(--login-violet) 70%, #ffffff); }

.login-tema {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--login-ink-muted);
    background: var(--login-surface);
    border: 1px solid var(--login-borda);
    border-radius: 50%;
    text-decoration: none;
    z-index: 5;
}

.login-tema:hover { color: var(--login-ink); }
.login-tema:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--login-foco); }

/* ─────────────────────────────────────────────────────────────── telas ── */

@media (max-width: 991.98px) {
    /* No celular o grid vira bloco e a rolagem volta a ser da pagina: com o
       teclado aberto a viewport encolhe, e prender a altura cortaria o botao
       de entrar. E o mesmo caminho que a Plex toma abaixo de 991px. */
    .login-layout {
        display: block;
        height: auto;
        overflow: visible;
    }

    /* No celular a imagem vira uma faixa: ambienta sem roubar a tela do
       teclado. Altura fixa porque sem ela a coluna colapsa para a altura da
       foto inteira e empurra o formulário para fora da tela. */
    .login-marca { height: 9rem; }

    .login-titulo { font-size: 1.625rem; }
    .login-form-lado { padding: 2rem 1.25rem 2.5rem; justify-content: flex-start; }
    .login-form { max-width: 26rem; margin-inline: auto; }
    .login-rodape { padding-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ───────────────────────────────────────── a logo, do lado do formulário ── */

/* A marca saiu do campo da imagem e veio para cá. Do outro lado ela
   competiria com a foto; aqui ela faz o que uma logo faz numa tela de
   senha — dizer em que sistema a pessoa está prestes a entrar. */
.login-form-marca {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1.75rem;
}

.login-form-logo {
    max-height: 3rem;
    width: auto;
    object-fit: contain;
}

.login-form-logo--vazio {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: var(--surface-muted, #f1f5f9);
    color: var(--login-navy, #15004d);
    font-size: 1.4rem;
}

/* No celular os dois lados viram um: a imagem encolhe para uma faixa, e a
   logo do formulário é a que fica. */
@media (max-width: 768px) {
    .login-form-marca { justify-content: center; }
    .login-form-logo { max-height: 2.5rem; }
}