/* assets/css/login.css */

/* Reset básico e configurações globais para a página de login */
body, html {
    height: 100%;
    margin: 0;
    font-family: 'Poppins', sans-serif; /* Certifique-se que a fonte Poppins está carregada no index.php */
    overflow: hidden; /* Previne barras de rolagem indesejadas se o fundo for maior que a viewport */
    color: #333; /* Cor de texto padrão para o conteúdo dentro do formulário */
}

/* Wrapper principal da página de login */
.login-page-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Para o posicionamento do overlay e do vídeo */
    text-align: center;
}

/* --- Opção 1: Fundo com Imagem --- */
.login-page-wrapper.image-bg {
    background-image: url('../img/background.png'); /* Caminho para sua imagem de fundo */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* --- Opção 2: Fundo com Vídeo --- */
.login-page-wrapper.video-bg #bgvideo {
    position: fixed; /* Ou absolute se .login-page-wrapper for o container principal */
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto; /* Mantém a proporção */
    height: auto; /* Mantém a proporção */
    z-index: -100; /* Garante que o vídeo fique atrás de todo o conteúdo */
    background-size: cover; /* Para a imagem de poster */
    /* Se quiser uma imagem de poster, defina no HTML ou aqui: */
    /* background: url('../video/poster_escoteiro.jpg') no-repeat center center; */
    object-fit: cover; /* Garante que o vídeo cubra a área sem distorcer */
}

/* Overlay para o fundo (imagem ou vídeo) */
.login-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55); /* Overlay escuro semi-transparente, ajuste a opacidade */
    /* Exemplo de gradiente: background: linear-gradient(to bottom, rgba(44,62,80,0.6), rgba(44,62,80,0.8)); */
    z-index: 1; /* Fica sobre o fundo (imagem/vídeo) mas abaixo do container do formulário */
}

/* Container do Formulário de Login */
.login-container {
    position: relative; 
    z-index: 2; /* Acima do overlay */
    padding: 35px 40px;
    background-color: rgba(255, 255, 255, 0.98); /* Fundo do formulário quase opaco para legibilidade */
    /* Ou totalmente opaco: background-color: #ffffff; */
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15), 0 6px 15px rgba(0,0,0,0.1); /* Sombra mais elaborada */
    width: 100%;
    max-width: 420px; 
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.login-logo {
    width: 90px; /* Ajuste conforme seu logo */
    height: auto;
    margin-bottom: 20px;
}

.login-form h2 {
    color: #2c3e50; /* Azul escuro */
    font-size: 2em;
    margin-top: 0; /* Remove margem do topo se o logo já dá espaço */
    margin-bottom: 10px;
    font-weight: 600;
}

.login-subtitle {
    color: #55575b; /* Cinza um pouco mais escuro */
    margin-bottom: 30px;
    font-size: 0.95em;
    line-height: 1.4;
}

.form-group {
    margin-bottom: 22px; /* Espaçamento entre os campos */
    text-align: left; 
}

/* Estilo para esconder labels visualmente, mas mantê-las para leitores de tela */
.form-group label.sr-only { 
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: 14px 18px; 
    border: 1px solid #d1d8e0; /* Borda mais suave */
    border-radius: 8px;
    font-size: 1em;
    color: #495057;
    background-color: #fdfdfe; /* Fundo do input */
    box-sizing: border-box; /* Garante que padding não aumente a largura total */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-group input[type="text"]::placeholder,
.form-group input[type="password"]::placeholder {
    color: #a0aec0; /* Cor do placeholder */
    opacity: 1; /* Firefox */
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus {
    outline: none;
    border-color: #3498db; /* Azul ao focar */
    box-shadow: 0 0 0 0.15rem rgba(52, 152, 219, 0.25); /* Sombra de foco sutil */
    background-color: #fff;
}

.btn-login {
    background: #007bff; /* Azul primário sólido */
    /* Ou um gradiente: background: linear-gradient(to right, #007bff, #0056b3); */
    color: white;
    padding: 14px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease, transform 0.1s ease;
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Opcional */
}

.btn-login:hover {
    background: #0056b3; /* Azul mais escuro no hover */
    transform: translateY(-1px); /* Leve efeito de elevação */
}
.btn-login:active {
    transform: translateY(1px); /* Efeito de clique */
}


.login-footer {
    margin-top: 25px;
    font-size: 0.85em;
}
.login-footer a {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}
.login-footer a:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* Mensagens de Feedback (geralmente de forms.css ou style.css, mas repetindo aqui para garantir) */
.message {
    padding: 12px 15px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 0.9em;
    text-align: center;
    border: 1px solid transparent;
}
.message.success {
    background-color: #d1e7dd; color: #0f5132; border-color: #badbcc;
}
.message.error {
    background-color: #f8d7da; color: #842029; border-color: #f5c2c7;
}
.message.info {
    background-color: #cff4fc; color: #055160; border-color: #b6effb;
}

/* Responsividade para telas menores */
@media (max-width: 480px) {
    .login-container {
        padding: 25px 30px; /* Padding um pouco menor */
        margin: 0 15px; 
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
    .login-form h2 {
        font-size: 1.7em; /* Título um pouco menor */
    }
    .form-group input[type="text"],
    .form-group input[type="password"],
    .btn-login {
        padding: 12px 15px; /* Padding interno dos campos menor */
        font-size: 1em;
    }
}