/* ==========================================
   Login Page Specific Styles
   (Uses shared styles from ../css/protected-pages.css)
   All common styles (.login-section, .login-container, etc.)
   are defined in protected-pages.css for consistency
   ========================================== */

/* Form layout */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Form options (Remember Me + Forgot Password) */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -5px;
}

.forgot-link {
    font-size: var(--font-size-small, 0.875rem);
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.forgot-link:hover {
    color: var(--secondary-color);
}

/* Info box specific features */
.info-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.info-feature {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: var(--transition-smooth);
}

.info-feature:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.feature-icon {
    font-size: var(--font-size-h3, 1.5rem);
}

.info-feature span:last-child {
    font-size: var(--font-size-body, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary);
}

/* ==========================================
   Responsive Overrides
   ========================================== */

@media (max-width: 640px) {
    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

/* ==========================================
   Second factor
   ==========================================
   The two steps that replace the password form once the server answers with a challenge.
   Both live in the same login box, so they inherit its spacing and only add what is new. */

.mfa-step h2 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.mfa-intro {
    margin: 0 0 1.25rem;
    color: var(--text-secondary);
    font-size: 0.925rem;
    line-height: 1.5;
}

/* Sized in rem rather than left to the SVG: the image arrives as a data URI with its own
   intrinsic size, which is far larger than the box. */
.mfa-qr {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto 1.25rem;
    /* White regardless of theme. A QR code inverted by a dark background does not scan. */
    background: #fff;
    padding: 0.5rem;
    border-radius: 8px;
}

.mfa-manual {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.mfa-manual summary {
    cursor: pointer;
    color: var(--text-secondary);
}

.mfa-manual p {
    margin: 0.5rem 0 0.25rem;
}

/* Wraps and breaks anywhere: this is a 32-character key that has to be readable for typing,
   not a line of prose. */
.mfa-secret {
    display: block;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    word-break: break-all;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: rgba(127, 127, 127, 0.12);
    color: var(--text-primary);
}

.mfa-warning {
    margin: 0 0 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Wide, spaced digits: the field takes exactly six characters copied off a phone screen. */
#mfa-enroll-code,
#mfa-verify-code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.4em;
    text-align: center;
}

/* Recovery codes. Monospaced and widely spaced because they get transcribed by hand. */
.mfa-codes {
    list-style: none;
    margin: 0 0 1rem;
    padding: 1rem;
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.12);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
}

.mfa-codes li {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    /* Selectable as a unit: the likeliest thing a user does here is drag across one code. */
    user-select: all;
}

.mfa-codes-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mfa-codes-actions .btn {
    flex: 1;
}

.mfa-codes-confirm {
    display: block;
    margin-bottom: 1rem;
}

/* One column below the width where two codes stop fitting side by side. */
@media (max-width: 420px) {
    .mfa-codes {
        grid-template-columns: 1fr;
    }
}