/* M2 type system + design tokens — Plus Jakarta Sans (single sans), JetBrains Mono for numerics + codes. Wired site-wide; Radzen components inherit because they don't hardcode font-family. Pure typography + utility classes — color/spacing stay on Radzen tokens so theming (light/dark/etc.) keeps working. */ :root { --cw-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --cw-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Per-vital color tokens for the M2 ring tiles. Each pair: a saturated value for icons / pins / accents, and a soft companion for tile backgrounds and gradient washes. Tuned to read in light theme; the soft variants are alpha-mixed so they auto-adapt under dark themes. */ --cw-bp: #E11D48; --cw-bp-soft: color-mix(in srgb, #E11D48 14%, var(--rz-panel-background-color, white)); --cw-hr: #F26B1F; --cw-hr-soft: color-mix(in srgb, #F26B1F 14%, var(--rz-panel-background-color, white)); --cw-temp: #D97706; --cw-temp-soft: color-mix(in srgb, #D97706 14%, var(--rz-panel-background-color, white)); --cw-spo2: #0EA5E9; --cw-spo2-soft: color-mix(in srgb, #0EA5E9 14%, var(--rz-panel-background-color, white)); --cw-hrv: #7C3AED; --cw-hrv-soft: color-mix(in srgb, #7C3AED 14%, var(--rz-panel-background-color, white)); --cw-glu: #C026D3; --cw-glu-soft: color-mix(in srgb, #C026D3 14%, var(--rz-panel-background-color, white)); --cw-steps: #16A34A; --cw-steps-soft: color-mix(in srgb, #16A34A 14%, var(--rz-panel-background-color, white)); /* M2 radius scale — generous, friendly */ --cw-radius: 24px; --cw-radius-sm: 14px; --cw-radius-xs: 10px; /* === Dashboard density tokens (--cw-d-*) ============================ Convention: --cw-d-* are scoped to the dashboard (Home.razor). Other pages do not read them. The data-density attribute on swaps these values; only Monitor (read-only, wall-display, abnormal-flood treatment) overrides — Normal is the :root default. Dense was retired: it didn't deliver value beyond shrinking chrome and the additive promises (battery icon, online dot, hover chips) ended up making the row noisier rather than denser. */ /* Card grid + table-row layout */ --cw-d-card-min: 260px; --cw-d-card-pad: 14px; --cw-d-card-gap: 14px; --cw-d-row-pad-y: 10px; --cw-d-row-pad-x: 14px; --cw-d-row-gap: 8px; /* KPI strip */ --cw-d-kpi-pad-y: 14px; --cw-d-kpi-pad-x: 18px; --cw-d-kpi-val-size: 26px; --cw-d-kpi-lbl-size: 11px; /* Hero (welcome area) */ --cw-d-hero-title: 48px; --cw-d-hero-pad-b: 24px; /* Card chrome */ --cw-d-card-name-size: 15px; --cw-d-card-sub-size: 12px; --cw-d-card-pip-pad: 3px 10px; --cw-d-card-pip-size: 12px; --cw-d-card-vital-size: 16px; --cw-d-card-vital-lbl: 9.5px; --cw-d-card-avatar: 44px; --cw-d-patient-avatar: 48px; --cw-d-patient-pad: 22px; --cw-d-patient-min-h: 280px; /* Row chrome */ --cw-d-row-avatar: 40px; --cw-d-row-name-size: 15px; --cw-d-row-sub-size: 12px; --cw-d-row-cell-size: 13px; /* Visibility flags — set to "none" in monitor to hide elements */ --cw-d-action-display: inline-flex; --cw-d-footer-display: flex; --cw-d-notes-display: block; } html[data-density="monitor"] { /* Monitor — wall-display read-only mode. The brief: "show me everyone, and make abnormal pop". Vitals get a room-readable bump (18px values, bigger card numbers) at the cost of slightly taller rows than dense had — the trade matters because a 13px crit reading is invisible across a ward. The CSS Home.razor.css layers on top adds the background-flood treatment for crit/warn cells + alarm rows. */ --cw-d-card-min: 220px; --cw-d-card-pad: 12px; --cw-d-card-gap: 8px; --cw-d-row-pad-y: 8px; --cw-d-row-pad-x: 12px; --cw-d-row-gap: 3px; --cw-d-kpi-pad-y: 8px; --cw-d-kpi-pad-x: 12px; --cw-d-kpi-val-size: 24px; --cw-d-kpi-lbl-size: 10px; --cw-d-hero-title: 20px; --cw-d-hero-pad-b: 10px; --cw-d-card-name-size: 15px; --cw-d-card-sub-size: 11px; --cw-d-card-pip-pad: 1px 7px; --cw-d-card-pip-size: 11px; --cw-d-card-vital-size: 20px; /* readable from across a ward */ --cw-d-card-vital-lbl: 10px; --cw-d-card-avatar: 32px; --cw-d-patient-avatar: 32px; --cw-d-patient-pad: 12px; --cw-d-patient-min-h: auto; --cw-d-row-avatar: 28px; --cw-d-row-name-size: 14px; --cw-d-row-sub-size: 11px; --cw-d-row-cell-size: 14px; --cw-d-action-display: none; --cw-d-footer-display: none; --cw-d-notes-display: none; } html, body { font-family: var(--cw-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display ramp — raw heading elements + Radzen helper classes for the `` API. M2 stays sans-serif, weight bold, tighter letter-spacing for hierarchy. */ h1, h2, h3, h4, h5, h6, .rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6, .rz-text-display-h1, .rz-text-display-h2, .rz-text-display-h3, .rz-text-display-h4 { font-family: var(--cw-sans); font-weight: 700; letter-spacing: -0.015em; } code, pre, kbd, samp, .cw-mono, .rz-code { font-family: var(--cw-mono); font-feature-settings: "tnum" 1; } /* Numerical display — for big tile numbers, vital values, etc. Sans bold, tabular figures, tight tracking. */ .cw-numerical { font-family: var(--cw-sans); font-feature-settings: "tnum" 1, "lnum" 1; font-weight: 700; letter-spacing: -0.025em; line-height: 1; } /* Editorial eyebrow — caps label above big numbers / as section primer. */ .cw-eyebrow { font-family: var(--cw-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rz-text-secondary-color, var(--rz-text-color)); line-height: 1.4; } /* Subdued ID strings (device IDs, MAC addresses) — mono with restrained color so they read as metadata without dominating. */ .cw-id { font-family: var(--cw-mono); font-size: 12px; color: var(--rz-text-secondary-color); font-feature-settings: "tnum" 1; } /* === Shared M2 button cluster ==================================== Used by the dashboard hero and the device-page hero so both pages look identical. Three sizes/shapes: .cw-btn default — icon + text label .cw-btn.cw-btn--icon square icon-only (refresh / logout / etc.) .cw-btn.cw-btn--accent primary CTA (orange) */ .cw-btn { background: var(--rz-panel-background-color); border: 1px solid var(--rz-border-color); color: var(--rz-text-color); padding: 9px 16px; border-radius: 12px; font-family: var(--cw-sans); font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: border-color .12s, background .12s, transform .05s; line-height: 1.3; } .cw-btn:hover { border-color: var(--rz-text-secondary-color); } .cw-btn:active { transform: translateY(1px); } .cw-btn--icon { padding: 9px; aspect-ratio: 1; justify-content: center; } .cw-btn--accent { background: var(--rz-primary); color: var(--rz-on-primary, white); border-color: var(--rz-primary); } .cw-btn--accent:hover { background: var(--rz-primary-dark, var(--rz-primary)); border-color: var(--rz-primary-dark, var(--rz-primary)); } .cw-action-cluster { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* === Reusable M2-style dialog body ================================= Used by Profile dialog and Settings dialog. The Radzen dialog frame provides the title bar; we provide the tab strip, sections, fields and footer. Globally scoped (no ::deep) so any dialog content can pull these classes in. */ /* Make the Radzen dialog body host our cw-dialog as a flex column. `height: 100%` on a flex item doesn't resolve reliably across browsers, so we turn the host itself into a flex column and let cw-dialog flex into it. Also drop the host padding (we own our own gutters now). */ .rz-dialog-content:has(> .cw-dialog) { padding: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; /* Radzen defaults to flex:0 1 auto on .rz-dialog-content, so it sizes to its content and leaves empty space below the cw-dialog inside the fixed-height dialog frame. Force it to fill the frame so the foot can actually reach the bottom. */ flex: 1 1 auto !important; min-height: 0 !important; } .cw-dialog { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; /* allow the inner section to shrink + scroll */ } /* Tab strip — restyle Radzen tabs to underlined-active */ .cw-dialog-tabs > .rz-tabview-nav-container { background: var(--rz-panel-background-color) !important; border-bottom: 1px solid var(--rz-border-color) !important; } .cw-dialog-tabs .rz-tabview-nav { padding: 0 22px !important; background: transparent !important; border: 0 !important; gap: 0 !important; margin: 0 !important; } .cw-dialog-tabs .rz-tabview-nav li { background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; color: var(--rz-text-secondary-color) !important; transition: color .12s, border-color .12s; margin-bottom: -1px !important; } .cw-dialog-tabs .rz-tabview-nav li a, .cw-dialog-tabs .rz-tabview-nav li button { padding: 14px 18px !important; font-family: var(--cw-sans) !important; font-size: 14px !important; font-weight: 500 !important; color: inherit !important; background: transparent !important; } .cw-dialog-tabs .rz-tabview-nav li:hover { color: var(--rz-text-color) !important; background: transparent !important; } .cw-dialog-tabs .rz-tabview-nav li.rz-tabview-selected { color: var(--rz-text-color) !important; border-bottom-color: var(--rz-primary, #F26B1F) !important; background: transparent !important; } .cw-dialog-tabs .rz-tabview-nav li.rz-tabview-selected a, .cw-dialog-tabs .rz-tabview-nav li.rz-tabview-selected button { font-weight: 700 !important; } /* Make the tab component stretch so the foot can pin to the dialog bottom. Each layer down to .cw-dialog-section participates in the flex chain. */ .cw-dialog-tabs { flex: 1 1 auto; min-height: 0; display: flex !important; flex-direction: column !important; } .cw-dialog-tabs .rz-tabview-panels { background: transparent !important; border: 0 !important; padding: 0 !important; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .cw-dialog-tabs .rz-tabview-panel { background: transparent !important; border: 0 !important; padding: 0 !important; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* Section body */ .cw-dialog-section { padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; flex: 1; } .cw-dialog-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rz-text-secondary-color); margin-bottom: 4px; } /* Form fields — label above bordered input */ .cw-dialog-field { display: flex; flex-direction: column; gap: 6px; } .cw-dialog-field label, .cw-dialog-field > .label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rz-text-secondary-color); } .cw-dialog-readonly { padding: 10px 14px; background: color-mix(in srgb, var(--rz-text-color) 4%, var(--rz-panel-background-color)); border: 1px solid var(--rz-border-color); border-radius: 10px; font-family: var(--cw-mono); font-size: 13px; color: var(--rz-text-color); font-feature-settings: "tnum" 1; } .cw-dialog-field .rz-textbox, .cw-dialog-field .rz-dropdown, .cw-dialog-field .rz-password, .cw-dialog-field .rz-numeric, .cw-dialog-field input[type=text], .cw-dialog-field input[type=password], .cw-dialog-field input[type=number] { width: 100% !important; height: 42px !important; padding: 10px 14px !important; background: var(--rz-panel-background-color) !important; border: 1px solid var(--rz-border-color) !important; border-radius: 10px !important; font-family: var(--cw-sans) !important; font-size: 14px !important; color: var(--rz-text-color) !important; transition: border-color .12s, box-shadow .12s !important; } .cw-dialog-field .rz-textbox:focus, .cw-dialog-field .rz-dropdown:focus, .cw-dialog-field .rz-password:focus, .cw-dialog-field .rz-numeric:focus, .cw-dialog-field input:focus { outline: 0 !important; border-color: var(--rz-primary, #F26B1F) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rz-primary, #F26B1F) 15%, transparent) !important; } /* Toggle row (switches with name + description) */ .cw-dialog-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: color-mix(in srgb, var(--rz-text-color) 4%, var(--rz-panel-background-color)); border: 1px solid var(--rz-border-color); border-radius: 10px; } .cw-dialog-toggle-row__name { font-size: 14px; font-weight: 600; color: var(--rz-text-color); } .cw-dialog-toggle-row__desc { margin-top: 2px; font-size: 12px; color: var(--rz-text-secondary-color); } /* Action row */ .cw-dialog-action-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: var(--rz-panel-background-color); border: 1px solid var(--rz-border-color); border-radius: 10px; } .cw-dialog-action-row--danger { border-color: color-mix(in srgb, var(--rz-danger) 30%, var(--rz-border-color)); background: color-mix(in srgb, var(--rz-danger) 4%, var(--rz-panel-background-color)); } .cw-dialog-action-row__name { font-size: 14px; font-weight: 600; color: var(--rz-text-color); } .cw-dialog-action-row__desc { margin-top: 2px; font-size: 12px; color: var(--rz-text-secondary-color); } .cw-dialog-warning-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: color-mix(in srgb, var(--rz-warning) 8%, var(--rz-panel-background-color)); border: 1px solid color-mix(in srgb, var(--rz-warning) 35%, transparent); border-radius: 10px; } .cw-dialog-footnote { margin-top: 12px; font-size: 11.5px; color: var(--rz-text-disabled-color, var(--rz-text-secondary-color)); } /* Footer (Cancel + Save) */ .cw-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; background: color-mix(in srgb, var(--rz-text-color) 4%, var(--rz-panel-background-color)); border-top: 1px solid var(--rz-border-color); flex-shrink: 0; } /* Radzen sets `.rz-body { transform: translateZ(0) }` for hw-accelerated scrolling. That makes .rz-body the containing block for any `position: fixed` descendant, which breaks our take-reading FAB and the per-vital drawer (they end up positioned relative to .rz-body's box, not the viewport — so the FAB drifts off-screen as content grows, and the drawer doesn't cover the page). Disabling it gets fixed positioning back without measurable scroll-perf impact in our testing. Also paints the editorial twin-corner radial-gradient wash (warm HR on the top-left, cool SpO2 on the bottom-right) over the theme's own layout body background. background-attachment: fixed pins the wash to the viewport so it doesn't scroll with content. The HR and SpO2 hues are constants — alpha is bumped on html[data-theme="dark"] so the tint stays visible on the dark canvas. The same data-theme attribute is set by the boot script in index.html, so the boot splash and the loaded app share one source of truth (saved user preference, then prefers-color-scheme, then light). */ .rz-body { transform: none !important; background-image: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--cw-hr) 8%, transparent) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--cw-spo2) 7%, transparent) 0%, transparent 65%); background-attachment: fixed; background-repeat: no-repeat; } html[data-theme="dark"] .rz-body { background-image: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--cw-hr) 14%, transparent) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--cw-spo2) 12%, transparent) 0%, transparent 65%); }