/* AdminPortal css 07: Auth pages (login, 2FA, step-up, TOTP setup, recovery codes) + alerts.

   Trimmed from 643 lines to the ~30 selectors the five auth pages actually emit.
   Deleted as dead: the activity list, the scan-loader and its two keyframes, the
   five order-status badges, .btn-action, the account-info rows, the whole
   .settings-page layout and its two media queries, the plan badges, the trial
   badge, .alert-info, .validation-message and .auth-terms - no .razor file in
   this repo produces any of them.

   The auth card lost its gradient mask ring and 16px radius. It is now the same
   hairline panel as every other surface in the portal, which is the point: the
   login screen should look like the product it opens. */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
    z-index: 1;
    background: var(--background);
}

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

.auth-card {
    background: var(--card);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    position: relative;
}

.auth-header {
    text-align: center;
    margin-bottom: 28px;
}

.auth-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 6px;
}

.auth-header p {
    color: var(--foreground-muted);
    font-size: 0.875rem;
}

.auth-form {
    position: relative;
    z-index: 1;
}

.auth-form .form-group {
    margin-bottom: 16px;
}

.auth-form .form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--foreground-muted);
    margin-bottom: 6px;
}

/* Auth inputs are taller than the in-app ones: they are the only control on the
   screen and are often typed into on a phone. */
.auth-form .form-input {
    width: 100%;
    background: var(--surface);
    border: var(--hairline) solid var(--border-strong);
    border-radius: var(--radius);
    padding: 11px 12px;
    font-size: 0.9375rem;
    color: var(--foreground);
    transition: border-color var(--transition);
}

.auth-form .form-input:focus {
    outline: 2px solid var(--ring);
    outline-offset: -1px;
    border-color: var(--ring);
}

.auth-form .form-input::placeholder {
    color: var(--foreground-subtle);
}

.auth-form .form-hint {
    display: block;
    font-size: 0.8125rem;
    color: var(--foreground-subtle);
    margin-top: 6px;
}

.auth-form .btn-full {
    height: 40px;
    font-size: 0.9375rem;
}

.auth-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: var(--hairline) solid var(--border);
}

.auth-footer p {
    color: var(--foreground-muted);
    font-size: 0.875rem;
}

.auth-footer a,
.form-link {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.auth-footer a:hover,
.form-link:hover {
    text-decoration: underline;
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--foreground-muted);
    font-size: 0.875rem;
}

.form-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

/* ============================================
   Alerts

   Block flow (not flex): the leading icon sits inline at the start of the text and
   the message reads as one sentence. Flex made every inline <strong>/<a> its own
   flex item, so sentences fragmented into gap-separated chunks that wrapped wrong.
   ============================================ */
.alert {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: var(--hairline) solid transparent;
    margin-bottom: 16px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.alert > i:first-child,
.alert > .bi:first-child {
    margin-right: 8px;
}

/* Body copy on a tint: text takes -strong, the border keeps the fill value (a
   border is non-text and only needs 3:1). */
.alert-error {
    background: var(--danger-subtle);
    border-color: var(--danger);
    color: var(--danger-strong);
}

.alert-success {
    background: var(--success-subtle);
    border-color: var(--success);
    color: var(--success-strong);
}

.alert-info {
    background: var(--info-subtle);
    border-color: var(--info);
    color: var(--info-strong);
}

.alert-icon {
    flex-shrink: 0;
}

/* An alert carries meaning, so the body text inside it must stay at full
   foreground contrast rather than inheriting the (tinted) intent colour. */
.alert strong,
.alert p {
    color: inherit;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   Loading state (used by the auth pages while posting)
   ============================================ */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 32px;
    color: var(--foreground-muted);
}

@media (max-width: 480px) {
    .auth-card {
        padding: 24px 18px;
    }
}