/* --- CSS Variables for Dark Theme --- */
:root {
    --bg-color: #1a1a1a; /* Fundo principal bem escuro */
    --container-bg: #2c2c2c; /* Fundo do container de login */
    --primary-text: #e0e0e0; /* Cor principal do texto */
    --secondary-text: #a0a0a0; /* Cor secundária (placeholders, textomuted) */
    --border-color: #444444; /* Cor das bordas */
    --input-bg: #3f3f3f; /* Fundo dos inputs */
    --input-focus-border: #4a90e2; /* Azul elegante para foco */
    --input-focus-shadow: rgba(74, 144, 226, 0.25);
    --primary-button-bg: #357ABD; /* Azul mais sóbrio para botão */
    --primary-button-hover-bg: #4a90e2; /* Azul mais claro no hover */
    --link-color: #60a5fa; /* Cor para links */
    --link-hover-color: #93c5fd;
    --danger-bg: #5c1a1a; /* Fundo para alertas de erro */
    --danger-text: #f8d7da; /* Texto para alertas de erro */
    --danger-border: #842029; /* Borda para alertas de erro */

    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* --- Base Styles --- */
body {
    background-color: var(--bg-color);
    color: var(--primary-text);
    font-family: var(--font-body);
    height: 100vh; /* Mantido */
    display: flex; /* Usar flexbox no body para centralizar */
    align-items: center;
    justify-content: center;
}

/* --- Login Container --- */
.login-container {
    max-width: 450px; /* Mantido */
    width: 90%; /* Adicionado para melhor responsividade em telas menores */
    margin: 2rem auto; /* Adicionado margem vertical */
    padding: 2.5rem; /* Aumentado padding */
    background-color: var(--container-bg);
    border-radius: 12px; /* Aumentado border-radius */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); /* Sombra mais sutil para tema escuro */
    border: 1px solid var(--border-color); /* Borda sutil */
}

/* --- Logo --- */
.logo {
    text-align: center;
    margin-bottom: 2.5rem; /* Aumentado espaçamento */
}
.logo h1 {
    color: var(--primary-text); /* Título mais claro */
    font-family: var(--font-heading);
    font-weight: 600; /* Peso da fonte */
    font-size: 1.75rem; /* Tamanho ajustado */
    margin-bottom: 0.5rem;
}
.logo h1 img {
    max-height: 30px; /* Ajustar tamanho do favicon se necessário */
    vertical-align: middle; /* Alinhar imagem verticalmente */
    margin-left: 8px;
}
.logo p {
    color: var(--secondary-text);
    font-size: 0.9rem;
}

/* --- Form Elements --- */
.form-label {
    font-weight: 500;
    margin-bottom: 0.6rem; /* Espaçamento abaixo do label */
    color: var(--primary-text);
}

.form-control {
    background-color: var(--input-bg);
    color: var(--primary-text);
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem; /* Padding interno do input */
    height: auto; /* Permitir altura baseada no padding */
    border-radius: 8px; /* Bordas arredondadas */
}

.form-control::placeholder {
    color: var(--secondary-text);
    opacity: 0.8;
}

.form-control:focus {
    border-color: var(--input-focus-border);
    background-color: var(--input-bg); /* Manter fundo no foco */
    color: var(--primary-text); /* Manter cor do texto no foco */
    box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
    outline: none; /* Remover outline padrão */
}

/* Remover background image padrão do Bootstrap para validação */
.form-control.is-invalid, .form-control.is-valid {
    background-image: none;
}

/* --- Input Groups --- */
.input-group {
    border-radius: 8px; /* Aplicar border-radius ao grupo */
    /* Para que o focus do input não fique por baixo do input-group-text */
    position: relative;
    z-index: 1;
}
.input-group .form-control {
    /* Remover bordas onde o span encosta */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none; /* Remover borda esquerda */
}
.input-group .form-control:focus {
    z-index: 3; /* Trazer o input para frente no foco */
}

.input-group-text {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-right: none; /* Remover borda direita */
    color: var(--secondary-text);
    border-top-left-radius: 8px; /* Arredondar canto */
    border-bottom-left-radius: 8px; /* Arredondar canto */
    padding: 0.75rem 1rem;
}

/* --- Password Toggle Button --- */
#togglePassword {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-left: none; /* Remover borda esquerda */
    color: var(--secondary-text);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    z-index: 3; /* Para sobrepor o box-shadow do input no focus */
}
#togglePassword:hover {
    color: var(--primary-text);
}
#togglePassword:focus {
    outline: none;
    box-shadow: none; /* Remover shadow no foco */
}
.input-group .form-control#password {
    /* O input de senha não deve ter borda direita arredondada */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


/* --- Checkbox --- */
.form-check-input {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    margin-top: 0.2em; /* Alinhar melhor com o label */
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--primary-button-bg);
    border-color: var(--primary-button-bg);
}
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
    border-color: var(--input-focus-border);
    outline: none;
}
.form-check-label {
    color: var(--primary-text);
    font-size: 0.9rem;
    cursor: pointer;
}

/* --- Links --- */
a {
    color: var(--link-color);
    text-decoration: none;
}
a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}
.forgot-password {
    text-align: right;
    font-size: 0.9rem;
    margin-top: -0.5rem; /* Puxar um pouco para cima */
    margin-bottom: 1.5rem; /* Aumentar espaço antes do botão */
}

/* --- Submit Button --- */
.btn-primary {
    background-color: var(--primary-button-bg);
    border-color: var(--primary-button-bg);
    padding: 0.75rem; /* Aumentar padding */
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 1rem;
    border-radius: 8px; /* Arredondar botão */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.btn-primary:hover {
    background-color: var(--primary-button-hover-bg);
    border-color: var(--primary-button-hover-bg);
}
.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
    outline: none;
}
.d-grid {
    margin-top: 1rem; /* Espaço acima do botão */
}

/* --- Alerts --- */
.alert {
    margin-bottom: 1.5rem; /* Mantido */
    border-radius: 8px; /* Arredondar alerta */
}
.alert-danger {
    background-color: var(--danger-bg);
    color: var(--danger-text);
    border: 1px solid var(--danger-border);
}
.alert-danger .btn-close {
    /* Estilizar o botão de fechar para tema escuro */
    filter: brightness(0) invert(1); /* Inverter cores do ícone padrão */
}
.alert-danger .btn-close:hover {
    opacity: 0.8;
}