/* --- Login Page Specific Styles --- */

body.login-page-body {
    background-color: #f0f2f5; /* Light grey background for the whole page */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensure container is centered vertically */
    font-family: sans-serif; /* Ensure consistent font */
    margin: 0; /* Remove default body margin */
}

.login-container {
    max-width: 400px; /* Container width */
    width: 90%; /* Responsive width */
    padding: 40px 30px; /* Vertical and horizontal padding */
    background-color: #ffffff; /* White background for the form box */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    text-align: center; /* Center align text elements */
}

.login-container h1 {
    font-size: 1.8em; /* Title size */
    color: #1c1e21; /* Dark color for title */
    margin-top: 0; /* Remove default margin */
    margin-bottom: 10px; /* Space below title */
}

.login-subtitle {
    font-size: 1.1em;
    color: #606770; /* Grey color for subtitle */
    margin-bottom: 30px; /* Space below subtitle */
}

/* Styling for form groups */
.login-form-group {
    margin-bottom: 20px; /* Space between form groups */
    text-align: left; /* Align labels and inputs left */
}

.login-form-group label {
    display: block; /* Make label take full width */
    font-size: 0.9em;
    color: #606770;
    margin-bottom: 5px; /* Space between label and input */
    font-weight: bold;
}

.login-form-group input[type="email"],
.login-form-group input[type="password"] {
    width: 100%; /* Full width input */
    padding: 12px 15px; /* Padding inside input */
    border: 1px solid #dddfe2; /* Light border */
    border-radius: 6px; /* Rounded corners for inputs */
    font-size: 1em;
    box-sizing: border-box; /* Include padding/border in width */
}

.login-form-group input:focus {
    border-color: #007bff; /* Blue border on focus */
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2); /* Subtle glow */
}

/* Login button styling */
.login-button {
    width: 100%;
    padding: 12px;
    background-color: #007bff; /* Blue background */
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 10px; /* Space above button */
    margin-bottom: 20px; /* Space below button */
}

.login-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Styling for links below the form */
.login-links {
    margin-top: 25px; /* Space above the links */
    font-size: 0.9em;
}

.login-links p {
    color: #606770;
    margin-bottom: 15px; /* Space between sign up text and back link */
}

.login-links a {
    color: #007bff; /* Blue color for links */
    text-decoration: none;
    font-weight: bold;
}

.login-links a:hover {
    text-decoration: underline;
}

.back-welcome-link {
    display: inline-block; /* Treat as block but inline */
   /* margin-top: 10px; /* Space above this specific link */
}

/* Styling for error messages */
.login-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 20px; /* Space below error message */
    text-align: center;
    font-size: 0.9em;
}