/* Tabiot.Blazor.Error — consuma i design token di Tabiot.Blazor.Layouts, con fallback. */

.tsd-error {
    max-width: 34rem;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    text-align: center;
    background: var(--tsd-card-bg, #fff);
    border-radius: var(--tsd-card-radius, 14px);
    box-shadow: var(--tsd-card-shadow, 0 1px 3px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.04));
}

.tsd-error--danger { --tsd-accent: #dc3545; }
.tsd-error--warning { --tsd-accent: #f59e0b; }
.tsd-error--info { --tsd-accent: #3b82f6; }
.tsd-error--neutral { --tsd-accent: #6b7280; }

.tsd-error-icon {
    width: var(--tsd-icon-size, 56px);
    height: var(--tsd-icon-size, 56px);
    margin: 0 auto 1.25rem;
    border-radius: var(--tsd-icon-radius, 14px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--tsd-accent);
    background-color: color-mix(in srgb, var(--tsd-accent) 10%, transparent);
}

.tsd-error-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 .5rem;
}

.tsd-error-message {
    margin: 0 0 1.75rem;
    opacity: .7;
}

.tsd-error-actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.tsd-error-ref {
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tsd-border-color, #e8eaed);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .8rem;
    opacity: .65;
}

.tsd-error-ref-value {
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    word-break: break-all;
}

.tsd-error-ref-copy {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: .15rem .35rem;
    border-radius: 6px;
    transition: background-color .15s ease;
}

.tsd-error-ref-copy:hover {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
}

.tsd-error-ref-feedback:not(:empty) {
    color: var(--tsd-accent);
}

.tsd-error-footer {
    margin-top: 1rem;
    font-size: .8rem;
    opacity: .6;
}

/* Senza Layouts i token non esistono: il dark mode di Bootstrap resta leggibile comunque. */
[data-bs-theme=dark] .tsd-error {
    background: var(--tsd-card-bg, #1a1d27);
}

[data-bs-theme=dark] .tsd-error-ref {
    border-top-color: var(--tsd-border-color, #2d3140);
}

@media (prefers-reduced-motion: reduce) {
    .tsd-error-ref-copy {
        transition: none;
    }
}

/* Overlay a tutto schermo, condiviso da A1 (#blazor-error-ui) e A2 (#components-reconnect-modal). */
.tsd-error-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--tsd-overlay-bg, rgba(15, 18, 25, .55));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* A1 — Blazor mostra il div con style="display:block" inline. */
#blazor-error-ui {
    display: none;
}

/* A2 — Blazor non tocca display: commuta solo classi di stato sul dialog. */
#components-reconnect-modal {
    display: none;
}

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

#components-reconnect-modal [data-tsd-reconnect-state] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show [data-tsd-reconnect-state="show"],
#components-reconnect-modal.components-reconnect-failed [data-tsd-reconnect-state="failed"],
#components-reconnect-modal.components-reconnect-rejected [data-tsd-reconnect-state="rejected"],
#components-reconnect-modal.components-reconnect-resume-failed [data-tsd-reconnect-state="resume-failed"] {
    display: block;
}

.tsd-reconnect-attempt,
.tsd-reconnect-countdown {
    display: block;
    margin-top: .5rem;
    font-size: .85rem;
}

/* Il countdown ha senso solo con currentAttempt > 1 && seconds > 0, che è ciò che retrying significa. */
#components-reconnect-modal .tsd-reconnect-countdown {
    display: none;
}

#components-reconnect-modal.components-reconnect-retrying .tsd-reconnect-countdown {
    display: block;
}

/* Prima del primo update() gli span sono vuoti: non mostrare "Tentativo  di ". */
#components-reconnect-modal .tsd-reconnect-attempt:has(#components-reconnect-current-attempt:empty) {
    display: none;
}

/* Un blip di rete non deve far lampeggiare l'overlay. failed e rejected invece compaiono all'istante. */
@keyframes tsd-reconnect-appear {
    from { opacity: 0; visibility: hidden; }
    to { opacity: 1; visibility: visible; }
}

#components-reconnect-modal.components-reconnect-show .tsd-error-overlay {
    animation: tsd-reconnect-appear .2s ease-out 1s both;
}

@media (prefers-reduced-motion: reduce) {
    /* Il ritardo resta: serve a non lampeggiare. Sparisce solo la dissolvenza. */
    #components-reconnect-modal.components-reconnect-show .tsd-error-overlay {
        animation-duration: 0s;
    }

    .tsd-error-icon .fa-spin {
        animation: none;
    }
}