/* ============================================================ DESIGN D — "Glass Cohesion" Source: Claude Design project b7a2734f-5d21-4eba-970b-d7dfc6691764, "Property Screen - Glass Cohesion.dc.html", Direction D ("B + glass bar"). The shape of the system, because it is easy to get backwards: GLASS — only three surfaces. The app bar, the nav menu, and the page-header chrome panel. Translucent; the app bar and nav menu also blur. SOLID — every content card is #ffffff with NO blur. Its lift comes from an 18px radius, a WHITE rim and a large soft shadow. On the blue ground a white rim reads as a highlight, not a border: the edge is meant to nearly vanish and the shadow does the separating. GROUND — a blue gradient on (see the .main-container block for why it must be body and not .mud-main-content). Light theme only for now. The dark palette still renders, but these white-alpha fills have no dark counterparts yet — see --defex-card-edge, the glass tokens and the body gradient. ============================================================ */ :root { /* Radius scale. Before this there was no general-purpose family — radius was spread across the Mud token (5px), .round (14px), .custom-radius-2 (12px), --wgt-radius-* and ~33 literals in this file. */ --defex-radius-panel: 18px; /* cards, nav menu, chrome panel */ --defex-radius-inner: 10px; /* panels nested inside a card */ --defex-radius-control: 24px; /* buttons, inputs, tabs */ --defex-radius-nav: 9px; /* nav rows */ --defex-radius-tile: 12px; /* entity icon tile */ --defex-radius-pill: 999px; --defex-glass-bar: rgba(255, 255, 255, 0.62); --defex-glass-panel: rgba(255, 255, 255, 0.66); --defex-glass-edge: rgba(255, 255, 255, 0.85); --defex-card-bg: #ffffffc7; --defex-card-edge: rgba(255, 255, 255, 0.90); --defex-card-shadow: 0 16px 44px rgba(15, 23, 43, 0.10); --defex-panel-shadow: 0 10px 32px rgba(15, 23, 43, 0.07); --defex-menu-shadow: 0 16px 44px rgba(15, 23, 43, 0.12); --defex-inner-bg: #F4F6FA; --defex-inner-edge: #E4E9F3; --defex-ghost-edge: #DEE2ED; --defex-rule: rgba(15, 23, 43, 0.08); /* Design D's stops are #dde7f8 → #e9eff9 40% → #f2f5fb 100%. The final stop is lifted here from #f2f5fb to #e7edf9 and pushed out to 100% via a later midpoint, because D's value goes essentially white: with background-attachment:fixed the gradient box is the VIEWPORT, so on a tall window that near-white stop arrives around mid-screen and the lower half loses all colour. Deviation from the design, made deliberately to keep the wash continuous. */ --defex-page-ground: linear-gradient(165deg, #dde7f8 0%, #e6edfa 45%, #e7edf9 100%); } /* THE GROUND. On , NOT on .mud-main-content — MudBlazor margin-lefts the main content by the drawer width, so the strip behind the fixed drawer would fall through to body's white. The nav menu's backdrop-filter would then sample flat white, and blurring a flat colour returns that colour, so the menu would render as a plain white slab. Same failure mode documented at mobile-detail.css:4295. */ /* The blooms are BACKGROUND LAYERS on body, not pseudo-elements. The design draws them as two absolutely-positioned circles, but as layers they need no stacking-context reasoning at all — as pseudo-elements they must carry z-index:-1, because ::after is body's last child and .mud-layout is z-index:auto, so at z-index 0 tree order wins and the bloom paints as a blue film OVER the whole UI. background-attachment: fixed applies to every layer, so the whole ground is viewport-anchored and stays put while content scrolls — matching D, where the blooms sit on a non-scrolling shell. D anchors both blooms to the TOP. A third, low one is added here: with a viewport-sized gradient box, two top blooms plus a pale end stop leave the bottom of a tall window with no colour at all. Keep the palette to blues — an off-hue bloom reads as a stain, not as light. */ body { background: radial-gradient(380px 380px at 270px 120px, rgba(21, 93, 252, 0.13), rgba(21, 93, 252, 0)), radial-gradient(320px 320px at calc(100% - 210px) 160px, rgba(150, 180, 240, 0.16), rgba(150, 180, 240, 0)), /* Bottom lift. A single LINEAR ramp, not radial blooms: two low radials (the first attempt) peaked near the bottom edge and overlapped across the width, which read as a distinctly bluer band with a visible ramp rather than an even wash. A linear fade to transparent at 55% carries colour to the bottom with no locus and no edge. */ linear-gradient(to top, rgba(21, 93, 252, 0.09) 0%, rgba(21, 93, 252, 0) 55%), var(--defex-page-ground); background-attachment: fixed; } /* ============================================================ DARK MODE for the Design D surface system. Everything above this block is a LIGHT literal — the glass pass gave the app a hand-painted ground, card fills and rim colours instead of MudBlazor's palette, and wrote no dark counterparts. MudThemeProvider still swaps --mud-palette-* correctly, so in dark mode text went to #F8FAFC while every surface stayed pale: white-on-white. The marker is stamped on .mud-layout (MainLayout.razor), NOT on — Blazor can only render inside the app root, and .mud-layout is the outermost element it owns that still contains the appbar, the drawer and the main content. The ground is repainted on .mud-layout rather than left on because body cannot carry the marker. .mud-layout is full-viewport and opaque here, so body's light ground never shows through, and — crucially — the nav drawer is a DESCENDANT of .mud-layout, so the panel's backdrop-filter samples this dark ground. Painting the ground any deeper (e.g. on .mud-main-content) reintroduces the original bug the body rule was written to avoid: MudBlazor margin-lefts the main content by the drawer width, leaving the strip behind the fixed drawer unpainted, and blurring a flat colour returns that colour. ============================================================ */ .defex-theme-dark { /* Mirrors the light ground's 165deg three-stop shape, walked down to the dark palette's background (#0B1220) and surface (#16233B) rather than to flat black — a pure-black ground makes the cards above it read as floating grey rectangles. */ --defex-page-ground: linear-gradient(165deg, #0B1220 0%, #101B31 45%, #0D1626 100%); /* The blooms stay blue and stay ON: a cobalt glow over dark navy is what keeps the ground from reading as flat, exactly as the pale wash does in light. Only the alphas lift, because additive light needs more presence over a dark base. */ --defex-glass-bar: rgba(22, 35, 59, 0.62); --defex-glass-panel: rgba(22, 35, 59, 0.66); --defex-glass-edge: rgba(255, 255, 255, 0.14); /* Alpha matched to the light card's #ffffffc7 (~0.78) so cards keep the same degree of translucency over the ground, and the blooms still read through them. */ --defex-card-bg: rgba(22, 35, 59, 0.78); --defex-card-edge: rgba(255, 255, 255, 0.10); /* Shadows go to black, not to the light set's navy: a navy shadow over a navy ground is invisible, so the cards would lose their lift entirely. */ --defex-card-shadow: 0 16px 44px rgba(0, 0, 0, 0.45); --defex-panel-shadow: 0 10px 32px rgba(0, 0, 0, 0.38); --defex-menu-shadow: 0 16px 44px rgba(0, 0, 0, 0.50); /* Nested panels go DARKER than the card, inverting the light system where they go lighter — the cue is "recessed", and recessed reads as less light in both themes. */ --defex-inner-bg: #111B2E; --defex-inner-edge: #1F2E4A; --defex-ghost-edge: #243350; --defex-rule: rgba(255, 255, 255, 0.10); } .defex-theme-dark.mud-layout { /* min-height, because .mud-layout is sized by its children — on a short page it would otherwise stop above the fold and leak body's light ground below it. */ min-height: 100vh; background: radial-gradient(380px 380px at 270px 120px, rgba(21, 93, 252, 0.20), rgba(21, 93, 252, 0)), radial-gradient(320px 320px at calc(100% - 210px) 160px, rgba(90, 130, 220, 0.18), rgba(90, 130, 220, 0)), linear-gradient(to top, rgba(21, 93, 252, 0.12) 0%, rgba(21, 93, 252, 0) 55%), var(--defex-page-ground); background-attachment: fixed; } /* Remove drop shadow from all buttons globally */ .mud-button, .mud-button-root, .mud-icon-button, .mud-icon-button-root { box-shadow: none !important; } /* Tabs, Design D: a row of top-rounded pills under a faint rule, the active one lifted on a white fill with a blue inset underline. The rule drops from the hard table-lines colour to --defex-rule; a hard hairline reads as a seam cutting the chrome panel. */ .mud-tab { /* 12px horizontal, not D's 14: the joined tab bar spends width on its left inset, and entity pages run to 9 tabs plus 5 utility icons. The 2px per tab buys that back and keeps the strip out of overflow-scroll. */ padding: 12px 20px !important; border-radius: var(--defex-radius-control) var(--defex-radius-control) 0 0 !important; color: #4B5563; text-transform: none; } .mud-tab:hover { background: rgba(15, 23, 43, 0.04); } /* The tab strip is literal-coloured above (#4B5563 / #0F172B) — dark navy labels that vanish against the dark ground. Same three states, walked to the dark palette. */ .defex-theme-dark .mud-tab { color: #9FB0CE; } .defex-theme-dark .mud-tab:hover { background: rgba(255, 255, 255, 0.06); } .defex-theme-dark .mud-tab.mud-tab-active { color: #F8FAFC; } /* No fill on the active tab — it reads purely through the darker label and the underline. Design D lifts it on a white pill, but on our joined chrome panel that pill sat on an already-white surface and only muddied the seam. */ .mud-tab.mud-tab-active { color: #0F172B; background: transparent; } .mud-tabs { border-top: 1px solid var(--defex-rule) !important; } /* Utility tab strip (EntityUtilityTabs): right-align the trailing icon-only tabs (Notes/Files/Conversation/To Do/Activity) and tighten their padding. Two facts about the MudTabs DOM drive this: 1. The .mud-tab button is NOT the flexbox child — MudBlazor wraps each tab in a .mud-tooltip-root (because ToolTip is set) and that wrapper is the flex item. 2. .mud-tabs-tabbar-wrapper is shrink-wrapped to its tabs, so it has no internal free space for an auto margin. Stretch it to fill its (wider) container first, THEN the auto margin on the first utility tab's wrapper pushes the group to the right edge. Scoped with :has() so only pages that actually host the utility strip are affected. */ .mud-tabs-tabbar-wrapper:has(.ai-utility-tab--first) { width: 100%; } .mud-tabs-tabbar-wrapper > .mud-tooltip-root:has(.ai-utility-tab--first), .mud-tabs-tabbar-wrapper > .ai-utility-tab--first { margin-left: auto !important; } .ai-utility-tab { padding: 6px 12px !important; } /* Utility tab icons default to a lighter grey; the active tab keeps the primary colour. */ .ai-utility-tab .mud-icon-root { color: var(--mud-palette-text-secondary) !important; } .ai-utility-tab.mud-tab-active .mud-icon-root { color: var(--mud-palette-primary) !important; } /* MudBlazor positions its active-tab underline slider by summing panel widths and rendering a percentage — it can't see the auto-margin gap we inject for the utility group, so the slider desyncs on these strips. Hide it and draw the underline directly on the active tab (inset box-shadow = no layout shift), which follows real layout and stays aligned. */ .mud-tabs-tabbar-wrapper:has(.ai-utility-tab--first) .mud-tab-slider { display: none !important; } .mud-tabs-tabbar-wrapper:has(.ai-utility-tab--first) .mud-tab.mud-tab-active { box-shadow: inset 0 -2px 0 0 var(--mud-palette-primary); } /* Add extra padding to the toggles in small size */ .mud-toggle-item-size-small { padding: 4px 8px !important; } /* MudToggleGroup rounds the SHELL (border-radius + overflow:hidden) but hard-resets every item to border-radius:0, so the end segments stay square inside the 24px-rounded shell and the group background shows through as a crescent past the first/last segment. Let the end items inherit the shell's corners, and pad the rounded side (beating the size-small !important above) so the label doesn't sit inside the curve. */ .mud-toggle-group.mud-toggle-group-horizontal > .mud-toggle-item:first-child { border-start-start-radius: inherit; border-end-start-radius: inherit; padding-inline-start: 14px !important; } .mud-toggle-group.mud-toggle-group-horizontal > .mud-toggle-item:last-child { border-start-end-radius: inherit; border-end-end-radius: inherit; padding-inline-end: 14px !important; } /* Reduce padding in mud datagrid tables (excluding child content rows) */ .mud-table-body > .mud-table-row > .mud-table-cell, .mud-table-head > .mud-table-row > .mud-table-cell { padding: 4px 24px !important; } /* reduce margin on in put controls */ /* This hits EVERY dense input in the app and hardcodes a literal over the theme's DefaultBorderRadius, so it has to move with it or the token change does nothing visible. */ .mud-input-control.mud-input-control-margin-dense { margin: 0px !important; border-radius: var(--defex-radius-control) !important; } /* Font weight utilities */ .font-medium { font-weight: 500 !important; } .font-semibold { font-weight: 600 !important; } .font-bold { font-weight: 700 !important; } /* Grey text - theme-aware (adapts to dark mode) */ .text-grey { color: var(--mud-palette-text-secondary) !important; } /* Grey text - fixed shades (for when a specific grey is needed) */ .text-grey-500 { color: #6B7280 !important; } .text-grey-600 { color: #475569 !important; } /* Form field label: smaller, muted, theme-aware (tracks --mud-palette-text-secondary) */ .form-label { font-size: 0.8125rem !important; /* 13px */ color: var(--mud-palette-text-secondary) !important; } /* Form guidance copy sitting under a section header. Body size (0.875rem) so it stays above the 14px floor, but one colour step back and measure-capped, so a sentence of instruction reads as guidance rather than competing with the field values beside it. The cap matters in wide register dialogs, where an uncapped paragraph runs past 120 characters per line. */ .form-hint { color: var(--mud-palette-text-secondary) !important; /* 60ch, not 68: `ch` is the width of "0", which in Roboto runs ~15% wider than the average lowercase glyph, so 68ch measured as 78 characters per line. 60ch lands at ~69 — inside the 45-75 band. */ max-width: 60ch; } /* Inline field error rendered outside MudBlazor's own helper slot (e.g. an async uniqueness check). Sits at the documented field-label step rather than dropping to MudBlazor's 0.75rem caption, and takes its colour from the shared status token so it matches .status-pill and CustomAlert in every theme. */ .form-error-text { font-size: 0.8125rem !important; /* 13px — the field-label step */ font-weight: 500 !important; color: var(--status-error-fg) !important; } /* Outlined text field with a solid (non-transparent) background, e.g. inline composers sitting on a tinted swimlane. Tracks the theme surface colour. */ .form-field-white .mud-input.mud-input-outlined { background-color: var(--mud-palette-surface) !important; border-radius: var(--mud-default-borderradius); } /* The mandatory-field asterisk (RequiredIndicator.razor). A class rather than an inline style so the rule below can find it with :has(). */ .required-indicator { color: var(--mud-palette-error); } /* Required-but-empty field: a soft error-toned wash that clears the moment the field has a value, so an unfinished form reads at a glance. Deliberately lighter than --status-error-bg: this is "still to do", not "you got it wrong". Driven entirely by RequiredIndicator stamping --empty on itself, so no page markup is involved; a field opts in by giving the indicator (or its HelpLabel) a For expression. Anchoring on the MudItem rather than using a sibling combinator is deliberate. The input is NOT reliably a sibling of the label: LookupPopover wraps its trigger in two nested divs, so ZoneLookup and LookupDropdown sit a couple of levels down. Matching the item and then descending reaches every field wrapper uniformly. The child combinator on the label matters — without it a nested item's label would wash its parent's inputs too. Consequence to know: an item holding two inputs washes both, so keep one field per MudItem (which the forms already do). Some fields put the label in a flex row alongside trailing actions (AI assist, snippet insert), which pushes .help-label-root a level below the item and out of reach of that child combinator. Such a row opts back in with .field-label-row — an explicit marker rather than a relaxed combinator, so the sibling-bleed guarded against above still holds. Read-mode sections render a MudText instead of an input, so this is inert there. */ .mud-grid-item:has(> :is(.help-label-root, .form-label, .field-label-row) .required-indicator--empty) .mud-input-control .mud-input { background-color: var(--field-required-bg); border-radius: var(--mud-default-borderradius); } .section-header { font-size: 18px; font-weight: 500; } /* Two-line section heading: a tinted icon tile beside a title with a quieter subtitle underneath. The tile's bg/fg/border are supplied inline by the caller (e.g. the Job information card tints them from the job type's --status-* tokens so the header reads as the same object as the Job Type chip). */ .section-header-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; } .section-header-titles { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } /* Sits at the same step as .form-label so the caption under a section title reads as the same class of text as the field labels below it. */ .section-header-subtitle { font-size: 0.8125rem !important; /* 13px */ font-weight: 400; color: var(--mud-palette-text-secondary) !important; } /* Planner drag-and-drop highlight */ .planner-drop-highlight { background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent) !important; border-color: var(--mud-palette-primary) !important; transition: background 0.15s ease, border-color 0.15s ease; } /* Multi-select highlight for backlog job cards (Job Planner Day rail). 1px to match the resting card: a thicker selected border reflows the card's content and makes the whole list jitter as you tick boxes. The fill plus the accented left stripe carry the state instead. */ .backlog-job-card-selected { border: 1px solid #1E88E5 !important; background: color-mix(in srgb, #1E88E5 8%, var(--mud-palette-surface)) !important; } /* Prompt drag-and-drop reorder styles */ .prompt-drop-zone .prompt-row { transition: margin-top 0.2s ease; position: relative; } .prompt-drop-zone .prompt-row:hover { background: var(--mud-palette-action-default-hover) !important; } .prompt-drop-zone .prompt-drop-indicator { margin-top: 50px; } .prompt-drop-zone .prompt-drop-indicator::before { content: ''; position: absolute; top: -28px; left: 40px; right: 16px; height: 4px; border-radius: 2px; background: var(--mud-palette-primary); } .prompt-drop-zone .prompt-drop-indicator::after { content: ''; position: absolute; top: -32px; left: 32px; width: 12px; height: 12px; border-radius: 50%; background: var(--mud-palette-primary); } /* Item drag-and-drop reorder styles (QuoteTemplate Items tab) */ .item-drop-zone .item-row { transition: margin-top 0.2s ease; position: relative; } .item-drop-zone .item-row:hover { background: var(--mud-palette-action-default-hover) !important; } .item-drop-zone .item-drop-indicator { margin-top: 50px; } .item-drop-zone .item-drop-indicator::before { content: ''; position: absolute; top: -28px; left: 40px; right: 16px; height: 4px; border-radius: 2px; background: var(--mud-palette-primary); } .item-drop-zone .item-drop-indicator::after { content: ''; position: absolute; top: -32px; left: 32px; width: 12px; height: 12px; border-radius: 50%; background: var(--mud-palette-primary); } /* Give outlined form inputs a surface background so they stand out on gray containers */ .mud-input-outlined .mud-input-slot { background-color: var(--mud-palette-surface); border-radius: var(--mud-default-borderradius); } /* ===== Status color tokens (single source of truth) ===== Consumed by .status-pill, CustomAlert, the outlined snackbar and CustomChip so all four shapes stay visually locked together. Each severity is ONE fixed hue, mixed against the live surface and text colours. That split is the whole design: - The HUE is a constant. Severity means the same thing in every theme, so it is not derived from --mud-palette-error/warning/success and it deliberately does NOT follow the red tenant-operator theme. (--status-info-* used to derive from the info slot, which is why the OPTIONAL badge turned alarm-red for platform operators. That is fixed here.) - The LIGHTNESS adapts, because --mud-palette-surface and -text-primary are swapped by MudThemeProvider on :root. One declaration therefore resolves correctly in light, dark and red without a marker class. The marker class matters: on the web host MudThemeProvider only swaps variables and never stamps `.mud-theme-dark` (MainLayout stamps `defex-theme-dark` on .main-container instead). Scoping these to that class would miss MudDialog and MudSnackbar entirely — both providers render outside .main-container — which would break the pill/alert lock in dark mode rather than complete it. Deriving from :root-level palette variables reaches portalled content too. Ratios are 12% / 30% / 66%, chosen so every severity clears WCAG AA (>= 4.5:1) on its own background in BOTH themes; worst case is dark error at 4.51:1. Changing them without re-checking that will silently drop a pill below AA. */ :root { --status-error-hue: #C92324; --status-warning-hue: #EA580C; --status-success-hue: #007E33; --status-info-hue: #2563EB; --status-error-bg: color-mix(in srgb, var(--status-error-hue) 12%, var(--mud-palette-surface)); --status-error-border: color-mix(in srgb, var(--status-error-hue) 30%, var(--mud-palette-surface)); --status-error-fg: color-mix(in srgb, var(--status-error-hue) 66%, var(--mud-palette-text-primary)); /* Wash for a required field that is still empty (see .field-required-empty). Sits below the 12% pill step on purpose — it must stay quiet enough to sit behind input text in both themes without reading as a validation failure. */ --field-required-bg: color-mix(in srgb, var(--status-error-hue) 8%, var(--mud-palette-surface)); --status-warning-bg: color-mix(in srgb, var(--status-warning-hue) 12%, var(--mud-palette-surface)); --status-warning-border: color-mix(in srgb, var(--status-warning-hue) 30%, var(--mud-palette-surface)); --status-warning-fg: color-mix(in srgb, var(--status-warning-hue) 66%, var(--mud-palette-text-primary)); --status-success-bg: color-mix(in srgb, var(--status-success-hue) 12%, var(--mud-palette-surface)); --status-success-border: color-mix(in srgb, var(--status-success-hue) 30%, var(--mud-palette-surface)); --status-success-fg: color-mix(in srgb, var(--status-success-hue) 66%, var(--mud-palette-text-primary)); --status-info-bg: color-mix(in srgb, var(--status-info-hue) 12%, var(--mud-palette-surface)); --status-info-border: color-mix(in srgb, var(--status-info-hue) 30%, var(--mud-palette-surface)); --status-info-fg: color-mix(in srgb, var(--status-info-hue) 66%, var(--mud-palette-text-primary)); /* Soft info, kept as its own token name because CustomChip and .status-icon-btn consume it. It now resolves identically to the info pill above: maintaining two near-identical pale blues was itself part of the blue sprawl this block exists to prevent. Alias rather than a second set of literals. */ --status-info-soft-bg: var(--status-info-bg); --status-info-soft-border: var(--status-info-border); --status-info-soft-fg: var(--status-info-fg); } /* ===== Glass chips (CustomChip, Light variant) ===== Prefix: defex-glass-chip. The web counterpart of the mobile app's .md-glass-chip (mobile-detail.css), kept as a separate class rather than reusing that one because the two hosts theme differently: the mobile rule inverts off `.mud-theme-dark`, which the web host never stamps (see the note in the status-token block above). Everything here therefore resolves from :root palette variables so one declaration works in light, dark and red. Only the blur, the rim and the lift live here. The TINT is emitted INLINE by Shared/Components/CustomChip.razor, because MudChip writes `background-color: … !important` inline and an inline !important cannot be beaten from a stylesheet — only by a later declaration inside the same style attribute. The blur only does visible work where there is something behind the chip to sample: the blue page ground and the translucent chrome panel. Design D's content cards are solid white, so a chip inside one reads as tint + rim + lift alone — which is the intended result, not a bug to chase with a heavier blur. The doubled selector buys specificity over the page