/*
 * ARQUIVO: login.css
 * DESCRIÇÃO: Estilos para a página de login integrados ao sistema de temas global com efeitos 3D.
 * TEMA: Forçado para Modo Escuro (Dark Mode) conforme solicitado.
 * VERSÃO: 2.0.0 - Auditoria Total e Comentários Detalhados
 */

/* Definição de variáveis de cor para manter a consistência em todo o arquivo */
:root {
    --container-bg: rgba(15, 15, 15, 0.8); /* Fundo do container com transparência para efeito glassmorphism */
    /* As cores abaixo são injetadas dinamicamente pelo ColorSystem (colors.js) 
       puxando diretamente do banco de dados local de 16.7M de cores. */
    --text-primary: var(--text-primary, #ffffff);
    --text-secondary: var(--text-secondary, #a0a0a0);
    --button-bg: var(--text-primary, #ffffff);
    --button-text: var(--bg-dark, #000000);
    --error-color: var(--error-red, #ff5555);
    
    /* Opacidades baseadas nas cores do banco de dados */
    --input-bg: rgba(255, 255, 255, 0.05); 
    --input-border: rgba(255, 255, 255, 0.1);
}

/* Configurações globais do corpo da página */
body {
    font-family: var(--font-inter), sans-serif; /* Define a fonte principal como Inter */
    margin: 0;                                  /* Remove margens padrão do navegador */
    min-height: 100vh;                          /* Garante que o corpo ocupe toda a altura da tela */
    display: flex;                              /* Usa flexbox para centralizar o conteúdo */
    align-items: center;                        /* Centraliza verticalmente */
    justify-content: center;                    /* Centraliza horizontalmente */
    color: var(--text-primary);                 /* Aplica a cor de texto padrão */
    
    /* Configuração do fundo com imagem e overlay escuro para legibilidade */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                url('../../database/templates/dark_mode.jpg');
    background-size: cover;                     /* Faz a imagem cobrir todo o fundo */
    background-position: center;                /* Centraliza a imagem de fundo */
    background-repeat: no-repeat;               /* Impede a repetição da imagem */
    background-attachment: fixed;               /* Mantém o fundo fixo durante a rolagem */
}

/* Estilização do container principal de login */
.login-container {
    width: 100%;                                /* Ocupa toda a largura disponível até o limite */
    max-width: 340px;                           /* Limita a largura máxima para manter o design compacto */
    padding: 40px 30px;                         /* Espaçamento interno generoso */
    background: var(--container-bg);            /* Aplica o fundo definido nas variáveis */
    backdrop-filter: blur(12px);                /* Efeito de desfoque de fundo (Glassmorphism) */
    -webkit-backdrop-filter: blur(12px);        /* Suporte para navegadores baseados em Webkit */
    border-radius: 24px;                        /* Bordas arredondadas suaves */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borda fina e translúcida */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);  /* Sombra externa para criar profundidade 3D */
    display: flex;                              /* Organiza os elementos internos em coluna */
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animação suave para interações */
}

/* Efeito visual quando o mouse passa sobre o container */
.login-container:hover {
    transform: translateY(-3px);                /* Eleva levemente o container (efeito 3D) */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7); /* Intensifica a sombra para reforçar a elevação */
}

/* Estilização do título da página de login */
.login-title {
    font-family: var(--font-righteous), cursive; /* Usa a fonte Righteous para um visual moderno */
    margin-bottom: 35px;                        /* Espaço abaixo do título */
    font-size: 2.2rem;                          /* Tamanho do título ajustado para equilíbrio visual */
    font-weight: 400;                           /* Peso da fonte normal */
    letter-spacing: 2px;                        /* Espaçamento entre letras para elegância */
    text-transform: uppercase;                  /* Converte o texto para maiúsculas */
    background: linear-gradient(to bottom, #fff, #aaa); /* Gradiente vertical no texto */
    -webkit-background-clip: text;              /* Aplica o gradiente apenas ao texto */
    -webkit-text-fill-color: transparent;       /* Torna a cor original do texto transparente */
    text-align: center;                         /* Centraliza o texto */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); /* Sombra projetada no texto para profundidade */
}

/* Estilização do formulário */
form {
    width: 100%;                                /* Formulário ocupa toda a largura do container */
    display: flex;                              /* Organiza os campos em coluna com espaçamento */
    flex-direction: column;
    gap: 18px;                                  /* Espaço entre os grupos de campos */
}

/* Grupo que contém label e input */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;                                   /* Espaço entre o label e o campo de entrada */
}

/* Estilização dos rótulos (labels) */
label {
    font-family: var(--font-montserrat), sans-serif; /* Fonte Montserrat para clareza */
    font-size: 0.75rem;                         /* Tamanho pequeno para não poluir */
    font-weight: 600;                           /* Negrito para destaque */
    color: var(--text-secondary);               /* Cor secundária mais discreta */
    margin-left: 6px;                           /* Pequeno recuo à esquerda */
    text-transform: uppercase;                  /* Maiúsculas para estilo profissional */
    letter-spacing: 2px;                        /* Espaçamento entre letras */
}

/* Estilização dos campos de entrada (inputs) */
input {
    padding: 14px 18px;                         /* Espaçamento interno para conforto na digitação */
    font-size: 1rem;                            /* Tamanho de fonte padrão para leitura */
    background: var(--input-bg);                /* Fundo translúcido */
    border: 1px solid var(--input-border);      /* Borda sutil */
    border-radius: 12px;                        /* Bordas arredondadas */
    color: var(--text-primary);                 /* Texto branco */
    outline: none;                              /* Remove o contorno padrão do navegador */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transição suave e natural */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);   /* Sombra interna sutil para profundidade */
}

/* Estado do campo de entrada quando focado */
input:focus {
    border-color: rgba(255, 255, 255, 0.4);     /* Borda fica mais visível */
    background: rgba(255, 255, 255, 0.08);      /* Fundo fica levemente mais claro */
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.3); /* Brilho externo e sombra 3D */
    transform: translateY(-1px);                /* Leve elevação visual ao focar */
}

/* Estilização do texto de sugestão (placeholder) */
input::placeholder {
    color: rgba(255, 255, 255, 0.15);           /* Cor muito discreta para o placeholder */
}

/* Estilização do botão de login */
button {
    font-family: var(--font-poppins), sans-serif; /* Fonte Poppins para o botão */
    margin-top: 20px;                           /* Espaço acima do botão */
    padding: 14px;                              /* Espaçamento interno vertical */
    font-size: 0.9rem;                          /* Tamanho da fonte do botão */
    font-weight: 700;                           /* Texto em negrito */
    text-transform: uppercase;                  /* Maiúsculas */
    letter-spacing: 2px;                        /* Espaçamento entre letras */
    border-radius: 15px;                        /* Bordas arredondadas */
    border: none;                               /* Remove borda padrão */
    background: linear-gradient(135deg, #ffffff, #e0e0e0); /* Gradiente diagonal branco/cinza */
    color: #000;                                /* Texto preto para contraste no fundo branco */
    cursor: pointer;                            /* Cursor de mão ao passar o mouse */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animação elástica moderna */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);  /* Sombra para efeito de elevação */
}

/* Efeito ao passar o mouse no botão */
button:hover {
    transform: translateY(-4px) scale(1.02);    /* Eleva e aumenta levemente o botão */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* Sombra mais intensa e difusa */
    background: #fff;                           /* Fundo fica branco puro */
}

/* Efeito ao clicar no botão */
button:active {
    transform: translateY(0);                   /* Retorna à posição original ao clicar */
}

/* Estilização das mensagens de erro */
.error {
    color: var(--error-color);                  /* Cor de erro definida nas variáveis */
    font-size: 0.8rem;                          /* Tamanho pequeno para a mensagem */
    min-height: 20px;                           /* Garante espaço mesmo sem mensagem */
    margin-top: 8px;                            /* Espaço acima da mensagem */
    text-align: center;                         /* Centraliza o texto de erro */
    font-weight: 400;                           /* Peso de fonte normal */
    letter-spacing: 0.5px;                      /* Espaçamento leve entre letras */
}

/* Ajustes de responsividade para dispositivos móveis pequenos */
@media (max-width: 400px) {
    .login-container {
        max-width: 80%;                         /* Reduz a largura máxima em telas muito pequenas */
        padding: 35px 25px;                     /* Reduz o preenchimento interno */
    }
    .login-title {
        font-size: 1.5rem;                      /* Diminui o tamanho do título para caber na tela */
    }
}