/* Verbindungsdialog (Components/Layout/ReconnectModal.razor): Glas-Karte im Stil der App, Farben aus dem MudBlazor-Theme (hell/dunkel). */

/* Je nach Zustand setzt Blazor eine der Klassen components-reconnect-show/-retrying/-failed/-paused/-resume-failed am Dialog. */
#components-reconnect-modal .components-reconnect-first-attempt-visible,
#components-reconnect-modal .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal .components-reconnect-failed-visible,
#components-reconnect-modal .components-pause-visible,
#components-reconnect-modal .components-resume-failed-visible,
#components-reconnect-modal .rl-reconnect-ring { display: none; }

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .rl-reconnect-ring,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .rl-reconnect-ring,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible { display: inline; }

/* Beim erneuten Versuch trägt der Dialog "show" und "retrying" zugleich - dann nur den Text des erneuten Versuchs zeigen. */
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible { display: none; }

#components-reconnect-modal.components-reconnect-failed .rl-reconnect-knopf.components-reconnect-failed-visible,
#components-reconnect-modal.components-reconnect-paused .rl-reconnect-knopf.components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .rl-reconnect-knopf.components-resume-failed-visible { display: inline-flex; }
#components-reconnect-modal.components-reconnect-show .rl-reconnect-ring,
#components-reconnect-modal.components-reconnect-retrying .rl-reconnect-ring { display: block; }

#components-reconnect-modal {
    width: min(26rem, calc(100vw - 2rem));
    margin: 18vh auto auto;
    padding: 0;
    border: 1px solid var(--glass-line, rgba(255, 255, 255, 0.55));
    border-radius: 20px;
    color: var(--mud-palette-text-primary, #1f2933);
    background: color-mix(in srgb, var(--mud-palette-surface, #ffffff) 90%, transparent);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    backdrop-filter: saturate(150%) blur(18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 4px 14px rgba(0, 0, 0, 0.14);
    opacity: 0;
    transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete;
    animation: rl-reconnect-aus 0.4s both;
}

#components-reconnect-modal[open] {
    animation: rl-reconnect-ein 0.5s cubic-bezier(.05, .89, .25, 1.02) 0.2s both;
}

#components-reconnect-modal::backdrop {
    background: rgba(18, 26, 22, 0.42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: rl-reconnect-fade 0.4s ease-in-out;
}

.rl-reconnect { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: 2rem 1.75rem 1.6rem; text-align: center; }

.rl-reconnect-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    color: var(--mud-palette-primary, #1565c0);
    background: color-mix(in srgb, var(--mud-palette-primary, #1565c0) 14%, transparent);
}

/* Rotierender Ring um das Symbol, solange noch versucht wird, die Verbindung herzustellen. */
.rl-reconnect-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--mud-palette-primary, #1565c0);
    border-right-color: color-mix(in srgb, var(--mud-palette-primary, #1565c0) 35%, transparent);
    animation: rl-reconnect-dreh 1.1s linear infinite;
}

.rl-reconnect-titel { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.01em; }
.rl-reconnect-text { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--mud-palette-text-secondary, #52606d); max-width: 22rem; }
.rl-reconnect-titel span, .rl-reconnect-text span { display: none; }

.rl-reconnect-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.4rem; }
.rl-reconnect-aktionen .rl-reconnect-knopf { display: none; }

.rl-reconnect-knopf {
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 1.4rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    color: var(--mud-palette-primary-text, #ffffff);
    background: var(--mud-palette-primary, #1565c0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    transition: box-shadow 0.15s ease, filter 0.15s ease;
}
.rl-reconnect-knopf:hover { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28); }
.rl-reconnect-knopf:focus-visible { outline: 3px solid color-mix(in srgb, var(--mud-palette-primary, #1565c0) 45%, transparent); outline-offset: 2px; }
.rl-reconnect-knopf-sekundaer {
    color: var(--mud-palette-primary, #1565c0);
    background: transparent;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mud-palette-primary, #1565c0) 60%, transparent);
}

@keyframes rl-reconnect-ein { 0% { opacity: 0; transform: translateY(24px) scale(0.96); } 100% { opacity: 1; transform: none; } }
@keyframes rl-reconnect-aus { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rl-reconnect-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rl-reconnect-dreh { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .rl-reconnect-ring { animation-duration: 3s; }
    #components-reconnect-modal[open], #components-reconnect-modal { animation-duration: 0.01s; animation-delay: 0s; }
}