/* ============================================================================ SAMS Voice AI â€” Design system Ported from preview.html so Blazor pages + static preview render identically. ============================================================================ */ :root { --mud-palette-primary:#1E88E5; --mud-palette-primary-darken:#1976D2; --mud-palette-primary-lighten:#E3F2FD; --mud-palette-success:#2E7D32; --mud-palette-success-lighten:#E8F5E9; --mud-palette-warning:#ED6C02; --mud-palette-warning-lighten:#FFF4E5; --mud-palette-error:#D32F2F; --mud-palette-error-lighten:#FDECEA; --mud-palette-info:#0288D1; --mud-palette-info-lighten:#E1F5FE; --mud-palette-background:#F7F8FB; --mud-palette-surface:#FFFFFF; --mud-palette-background-grey:#FAFBFD; --mud-palette-divider:#EEF0F5; --mud-palette-lines-default:#E6E8EF; --mud-palette-text-primary:#1E2432; --mud-palette-text-secondary:#596174; --mud-palette-text-light:white; --mud-palette-text-disabled:#9AA0B1; --mud-typography-default-family: Inter, Roboto, -apple-system, "Segoe UI", sans-serif; } *, *::before, *::after { box-sizing: border-box; } html, body { background: var(--mud-palette-background); font-family: var(--mud-typography-default-family); -webkit-font-smoothing: antialiased; /* THE missing reset. MudBlazor's own body{} rule sets typography and colour but never margin, and it ships no *{margin:0}, so keeps the browser default 8px on every side. That is 8px top + 8px bottom OUTSIDE a body sized to the viewport, i.e. the document is 16px taller than the screen and grows a second scrollbar beside the grid's own. Harmless-looking while body height was auto; guaranteed the moment it became height:100% further down. */ margin: 0; } .mud-main-content { background: var(--mud-palette-background); } /* ============================================================================ Shell â€” app bar + permanent drawer ============================================================================ */ .svai-brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; } .svai-brand .mark { width:28px; height:28px; border:1px solid rgba(255,255,255,.5); border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; } .svai-tenant-chip { font-size:12px; background:rgba(255,255,255,.14); padding:5px 10px; border-radius:14px; letter-spacing:.2px; margin-left:4px; color:#fff; } .svai-appbar-avatar { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.22); display:grid; place-items:center; font-weight:600; font-size:12px; margin-left:6px; border:1px solid rgba(255,255,255,.4); color:#fff; } .svai-nav-section { font-size:10.5px; font-weight:700; letter-spacing:.8px; color:var(--mud-palette-text-disabled); text-transform:uppercase; padding:8px 12px 3px; } .mud-nav-link.active-link { background:var(--mud-palette-primary-lighten) !important; color:var(--mud-palette-primary-darken) !important; font-weight:600 !important; } /* Default MudNavMenu recolors active text to primary but leaves the icon grey; recolor the active icon to match (Mud only ships this for colored navmenus). Second selector: MudNavLink puts a user-supplied Class on the OUTER .mud-nav-item wrapper, not the .mud-nav-link anchor. The Approval nav link is flagged active manually (Class="active") for its deep-linked tab routes (/approvals/{approved,rejected,escalated,expired}), so also match the wrapper case here â€” otherwise those routes leave the icon grey. */ .mud-nav-link.active .mud-nav-link-icon, .mud-nav-item.active .mud-nav-link-icon { color:var(--mud-palette-primary) !important; } /* Active + hover background for sidebar menu items (primary @ 22%). The middle selector covers the manual wrapper-level active class (see note above) so the Approval item highlights on every tab route, matching genuinely-active links. */ .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled), .mud-navmenu .mud-nav-item.active .mud-nav-link:not(.mud-nav-link-disabled), .mud-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled) { background-color:rgb(30 136 229 / 22%) !important; } /* MudBlazor's bundled CSS colors active link TEXT primary via .mud-nav-link.active, which only hits the anchor â€” so the manually-flagged Approval item kept default text. Mirror the text color for the wrapper-level active class so it matches. */ .mud-nav-item.active .mud-nav-link:not(.mud-nav-link-disabled) { color:var(--mud-palette-primary) !important; } /* Soft shadow on the right edge of the left navigation sidebar to lift it off the content area (Mud renders the drawer flat at Elevation=0). */ .mud-drawer.mud-drawer-pos-left { box-shadow:4px 0 16px rgba(20,27,45,.10), 1px 0 4px rgba(20,27,45,.06) !important; } /* Compact the left nav so every menu item fits on short screens WITHOUT a scrollbar (the drawer content is overflow:hidden). Tighter row height; scoped to the left navigation drawer only so the right Conversations drawer is unaffected. */ .mud-drawer-pos-left .mud-navmenu .mud-nav-link { min-height:38px; padding-top:6px; padding-bottom:6px; } .mud-drawer-pos-left .mud-navmenu .mud-nav-link .mud-nav-link-icon { min-width:32px; } /* â”€â”€ Large-screen collapsed "mini rail" â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ On large screens the menu button collapses the left drawer to the Mini variant instead of hiding it. In that collapsed state (.mud-drawer-mini.mud-drawer--closed) each nav item becomes a centered icon with its label stacked underneath in a small font, so the rail stays fully clickable/navigable. Scoped to the mini + closed + left drawer only, so the expanded drawer and the small-screen overlay are untouched. */ .mud-drawer-pos-left.mud-drawer-mini.mud-drawer--closed .mud-navmenu { padding-left:4px !important; padding-right:4px !important; } .mud-drawer-pos-left.mud-drawer-mini.mud-drawer--closed .mud-navmenu .mud-nav-link { flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1px; padding:6px 2px; min-height:0; border-radius:8px; margin-bottom:1px !important; } .mud-drawer-pos-left.mud-drawer-mini.mud-drawer--closed .mud-navmenu .mud-nav-link .mud-nav-link-icon { min-width:0; margin:0; } /* MudBlazor clips the label in mini mode by shrinking the rail; reinstate it as a wrapped caption under the icon. */ .mud-drawer-pos-left.mud-drawer-mini.mud-drawer--closed .mud-navmenu .mud-nav-link .mud-nav-link-text { display:block !important; opacity:1 !important; width:100%; margin:0 !important; padding:0 !important; font-size:9.5px; line-height:1.15; white-space:normal !important; overflow:visible; text-overflow:clip; letter-spacing:.1px; text-align:center !important; } /* Section captions ("Workspace", "Approvals", "Admin") are just noise in the narrow rail â€” hide them while keeping the items themselves. */ .mud-drawer-pos-left.mud-drawer-mini.mud-drawer--closed .mud-navmenu .svai-nav-section { display:none; } /* Let the left nav scroll when items exceed the viewport height â€” overrides the global `.mud-drawer-content { overflow:hidden }` (line ~552) for the LEFT drawer only, so no menu item is ever hidden. Thin scrollbar, shown only when content actually overflows. Scoped so the right Conversations drawer keeps its own overflow handling. */ .mud-drawer-pos-left .mud-drawer-content { overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; /* Firefox */ scrollbar-color:var(--mud-palette-lines-default) transparent; } .mud-drawer-pos-left .mud-drawer-content::-webkit-scrollbar { /* Chromium/Edge/WebKit */ width:6px; } .mud-drawer-pos-left .mud-drawer-content::-webkit-scrollbar-thumb { background:var(--mud-palette-lines-default); border-radius:3px; } .mud-drawer-pos-left .mud-drawer-content::-webkit-scrollbar-thumb:hover { background:var(--mud-palette-text-secondary); } .mud-drawer-pos-left .mud-drawer-content::-webkit-scrollbar-track { background:transparent; } /* focuses the page

after each navigation, drawing a focus outline around the header until the user clicks. Suppress that ring on the (non-interactive) heading; real controls keep their focus rings. / h1:focus, h1:focus-visible { outline:none; } / ============================================================================ Layout helpers ============================================================================ / .scroll { overflow-y:auto; flex:1; min-height:0; } .content-padded { padding:20px 28px 32px; } / ============================================================================ Page headers ============================================================================ / .page-head { padding:20px 28px 12px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; } .page-head h1 { font-size:22px; font-weight:600; margin:0 0 4px; letter-spacing:-.2px; color:var(--mud-palette-text-primary); } .page-head .sub { font-size:13px; color:var(--mud-palette-text-secondary); } .page-title { font-size:22px; font-weight:600; margin:0 0 4px; letter-spacing:-.2px; color:var(--mud-palette-text-primary); } .page-sub { font-size:13px; color:var(--mud-palette-text-secondary); } / ============================================================================ KPI strip (compact pill) + KPI card (grid tile) ============================================================================ / .kpis { display:flex; gap:10px; } .kpi { background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default); border-radius:10px; padding:10px 14px; min-width:112px; display:flex; flex-direction:column; } .kpi .kv { font-size:18px; font-weight:600; color:var(--mud-palette-text-primary); font-variant-numeric:tabular-nums; } .kpi .kl { font-size:11px; color:var(--mud-palette-text-secondary); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; } .kpi.accent .kv { color:var(--mud-palette-primary); } .kpigrid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin-bottom: 20px; height: stretch; } @media (max-width:1100px) { .kpigrid { grid-template-columns:repeat(3,1fr); } } @media (max-width:680px) { .kpigrid { grid-template-columns:repeat(2,1fr); } } .kpi-card { background:var(--mud-palette-surface); border:0; border-radius:12px; padding:16px 18px; box-shadow:0 1px 3px rgba(20,27,45,.06), 0 8px 20px rgba(20,27,45,.05); display:flex; flex-direction:column; position:relative; overflow:hidden; transition:box-shadow .18s ease, transform .18s ease; } / Light colored accent bar so the cards read as cards, not blank white. / .kpi-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--mud-palette-primary); opacity:.65; } .kpi-card:hover { box-shadow:0 2px 6px rgba(20,27,45,.08), 0 12px 28px rgba(20,27,45,.09); transform:translateY(-1px); } / Clickable KPI card (e.g. Pending Approval â†’ /approvals) / .kpi-card--link { text-decoration:none; color:inherit; cursor:pointer; } .kpi-card--link .kpi-go { position:absolute; top:12px; right:12px; font-size:18px; color:var(--mud-palette-text-secondary); opacity:.45; transition:opacity .18s ease, transform .18s ease, color .18s ease; } .kpi-card--link:hover .kpi-go { opacity:1; transform:translateX(2px); color:var(--mud-palette-primary); } .kpi-card .ol { font-size:10.5px; font-weight:700; color:var(--mud-palette-primary); letter-spacing:.6px; text-transform:uppercase; } .kpi-card .vl { font-size:36px; font-weight:600; margin-top:4px; letter-spacing:-.5px; color:var(--mud-palette-text-primary); font-variant-numeric:tabular-nums; line-height:1.1; } .kpi-card .cp { font-size:12px; color:var(--mud-palette-text-secondary); margin-top:6px; display:flex; align-items:center; gap:4px; } / Up/down delta as a small, friendly tinted pill with a compact arrow. / .kpi-card .cp.up, .kpi-card .cp.down { align-self:flex-start; font-weight:600; font-size:11px; padding:2px 9px 2px 6px; border-radius:999px; gap:2px; margin-top:8px; } .kpi-card .cp.up { color:var(--mud-palette-success); background:rgba(46,125,50,.12); } .kpi-card .cp.down { color:var(--mud-palette-error); background:rgba(211,47,47,.12); } .kpi-card .cp .mud-icon-root, .kpi-card .cp .material-icons { font-size:13px; } .kpi-card .cp.up .mud-icon-root, .kpi-card .cp.down .mud-icon-root { font-size:13px; } / ============================================================================ Dashboard overview â€” 4 KPI cards (2Ã—2) on the left, Approval Workflow panel on the right. Structure ported from the V2 mockup, restyled to the light SAMS theme. Collapses to a single column on narrow screens. ============================================================================ / .dash-overview { display:grid; grid-template-columns:5fr 7fr; gap:16px; margin-bottom:20px; align-items:start; } @media (max-width:900px) { .dash-overview { grid-template-columns:1fr; } } / Left: the 4 KPI cards become a fixed 2Ã—2 grid (overrides the 5-col base). / .kpigrid--quad { grid-template-columns:repeat(2,1fr); margin-bottom:0; } @media (max-width:480px) { .kpigrid--quad { grid-template-columns:1fr; } } / Each left card carries a blue rounded-badge icon in the top-right corner. The value (.vl) is vertically centered in the card and the caption (.cp) is pinned to the bottom, so both line up across the row regardless of content height. / .kpigrid--quad .kpi-card { min-height:148px; } .kpigrid--quad .kpi-card .vl { margin-top:auto; } .kpigrid--quad .kpi-card .cp, .kpigrid--quad .kpi-card .cp.up, .kpigrid--quad .kpi-card .cp.down { margin-top:auto; } .kpi-ic { position:absolute; top:14px; right:14px; box-sizing:content-box; font-size:24px !important; / glyph size / padding:9px; border-radius:12px; background:var(--mud-palette-primary-lighten); / light-blue tint / color:var(--mud-palette-primary) !important; / solid blue glyph / } / â”€â”€ Right: Approval Workflow â€” "progress bar per row" â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ / .aw-panel { margin-bottom:0; height:100%; } .aw-list { display:flex; flex-direction:column; } .aw-row { display:block; text-decoration:none; color:inherit; padding:7px 4px 7px; /border-bottom:1px solid var(--mud-palette-divider);/ transition:background .14s ease; } .aw-row:last-child { border-bottom:0; } .aw-row:hover { background:var(--mud-palette-background-grey); } .aw-head { display:flex; align-items:center; gap:9px; margin-bottom:9px; } .aw-ic { font-size:18px !important; flex:0 0 auto; color:var(--mud-palette-text-secondary); } .aw-label { font-size:13.5px; font-weight:500; color:var(--mud-palette-text-primary); } .aw-count { margin-left:auto; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--mud-palette-text-primary); line-height:1; } / Progress-bar track + proportional fill. Width comes from an inline --aw-pct var. / .aw-bar { height:5px; border-radius:3px; background:var(--mud-palette-divider); overflow:hidden; } .aw-fill { height:100%; border-radius:3px; width:var(--aw-pct,0%); min-width:6px; background:var(--mud-palette-primary); transition:width .5s cubic-bezier(.33,0,.2,1); } / Per-status accent â€” icon, alert-count tint, and bar fill color. / .aw--pending .aw-ic { color:var(--mud-palette-primary); } .aw--pending .aw-count{ color:var(--mud-palette-primary); } .aw--pending .aw-fill { background:var(--mud-palette-primary); } .aw--auto .aw-ic { color:var(--mud-palette-success); } .aw--auto .aw-count{ color:var(--mud-palette-success); } .aw--auto .aw-fill { background:var(--mud-palette-success); } .aw--escalated .aw-ic { color:var(--mud-palette-error); } .aw--escalated .aw-count{ color:var(--mud-palette-error); } .aw--escalated .aw-fill { background:var(--mud-palette-error); } .aw--rejected .aw-ic { color:#FB8C00; } .aw--rejected .aw-count{ color:#FB8C00; } .aw--rejected .aw-fill { background:#FB8C00; } .aw--expired .aw-ic { color:#ffc107; } .aw--expired .aw-count{ color:#ffc107; } .aw--expired .aw-fill { background:#ffc107; } / ============================================================================ Filter bar ============================================================================ / .filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px 28px 14px; } .mud-input { display:flex; align-items:center; background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default); border-radius:6px; padding:0 10px; height:36px; gap:6px; } .mud-input:focus-within { border-color:var(--mud-palette-primary); box-shadow:0 0 0 3px rgba(30,136,229,.12); } .mud-input input, .mud-input select { border:0; outline:none; background:transparent; font:inherit; color:var(--mud-palette-text-primary); width:100%; } .mud-input.search { flex:1; min-width:240px; max-width:380px; } .mud-input .label { font-size:11px; color:var(--mud-palette-text-secondary); font-weight:500; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; } .mud-input .material-icons { color:var(--mud-palette-text-secondary); font-size:18px; } / Filter box that HOSTS a MudBlazor input (e.g. the searchable Provider dropdown). The app's custom `.mud-input` class name collides with MudBlazor's own internal `.mud-input` class, so a MudAutocomplete placed in a `.mud-input` wrapper renders a box-inside-a-box (the stacked look). We use a separate `.flt` wrapper and reset MudBlazor's input chrome inside it so the control sits inline like a native input. / .flt { / horizontal row: icon, label, autocomplete on one line, vertically centered â€” matching the sibling `.mud-input` filters. flex-flow row nowrap guarantees the autocomplete never drops onto a second line below the label. / display:flex; flex-flow:row nowrap; align-items:center; gap:6px; background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default); border-radius:6px; padding:0 10px; height:36px; } .flt:focus-within { border-color:var(--mud-palette-primary); box-shadow:0 0 0 3px rgba(30,136,229,.12); } / icon + label hold their size; the autocomplete takes the remaining width of the row / .flt > .mud-icon-root, .flt > .flt-label { flex:0 0 auto; } .flt .flt-label { font-size:11px; color:var(--mud-palette-text-secondary); font-weight:500; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; } .flt .material-icons, .flt .mud-icon-root { color:var(--mud-palette-text-secondary); font-size:18px; } / the hosted MudAutocomplete: fill the rest of the row, stay vertically centered, and shed MudBlazor's stacked input chrome so it reads like the native inputs beside it. / .flt-ac { flex:1 1 auto; min-width:0; margin:0; } .flt-ac.mud-input-control { display:flex; flex-direction:column; justify-content:center; min-height:0; margin:0; } .flt-ac .mud-input-control-input-container { min-height:0; } .flt-ac .mud-input { margin:0; padding:0; border:0; border-radius:0; height:auto; min-height:0; background:transparent; box-shadow:none; } .flt-ac .mud-input:focus-within { border:0; box-shadow:none; } .flt-ac .mud-input.mud-input-underline::before, .flt-ac .mud-input.mud-input-underline::after { display:none; } .flt-ac .mud-input-slot { padding:0; height:auto; } .flt-ac .mud-input-root { padding:0; font:inherit; color:var(--mud-palette-text-primary); } / Tenant-formatted date filter â€” hosts a MudDatePicker inline inside a `.mud-input` filter box. Native renders in the browser's locale and ignores the tenant's configured date format; the picker honours it via DateFormat="@Dtf.DatePattern". These rules shed MudBlazor's stacked input chrome so the picker reads like the native filter inputs beside it (same reset approach as `.flt-ac` above). / .svai-date { cursor:pointer; } .svai-date .svai-date-pick { flex:1 1 auto; min-width:0; margin:0; } .svai-date .mud-input-control { margin:0; } .svai-date .mud-input { margin:0; padding:0; border:0; border-radius:0; height:auto; min-height:0; background:transparent; box-shadow:none; } .svai-date .mud-input:focus-within { border:0; box-shadow:none; } .svai-date .mud-input.mud-input-underline::before, .svai-date .mud-input.mud-input-underline::after { display:none; } .svai-date .mud-input-slot { padding:0; height:auto; } .svai-date .mud-input-root { padding:0; font:inherit; font-size:13px; color:var(--mud-palette-text-primary); cursor:pointer; } .svai-date .mud-input-root::placeholder { color:var(--mud-palette-text-secondary); opacity:1; } .mud-chipset { display:flex; flex-wrap:wrap; } .mud-chip { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px 0 8px; background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default); border-radius:16px; font-size:12.5px; cursor:pointer; user-select:none; font-family:inherit; color:var(--mud-palette-text-primary); } .mud-chip:hover { background:var(--mud-palette-background-grey); } .mud-chip.on { background:var(--mud-palette-primary-lighten); border-color:var(--mud-palette-primary); color:var(--mud-palette-primary-darken); } .mud-chip .material-icons { font-size:14px; } .mud-chip .dot { width:6px; height:6px; border-radius:50%; } / Escalation status-filter chips â€” badge-tinted background (no leading dot). The active filter keeps its tone and gains an inset ring in the same color. / .mud-chip.esc-filter { padding:0 10px; height:26px; font-weight:500; } .mud-chip.esc-filter.default { background:var(--mud-palette-surface); border-color:var(--mud-palette-lines-default); color:var(--mud-palette-text-secondary); } .mud-chip.esc-filter.warning { background:#FFF4E5; border-color:#FFD9A8; color:#ED6C02; } .mud-chip.esc-filter.info { background:#E1F5FE; border-color:#B3E5FC; color:#0288D1; } .mud-chip.esc-filter.success { background:#E8F5E9; border-color:#C8E6C9; color:#2E7D32; } .mud-chip.esc-filter:hover { filter:brightness(.96); } .mud-chip.esc-filter.on { box-shadow:inset 0 0 0 2px currentColor; font-weight:700; } .divider-v { width:1px; height:22px; background:var(--mud-palette-lines-default); flex-shrink:0; } / ============================================================================ Grid card (data table wrapper) ============================================================================ / .grid-card { margin:0 28px 24px; background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default); border-radius:10px; box-shadow:0 1px 2px rgba(20,27,45,.06); overflow:hidden; display:flex; flex-direction:column; min-height:0; } .grid-toolbar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--mud-palette-divider); gap:12px; flex-shrink:0; } .grid-toolbar .count { font-size:13px; color:var(--mud-palette-text-secondary); } .grid-toolbar .count b { color:var(--mud-palette-text-primary); } .grid-actions { display:flex; gap:4px; } .icon-btn { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--mud-palette-text-secondary); background:transparent; border:0; font-family:inherit; transition:background .12s, color .12s; } .icon-btn:hover { background:var(--mud-palette-background-grey); color:var(--mud-palette-primary); } .icon-btn .material-icons { font-size:18px; } .framed-note { margin:0 28px 18px; background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default); border-radius:8px; padding:8px 12px; font-size:11.5px; color:var(--mud-palette-text-secondary); display:flex; align-items:center; gap:8px; } .framed-note .material-icons { font-size:14px; color:var(--mud-palette-primary); } / ============================================================================ Panels (Dashboard / Settings / misc.) ============================================================================ / .panel { background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default); border-radius:10px; padding:16px; /box-shadow:0 1px 2px rgba(20,27,45,.06);/ } .panel h3 { margin:0 0 10px; font-size:15px; font-weight:600; color:var(--mud-palette-text-primary); display:flex; align-items:center; gap:8px; } .panel h3 .mud-icon-root { font-size:19px; color:var(--mud-palette-primary); flex:0 0 auto; } .dash-grid { display:grid; grid-template-columns:5fr 7fr; gap:16px; margin-bottom:16px; } .dash-grid-2 { display:grid; grid-template-columns:7fr 5fr; gap:16px; } / â”€â”€ Operation Outcome â€” modern gradient gauge KPI card â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ / .oc-head { display:flex; align-items:center; justify-content:space-between; gap:10px; } / year / month filter for the Operation Outcome breakdown / .oc-filter { display:flex; align-items:center; gap:6px; flex:0 0 auto; } .oc-select { font-size:12px; font-weight:600; color:var(--mud-palette-text-primary); background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default); border-radius:8px; padding:4px 8px; cursor:pointer; outline:none; transition:border-color .15s ease; } .oc-select:hover:not(:disabled) { border-color:var(--mud-palette-primary); } .oc-select:focus-visible { border-color:var(--mud-palette-primary); } .oc-select:disabled { opacity:.5; cursor:not-allowed; } .oc-total-chip { font-size:11px; font-weight:600; color:var(--mud-palette-primary); background:var(--mud-palette-primary-lighten); padding:3px 10px; border-radius:11px; white-space:nowrap; } / headline trend pill / .og-trend { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:700; padding:3px 9px 3px 6px; border-radius:11px; white-space:nowrap; } .og-trend .mud-icon-root { font-size:14px; } .og-trend.up { color:var(--mud-palette-success); background:rgba(46,125,50,.12); } .og-trend.down { color:var(--mud-palette-error); background:rgba(211,47,47,.12); } .og-wrap { display:flex; align-items:center; gap:6px; margin-top:2px; } .og-gauge-box { position:relative; flex:0 0 auto; width:206px; } .og-gauge { width:100%; height:auto; aspect-ratio:200 / 124; display:block; overflow:visible; } .og-arc { transition:stroke-width .2s ease; } .oc-animate .og-arc { animation:ogDraw 1.1s cubic-bezier(.33,0,.2,1) both; } @keyframes ogDraw { from { stroke-dasharray:0 100; } to { stroke-dasharray:var(--p) 100; } } / big % + caption, sitting in the open bottom of the semicircle / .og-gauge-center { position:absolute; left:0; right:0; bottom:8px; display:flex; flex-direction:column; align-items:center; pointer-events:none; } .og-pct { font-size:34px; font-weight:700; letter-spacing:-1.5px; line-height:1; color:var(--mud-palette-text-primary); font-variant-numeric:tabular-nums; } .oc-animate .og-pct { animation:ocValueIn .6s ease both .15s; } @keyframes ocValueIn { from { opacity:0; transform:scale(.82); } to { opacity:1; transform:scale(1); } } .og-cap { font-size:10.5px; font-weight:600; letter-spacing:.3px; color:var(--mud-palette-text-secondary); margin-top:3px; } / sparkline column / .og-side { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; padding-top:6px; } .og-side-cap { font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--mud-palette-text-secondary); } .og-side-pct { letter-spacing:0; color:#10B981; font-variant-numeric:tabular-nums; } .og-side-pct .pk { color:var(--mud-palette-text-secondary); font-weight:600; } .og-spark { width:100%; height:48px; display:block; } .og-spark-line { fill:none; stroke:#10B981; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .og-spark-area { stroke:none; } .oc-animate .og-spark-line { stroke-dasharray:340; stroke-dashoffset:340; animation:ogSpark 1.2s ease both .2s; } .oc-animate .og-spark-area { animation:fadeIn .8s ease both .5s; } @keyframes ogSpark { to { stroke-dashoffset:0; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } / outcome stat grid / .og-stats { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--mud-palette-divider); } .oc-animate .og-stats { animation:fadeUp .5s ease both .35s; } @keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } .og-stat { display:flex; align-items:center; gap:8px; font-size:12.5px; padding:2px 0; } .og-stat-dot { width:9px; height:9px; border-radius:3px; flex:0 0 auto; box-shadow:0 1px 2px rgba(0,0,0,.2); } .og-stat-name { color:var(--mud-palette-text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .og-stat-count { margin-left:auto; flex:0 0 auto; font-weight:700; font-variant-numeric:tabular-nums; color:var(--mud-palette-text-primary); } .og-stat-pct { flex:0 0 auto; width:34px; text-align:right; font-size:11px; color:var(--mud-palette-text-secondary); font-variant-numeric:tabular-nums; } .oc-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; height:200px; color:var(--mud-palette-text-secondary); font-size:13px; } .oc-empty .mud-icon-root { font-size:40px; opacity:.4; } / Responsive: collapse the dashboard grid, then stack gauge over sparkline / @media (max-width:900px) { .dash-grid { grid-template-columns:1fr; } } @media (max-width:560px) { .og-wrap { flex-direction:column; align-items:stretch; } .og-gauge-box { align-self:center; } .og-stats { grid-template-columns:1fr; } } .bar-chart { display:flex; align-items:flex-end; gap:4px; height:230px; padding:8px 4px 28px; position:relative; border-left:1px solid var(--mud-palette-lines-default); border-bottom:1px solid var(--mud-palette-lines-default); } .bar-chart .bar { flex:1; background:linear-gradient(180deg,var(--mud-palette-primary) 0%,var(--mud-palette-primary-darken) 100%); border-radius:3px 3px 0 0; position:relative; min-height:2px; } .bar-chart .bar:hover { filter:brightness(1.08); } .bar-chart .lbl { position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); font-size:10.5px; color:var(--mud-palette-text-secondary); font-variant-numeric:tabular-nums; } .bar-chart .vtop { position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--mud-palette-text-primary); font-weight:600; } / Axis titles for the Calls-by-Hour chart â€” the bars already carry per-hour tick labels, these name what each axis MEANS (y = number of calls, x = hour of day). / .bar-chart-wrap { display:flex; align-items:stretch; gap:6px; } .bar-chart-wrap .bar-chart { flex:1; min-width:0; } .bar-chart-wrap .axis-y { flex:0 0 auto; align-self:center; writing-mode:vertical-rl; transform:rotate(180deg); font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--mud-palette-text-secondary); padding-bottom:28px; / offset the chart's x-tick gutter so it centers on the bars / } .axis-x { text-align:center; margin-top:8px; font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--mud-palette-text-secondary); } .mini-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; border-radius: 0px 0px 15px 15px; border: 1px solid #cee5f9; } .mini-table th { background-color: #cee5f9; } .mini-table th, .mini-table td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--mud-palette-divider); } .mini-table th { font-size:10.5px; text-transform:uppercase; color:var(--mud-palette-text-secondary); letter-spacing:.4px; font-weight:600; } .mini-table tr:last-child td { border-bottom:0; } .health-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--mud-palette-divider); } .health-row:last-child { border-bottom:0; } .health-row .hn { flex:1; font-size:13px; color:var(--mud-palette-text-primary); } .health-row .hv { font-size:12px; color:var(--mud-palette-text-secondary); font-variant-numeric:tabular-nums; } .health-row .mud-icon-root { font-size:16px; } / ============================================================================ Pills â€” tone-coded status / outcome / sentiment indicators ============================================================================ / .pill { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:11px; font-size:11.5px; font-weight:500; white-space:nowrap; } .pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; } .pill.success { background:#E8F5E9 !important; color:#2E7D32 !important; } .pill.warning { background:#FFF4E5 !important; color:#ED6C02 !important; } .pill.error { background:#FDECEA !important; color:#D32F2F !important; } .pill.info { background:#E1F5FE !important; color:#0288D1 !important; } .pill.default { background:rgba(0, 0, 0, .08) !important; color:#596174 !important; border:1px solid #E6E8EF !important; } / Theme-blue tone â€” theme primary text on a light tint of the same blue. Used for Cancelled campaign-queue tasks so they read distinct from the gray Pending default. / .pill.primary { background:rgba(30, 136, 229, .12) !important; color:#1E88E5 !important; } / â”€â”€ Active / inactive count pair (Tenants grid: Facilities, Users) â”€â”€ Two labelled pills side by side, green for live and gray for switched off. Each carries its own "Active"/"Inactive" text â€” the count alone made the reader hover to learn which was which. Either pill is dropped entirely at 0, so min-width is what keeps the pair on one left edge across rows whether a count is 1 or 2 digits. / .count-pair { display:flex; align-items:center; gap:5px; } .count-pair .pill { min-width:72px; gap:5px; padding:0 8px; } / ============================================================================ DataGrid cell helpers ============================================================================ / .cell-date .abs { color:var(--mud-palette-text-primary); font-size:13px; } .cell-date .rel { color:var(--mud-palette-text-secondary); font-size:11.5px; font-variant-numeric:tabular-nums; } .cell-patient { display:flex; align-items:center; gap:10px; } .cell-patient .avatar-sm { width:30px; height:30px; border-radius:50%; background:var(--mud-palette-primary-lighten); color:var(--mud-palette-primary-darken); display:grid; place-items:center; font-weight:600; font-size:11.5px; flex-shrink:0; } .cell-patient .name { font-weight:500; line-height:1.2; } .cell-patient .phone { font-size:11.5px; color:var(--mud-palette-text-secondary); font-variant-numeric:tabular-nums; } .cell-dir { display:inline-flex; align-items:center; gap:6px; color:var(--mud-palette-text-secondary); } .cell-dir .mud-icon-root, .cell-dir .material-icons { font-size:15px; } .cell-dir.in .mud-icon-root, .cell-dir.in .material-icons { color:var(--mud-palette-success); } .cell-dir.out .mud-icon-root, .cell-dir.out .material-icons { color:var(--mud-palette-primary); } .cell-dur { font-variant-numeric:tabular-nums; color:var(--mud-palette-text-secondary); text-align:right; } / MudDataGrid row selection / .mud-table-row.mud-selected-item, .mud-data-grid-row.mud-selected-item { background:var(--mud-palette-primary-lighten) !important; } .mud-table-row.mud-selected-item td:first-child, .mud-data-grid-row.mud-selected-item td:first-child { box-shadow:inset 3px 0 0 var(--mud-palette-primary); } / ============================================================================ Conversations drawer ============================================================================ / / Drawer header row / .dh { padding:14px 18px; border-bottom:1px solid var(--mud-palette-divider); display:flex; align-items:center; gap:10px; flex-shrink:0; } .dh .mud-icon-root, .dh .material-icons { color:var(--mud-palette-primary); } .dh .title { font-size:14px; font-weight:600; flex:0 0 auto; } .dh .cid { font-size:11px; color:var(--mud-palette-text-secondary); font-family:'JetBrains Mono',monospace; background:var(--mud-palette-background-grey); padding:2px 6px; border-radius:4px; } / Patient header strip / .patient-hdr { display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--mud-palette-background-grey); border-bottom:1px solid var(--mud-palette-divider); flex-shrink:0; } .patient-hdr .av { width:44px; height:44px; border-radius:50%; background:var(--mud-palette-primary-lighten); color:var(--mud-palette-primary-darken); display:grid; place-items:center; font-weight:600; font-size:15px; flex-shrink:0; } .patient-hdr .name { font-weight:600; font-size:15px; } .patient-hdr .meta { font-size:12px; color:var(--mud-palette-text-secondary); margin-top:2px; display:flex; gap:10px; flex-wrap:wrap; } .patient-hdr .meta .mud-icon-root, .patient-hdr .meta .material-icons { font-size:12px; vertical-align:middle; } .dbody { overflow-y:auto; flex:1; min-height:0; } / Sections / .sec { padding:16px 18px; border-bottom:1px solid var(--mud-palette-divider); } .sec:last-child { border-bottom:0; } .sec-title { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--mud-palette-text-secondary); margin:0 0 10px; display:flex; align-items:center; gap:8px; } .sec-title .tag { font-size:10px; font-weight:600; padding:2px 6px; border-radius:4px; background:var(--mud-palette-primary-lighten); color:var(--mud-palette-primary-darken); letter-spacing:.3px; text-transform:none; } .sec-title .right { margin-left:auto; font-size:11px; font-weight:500; color:var(--mud-palette-text-secondary); text-transform:none; letter-spacing:0; } / AI Summary / .paper-ai { background:linear-gradient(180deg,var(--mud-palette-primary-lighten) 0%,var(--mud-palette-background-grey) 100%); border:1px solid var(--mud-palette-lines-default); border-radius:10px; padding:14px; box-shadow:0 1px 2px rgba(20,27,45,.06); } .paper-ai .row { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .paper-ai .mk { width:22px; height:22px; border-radius:6px; background:var(--mud-palette-primary); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700; } .paper-ai .lb { font-size:11px; color:var(--mud-palette-primary-darken); font-weight:600; letter-spacing:.4px; text-transform:uppercase; } .paper-ai p { margin:0; font-size:13.5px; line-height:1.55; color:var(--mud-palette-text-primary); } / Metadata grid / .meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; } .meta-grid .k { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--mud-palette-text-secondary); margin-bottom:2px; } .meta-grid .v { font-size:13px; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:6px; color:var(--mud-palette-text-primary); } .meta-grid .v .mud-icon-root, .meta-grid .v .material-icons { font-size:14px; color:var(--mud-palette-text-secondary); } / Chat bubbles / .bubble-row { display:flex; margin-bottom:10px; gap:8px; } .bubble-row.ai { justify-content:flex-start; } .bubble-row.patient { justify-content:flex-end; } .bubble { max-width:78%; padding:9px 12px; border-radius:12px; font-size:13px; line-height:1.5; } .bubble-row.ai .bubble { background:var(--mud-palette-background-grey); color:var(--mud-palette-text-primary); border:1px solid var(--mud-palette-lines-default); border-top-left-radius:3px; } .bubble-row.patient .bubble { background:var(--mud-palette-primary); color:#fff; border-top-right-radius:3px; } .bubble .ts { display:block; font-size:10px; opacity:.7; margin-bottom:2px; font-variant-numeric:tabular-nums; } .sp-mk { width:24px; height:24px; border-radius:50%; background:var(--mud-palette-primary); color:#fff; display:grid; place-items:center; flex-shrink:0; align-self:flex-end; } .sp-mk .mud-icon-root, .sp-mk .material-icons { font-size:14px; } / Related calls / .rel-list { display:flex; flex-direction:column; gap:6px; } .rel-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--mud-palette-lines-default); border-radius:6px; background:var(--mud-palette-background-grey); cursor:pointer; transition:background .12s, border-color .12s; } .rel-item:hover { background:var(--mud-palette-primary-lighten); border-color:var(--mud-palette-primary) !important; } .rel-item .when { font-size:12px; color:var(--mud-palette-text-secondary); min-width:92px; font-variant-numeric:tabular-nums; } .rel-item .mud-icon-root, .rel-item .material-icons { font-size:14px; } .rel-item .arrow { margin-left:auto; color:var(--mud-palette-text-disabled); } / Action buttons / .btnrow { display:flex; gap:8px; flex-wrap:wrap; } .btn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:6px; border:1px solid var(--mud-palette-lines-default); background:var(--mud-palette-surface); color:var(--mud-palette-text-primary); font:inherit; font-size:12.5px; font-weight:500; cursor:pointer; } .btn:hover { background:var(--mud-palette-background-grey); } .btn .mud-icon-root, .btn .material-icons { font-size:14px; } .btn.primary { background:var(--mud-palette-primary); color:#fff; border-color:var(--mud-palette-primary); } .btn.primary:hover { background:var(--mud-palette-primary-darken); } / Audio card / .audio-card { background:var(--mud-palette-background-grey); border:1px solid var(--mud-palette-lines-default); border-radius:10px; padding:12px; } .audio-card audio { width:100%; height:36px; outline:none; } .audio-meta { display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:11.5px; color:var(--mud-palette-text-secondary); } .audio-meta a { color:var(--mud-palette-primary); text-decoration:none; font-weight:500; } .audio-meta a:hover { text-decoration:underline; } / Sentiment sparkline / .senti { background:var(--mud-palette-background-grey); border:1px solid var(--mud-palette-lines-default); border-radius:6px; padding:10px 12px; } .senti .lg { display:flex; justify-content:space-between; font-size:10.5px; color:var(--mud-palette-text-secondary); margin-top:4px; font-variant-numeric:tabular-nums; } / MudDrawer override â€” match preview drawer position/shadow / .mud-drawer--right.mud-drawer-open { box-shadow:0 10px 28px rgba(20,27,45,.18),0 4px 12px rgba(20,27,45,.1) !important; } .mud-drawer-content { display:flex; flex-direction:column; overflow:hidden; } / ============================================================================ SearchableMultiSelect â€” searchable + multi-select filter control. Hosted inside a `.mud-input.ms-host` box so the trigger matches the sibling Specialty / Priority filter boxes exactly (same height, border, alignment). ============================================================================ / / Fixed-width box: never grows/shrinks as the selected-text summary changes â€” the summary truncates with an ellipsis instead of stretching the box. (No overflow:hidden here â€” the dropdown menu is absolutely positioned and must escape the box.) / .ms-host { position:relative; flex:0 0 auto; } .ms-root { display:flex; align-items:center; flex:1 1 auto; min-width:0; } / Trigger â€” renders like the native / in a .mud-input (the Approval filter dropdown's Specialty / Priority). The base rule makes the control transparent so it blends into the field chrome, but the browser paints the OPEN option list from the control's own colours — transparent + light text renders as white on white in dark mode, i.e. an unreadable list. Give both the control and its options a real surface colour here; it matches .mud-input's background, so the closed control looks unchanged. / html.svai-dark .mud-input select, html.svai-dark .mud-input select option { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); } / â”€â”€ Native form controls (select boxes) in dark mode â”€â”€ The