/* Styles specific to auth pages, body centering is handled by base_app for non-app layout pages if desired */
/* Forcing centering for auth pages if base_app doesn't do it by default for non-sidebar layout */
body.auth-page-body { /* Added a specific class to avoid conflict with base_app.html body styles */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--light-color, #f8f9fa); /* Fallback if CSS vars not loaded */
}

.auth-container {
    width: 100%;
    max-width: 480px; /* Max width for the auth form box */
    padding: 1rem; /* Padding around the auth box */
}

.auth-box {
    background-color: white;
    border-radius: var(--border-radius, 0.5rem);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 2rem; /* Internal padding for the box */
}

.app-logo-auth { /* Renamed to avoid conflict if base_app has .app-logo */
    text-align: center;
    margin-bottom: 1.5rem;
}

.app-logo-auth img {
    height: 50px; 
    width: 50px; 
    display: block; 
    margin: 0 auto 0.75rem auto;
}

.app-logo-auth h1 {
    color: var(--primary-color, #014F86);
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.form-control:focus { /* This can be global or specific */
    border-color: var(--primary-color, #014F86);
    box-shadow: 0 0 0 0.2rem rgba(1, 79, 134, 0.25); /* Assuming primary color RGB */
}

.btn-primary { /* This can be global or specific */
    background-color: var(--primary-color, #014F86);
    border-color: var(--primary-color, #014F86);
}

.btn-primary:hover {
    background-color: var(--secondary-color, #0077B6);
    border-color: var(--secondary-color, #0077B6);
}
        
.footer-auth { /* Renamed to avoid conflict */
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 2rem;
    text-align: center;
}

/* Dark mode specific styles for auth pages */
html.dark-mode body.auth-page-body { /* Ensure dark mode body for auth pages is consistent */
    background-color: var(--dm-bg-primary, #1a1a1a);
}
html.dark-mode .auth-box {
    background-color: var(--dm-bg-secondary, #2c2c2c);
    border: 1px solid var(--dm-border-color, #444444);
    /* Ensure any frosted-glass specific box-shadow is removed for dark mode too */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* Revert to a consistent shadow or remove if none was there */
}
html.dark-mode .app-logo-auth h1, 
html.dark-mode .app-logo-auth .text-muted,
html.dark-mode .footer-auth p {
    color: var(--dm-text-primary, #e0e0e0);
}
 html.dark-mode .app-logo-auth .text-muted {
    color: var(--dm-text-secondary, #b0b0b0) !important;
}
html.dark-mode .footer-auth p small {
     color: var(--dm-text-secondary, #b0b0b0) !important;
}

.auth-loading {
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    gap: 0.5rem; /* Space between spinner and text */
    margin-bottom: 1rem; /* Space below loader before button */
}
/* Style for when it's shown by JS */
.auth-loading.visible {
    display: flex; 
}