/* =================================================================== Nephos App-Specific Styles Shared CWE styles are provided by Clockwork.Design RCL CSS layers. ================================================================ */ /* --- Nephos Custom Properties --- */ :root { --nephos-space-xs: 4px; --nephos-space-sm: 8px; --nephos-space-md: 16px; --nephos-space-lg: 24px; --nephos-space-xl: 32px; --nephos-space-2xl: 48px; --nephos-shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08); --nephos-shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); --nephos-shadow-lg: 0 10px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.08); --nephos-shadow-glow: 0 0 20px rgba(217, 115, 0, 0.15); --nephos-viz-bg: var(--mud-palette-surface); --nephos-viz-border: var(--mud-palette-lines-default); } /* === WS-3 light-mode fixes (global — a scoped .razor.css ::deep rule can't anchor over the MudBlazor-rendered AppBar/dialog DOM) === */ /* AppBar is ALWAYS dark (#080c16) in both themes. Its title/username (.mud-typography) otherwise pick up the cwe-base.css h1..h6/p global resets (dark in light mode) and its chips flip to light backgrounds -> illegible. CweTheme AppbarText is #e8e4df in BOTH palettes, so this is safe in dark mode. */ .mud-appbar .mud-typography, .mud-appbar .mud-chip, .mud-appbar .mud-chip .mud-icon-root { color: var(--mud-palette-appbar-text) !important; } .mud-appbar .mud-chip.mud-chip-filled { background-color: rgba(255, 255, 255, 0.10) !important; } /* Keep background transparent in light mode so the BODY background propagates to the canvas. An opaque html background paints in front of position:fixed; z-index:-1 layers (the homepage hero video) and hides them. The page still reads light via the propagated body background. */ html.cwe-light { background: transparent !important; } /* Nav links live on the always-dark drawer. MudBlazor's default hover background is theme-dependent (lightens in dark mode, darkens in light mode) -> the hover looked different per theme. Force a consistent accent-tint hover/active in both modes. (The matching NavMenu.razor.css ::deep rule never applied: its scope can't anchor over the MudNavMenu-rendered DOM.) --cwe-accent-glow is mode-invariant. */ .mud-drawer .mud-nav-link:hover, .mud-drawer .mud-nav-link.active { background-color: var(--cwe-accent-glow) !important; } .mud-drawer .mud-nav-link.active { border-left: 3px solid var(--cwe-accent); } /* WS-6: uniform Back/Next nav-button width so the wizard footer doesn't jitter as the Next label changes per page ("Next: Code" vs "Skip to Geotechnical", the longest at 20 chars). Scoped to nav buttons only via the class added in ActionBar.razor — NOT the CenterContent buttons ModelBuilder packs into the bar. */ .action-bar__nav-btn { min-width: 200px; } /* --- Nephos Visualization Panel --- */ .nephos-viz-panel { background: var(--nephos-viz-bg); border: 1px solid var(--nephos-viz-border); border-radius: var(--radius-md); padding: var(--nephos-space-md); } .nephos-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* =================================================================== Toolbar container query — bulk-actions toolbar in /history The MudPaper that wraps the toolbar carries this class so the container width equals the real available content width (viewport minus sidebar minus padding), not the viewport width. ================================================================ */ .nephos-toolbar-container { container-type: inline-size; } /* Threshold: 720px — sized so the full Manage/Export/Compare row collapses before the Compare button gets clipped by the sidebar. Tune this value alongside the sidebar width if layout changes. */ @container (max-width: 720px) { .nephos-toolbar-full { display: none !important; } .nephos-toolbar-kebab { display: inline-flex !important; } } /* Base state: full row shown, kebab hidden */ .nephos-toolbar-full { display: flex; gap: 8px; align-items: center; } .nephos-toolbar-kebab { display: none; } .nephos-tab-content { animation: pageEnter var(--transition-med) both; } /* =================================================================== Engineering Data Table ================================================================ */ .nephos-data-table .mud-table-head th { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); border-bottom: 2px solid var(--mud-palette-lines-default); padding-top: 8px; padding-bottom: 8px; } .nephos-data-table .mud-table-body td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.8125rem; } .nephos-data-table .mud-table-body tr:hover { background-color: var(--cwe-accent-glow) !important; } /* =================================================================== Results Sticky Tabs & Compare Mode ================================================================ */ .results-sticky-tabs .mud-tabs-toolbar { position: sticky; top: 0; z-index: 10; background: var(--mud-palette-surface); } .compare-alt-row { background-color: var(--cwe-accent-glow); } /* =================================================================== Empty State ================================================================ */ .nephos-empty-state { text-align: center; padding: 48px 24px; border: 2px dashed var(--mud-palette-lines-default); border-radius: var(--radius-lg); animation: pageEnter var(--transition-med) both; } .nephos-empty-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--cwe-accent-glow); margin-bottom: 16px; } /* --- MudSelect Hull Thumbnail Suppression --- */ .mud-select-input .select-hull-thumbnail { display: none; } /* === Relocated from dead scoped CSS (class sat on a Mud component) === */ /* --- A: Code.razor.css — .code-option-card rules (class on , was dead scoped) --- */ .code-option-card { border-left: 3px solid var(--mud-palette-lines-default); transition: background var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med); cursor: pointer; } .code-option-card:hover { border-left-color: var(--cwe-accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .code-option-card--active { border-left-color: var(--cwe-accent); background: var(--cwe-accent-glow); } .code-option-card--disabled { opacity: 0.6; cursor: default; pointer-events: none; } .code-option-card--disabled:hover { border-left-color: var(--mud-palette-lines-default); box-shadow: none; } /* --- B: ModelValidationEditor.razor.css — rules on Mud components (was dead scoped) --- */ .validation-command-strip { background: var(--mud-palette-surface); border: 1px solid var(--cwe-border-subtle); border-radius: var(--radius-md); position: relative; } .validation-command-strip::after { content: ''; position: absolute; bottom: 0; left: 5%; right: 5%; height: 2px; background: linear-gradient(90deg, transparent, var(--cwe-accent-dim), transparent); border-radius: 1px; } .validation-weight-card { background: var(--mud-palette-surface); border: 1px solid var(--cwe-border-subtle); border-top: 3px solid var(--cwe-accent); border-radius: var(--radius-md); transition: box-shadow var(--transition-fast); } .validation-weight-card:hover { box-shadow: var(--nephos-shadow-md); } .validation-card-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cwe-accent); } .validation-viz-panel { background: var(--mud-palette-surface); border: 1px solid var(--cwe-border-subtle); border-radius: var(--radius-md); min-height: 400px; aspect-ratio: 16 / 9; max-height: 700px; overflow: hidden; position: relative; display: flex; flex-direction: column; } /* The 3D viewer (ModelVisualization3D's root MudStack) must grow to fill the aspect-ratio-sized panel. Without this its inner container's height:100% has no definite parent height to resolve against and collapses, leaving the WebGL canvas filling only the top portion with dead space below. */ .validation-viz-panel > div { flex: 1 1 auto; min-height: 0; } .validation-processing-state { background: var(--mud-palette-surface); border: 2px dashed var(--cwe-border-subtle); border-radius: var(--radius-lg); min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .validation-detail-panels { border: 1px solid var(--cwe-border-subtle); border-radius: var(--radius-md); overflow: hidden; } .validation-detail-panels .mud-expand-panel { border-bottom: 1px solid var(--cwe-border-subtle); } .validation-detail-panels .mud-expand-panel:last-child { border-bottom: none; } .validation-detail-panels .mud-expand-panel-header { padding: 12px 16px; transition: background-color var(--transition-fast); } .validation-detail-panels .mud-expand-panel-header:hover { background-color: var(--cwe-accent-glow); } .validation-section-label { letter-spacing: 0.08em; font-weight: 600; white-space: nowrap; flex-shrink: 0; } /* Section header rows: the trailing rule is a which computes to width:100% + flex-shrink:0, so it claims the whole row and crushes the label (forcing it to wrap) and the trailing count chip (clipping it off the right edge). Make the divider the flexible filler instead, and stop the chip from shrinking. */ .validation-section-header .mud-divider { width: auto; flex: 1 1 0; min-width: 1rem; } .validation-section-header .mud-chip { flex-shrink: 0; } /* Responsive rules for moved validation classes */ @media (max-width: 960px) { .validation-viz-panel { min-height: 300px; aspect-ratio: 4 / 3; } } @media (max-width: 600px) { .validation-viz-panel { min-height: 250px; aspect-ratio: 1 / 1; } .validation-weight-card { border-top-width: 2px; } } /* --- C: HullEditor + WindAreasEditor (byte-identical, both deleted) — nested-editor-tabs --- */ .nested-editor-tabs .mud-tabs-toolbar { min-height: 40px; background: transparent; border-bottom: 1px solid var(--mud-palette-lines-default); } .nested-editor-tabs .mud-tab { min-height: 40px; font-size: 0.85rem; text-transform: none; } /* --- D: Analysis.razor.css — .analysis-card rules (class on , was dead scoped) --- */ /* Note: hover transform (translateY(-4px)) and :active transform (translateY(-2px)) DROPPED per CRITICAL RULE 1 */ .analysis-card { transition: box-shadow var(--transition-med), border-color var(--transition-med); border-top: 3px solid transparent; overflow: hidden; } .analysis-card:hover { box-shadow: 0 16px 48px rgba(0,0,0,0.3), 0 0 0 1px var(--cwe-border-accent); border-top-color: var(--cwe-accent); } .analysis-card:hover .analysis-type-icon { background-color: var(--cwe-accent-glow); } /* --- E: ChatMessage.razor.css — chat bubble background tints (class on , was dead scoped) --- User bubble uses the mode-invariant accent-glow tint (NOT --mud-palette-primary-lighten, which is a saturated orange that the normal/secondary text can't contrast with — white-on- orange is sub-AA). The faint orange wash + right-alignment differentiate "you" while keeping the message + labels legible in both themes. */ .chat-message-user { background-color: var(--cwe-accent-glow-strong) !important; border: 1px solid var(--cwe-accent-glow-strong); max-width: 80%; border-radius: 12px 12px 0 12px; } .chat-message-assistant { background-color: var(--mud-palette-background-grey) !important; border: 1px solid var(--cwe-border-subtle); max-width: 80%; border-radius: 12px 12px 12px 0; } /* --- F: MainLayout.razor.css — drawer border + footer-pin layout (on Mud components, was dead scoped) --- */ .mud-drawer { border-right: 1px solid var(--cwe-border-subtle); } .mud-drawer-content { display: flex; flex-direction: column; height: 100%; } /* --- Nephos Assistant: rendered Markdown in assistant bubbles --- */ .chat-markdown { font-size: 0.875rem; line-height: 1.55; } .chat-markdown > *:first-child { margin-top: 0; } .chat-markdown > *:last-child { margin-bottom: 0; } .chat-markdown p { margin: 0.5em 0; } .chat-markdown ul, .chat-markdown ol { margin: 0.5em 0; padding-left: 1.4em; } .chat-markdown li { margin: 0.15em 0; } .chat-markdown h1, .chat-markdown h2, .chat-markdown h3, .chat-markdown h4, .chat-markdown h5, .chat-markdown h6 { margin: 0.6em 0 0.3em; font-weight: 700; line-height: 1.25; } .chat-markdown code { font-family: var(--font-mono, monospace); background: var(--cwe-bg-elevated); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.85em; } .chat-markdown pre { background: var(--cwe-bg-elevated); padding: 0.6em 0.8em; border-radius: 6px; overflow-x: auto; margin: 0.5em 0; } .chat-markdown pre code { background: none; padding: 0; } .chat-markdown a { color: var(--cwe-accent); text-decoration: underline; } .chat-markdown blockquote { border-left: 3px solid var(--cwe-accent-dim, var(--cwe-accent)); margin: 0.5em 0; padding-left: 0.8em; opacity: 0.9; } .chat-markdown table { border-collapse: collapse; margin: 0.5em 0; } .chat-markdown th, .chat-markdown td { border: 1px solid var(--cwe-border-subtle); padding: 0.3em 0.6em; }