/* ============================================================
   IDENTITY RCL SHIM
   Bridges Microsoft.AspNetCore.Identity.UI's RCL pages (which
   use Bootstrap 5 classes) onto the FSM brand tokens.

   When ASP.NET Core Identity ships pages we haven't scaffolded
   locally — most notably the 2FA flow under
   /Identity/Account/Manage/* — those pages render with raw
   Bootstrap class names: .row, .col-md-6, .form-control,
   .btn-primary, .form-floating, .alert-danger, etc.  We don't
   ship Bootstrap, so without this file those pages render as
   unstyled HTML on the brand canvas.

   Scope: every rule here is nested inside .identity-rcl-fallback,
   the wrapper added in Areas/Identity/Pages/_Layout.cshtml around
   @RenderBody().  Scaffolded pages that supply their own
   full-page layout (e.g. Login.cshtml's <main class="auth">)
   bypass the container styling via the :has() escape.

   Replace with locally-scaffolded + brand-styled .cshtml files
   when each Identity flow gets enough product weight to deserve
   its own design treatment (Phase 25+ polish backlog).
   ============================================================ */

/* ---------- Container ---------- */

.identity-rcl-fallback {
    padding: var(--space-8) var(--space-6);
    max-width: 720px;
    margin: 0 auto;
    color: var(--text-primary);
}

/* Scaffolded full-page pages (Login.cshtml supplies <main class="auth">)
   bypass the container constraints — the .auth grid wants the full viewport. */
.identity-rcl-fallback:has(> main.auth, > .auth) {
    padding: 0;
    max-width: none;
    margin: 0;
}

/* ---------- Typography baseline ---------- */

.identity-rcl-fallback h1,
.identity-rcl-fallback h2,
.identity-rcl-fallback h3,
.identity-rcl-fallback h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    color: var(--text-strong);
    line-height: var(--leading-tight);
    margin-block: 0 var(--space-5);
}
.identity-rcl-fallback h1 { font-size: var(--text-3xl); }
.identity-rcl-fallback h2 { font-size: var(--text-2xl); }
.identity-rcl-fallback h3 { font-size: var(--text-xl); }
.identity-rcl-fallback h4 { font-size: var(--text-lg); }

.identity-rcl-fallback p,
.identity-rcl-fallback li {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}
.identity-rcl-fallback ol,
.identity-rcl-fallback ul {
    margin: 0 0 var(--space-5) 0;
    padding-left: var(--space-6);
}
.identity-rcl-fallback li { margin-bottom: var(--space-3); }
.identity-rcl-fallback hr {
    border: none;
    border-top: 1px solid var(--border-default);
    margin-block: var(--space-6);
}

/* Authenticator key + recovery codes render as <kbd> blocks */
.identity-rcl-fallback kbd {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--surface-canvas);
    border: 1px solid var(--border-default);
    padding: 0.2em 0.5em;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

/* QR code container — RCL uses <div id="qrCode"> */
.identity-rcl-fallback #qrCode {
    margin-block: var(--space-4);
    display: inline-block;
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-sm);
}

.identity-rcl-fallback a {
    color: var(--color-action);
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, var(--color-action) 50%, transparent);
    text-underline-offset: 3px;
}
.identity-rcl-fallback a:hover {
    text-decoration-color: var(--color-action);
}

/* ---------- Bootstrap layout grid ---------- */

.identity-rcl-fallback .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}
.identity-rcl-fallback [class*="col-"] {
    flex: 1 1 100%;
    min-width: 0;
}
@media (min-width: 768px) {
    .identity-rcl-fallback .col-md-6 { flex: 1 1 calc(50% - var(--space-5) / 2); }
    .identity-rcl-fallback .col-md-7 { flex: 1 1 calc(58% - var(--space-5) / 2); }
    .identity-rcl-fallback .col-md-8 { flex: 1 1 calc(67% - var(--space-5) / 2); }
}

/* ---------- Bootstrap spacing utilities ---------- */

.identity-rcl-fallback .mb-1 { margin-bottom: var(--space-1); }
.identity-rcl-fallback .mb-2 { margin-bottom: var(--space-2); }
.identity-rcl-fallback .mb-3 { margin-bottom: var(--space-3); }
.identity-rcl-fallback .mb-4 { margin-bottom: var(--space-4); }
.identity-rcl-fallback .mb-5 { margin-bottom: var(--space-5); }
.identity-rcl-fallback .mt-1 { margin-top: var(--space-1); }
.identity-rcl-fallback .mt-2 { margin-top: var(--space-2); }
.identity-rcl-fallback .mt-3 { margin-top: var(--space-3); }
.identity-rcl-fallback .mt-4 { margin-top: var(--space-4); }
.identity-rcl-fallback .mt-5 { margin-top: var(--space-5); }
.identity-rcl-fallback .w-100 { width: 100%; }

/* ---------- Bootstrap form controls (mirror .input) ---------- */

.identity-rcl-fallback .form-control,
.identity-rcl-fallback input[type="text"]:not([class*="form-check"]),
.identity-rcl-fallback input[type="email"],
.identity-rcl-fallback input[type="password"],
.identity-rcl-fallback input[type="number"],
.identity-rcl-fallback select.form-select {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--surface-canvas);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-primary);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}
.identity-rcl-fallback .form-control::placeholder { color: var(--text-faint); }
.identity-rcl-fallback .form-control:focus,
.identity-rcl-fallback .form-control:focus-visible {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--focus-ring);
}
.identity-rcl-fallback .form-control.is-invalid,
.identity-rcl-fallback .form-control.input-validation-error {
    border-color: var(--color-danger);
}

.identity-rcl-fallback .form-label,
.identity-rcl-fallback .control-label,
.identity-rcl-fallback label:not(.form-check-label) {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

/* Form-floating: RCL uses Bootstrap's float-label trick.  We don't
   replicate the float; just stack label-on-top-of-input. */
.identity-rcl-fallback .form-floating {
    position: static;
    margin-bottom: var(--space-3);
}
.identity-rcl-fallback .form-floating > label {
    position: static;
    transform: none;
    padding: 0;
    margin-bottom: var(--space-2);
    pointer-events: auto;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    height: auto;
    opacity: 1;
}
.identity-rcl-fallback .form-floating > .form-control {
    padding: 0.875rem 1rem;
    height: auto;
}
.identity-rcl-fallback .form-floating > .form-control::placeholder {
    color: transparent;
}

/* Form-check (checkbox + inline label) */
.identity-rcl-fallback .form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.identity-rcl-fallback .form-check-input {
    accent-color: var(--color-action);
    width: 1rem;
    height: 1rem;
}
.identity-rcl-fallback .form-check-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* ---------- Bootstrap buttons (mirror .btn / .btn--primary) ---------- */

.identity-rcl-fallback .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.identity-rcl-fallback .btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.identity-rcl-fallback .btn:active { transform: translateY(1px); }
.identity-rcl-fallback .btn-lg {
    padding: 1.05rem 1.85rem;
    font-size: var(--text-base);
}
.identity-rcl-fallback .btn-sm {
    padding: 0.55rem 1rem;
    font-size: var(--text-xs);
}
.identity-rcl-fallback .btn-primary {
    background: var(--color-action);
    color: var(--text-on-action);
    box-shadow: var(--shadow-sm);
}
.identity-rcl-fallback .btn-primary:hover {
    background: var(--color-action-hover);
    box-shadow: var(--shadow-md);
}
.identity-rcl-fallback .btn-primary:active {
    background: var(--color-action-active);
}
.identity-rcl-fallback .btn-secondary,
.identity-rcl-fallback .btn-outline-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-default);
}
.identity-rcl-fallback .btn-secondary:hover,
.identity-rcl-fallback .btn-outline-secondary:hover {
    background: var(--surface-canvas);
    border-color: var(--text-primary);
}
.identity-rcl-fallback .btn-danger {
    background: var(--color-danger);
    color: var(--text-on-action);
    border-color: var(--color-danger);
}

/* ---------- Validation + alerts ---------- */

.identity-rcl-fallback .text-danger,
.identity-rcl-fallback .invalid-feedback,
.identity-rcl-fallback .field-validation-error {
    color: var(--color-danger);
    font-size: var(--text-xs);
    margin-top: var(--space-1);
    display: block;
}

.identity-rcl-fallback .alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    border-left: 2px solid transparent;
}
.identity-rcl-fallback .alert-danger,
.identity-rcl-fallback .validation-summary-errors {
    background: color-mix(in oklab, var(--color-danger) 10%, transparent);
    border-left-color: var(--color-danger);
    color: var(--color-danger);
}
.identity-rcl-fallback .alert-warning {
    background: color-mix(in oklab, var(--color-warning) 12%, transparent);
    border-left-color: var(--color-warning);
    color: var(--text-strong);
}
.identity-rcl-fallback .alert-info {
    background: color-mix(in oklab, var(--color-action) 10%, transparent);
    border-left-color: var(--color-action);
    color: var(--text-strong);
}
.identity-rcl-fallback .alert-success {
    background: color-mix(in oklab, var(--color-success) 12%, transparent);
    border-left-color: var(--color-success);
    color: var(--text-strong);
}
.identity-rcl-fallback .validation-summary-errors ul {
    margin: 0;
    padding-left: var(--space-5);
}

/* ---------- Misc utility classes occasionally used by RCL ---------- */

.identity-rcl-fallback .text-muted { color: var(--text-secondary); }
.identity-rcl-fallback .text-center { text-align: center; }
.identity-rcl-fallback .d-flex { display: flex; }
.identity-rcl-fallback .gap-2 { gap: var(--space-2); }
.identity-rcl-fallback .gap-3 { gap: var(--space-3); }