/* ============================================================================
   Circuit recovery UI — what the customer sees when a Blazor Server circuit
   drops or faults. Replaces the unstyled blank purple overlay.

   Brand colors mirror css/theme/colors.css:
     --color-primary:#5F368D  --color-danger:#B22A2E  --color-warning:#DEB403
   ============================================================================ */

:root {
    --recovery-primary: #5F368D;
    --recovery-danger:  #B22A2E;
    --recovery-warning: #DEB403;
}

/* ---------------------------------------------------------------------------
   1) RECONNECT MODAL  —  #components-reconnect-modal
   Blazor toggles these classes automatically as the circuit drops/recovers:
     .components-reconnect-show      reconnecting (auto-retrying)
     .components-reconnect-hide      reconnected  (hide)
     .components-reconnect-failed    retries exhausted (offer manual retry)
     .components-reconnect-rejected  server rejected (must reload)
   Blazor also fills in #components-reconnect-current-attempt / -max-retries.
--------------------------------------------------------------------------- */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: rgba(31, 18, 52, .55);
    backdrop-filter: blur(2px);
    /* centering works whether the framework sets display:block or our flex */
    align-items: center;
    justify-content: center;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: flex;
    }

    #components-reconnect-modal.components-reconnect-hide {
        display: none;
    }

.recovery-card {
    background: #fff;
    border-radius: 14px;
    padding: 30px 34px;
    max-width: 400px;
    width: calc(100% - 40px);
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,.30);
    font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
    position: absolute;            /* keeps it centered even under display:block */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.recovery-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 4px solid #e7e0f0;
    border-top-color: var(--recovery-primary);
    animation: recovery-spin .9s linear infinite;
}

@keyframes recovery-spin {
    to { transform: rotate(360deg); }
}

.recovery-card h2 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--recovery-primary);
}

.recovery-card p {
    margin: 0 0 6px;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

.recovery-card .recovery-attempt {
    font-size: 12px;
    color: #999;
}

.recovery-card .recovery-btn {
    margin-top: 16px;
    background: var(--recovery-primary);
    color: #fff;
    border: 0;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}

    .recovery-card .recovery-btn:hover {
        filter: brightness(1.08);
    }

/* Swap the message block based on circuit state. "reconnecting" shows while
   .components-reconnect-show; "failed" text shows once retries are exhausted. */
.recovery-failed-block { display: none; }

.components-reconnect-failed .recovery-reconnecting-block,
.components-reconnect-rejected .recovery-reconnecting-block { display: none; }

.components-reconnect-failed .recovery-failed-block,
.components-reconnect-rejected .recovery-failed-block { display: block; }

/* ---------------------------------------------------------------------------
   2) FATAL ERROR UI  —  #blazor-error-ui
   Blazor sets style="display:block" on this element when an unhandled
   exception escapes (circuit-fatal). Hidden by default.
--------------------------------------------------------------------------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(244, 245, 248, .97);
}

.error-card {
    background: #fff;
    max-width: 460px;
    width: calc(100% - 40px);
    border-radius: 14px;
    padding: 34px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    border-top: 5px solid var(--recovery-danger);
    font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .error-card .error-icon { font-size: 40px; line-height: 1; margin-bottom: 10px; }
    .error-card h2 { margin: 0 0 10px; font-size: 20px; color: #3D3B40; }
    .error-card p  { margin: 0 0 8px; color: #555; font-size: 14px; line-height: 1.55; }

    .error-card .recovery-btn {
        margin-top: 14px;
        background: var(--recovery-primary);
        color: #fff;
        border: 0;
        padding: 11px 26px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        font-size: 14.5px;
    }

        .error-card .recovery-btn:hover { filter: brightness(1.08); }

    .error-card .error-support { margin-top: 14px; font-size: 12.5px; color: #888; }
    .error-card .error-support a { color: var(--recovery-primary); }

/* Loop-guard escalation: after repeated reloads, JS adds .recovery-looped so we
   stop offering reload (which would loop) and point the customer at support. */
.error-card .error-looped-msg { display: none; }

.error-card.recovery-looped {
    border-top-color: var(--recovery-warning);
}

    .error-card.recovery-looped .recovery-btn { display: none; }

    .error-card.recovery-looped .error-looped-msg {
        display: block;
        background: #fdf6e3;
        border: 1px solid #ecd98a;
        border-radius: 8px;
        padding: 10px 12px;
        margin-top: 14px;
        font-size: 13px;
        color: #7a5d00;
    }