/* --- Variáveis CSS (Cores e Fontes) --- */
:root {
    --cor-fundo-geral: #1a1a1a; /* Fundo mais escuro */
    --cor-fundo-card: #282828; /* Fundo dos inputs, um pouco mais claro que o fundo geral */
    --cor-texto-primaria: #ffffff;
    --cor-texto-secundaria: #b0b0b0; /* Texto mais suave */
    --cor-borda-input: #3a3a3a; /* Borda dos inputs */
    --cor-foco-input: #8a2be2; /* Roxo vibrante para foco e botões */
    --cor-botao-fundo: #8a2be2;
    --cor-botao-hover: #9c45ef;
    --cor-erro: #ff5252;
    --fonte-principal: 'Inter', sans-serif; /* Usaremos Inter ou similar */
}

/* Importa a fonte Inter do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');


/* --- Estilos Globais e do Corpo da Página (dark-mode) --- */
.dark-mode {
    background-color: var(--cor-fundo-geral);
    color: var(--cor-texto-primaria);
    font-family: var(--fonte-principal);
    display: flex;
    justify-content: center;
    align-items: center; /* Centraliza verticalmente o container */
    min-height: 100vh;
    margin: 0;
    padding: 20px; /* Adiciona um padding geral para não encostar nas bordas */
    box-sizing: border-box; /* Garante que padding não aumente o tamanho total */
}

/* --- Container Principal de Login --- */
.login-container {
    background-color: transparent; /* O container principal não tem fundo na imagem */
    padding: 0; /* Removendo padding do container para gerenciar espaçamento interno */
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: 400px; /* Largura máxima para desktop */
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 30px; /* Espaço entre os grupos principais: cabeçalho, formulário, link de cadastro */
}

/* --- Texto de Cabeçalho --- */
.header-text {
    margin-bottom: 20px; /* Espaço entre o cabeçalho e os inputs */
}

.header-text h1 {
    font-size: 2.5em; /* Tamanho maior para o título */
    margin-bottom: 10px;
    font-weight: 600; /* Um pouco mais encorpado */
}

.header-text p {
    font-size: 1.1em;
    color: var(--cor-texto-secundaria);
    font-weight: 400;
}

/* --- Formulário de Login --- */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espaçamento entre os campos de input e o botão */
}

/* --- Grupos de Input (com Ícones) --- */
.input-group {
    position: relative; /* Para posicionar o ícone */
    display: flex;
    align-items: center;
    background-color: var(--cor-fundo-card);
    border-radius: 10px; /* Bordas arredondadas nos inputs */
    padding: 10px 15px; /* Padding interno */
    border: 1px solid var(--cor-borda-input);
}

.input-group .icon {
    color: var(--cor-texto-secundaria);
    font-size: 1.2em;
    margin-right: 10px;
}

.input-group input {
    flex-grow: 1; /* O input ocupa o espaço restante */
    background-color: transparent; /* Fundo transparente */
    border: none; /* Remove a borda padrão */
    outline: none; /* Remove o outline no foco */
    color: var(--cor-texto-primaria);
    padding: 5px 0; /* Padding vertical para o texto dentro do input */
    font-size: 1.1em;
}

.input-group input::placeholder {
    color: var(--cor-texto-secundaria);
    opacity: 0.7; /* Suaviza o placeholder */
}

.input-group input:focus {
    border-color: transparent; /* Remove borda no foco, a box-shadow já indicará */
    box-shadow: none; /* remove o box-shadow padrão, usaremos no .input-group */
}

/* Efeito de foco para todo o input-group */
.input-group:focus-within {
    border-color: var(--cor-foco-input);
    box-shadow: 0 0 0 2px var(--cor-foco-input); /* Borda de foco vibrante */
}


/* --- Botão de Submissão --- */
.login-form button {
    width: 100%;
    padding: 15px; /* Mais padding para um botão maior */
    background-color: var(--cor-botao-fundo);
    color: var(--cor-texto-primaria);
    border: none;
    border-radius: 10px; /* Bordas arredondadas */
    cursor: pointer;
    font-size: 1.2em; /* Texto maior */
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.login-form button:hover {
    background-color: var(--cor-botao-hover);
}

/* --- Link de Cadastro --- */
.signup-link {
    font-size: 1em;
    color: var(--cor-texto-secundaria);
    margin-top: 15px;
}

.signup-link a {
    color: var(--cor-foco-input); /* Cor do link */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.signup-link a:hover {
    color: var(--cor-botao-hover);
    text-decoration: underline;
}

/* --- Mensagem de Erro PHP --- */
.erro-mensagem {
    color: var(--cor-erro);
    background-color: rgba(255, 82, 82, 0.1); /* Fundo suave para o erro */
    padding: 10px;
    border-radius: 8px;
    margin-top: 20px;
    font-weight: 500;
    font-size: 0.95em;
    border: 1px solid var(--cor-erro);
}

/* Corrige o fundo branco do preenchimento automático do navegador */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #282828 inset !important; /* Força o fundo escuro */
    -webkit-text-fill-color: #fff !important; /* Mantém o texto branco */
    transition: background-color 5000s ease-in-out 0s; /* Evita que o navegador mude a cor de fundo */
}

/* --- Media Query para Desktop (Telas Maiores) --- */
@media (min-width: 600px) {
    /* Em telas maiores, podemos ter um espaçamento um pouco maior ou manter */
    .login-container {
        padding: 40px; /* Um pouco mais de padding para o "card" virtual */
        background-color: var(--cor-fundo-geral); /* Em desktop o "card" é só o fundo da tela mesmo */
        border-radius: 15px; /* Bordas arredondadas no container em desktop */
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7); /* Sombra para o "card" */
        max-width: 450px; /* Ajuste a largura máxima se desejar */
    }

    .dark-mode {
        padding: 50px; /* Mais espaço nas bordas da tela */
    }

    /* Corrige o fundo branco do preenchimento automático do navegador */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px #282828 inset !important; /* Força o fundo escuro */
        -webkit-text-fill-color: #fff !important; /* Mantém o texto branco */
        transition: background-color 5000s ease-in-out 0s; /* Evita que o navegador mude a cor de fundo */
    }
}