/*
 * Custom reconnect modal styles. Two-state pattern (retry → failed) that
 * mirrors IdleLogoutMonitor's overlay/card visual treatment so the dialogs
 * feel like siblings.
 *
 * State machine — driven by Blazor's framework, NOT by our own JS:
 *
 *   The Blazor runtime adds/removes a set of `components-reconnect-*` CSS
 *   classes on the element with id="components-reconnect-modal" (per .NET 10
 *   ReconnectModal docs). We style those framework classes directly, so the
 *   modal always reflects the actual circuit state. App.razor's JS only
 *   listens to the matching `components-reconnect-state-changed` event to
 *   trigger Blazor.reconnect() (on `failed`) and resumeFlow() (on `rejected`).
 *
 *   - default (no framework class)            → hidden
 *   - .components-reconnect-show               → visible, "Reconnecting…" + spinner
 *   - .components-reconnect-retrying           → visible, "Reconnecting…" + spinner
 *   - .components-reconnect-paused             → visible, "Reconnecting…" + spinner (paused circuit)
 *   - .components-reconnect-hide               → hidden
 *   - .components-reconnect-failed             → visible, "Connection lost" + Continue
 *   - .components-reconnect-rejected           → visible, "Connection lost" + Continue
 *
 * Theme tokens (--kendo-color-surface, --kendo-color-on-surface,
 * --kendo-color-border, --kendo-color-primary, etc.) are defined per swatch by
 * the loaded Kendo Teams CSS — light, dark, classic, high-contrast all flow
 * through. No --mp-* fallbacks; the previous version used them and they were
 * never defined, so dark values were baked in for every theme.
 */

/* ── Overlay ───────────────────────────────────────────────────────────── */

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.65);
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* Visible states — any of these makes the modal flex-displayed. */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

/* Explicit hide — wins over `show` if both classes are ever set. */
#components-reconnect-modal.components-reconnect-hide {
    display: none;
}

/* ── Card surface (mirrors .idle-logout-card + TelerikCard chrome) ──────── */

#components-reconnect-modal .reconnect-card {
    width: 360px;
    max-width: 100%;
    background: var(--kendo-color-surface);
    color: var(--kendo-color-on-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

#components-reconnect-modal .reconnect-card__header {
    padding: 16px 20px 8px;
}

#components-reconnect-modal .reconnect-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--kendo-color-on-surface);
}

#components-reconnect-modal .reconnect-card__body {
    padding: 8px 20px 20px;
    text-align: center;
}

#components-reconnect-modal .reconnect-card__hint {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--kendo-color-on-surface);
}

/* ── Action button ─────────────────────────────────────────────────────── */

#components-reconnect-modal .reconnect-card__action {
    margin-top: 16px;
    background: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
    border: none;
    border-radius: 4px;
    padding: 8px 18px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter 120ms ease;
}

#components-reconnect-modal .reconnect-card__action:hover,
#components-reconnect-modal .reconnect-card__action:focus-visible {
    filter: brightness(1.1);
    outline: 2px solid var(--kendo-color-primary);
    outline-offset: 2px;
}

/* ── Spinner (pure CSS — TelerikLoader requires a live circuit) ────────── */

#components-reconnect-modal .reconnect-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--kendo-color-base-subtle);
    border-top-color: var(--kendo-color-primary);
    border-radius: 50%;
    animation: reconnect-spin 900ms linear infinite;
}

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

/* ── State toggles (which inner view is visible) ───────────────────────────
   Default (when only `show`/`retrying`/`paused` is on the modal): show
   the retrying view, hide the failed view. When `failed` or `rejected`
   is on the modal: hide the retrying view, show the failed view. The
   title's two <span>s use the same toggle so the H2 text swaps too. */

#components-reconnect-modal .reconnect-state--retrying {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 8px 0 4px;
}

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

#components-reconnect-modal.components-reconnect-failed .reconnect-state--retrying,
#components-reconnect-modal.components-reconnect-rejected .reconnect-state--retrying {
    display: none;
}

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

#components-reconnect-modal .reconnect-card__title--retrying {
    display: inline;
}

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

#components-reconnect-modal.components-reconnect-failed .reconnect-card__title--retrying,
#components-reconnect-modal.components-reconnect-rejected .reconnect-card__title--retrying {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-card__title--failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-card__title--failed {
    display: inline;
}