/* icu-reconnect.css
   Branded, localized Blazor Server reconnect modal (Layer 3 of
   docs/proposals/blazor-reconnect-resilience.md). An element with
   id="components-reconnect-modal" (in App.razor's body) makes Blazor toggle its
   state classes on OUR element instead of injecting its default English modal;
   reconnect.js reacts to those classes to auto-recover. Global (not scoped)
   because the element lives outside any component, so ::deep can't reach it.
   Loaded after site.css so the .mf-btn override below wins. */

.icu-reconnect {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 11000;
    align-items: center;
    justify-content: center;
    background: rgba(17, 17, 17, .45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Blazor adds exactly one of these to the element when the circuit drops. */
.icu-reconnect.components-reconnect-show,
.icu-reconnect.components-reconnect-failed,
.icu-reconnect.components-reconnect-rejected {
    display: flex;
}

.icu-reconnect-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 32px;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body[data-theme="dark"] .icu-reconnect-card {
    background: #1e1e1e;
    color: #f3f3f3;
}

.icu-reconnect-spinner {
    width: 32px;
    height: 32px;
    margin: 0 auto 16px;
    border: 3px solid rgba(118, 75, 162, .2);
    border-top-color: #764ba2;
    border-radius: 50%;
    animation: icu-reconnect-spin .8s linear infinite;
}

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

.icu-reconnect-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 6px;
}

.icu-reconnect-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 18px;
}

body[data-theme="dark"] .icu-reconnect-text {
    color: #b8b8b8;
}

/* Show "Reconnecting..." while retrying; swap to the "gave up" copy once
   retries are exhausted (failed) or the circuit is gone (rejected). */
.icu-reconnect-failed {
    display: none;
}

.icu-reconnect.components-reconnect-failed .icu-reconnect-retrying,
.icu-reconnect.components-reconnect-rejected .icu-reconnect-retrying {
    display: none;
}

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

/* Stop the spinner once we've given up; surface the manual Reload button
   (reconnect.js usually auto-reloads first, so this is the fallback). */
.icu-reconnect.components-reconnect-failed .icu-reconnect-spinner,
.icu-reconnect.components-reconnect-rejected .icu-reconnect-spinner {
    display: none;
}

.icu-reconnect .mf-btn {
    display: none;
}

.icu-reconnect.components-reconnect-failed .mf-btn,
.icu-reconnect.components-reconnect-rejected .mf-btn {
    display: inline-flex;
}