/* ==========================================================================
   CMTMec global styles.

   MudBlazor owns component styling; this file only covers what sits outside it:
   the pre-paint ground colour, framework validation classes, scrollbars, and the
   Blazor error boundary. Everything here is theme-aware.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pre-paint ground.

   The <html data-theme> attribute is stamped by the server render and by the
   inline script in App.razor, both of which run before MudBlazor has painted
   anything. Without these two rules the browser shows a white page for one
   frame on every load in dark mode.

   These two values must stay in sync with Background in MudThemeFactory.cs.
   -------------------------------------------------------------------------- */
html[data-theme="light"] {
    background-color: #F3F5F8;
    color-scheme: light;
}

html[data-theme="dark"] {
    background-color: #0B1422;
    color-scheme: dark;
}

body {
    background-color: inherit;
}

/* --------------------------------------------------------------------------
   Scrollbars — otherwise Windows paints light scrollbars over dark surfaces.
   -------------------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-lines-default) transparent;
}

*::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--mud-palette-lines-default);
    border: 3px solid transparent;
    border-radius: 6px;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--mud-palette-lines-inputs);
    background-clip: content-box;
}

/* --------------------------------------------------------------------------
   Focus visibility — a keyboard user must always be able to see where they are.
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

h1:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   Blazor form validation classes.
   -------------------------------------------------------------------------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Blazor error boundary fallback.
   -------------------------------------------------------------------------- */
.blazor-error-boundary {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text, #fff);
    padding: 1rem 1.25rem;
    border-radius: var(--mud-default-borderradius, 10px);
}

.blazor-error-boundary::after {
    content: "Something went wrong in this section.";
}

/* The .cmt- utility classes live in the shared design system
   (_content/CMTMec.Shared/css/cmtmec.css) so components in CMTMec.Shared can use
   them too — they are not available if they only exist in this Web-only file. */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}