html, body { font-family: 'Roboto', sans-serif; } /* Prevent MudPopoverProvider from occupying visible space at the top-left corner. Its children are absolutely positioned, so overflow: visible keeps them functional. */ .mud-popover-provider { width: 0; height: 0; overflow: visible; } /* Lock the MudMainContent scroll container whenever a dialog is open. Using :has(.mud-dialog) is more reliable than mud-dialog-scroll-lock, which MudBlazor can temporarily remove when autocomplete dropdowns open/close. */ body:has(.mud-dialog) .mud-main-content { overflow: hidden; } /* ── Copy-on-hover ── */ .copy-cell { display: flex; align-items: center; } .copy-cell .copy-btn { opacity: 0; transition: opacity 0.15s; margin-left: 2px; } .copy-cell:hover .copy-btn { opacity: 0.5; } .copy-cell .copy-btn:hover { opacity: 1; } /* ── Blazor reconnect overlay ── */ #components-reconnect-modal { display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10000; } /* Blazor adds the class to in server mode */ body.components-reconnect-show #components-reconnect-modal, body.components-reconnect-failed #components-reconnect-modal, body.components-reconnect-rejected #components-reconnect-modal { display: block; } /* Fallback: Blazor adds the class to the element itself in some versions */ #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { display: block; } .reconnect-box { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border-radius: 8px; padding: 28px 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); font-family: 'Roboto', sans-serif; font-size: 14px; } .reconnect-box a { color: var(--mud-palette-primary); cursor: pointer; } /* Spinner */ .reconnect-spinner { width: 32px; height: 32px; border: 3px solid var(--mud-palette-primary-lighten); border-top-color: var(--mud-palette-primary); border-radius: 50%; animation: reconnect-spin 0.75s linear infinite; } @keyframes reconnect-spin { to { transform: rotate(360deg); } } /* Show the right message per state */ .reconnect-state-show, .reconnect-state-failed, .reconnect-state-rejected { display: none; } body.components-reconnect-show .reconnect-state-show, #components-reconnect-modal.components-reconnect-show .reconnect-state-show { display: inline; } body.components-reconnect-failed .reconnect-state-failed, #components-reconnect-modal.components-reconnect-failed .reconnect-state-failed { display: inline; } body.components-reconnect-rejected .reconnect-state-rejected, #components-reconnect-modal.components-reconnect-rejected .reconnect-state-rejected { display: inline; } /* Hide the spinner when not reconnecting */ body.components-reconnect-failed .reconnect-spinner, body.components-reconnect-rejected .reconnect-spinner, #components-reconnect-modal.components-reconnect-failed .reconnect-spinner, #components-reconnect-modal.components-reconnect-rejected .reconnect-spinner { display: none; } /* ── Table header label style ── */ .simulator-th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mud-palette-text-secondary); } /* ── Data table border ── */ .simulator-data-table { border: 1px solid var(--mud-palette-table-lines); } /* ── Card backgrounds ── */ .simulator-detail-card { background-color: var(--mud-palette-background-grey); } .simulator-outlined-card { border: 1px solid var(--mud-palette-divider); } /* ── Sessions row expansion ── */ .simulation-row-active { cursor: pointer; } .simulation-row-active:hover td { background-color: var(--mud-palette-primary-hover); } /* Hide the expand chevron for non-active rows */ tr:not(.simulation-row-active) td.mud-table-cell:first-child .mud-icon-button { visibility: hidden; } /* ── Nav menu branding header ── */ .simulator-nav-header { background: linear-gradient(150deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%); padding: 20px 16px 18px; width: 100%; } /* ── Simulation wizard selection rows ── */ .simulator-selection-row { display: flex; gap: 24px; align-items: center; } .simulator-selection-input { width: 390px; flex-shrink: 0; } .simulator-selection-detail { flex: 1; min-width: 0; } /* ── Monospace text ── */ .simulator-mono { font-family: monospace; } .simulator-mono-nowrap { font-family: monospace; white-space: nowrap; } .simulator-mono-success { font-family: monospace; color: var(--mud-palette-success-text); } .simulator-alpha3 { font-family: monospace; min-width: 2.8rem; } /* ── Flex fill ── */ .simulator-flex-fill { flex: 1; min-width: 0; } /* ── Label column widths ── */ .simulator-label-60 { min-width: 60px; } .simulator-label-100 { min-width: 100px; } /* ── Wizard step list ── */ .simulator-step-number { font-weight: 600; min-width: 18px; } .simulator-step-title { font-weight: 600; } .simulator-intro { gap: 16px; } .simulator-intro-steps { text-align: left; max-width: 350px; margin: 0 auto; } /* ── Simulation row actions bar ── */ .simulator-divider-v { height: 28px; } .simulator-action-btn { height: 40px; } .simulator-energy-field { width: 110px; } /* ── Empty state placeholders ── */ .simulator-placeholder-sm { height: 56px; border: 1px dashed var(--mud-palette-divider); } .simulator-placeholder-lg { min-height: 120px; border: 1px dashed var(--mud-palette-divider); text-align: center; } /* ── Wizard dialog layout ── */ .simulator-wizard-body { height: 390px; overflow-y: auto; overflow-x: hidden; } .simulator-dialog-actions { width: 100%; padding: 8px 16px; } .simulator-details-preview { flex: 1; min-width: 0; min-height: 120px; } /* ── Opacity utilities ── */ .simulator-muted { opacity: 0.4; } .simulator-muted-user { opacity: 0.7; } /* ── App bar user info ── */ .simulator-user-info { text-align: right; line-height: 1.2; } /* ── Table / grid utilities ── */ .simulator-icon-offset { margin-top: 2px; } .simulator-actions-cell { text-align: right; } .simulator-actions-header { width: 48px; } .simulator-chips-row { flex-wrap: wrap; } .simulator-switch-reset { margin: 0; } .simulator-text-secondary { color: var(--mud-palette-text-secondary); } /* ── Nav menu branding ── */ .simulator-nav-avatar { background: rgba(255, 255, 255, 0.15); width: 42px; height: 42px; } .simulator-nav-icon { color: white; font-size: 1.4rem; } .simulator-nav-title { color: white; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; } .simulator-nav-subtitle { color: rgba(255, 255, 255, 0.65); letter-spacing: 0.02em; } /* ── Login / redirect page ── */ .simulator-login-container { display: flex; align-items: center; justify-content: center; min-height: 70vh; } .simulator-login-content { max-width: 460px; text-align: center; } .simulator-login-icon-wrapper { position: relative; display: inline-flex; } .simulator-login-avatar { width: 96px; height: 96px; background: var(--mud-palette-primary); box-shadow: 0 0 0 12px var(--mud-palette-primary-hover); } .simulator-login-avatar-icon { font-size: 52px; color: #fff; } .simulator-login-badge { position: absolute; bottom: -4px; right: -4px; font-size: 28px; color: var(--mud-palette-warning); background: var(--mud-palette-surface); border-radius: 50%; padding: 2px; } .simulator-login-heading { font-weight: 700; letter-spacing: -0.5px; } .simulator-login-btn { min-width: 180px; font-weight: 600; } .simulator-wip-banner { position: fixed; bottom: 0; left: 0; right: 0; padding: 10px; text-align: center; } .simulator-wip-icon { vertical-align: middle; margin-right: 4px; font-size: 0.85rem; }