/* ---------------------------------------------------------------------------
   Tema da tela de login e do cadastro.

   Tudo aqui esta escopado em `.content_login`, que e a raiz devolvida pelo
   `gen_login_layout` e envolve o card de login, o de recuperacao de senha, o do
   token e o wizard de cadastro. Sem esse escopo, mexer em `.btn-primary`
   repintaria o portal inteiro — o mesmo azul do Bootstrap e usado em centenas de
   botoes depois do login.

   O verde-agua e a cor do logo (`assets/bdr_black2.png`), amostrada do proprio
   arquivo: #54bbab e o tom dominante do simbolo e da palavra "bdr".

   Este arquivo carrega por ultimo (o Dash serve os .css de `assets/` em ordem
   alfabetica, e `tema_login` vem depois de `style`), entao vence os anteriores
   sem precisar de `!important`.
   --------------------------------------------------------------------------- */

.content_login {
    --bdr-verde: #54bbab;
    --bdr-verde-escuro: #3f9c8e;
    --bdr-verde-claro: #7fcfc2;
    /* Fundo do estado :focus dos inputs. Mesmo verde com alpha, para o halo
       combinar com a borda em vez do azul do Bootstrap. */
    --bdr-verde-halo: rgba(84, 187, 171, 0.25);
}

/* --------------------------------------------------------------- botoes */

.content_login .btn-primary {
    --bs-btn-bg: var(--bdr-verde);
    --bs-btn-border-color: var(--bdr-verde);
    --bs-btn-hover-bg: var(--bdr-verde-escuro);
    --bs-btn-hover-border-color: var(--bdr-verde-escuro);
    --bs-btn-active-bg: var(--bdr-verde-escuro);
    --bs-btn-active-border-color: var(--bdr-verde-escuro);
    --bs-btn-disabled-bg: var(--bdr-verde-claro);
    --bs-btn-disabled-border-color: var(--bdr-verde-claro);
    --bs-btn-focus-shadow-rgb: 84, 187, 171;
}

/* O botao "Login" e um `dmc.Button` e nao passa pelas variaveis do Bootstrap;
   ele recebe a cor pela prop `color` em `login.py` (`COR_TEMA_LOGIN`), porque o
   Mantine gera o nome da classe com hash e um seletor aqui quebraria no proximo
   bump do dash_mantine_components. */

/* --------------------------------------------------------------- links */

/* "Nao possui uma conta? Clique aqui!", "Ja tem uma conta?" e o link de
   recuperar senha. O `.blue` continua se chamando assim no HTML: renomear a
   classe mexeria em telas de dentro do portal que tambem a usam. */
.content_login label.blue,
.content_login .blue,
.content_login .link,
.content_login a {
    color: var(--bdr-verde-escuro);
}

.content_login label.blue:hover,
.content_login .link:hover,
.content_login a:hover {
    color: var(--bdr-verde);
}

/* ---------------------------------------------------- campos em foco */

.content_login .form-control:focus,
.content_login .form-floating > .form-control:focus {
    border-color: var(--bdr-verde-claro);
    box-shadow: 0 0 0 0.25rem var(--bdr-verde-halo);
}

/* O verde de "campo valido" do Bootstrap e um verde-grama que briga com o tom
   do logo; alinhado ao tema. Vale para o check do e-mail e o das senhas. */
.content_login .form-control.is-valid,
.content_login .was-validated .content_login .form-control:valid {
    border-color: var(--bdr-verde);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2354bbab' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

.content_login .form-control.is-valid:focus {
    border-color: var(--bdr-verde);
    box-shadow: 0 0 0 0.25rem var(--bdr-verde-halo);
}

/* ------------------------------------------------ PinInput do codigo */

.content_login .mantine-PinInput-input:focus {
    border-color: var(--bdr-verde);
}

/* ------------------------------------------------ area de upload */

.content_login .upload_import:hover {
    border-color: var(--bdr-verde);
    color: var(--bdr-verde-escuro);
}

/* ------------------------------------------------------------ fundo */

/* O `mobile.css` pinta o fundo com um degrade roxo no mobile e com #f1f1f1 a
   partir de 768px. Os dois sao repetidos aqui — como a media query nao adiciona
   especificidade, se so o degrade fosse redefinido este arquivo (que carrega
   depois) venceria tambem no desktop e o cinza sumiria. */
.content_login {
    background-color: #12332e;
    background-image:
        radial-gradient(ellipse at 10% 90%, #2f7d72 0%, transparent 55%),
        radial-gradient(ellipse at 90% 90%, #54bbab 0%, transparent 55%),
        radial-gradient(ellipse at 90% 10%, #3f9c8e 0%, transparent 55%),
        radial-gradient(ellipse at 10% 10%, #1d4f48 0%, transparent 55%);
}

@media (min-width: 768px) {
    .content_login {
        background-image: none;
        background-color: #f1f1f1;
    }
}