/* =========================================================
   3SIGMA
   LOGIN
   ---------------------------------------------------------
   Este arquivo contém somente estilos específicos da tela
   de autenticação.

   Tokens, inputs, botões, tipografia e componentes genéricos
   devem vir do Design System através de app.css.
========================================================= */


/* =========================================================
   PÁGINA
========================================================= */

.login-page {
    position: relative;

    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--space-10);

    overflow: hidden;

    background-image:
        url("../images/background.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Camada para melhorar contraste entre fundo e card */

.background-overlay {
    position: absolute;
    inset: 0;

    z-index: 0;

    background:
        linear-gradient(
            115deg,
            rgba(29, 34, 89, 0.16),
            rgba(29, 34, 89, 0.05)
        );

    backdrop-filter: blur(1px);
}


/* =========================================================
   CARD PRINCIPAL
========================================================= */

.login-card {
    position: relative;
    z-index: 1;

    width: min(100%, 920px);
    min-height: 560px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, 0.95fr);

    overflow: hidden;

    border-radius: var(--radius-xl);

    background: var(--color-surface);

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.28);
}


/* =========================================================
   PAINEL ESQUERDO
========================================================= */

.login-brand {
    position: relative;

    min-width: 0;
    min-height: 560px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding:
        var(--space-10)
        var(--space-10);

    overflow: hidden;

    color: var(--color-primary);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(244, 248, 239, 0.94) 48%,
            rgba(134, 189, 33, 0.58) 100%
        );
}


/* Elemento decorativo superior */

.login-brand::before {
    content: "";

    position: absolute;

    top: -145px;
    right: -120px;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background:
        rgba(134, 189, 33, 0.12);

    pointer-events: none;
}


/* Elemento decorativo inferior */

.login-brand::after {
    content: "";

    position: absolute;

    left: -180px;
    bottom: -210px;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    border:
        64px solid
        rgba(255, 255, 255, 0.10);

    pointer-events: none;
}


/* =========================================================
   CONTEÚDO DA MARCA
========================================================= */

.brand-content {
    position: relative;
    z-index: 1;
}


/* Logo */

.brand-logo {
    display: flex;

    align-items: center;
    justify-content: flex-start;

    min-height: 130px;

    margin-bottom: var(--space-12);
}


.brand-logo img {
    display: block;

    width: 100%;
    max-width: 230px;
    height: auto;

    object-fit: contain;
}


/* Mensagem */

.brand-message {
    position: relative;
    z-index: 1;
}


.brand-message h1 {
    margin:
        0
        0
        var(--space-4);

    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);

    line-height: 1.15;

    color: var(--color-primary);
}


.brand-message p {
    max-width: 320px;

    margin: 0;

    font-size: var(--font-size-md);
    line-height: 1.7;

    color: var(--color-primary);
}


/* Rodapé do painel esquerdo */

.brand-footer {
    position: relative;
    z-index: 1;

    margin-top: var(--space-8);

    font-size: var(--font-size-xs);
    line-height: 1.55;

    color: var(--color-primary);
}


/* =========================================================
   PAINEL DIREITO
========================================================= */

.login-form-container {
    min-width: 0;
    min-height: 560px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        var(--space-12)
        var(--space-10);

    background: var(--color-surface);
}


/* =========================================================
   CABEÇALHO DO FORMULÁRIO
========================================================= */

.login-form-header {
    margin-bottom: var(--space-8);
}


.form-label {
    display: block;

    margin-bottom: var(--space-2);

    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);

    letter-spacing: 0.14em;

    color: var(--color-secondary);
}


.login-form-header h2 {
    margin:
        0
        0
        var(--space-3);

    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);

    line-height: 1.1;

    color: var(--color-primary);
}


.login-form-header p {
    margin: 0;

    font-size: var(--font-size-md);
    line-height: 1.5;

    color: var(--color-text-secondary);
}


/* =========================================================
   FORMULÁRIO
========================================================= */

.login-form {
    width: 100%;
}


.login-form .ds-form-group,
.login-form .form-group {
    margin-bottom: var(--space-5);
}


/* Labels */

.login-form .ds-label {
    margin-bottom: var(--space-2);
}


/* =========================================================
   INPUTS
   ---------------------------------------------------------
   O visual base é fornecido por forms.css.
   Aqui acrescentamos apenas características específicas
   da tela de login.
========================================================= */

.input-wrapper {
    position: relative;

    width: 100%;
}


.login-form .ds-input {
    width: 100%;
    height: 48px;

    padding-left: 44px;
    padding-right: 44px;
}


/*
   Mantém o fundo suave utilizado na identidade
   visual da tela inicial.
*/

.login-form .ds-input-soft {
    background:
        var(--color-input-background);
}


/* =========================================================
   ÍCONES DOS INPUTS
========================================================= */

.input-icon {
    position: absolute;

    top: 50%;
    left: 15px;

    z-index: 2;

    width: 18px;
    height: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    color: var(--color-text-muted);

    pointer-events: none;
}


.input-icon svg {
    display: block;

    width: 100%;
    height: 100%;
}


/* =========================================================
   MOSTRAR / OCULTAR SENHA
========================================================= */

.password-toggle {
    position: absolute;

    top: 50%;
    right: 10px;

    z-index: 2;

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: var(--radius-sm);

    transform: translateY(-50%);

    color: var(--color-text-muted);
    background: transparent;

    cursor: pointer;

    transition:
        color var(--transition-base),
        background-color var(--transition-base);
}


.password-toggle:hover {
    color: var(--color-primary);

    background:
        var(--color-primary-light);
}


.password-toggle:focus-visible {
    outline:
        2px solid
        var(--color-secondary);

    outline-offset: 2px;
}


.password-toggle svg {
    display: block;

    width: 19px;
    height: 19px;
}


/* =========================================================
   OPÇÕES DO FORMULÁRIO
========================================================= */

.form-options {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    margin:
        var(--space-1)
        0
        var(--space-6);
}


/* Compatibilidade com HTML anterior */

.remember-me {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    margin: 0;

    cursor: pointer;

    font-size: var(--font-size-xs);

    color: var(--color-text-secondary);
}


.remember-me input {
    width: 16px;
    height: 16px;

    margin: 0;

    accent-color: var(--color-secondary);

    cursor: pointer;
}


/* =========================================================
   BOTÃO PRINCIPAL
   ---------------------------------------------------------
   Aparência principal vem de:
   .ds-btn
   .ds-btn-primary
   .ds-btn-lg
   .ds-w-full
========================================================= */

.login-form .ds-btn-primary {
    margin-top: var(--space-1);

    box-shadow:
        0 10px 24px
        rgba(29, 34, 89, 0.18);
}


.login-form .ds-btn-primary:hover {
    box-shadow:
        0 12px 28px
        rgba(29, 34, 89, 0.24);
}


/* =========================================================
   ERROS
========================================================= */

.login-form .ds-field-error {
    margin-top: var(--space-2);
}


/* Erro geral de autenticação */

.login-error {
    margin-bottom: var(--space-5);
}


/* =========================================================
   RODAPÉ
========================================================= */

.login-footer {
    margin-top: var(--space-8);

    text-align: center;

    font-size: var(--font-size-xs);

    color: var(--color-text-muted);
}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

.login-form input:focus-visible {
    outline: none;
}


.login-form button:focus-visible,
.login-form a:focus-visible {
    outline:
        2px solid
        var(--color-secondary);

    outline-offset: 2px;
}


/* =========================================================
   RESPONSIVO
   TABLETS
========================================================= */

@media (max-width: 900px) {

    .login-page {
        padding: var(--space-6);
    }


    .login-card {
        width: min(100%, 560px);

        grid-template-columns: 1fr;
    }


    .login-brand {
        min-height: auto;

        padding:
            var(--space-8)
            var(--space-8);
    }


    .brand-logo {
        min-height: auto;

        margin-bottom: var(--space-6);
    }


    .brand-logo img {
        max-width: 190px;
    }


    .brand-message h1 {
        font-size: var(--font-size-2xl);
    }


    .brand-message p {
        max-width: 400px;
    }


    .brand-footer {
        display: none;
    }


    .login-form-container {
        min-height: auto;

        padding:
            var(--space-10)
            var(--space-8);
    }

}


/* =========================================================
   RESPONSIVO
   CELULARES
========================================================= */

@media (max-width: 560px) {

    .login-page {
        align-items: stretch;

        min-height: 100dvh;

        padding: 0;

        background-position: 58% center;
    }


    .background-overlay {
        background:
            rgba(29, 34, 89, 0.16);
    }


    .login-card {
        width: 100%;
        min-height: 100dvh;

        display: flex;
        flex-direction: column;

        border-radius: 0;

        box-shadow: none;
    }


    .login-brand {
        min-height: auto;

        padding:
            var(--space-6)
            var(--space-6);

        flex: 0 0 auto;
    }


    .brand-logo {
        min-height: auto;

        margin-bottom: var(--space-5);
    }


    .brand-logo img {
        max-width: 155px;
    }


    .brand-message h1 {
        margin-bottom: var(--space-2);

        font-size: var(--font-size-xl);
    }


    .brand-message p {
        font-size: var(--font-size-sm);
        line-height: 1.55;
    }


    .login-form-container {
        min-height: 0;

        flex: 1;

        padding:
            var(--space-8)
            var(--space-6)
            var(--space-10);
    }


    .login-form-header {
        margin-bottom: var(--space-6);
    }


    .login-form-header h2 {
        font-size: var(--font-size-2xl);
    }


    .login-form .ds-input {
        height: 48px;
    }


    .login-footer {
        margin-top: var(--space-6);
    }

}


/* =========================================================
   TELAS MUITO PEQUENAS
========================================================= */

@media (max-width: 380px) {

    .login-brand {
        padding:
            var(--space-5)
            var(--space-5);
    }


    .login-form-container {
        padding:
            var(--space-6)
            var(--space-5)
            var(--space-8);
    }


    .brand-logo img {
        max-width: 140px;
    }

}


/* =========================================================
   TELAS BAIXAS
========================================================= */

@media (
    min-width: 901px
)
and (
    max-height: 700px
) {

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


    .login-card {
        min-height: 520px;
    }


    .login-brand,
    .login-form-container {
        min-height: 520px;
    }


    .brand-logo {
        margin-bottom: var(--space-8);
    }


    .login-form-container {
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }


    .login-form-header {
        margin-bottom: var(--space-6);
    }


    .login-footer {
        margin-top: var(--space-6);
    }

}