/* Full-page status screen: the boot screen in index.html and the StatusScreen component
   (checking access, signing in / out). Colours follow the MudBlazor theme once a layout has
   rendered it; before that (while the app downloads) they fall back to the OceanTheme values
   below, dark if the user chose the dark theme (see the script in index.html). */

:root {
    --mrp-status-bg: #F4FBFC;
    --mrp-status-fg: #043040;
    --mrp-status-accent: #007E82;
}

:root.mrp-dark {
    --mrp-status-bg: #021A24;
    --mrp-status-fg: #B2C1C2;
    --mrp-status-accent: #1FA4A9;
}

html, body {
    margin: 0;
    background-color: var(--mud-palette-background, var(--mrp-status-bg));
}

.mrp-status {
    position: fixed;
    inset: 0;
    /* Above the app bar and drawer, below dialogs and snackbars. */
    z-index: 1350;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 16px;
    box-sizing: border-box;
    text-align: center;
    background-color: var(--mud-palette-background, var(--mrp-status-bg));
    color: var(--mud-palette-text-primary, var(--mrp-status-fg));
    font-family: Inter, Roboto, Helvetica, Arial, sans-serif;
}

.mrp-status-text {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.3;
}

.mrp-status-detail {
    max-width: 40rem;
    font-size: 1.05rem;
    line-height: 1.5;
    opacity: 0.8;
    overflow-wrap: anywhere;
}

.mrp-status a {
    color: var(--mud-palette-primary, var(--mrp-status-accent));
    font-size: 1.1rem;
    font-weight: 500;
}

/* Indeterminate circular progress, drawn like MudProgressCircular. */
.mrp-spinner {
    width: 72px;
    height: 72px;
    color: var(--mud-palette-primary, var(--mrp-status-accent));
    animation: mrp-spinner-rotate 1.4s linear infinite;
}

    .mrp-spinner circle {
        stroke: currentColor;
        stroke-linecap: round;
        stroke-dasharray: 80px, 200px;
        stroke-dashoffset: 0;
        animation: mrp-spinner-dash 1.4s ease-in-out infinite;
    }

@keyframes mrp-spinner-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes mrp-spinner-dash {
    0% {
        stroke-dasharray: 1px, 200px;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 100px, 200px;
        stroke-dashoffset: -15px;
    }

    100% {
        stroke-dasharray: 100px, 200px;
        stroke-dashoffset: -125px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mrp-spinner, .mrp-spinner circle {
        animation-duration: 3s;
    }
}

@media (max-width: 600px) {
    .mrp-status-text {
        font-size: 0.9rem;
    }
}

/* Inside a layout (e.g. the offline status of a page): fills the page area under the app bar
   instead of covering the whole screen. */
.mrp-status.mrp-status--inline {
    position: static;
    inset: auto;
    z-index: auto;
    min-height: calc(100vh - var(--mud-appbar-height, 64px));
    background-color: transparent;
}