/*
 * TMRW-206 — Styling for the custom Blazor InteractiveServer reconnect modal.
 *
 * The framework toggles four state classes on #components-reconnect-modal:
 *   - components-reconnect-show       reconnecting (default view)
 *   - components-reconnect-hide       connected (hide everything)
 *   - components-reconnect-failed     all retries exhausted
 *   - components-reconnect-rejected   server rejected reconnect (circuit gone)
 *
 * The markup in App.razor carries three child blocks — one per visible
 * state — and the CSS below shows/hides each based on which framework
 * class is active. Default (no class) is hidden.
 */

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1080;
    background-color: rgba(0, 0, 0, 0.5);
    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;
}

#components-reconnect-modal .tmr-reconnect-card {
    background-color: var(--tmr-form-shadow-bg, #1f2937);
    color: var(--tmr-text-light, #ffffff);
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    padding: 1.75rem 2rem;
    max-width: 480px;
    width: calc(100% - 2rem);
    text-align: center;
}

#components-reconnect-modal .tmr-reconnect-card h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1.25rem;
    font-weight: 600;
}

#components-reconnect-modal .tmr-reconnect-card p {
    margin: 0 0 1.25rem 0;
}

#components-reconnect-modal .tmr-reconnect-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

#components-reconnect-modal .tmr-reconnect-actions button {
    cursor: pointer;
}

/* State-conditional visibility for the three message blocks. */
#components-reconnect-modal .tmr-reconnect-block { display: none; }

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

/* Hide the framework's default-injected children — the default <p>
   markup that ASP.NET Core injects when no custom child markup is
   present. We're providing our own; suppress any framework fallback. */
#components-reconnect-modal > p { display: none; }