/* Connection banner shown while the Blazor circuit is down.

   Blazor toggles classes on #components-reconnect-modal:
     components-reconnect-show      connection lost, retrying
     components-reconnect-hide      back online
     components-reconnect-failed    retries exhausted (Blazor.reconnect() to try again)
     components-reconnect-rejected  server discarded the circuit (reload required)

   Without a styled element the framework shows a bare overlay, so a patchy link looks
   exactly like the app having frozen. A banner rather than a modal, deliberately: it must
   not cover what the user was doing, because most drops recover in a few seconds. */

#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal > div {
    display: none;
}

.empresa-reconnect__box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    gap: 14px;
    align-items: center;
    padding: 12px 20px;
    background: #131F4E;
    color: #fff;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* Retrying */
#components-reconnect-modal.components-reconnect-show { display: block; }
#components-reconnect-modal.components-reconnect-show > .empresa-reconnect__box:not(.empresa-reconnect__box--failed):not(.empresa-reconnect__box--rejected) {
    display: flex;
}

/* Gave up — offer a manual retry before making them reload */
#components-reconnect-modal.components-reconnect-failed { display: block; }
#components-reconnect-modal.components-reconnect-failed > .empresa-reconnect__box--failed {
    display: flex;
    background: #8a1c1c;
}

/* Circuit is gone server-side; only a reload can recover */
#components-reconnect-modal.components-reconnect-rejected { display: block; }
#components-reconnect-modal.components-reconnect-rejected > .empresa-reconnect__box--rejected {
    display: flex;
    background: #8a1c1c;
}

.empresa-reconnect__title {
    font-weight: 600;
    font-size: .95rem;
}

.empresa-reconnect__detail {
    font-size: .8rem;
    opacity: .85;
}

.empresa-reconnect__btn {
    margin-left: auto;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: .8rem;
}

.empresa-reconnect__btn + .empresa-reconnect__btn {
    margin-left: 8px;
}

.empresa-reconnect__btn:hover {
    background: rgba(255, 255, 255, .28);
}

.empresa-reconnect__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: empresa-reconnect-spin 900ms linear infinite;
    flex: 0 0 auto;
}

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

@media (max-width: 600px) {
    .empresa-reconnect__box {
        padding: 10px 14px;
        gap: 10px;
    }
    .empresa-reconnect__detail { font-size: .75rem; }
}