/* Issue #217: de eigen melding bij een verbroken verbinding (zie _Host.cshtml). Blazor zet de toestand als klasse op het
   element; zonder klasse is hij verborgen. XAF (main.js) zet er bg-dark en text-white op; daarom hier met !important. */
#components-reconnect-modal.focara-reconnect {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    background-color: rgba(0, 0, 0, .35) !important;
    color: inherit !important;
}

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

#components-reconnect-modal .focara-reconnect-box {
    max-width: 420px;
    margin: 0 16px;
    padding: 18px 22px;
    border-radius: 10px;
    background: var(--fc-surface, var(--dxds-color-surface-neutral-default-rest, #fff));
    color: var(--fc-text, var(--dxds-color-content-neutral-default-rest, #1f2328)) !important;
    border: 1px solid var(--fc-border, rgba(0, 0, 0, .15));
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
    font-size: .95rem;
}

#components-reconnect-modal .focara-reconnect-box p {
    margin: 0 0 6px;
}

#components-reconnect-modal .focara-reconnect-hint {
    color: var(--fc-text-muted, #6b7280);
    font-size: .85rem;
}

/* Per toestand alleen de bijbehorende tekst. */
#components-reconnect-modal .focara-reconnect-failed,
#components-reconnect-modal .focara-reconnect-rejected {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .focara-reconnect-busy,
#components-reconnect-modal.components-reconnect-rejected .focara-reconnect-busy {
    display: none;
}

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

#components-reconnect-modal.components-reconnect-failed button.focara-reconnect-failed {
    display: inline-flex;
    margin-top: 8px;
}

/* Het groene diafragma van het app-icoon; draait langzaam zolang er verbinding gezocht wordt. De naden tussen de lamellen
   krijgen de kleur van het venster, zodat het in licht en donker hetzelfde oogt. */
#components-reconnect-modal .focara-reconnect-logo {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 0 10px;
}

#components-reconnect-modal .focara-reconnect-logo g {
    stroke: var(--fc-surface, var(--dxds-color-surface-neutral-default-rest, #fff));
}

#components-reconnect-modal.components-reconnect-show .focara-reconnect-logo,
#components-reconnect-modal.components-reconnect-retrying .focara-reconnect-logo {
    animation: focara-reconnect-spin 2.4s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal .focara-reconnect-logo { animation: none !important; }
}