/**
 * password_reset.css - Styles for the password reset flow pages
 *
 * Standalone pages for users resetting their password (pre-login).
 * Matches the style of invitation.css and login.html.
 *
 * Note: These pages do NOT use base.html and do NOT load main.css.
 * This file is linked directly in each of the 4 password reset templates
 * alongside core/variables.css.
 */

body.password-reset-page {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: var(--border-light);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: var(--text-light);
}

.password-reset-container {
    text-align: center;
    padding: var(--space-xl);
    background-color: var(--background-white);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
    max-width: 25rem;
    width: 100%;
}

.password-reset-container h1 {
    color: var(--text-muted);
    font-size: var(--text-4xl);
    margin: 0 0 var(--space-10) 0;
    font-weight: var(--font-normal);
}

.password-reset-container .subtitle {
    color: var(--text-muted);
    font-size: var(--text-lg);
    margin-bottom: var(--space-lg);
}

.password-reset-container .info-message {
    text-align: left;
    background-color: var(--background-light);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    border-left: 3px solid var(--primary-green);
    font-size: var(--text-sm);
    color: var(--text-dark);
}

.password-reset-container .info-message p {
    margin: 0 0 var(--space-sm) 0;
}

.password-reset-container .info-message p:last-child {
    margin-bottom: 0;
}

.password-reset-form {
    text-align: left;
}

.password-reset-form .form-group {
    margin-bottom: var(--space-20);
}

.password-reset-form label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.password-reset-form input[type="email"],
.password-reset-form input[type="password"],
.password-reset-form input[type="text"] {
    width: 100%;
    padding: var(--space-10);
    border: 1px solid var(--border-light);
    background-color: var(--background-light);
    font-size: var(--text-sm);
    box-sizing: border-box;
}

.password-reset-form input:focus {
    outline: none;
    border-color: var(--border-medium);
    background-color: var(--background-white);
}

.password-reset-form .form-help-text {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

.password-reset-form button {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--primary-green);
    color: var(--text-white);
    border: none;
    font-size: var(--text-sm);
    cursor: pointer;
    margin-top: var(--space-sm);
}

.password-reset-form button:hover {
    background-color: var(--dark-green);
}

.password-reset-container .error-message {
    background-color: var(--light-red);
    color: var(--dark-red);
    padding: var(--space-10);
    margin-bottom: var(--space-20);
    border: 1px solid var(--light-red);
    font-size: var(--text-sm);
    text-align: left;
}

.password-reset-container .back-to-login {
    margin-top: var(--space-lg);
    font-size: var(--text-sm);
    text-align: center;
}

.password-reset-container .back-to-login a {
    color: var(--primary-green);
    text-decoration: none;
}

.password-reset-container .back-to-login a:hover {
    text-decoration: underline;
}