/* ============================================
   MagiJobs — Auth Pages (shadcn-style)
   ============================================ */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg-body);
}

.auth-page::before, .auth-page::after { display: none; }

.auth-container { width: 100%; max-width: 400px; }

.auth-brand { text-align: center; margin-bottom: 32px; }
.auth-brand .logo-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: none;
}
.auth-brand .logo-icon svg { width: 24px; height: 24px; color: #fff; }
.auth-brand h1 { font-size: var(--text-2xl); font-weight: 700; color: var(--foreground); margin-bottom: 4px; }
.auth-brand h1 span { color: var(--brand); }
.auth-brand p { color: var(--muted-foreground); font-size: var(--text-sm); margin: 0; }

.auth-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 32px;
}
.auth-card h2 { font-size: var(--text-xl); margin-bottom: 4px; }
.auth-card .auth-subtitle { font-size: var(--text-sm); color: var(--muted-foreground); margin-bottom: 24px; }

.auth-divider { display: flex; align-items: center; gap: 16px; margin: 24px 0; color: var(--gray-400); font-size: var(--text-xs); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.auth-footer { text-align: center; margin-top: 24px; font-size: var(--text-sm); color: var(--muted-foreground); }
.auth-footer a { color: var(--foreground); font-weight: 500; }
.auth-footer a:hover { text-decoration: underline; }

.password-toggle { position: relative; }
.password-toggle .form-input { padding-right: 44px; }
.password-toggle-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--gray-400); cursor: pointer; padding: 4px; display: flex; }
.password-toggle-btn:hover { color: var(--foreground); }

.remember-forgot { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; font-size: var(--text-sm); }
.remember-forgot label { display: flex; align-items: center; gap: 6px; color: var(--muted-foreground); cursor: pointer; }
.remember-forgot a { color: var(--foreground); font-weight: 500; }
.auth-btn { width: 100%; padding: 10px; font-size: var(--text-sm); font-weight: 600; }

.password-strength { display: flex; gap: 4px; margin-top: 8px; }
.strength-bar { flex: 1; height: 3px; border-radius: var(--radius-full); background: var(--gray-200); transition: background var(--transition-fast); }
.strength-bar.weak { background: var(--error); }
.strength-bar.fair { background: var(--warning); }
.strength-bar.good { background: #F59E0B; }
.strength-bar.strong { background: var(--success); }
.strength-text { font-size: var(--text-xs); margin-top: 4px; }
.strength-text.weak { color: var(--error); }
.strength-text.fair { color: var(--warning); }
.strength-text.good { color: #D97706; }
.strength-text.strong { color: var(--success); }