/* Styles for authentication pages */
html, body {
    height: 100%;
}

/* White background specifically for the login page */
body.auth-page {
    background-color: #ffffff;
}

.auth-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-signin {
    max-width: 330px;
    padding: 1rem;
}

.form-signin .form-floating:focus-within {
    z-index: 2;
}

.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.auth-logo {
    margin-bottom: 2em;
}

.auth-form-floating {
    margin-bottom: 2em;
}

.btn-auth {
    background-color: var(--brand-color);
    color: white;
}

.hidden {
    display: none;
}

/* Toggle visibility icon for password fields */
.password-toggle {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
}

/* Checkmark icon for matching passwords */
.password-check {
    position: absolute;
    top: 50%;
    right: 2.5rem;
    transform: translateY(-50%);
    color: green;
}

/* Styled links on auth pages */
.auth-link {
    color: var(--brand-color);
    text-decoration: none;
}
.auth-link:hover {
    text-decoration: underline;
}