/* ifp/static/css/auth_theme.css */

/* Ensure :root variables from viewer_theme.css are available.
   If viewer_theme.css is loaded globally before this, this is fine.
   Otherwise, you might need to @import viewer_theme.css or copy :root variables.
   For this setup, we assume viewer_theme.css is loaded via the <link> tag in login.html.
*/

body.auth-page {
    background-color: var(--color-background-body);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-xl);
    font-family: var(--font-primary);
    color: var(--color-text-primary);
}

.auth-container {
    width: 100%;
    max-width: 400px; /* Slightly narrower for typical auth forms */
    background-color: var(--color-background-surface);
    padding: var(--spacing-xl) var(--spacing-xxl); /* More padding for a focused feel */
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.auth-form-block h2 {
    font-size: 1.8rem; /* Slightly larger title */
    font-weight: 600;
    color: var(--color-text-primary);
    margin-top: 0;
    margin-bottom: var(--spacing-xl);
}

.auth-form-block form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg); /* Consistent gap */
}

.auth-form-block input[type="text"],
.auth-form-block input[type="email"],
.auth-form-block input[type="password"] {
    width: 100%;
    padding: var(--spacing-md); /* Consistent padding */
    font-size: var(--font-size-md);
    border: var(--border-width) solid var(--color-border-input);
    border-radius: var(--border-radius-md);
    background-color: var(--color-background-surface);
    color: var(--color-text-primary);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box; /* Important for padding and border */
}

.auth-form-block input[type="text"]:focus,
.auth-form-block input[type="email"]:focus,
.auth-form-block input[type="password"]:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus-ring);
}

.auth-button {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-md);
    font-weight: 500; /* Standard weight for buttons */
    background-color: var(--color-primary-main);
    color: var(--color-text-on-primary);
    border: none; /* Primary buttons often don't need a border if bg is strong */
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    text-transform: none; 
    width: 100%; /* Make button full width of form */
    box-sizing: border-box;
}

.auth-button:hover, .auth-button:focus-visible {
    background-color: var(--color-primary-dark);
    outline: none; /* Handled by box-shadow on focus-visible if needed */
}
.auth-button:focus-visible {
     box-shadow: var(--shadow-focus-ring);
}


.auth-links {
    margin-top: var(--spacing-xl);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.auth-links a {
    color: var(--color-text-link);
    text-decoration: none;
    font-weight: 500;
}

.auth-links a:hover, .auth-links a:focus-visible {
    text-decoration: underline;
    outline: none;
}
.auth-links a:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary-light); /* Subtle focus for links */
    border-radius: var(--border-radius-sm);
}


.error-message {
    color: var(--color-text-error);
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    /* margin-top: var(--spacing-sm); Removed to be controlled by form gap */
    text-align: left; 
    line-height: 1.4;
}

.success-message { /* For registration success, if used on login page after redirect */
    color: var(--color-text-success);
    background-color: rgba(25, 135, 84, 0.1);
    border: 1px solid rgba(25, 135, 84, 0.3);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    text-align: left;
    line-height: 1.4;
}

/* --- NEW UTILITY CLASSES --- */
.hidden {
    display: none !important;
}
.text-center {
    text-align: center;
}
.text-error {
    color: var(--color-text-error);
}
.mt-xs {
    margin-top: var(--spacing-xs);
}
.mt-sm {
    margin-top: var(--spacing-sm);
}
.mt-md {
    margin-top: var(--spacing-md);
}
.mt-xl {
    margin-top: var(--spacing-xl);
}
.mb-0 {
    margin-bottom: 0;
}
.mb-xl {
    margin-bottom: var(--spacing-xl);
}
.btn-danger {
    background-color: var(--color-text-error);
    border-color: var(--color-text-error);
    color: var(--color-text-on-primary);
}
.btn-danger:hover {
    background-color: #b02a37; /* Darker red */
    border-color: #b02a37;
}
.btn-warning {
    background-color: var(--color-text-warning);
    border-color: var(--color-text-warning);
    color: var(--color-warning-yellow-text-darker);
}
.btn-warning:hover {
    background-color: #e0ad06;  /* darker warning yellow */
    border-color:     #e0ad06;
}
.form-inline-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-end;
    flex-wrap: wrap;
}
.flex-grow-1 {
    flex-grow: 1;
}
.min-width-150 {
    min-width: 150px;
}
.min-width-120 {
    min-width: 120px;
}
.form-action-button {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    margin-bottom: 0;
}
.d-flex {
    display: flex;
}
.gap-xs {
    gap: var(--spacing-xs);
}
.align-items-end {
    align-items: flex-end;
}