/* Login Page Specific Styles */
/* Inherits variables and base styles from dashboard.css */

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: var(--clr-bg);
    grid-template-columns: 1fr; /* Override dashboard grid */
}

.login-wrapper {
    width: 100%;
    max-width: 420px;
    padding: var(--space-md);
}

.auth-card {
    background: var(--clr-surface-alt);
    border: 1px solid var(--clr-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.auth-card h2 {
    text-align: center;
    margin-bottom: var(--space-xl);
    font-size: 1.5rem;
    color: var(--clr-text);
}

/* Button Styles (Synced with quizbuilder.css) */
.btn {
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
}

.btn-primary { background-color: var(--clr-primary); color: white; }
.btn-secondary { background-color: var(--clr-secondary); color: white; }
.btn-accent { background-color: var(--clr-accent); color: white; }

.btn:hover {
    filter: brightness(1.1);
}

.btn:active {
    filter: brightness(0.9);
}

/* Social Buttons */
.google-btn {
    background-color: #ffffff !important;
    color: #3c4043 !important;
    border: 1px solid #dadce0 !important;
    margin-bottom: var(--space-sm);
}

.facebook-btn {
    background-color: #1877f2 !important;
    color: #ffffff !important;
    margin-bottom: var(--space-md);
}

.google-btn svg, .facebook-btn svg {
    margin-right: 10px;
}

/* Divider */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: var(--space-lg) 0;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--clr-line);
}

.divider span {
    padding: 0 15px;
    color: var(--clr-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Form Elements */
.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--clr-text-label);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
}

input {
    width: 100%;
    box-sizing: border-box;
}

/* Links */
.link-accent {
    color: var(--clr-accent);
    text-decoration: none;
    font-weight: 600;
}

.link-accent:hover {
    text-decoration: underline;
}

.link-muted {
    color: var(--clr-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.link-muted:hover {
    color: var(--clr-text);
}

.switch-form {
    text-align: center;
    font-size: 0.95rem;
}

#switchMessage {
    color: var(--clr-text-muted);
}

/* Messages */
.message {
    min-height: 1.5rem;
    text-align: center;
    margin-bottom: var(--space-md);
    font-size: 0.9rem;
}

.message.error {
    color: var(--clr-error);
}

.message.success {
    color: var(--clr-success);
}

.text-center { text-align: center; }
.mt-sm { margin-top: var(--space-sm); }