/* Only what MudBlazor cannot style: the markup that is on screen before Blazor has started, and
   the error bar Blazor shows when the app has already failed. Everything else is MudBlazor.

   These hexes are the one legitimate duplicate of MusiktiTheme's palette. This file paints before
   WebAssembly exists, so it cannot ask C# what the colours are - keep the two in step. */

:root {
    color-scheme: dark;
    --musikti-bg: #0D0D12;
    --musikti-fg: #FFFFFF;
    --musikti-track: #16161F;
    --musikti-accent: #E2603F;
    --musikti-alert: #E0407A;
    --musikti-alert-fg: #14100E;
}

/* Stamped by the boot script in index.html before the first paint, and again by ThemeService when
   the choice changes in-app - which is what keeps the error bar and the native scrollbar in step
   with a theme switch without a reload. */
:root[data-theme="light"] {
    color-scheme: light;
    --musikti-bg: #FAF7F5;
    --musikti-fg: #14100E;
    --musikti-track: #E8E2DE;
    --musikti-accent: #B5432E;
    --musikti-alert: #B8336A;
    --musikti-alert-fg: #FFFFFF;
}

/* The no-JavaScript frame only: :not([data-theme]) means this yields the moment the boot script
   has run, so it can never override an explicit Light or Dark choice. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
        --musikti-bg: #FAF7F5;
        --musikti-fg: #14100E;
        --musikti-track: #E8E2DE;
        --musikti-accent: #B5432E;
        --musikti-alert: #B8336A;
        --musikti-alert-fg: #FFFFFF;
    }
}

html, body {
    background-color: var(--musikti-bg);
    color: var(--musikti-fg);
    margin: 0;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--musikti-track);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--musikti-accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    inset: calc(20vh + 4rem) 0 auto 0;
    font-family: system-ui, sans-serif;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 0.6rem 1.25rem;
    background: var(--musikti-alert);
    color: var(--musikti-alert-fg);
    font-family: system-ui, sans-serif;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}