/* frontend/core/styles/login.css */

/* Mapeamento das Cores da Versão Antiga do Artium (login.css) */
:root {
    /* MANTIDO: O fundo preto (#000) e texto branco (#fff) da versão antiga */
    --bg-body: #000000;
    --text-main: #ffffff;
    
    /* MANTIDO: A cor do card (#111) e das inputs (#222) do login.css antigo */
    --bg-card: #111111;
    --bg-input: #222222;
    --border-input: #444444; /* Um cinza sutil para as bordas das inputs */
    
    /* MANTIDO: O azul (#007bff) para botões de ação do login.css antigo */
    --primary-action: #007bff;
    --primary-hover: #0069d9;
    
    /* Cores de apoio para temas escuros */
    --text-muted: #a0aec0;
    --error-bg: #fed7d7; /* Fundo do erro claro para contraste no card escuro */
    --error-text: #c53030;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BLOCK: login-bg (O corpo da página) */
body.login-bg {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background-color: var(--bg-body); /* PRETO TOTAL (#000) */
    color: var(--text-main); /* BRANCO (#fff) */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Ângulo do brilho que percorre a borda do card.
   Registrado como propriedade tipada porque só assim o navegador sabe
   interpolar um `<angle>` — uma custom property comum salta de 0 a 360 sem
   passar pelo meio, e não haveria animação nenhuma. */
@property --brilho-angulo {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* BLOCK: login-card (O contentor do formulário) */
.login-card {
    /* Fallback declarado à mão: onde `@property` não existe, `var()` ainda
       resolve e a borda fica com o gradiente parado, em vez de a declaração
       inteira cair e deixar o card sem fundo. */
    --brilho-angulo: 0deg;

    /* Duas camadas: o miolo escuro ocupa a `padding-box`, o gradiente ocupa a
       `border-box`. É o que pinta a borda com as cores da logo — roxo e azul —
       sem elemento extra no HTML (a página de login tem CSP estrita). */
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        conic-gradient(from var(--brilho-angulo),
            #4c1d95 0deg,
            #673AB7 70deg,
            #2196F3 150deg,
            #bfe3ff 178deg,
            #ffffff 186deg,   /* o ponto de luz */
            #90cdf4 196deg,
            #2196F3 250deg,
            #673AB7 330deg,
            #4c1d95 360deg) border-box;
    border: 2px solid transparent;
    border-radius: 12px;
    /* Sombra pesada para o fundo preto, mais um halo nas cores da borda. */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
                0 0 22px rgba(103, 58, 183, 0.22),
                0 0 40px rgba(33, 150, 243, 0.12);
    width: 100%;
    max-width: 450px;
    padding: 40px 30px;
    text-align: center;
    animation: login-brilho-borda 4s linear infinite;
}

/* Uma volta completa a cada 4s: o ponto de luz percorre o perímetro. */
@keyframes login-brilho-borda {
    to { --brilho-angulo: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .login-card,
    .login-card__input { animation: none; }
}

/* ELEMENTS: login-card */
.login-card__header {
    margin-bottom: 30px;
}

.login-card__logo-container {
    /* Inteligência mantida: O container apenas centraliza */
    width: auto;
    height: auto;
    margin: 0 auto 15px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card__logo {
    /* MANTIDO: A logo tem largura fixa de 200px do login.css antigo */
    width: 200px; 
    height: auto;
    display: block;
}

.login-card__tagline {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
}

.login-card__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-card__input-group {
    text-align: left;
}

.login-card__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.login-card__input {
    width: 100%;
    /* MANTIDO: Padding do login.css antigo */
    padding: 12px 15px;

    /* Reaproveita a mesma propriedade tipada e o mesmo ângulo do
       `.login-card`: cada elemento anima a sua própria cópia (custom
       property não herda, `--brilho-angulo` já está registada acima). Duas
       camadas — o miolo cinza-escuro na `padding-box`, o gradiente cônico na
       `border-box` — pintam a borda sem elemento extra no HTML. */
    --brilho-angulo: 0deg;
    background:
        linear-gradient(var(--bg-input), var(--bg-input)) padding-box,
        conic-gradient(from var(--brilho-angulo),
            #4c1d95 0deg,
            #673AB7 70deg,
            #2196F3 150deg,
            #bfe3ff 178deg,
            #ffffff 186deg,
            #90cdf4 196deg,
            #2196F3 250deg,
            #673AB7 330deg,
            #4c1d95 360deg) border-box;
    border: 1px solid transparent;

    color: var(--text-main); /* BRANCO (#fff) */
    border-radius: 8px;
    font-size: 1rem;
    transition: box-shadow 0.3s;
    animation: login-brilho-borda 4s linear infinite;
}

.login-card__input:focus {
    outline: none;
    /* O foco só acrescenta o halo — a borda em si continua transparente,
       deixando o gradiente animado visível também enquanto o campo está
       ativo. */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

.login-card__input::placeholder {
    color: #718096; /* Cor do placeholder no tema escuro */
}

/* --------------------------------------------------------------------------
   Blocos que antes eram atributos `style=` no auth.ui.js.
   Saíram do HTML junto com os handlers inline: a CSP estrita desta página é
   mais fácil de manter honesta quando nada de apresentação nem de
   comportamento vive dentro da marcação.
   -------------------------------------------------------------------------- */

.login-card__erro {
    display: none; /* `showError` liga quando há o que dizer */
    background: #fed7d7;
    color: #c53030;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 12px;
}

.login-card__ajuda {
    font-size: 0.85rem;
    color: #718096;
    margin: 0 0 0.75rem;
}

/* O olho de mostrar/ocultar senha fica sobreposto ao campo. */
.login-card__campo-senha {
    position: relative;
}

.login-card__input--com-acao {
    padding-right: 2.8rem; /* espaço para o botão não cobrir o texto digitado */
}

.login-card__botao-olho {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.2rem;
    color: #718096;
}

.login-card__button {
    /* MANTIDO: Cor azul (#007bff) e estilos de botão do login.css antigo */
    background: var(--primary-action); /* AZUL SÓLIDO, SEM GRADIENTE */
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s, transform 0.1s;
    margin-top: 10px;
}

.login-card__button:hover:not(:disabled) {
    background-color: var(--primary-hover);
}

.login-card__button:active:not(:disabled) {
    transform: scale(0.98);
}

.login-card__button:disabled {
    background-color: var(--border-input);
    color: var(--text-muted);
    cursor: not-allowed;
}

.login-card__forgot-password {
    margin-top: 20px;
    display: block;
}

.login-card__forgot-link {
    color: var(--text-muted); /* Link cinza no tema escuro */
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.2s;
}

.login-card__forgot-link:hover {
    color: #ffffff; /* Brilha branco ao passar o rato */
    text-decoration: underline;
}

.login-card__footer {
    margin-top: 30px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Responsividade Básica */
@media (max-width: 480px) {
    .login-card {
        padding: 30px 20px;
    }
    
    .login-card__logo {
        width: 160px; /* Logo menor em ecrãs pequenos */
    }
}
/* BLOCK: toast-popup — definido em core/styles/toast.css (fonte única). */