/* auth.css: rules used only by the sign-in and password-reset pages
   (login.html, password_reset*.html). Split out of base.css; linked right after it. */

/* ─────────────────────────────────────────────
   AUTH PAGES  (login, password-reset flow)
   Standalone pages — no navbar, no base.html.
   Scoped to avoid conflicts with main-app styles.
────────────────────────────────────────────── */
body.auth-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
/* Shared white card — replaces conflicting .container on password-reset pages */
.auth-card,
.login-container {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 450px;
    text-align: right;
}
/* Center variant (success / info pages) */
.auth-card-center { text-align: center; }
.login-container  { text-align: center; max-width: 400px; }
.auth-card h2,
.login-container h2 { color: var(--gray-800); margin-bottom: 15px; }
.auth-card p,
.login-container p { color: var(--gray-500); line-height: 1.6; margin-bottom: 10px; }
/* Login header */
.login-header { margin-bottom: 30px; }
.login-icon { font-size: 50px; margin-bottom: 15px; display: block; }
.login-header h1 { color: var(--gray-800); font-size: 26px; margin-bottom: 8px; }
.login-header p  { color: var(--gray-500); font-size: var(--fs-md); margin-bottom: 0; }
/* Form groups */
.auth-card .form-group,
.login-container .form-group { text-align: right; margin-bottom: 20px; }
.auth-card label,
.login-container label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--gray-700);
    font-size: var(--fs-md);
}
/* Scoped inputs — avoids overriding main-app inputs when base.css is loaded */
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.login-container input[type="text"],
.login-container input[type="email"],
.login-container input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-xl);
    font-size: 15px;
    transition: border-color 0.3s;
    box-sizing: border-box;
    margin-top: 6px;
}
.auth-card input:focus,
.login-container input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* Primary action button — green gradient */
.btn-login,
.btn-save {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    font-size: var(--fs-lg);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
    text-decoration: none;
    box-sizing: border-box;
}
.btn-login:hover,
.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 176, 155, 0.4);
}
/* "Back to login" outline-button — renamed from .btn-back (conflicts with navbar) */
.auth-btn-back {
    display: inline-block;
    padding: 12px 25px;
    border: 2px solid #667eea;
    color: #667eea;
    border-radius: var(--radius-xl);
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}
.auth-btn-back:hover { background: #667eea; color: white; }
/* Error / feedback blocks */
.error-message {
    background-color: var(--red-50);
    color: var(--red-700);
    padding: 12px;
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    font-size: var(--fs-md);
    border: 1px solid var(--red-100);
}
.error-box {
    margin-bottom: 20px;
    text-align: center;
}
/* Icon at top of success / info cards */
.auth-icon         { font-size: 50px; margin-bottom: 20px; }
.auth-icon-success { font-size: 50px; margin-bottom: 20px; color: #4caf50; }
/* Misc */
.link-style       { color: #667eea; text-decoration: none; font-weight: bold; }
.auth-forgot-link { font-size: var(--fs-base); color: #667eea; text-decoration: none; }
.auth-link-row    { text-align: right; margin-bottom: 15px; }
.login-footer     { margin-top: 25px; color: var(--gray-400); font-size: var(--fs-sm); }