/* * AUTO-GENERATED by tools/performance/build-client-css-bundle.mjs. * Edit the source modules listed in tools/performance/client-css-bundle.json. */ /* ===== WorkCita.Client/wwwroot/css/workcita-theme.tokens.css ===== */ /* * WorkCita global stylesheet module: workcita-theme.tokens.css * Ownership layer: tokens (sole owner of theme values). * Ownership: --wc-* design tokens, light/dark scopes, and Mud palette bridge. * Theme: defines the one universal WorkCita theme; no surface-specific palettes. * Load: after _content/MudBlazor/MudBlazor.min.css; before app.base.css (index.html). */ /* The money atom's cents lane is the one token that must NOT be re-resolved per element. It is a ch value, and an unregistered custom property substitutes its tokens at the use site, so an 18px emphasised "Total" row resolved a ~28% wider lane than the 14px rows above it and walked its decimal 7px out of column. Registering it as a computes the ch once, here at :root, and inherits the resulting absolute length, so one page has exactly one decimal column. Browsers without @property fall back to the previous per-element behaviour. */ @property --wc-money-cents-lane { syntax: ""; inherits: true; initial-value: 0px; } /* ============================================================================= Universal WorkCita design tokens ============================================================================= */ :root { /* Typography Scale */ /* One family, two optical sizes. Segoe UI Variable is the Windows 11 UI face; its Text and Display cuts share drawing and metrics, so body copy and headings read as one voice. Aptos is not listed: it ships as an Office cloud font that browsers cannot see, so naming it silently put body copy on the older Segoe UI beside Variable Display headings. Other platforms land on their own system UI face for both roles. */ --wc-font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --wc-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; /* Code-like data only (error references, tokens, raw payloads). Never a stylistic choice — see DESIGN.md typography. */ --wc-font-mono: "Cascadia Mono", Consolas, "Courier New", Courier, monospace; /* The scale is rem against the 16px default, not px, so a reader who raises the browser's font size scales the whole product with it. The comments carry the px each step resolves to at that default; they are the numbers every layout floor and column plan in this codebase was measured with. */ /* 13px is the reading floor: supporting copy, metadata, labels and captions. Only column headers, record-number pills and the chips inside table status and type lanes stay at 12px (--text-2xs): short keys that are scanned, not read. */ --text-2xs: 0.75rem; /* 12px */ --text-xs: 0.8125rem; /* 13px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px */ --text-lg: 0.9375rem; /* 15px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.25rem; /* 20px */ --text-3xl: 1.75rem; /* 28px */ /* Font Weights. 700 is the ceiling: the display family carries emphasis by size and colour, and heavier faces are a different voice, not a louder one. Nothing declares 750, 800, or 900. */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line Heights */ --leading-tight: 1.25; --leading-normal: 1.5; /* Letter Spacing */ --tracking-normal: 0em; --tracking-wide: 0.025em; /* Semantic product type roles. Components consume these roles instead of selecting raw scale steps, so hierarchy changes remain system-owned. */ --wc-type-display-family: var(--wc-font-display); --wc-type-display-size: var(--text-3xl); --wc-type-display-weight: var(--font-bold); --wc-type-display-leading: 1.18; --wc-type-headline-family: var(--wc-font-display); --wc-type-headline-size: var(--text-2xl); --wc-type-headline-weight: var(--font-bold); --wc-type-headline-leading: 1.2; --wc-type-title-family: var(--wc-font-display); --wc-type-title-size: var(--text-xl); --wc-type-title-weight: var(--font-bold); --wc-type-title-leading: 1.18; --wc-type-body-family: var(--wc-font-body); --wc-type-body-size: var(--text-base); --wc-type-body-weight: var(--font-normal); --wc-type-body-leading: var(--leading-normal); /* Compact/supporting roles keep dense feature layouts semantic. */ --wc-type-body-compact-size: var(--text-sm); --wc-type-body-emphasis-size: var(--text-lg); --wc-type-control-size: var(--wc-type-body-emphasis-size); --wc-type-caption-size: var(--text-xs); --wc-type-title-compact-size: 16px; --wc-type-input-size: 16px; --wc-type-display-pricing-size: 36px; --wc-type-display-pricing-compact-size: 32px; --wc-type-display-pricing-office-size: 34px; --wc-type-display-metric-size: 22px; --wc-type-value-size: var(--wc-type-title-size); --wc-type-value-compact-size: var(--wc-type-title-compact-size); --wc-type-label-family: var(--wc-font-body); --wc-type-label-size: var(--text-xs); --wc-type-label-weight: var(--font-bold); --wc-type-label-leading: var(--leading-tight); --wc-type-display-hero-fluid-size: clamp(36px, 5vw, 66px); --wc-type-display-hero-mobile-size: clamp(35px, 12vw, 54px); --wc-type-display-lede-size: clamp(17px, 1.9vw, 21px); --wc-type-display-section-size: clamp(26px, 3.2vw, 38px); --wc-type-display-proof-title-size: clamp(20px, 2.4vw, 26px); --wc-type-icon-size: 20px; --wc-type-icon-compact-size: 14px; --wc-type-icon-medium-size: 18px; --wc-type-icon-large-size: 34px; --wc-type-meta-family: var(--wc-font-body); --wc-type-meta-size: var(--text-xs); --wc-type-meta-weight: var(--font-semibold); --wc-type-meta-leading: 1.2; --wc-type-meta-tracking: var(--tracking-normal); --wc-type-table-header-family: var(--wc-font-body); --wc-type-table-header-size: var(--text-2xs); --wc-type-table-header-weight: var(--font-bold); --wc-type-table-header-leading: 1.2; --wc-type-table-header-tracking: var(--tracking-normal); /* Numeric posture (Ledger Ink). Money is a structure, not a string: WcMoney splits every amount into mark / whole / cents so a right-aligned column lands its decimal point at a constant offset with no measuring. These two tokens are the sole owners of figure posture; call sites never declare font-variant-numeric directly. The split is by what the digits MEAN — identifiers slash the zero because 0-vs-O costs a dispatcher a phone call; money never does, because $0 was never going to be read as $O. */ --wc-numeric-figures: tabular-nums lining-nums; --wc-numeric-identifier-figures: tabular-nums slashed-zero; --wc-money-family: var(--wc-font-display); --wc-money-tracking: -0.012em; /* The atom root's weight is CONSTANT. --wc-money-cents-lane is a ch value and grid-template-columns resolves it against the container's font, so dropping the root weight for a settled or nil row narrows the lane and walks the decimal off its column on exactly the rows that matter. State changes the __whole slot only; it sits in an auto column and cannot move the decimal. */ --wc-money-weight: var(--font-bold); --wc-money-weight-settled: var(--font-medium); --wc-money-mark-size: max(12px, 0.82em); --wc-money-cents-size: max(12px, 0.8em); /* Registered above as a : this ch is measured against the root font, once, and every atom inherits the same absolute lane. */ --wc-money-cents-lane: 3ch; --wc-money-lead-size: var(--wc-type-value-size); --wc-money-lead-size-compact: var(--wc-type-value-compact-size); /* Money reads as ink; workflow state is carried by the chip. Money that is still someone's problem keeps its ink, settled money loses it. */ --wc-money-ink: var(--wc-text-strong, var(--mud-palette-text-primary)); --wc-money-ink-settled: var(--wc-text-soft, var(--mud-palette-text-secondary)); --wc-money-ink-overdue: var(--wc-tone-error-soft-fg); --wc-money-mark-ink: var(--wc-text-soft, var(--mud-palette-text-secondary)); --wc-money-cents-ink: var(--wc-text-muted, var(--mud-palette-text-secondary)); /* Spacing Scale (8px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* Elevation Levels (Shadows) - surfaces stay flat; overlays use Mud/overlay-specific elevation. */ --shadow-xs: none; --shadow-md: none; /* Radius. The --wc-* names hold the values; --border-radius-* are legacy aliases OF them, not the other way round. The direction was inverted, so the namespace the app is migrating TO was downstream of the one it is migrating FROM and could never become the single owner. Nothing about the computed values moved. Radius and spacing are theme-invariant, so they are declared here once - the light and dark scopes used to restate them identically three times over. */ --wc-radius-xs: 4px; --wc-radius-sm: 6px; --wc-radius-md: 8px; --wc-radius-lg: 12px; --wc-radius-track: var(--wc-radius-xs); --wc-radius-pill: 999px; /* Role radii. One name per role: --wc-card-radius / --wc-control-radius / --wc-panel-radius. The --wc-card-radius / -control / -panel spellings were near-duplicates of these three and are gone. */ --wc-card-radius: var(--wc-radius-md); --wc-control-radius: var(--wc-radius-md); --wc-panel-radius: var(--wc-radius-lg); --border-radius-sm: var(--wc-radius-sm); --border-radius-md: var(--wc-radius-md); --border-radius-lg: var(--wc-radius-lg); --wc-space-1: var(--space-1); --wc-space-2: var(--space-2); --wc-space-3: var(--space-3); --wc-space-4: var(--space-4); --wc-space-5: var(--space-5); --wc-space-6: var(--space-6); --wc-space-8: var(--space-8); --wc-space-sm: var(--space-2); --wc-success-rgb: 22, 101, 52; --wc-warning-rgb: 180, 83, 9; --wc-error-rgb: 185, 28, 28; --wc-info-rgb: 29, 78, 216; --wc-overlay-scrim: rgba(2, 6, 23, 0.64); /* Unified page-header system (WcPageHeader). Office + portal page titles converge on --wc-page-title-size; auth and public hero override size only. */ --wc-page-title-size: var(--wc-type-display-size); --wc-page-title-size-compact: 24px; --wc-page-title-size-hero: 40px; --wc-page-title-weight: var(--wc-type-display-weight); --wc-page-title-ink: var(--wc-text-strong); --wc-page-title-leading: var(--wc-type-display-leading); /* Motion */ --wc-motion-fast: 120ms; --wc-motion-feedback: 150ms; --wc-motion-base: 180ms; --wc-motion-state: 220ms; --wc-motion-slow: 300ms; --wc-motion-loading: 1500ms; --wc-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --wc-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* Solid, not alpha. A 50%-alpha accent composites to ~2.2:1 in light and ~1.7:1 in dark against the surfaces it lands on, which fails WCAG 2.1 SC 1.4.11 (3:1) wherever a call site applies this without also applying --wc-focus-ring. Solid accent measures 5.76:1 light; the dark scope overrides this with --wc-accent-strong for the same reason as the ring. */ --wc-focus-outline: 2px solid var(--wc-accent, #2457E6); --wc-signature-pad-inline-cap-default: 400px; --wc-signature-pad-block-size-default: 150px; --wc-signature-pad-block-size-compact: 140px; } .wc-theme { min-height: 100%; background: var(--wc-page-background, var(--mud-palette-background)); color: var(--wc-text-strong, var(--mud-palette-text-primary)); } html.wc-theme-light, .wc-theme-light { color-scheme: light; --wc-accent: #2457E6; --wc-accent-rgb: 36, 87, 230; --wc-accent-strong: #173FB6; --wc-accent-deep: #113493; /* Accent used as INK rather than as a fill. Light needs no separate value; the dark scope has to lift it, because the dark fill accent is tuned down so it does not glow and lands at 3.39:1 as text. Fills, borders, and strokes keep --wc-accent; anything that renders as a glyph takes this. */ --wc-accent-ink: var(--wc-accent); /* Hover fill for accent-filled controls. Must stay dark enough to keep --wc-on-accent above 4.5:1; --wc-accent-strong lightens in dark mode (it is a text colour there), so the hover fill needs its own token. */ --wc-accent-hover: #173FB6; /* Operational teal is owned by its rgb triple, like every other semantic family here; the Mud bridge below derives the fill from it. */ --wc-secondary-rgb: 0, 122, 111; --wc-secondary-strong: #006057; --wc-on-secondary-rgb: 252, 253, 255; --wc-success-rgb: 22, 101, 52; --wc-warning-rgb: 180, 83, 9; --wc-error-rgb: 185, 28, 28; --wc-info-rgb: 29, 78, 216; --wc-page-background: #EDF2FA; --wc-page-background-rgb: 237, 242, 250; --wc-surface-1: #FCFDFF; --wc-surface-1-rgb: 252, 253, 255; --wc-surface-2: #EEF3FA; --wc-surface-2-rgb: 238, 243, 250; --wc-surface-3: #DCE6F5; --wc-surface-3-rgb: 220, 230, 245; /* Segmented bands (the office view switcher) sit ON a card and need a field one tier away from it in whichever direction has contrast: down in light, up in dark. This is the one intentional tier crossing in the system. */ --wc-band-surface: var(--wc-surface-2); --wc-surface-brand-soft: #DDE7FF; --wc-surface-operational-soft: #D8F4EF; --wc-on-accent: #FCFDFF; --wc-on-accent-rgb: 252, 253, 255; --wc-shadow-rgb: 15, 23, 42; --wc-surface-hover: rgba(36, 87, 230, 0.10); --wc-surface-shadow-xs: none; --wc-surface-shadow-sm: none; --wc-surface-shadow-md: none; --wc-surface-shadow-lg: none; /* Structural Mud line roles mirror WorkCitaThemeTokens.Light. Keep the CSS bridge and the runtime palette on the same named contract. */ --wc-divider: rgba(var(--wc-shadow-rgb), 0.10); --wc-lines-default: var(--wc-divider); --wc-lines-inputs: rgba(var(--wc-shadow-rgb), 0.18); --wc-table-lines: rgba(var(--wc-shadow-rgb), 0.08); --wc-border-soft: rgba(var(--wc-shadow-rgb), 0.12); --wc-border-strong: rgba(var(--wc-accent-rgb), 0.28); --wc-input-border: rgba(var(--wc-shadow-rgb), 0.18); --wc-data-border: rgba(var(--wc-shadow-rgb), 0.09); --wc-data-header-bg: #E3ECF8; --wc-data-header-bg-strong: #DCE6F5; --wc-data-grid-border: rgba(var(--wc-shadow-rgb), 0.13); --wc-data-row-hover: rgba(36, 87, 230, 0.10); --wc-data-row-selected: rgba(36, 87, 230, 0.16); --wc-data-key-bg: rgba(36, 87, 230, 0.08); --wc-data-key-fg: #173FB6; --wc-data-key-border: rgba(36, 87, 230, 0.16); --wc-command-field-bg: #E3ECF8; --wc-command-field-border: rgba(36, 87, 230, 0.14); --wc-command-header-bg: #FCFDFF; --wc-command-header-bg-rgb: 252, 253, 255; --wc-command-header-fg: #0F172A; --wc-command-header-muted: #526277; --wc-command-header-soft: var(--wc-surface-brand-soft); --wc-command-header-border: rgba(15, 23, 42, 0.10); --wc-text-strong: #0F172A; --wc-text-muted: #526277; /* Soft ink is painted on four light surfaces, and the tinted ones are the binding constraint: at #64748B it measured 4.27 / 4.23 / 3.99 / 3.78:1 on surface-2, the page field, the data header, and surface-3 - under AA for 14px column headers and record labels. #556579 clears all four (5.35 / 5.30 / 5.00 / 4.73:1) and 5.59:1 on the tinted numeric cell (#F5F8FC), which is why money no longer needs its own faded slate. */ --wc-text-soft: #556579; --wc-text-primary: var(--wc-text-strong); --wc-text-secondary: var(--wc-text-muted); --wc-surface-subtle: var(--wc-surface-2); --wc-border-subtle: var(--wc-border-soft); /* Opaque: a translucent bar without blur lets page content ghost through behind the brand on scrolled detail and pay pages. */ --wc-shell-appbar-bg: rgba(var(--wc-surface-1-rgb), 1); --wc-shell-appbar-text: #0F172A; --wc-shell-appbar-muted: #64748B; --wc-shell-appbar-border: rgba(var(--wc-shadow-rgb), 0.08); --wc-shell-appbar-shadow: none; --wc-shell-appbar-action-bg: rgba(var(--wc-surface-1-rgb), 0.55); --wc-shell-appbar-action-border: rgba(var(--wc-shadow-rgb), 0.14); --wc-shell-drawer-bg: var(--wc-surface-1); --wc-shell-brand-bg: rgba(36, 87, 230, 0.11); --wc-shell-brand-fg: #173FB6; --wc-shell-brand-border: rgba(36, 87, 230, 0.16); /* Mud palette bridge. MudBlazor components read --mud-palette-* directly, so these must exist - but they are a projection of the --wc-* layer above, not a second palette. Everything with a --wc-*-rgb owner is derived from it so a token change propagates instead of silently diverging. The few left as literals (appbar, drawer text/icon, document text, disabled, grey, the manual info-lighten step) have no --wc-*-rgb owner to derive from. */ --mud-palette-background: rgba(var(--wc-page-background-rgb), 1); --mud-palette-background-rgb: var(--wc-page-background-rgb); --mud-palette-background-gray: rgba(var(--wc-surface-2-rgb), 1); --mud-palette-background-gray-rgb: var(--wc-surface-2-rgb); --mud-palette-background-grey: var(--mud-palette-background-gray); --mud-palette-surface: rgba(var(--wc-surface-1-rgb), 1); --mud-palette-surface-rgb: var(--wc-surface-1-rgb); --mud-palette-appbar-background: rgba(23, 37, 84, 1); --mud-palette-drawer-background: rgba(var(--wc-surface-2-rgb), 1); --mud-palette-drawer-text: rgba(51, 65, 85, 1); --mud-palette-drawer-icon: rgba(82, 98, 119, 1); --mud-palette-text-primary: rgba(15, 23, 42, 1); --mud-palette-text-primary-rgb: 15, 23, 42; --mud-palette-text-secondary: rgba(71, 85, 105, 1); --mud-palette-text-secondary-rgb: 71, 85, 105; --mud-palette-text-disabled: rgba(148, 163, 184, 1); --mud-palette-divider: var(--wc-divider); --mud-palette-lines-default: var(--wc-lines-default); --mud-palette-lines-inputs: var(--wc-lines-inputs); --mud-palette-table-lines: var(--wc-table-lines); --mud-palette-action-default-hover: rgba(100, 116, 139, 0.08); --mud-palette-grey-default: rgba(148, 163, 184, 1); --mud-palette-primary: rgba(var(--wc-accent-rgb), 1); --mud-palette-primary-rgb: var(--wc-accent-rgb); --mud-palette-primary-hover: rgba(var(--wc-accent-rgb), 0.08); --mud-palette-primary-text: rgba(var(--wc-on-accent-rgb), 1); --mud-palette-secondary: rgba(var(--wc-secondary-rgb), 1); --mud-palette-secondary-rgb: var(--wc-secondary-rgb); --mud-palette-secondary-text: rgba(var(--wc-on-secondary-rgb), 1); --mud-palette-info: rgba(var(--wc-info-rgb), 1); --mud-palette-info-rgb: var(--wc-info-rgb); --mud-palette-info-lighten: rgb(53, 100, 227); --mud-palette-info-text: rgba(var(--wc-on-accent-rgb), 1); --mud-palette-success: rgba(var(--wc-success-rgb), 1); --mud-palette-success-rgb: var(--wc-success-rgb); --mud-palette-success-text: rgba(var(--wc-on-accent-rgb), 1); --mud-palette-warning: rgba(var(--wc-warning-rgb), 1); --mud-palette-warning-rgb: var(--wc-warning-rgb); --mud-palette-warning-text: rgba(var(--wc-on-accent-rgb), 1); --mud-palette-error: rgba(var(--wc-error-rgb), 1); --mud-palette-error-rgb: var(--wc-error-rgb); --mud-palette-error-text: rgba(var(--wc-on-accent-rgb), 1); --wc-focus-ring: 0 0 0 3px var(--wc-accent); --wc-error-ring: 0 0 0 3px rgba(var(--wc-error-rgb), 0.12); --wc-state-disabled: var(--mud-palette-text-disabled); --wc-tone-default-soft-bg: rgba(100, 116, 139, 0.14); --wc-tone-default-soft-fg: #475569; --wc-tone-default-soft-border: rgba(100, 116, 139, 0.22); --wc-tone-primary-soft-bg: #DDE7FF; --wc-tone-primary-soft-fg: #173FB6; --wc-tone-primary-soft-border: #9FB5F5; --wc-tone-secondary-soft-bg: #D8F4EF; --wc-tone-secondary-soft-fg: #007A6F; --wc-tone-secondary-soft-border: #8FD5CC; --wc-tone-info-soft-bg: #E8F0FF; --wc-tone-info-soft-fg: #1D4ED8; --wc-tone-info-soft-border: #B2C8F7; --wc-tone-success-soft-bg: #E7F5EB; --wc-tone-success-soft-fg: #166534; --wc-tone-success-soft-border: #ACD8BC; --wc-tone-warning-soft-bg: #FFF0DA; --wc-tone-warning-soft-fg: #92400E; --wc-tone-warning-soft-border: #E8C181; --wc-tone-error-soft-bg: #FDEBEC; --wc-tone-error-soft-fg: #991B1B; --wc-tone-error-soft-border: #E9A5A8; --wc-avatar-1-bg: #4F46E5; --wc-avatar-1-fg: var(--wc-on-accent); --wc-avatar-2-bg: #007A6F; --wc-avatar-2-fg: var(--wc-on-accent); --wc-avatar-3-bg: #BE123C; --wc-avatar-3-fg: var(--wc-on-accent); --wc-avatar-4-bg: #1D4ED8; --wc-avatar-4-fg: var(--wc-on-accent); --wc-avatar-5-bg: #B45309; --wc-avatar-5-fg: var(--wc-on-accent); --wc-avatar-6-bg: #7C3AED; --wc-avatar-6-fg: var(--wc-on-accent); } html.wc-theme-dark, .wc-theme-dark { color-scheme: dark; --wc-accent: #4A63DD; --wc-accent-rgb: 74, 99, 221; --wc-accent-strong: #8798FF; --wc-accent-deep: #D4DBFF; /* See the light scope: accent-as-ink lifts to accent-strong here (6.55:1 on surface-1, 4.78:1 on the selected nav item) instead of 3.39 / 2.47:1. */ --wc-accent-ink: var(--wc-accent-strong); /* Deepens rather than brightens: --wc-accent already sits at 4.87:1 with --wc-on-accent, so there is no headroom to lighten the fill. #3B52C4 gives 6.29:1 and still reads as an engaged state. */ --wc-accent-hover: #3B52C4; --wc-secondary-rgb: 67, 191, 178; --wc-secondary-strong: #7FE0D7; --wc-on-secondary-rgb: 7, 27, 26; --wc-success-rgb: 38, 117, 83; --wc-warning-rgb: 139, 98, 30; --wc-error-rgb: 169, 76, 76; --wc-info-rgb: 47, 109, 188; --wc-page-background: #08111F; --wc-page-background-rgb: 8, 17, 31; --wc-surface-1: #101B2D; --wc-surface-1-rgb: 16, 27, 45; --wc-surface-2: #14243A; --wc-surface-2-rgb: 20, 36, 58; --wc-surface-3: #1D3150; --wc-surface-3-rgb: 29, 49, 80; --wc-band-surface: var(--wc-surface-3); --wc-surface-brand-soft: #222F66; --wc-surface-operational-soft: #164640; --wc-on-accent: #F8FAFC; --wc-on-accent-rgb: 248, 250, 252; --wc-shadow-rgb: 2, 6, 23; --wc-surface-hover: rgba(74, 99, 221, 0.14); --wc-surface-shadow-xs: none; --wc-surface-shadow-sm: none; --wc-surface-shadow-md: none; --wc-surface-shadow-lg: none; /* Structural Mud line roles mirror WorkCitaThemeTokens.Dark. */ --wc-divider: rgba(148, 163, 184, 0.18); --wc-lines-default: var(--wc-divider); --wc-lines-inputs: rgba(148, 163, 184, 0.24); --wc-table-lines: rgba(148, 163, 184, 0.16); --wc-border-soft: rgba(148, 163, 184, 0.16); --wc-border-strong: rgba(var(--wc-accent-rgb), 0.30); --wc-input-border: rgba(148, 163, 184, 0.24); --wc-data-border: rgba(148, 163, 184, 0.18); --wc-data-header-bg: rgba(var(--wc-surface-3-rgb), 0.78); --wc-data-header-bg-strong: rgba(var(--wc-surface-3-rgb), 0.96); --wc-data-grid-border: rgba(148, 163, 184, 0.26); --wc-data-row-hover: rgba(74, 99, 221, 0.14); --wc-data-row-selected: rgba(74, 99, 221, 0.22); --wc-data-key-bg: rgba(74, 99, 221, 0.18); --wc-data-key-fg: #D4DBFF; --wc-data-key-border: rgba(74, 99, 221, 0.32); --wc-command-field-bg: #14243A; --wc-command-field-border: rgba(148, 163, 184, 0.18); --wc-command-header-bg: #101B2D; --wc-command-header-bg-rgb: 16, 27, 45; --wc-command-header-fg: #E5EDF7; --wc-command-header-muted: #B5C1D3; --wc-command-header-soft: var(--wc-surface-brand-soft); --wc-command-header-border: rgba(148, 163, 184, 0.16); --wc-text-strong: #E5EDF7; --wc-text-muted: #B5C1D3; --wc-text-soft: #94A3B8; --wc-text-primary: var(--wc-text-strong); --wc-text-secondary: var(--wc-text-muted); --wc-surface-subtle: var(--wc-surface-2); --wc-border-subtle: var(--wc-border-soft); --wc-shell-appbar-bg: rgba(10, 17, 32, 1); --wc-shell-appbar-text: #E5EDF7; --wc-shell-appbar-muted: #9FB0C8; --wc-shell-appbar-border: rgba(148, 163, 184, 0.14); --wc-shell-appbar-shadow: none; --wc-shell-appbar-action-bg: rgba(148, 163, 184, 0.08); --wc-shell-appbar-action-border: rgba(159, 176, 200, 0.24); --wc-shell-drawer-bg: var(--wc-surface-1); --wc-shell-brand-bg: rgba(var(--wc-accent-rgb), 0.16); --wc-shell-brand-fg: #DBE5FF; --wc-shell-brand-border: rgba(var(--wc-accent-rgb), 0.24); /* Mud palette bridge - see the light scope for why these are derived. */ --mud-palette-background: rgba(var(--wc-page-background-rgb), 1); --mud-palette-background-rgb: var(--wc-page-background-rgb); --mud-palette-background-gray: rgba(var(--wc-surface-3-rgb), 1); --mud-palette-background-gray-rgb: var(--wc-surface-3-rgb); --mud-palette-background-grey: var(--mud-palette-background-gray); --mud-palette-surface: rgba(var(--wc-surface-1-rgb), 1); --mud-palette-surface-rgb: var(--wc-surface-1-rgb); --mud-palette-appbar-background: rgba(10, 17, 32, 1); --mud-palette-drawer-background: rgba(var(--wc-surface-2-rgb), 1); --mud-palette-drawer-text: rgba(213, 223, 236, 1); --mud-palette-drawer-icon: rgba(159, 176, 200, 1); --mud-palette-text-primary: rgba(229, 237, 247, 1); --mud-palette-text-primary-rgb: 229, 237, 247; --mud-palette-text-secondary: rgba(159, 176, 200, 1); --mud-palette-text-secondary-rgb: 159, 176, 200; --mud-palette-text-disabled: rgba(100, 116, 139, 1); --mud-palette-divider: var(--wc-divider); --mud-palette-lines-default: var(--wc-lines-default); --mud-palette-lines-inputs: var(--wc-lines-inputs); --mud-palette-table-lines: var(--wc-table-lines); --mud-palette-action-default-hover: rgba(164, 179, 200, 0.08); --mud-palette-grey-default: rgba(100, 116, 139, 1); --mud-palette-primary: rgba(var(--wc-accent-rgb), 1); --mud-palette-primary-rgb: var(--wc-accent-rgb); --mud-palette-primary-hover: rgba(var(--wc-accent-rgb), 0.14); --mud-palette-primary-text: rgba(var(--wc-on-accent-rgb), 1); --mud-palette-secondary: rgba(var(--wc-secondary-rgb), 1); --mud-palette-secondary-rgb: var(--wc-secondary-rgb); --mud-palette-secondary-text: rgba(var(--wc-on-secondary-rgb), 1); --mud-palette-info: rgba(var(--wc-info-rgb), 1); --mud-palette-info-rgb: var(--wc-info-rgb); --mud-palette-info-lighten: rgb(67, 128, 208); --mud-palette-info-text: rgba(var(--wc-on-accent-rgb), 1); --mud-palette-success: rgba(var(--wc-success-rgb), 1); --mud-palette-success-rgb: var(--wc-success-rgb); --mud-palette-success-text: rgba(var(--wc-on-accent-rgb), 1); --mud-palette-warning: rgba(var(--wc-warning-rgb), 1); --mud-palette-warning-rgb: var(--wc-warning-rgb); --mud-palette-warning-text: rgba(var(--wc-on-accent-rgb), 1); --mud-palette-error: rgba(var(--wc-error-rgb), 1); --mud-palette-error-rgb: var(--wc-error-rgb); --mud-palette-error-text: rgba(var(--wc-on-accent-rgb), 1); /* The dark fill accent is tuned down so it does not glow, which leaves it at 2.47:1 against the selected drawer item and 2.64:1 inside a soft primary chip - under SC 1.4.11. Accent-strong is the dark-mode ink accent and measures 4.78-7.17:1 on every surface a ring can land on. */ --wc-focus-ring: 0 0 0 3px var(--wc-accent-strong); --wc-focus-outline: 2px solid var(--wc-accent-strong); --wc-error-ring: 0 0 0 3px rgba(var(--wc-error-rgb), 0.20); --wc-state-disabled: var(--mud-palette-text-disabled); --wc-tone-default-soft-bg: rgba(148, 163, 184, 0.14); --wc-tone-default-soft-fg: #D5DFEC; --wc-tone-default-soft-border: rgba(148, 163, 184, 0.24); --wc-tone-primary-soft-bg: rgba(74, 99, 221, 0.24); --wc-tone-primary-soft-fg: #D4DBFF; --wc-tone-primary-soft-border: rgba(74, 99, 221, 0.36); --wc-tone-secondary-soft-bg: #164640; --wc-tone-secondary-soft-fg: #A5E9E2; --wc-tone-secondary-soft-border: rgba(67, 191, 178, 0.36); --wc-tone-info-soft-bg: rgba(47, 109, 188, 0.20); --wc-tone-info-soft-fg: #AECDFF; --wc-tone-info-soft-border: rgba(47, 109, 188, 0.32); --wc-tone-success-soft-bg: rgba(38, 117, 83, 0.20); --wc-tone-success-soft-fg: #9FE0BF; --wc-tone-success-soft-border: rgba(38, 117, 83, 0.32); --wc-tone-warning-soft-bg: rgba(139, 98, 30, 0.22); --wc-tone-warning-soft-fg: #EFC28C; --wc-tone-warning-soft-border: rgba(139, 98, 30, 0.34); --wc-tone-error-soft-bg: rgba(169, 76, 76, 0.20); --wc-tone-error-soft-fg: #F2BBBB; --wc-tone-error-soft-border: rgba(169, 76, 76, 0.32); /* Avatar initials render at 12px, so the fill/initial pair is AA text, not a 3:1 graphic. Three dark fills sat under it against --wc-on-accent (#F8FAFC): 1 at 3.63:1, 2 at 3.84:1, 6 at 4.05:1. Each is darkened along its own hue (229 / 152-153 / 258-259 stay put; only S and L move) to 4.53 / 4.52 / 4.51:1, so the six-way identity palette still reads as six distinct people. All six light fills already cleared (4.93-6.58:1). */ --wc-avatar-1-bg: #5A6DC5; --wc-avatar-1-fg: var(--wc-on-accent); --wc-avatar-2-bg: #2B825A; --wc-avatar-2-fg: var(--wc-on-accent); --wc-avatar-3-bg: #A94C4C; --wc-avatar-3-fg: var(--wc-on-accent); --wc-avatar-4-bg: #2F6DBC; --wc-avatar-4-fg: var(--wc-on-accent); --wc-avatar-5-bg: #8B621E; --wc-avatar-5-fg: var(--wc-on-accent); --wc-avatar-6-bg: #8356E7; --wc-avatar-6-fg: var(--wc-on-accent); } /* ===== WorkCita.Client/wwwroot/css/app.base.css ===== */ /* * WorkCita global stylesheet module: app.base.css * Ownership layer: base. * Ownership: html/body document defaults and page-level overflow contract. * Theme: universal --wc-* tokens only; not a separate surface theme. * Parent: GitHub #404 mechanical CSS ownership split (no visual redesign). * Load: after workcita-theme.tokens.css; before app.shell.css (index.html). */ html, body { font-family: var(--wc-font-body); height: 100%; margin: 0; padding: 0; overflow: visible; } /* * Pre-boot theme paint: js/bootstrap-theme.js stamps wc-theme-dark/-light on * before first paint so the boot screen matches the resolved theme * (stored choice, else OS prefers-color-scheme) instead of flashing light. * Both scopes paint the document element, not just the app wrapper: overscroll * and the pre-boot screen render outside the wrapper, so a light document left * unpainted falls through to browser white instead of the page field. */ html.wc-theme-dark, html.wc-theme-dark body, html.wc-theme-light, html.wc-theme-light body { background: var(--wc-page-background, var(--mud-palette-background)); color: var(--wc-text-strong, var(--mud-palette-text-primary)); } h1, h2, h3, h4, h5, h6, .mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { font-family: var(--wc-font-display); } /* * App-wide keyboard focus indicator — the floor under every interactive control. * * MudBlazor 9 zeroes the user-agent outline globally (a:focus-visible, * button:focus, .mud-button-root, .mud-list-item-clickable) and substitutes a * background tint that measures ~1.1:1, so any control this app has not * explicitly ringed shows no keyboard indicator at all: dialog Save/Cancel, * form action bars, row actions, filter controls, and every portal page. * * The specificity split is deliberate and load-bearing. The element selectors * are (0,1,1) because that is exactly what it takes to beat Mud's own * `a:focus-visible` and `button:focus` — the zero-specificity `:where(...)` * form loses to both and would be inert on the buttons that matter. The class * targets stay inside :where() at (0,1,0) so they beat `.mud-button-root` * (same weight, this module loads later) without out-ranking anything of ours. * Every zone that owns a ring instead of an outline carries at least one class * AND lives in a later bundle module, so the ~26 `outline: none; * box-shadow: var(--wc-focus-ring)` zones keep winning: one indicator, never * a ring and an outline together. * * The outline resolves to solid accent, never an alpha wash: 4.66:1 at its * worst light surface (--wc-surface-3) and 4.01:1 at its worst dark surface * (--wc-surface-operational-soft), against the 3:1 SC 1.4.11 asks for. */ a:focus-visible, button:focus-visible, summary:focus-visible, :where([role="button"], .mud-button-root, .mud-icon-button):focus-visible { outline: var(--wc-focus-outline); outline-offset: 2px; } /* * Focus modality (js/utils.js). Scripts move focus for assistive technology, and browsers paint * :focus-visible for it on page load and after pointer-driven navigation, so mouse and touch * users saw rings they never asked for. While no * indicator paints except on text entry; pressing a key switches to "keyboard" and every * indicator returns. !important because several ring zones are more specific than any * general selector, and this only ever applies to a focused element in pointer mode. */ html[data-wc-input-modality="pointer"] :focus-visible:not(input, textarea, select, [contenteditable="true"]) { outline: none !important; box-shadow: none !important; } /* Headings focused for screen readers are not controls, so they never draw an indicator. */ :is(h1, h2, h3, h4, h5, h6)[tabindex="-1"]:not([role]):focus { outline: none; box-shadow: none; } /* * Global motion-safety contract. * Honors prefers-reduced-motion app-wide by collapsing motion tokens and * neutralizing any transition/animation across every module, so motion safety * is systemic rather than per-feature. */ @media (prefers-reduced-motion: reduce) { :root { --wc-motion-fast: 1ms; --wc-motion-feedback: 1ms; --wc-motion-base: 1ms; --wc-motion-state: 1ms; --wc-motion-slow: 1ms; --wc-motion-loading: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } .wc-motion-state-change.is-changing, .skeleton-shimmer, .mud-skeleton-pulse, .mud-skeleton-wave, .block-calendar--slide-forward, .block-calendar--slide-backward { animation: none !important; transform: none !important; } /* * Busy indicators are the exception to the blanket collapse above. * Rotation is the motion a reduced-motion user asked us to remove; the * "still working" signal is not. Left alone, animation-iteration-count: 1 * freezes every indeterminate MudBlazor spinner mid-arc after one cycle, * including the WASM boot spinner, so a slow load is indistinguishable * from a hang. Stop the spin, keep a slow opacity pulse well under the * three-flashes-per-second threshold. */ .mud-progress-circular.mud-progress-indeterminate, .mud-progress-circular-indeterminate-child, .mud-progress-circular-circle.mud-progress-indeterminate, .mud-progress-linear .mud-progress-linear-bar, .mud-progress-linear .mud-progress-linear-dashed { animation: none !important; transform: none !important; } .mud-progress-circular.mud-progress-indeterminate, .mud-progress-linear.mud-progress-indeterminate { animation: wc-busy-pulse 2s ease-in-out infinite !important; animation-duration: 2s !important; animation-iteration-count: infinite !important; } /* An indeterminate linear bar has no width once its keyframes stop, so give it a full track to pulse. */ .mud-progress-linear.mud-progress-indeterminate.horizontal .mud-progress-linear-bar { width: 100% !important; } .mud-progress-linear.mud-progress-indeterminate.vertical .mud-progress-linear-bar { height: 100% !important; } /* A circular indeterminate arc keeps its dash gap so the ring still reads as partial progress rather than a completed circle. */ .mud-progress-circular-circle.mud-progress-indeterminate { stroke-dasharray: 80px, 200px; stroke-dashoffset: 0px; } } @keyframes wc-busy-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* ===== WorkCita.Client/wwwroot/css/app.shell.css ===== */ /* * WorkCita global stylesheet module: app.shell.css * Ownership layer: shell core. * Ownership: Mud layout scroll contract, public shell layout modes, appbar, * user menu, snackbar, and global feedback chrome. * Theme: universal --wc-* tokens only; not a separate surface theme. * Parent: GitHub #404 mechanical CSS ownership split (no visual redesign). * Load: after app.base.css; before app.shell.navigation.css (index.html). */ /* MudLayout scroll container - ensures content scrolls within layout, not the body */ .mud-layout { height: 100vh; max-height: 100vh; display: flex; flex-direction: column; overflow: hidden; } @supports (height: 100dvh) { .mud-layout { height: 100dvh; max-height: 100dvh; } } .mud-main-content { flex: 1 1 auto; overflow-y: auto; min-height: 0; /* Critical: allows flex child to shrink below content size */ -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */ } /* Office shell content padding changes should not be treated as route-enter motion. */ .wc-shell-layout--office .mud-main-content { transition-property: none !important; } /* Ensure MudBlazor fixed appbar stays fixed on mobile */ .mud-appbar.mud-appbar-fixed-top { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1100 !important; padding-top: env(safe-area-inset-top, 0px); } .auth-degraded-banner, .shell-offline-banner { /* Docks as a full-width status strip at the top of the authenticated content region, directly beneath the fixed app bar (rendered as the first child of MudMainContent in each authenticated shell). It previously sat outside the shell as position:sticky;top:0;z-index:1301, which overlapped the fixed app bar layer and put its Retry action on top of the app-bar avatar. As a docked strip it reads as its own layer: square edges, a 2px bottom divider, and no elevation competing with the bar above it. */ margin: 0 !important; border-width: 0 0 2px !important; border-bottom-color: var(--wc-tone-warning-soft-border) !important; border-radius: 0 !important; box-shadow: none !important; } .auth-degraded-banner-content { flex-wrap: wrap; } /* Auth entry pages lay main content out as a flex row (app.auth.css). The auth layout renders the offline strip and the PWA update strip as siblings ahead of the auth stage, so either one present must stack above the stage at full width rather than sitting beside it as a squashed full-height column; scoping through :has keeps the normal single-child auth layout untouched. */ .wc-shell-main-content--auth:has(> .shell-offline-banner), .wc-shell-main-content--auth:has(> .shell-update-banner) { flex-wrap: wrap; } .wc-shell-main-content--auth > .shell-offline-banner, .wc-shell-main-content--auth > .shell-update-banner { flex: 1 0 100%; align-self: flex-start; } /* Snackbar / toast surface: align MudBlazor's default toast to WorkCita's flat, token-driven surface system (softer radius, restrained functional elevation, WorkCita surface + structural border) instead of the Material default (4px radius, heavy three-layer shadow). Position is set to bottom-center in ClientStartupComposition so transient toasts no longer pile onto the top strip shared by the app bar and the docked status band. */ .mud-snackbar.mud-snackbar-surface { background: var(--wc-surface-1) !important; border: 1px solid var(--wc-border-soft); border-radius: var(--wc-card-radius, 8px); box-shadow: 0 6px 20px rgba(var(--wc-shadow-rgb), 0.16); max-width: 460px; } /* Keep bottom-anchored toasts clear of the mobile bottom navigation bar. */ @media (max-width: 959.98px) { .mud-snackbar-location-bottom-center, .mud-snackbar-location-bottom-left, .mud-snackbar-location-bottom-right { bottom: calc(var(--wc-mobile-bottom-nav-reserved-space, 84px) + 16px) !important; } body:has(.job-detail-shell--mobile-fab .mobile-fab-bar) .mud-snackbar-location-bottom-center, body:has(.job-detail-shell--mobile-fab .mobile-fab-bar) .mud-snackbar-location-bottom-left, body:has(.job-detail-shell--mobile-fab .mobile-fab-bar) .mud-snackbar-location-bottom-right { bottom: calc(var(--wc-mobile-bottom-nav-reserved-space, 84px) + var(--wc-job-detail-fab-clearance, 88px) + 16px) !important; } body:has(.form-action-bar, .document-editor-page .office-form-shell-action-bar) .mud-snackbar-location-bottom-center, body:has(.form-action-bar, .document-editor-page .office-form-shell-action-bar) .mud-snackbar-location-bottom-left, body:has(.form-action-bar, .document-editor-page .office-form-shell-action-bar) .mud-snackbar-location-bottom-right { --wc-mobile-form-action-bar-reserved-space: 128px; bottom: calc(var(--wc-mobile-bottom-nav-reserved-space, 84px) + var(--wc-mobile-form-action-bar-reserved-space) + 16px) !important; } } .subscription-status-chip { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 34px; max-width: min(280px, 38vw); padding: 0 10px !important; border-radius: var(--wc-radius-pill) !important; border: 1px solid var(--wc-shell-appbar-action-border); background: var(--wc-shell-appbar-action-bg) !important; color: var(--wc-shell-appbar-text) !important; font-size: var(--wc-type-body-compact-size); font-weight: 600; line-height: 1; white-space: nowrap; text-transform: none !important; } .subscription-status-chip--static { cursor: default; } .subscription-status-chip.mud-button-root { min-height: 44px; } .subscription-status-chip .mud-button-label { display: inline-flex; align-items: center; gap: 3px; min-width: 0; text-transform: none !important; } .subscription-status-chip .mud-icon-root { flex: 0 0 auto; opacity: 0.78; } .subscription-status-chip__label { color: var(--wc-shell-appbar-muted); } .subscription-status-chip__value, .subscription-status-chip__action { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .subscription-status-chip__value--compact { display: none; } .subscription-status-chip__action { color: var(--wc-accent-ink, var(--mud-palette-primary)); } .subscription-status-chip__separator { flex: 0 0 auto; color: var(--wc-shell-appbar-muted); } .subscription-status-chip__separator--action { margin-inline: 2px; } @media (max-width: 599.98px) { .subscription-status-chip { max-width: 112px; min-height: 32px; padding-inline: 8px !important; gap: 4px; font-size: var(--wc-type-caption-size); } .subscription-status-chip__label, .subscription-status-chip__value--wide, .subscription-status-chip__separator, .subscription-status-chip__action { display: none; } .subscription-status-chip__value--compact { display: inline; } } .provider-readiness-chips { flex-wrap: wrap; } .provider-readiness-panel { display: grid; gap: var(--wc-space-2, 8px); width: 100%; } .provider-readiness-panel__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--wc-space-2, 8px) var(--wc-space-3, 12px); align-items: start; padding: var(--wc-space-3, 12px); border: 1px solid var(--wc-border-soft); border-radius: var(--wc-radius-md, 8px); background: var(--wc-surface-1); } .provider-readiness-panel__main { display: inline-flex; min-width: 0; align-items: flex-start; gap: var(--wc-space-2, 8px); } .provider-readiness-panel__copy, .provider-readiness-panel__detail { min-width: 0; } .provider-readiness-panel__provider { overflow-wrap: anywhere; } .provider-readiness-panel__detail { grid-column: 1 / -1; display: grid; gap: 2px; } @media (min-width: 720px) { .provider-readiness-panel__row { grid-template-columns: minmax(160px, 0.8fr) auto minmax(220px, 1.2fr); align-items: center; } /* A row with nothing to explain renders no detail column; without this the reserved third column strands the state chip in the middle of the row. */ .provider-readiness-panel__row:not(:has(.provider-readiness-panel__detail)) { grid-template-columns: minmax(0, 1fr) auto; } .provider-readiness-panel__detail { grid-column: auto; } } .wc-notification-menu-card { display: flex; flex-direction: column; width: min(360px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); max-width: 360px; max-height: min(calc(100dvh - 88px), 420px); padding: 0; overflow: hidden; border: 1px solid var(--wc-border-soft); border-radius: var(--wc-radius-lg, 12px); background: var(--wc-surface-1); /* True overlay, so it is the documented exception to the Flat Task Surface rule and carries real elevation. It is declared literally rather than through --wc-surface-shadow-md because every --wc-surface-shadow-* token is deliberately `none` - those own resting surfaces, not floating ones. */ box-shadow: 0 10px 26px rgba(var(--wc-shadow-rgb), 0.075); } .wc-notification-menu-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wc-space-3, 12px); padding: var(--wc-space-4, 16px) var(--wc-space-4, 16px) var(--wc-space-3, 12px); border-bottom: 1px solid var(--wc-border-soft); margin-bottom: 0; } .wc-notification-menu-header__copy { min-width: 0; } .wc-notification-menu-title { color: var(--wc-text-strong, var(--wc-shell-appbar-text)); font-weight: 700; line-height: 1.25; } .wc-notification-menu-summary { display: block; margin-top: 2px; } .wc-notification-menu-header__actions { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 2px; } .wc-notification-menu-icon-action.mud-icon-button { min-width: 44px; min-height: 44px; } .wc-notification-menu-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--wc-space-2, 8px); } .wc-notification-loading, .wc-notification-menu-state { padding: var(--wc-space-4, 16px) var(--wc-space-2, 8px); } .wc-notification-menu-empty { display: flex; flex-direction: column; align-items: center; gap: var(--wc-space-2, 8px); padding: var(--wc-space-6, 24px) var(--wc-space-4, 16px); text-align: center; } .wc-notification-menu-empty__title { font-weight: 700; } .wc-notification-menu-list { display: flex; flex-direction: column; gap: 2px; } .wc-notification-menu-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: var(--wc-radius-md, 8px); color: var(--wc-text-strong, inherit); transition: background-color var(--wc-motion-feedback, 160ms) var(--wc-ease-out-quart, ease-out), box-shadow var(--wc-motion-feedback, 160ms) var(--wc-ease-out-quart, ease-out); } .wc-notification-menu-item:hover, .wc-notification-menu-item:focus-visible { background: var(--wc-surface-hover, var(--wc-surface-2)); outline: none; box-shadow: var(--wc-focus-ring); } .wc-notification-menu-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--wc-radius-sm, 6px); flex-shrink: 0; } .wc-notification-menu-item__label { min-width: 0; font-size: var(--wc-type-body-size); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } .wc-notification-menu-item__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 6px; border-radius: var(--wc-radius-pill); font-size: var(--wc-type-caption-size); font-weight: 700; line-height: 1; flex-shrink: 0; } .wc-notification-menu-item__chevron { opacity: 0.55; flex-shrink: 0; } .wc-notification-menu-item--error .wc-notification-menu-item__icon { background: var(--wc-tone-error-soft-bg); color: var(--wc-tone-error-soft-fg); } .wc-notification-menu-item--error .wc-notification-menu-item__count { background: var(--wc-tone-error-soft-bg); color: var(--wc-tone-error-soft-fg); } .wc-notification-menu-item--warning .wc-notification-menu-item__icon { background: var(--wc-tone-warning-soft-bg); color: var(--wc-tone-warning-soft-fg); } .wc-notification-menu-item--warning .wc-notification-menu-item__count { background: var(--wc-tone-warning-soft-bg); color: var(--wc-tone-warning-soft-fg); } .wc-notification-menu-item--accent .wc-notification-menu-item__icon { background: var(--wc-tone-primary-soft-bg); color: var(--wc-tone-primary-soft-fg); } .wc-notification-menu-item--accent .wc-notification-menu-item__count { background: var(--wc-tone-primary-soft-bg); color: var(--wc-tone-primary-soft-fg); } .wc-notification-menu-footer { padding: var(--wc-space-2, 8px) var(--wc-space-4, 16px) var(--wc-space-4, 16px); border-top: 1px solid var(--wc-border-soft); } .wc-notification-menu-footer-action.mud-button-root { min-height: 44px; } @media (min-width: 960px) { .wc-notification-menu-card { width: 360px; } } .mud-popover:has(.wc-notification-menu-card) { max-width: calc(100vw - 12px); } /* The dvh pair is not decoration here: this element also carries .mud-layout, whose height/max-height the @supports block above already switches to 100dvh. min-height is resolved last, so a bare 100vh floor silently re-inflates the layout to the URL-bar-expanded viewport and puts the bottom ~60-115px of a phone page out of reach until the bar retracts. The unprefixed declaration stays first as the fallback for engines without dvh. */ .wc-shell-layout { min-height: 100vh; min-height: 100dvh; background: var(--wc-page-background); } .wc-shell-appbar { background: var(--wc-shell-appbar-bg) !important; color: var(--wc-shell-appbar-text) !important; border-bottom: 1px solid var(--wc-shell-appbar-border); box-shadow: var(--wc-shell-appbar-shadow); } .user-menu-profile-summary { padding: var(--wc-space-2, 8px); } @media (min-width: 960px) { .user-menu-profile-summary { padding: var(--wc-space-3, 12px); } } /* Theme toggle row inside the avatar menu: aligned with menu-item padding. */ .user-menu-theme-toggle { display: flex; align-items: center; padding: var(--wc-space-1, 4px) var(--wc-space-4, 16px); } .user-menu-theme-toggle .mud-switch { margin-inline-end: 0; } .user-menu-theme-toggle .mud-switch .mud-typography { white-space: nowrap; } .wc-shell-appbar .mud-toolbar { color: inherit; overflow: visible; padding-inline-end: max(var(--wc-space-3, 12px), env(safe-area-inset-right, 0px)); } .wc-shell-appbar .mud-button-root, .wc-shell-appbar .mud-link, .wc-shell-appbar .mud-icon-button { color: inherit !important; } .wc-shell-appbar-actions { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 2px; min-width: 0; margin-inline-start: var(--wc-space-2, 8px); } .wc-shell-appbar-action { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 44px; min-height: 44px; overflow: visible; border-radius: var(--wc-radius-md, 8px); } .wc-shell-appbar-action .mud-icon-button { margin: 0 !important; } .wc-shell-appbar-action:focus-within, .wc-shell-user-menu-trigger:focus-visible { outline: var(--wc-focus-outline); outline-offset: 2px; box-shadow: var(--wc-focus-ring); } .wc-shell-notification-action .mud-badge-root, .wc-shell-notification-badge { overflow: visible; } .wc-shell-mobile-search-action .mud-icon-button { margin: 0 !important; } .wc-shell-mobile-search-panel { width: min(calc(100vw - 32px), 360px); padding: var(--wc-space-2, 8px); } .wc-shell-global-search-wrap--mobile, .wc-shell-global-search-wrap--mobile .wc-shell-global-search { width: 100%; max-width: 100%; margin-right: 0; } .wc-shell-notification-action .wc-shell-notification-badge .mud-badge-wrapper .mud-badge, .wc-shell-notification-action .mud-badge-content { inset: 5px 5px auto auto; min-width: 1.125rem; height: 1.125rem; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--wc-type-meta-size); font-weight: 700; line-height: 1; border: 2px solid var(--wc-shell-appbar-bg); box-sizing: border-box; } .wc-shell-user-menu-trigger { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--wc-radius-md, 8px); background: transparent; color: inherit; cursor: pointer; } .wc-shell-user-menu-trigger:hover { background: var(--wc-shell-appbar-action-bg); } .mud-menu.wc-shell-user-menu > .mud-menu-button-activator { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; background: var(--wc-shell-appbar-action-bg) !important; color: var(--wc-shell-appbar-text) !important; border: 1px solid var(--wc-shell-appbar-action-border); border-radius: 50%; font-size: var(--wc-type-caption-size); font-weight: 700; letter-spacing: 0.02em; } @media (min-width: 600px) { .wc-shell-appbar-actions { gap: var(--wc-space-1, 4px); } .wc-shell-appbar .mud-toolbar { padding-inline-end: max(var(--wc-space-4, 16px), env(safe-area-inset-right, 0px)); } } @media (min-width: 960px) { .wc-shell-appbar-actions { gap: var(--wc-space-2, 8px); margin-inline-start: var(--wc-space-3, 12px); } } .wc-shell-brand-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } .wc-shell-brand-stack { min-width: 0; } .wc-shell-brand-text { white-space: nowrap; } .wc-shell-public-nav { min-width: 0; } .wc-shell-public-nav-link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px; border-radius: var(--wc-radius-pill); font-weight: 700; white-space: nowrap; } .wc-shell-public-nav-link:hover, .wc-shell-public-nav-link:focus-visible, .wc-shell-public-nav-link[aria-current="page"] { background: var(--wc-shell-appbar-action-bg); } /* App-bar controls carry the same visible focus ring as the rest of the app. A background tint alone is not an indicator (SC 2.4.7), and the brand link had nothing at all. The offset is 2px, not the in-page 3px: these controls sit against the viewport edge in the app bar, where a wider ring would clip. */ .wc-shell-brand-link:focus-visible, .wc-shell-public-nav-link:focus-visible { outline: var(--wc-focus-outline); outline-offset: 2px; } .wc-shell-status-region { display: contents; } /* ===== WorkCita.Client/wwwroot/css/app.shell.navigation.css ===== */ /* * WorkCita global stylesheet module: app.shell.navigation.css * Ownership: drawer, tenant identity, desktop navigation, and mobile navigation. * Theme: universal --wc-* tokens only. * Load: after app.shell.css; before app.shell.support.css. */ .wc-shell-drawer { border-right: 1px solid var(--wc-border-soft); } .wc-shell-drawer .mud-drawer-content { background: var(--wc-shell-drawer-bg); } /* NOTE: a `.wc-shell-drawer--temporary { width: min(304px, 100vw - 48px) }` rule used to live here. It never applied — MudBlazor's own `.mud-drawer.mud-drawer-temporary.mud-drawer-pos-left` (three classes) sets the width from --mud-drawer-width-left, so the theme's 260px is and always was the real mobile drawer width. The 100vw-48px clamp only bit below a 308px viewport, under the supported floor. Removed rather than promoted: widening the mobile drawer to 304px would be a visual change, not a fix. */ .wc-shell-drawer.mud-drawer-temporary.mud-drawer-pos-left.mud-drawer--closed { left: calc(var(--mud-drawer-width-left, 260px) * -1) !important; } .wc-shell-drawer--temporary .mud-drawer-content { width: 100%; } /* Tablet rail (Sm, 600-959px): collapsed, only the icons show; the section labels, tenant name, and close chevron would be clipped to fragments at the mini width, so they wait for the expanded state. MudBlazor already hides the link labels. */ .wc-shell-drawer--rail.mud-drawer--closed .wc-nav-section, .wc-shell-drawer--rail.mud-drawer--closed .wc-shell-drawer-identity, .wc-shell-drawer--rail.mud-drawer--closed .wc-shell-drawer-close { display: none; } .wc-shell-drawer--rail.mud-drawer--closed .wc-shell-drawer-header { justify-content: center; } /* Temporary shell drawer motion (Impeccable product register): animate menu open only. Slide-out on nav dismiss stays instant so main content is not read as a route enter. */ @keyframes wc-drawer-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } } .wc-shell-drawer.mud-drawer-temporary.mud-drawer-pos-left.mud-drawer--open:not(.mud-drawer--initial) { animation: wc-drawer-slide-in-left var(--wc-motion-base) var(--wc-ease-out-quint) forwards; } .wc-shell-drawer.mud-drawer-temporary.mud-drawer-pos-left.mud-drawer--closed:not(.mud-drawer--initial) { animation: none !important; transition: none !important; } .wc-shell-brand-avatar { background: var(--wc-shell-brand-bg) !important; color: var(--wc-shell-brand-fg) !important; border: 1px solid var(--wc-shell-brand-border); box-shadow: none; } /* Brand chip: kept compact (34px) so it anchors the header without dominating it. */ .wc-shell-brand-avatar { width: 34px !important; height: 34px !important; } /* Company monogram: a solid accent chip so the tenant identity reads as identity, not a tint. */ .wc-shell-brand-avatar--monogram { background: var(--wc-accent, var(--mud-palette-primary)) !important; color: var(--wc-on-accent, var(--mud-palette-primary-text)) !important; border: none !important; font-size: var(--wc-type-body-compact-size); font-weight: 700; letter-spacing: 0.01em; } /* Drawer header: close affordance sits at the left edge (under the app-bar menu button it replaces, so the open/close control does not jump sides), then brand avatar + tenant identity. */ .wc-shell-drawer-header { width: 100%; } .wc-shell-drawer-header .wc-shell-drawer-identity { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wc-shell-auth-button { min-height: 44px; padding: 8px 18px; border-radius: var(--wc-radius-pill); background: var(--wc-shell-appbar-action-bg); border-color: var(--wc-shell-appbar-action-border) !important; } /* MudBlazor gives an outlined button no focus-visible treatment of its own, so the app-bar Sign in control focused identically to how it rested. Same ring and the same 2px app-bar offset as the sibling nav controls in app.shell.css. */ .wc-shell-auth-button:focus-visible { outline: var(--wc-focus-outline); outline-offset: 2px; } .wc-shell-auth-button-label--mobile { display: none; } .page-breadcrumbs { padding: 0 !important; margin-bottom: 0 !important; font-size: var(--wc-type-body-size); } .page-breadcrumbs .mud-breadcrumb-item, .page-breadcrumbs .mud-breadcrumb-separator, .page-breadcrumbs .mud-disabled { color: var(--wc-text-muted, var(--mud-palette-text-secondary)) !important; opacity: 1; } .page-breadcrumbs a { color: var(--wc-text-primary, var(--mud-palette-text-primary)) !important; } @media (max-width: 440px) { .wc-shell-appbar--welcome .mud-toolbar { gap: 0.5rem; } .wc-shell-appbar--welcome .wc-shell-brand-text { display: none; } .wc-shell-appbar--welcome .wc-shell-public-nav { gap: 0.25rem; } .wc-shell-appbar--welcome .wc-shell-public-nav-link { padding-inline: 8px; font-size: var(--wc-type-body-compact-size); } .wc-shell-appbar--welcome .wc-shell-auth-button { min-width: 0; min-height: 44px; padding: 6px 14px; font-size: var(--wc-type-caption-size); white-space: nowrap; } .wc-shell-appbar--welcome .wc-shell-auth-button-label--desktop { display: none; } .wc-shell-appbar--welcome .wc-shell-auth-button-label--mobile { display: inline; } } .wc-shell-footer { flex: 0 0 auto; background: var(--wc-surface-1); border-top: 1px solid var(--wc-border-soft); } .wc-shell-footer-container { padding-top: var(--wc-space-4, 16px); padding-bottom: var(--wc-space-4, 16px); } .wc-shell-footer-container--auth { padding-top: var(--wc-space-2, 8px); padding-bottom: var(--wc-space-2, 8px); } .wc-shell-footer-links { flex-wrap: wrap; } /* The 44px height carries the tap target. A 44px min-width centred short words ("Terms") in extra space, so the gaps around the separators came out uneven. */ .wc-shell-footer-links .mud-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: var(--wc-space-1, 4px); } .wc-shell-layout--public:not(.wc-shell-layout--auth):not(.wc-shell-layout--public-capability) { overflow-y: auto; } .wc-shell-layout--public:not(.wc-shell-layout--auth):not(.wc-shell-layout--public-capability) .wc-shell-main-content { flex: 0 0 auto; overflow: visible; } /* The whole page scrolls and the footer follows the content at every width; on a short page the content grows into the viewport so the footer still meets the bottom edge. */ .wc-shell-layout--public-capability { overflow-x: hidden; overflow-y: auto; } .wc-shell-layout--public-capability .wc-shell-main-content--public-capability { flex: 1 0 auto; padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)); } .wc-shell-footer--public-capability { flex: 0 0 auto; } .wc-shell-footer--public-capability .wc-shell-footer-container { padding-top: 0.75rem !important; padding-bottom: 0.85rem !important; } /* Mobile bottom navigation bar */ :root { --wc-mobile-bottom-nav-height: 84px; --wc-mobile-bottom-nav-reserved-space: calc(var(--wc-mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px)); } /* The tab bar is for phones only; from 600px the side rail navigates, so nothing reserves room. */ @media (min-width: 600px) { :root { --wc-mobile-bottom-nav-height: 0px; --wc-mobile-bottom-nav-reserved-space: 0px; } } @media (max-width: 959.98px) { .wc-shell-layout--office .mud-main-content { margin-bottom: var(--wc-mobile-bottom-nav-reserved-space); scroll-padding-bottom: var(--wc-mobile-bottom-nav-reserved-space); } } .mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; box-sizing: border-box; height: var(--wc-mobile-bottom-nav-reserved-space); min-height: var(--wc-mobile-bottom-nav-height); background: var(--wc-surface-1, var(--mud-palette-surface)); border-top: 1px solid var(--wc-border-soft); padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)); } .mobile-bottom-nav-content { box-sizing: border-box; display: flex; justify-content: space-around; align-items: center; height: 100%; padding: 8px 0; } .mobile-bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; padding: 4px; color: var(--wc-text-muted, var(--mud-palette-text-secondary)); text-decoration: none; min-height: 44px; justify-content: center; position: relative; transition: color var(--wc-motion-feedback) var(--wc-ease-out-quart); } /* The More item is a native button; strip default chrome so it matches the link items. */ button.mobile-bottom-nav-item { appearance: none; -webkit-appearance: none; background: transparent; border: 0; font: inherit; cursor: pointer; } .mobile-bottom-nav-item::after { content: ""; position: absolute; top: 2px; width: 24px; height: 3px; border-radius: var(--wc-radius-pill); background: var(--wc-accent, var(--mud-palette-primary)); opacity: 0; transition: opacity var(--wc-motion-feedback) var(--wc-ease-out-quart); } @media (hover: hover) { .mobile-bottom-nav-item:hover { color: var(--wc-text-strong, var(--mud-palette-text-primary)); } } .mobile-bottom-nav-item.active { color: var(--wc-accent-ink, var(--mud-palette-primary)); background: var(--wc-surface-brand-soft); border-radius: var(--wc-control-radius, var(--border-radius-md)); } .mobile-bottom-nav-item.active::after { opacity: 1; } .mobile-bottom-nav-item:focus-visible { outline: var(--wc-focus-outline); outline-offset: -2px; border-radius: var(--wc-radius-md, 8px); } .mobile-bottom-nav-label { font-size: var(--wc-type-caption-size); font-weight: 500; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* More item: aggregate operational-alert badge over the icon. */ .mobile-bottom-nav-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } .mobile-bottom-nav-badge { position: absolute; bottom: calc(100% - 8px); left: calc(100% - 8px); box-sizing: border-box; min-width: 1rem; height: 1rem; padding: 0 0.25rem; border-radius: var(--wc-radius-pill); background: rgba(var(--wc-info-rgb), 1); color: var(--wc-on-accent, var(--mud-palette-info-text)); font-size: var(--wc-type-meta-size); font-weight: 700; line-height: 1rem; text-align: center; pointer-events: none; } .mobile-bottom-nav-badge--critical { background: rgba(var(--wc-warning-rgb), 1); color: var(--wc-on-accent, var(--mud-palette-warning-text)); } /* Shared mobile action surface contract. Bottom nav, FABs, and bottom sheets keep feature-specific geometry, but share safe-area and target-size defaults. */ .wc-mobile-action-surface { --wc-mobile-action-safe-bottom: env(safe-area-inset-bottom, 0px); --wc-mobile-action-min-target: 44px; --wc-mobile-action-gap: var(--wc-space-2, 8px); } .wc-mobile-action-surface :is(button, a, .mud-button-root, .mud-icon-button) { min-width: var(--wc-mobile-action-min-target); min-height: var(--wc-mobile-action-min-target); } .wc-mobile-action-surface--sheet { padding-bottom: max(var(--wc-space-4, 16px), var(--wc-mobile-action-safe-bottom)); } /* Dark-mode tertiary actions: the base dark accent is tuned down so fills don't glow, which leaves a primary text button near 3:1 on dark surfaces. --wc-accent-ink is the accent-as-text owner; .mud-*-text typography and links are handled once in app.shared-controls.css. */ .wc-theme-dark .mud-button-root.mud-button-text.mud-button-text-primary { color: var(--wc-accent-ink); } /* ===== WorkCita.Client/wwwroot/css/app.shell.support.css ===== */ /* * WorkCita global stylesheet module: app.shell.support.css * Ownership: skip links, shell content helpers, subscription chrome, and global search. * Theme: universal --wc-* tokens only. * Load: after app.shell.navigation.css; before app.mudblazor.css. */ /* Skip to main content link - visually hidden but accessible for screen readers */ .skip-to-main-content { position: absolute; left: -9999px; z-index: 999; padding: 0.5rem 1rem; background-color: var(--wc-accent, var(--mud-palette-primary)); color: var(--wc-on-accent, var(--mud-palette-primary-text)); text-decoration: none; } .skip-to-main-content:focus { left: 0; top: 0; } /* Unstyled links for clickable cards/rows (preserve surrounding typography/layout) */ .wc-link-unstyled, .wc-link-unstyled:hover, .wc-link-unstyled:focus, .wc-link-unstyled:active { color: inherit; text-decoration: none; } .content { padding-top: 1.1rem; } #blazor-error-ui { background: var(--wc-tone-warning-soft-bg, var(--wc-surface-2)); border-top: 1px solid var(--wc-tone-warning-soft-border, var(--wc-border-soft)); bottom: 0; box-shadow: 0 -1px 2px rgba(var(--wc-shadow-rgb), 0.2); color: var(--wc-tone-warning-soft-fg, var(--wc-text-strong)); display: none; left: 0; padding: 0.6rem 3.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui #blazor-error-message { margin: 0; display: inline; font-family: var(--wc-font-display); } #blazor-error-ui .dismiss, #blazor-error-ui button.dismiss { align-items: center; appearance: none; background: var(--wc-surface-1); border: 1px solid var(--wc-border-soft); border-radius: var(--border-radius-md); color: var(--wc-text-strong); cursor: pointer; display: inline-flex; font: inherit; font-size: var(--wc-type-title-size); justify-content: center; line-height: 1; min-height: 44px; min-width: 44px; padding: 0; position: absolute; right: 0.5rem; text-decoration: none; top: 50%; transform: translateY(-50%); } #blazor-error-ui .dismiss:hover, #blazor-error-ui button.dismiss:hover { background: var(--wc-surface-hover, var(--wc-surface-2)); border-color: var(--wc-tone-warning-soft-border); } #blazor-error-ui .dismiss:focus-visible, #blazor-error-ui button.dismiss:focus-visible { outline: var(--wc-focus-outline); outline-offset: 2px; box-shadow: var(--wc-focus-ring); } /* Touch-first devices get the 44px reload target at any width; see app.shared-controls.css. */ @media (max-width: 959.98px), (pointer: coarse) { #blazor-error-ui #blazor-error-reload { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; } } .blazor-error-boundary { background: rgba(var(--wc-error-rgb), 1) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem; padding: 1rem 1rem 1rem 3.7rem; color: var(--wc-on-accent, var(--mud-palette-error-text)); } .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: var(--wc-border-soft, var(--mud-palette-lines-default)); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--wc-accent, var(--mud-palette-primary)); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray var(--wc-motion-fast) var(--wc-ease-out-quart); } .loading-progress-text { position: absolute; text-align: center; font-family: var(--wc-font-display); font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } .app-loading-container { min-height: 100vh; min-height: 100dvh; } .company-selector-option { width: 100%; } .invoice-payment-installment-row { border: 1px solid var(--wc-border-subtle, var(--mud-palette-lines-default)); border-radius: var(--wc-radius-sm, 6px); background: var(--wc-surface-1, var(--mud-palette-surface)); padding: var(--wc-space-3, 12px); } .invoice-payment-installment-action { margin-top: 4px; } .photo-markup-dialog { max-width: 95vw; } .photo-markup-toolbar { align-items: center; flex-wrap: wrap; margin-bottom: var(--wc-space-3, 12px); } .photo-markup-canvas-shell { width: min(100%, 800px); max-height: min(70vh, 600px); overflow: hidden; margin-inline: auto; border: 1px solid var(--wc-border-subtle, var(--mud-palette-lines-default)); background: var(--wc-surface-1, var(--mud-palette-surface)); } .photo-markup-canvas-shell .canvas-container, .photo-markup-canvas-shell .lower-canvas, .photo-markup-canvas-shell .upper-canvas, .photo-markup-canvas { display: block; max-width: 100%; margin-inline: auto; touch-action: none; } /* App-bar global record search (G8): keep the lookup compact in the shell. */ .wc-shell-global-search { width: 320px; max-width: 34vw; margin-right: 8px; } .wc-shell-global-search .mud-input-control-input-container .mud-input { background: var(--wc-surface-1, var(--mud-palette-surface)); } /* Anchor for the keyboard-shortcut hint overlayed on the search box. */ .wc-shell-global-search-wrap { position: relative; display: inline-flex; align-items: center; } /* Ctrl+K / Cmd+K keycap hint: decorative overlay, never intercepts clicks. */ .wc-shell-global-search-hint { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 44px; display: inline-flex; align-items: center; gap: 2px; pointer-events: none; color: var(--wc-text-secondary, var(--mud-palette-text-secondary)); } .wc-shell-global-search-hint kbd { font-family: var(--wc-type-meta-family); font-size: var(--wc-type-meta-size); font-weight: var(--wc-type-meta-weight); line-height: var(--wc-type-meta-leading); padding: 3px 5px; border: 1px solid var(--wc-border-subtle, var(--mud-palette-lines-default)); border-bottom-width: 2px; border-radius: var(--border-radius-sm, 6px); background: var(--wc-surface-2, var(--mud-palette-background-gray)); color: inherit; } /* Keep the idle placeholder clear of the keycaps; normal padding returns on focus. */ .wc-shell-global-search-wrap:not(:focus-within) .wc-shell-global-search .mud-input > input.mud-input-slot { padding-inline-end: 92px; text-overflow: ellipsis; } /* The hint is an idle affordance: hide it while interacting or once text exists. */ .wc-shell-global-search-wrap:focus-within .wc-shell-global-search-hint, .wc-shell-global-search-wrap:has(input:not(:placeholder-shown)) .wc-shell-global-search-hint { display: none; } /* Touch-first pointers get no keyboard hint. */ @media (hover: none), (pointer: coarse) { .wc-shell-global-search-hint { display: none; } } /* ===== WorkCita.Client/wwwroot/css/app.mudblazor.css ===== */ /* * WorkCita global stylesheet module: app.mudblazor.css * Ownership layer: Mud bridge. * Ownership: MudBlazor component overflow fixes and semantic Mud background tint utilities. * Theme: universal --wc-* tokens only; not a separate surface theme. * Parent: GitHub #404 mechanical CSS ownership split (no visual redesign). * Load: after app.shell.support.css; before app.shared-primitives.css (index.html). */ /* ============================================================================= Text Overflow Prevention (Mobile Responsive) ============================================================================= */ /* * Prevent long unbreakable strings (emails, URLs, addresses) from causing * horizontal overflow on mobile devices. * * Applied automatically to all MudText components via CSS specificity. * This ensures emails like "mitchell.l.chesne@gmail.com" and long addresses * wrap properly instead of causing horizontal scrolling. * * Properties explained: * - overflow-wrap: anywhere ? Break long strings only when needed to prevent overflow * - word-break: normal ? Avoid mid-word splits in ordinary labels and copy * - word-wrap: break-word ? Legacy property for older browsers * - hyphens: none ? Avoid inserted hyphens in product UI labels * - max-width: 100% ? Never exceed parent container width * - overflow: visible ? Preserve glyph ascenders/descenders while text wraps */ .mud-typography, .mud-typography-body1, .mud-typography-body2, .mud-typography-caption, .mud-typography-subtitle1, .mud-typography-subtitle2 { overflow-wrap: anywhere; word-break: normal; word-wrap: break-word; hyphens: none; max-width: 100%; overflow: visible; } /* Text truncation with ellipsis for DataGrid columns */ .mud-typography-nowrap { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100%; } /* Specific fix for long text in grid columns on mobile */ .mud-grid-item .mud-typography { overflow-wrap: anywhere; word-break: normal; } /* Ensure tables on mobile don't overflow with long text in cells */ .mud-table-cell .mud-typography { overflow-wrap: anywhere; word-break: normal; max-width: 100%; } /* Ensure DataGrid rows don't overflow parent container */ .mud-table-row { max-width: 100%; } /* WorkCita table wrappers own min-width, scroll, and responsive row behavior. */ .mud-table-root { table-layout: auto; width: 100%; } /* WorkCita uses sentence-case product controls across office, portal, auth, public, and platform surfaces. Route CSS should not redefine button text. */ .mud-button-root { text-transform: none; letter-spacing: 0; font-weight: 600; } /* Tabs follow the same sentence case; Mud capitalises them ("STOCK ON HAND"). */ .mud-tab { text-transform: none; letter-spacing: 0; } /* A neutral outlined button borders like the outlined field beside it. MudBlazor strokes it in full text ink, which read as a heavy black box next to the soft field borders and the accent-outlined buttons. Hover darkens it the way a field's border does. */ .mud-button-outlined.mud-button-outlined-default { border-color: var(--mud-palette-lines-inputs); } .mud-button-outlined.mud-button-outlined-default:hover { border-color: var(--mud-palette-text-primary); } /* Keep remaining vendor alerts visually aligned with WcNoticeBand while preserving MudBlazor alert semantics in legacy dialogs and provider panels. */ .mud-alert { border-radius: var(--wc-card-radius, var(--border-radius-md)); box-shadow: none; } .mud-alert-outlined { border-color: var(--wc-border-soft, var(--mud-palette-divider)); background: var(--wc-surface-1, var(--mud-palette-surface)); } .mud-alert-filled { box-shadow: none; } .mud-alert-message { letter-spacing: 0; } /* Dialog content text overflow prevention */ .mud-dialog-content .mud-typography { overflow-wrap: anywhere; word-break: normal; hyphens: none; } .dialog-action-buttons__full-width, .dialog-action-buttons__mobile-stack { width: 100%; } .confirm-action-dialog { width: min(520px, calc(100vw - 48px)); } @media (max-width: 599.98px) { .confirm-action-dialog { width: calc(100vw - 32px); max-width: calc(100vw - 32px); } } .confirm-action-dialog__preview { padding: 12px; border: 1px solid var(--wc-border-soft, var(--mud-palette-divider)); border-radius: var(--border-radius-md); background: var(--wc-surface-2); } @media (max-width: 599.98px) { .document-action-dialog .mud-dialog-content { max-height: calc(100dvh - 190px); overflow-y: auto; padding-bottom: var(--wc-space-3, 12px); } .document-action-dialog .mud-dialog-actions { padding-top: var(--wc-space-2, 8px); background: var(--wc-surface-1, var(--mud-palette-surface)); } .workcita-large-dialog .mud-dialog-content { max-height: calc(100dvh - 190px); overflow-y: auto; padding-bottom: var(--wc-space-3, 12px); } .workcita-large-dialog .mud-dialog-actions { position: sticky; bottom: 0; z-index: 1; padding-top: var(--wc-space-2, 8px); background: var(--wc-surface-1, var(--mud-palette-surface)); } } /* ============================================================================= End Text Overflow Prevention ============================================================================= */ /* ============================================================================= Saved views menu panel (OfficeSavedViewsMenu) ============================================================================= */ /* Bound the popover panel so the inline name field has room without letting long view names stretch the menu; names truncate with ellipsis instead. */ .wc-saved-views-menu { display: inline-flex; align-items: center; gap: 0.375rem; } .wc-saved-views-menu__button { color: var(--wc-text-secondary, var(--mud-palette-text-secondary)); text-transform: none; } .wc-saved-views-menu__label { font-size: var(--wc-type-body-compact-size); line-height: 1.4; white-space: nowrap; } .wc-saved-views-panel { min-width: 250px; max-width: 340px; } .wc-saved-views-panel .wc-saved-views-apply { min-width: 0; } .wc-saved-views-panel .wc-saved-views-apply .mud-button-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 599.98px) { .wc-saved-views-menu__label { display: none; } .wc-saved-views-menu__button .mud-button-icon-start { margin-inline: 0; } } /* Mud's invisible notch label must not add scroll overflow while its width is zero. */ .mud-input-outlined-border > legend { overflow: hidden; white-space: nowrap; } /* Inside a form, outlined labels stay floated whether or not the field holds a value. Mud floats a label only for filled, focused, adorned, or placeholder fields, so one form mixed two label states ("Phone" above the border, "First name" inside it). Same transform and notch as Mud's own shrink state, applied to text, select, numeric, and date inputs alike. */ .mud-form .mud-input.mud-input-outlined > .mud-input-outlined-border legend { width: auto; padding: 0 5px; } .mud-form .mud-input.mud-input-outlined ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined { transform: translate(14px, -6px) scale(0.75); transform-origin: top left; max-width: calc((100% - 14px) / 0.75); } .mud-application-layout-rtl .mud-form .mud-input.mud-input-outlined ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined { transform: translate(-14px, -6px) scale(0.75); transform-origin: top right; } /* ===== WorkCita.Client/wwwroot/css/app.shared-primitives.css ===== */ /* * WorkCita global stylesheet module: app.shared-primitives.css * Ownership layer: shared primitives. * Ownership: anonymous-safe accessibility, disclosure, header actions, * pagination, navigation, and segmented controls. * Theme: universal --wc-* tokens only; not a separate surface theme. * Parent: GitHub #404 mechanical CSS ownership split (no visual redesign). * Load: after app.mudblazor.css; before app.shared-controls.css (index.html). */ /* ============================================================================= Screen Reader Utility ============================================================================= */ .wc-sr-only { position: absolute; /* Pin to the containing block's origin: without this the span keeps its static inline position, and sr-only text inside horizontally scrolled content (money cells in wide tables) extends ancestors' scrollWidth, tripping page-level overflow checks. Clipped to zero, so placement is invisible either way. */ left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================================= Shared Disclosure Panels ============================================================================= */ .wc-disclosure-list { display: flex; flex-direction: column; gap: var(--wc-space-2, 8px); } .wc-disclosure-panel { overflow: hidden; border: 1px solid var(--wc-border-soft, var(--mud-palette-divider)); border-radius: var(--wc-card-radius, var(--border-radius-md)); background: var(--wc-surface-1, var(--mud-palette-surface)); box-shadow: none; } .wc-disclosure-panel__header { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; gap: var(--wc-space-3, 12px); padding: var(--wc-space-3, 12px) var(--wc-card-padding-inline, 16px); border: 0; background: transparent; color: var(--wc-text-primary, var(--mud-palette-text-primary)); font: inherit; text-align: left; cursor: pointer; } .wc-disclosure-panel__header:hover { background: rgba(var(--wc-accent-rgb), 0.045); } .wc-disclosure-panel__header:focus-visible { outline: var(--wc-focus-outline); outline-offset: -2px; box-shadow: var(--wc-focus-ring); } .wc-disclosure-panel__header-main { display: inline-flex; min-width: 0; align-items: center; gap: var(--wc-space-2, 8px); } .wc-disclosure-panel__title { min-width: 0; overflow-wrap: anywhere; font-weight: 600; line-height: 1.3; } .wc-disclosure-panel__chevron { flex: 0 0 auto; color: var(--wc-text-muted, var(--mud-palette-text-secondary)); transition: transform var(--wc-motion-base) var(--wc-ease-out-quart); } .wc-disclosure-panel__chevron--open { transform: rotate(180deg); } .wc-disclosure-panel__body { padding: 0 var(--wc-card-padding-inline, 16px) var(--wc-card-padding-block, 16px); } /* ============================================================================= Unified Page Header (WcPageHeader) Shared structure + token-driven title. Per-surface chrome (padding, background, ownership line) stays on the command-center-header* / portal-page-header* / auth-form-card* compatibility classes the component also emits, so feature overrides and E2E selectors keep binding. ============================================================================= */ .wc-page-header { display: flex; flex-direction: column; gap: var(--space-2); } .wc-page-header__bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); min-width: 0; } .wc-page-header__copy { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 18rem; } .wc-page-header__title-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; } .wc-page-header__title { margin: 0; font-family: var(--wc-type-display-family); font-size: var(--wc-page-title-size); font-weight: var(--wc-page-title-weight); line-height: var(--wc-page-title-leading); letter-spacing: 0; color: var(--wc-page-title-ink); } .wc-page-header__subtitle { margin: 0; font-family: var(--wc-type-body-family); font-size: var(--wc-type-body-size); line-height: var(--wc-type-body-leading); } /* Meta line: subtitle + status chips share one wrapping row directly under the title, so status reads as page metadata instead of a stranded band below the bar. Applies to every office and portal header at once. */ .wc-page-header__meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); row-gap: var(--space-1); min-width: 0; } .wc-page-header__meta .wc-page-header__subtitle, .wc-page-header__meta .wc-page-header__status { margin: 0; } .wc-page-header__actions, .wc-page-header__status, .wc-page-header__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; } .wc-page-header__actions { position: relative; z-index: 1; flex: 0 1 auto; justify-content: flex-end; } /* Header status reads as quiet metadata: a small semantic dot plus a compact label, never a loud outlined pill band. The dot inherits the chip's state color, so status stays non-color-only (dot + text). */ .wc-page-header__status .wc-chip { display: inline-flex; align-items: center; min-height: 0; height: auto; margin: 0; padding: 0; border: 0; background: transparent; font-size: var(--wc-type-body-compact-size); font-weight: 500; } .wc-page-header__status .wc-chip .mud-chip-content { padding: 0; } .wc-page-header__status .wc-chip::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; } /* The dot is the header's status marker. A chip's own state icon beside it doubled the marker (dot, people icon, "In progress"). */ .wc-page-header__status .wc-chip .mud-chip-icon { display: none; } /* ----------------------------------------------------------------------------- WcHeaderActions - the owned page-header action zone. One Filled/Primary command button leads (btn-command-primary); secondaries are quiet ghosts that collapse into an overflow menu past the threshold; Back is a ghost with a leading arrow. Pages no longer hand-roll header button styling. ----------------------------------------------------------------------------- */ .wc-header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2, 8px); } /* Every header action shares ONE height so primary, secondary, back, and overflow align on a single baseline regardless of variant padding (the primary pill keeps its wide horizontal padding but drops its taller vertical padding to match). */ .wc-header-actions .wc-header-action, .wc-header-actions .mud-menu.wc-header-action > .mud-menu-button-activator, .wc-header-actions .mud-menu.wc-header-action > .mud-menu-icon-button-activator { height: 44px; min-height: 44px; } .wc-header-actions .wc-header-action.btn-command-primary:not(.mud-menu), .wc-header-actions .mud-menu.wc-header-action.btn-command-primary > .mud-menu-button-activator { padding-block: 0; } .wc-header-actions .wc-header-action--secondary, .wc-header-actions .wc-header-action--back, .wc-header-actions .wc-header-action--overflow, .wc-header-actions .mud-menu.wc-header-action--overflow > .mud-menu-icon-button-activator { color: var(--wc-text-muted, var(--mud-palette-text-secondary)); } .wc-header-actions .wc-header-action--secondary:hover, .wc-header-actions .wc-header-action--back:hover, .wc-header-actions .wc-header-action--overflow:not(.mud-menu):hover, .wc-header-actions .mud-menu.wc-header-action--overflow > .mud-menu-icon-button-activator:hover { background: var(--wc-surface-2, rgba(15, 23, 42, 0.05)); color: var(--wc-text-strong, var(--mud-palette-text-primary)); } /* The action zone owns the focus ring for everything placed in it, the same way .wc-section-card-actions does. Controls relocated here (a saved-views menu, a page's leading content) otherwise land with no indicator at all: MudBlazor removes the UA outline and there is no app-wide button:focus-visible fallback. */ .wc-header-actions :is(a, button, .mud-button-root, .mud-icon-button):focus-visible { outline: none; box-shadow: var(--wc-focus-ring); } @media (max-width: 599.98px) { /* Span the action zone so the buttons right-align to the edge like desktop, then wrap as a compact group when they do not all fit. Uniform at every width and independent of tooltip/menu wrappers (no per-variant flex special-casing). */ .wc-header-actions { width: 100%; } } .wc-page-header--hero .wc-page-header__title { font-size: var(--wc-page-title-size-hero); } .wc-page-header--centered { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); } .wc-page-header__copy--centered { flex: 0 1 auto; align-items: center; gap: var(--space-1); } /* Contextual Help: a compact icon pinned to the header's top-right corner. It is small and out of the action flow, so it never strands on a list page (which has no breadcrumb) nor orphans below a full-width mobile primary action. */ .wc-page-header__utility { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 3; display: flex; align-items: center; } .wc-page-header--has-utility .wc-page-header__title-line { padding-right: 48px; } @media (min-width: 600px) { .wc-page-header--has-utility .wc-page-header__bar { padding-right: 48px; } .wc-page-header--has-utility .wc-page-header__title-line { padding-right: 0; } } /* ============================================================================= Action Signal Lists Compact action rows for operational attention surfaces. These preserve real link semantics and provide a shared vocabulary for dashboard, reports, and schedule triage without introducing page-local card systems. ============================================================================= */ .wc-action-signal-list { display: flex; flex-direction: column; gap: 0; min-width: 0; margin: 0; padding: 0; list-style: none; } .wc-action-signal-list__item { min-width: 0; /* Query container: a narrow row (Schedule sidebar, aside rails, mobile) reflows its action onto its own line below the body instead of cramping the title. */ container-type: inline-size; } .wc-action-signal-row { --wc-action-signal-soft-bg: var(--wc-tone-primary-soft-bg); --wc-action-signal-soft-fg: var(--wc-tone-primary-soft-fg); --wc-action-signal-soft-border: var(--wc-tone-primary-soft-border); display: flex; align-items: center; gap: var(--wc-space-3, 12px); min-width: 0; min-height: 66px; padding: var(--wc-space-3, 12px); border: 0; border-bottom: 1px solid var(--wc-border-soft, var(--mud-palette-divider)); border-radius: 0; background: transparent; color: var(--wc-text-strong, var(--mud-palette-text-primary)); text-decoration: none; box-shadow: none; transition: background-color var(--wc-motion-base) var(--wc-ease-out-quart), border-color var(--wc-motion-base) var(--wc-ease-out-quart); } button.wc-action-signal-row { width: 100%; font: inherit; text-align: left; cursor: pointer; } a.wc-action-signal-row:hover, button.wc-action-signal-row:hover:not(:disabled) { background: var(--wc-surface-2, var(--mud-palette-background-gray)); color: var(--wc-text-strong, var(--mud-palette-text-primary)); text-decoration: none; } a.wc-action-signal-row:focus-visible { outline: 2px solid var(--wc-accent, var(--mud-palette-primary)); outline-offset: -2px; } button.wc-action-signal-row:focus-visible { outline: 2px solid var(--wc-accent, var(--mud-palette-primary)); outline-offset: -2px; } .wc-action-signal-row--disabled { cursor: default; opacity: 0.62; } .wc-action-signal-row--resolved { --wc-action-signal-soft-bg: var(--wc-tone-success-soft-bg); --wc-action-signal-soft-fg: var(--wc-tone-success-soft-fg); --wc-action-signal-soft-border: var(--wc-tone-success-soft-border); } .wc-action-signal-row__lead { display: flex; align-items: center; min-width: 44px; flex: 0 0 auto; } .wc-action-signal-row__lead--prominent { min-width: 88px; } .wc-action-signal-row__lead-value { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; width: auto; min-height: 36px; padding-inline: var(--wc-space-1, 4px); white-space: nowrap; background: transparent; color: var(--wc-action-signal-soft-fg); font-size: var(--wc-type-body-emphasis-size); font-weight: 700; line-height: 1; } .wc-action-signal-row__lead-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; width: 36px; height: 36px; background: transparent; color: var(--wc-action-signal-soft-fg); } /* Prominent leads are headline money values, so they take the money posture: ink rather than the row's tone colour, the display family, tabular figures. Urgency is carried by the row's icon and copy, never by the figure. */ .wc-action-signal-row__lead-value--prominent { display: inline; min-height: 0; padding-inline: 0; min-width: 0; width: auto; height: auto; border-radius: 0; background: transparent; font-family: var(--wc-money-family); font-size: var(--wc-money-lead-size); font-variant-numeric: var(--wc-numeric-figures); letter-spacing: var(--wc-money-tracking); color: var(--wc-money-ink); line-height: 1.1; } .wc-action-signal-row__body { display: grid; flex: 1 1 auto; gap: var(--wc-space-1, 4px); min-width: 0; overflow-wrap: anywhere; } .wc-action-signal-row__record { color: var(--wc-text-strong, var(--mud-palette-text-primary)); font-size: var(--wc-type-body-size); font-weight: var(--font-bold, 700); font-variant-numeric: var(--wc-numeric-identifier-figures); line-height: 1.5; } .wc-action-signal-row__title { color: var(--wc-text-strong, var(--mud-palette-text-primary)); font-size: var(--wc-type-body-size); font-weight: 600; line-height: 1.4; } .wc-action-signal-row__description { color: var(--wc-text-muted, var(--mud-palette-text-secondary)); font-size: var(--wc-type-caption-size); line-height: 1.5; } /* Label + chevron travel together as one group so they can reflow as a unit (see the narrow-row container query below). margin-left:auto keeps the group right-aligned on the inline (wide) layout. */ .wc-action-signal-row__action { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; min-width: 0; } .wc-action-signal-row__action-label { /* Must NOT shrink: a shrinkable flex item with overflow:hidden gets an automatic min-size of 0, so in narrow rows (Reports panels, Schedule sidebar) the label was crushed to a sliver ("View" -> "V."). The title body (flex: 1 1 auto, min-width: 0) wraps to absorb the squeeze instead. Past the max-width a long (often Spanish) label takes a second line rather than clipping to "Facturar los trabajos completa…". */ flex: 0 0 auto; max-width: min(12rem, 35vw); color: var(--wc-tone-primary-soft-fg, var(--mud-palette-primary)); font-size: var(--wc-type-caption-size); font-weight: 700; line-height: 1.2; text-align: end; overflow-wrap: break-word; } .wc-action-signal-row__chevron { flex: 0 0 auto; } /* Narrow rows can't fit the title and a full action label side by side without crushing the title (Schedule sidebar ~185px, aside rails ~273px, mobile cards). Reflow the action group onto its own right-aligned line so the body keeps full width and every label stays whole. Queries the .wc-action-signal-list__item. */ @container (max-width: 360px) { /* Only rows WITH a label need to reflow. A label-less row (chevron only) must stay inline -- a lone chevron dropped onto its own line reads as a stray glyph. :has() scopes the stack to labelled rows. */ .wc-action-signal-row:has(.wc-action-signal-row__action-label) { flex-wrap: wrap; row-gap: 6px; } .wc-action-signal-row:has(.wc-action-signal-row__action-label) .wc-action-signal-row__action { flex-basis: 100%; margin-left: 0; justify-content: flex-end; } .wc-action-signal-row__action-label { max-width: 100%; } } .wc-action-signal-row-tone-default { --wc-action-signal-soft-bg: var(--wc-tone-default-soft-bg); --wc-action-signal-soft-fg: var(--wc-tone-default-soft-fg); --wc-action-signal-soft-border: var(--wc-tone-default-soft-border); } .wc-action-signal-row-tone-secondary { --wc-action-signal-soft-bg: var(--wc-tone-secondary-soft-bg); --wc-action-signal-soft-fg: var(--wc-tone-secondary-soft-fg); --wc-action-signal-soft-border: var(--wc-tone-secondary-soft-border); } .wc-action-signal-row-tone-primary { --wc-action-signal-soft-bg: var(--wc-tone-primary-soft-bg); --wc-action-signal-soft-fg: var(--wc-tone-primary-soft-fg); --wc-action-signal-soft-border: var(--wc-tone-primary-soft-border); } .wc-action-signal-row-tone-info { --wc-action-signal-soft-bg: var(--wc-tone-info-soft-bg); --wc-action-signal-soft-fg: var(--wc-tone-info-soft-fg); --wc-action-signal-soft-border: var(--wc-tone-info-soft-border); } .wc-action-signal-row-tone-success { --wc-action-signal-soft-bg: var(--wc-tone-success-soft-bg); --wc-action-signal-soft-fg: var(--wc-tone-success-soft-fg); --wc-action-signal-soft-border: var(--wc-tone-success-soft-border); } .wc-action-signal-row-tone-warning { --wc-action-signal-soft-bg: var(--wc-tone-warning-soft-bg); --wc-action-signal-soft-fg: var(--wc-tone-warning-soft-fg); --wc-action-signal-soft-border: var(--wc-tone-warning-soft-border); } .wc-action-signal-row-tone-error { --wc-action-signal-soft-bg: var(--wc-tone-error-soft-bg); --wc-action-signal-soft-fg: var(--wc-tone-error-soft-fg); --wc-action-signal-soft-border: var(--wc-tone-error-soft-border); } @media (max-width: 599.98px) { .wc-action-signal-row { gap: 12px; padding: 12px 14px; } .wc-action-signal-row__lead--prominent { min-width: 72px; } .wc-action-signal-row__lead-value--prominent { font-size: var(--wc-money-lead-size-compact); } } /* ============================================================================= Empty States (Engaging Illustrations) ============================================================================= */ .empty-state { min-height: 280px; padding: var(--space-6); width: min(100%, 520px); margin-inline: auto; text-align: center; } @media (max-width: 599.98px) { .empty-state { min-height: 220px; padding: var(--space-5); } } .empty-state-illustration { width: 76px; height: 76px; border-radius: 50%; background: var(--wc-surface-2, var(--mud-palette-background-grey)); border: 1px solid var(--wc-border-soft, var(--mud-palette-divider)); display: flex; align-items: center; justify-content: center; } .empty-state-illustration .mud-icon-root { font-size: var(--wc-type-icon-large-size); } /* Money-bearing empty states put the figure where the medallion was: the zero is the illustration, and it is auditable rather than decorative. Opt-in per state; icon-bearing empty states elsewhere are unchanged. */ .empty-state-nil-figure { margin: 0; } .empty-state-nil-figure .wc-money { font-size: var(--wc-type-display-metric-size); } .empty-state-title { margin-top: var(--space-4); font-weight: var(--font-bold); } .empty-state-message { margin-bottom: var(--space-4); } .empty-state-secondary-action { margin-top: var(--space-2); } .error-alert-retry-button { white-space: nowrap; } .error-alert { background: var(--wc-surface-1, var(--mud-palette-surface)) !important; border-color: rgba(var(--wc-error-rgb), 0.28) !important; color: var(--wc-text-strong, var(--mud-palette-text-primary)) !important; } .error-alert .mud-alert-message { width: 100%; } .error-alert-retrying-label { margin-left: var(--wc-space-2, 8px); } @media (max-width: 599.98px) { .error-alert .mud-alert-message > .flex-row { flex-direction: column !important; align-items: stretch !important; } .error-alert-retry-button { width: 100%; } } /* ============================================================================= Shared Page State Primitives ============================================================================= */ .page-state-shell, .page-not-authorized-shell { min-height: min(720px, calc(100vh - 64px)); display: grid; align-content: center; } .page-state-card, .page-not-authorized-card { max-width: 720px; margin-inline: auto; width: 100%; } .page-state-content, .page-not-authorized-content { padding: clamp(24px, 5vw, 48px); } .page-state-icon-shell, .page-not-authorized-icon-shell { padding: 12px; border-radius: var(--wc-radius-pill); } .page-state-icon-shell--error, .page-not-authorized-icon-shell { background: var(--wc-tone-error-soft-bg); } .page-state-icon-shell--info { background: var(--wc-tone-info-soft-bg); } .page-state-title { line-height: 1.12; font-weight: var(--wc-page-title-weight); color: var(--wc-page-title-ink); } .page-state-copy, .page-not-authorized-copy, .page-not-authorized-actions { max-width: 520px; } .page-state-actions { width: 100%; } .page-state-actions .mud-button-root { min-width: 0; min-height: 44px; } @media (max-width: 599.98px) { .page-state-content, .page-not-authorized-content { padding: 22px 18px; } .page-state-title { font-size: var(--wc-type-title-size); } .page-state-actions { flex-direction: column !important; align-items: stretch !important; } .page-state-actions .mud-button-root { width: 100%; } } /* ============================================================================= Shared Command Center Background Primitive ============================================================================= */ /* Office route wrapper. This used to paint a tinted header band through a ::before layer; the band ran to a fixed height across content unrelated to where the header actually ends, so it was suppressed globally in app.office.css and headers now sit on the plain canvas. The band and its suppression are both removed here — what the class still owns is the page field and horizontal overflow containment. */ .command-center-bg { position: relative; overflow-x: hidden; background: var(--wc-page-background, var(--mud-palette-background)); } /* ============================================================================= Shared Segmented Control ============================================================================= */ .wc-segmented-control { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; border: 1px solid var(--wc-data-grid-border, var(--wc-border-soft, var(--mud-palette-divider))); border-radius: var(--wc-control-radius, var(--border-radius-md)); background: var(--wc-surface-1, var(--mud-palette-surface)); box-shadow: none; } .wc-segmented-control--equal { display: grid; grid-template-columns: repeat(var(--wc-segmented-control-columns, 4), minmax(0, 1fr)); width: 100%; } /* Content-sized pills move to a new row whole; a single pill wider than the control wraps inside. */ :where(.wc-segmented-control:not(.wc-segmented-control--equal)) > .wc-segmented-control__option { flex: 0 0 auto; max-width: 100%; } .wc-segmented-control__option { display: inline-flex; align-items: center; justify-content: center; gap: var(--wc-space-1, 4px); min-height: 44px; min-width: 0; padding: 8px 14px; border: 1px solid transparent; border-radius: calc(var(--wc-control-radius, var(--border-radius-md)) - 2px); background: transparent; color: var(--wc-text-muted, var(--mud-palette-text-secondary)); font: inherit; font-size: var(--wc-type-body-size); font-weight: 700; line-height: 1.2; text-align: center; /* Localized labels (Spanish runs ~30% longer) take a second line rather than clipping. */ white-space: normal; overflow-wrap: break-word; cursor: pointer; transition: background-color var(--wc-motion-feedback) var(--wc-ease-out-quart), border-color var(--wc-motion-feedback) var(--wc-ease-out-quart), color var(--wc-motion-feedback) var(--wc-ease-out-quart); } .wc-segmented-control__option:hover:not(:disabled):not(.is-active) { background: var(--wc-surface-hover, rgba(var(--wc-accent-rgb), 0.05)); color: var(--wc-text-strong, var(--mud-palette-text-primary)); } .wc-segmented-control__option.is-active { background: var(--wc-accent, var(--mud-palette-primary)); border-color: var(--wc-accent, var(--mud-palette-primary)); color: var(--wc-on-accent, var(--mud-palette-primary-text)); box-shadow: none; } .wc-segmented-control__option:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); } .wc-segmented-control__option:disabled { cursor: default; opacity: 0.64; } .wc-segmented-control__label { min-width: 0; } .wc-segmented-control__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.375rem; min-height: 1.375rem; padding-inline: 0.375rem; border-radius: var(--wc-radius-pill, 999px); background: var(--wc-tone-default-soft-bg); color: var(--wc-tone-default-soft-fg); font-size: var(--wc-type-caption-size); font-weight: var(--font-bold); line-height: 1; font-variant-numeric: var(--wc-numeric-figures); } .wc-segmented-control__option.is-active .wc-segmented-control__count { background: rgba(var(--wc-surface-1-rgb), 0.18); color: var(--wc-on-accent, var(--mud-palette-primary-text)); } .wc-segmented-control__count--primary { background: var(--wc-tone-primary-soft-bg); color: var(--wc-tone-primary-soft-fg); } .wc-segmented-control__count--info { background: var(--wc-tone-info-soft-bg); color: var(--wc-tone-info-soft-fg); } .wc-segmented-control__count--success { background: var(--wc-tone-success-soft-bg); color: var(--wc-tone-success-soft-fg); } .wc-segmented-control__count--warning { background: var(--wc-tone-warning-soft-bg); color: var(--wc-tone-warning-soft-fg); } .wc-segmented-control__count--error { background: var(--wc-tone-error-soft-bg); color: var(--wc-tone-error-soft-fg); } @media (max-width: 599.98px) { .wc-segmented-control { width: 100%; } .wc-segmented-control__option { padding-inline: 10px; } } /* ===== WorkCita.Client/wwwroot/css/app.shared-controls.css ===== */ /* * WorkCita global stylesheet module: app.shared-controls.css * Ownership: shared inline surfaces, chips, utilities, buttons, meters, and form controls. * Theme: universal --wc-* tokens only. * Load: after app.shared-primitives.css; before app.shared-surfaces.css. */ /* ============================================================================= Shared Inline Surface ============================================================================= */ .wc-inline-surface { min-width: 0; border: 1px solid var(--wc-data-grid-border, var(--wc-border-soft, var(--mud-palette-divider))); border-radius: var(--wc-card-radius, var(--border-radius-md)); background: transparent; box-shadow: none; } /* ============================================================================= Shared Chip Utilities ============================================================================= */ .wc-chip { width: fit-content; max-width: 100%; min-height: 24px; margin: 0; padding-inline: 8px; font-weight: 600; letter-spacing: 0; border-width: 1px; line-height: 1.15; } /* Chips carry the label role (13px). MudBlazor sets small chips, which most status chips are, to its own 12px. Table lanes keep 12px (app.index-grid.table.css). */ .wc-chip.mud-chip-size-small { font-size: var(--wc-type-label-size); } /* * MudBlazor's Secondary color historically carries muted supporting copy in * WorkCita. Keep that typography contract neutral while allowing secondary * controls, chips, avatars, and workflow tones to use operational teal. */ .mud-typography.mud-secondary-text, .mud-link.mud-secondary-text { color: var(--mud-palette-text-secondary) !important; } /* * MudBlazor's semantic Color values are FILL colors, and .mud-*-text paints them * straight onto a surface as ink. That is fine in light mode, but the dark palette * deliberately desaturates its fills so they do not glow, which lands them at * 3.08-3.39:1 as text - under AA. The --wc-tone-*-soft-fg tokens are the ink half * of the same semantic pair and measure 7.8-11.4:1 on every dark surface, so map * dark semantic typography onto them. Fills, chips, and borders are untouched. */ .wc-theme-dark .mud-typography.mud-primary-text, .wc-theme-dark .mud-link.mud-primary-text { color: var(--wc-accent-ink) !important; } .wc-theme-dark .mud-typography.mud-error-text, .wc-theme-dark .mud-link.mud-error-text { color: var(--wc-tone-error-soft-fg) !important; } .wc-theme-dark .mud-typography.mud-success-text, .wc-theme-dark .mud-link.mud-success-text { color: var(--wc-tone-success-soft-fg) !important; } .wc-theme-dark .mud-typography.mud-warning-text, .wc-theme-dark .mud-link.mud-warning-text { color: var(--wc-tone-warning-soft-fg) !important; } .wc-theme-dark .mud-typography.mud-info-text, .wc-theme-dark .mud-link.mud-info-text { color: var(--wc-tone-info-soft-fg) !important; } .wc-chip--role-status, .wc-chip--role-filter, .wc-chip--role-count, .wc-chip--role-provider, .wc-chip--role-tag, .wc-chip--role-type { /* Truncation caps are expressed against the root font size so a reader who raises the browser's default text size gets a wider cap instead of a tighter clip. 13.75rem = 220px at the 16px root default. */ max-width: min(100%, 13.75rem); } .wc-chip--role-record { font-variant-numeric: var(--wc-numeric-identifier-figures); } /* Toggle role. A reversible control, so WcChip renders a real