/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-0g4q5e0kkn] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-0g4q5e0kkn] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Adapted from the .NET 10 Blazor Web App project template.
 * Customizations: button uses the CustomerPortal blue palette (--mud-palette-primary
 * fallbacks to #1E40AF); spinner uses the same blue; ::backdrop opacity nudged up
 * slightly for a clearer modal feel. Layout + animations kept verbatim. */

.components-reconnect-first-attempt-visible[b-ydvlh6gmu4],
.components-reconnect-repeated-attempt-visible[b-ydvlh6gmu4],
.components-reconnect-failed-visible[b-ydvlh6gmu4],
.components-pause-visible[b-ydvlh6gmu4],
.components-resume-failed-visible[b-ydvlh6gmu4],
.components-rejoining-animation[b-ydvlh6gmu4] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ydvlh6gmu4],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ydvlh6gmu4],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ydvlh6gmu4],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ydvlh6gmu4],
#components-reconnect-modal.components-reconnect-retrying[b-ydvlh6gmu4],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ydvlh6gmu4],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ydvlh6gmu4],
#components-reconnect-modal.components-reconnect-failed[b-ydvlh6gmu4],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ydvlh6gmu4] {
    display: block;
}

#components-reconnect-modal[b-ydvlh6gmu4] {
    background-color: white;
    /* Wide enough that Danish lines stay on a single line:
     * "Kunne ikke genoprette forbindelsen automatisk." is the longest line we render. */
    width: 30rem;
    max-width: calc(100vw - 2rem);
    margin: 20vh auto;
    padding: 2rem 2.25rem 1.5rem;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.08);
    color: #0F172A; /* slate-900 */
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-ydvlh6gmu4 0.5s both;

    &[open] {
        animation: components-reconnect-modal-slideUp-b-ydvlh6gmu4 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-ydvlh6gmu4 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

/* Native <dialog> backdrop — the browser handles this layer; we just style it.
 * The page is still visible underneath at 60% opacity (rgba 0,0,0,0.4). */
#components-reconnect-modal[b-ydvlh6gmu4]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-ydvlh6gmu4 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-ydvlh6gmu4 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ydvlh6gmu4 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ydvlh6gmu4 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-ydvlh6gmu4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

/* Title — always visible while the dialog is open. */
.reconnect-title[b-ydvlh6gmu4] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #0F172A; /* slate-900 */
    text-align: center;
    letter-spacing: -0.005em;
}

/* Body block — wraps one state's paragraphs. */
.reconnect-body[b-ydvlh6gmu4] {
    text-align: center;
    width: 100%;
}

    .reconnect-body p[b-ydvlh6gmu4] {
        margin: 0;
    }

    .reconnect-body p + p[b-ydvlh6gmu4] {
        margin-top: 0.45rem;
    }

/* Failed state: more breathing room between the red error line and the helper
 * text. The error reads like a header for the explanation below, so it needs
 * visible separation. */
.reconnect-body-failed p + p[b-ydvlh6gmu4] {
    margin-top: 1.1rem;
}

#components-reconnect-modal p[b-ydvlh6gmu4] {
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Wifi-off icon shown only in the failed state. Sits above the title and
 * gives the modal an immediate visual cue that something is wrong.
 * Visibility is driven by the .components-reconnect-failed-visible class
 * (hidden by default, shown when the dialog has .components-reconnect-failed);
 * we just need to upgrade `display: block` → `display: flex` to center the SVG. */
.reconnect-icon-failed[b-ydvlh6gmu4] {
    color: #DC2626; /* error red */
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FEF2F2; /* red-50 */
    box-shadow: inset 0 0 0 1px #FECACA; /* red-200 */
    align-items: center;
    justify-content: center;
    margin-bottom: -0.2rem;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-icon-failed[b-ydvlh6gmu4] {
    display: flex;
}

/* "Forsøg X / 30" — pill badge with label + counter. Mimics MudChip styling
 * but in pure CSS so we don't need to render a MudBlazor component inside the
 * native <dialog> (cleaner + works without an interactive renderer). */
.reconnect-attempt-pill-wrap[b-ydvlh6gmu4] {
    display: flex;
    justify-content: center;
    margin-bottom: 0.6rem;
}

.reconnect-attempt-pill[b-ydvlh6gmu4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background-color: #EFF6FF; /* blue-50 */
    border: 1px solid #DBEAFE; /* blue-100 */
    border-radius: 999px;
    font-size: 0.9rem;
    line-height: 1.2;
    color: #1E40AF; /* blue-700 */
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.06);
}

.reconnect-attempt-label[b-ydvlh6gmu4] {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.reconnect-attempt-numbers[b-ydvlh6gmu4] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums; /* prevents number-width jitter as counter advances */
}

    .reconnect-attempt-numbers strong[b-ydvlh6gmu4] {
        font-weight: 700;
        color: #1E3A8A; /* blue-800 — slightly darker accent on the digits */
        min-width: 1ch;
        text-align: center;
    }

.reconnect-attempt-sep[b-ydvlh6gmu4] {
    opacity: 0.45;
    font-weight: 400;
}

/* "Næste forsøg om X sek." — paired with the pill above. */
.reconnect-next-attempt[b-ydvlh6gmu4] {
    margin-top: 0 !important;
}

/* Secondary helper text (smaller, muted). */
.reconnect-subtle[b-ydvlh6gmu4] {
    font-size: 0.85rem;
    color: #64748B; /* slate-500 */
}

    .reconnect-subtle strong[b-ydvlh6gmu4] {
        color: #475569; /* slate-600 — slightly stronger but still muted */
        font-weight: 600;
    }

/* Failed state — title-ish error line. */
.reconnect-error[b-ydvlh6gmu4] {
    font-weight: 600;
    color: #DC2626; /* error red */
}

/* Retry / Resume buttons — primary blue with readable white text + clear hover.
 * text-transform: none overrides any cascading MudBlazor/global uppercase styling
 * so "Genindlæs siden" stays mixed-case (easier to read than ALL-CAPS Danish). */
#components-reconnect-modal button[b-ydvlh6gmu4] {
    border: 0;
    background-color: #1E40AF; /* blue-700 — matches MainLayout primary */
    color: white;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: 0;
    padding: 10px 26px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 120ms ease-in-out, transform 120ms ease-in-out, box-shadow 120ms ease-in-out;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15), 0 4px 12px rgba(30, 64, 175, 0.18);
    /* MudBlazor.min.css ships its own `#components-reconnect-modal button {
     * margin: 40px auto !important }` rule that wins our scoped CSS by virtue
     * of the !important flag. Match it with !important and set the shorthand
     * explicitly so the failed-state CTA sits tight under the helper text. */
    margin: -0.55rem auto 0 !important;
}

    #components-reconnect-modal button:hover[b-ydvlh6gmu4] {
        background-color: #1E3A8A; /* blue-800 — darker on hover, not lighter */
        box-shadow: 0 2px 4px rgba(15, 23, 42, 0.18), 0 6px 16px rgba(30, 64, 175, 0.25);
    }

    #components-reconnect-modal button:active[b-ydvlh6gmu4] {
        background-color: #1E3A8A;
        transform: translateY(1px);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
    }

    #components-reconnect-modal button:focus-visible[b-ydvlh6gmu4] {
        outline: 2px solid #3B82F6;
        outline-offset: 2px;
    }

.components-rejoining-animation[b-ydvlh6gmu4] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-ydvlh6gmu4] {
        position: absolute;
        border: 3px solid #1E40AF; /* same blue as button */
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-ydvlh6gmu4 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-ydvlh6gmu4] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-ydvlh6gmu4 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}