/* Reconnect Modal — Blazor Server */
#components-reconnect-modal {
    display: none;
}

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

.reconnect-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.reconnect-box {
    background: #fff;
    border-radius: 14px;
    padding: 32px 28px;
    text-align: center;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
}

.reconnect-box p {
    font-size: .95rem;
    color: #374151;
    margin-bottom: 16px;
}

/* Per default mostra solo lo stato corretto */
#components-reconnect-modal.components-reconnect-show .failed,
#components-reconnect-modal.components-reconnect-show .rejected { display: none !important; }
#components-reconnect-modal.components-reconnect-show .reconnecting { display: block !important; }

#components-reconnect-modal.components-reconnect-failed .reconnecting,
#components-reconnect-modal.components-reconnect-failed .rejected { display: none !important; }
#components-reconnect-modal.components-reconnect-failed .failed { display: block !important; }

#components-reconnect-modal.components-reconnect-rejected .reconnecting,
#components-reconnect-modal.components-reconnect-rejected .failed { display: none !important; }
#components-reconnect-modal.components-reconnect-rejected .rejected { display: block !important; }

/* Spinner */
.reconnect-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    border: 4px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: reconnect-spin .8s linear infinite;
}

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