/* ============================================================ eCAP Theme ------------------------------------------------------------ Semantic colour theming layered on top of MudBlazor's palette plus the tokens defined in tokens.css. Lives at the "global semantic" layer — everything in here is something that means the same thing across pages (a "submitted" chip is yellow whether it appears in a list, a card, or a banner). What goes here: - Domain status/priority/casetype/utility/SLA/closure chips - Activity-log row + icon colouring - Role-card selected state - Universal user avatar (admin/officer/neutral) - MudBlazor component overrides that affect every page (button radius, tooltip color, checkbox state, skeleton radius, etc.) ============================================================ */ /* ---------- MudBlazor component overrides ---------- These run app-wide and tighten Mud's defaults to match EWOSA's design conventions. Keep changes minimal — every override is a coupling to MudBlazor's internal DOM. */ /* 8px border radius on buttons and outlined inputs. No `!important`: theme.css loads after MudBlazor.min.css and our selectors here are at least as specific as MudBlazor's, so cascade already wins. */ .mud-button-root { border-radius: var(--ecap-radius-md); } .mud-input-control .mud-input-outlined-border { border-radius: var(--ecap-radius-md); } /* Drop drop-shadow from filled buttons (looks heavy alongside our cards) */ .mud-button-filled { box-shadow: none; } /* Consistent grey border on outlined buttons. `!important` here only because MudBlazor sets variant-specific borders via more specific selectors (.mud-button-outlined.mud-button-color-default). */ .mud-button-outlined { border-color: var(--ecap-color-gray-200) !important; } /* Checked/indeterminate checkboxes use primary colour */ .mud-checkbox:has(.mud-checkbox-input:checked) .mud-icon-root, .mud-checkbox:has(.mud-checkbox-input:indeterminate) .mud-icon-root, .mud-selected-item .mud-checkbox .mud-icon-root, .mud-list-item.mud-selected-item .mud-icon-root { color: var(--mud-palette-primary) !important; } /* Tooltips use primary colour. Bubble is sized to fit common labels (assignee names, action hints) on a single line at 280px — short text stays on one line, only truly long content wraps. Wrapping beats clipping at the viewport edge. */ .mud-tooltip { background-color: var(--mud-palette-primary) !important; color: var(--ecap-color-white) !important; max-width: 280px; } .mud-tooltip.mud-tooltip-arrow::after { border-top-color: var(--mud-palette-primary) !important; } /* Square off skeletons */ .mud-skeleton { border-radius: var(--ecap-radius-sm); } /* ---------- SubmitButton (global loading-aware submit) ---------- Idle + loading content stacked so the button width stays steady between states (no jump as the label switches). Cross-fades via opacity. While loading, neutralise MudBlazor's disabled styling so the brand colour persists — pointer-events: none + cursor: progress convey "in flight" without the button looking dead. */ /* Stack the idle + loading labels in the same grid cell so the container sizes to whichever is wider (avoids the loading text wrapping when it's longer than the idle label — e.g. "Saving draft…" vs "Save Draft"). */ .ecap-submit-button .ecap-submit-stack { display: inline-grid; grid-template-areas: "stack"; align-items: center; } .ecap-submit-button .ecap-submit-label, .ecap-submit-button .ecap-submit-loading { grid-area: stack; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; transition: opacity 160ms ease; } .ecap-submit-button .ecap-submit-loading { opacity: 0; pointer-events: none; } .ecap-submit-button--loading .ecap-submit-label { opacity: 0; } .ecap-submit-button--loading .ecap-submit-loading { opacity: 1; } .ecap-submit-button .ecap-submit-spinner { width: 16px; height: 16px; } /* When the button enters its loading state we want the brand colour to stick rather than fade to the MudBlazor disabled gray. !important is needed because `.mud-button-disabled` is set inline-equivalently by the framework and loads later in the cascade. */ .ecap-submit-button.ecap-submit-button--loading.mud-button-filled { background-color: var(--mud-palette-primary) !important; color: var(--ecap-color-white) !important; opacity: 0.92; cursor: progress !important; pointer-events: none; } .ecap-submit-button.ecap-submit-button--loading.mud-button-outlined, .ecap-submit-button.ecap-submit-button--loading.mud-button-text { color: var(--mud-palette-primary) !important; border-color: var(--mud-palette-primary) !important; opacity: 0.92; cursor: progress !important; pointer-events: none; } /* ---------- Closure form: read-only field skin ---------- When the closure form is read-only (status = Submitted/Upgraded/Closed) the MudTextField + MudDatePicker controls are rendered Disabled. MudBlazor's default disabled treatment fades the *text* to near-invisible. Background matches the org read-only property panels (.ecap-prop-panel, var(--ecap-color-gray-50)) so locked fields read consistently across the app. */ .ecap-closure-field .mud-input.mud-disabled, .ecap-closure-field .mud-input-control.mud-disabled .mud-input { background-color: var(--ecap-color-gray-50); } .ecap-closure-field .mud-input.mud-disabled .mud-input-slot, .ecap-closure-field .mud-disabled input.mud-input-slot, .ecap-closure-field .mud-disabled textarea.mud-input-slot { color: var(--ecap-color-gray-900) !important; -webkit-text-fill-color: var(--ecap-color-gray-900); opacity: 1 !important; } .ecap-closure-field .mud-input.mud-disabled .mud-input-outlined-border { border-color: var(--ecap-color-gray-300); } /* Compact small chips */ .mud-chip.mud-chip-size-small { border-radius: var(--ecap-radius-lg); font-size: 11px; height: 18px; padding: 0 8px; margin-left: 0; } /* Inset pill-style nav links */ .mud-drawer .mud-navmenu { padding: 8px 12px; } /* Remove auto left-margin on menu items without icons */ .mud-menu-list:has(.mud-menu-item-icon) .mud-menu-item:not(:has(.mud-menu-item-icon)) .mud-menu-item-text { margin-inline-start: 0; } /* Tighten checkbox-to-label gap in multi-select dropdowns */ .mud-list-item-icon { min-width: 28px; } /* Balanced text-wrap on headings to prevent widows */ .mud-typography-h5, .mud-typography-h6 { text-wrap: balance; } /* ---------- Case subject title ---------- Renders next to the back button in the case-detail hero. Truncates with ellipsis when the row is tight so long subjects don't push the action buttons off-screen. Sized down a notch on small viewports. */ .mud-typography.ecap-case-title { color: var(--ecap-color-gray-900); font-weight: var(--ecap-fw-bold); letter-spacing: -0.015em; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 599.98px) { .mud-typography.ecap-case-title { font-size: 1rem; } } /* ---------- FieldDisplay (compact label + value pair) ---------- Used in the case-detail accordions and other detail views. The label sits as a small uppercase eyebrow above the value so the field-name has presence without dominating the row. Rule lives here (not scoped) because the class is applied to a MudText Razor-component root — Blazor's scope attribute would not reach it. See CLAUDE.md "scope-on-MudComponent caveat". */ .ecap-field { display: flex; flex-direction: column; gap: 2px; } .mud-typography.ecap-field-label { font-size: var(--ecap-text-2xs); font-weight: var(--ecap-fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ecap-color-gray-600); line-height: 1.4; } /* Section heading for a group of FieldDisplay rows (e.g. "Contact", "Addresses", "Account & Service"). Slightly heavier than the field-label eyebrow so the group reads as the parent. */ .mud-typography.ecap-field-group-heading { display: block; font-size: var(--ecap-text-xs); font-weight: var(--ecap-fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ecap-color-gray-800); margin-bottom: 10px; } /* ---------- ecap-* chip baseline ---------- Visible 1px border on every ecap-* chip so they stay legible against any backdrop (white card, page tint, hover bg). The individual rules below override border-color with explicit hues. */ [class*="mud-chip"][class*="ecap-"] { border: 1px solid currentcolor; font-weight: var(--ecap-fw-medium); } /* ---------- Status ---------- */ .mud-chip.ecap-status-open { background-color: var(--ecap-color-blue-50); color: var(--ecap-color-blue-700); border-color: var(--ecap-color-blue-400); } .mud-chip.ecap-status-submitted { background-color: var(--ecap-color-amber-200); color: var(--ecap-color-orange-900); border-color: var(--ecap-color-amber-600); } .mud-chip.ecap-status-upgraded { background-color: var(--ecap-color-purple-100); color: var(--ecap-color-purple-800); border-color: var(--ecap-color-purple-400); } .mud-chip.ecap-status-closed { background-color: var(--ecap-color-green-100); color: var(--ecap-color-green-700); border-color: var(--ecap-color-green-400); } .mud-chip.ecap-status-rejected { background-color: var(--ecap-color-red-100); color: var(--ecap-color-red-700); border-color: var(--ecap-color-red-400); } /* ---------- Priority ---------- */ .mud-chip.ecap-priority-critical { background-color: var(--ecap-color-red-100); color: var(--ecap-color-red-700); border-color: var(--ecap-color-red-400); } .mud-chip.ecap-priority-high { background-color: var(--ecap-color-orange-100); color: var(--ecap-color-orange-700); border-color: var(--ecap-color-orange-400); } .mud-chip.ecap-priority-medium { background-color: var(--ecap-color-amber-100); color: var(--ecap-color-amber-900); border-color: var(--ecap-color-amber-500); } .mud-chip.ecap-priority-low { background-color: var(--ecap-color-green-100); color: var(--ecap-color-green-700); border-color: var(--ecap-color-green-400); } /* Data-driven chip text (utility, case type, closure type, issue type fallback) comes straight from the API where casing isn't normalised (e.g. "electricity" instead of "Electricity"). Capitalize for a consistent Title Case display without touching the underlying data. */ .mud-chip[class*="ecap-utility-"], .mud-chip[class*="ecap-casetype-"], .mud-chip[class*="ecap-closure-"], .mud-chip.ecap-default { text-transform: capitalize; } /* ---------- Case type ---------- */ .mud-chip.ecap-casetype-consultation { background-color: var(--ecap-color-red-100); color: var(--ecap-color-red-700); border-color: var(--ecap-color-red-400); } .mud-chip.ecap-casetype-early-resolution { background-color: var(--ecap-color-amber-200); color: var(--ecap-color-orange-900); border-color: var(--ecap-color-amber-600); } .mud-chip.ecap-casetype-escalated-referral { background-color: var(--ecap-color-blue-50); color: var(--ecap-color-blue-700); border-color: var(--ecap-color-blue-400); } /* ---------- Utility / product ---------- */ .mud-chip.ecap-utility-electricity { background-color: var(--ecap-color-amber-100); color: var(--ecap-color-amber-900); border-color: var(--ecap-color-amber-500); } .mud-chip.ecap-utility-gas { background-color: var(--ecap-color-orange-100); color: var(--ecap-color-orange-700); border-color: var(--ecap-color-orange-400); } .mud-chip.ecap-utility-water { background-color: var(--ecap-color-cyan-50); color: var(--ecap-color-cyan-700); border-color: var(--ecap-color-cyan-400); } /* ---------- SLA / days remaining ---------- */ /* SLA chip variants — same four-band ramp as .ecap-days-* (overdue, critical/dueToday, warning, onTrack). Keyed by the server-supplied DueDateUrgency string via EcapColors.SlaStatus. */ .mud-chip.ecap-sla-overdue { background-color: var(--ecap-color-red-100); color: var(--ecap-color-red-600); border-color: var(--ecap-color-red-400); } .mud-chip.ecap-sla-critical { background-color: var(--ecap-color-amber-100); color: var(--ecap-color-amber-critical); border-color: var(--ecap-color-amber-600); } .mud-chip.ecap-sla-warning { background-color: var(--ecap-color-amber-100); color: var(--ecap-color-amber-700); border-color: var(--ecap-color-amber-500); } .mud-chip.ecap-sla-ontrack { background-color: var(--ecap-color-green-100); color: var(--ecap-color-green-500); border-color: var(--ecap-color-green-400); } /* ---------- Requirement status (CaseRequirements) ---------- */ .mud-chip.ecap-req-met { background-color: var(--ecap-color-green-100); color: var(--ecap-color-green-700); font-weight: var(--ecap-fw-medium); } .mud-chip.ecap-req-inprogress { background-color: var(--ecap-color-amber-200); color: var(--ecap-color-orange-900); font-weight: var(--ecap-fw-medium); } .mud-chip.ecap-req-notstarted { background-color: var(--ecap-color-red-100); color: var(--ecap-color-red-700); font-weight: var(--ecap-fw-medium); } /* ---------- Closure type ---------- */ .mud-chip.ecap-closure-nocontact { background-color: var(--ecap-color-amber-200); color: var(--ecap-color-orange-900); border: 1px solid var(--ecap-color-amber-300); font-weight: var(--ecap-fw-medium); } .mud-chip.ecap-closure-undertakings { background-color: var(--ecap-color-blue-50); color: var(--ecap-color-blue-700); border: 1px solid var(--ecap-color-blue-200); font-weight: var(--ecap-fw-medium); } .mud-chip.ecap-closure-satisfied { background-color: var(--ecap-color-green-100); color: var(--ecap-color-green-700); border: 1px solid var(--ecap-color-green-200); font-weight: var(--ecap-fw-medium); } .mud-chip.ecap-closure-dissatisfied { background-color: var(--ecap-color-red-100); color: var(--ecap-color-red-700); border: 1px solid var(--ecap-color-red-200); font-weight: var(--ecap-fw-medium); } /* ---------- Role-card (selectable) ---------- */ .ecap-role-card--selected { border-color: var(--mud-palette-primary); background-color: var(--mud-palette-primary-lighten); } /* ---------- Universal user avatar ---------- Coloured-circle avatar with white initials. Role modifiers tint the fill; neutral variant for unknown/unassigned. Used by team list, AppBar profile pill, case assignee badge — anywhere a specific person's avatar appears. */ .ecap-user-avatar { font-weight: var(--ecap-fw-bold); box-shadow: none; } .ecap-user-avatar--admin { background-color: var(--ecap-color-brand-admin); color: var(--ecap-color-white); } .ecap-user-avatar--officer { background-color: var(--ecap-color-brand-officer); color: var(--ecap-color-white); } .ecap-user-avatar--contact { background-color: var(--ecap-color-gray-500); color: var(--ecap-color-white); } .ecap-user-avatar--neutral { background-color: var(--ecap-color-gray-100); color: var(--ecap-color-gray-600); } /* Compact profile avatar in the AppBar profile menu. Sits on a MudAvatar Razor-component root so the rule must be global (scope-on-MudComponent caveat). */ .mud-avatar.ecap-profile-avatar { font-size: var(--ecap-text-xs); width: 28px; height: 28px; } /* ---------- Snackbar (toast) overrides ---------- MudBlazor's default Filled variant paints the whole toast in the severity colour, which makes dark body text hard to read. Replace with the active- state-indicator pattern (white-ish body + bold left accent + tinted icon) but tuned for prominence: a 6px accent, a faint severity wash so the toast doesn't blend into the white page, deeper drop shadow, and a small scale-in pop on entrance so it grabs attention. `!important` is required because MudBlazor's own filled rules set background/color inline-equivalently and load after this file. */ .mud-snackbar { background-color: var(--ecap-color-white) !important; color: var(--ecap-color-gray-900) !important; border: 1px solid var(--mud-palette-lines-default); border-left: 6px solid var(--ecap-color-gray-400); border-radius: var(--ecap-radius-md); box-shadow: 0 12px 28px rgb(0 0 0 / 0.18), 0 4px 8px rgb(0 0 0 / 0.10); font-size: var(--ecap-text-base); animation: ecap-toast-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; } .mud-snackbar .mud-snackbar-content-message, .mud-snackbar .mud-alert-message { color: var(--ecap-color-gray-900) !important; font-weight: var(--ecap-fw-medium); } .mud-snackbar .mud-icon-button, .mud-snackbar .mud-icon-button .mud-icon-root { color: var(--ecap-color-gray-600) !important; } /* Severity tint + accent. Body uses the solid `-50` swatch (opaque, not alpha) so the toast doesn't look translucent over whatever's behind it. Outer 1px border matches the severity colour so the toast has a clean defined edge in addition to the bold left accent. */ .mud-snackbar.mud-alert-filled-success { background-color: var(--ecap-color-green-50) !important; border-color: var(--ecap-color-green-200); border-left-color: var(--ecap-color-green-700); } .mud-snackbar.mud-alert-filled-warning { background-color: var(--ecap-color-amber-50) !important; border-color: var(--ecap-color-amber-300); border-left-color: var(--ecap-color-amber-700); } .mud-snackbar.mud-alert-filled-error { background-color: var(--ecap-color-red-50) !important; border-color: var(--ecap-color-red-200); border-left-color: var(--ecap-color-red-600); } .mud-snackbar.mud-alert-filled-info { background-color: var(--ecap-color-blue-50) !important; border-color: var(--ecap-color-blue-200); border-left-color: var(--ecap-color-blue-600); } /* Icon colour matches the accent but with the warning swatch darkened to --ecap-color-amber-700 so it clears WCAG AA contrast on the white body (amber-500 on white is ~1.7:1). */ .mud-snackbar.mud-alert-filled-success .mud-alert-icon .mud-icon-root { color: var(--ecap-color-green-700) !important; } .mud-snackbar.mud-alert-filled-warning .mud-alert-icon .mud-icon-root { color: var(--ecap-color-amber-700) !important; } .mud-snackbar.mud-alert-filled-error .mud-alert-icon .mud-icon-root { color: var(--ecap-color-red-600) !important; } .mud-snackbar.mud-alert-filled-info .mud-alert-icon .mud-icon-root { color: var(--ecap-color-blue-600) !important; } @keyframes ecap-toast-in { from { transform: translateY(8px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mud-snackbar { animation: none; } } /* ============================================================ Fullscreen textarea expand affordance ------------------------------------------------------------ `ExpandFieldButton` (rendered next to every 5,000-char narrative field) opens a viewport-sized editor via `ExpandTextDialog`. Classes live here rather than in scoped CSS because they target MudBlazor component roots (MudIconButton / MudTextField) — scope attributes don't propagate to those. See CLAUDE.md § Scope-on-MudComponent caveat. ============================================================ */ .ecap-textarea-labelrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ecap-textarea-labelrow > .ecap-closure-field-label { margin-bottom: 0; } /* Muted trigger — the field's contents are the focal point, the expand button is a secondary affordance. Hovers up to the primary tint so it reads as clickable without competing with the required-asterisk or the field's own focus ring. */ /* Red asterisk for required-field labels. Global so it works everywhere, including inside MudBlazor component templates (MudCheckBox.ChildContent, MudAlert body, etc.) where scoped CSS attributes don't reach. */ .ecap-required { color: var(--ecap-color-red-600); margin-left: 2px; } /* Case-detail status banners (.ecap-case-banner) — MudAlert's message slot is content-width by default, which stops trailing actions (e.g. "View Closure") pinning right. Stretch it so our own flex row inside the message can distribute space properly. Global because scoped CSS can't guarantee the descendant selector resolves on the alert's inner DOM (CLAUDE.md scope-on-MudComponent caveat). */ .ecap-case-banner .mud-alert-message { flex: 1 1 auto; width: 100%; } /* Submitting hint — companion caption to SubmitButton. Placed in the same flex row as the action buttons; takes flex:1 so it fills the leftover space on the left and the buttons stay pinned right. */ .ecap-submitting-hint { flex: 1; text-align: left; align-self: center; font-size: var(--ecap-text-xs); color: var(--ecap-color-gray-500); line-height: 1.4; padding-right: 12px; } /* Reset browser