/* Native inputs used on the login pages (must stay native for the cookie POST). */
.auth-field {
    width: 100%;
    padding: 0.65rem 0.75rem;
    font-size: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}

.auth-field:focus {
    outline: none;
    border-color: #594ae2;
    box-shadow: 0 0 0 1px #594ae2;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ---- Fatal (circuit-ending) error bar ---- */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20000;
    padding: 0.9rem 1.2rem;
    background: #b32121;
    color: #fff;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.3);
    text-align: center;
}

#blazor-error-ui .reload {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    margin-left: 0.5rem;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 1rem;
    top: 0.7rem;
    cursor: pointer;
    color: #fff;
}

/* ---- Reconnection overlay (shown when the SignalR connection drops) ---- */
#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 21000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

#components-reconnect-modal .reconnect-box {
    background: #fff;
    color: #222;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    max-width: 90vw;
}

#components-reconnect-modal .reconnect-spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 0.8rem;
    border: 3px solid #c5cae9;
    border-top-color: #3f51b5;
    border-radius: 50%;
    animation: kb-spin 0.9s linear infinite;
}

#components-reconnect-modal .reconnect-text {
    margin: 0 0 0.8rem;
    font-weight: 500;
}

#components-reconnect-modal .reconnect-reload {
    display: none;
    color: #3f51b5;
    font-weight: 600;
    text-decoration: underline;
}

/* When reconnection has failed/been rejected, hide the spinner and offer reload. */
#components-reconnect-modal.components-reconnect-failed .reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .reconnect-spinner {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-reload,
#components-reconnect-modal.components-reconnect-rejected .reconnect-reload {
    display: inline-block;
}

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

/* ----- Installed PWA: respect the device safe areas (status bar / notch) -----
   In standalone mode the app draws edge-to-edge (viewport-fit=cover), so the
   fixed MudBlazor app bar would slide under the status bar. Push the app bar
   content below the top inset and grow the main content offset to match, plus
   honour the left/right/bottom insets for notched devices. */
@media all and (display-mode: standalone) {
    .mud-appbar.mud-appbar-fixed-top {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .mud-main-content {
        padding-top: calc(var(--mud-appbar-height) + env(safe-area-inset-top)) !important;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Drawer contents shouldn't tuck under the status bar either. */
    .mud-drawer .mud-drawer-content {
        padding-top: env(safe-area-inset-top);
    }
}

/* iOS standalone reports via this older media feature on some versions. */
@media all and (-webkit-min-device-pixel-ratio: 0) and (display-mode: standalone) {
    .mud-appbar.mud-appbar-fixed-top {
        padding-top: env(safe-area-inset-top);
    }
}