/* Blazor Server reconnection overlay (MwReconnectOverlay.razor + js/mw-reconnect.js).
   Prefix: mw-rc-*. The #components-reconnect-modal id and the components-reconnect-* state
   classes are the Blazor framework convention and must keep those exact names. */

#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
}

#components-reconnect-modal::before {
    content: '';
    position: fixed;
    top: -50vh;
    left: -50vw;
    width: 200vw;
    height: 200vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: -1;
}

.mw-rc-content {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    min-width: 320px;
    max-width: 400px;
}

.mw-rc-content::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #667eea, #764ba2, #667eea);
    border-radius: 12px;
    z-index: -1;
    animation: mw-rc-pulse 2s infinite;
}

.mw-rc-layout {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    gap: 10px;
}

.mw-rc-image {
    margin-bottom: 1.5rem;
    animation: mw-rc-spin 4s linear infinite;
    width: 200px;
    height: 200px;
}

/* object-fit: the src is swapped at runtime to the tenant's app-bar logo (js/mw-reconnect.js
   adoptAppBarLogo), which is usually not square — contain letterboxes it instead of distorting. */
.mw-rc-image img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 8px;
}

.mw-rc-content p {
    margin: 0 0 1.5rem 0;
}

/* Cause-specific messaging — data-mw-cause is set by js/mw-reconnect.js probe logic.
   Default (attribute absent or "connecting"): neutral "reconnecting" wording. */
.mw-rc-message {
    display: none;
}

#components-reconnect-modal:not([data-mw-cause]) .mw-rc-message-connecting,
#components-reconnect-modal[data-mw-cause='connecting'] .mw-rc-message-connecting {
    display: block;
}

#components-reconnect-modal[data-mw-cause='update'] .mw-rc-message-update {
    display: block;
}

#components-reconnect-modal[data-mw-cause='offline'] .mw-rc-message-offline {
    display: block;
}

/* The auto-reload promise only holds when the server is reachable again (cause = update) —
   while offline or still probing, no reload will happen, so don't announce one. */
.mw-rc-reload-hint {
    display: none;
}

#components-reconnect-modal[data-mw-cause='update'] .mw-rc-reload-hint {
    display: block;
}

/* Show states (classes toggled by blazor.web.js) */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

/* Grace period: stay invisible for the first seconds of an outage so a momentary blip that
   reconnects quickly never flashes the modal. animation-delay + backwards fill holds the
   invisible "from" frame; GRACE_SECONDS in js/mw-reconnect.js mirrors this value. */
#components-reconnect-modal.components-reconnect-show {
    animation: mw-rc-appear 0.3s ease-out 3s backwards;
}

#components-reconnect-modal.components-reconnect-failed .mw-rc-content {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

#components-reconnect-modal.components-reconnect-rejected .mw-rc-content {
    background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
}

/* Reconnected toast — shown briefly by js/mw-reconnect.js after an outage that was visible */
#mw-rc-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 12px);
    z-index: 10001;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

#mw-rc-toast.mw-rc-toast-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

@keyframes mw-rc-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes mw-rc-pulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.02);
        filter: brightness(1.2);
    }
}

@keyframes mw-rc-appear {
    from {
        opacity: 0;
        transform: translate(-50%, -60%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}