/* App-shell scaffolding layered on top of the stock Telerik theme. The theme styles the components; this file supplies only what the theme does not — the header/drawer layout chrome, viewport fill, and a few app-specific surfaces (avatar menu, theme picker, switch-institution page). No density/scale token overrides: components render at Telerik's stock size, spacing and typography. */ html, body { margin: 0; height: 100%; /* Telerik's swatch sets body{background}, but isn't styled; pin it to the same surface so any layout gap doesn't flash the browser white. --mp-splash-bg is stamped by the inline boot script in App.razor so the background matches the persisted theme before any stylesheet arrives. */ background: var(--kendo-color-app-surface, var(--mp-splash-bg, #ffffff)); color: var(--kendo-color-on-app-surface, inherit); } /* --------------------------------------------------------------------------- Pre-Blazor initialization splash Covers the page while the WASM bundle downloads and the theme CSS settles. --mp-splash-bg/fg/accent are stamped by the inline boot script before first paint so the loader matches the persisted theme from byte zero. hideSplashWhenReady() (MainLayout.OnAfterRenderAsync) waits for the active swatch stylesheet to load before fading this out, preventing a flash of the wrong theme. Aesthetic: clinical-precise indeterminate orbital — two counter-rotating arcs over a faint track, a pulsing core "vital" dot, a soft accent glow, an atmospheric radial tint, and a quietly breathing tracked-caps wordmark. --------------------------------------------------------------------------- */ #mp-splash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.65rem; /* Layered atmosphere: a faint accent glow above the loader fading into the flat theme background, so the screen reads as designed depth, not a slab of solid colour. color-mix degrades to the bare bg on older engines. */ background: radial-gradient(120% 75% at 50% 42%, color-mix(in srgb, var(--mp-splash-accent, #1A6EA6) 9%, transparent), transparent 62%), var(--mp-splash-bg, #ffffff); color: var(--mp-splash-fg, #1a1a1a); z-index: 10000; transition: opacity 320ms ease, visibility 320ms ease; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } #mp-splash.mp-splash--out { opacity: 0; visibility: hidden; pointer-events: none; } /* ── Orbital loader ───────────────────────────────────────────────────────── */ .mp-splash-stage { width: 4.25rem; height: 4.25rem; /* gentle scale-in on first paint */ animation: mp-splash-rise 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } .mp-splash-orbit { width: 100%; height: 100%; overflow: visible; /* soft accent halo around the whole ring */ filter: drop-shadow(0 0 9px color-mix(in srgb, var(--mp-splash-accent, #1A6EA6) 45%, transparent)); } .mp-splash-orbit circle { fill: none; transform-box: fill-box; transform-origin: center; } /* Faint full-circle guide the moving arcs travel over. */ .mp-orbit-track { stroke: color-mix(in srgb, var(--mp-splash-fg, #1a1a1a) 14%, transparent); stroke-width: 2.25; } /* Outer + inner arcs: partial dashes that rotate. Counter-rotation + different periods reads as depth rather than a flat spinner. Rounded caps soften it. */ .mp-orbit-arc { stroke: var(--mp-splash-accent, #1A6EA6); stroke-width: 3; stroke-linecap: round; /* r=26 → circumference ≈ 163; ~40% lit arc, rest gap */ stroke-dasharray: 66 200; animation: mp-orbit-cw 1.5s cubic-bezier(0.55, 0.15, 0.4, 0.9) infinite; } .mp-orbit-arc--inner { stroke: color-mix(in srgb, var(--mp-splash-fg, #1a1a1a) 38%, transparent); stroke-width: 2.25; /* r=17 → circumference ≈ 107; ~30% lit arc */ stroke-dasharray: 30 130; animation: mp-orbit-ccw 2.4s linear infinite; } /* Central dot — the steady "vital" pulse. */ .mp-orbit-core { fill: var(--mp-splash-accent, #1A6EA6); stroke: none; animation: mp-orbit-pulse 1.5s ease-in-out infinite; } /* ── Wordmark ─────────────────────────────────────────────────────────────── */ .mp-splash-brand { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.34em; /* trailing letter-spacing pushes text off-centre; nudge back */ padding-left: 0.34em; color: color-mix(in srgb, var(--mp-splash-fg, #1a1a1a) 68%, transparent); animation: mp-splash-rise 560ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms both, mp-splash-breathe 3s ease-in-out 640ms infinite; } @keyframes mp-orbit-cw { to { transform: rotate(360deg); } } @keyframes mp-orbit-ccw { to { transform: rotate(-360deg); } } @keyframes mp-orbit-pulse { 0%, 100% { transform: scale(0.7); opacity: 0.55; } 50% { transform: scale(1.15); opacity: 1; } } @keyframes mp-splash-rise { from { opacity: 0; transform: translateY(8px) scale(0.94); } to { opacity: 1; transform: none; } } @keyframes mp-splash-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } } /* Respect reduced-motion: hold a calm, legible static state. */ @media (prefers-reduced-motion: reduce) { #mp-splash .mp-splash-stage, #mp-splash .mp-orbit-arc, #mp-splash .mp-orbit-arc--inner, #mp-splash .mp-orbit-core, #mp-splash .mp-splash-brand { animation: none; } .mp-orbit-core { opacity: 1; transform: scale(1); } .mp-splash-brand { opacity: 0.8; } } /* The Blazor app root needs an explicit height for the drawer chain to resolve `height: 100%` all the way down. Without this, every ancestor collapses to content height and the drawer ends partway down the page. */ #app { height: 100%; } :root { --header-h: 0px; } .contentFillViewPort { height: calc(100vh - var(--header-h) - 6px); } /* Use Kendo's warning-subtle so the error toast tints with the active theme (light yellow on light swatch, muted amber on dark) instead of a fixed light-only colour. */ #blazor-error-ui { background: var(--kendo-color-warning-subtle, lightyellow); color: var(--kendo-color-on-warning-subtle, inherit); bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; } .loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: #1b6ec2; 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; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } /* code { color: #c02d76; } */ /* --------------------------------------------------------------------------- Monaco Editor Error Decorations --------------------------------------------------------------------------- */ /* Line background highlight for error lines */ .errorLineDecoration { background-color: rgba(255, 0, 0, 0.1) !important; } /* Red circle glyph in the gutter */ .errorGlyph { background-color: #e51400; border-radius: 50%; width: 8px !important; height: 8px !important; margin-left: 5px; margin-top: 6px; } /* Inline error message shown after the line content */ .inlineErrorMessage { color: #e51400; font-style: italic; opacity: 0.9; } /* --------------------------------------------------------------------------- Script Editor Container (VSCode-style layout) --------------------------------------------------------------------------- */ .script-editor-container { display: flex; flex-direction: column; height: 600px; border: 1px solid var(--kendo-color-border, #ccc); } .script-editor-wrapper { flex: 1; min-height: 100px; overflow: hidden; } .script-editor-wrapper #report-script-editor { height: 100% !important; width: 100% !important; } /* --------------------------------------------------------------------------- Script Output Panel (VSCode-style) --------------------------------------------------------------------------- */ .script-output-panel { font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 12px; display: flex; flex-direction: column; height: 150px; flex-shrink: 0; } .script-output-panel.collapsed { height: auto !important; } .script-output-panel.collapsed .script-output-resize-bar { display: none; } .script-output-resize-bar { height: 4px; background: var(--kendo-color-border, #e0e0e0); cursor: ns-resize; flex-shrink: 0; } .script-output-resize-bar:hover { background: var(--kendo-color-primary, #0078d4); } .script-output-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px; background: var(--kendo-color-surface-alt, #f3f3f3); color: var(--kendo-color-on-app-surface, inherit); border-bottom: 1px solid var(--kendo-color-border, #ddd); flex-shrink: 0; user-select: none; cursor: pointer; } .script-output-header span { flex: 1; } .script-output-header:hover { background: var(--kendo-color-base-hover, #e8e8e8); } .script-output-clear { padding: 2px 8px; font-size: 11px; background: var(--kendo-color-surface, #fff); color: var(--kendo-color-on-app-surface, inherit); border: 1px solid var(--kendo-color-border, #ccc); border-radius: 3px; cursor: pointer; margin-left: auto; } .script-output-clear:hover { background: var(--kendo-color-base-hover, #e8e8e8); } .script-output-content { flex: 1; overflow-y: auto; padding: 8px 10px; background: #1e1e1e; color: #d4d4d4; } .output-log { padding: 2px 0; white-space: pre-wrap; word-break: break-word; } .output-error { color: #f44336; padding: 2px 0; white-space: pre-wrap; word-break: break-word; } .output-empty { color: #666; font-style: italic; } /* ============================================================================= * MainLayout navigation drawer (Pages/Layout/MainLayout.razor) * * Layout: a fixed-width TelerikDrawer (push mode) wraps a custom