/* 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%); } /* ── Responsive vital-card grid (device + person pages) ────────────────── Vital cards sit inside RadzenRow / RadzenColumn (Size="12" SizeMD="6" SizeLG="3"). At mobile widths the column is already full-width, but the card itself has overflow: hidden + no min-width: 0, so CSS grid/flex children refuse to shrink below intrinsic content size — producing the +50 px overflow at 390 px viewport. .device-activity__row is a 3-col grid (64px 22px 1fr); the fixed 64px time column + rail + body can push the row wider than the viewport on very narrow screens. Fix: min-width: 0 on .vital-card lets the card shrink inside its RadzenColumn. max-width: 100% clips it to column width. The device-activity__row grid gets overflow-x: hidden to clip any residual overflow without reflowing the timeline layout. !important is required on .vital-card because the scoped rule (.vital-card[b-xxxx]) has specificity 0-2-0 while a plain global .vital-card is 0-1-0 — the scoped rule would otherwise win. */ @media (max-width: 480px) { .vital-card { min-width: 0 !important; max-width: 100% !important; } .device-activity__row { overflow-x: hidden; min-width: 0; } } @media (min-width: 481px) and (max-width: 768px) { .vital-card { min-width: 0 !important; max-width: 100% !important; } } /* ════════════════════════════════════════════════════════════════════ Shared device/person editorial system — extracted from the three page .razor.css files to remove triplication. Byte-identical across all three; page-specific rules remain in each page's scoped .razor.css. Global so one copy applies to all three pages; loaded after the scoped bundle so it owns these selectors once the scoped copies are removed. device-crumbs removed — Device/Person/Persons pages migrated to AppPageHeader. ════════════════════════════════════════════════════════════════════ */ /* === Active-alarm strip ============================================ Sits above the device header when device.Alarms has anything live. Built around the `--rz-danger` token rather than a hardcoded red so the bar follows whatever the active theme uses for danger. */ .device-alert { background: var(--rz-danger); color: var(--rz-on-danger, #fff); border-radius: 14px; padding: 16px 22px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin-bottom: 18px; box-shadow: 0 6px 24px -8px color-mix(in srgb, var(--rz-danger) 50%, transparent); position: relative; overflow: hidden; } .device-alert::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% 50%, rgba(255, 255, 255, 0.08), transparent 55%); pointer-events: none; } .device-alert__icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); display: grid; place-items: center; flex-shrink: 0; color: var(--rz-on-danger, #fff); } .device-alert__body { min-width: 0; } .device-alert__title { font-family: var(--cw-sans); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: inherit; } .device-alert__when { font-family: var(--cw-sans); font-size: 14px; font-weight: 400; opacity: 0.85; margin-left: 4px; } .device-alert__sub { margin-top: 4px; font-size: 13px; color: inherit; opacity: 0.85; } .device-alert__actions { display: flex; gap: 8px; flex-shrink: 0; } /* The Radzen buttons inside the bar need to override Radzen's defaults to read on the danger background. !important is grudgingly used here to win against Radzen's component CSS specificity. */ ::deep .device-alert__btn-ghost { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.25) !important; color: var(--rz-on-danger, #fff) !important; } ::deep .device-alert__btn-ghost:hover { background: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.4) !important; } .device-alert__btn-primary { display: inline-flex; align-items: center; padding: 6px 14px; background: #fff; color: var(--rz-danger); border-radius: 4px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid #fff; transition: background 0.15s, transform 0.05s; line-height: 1.4; } .device-alert__btn-primary:hover { background: color-mix(in srgb, var(--rz-text-color) 4%, var(--rz-panel-background-color)); color: var(--rz-danger); } .device-alert__btn-primary:active { transform: translateY(1px); } @media (max-width: 700px) { .device-alert { grid-template-columns: auto 1fr; grid-template-rows: auto auto; } .device-alert__actions { grid-column: 1 / -1; justify-content: flex-end; } } /* === Section wrappers (no card chrome) ============================ Mockup design: each section header + its content sits directly on the page background, with individual elements (vital tiles, event cards, location panel) as the only "boxes". Drops the RadzenCard wrappers we used to have around hero / health-data. */ .device-section { margin-bottom: 28px; } .device-section__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; padding: 0 4px; } ::deep .device-section__title { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.015em !important; color: var(--rz-text-color); margin: 0 !important; } /* Hero — was wrapped in RadzenCard, now just a layout container. Sits on the page bg; the avatar + name + pills + actions read as page-level chrome rather than content-inside-a-card. */ .device-header { padding: 8px 4px 0; } /* === Hero header refinements ====================================== */ ::deep .device-hero__name { font-size: 36px !important; font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; margin-bottom: 10px !important; color: var(--rz-text-color); } /* Identity meta line — under the H4 name. Plain mono ID + connection state + clinic-mode label, separated by mid-dots. No pills here; the pills row below carries warn/info surface. */ .device-hero__id-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--rz-text-secondary-color); font-size: 13px; } .device-hero__sep { color: var(--rz-text-disabled-color, var(--rz-border-color)); } .device-hero__connstate { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; } .device-hero__connstate--ok { color: var(--rz-success); } .device-hero__connstate--off { color: var(--rz-danger); } .device-hero__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Wearer card — same skeleton as PersonPage's `.person-devices__card` but inverted: this is the device page, so the section card shows the one wearer this device is assigned to. Click opens the person scope. Avatar uses primary colour to echo `.db-person__avatar` from Home. Section is hidden entirely when the device has no PersonId. */ .device-wearer-section { display: flex; flex-direction: column; gap: 10px; } .device-wearer__hint { font-size: 11.5px; color: var(--rz-text-secondary-color); margin-left: auto; } .device-wearer__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .device-wearer__card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--rz-panel-background-color); border: 1px solid var(--rz-border-color); border-left: 3px solid var(--rz-primary); border-radius: 12px; text-decoration: none; color: inherit; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .device-wearer__card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); border-color: var(--rz-text-disabled-color); border-left-color: var(--rz-primary); } .device-wearer__card--alert { border-color: var(--rz-danger); border-left-color: var(--rz-danger); } .device-wearer__top { display: flex; align-items: center; gap: 14px; } .device-wearer__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--rz-primary); color: var(--rz-on-primary, #fff); display: grid; place-items: center; font-weight: 700; font-size: 18px; letter-spacing: 0.01em; flex: 0 0 auto; } .device-wearer__id { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .device-wearer__name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .device-wearer__name { font-weight: 700; font-size: 16px; color: var(--rz-text-color); line-height: 1.2; } .device-wearer__pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; } .device-wearer__pill--default { background: color-mix(in srgb, var(--rz-primary) 14%, transparent); color: var(--rz-primary); } .device-wearer__sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--rz-text-secondary-color); } .device-wearer__sub-cell { display: inline-flex; align-items: center; gap: 4px; } .device-wearer__age { margin-left: 4px; color: var(--rz-text-disabled-color); } .device-wearer__sub-sep { color: var(--rz-text-disabled-color); } ::deep .device-wearer__sub .rzi { color: var(--rz-text-secondary-color) !important; font-size: 14px !important; } .device-wearer__meta { display: flex; flex-wrap: wrap; gap: 8px; } .device-wearer__alarm { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--rz-danger) 12%, transparent); color: var(--rz-danger); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; } ::deep .device-wearer__alarm .rzi { color: var(--rz-danger) !important; font-size: 14px !important; } .device-wearer__foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--rz-border-color); padding-top: 8px; font-size: 12px; color: var(--rz-text-secondary-color); } .device-wearer__arrow { color: var(--rz-text-disabled-color); font-weight: 600; } /* Status pills row — only renders when there's something to surface. The hero stays calm when the device is healthy. */ .device-hero__pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; } .device-hero__pills:empty { display: none; } .device-hero__pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.4; border: 1px solid transparent; background: color-mix(in srgb, var(--rz-text-color) 8%, var(--rz-panel-background-color)); color: var(--rz-text-color); } .device-hero__pill--warn { background: color-mix(in srgb, var(--rz-warning) 10%, var(--rz-panel-background-color)); color: var(--rz-warning-darker, var(--rz-warning)); border-color: color-mix(in srgb, var(--rz-warning) 35%, transparent); } .device-hero__pill--crit { background: color-mix(in srgb, var(--rz-danger) 10%, var(--rz-panel-background-color)); color: var(--rz-danger); border-color: color-mix(in srgb, var(--rz-danger) 35%, transparent); } .device-hero__pill--info { background: color-mix(in srgb, var(--rz-info) 10%, var(--rz-panel-background-color)); color: var(--rz-info); border-color: color-mix(in srgb, var(--rz-info) 35%, transparent); } /* === Stats strip — inline meta row, no card chrome ================ Mockup style: stats live on the page bg, separated by thin divider lines, no border/bg/radius around the whole strip. Reads as a sub- header rather than a panel. */ .device-stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: transparent; border: 0; border-radius: 0; border-top: 1px solid var(--rz-border-color); border-bottom: 1px solid var(--rz-border-color); overflow: visible; padding: 0; } @media (max-width: 900px) { .device-stats-strip { grid-template-columns: repeat(2, 1fr); } .device-stat:nth-child(2) { border-right: 0 !important; } .device-stat:nth-child(-n+2) { border-bottom: 1px solid var(--rz-border-color); } } @media (max-width: 500px) { .device-stats-strip { grid-template-columns: 1fr; } .device-stat { border-right: 0 !important; border-bottom: 1px solid var(--rz-border-color); } .device-stat:last-child { border-bottom: 0; } } .device-stat { padding: 16px 22px 16px 0; border-right: 1px solid var(--rz-border-color); position: relative; } .device-stat + .device-stat { padding-left: 22px; } .device-stat:last-child { border-right: 0; padding-right: 0; } .device-stat .cw-eyebrow { font-size: 10.5px; margin-bottom: 8px; } .device-stat__value { display: flex; align-items: baseline; gap: 6px; line-height: 1; } .device-stat__value .cw-numerical { font-size: 28px; color: var(--rz-text-color); } .device-stat__word { font-size: 18px; font-weight: 700; font-family: var(--cw-sans); color: var(--rz-text-color); line-height: 1.2; letter-spacing: -0.01em; } .device-stat__unit { font-size: 14px; color: var(--rz-text-secondary-color); font-weight: 500; } .device-stat__sub { margin-top: 6px; font-size: 12px; color: var(--rz-text-secondary-color); } .device-stat.warn .device-stat__value .cw-numerical { color: var(--rz-warning); } .device-stat.crit .device-stat__value .cw-numerical { color: var(--rz-danger); } .device-stat.ok .device-stat__value .cw-numerical { color: var(--rz-success); } .device-stat.ok .device-stat__word { color: var(--rz-success); } .device-stat.off .device-stat__word { color: var(--rz-danger); } /* === M2 Vital tile — soft per-vital gradient, big number ============ Click anywhere opens the per-vital drawer. Each tile's color comes from the per-vital tokens in editorial.css. Theme-aware: backgrounds use --rz-panel-background-color so dark themes invert correctly. */ .vital-card { background: var(--rz-panel-background-color); border: 1px solid var(--rz-border-color); border-radius: var(--cw-radius); padding: 22px; height: 100%; cursor: pointer; position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .15s; display: flex; flex-direction: column; gap: 18px; } .vital-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.10); } .vital-card:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 2px; } /* Soft gradient blob in the upper-right of each tile — the per-vital color signature without overpowering the content. */ .vital-card__grad { position: absolute; right: -50px; top: -50px; width: 200px; height: 200px; border-radius: 50%; opacity: 0.55; pointer-events: none; filter: blur(40px); z-index: 0; } .vital-card--bp .vital-card__grad { background: var(--cw-bp-soft); } .vital-card--hr .vital-card__grad { background: var(--cw-hr-soft); } .vital-card--temp .vital-card__grad { background: var(--cw-temp-soft); } .vital-card--spo2 .vital-card__grad { background: var(--cw-spo2-soft); } .vital-card--hrv .vital-card__grad { background: var(--cw-hrv-soft); } .vital-card--glu .vital-card__grad { background: var(--cw-glu-soft); } .vital-card--steps .vital-card__grad { background: var(--cw-steps-soft); } .vital-card__top { display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; } .vital-card__icon { width: 32px; height: 32px; border-radius: var(--cw-radius-xs); display: grid; place-items: center; color: white; flex-shrink: 0; } .vital-card--bp .vital-card__icon { background: var(--cw-bp); } .vital-card--hr .vital-card__icon { background: var(--cw-hr); } .vital-card--temp .vital-card__icon { background: var(--cw-temp); } .vital-card--spo2 .vital-card__icon { background: var(--cw-spo2); } .vital-card--hrv .vital-card__icon { background: var(--cw-hrv); } .vital-card--glu .vital-card__icon { background: var(--cw-glu); } .vital-card--steps .vital-card__icon { background: var(--cw-steps); } ::deep .vital-card__icon .rzi { font-size: 18px !important; color: white !important; } .vital-card__name { font-size: 12.5px; font-weight: 700; color: var(--rz-text-color); text-transform: uppercase; letter-spacing: 0.1em; } .vital-card__value { font-family: var(--cw-sans); font-size: 40px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; color: var(--rz-text-color); font-feature-settings: "tnum" 1, "lnum" 1; } .vital-card--abnormal .vital-card__value { color: var(--rz-danger); } .vital-card__value .vital-card__slash { color: var(--rz-text-disabled-color, var(--rz-border-color)); font-weight: 500; } .vital-card__unit { margin-top: 4px; font-size: 13px; color: var(--rz-text-secondary-color); font-weight: 500; } .vital-card__when { margin-top: 12px; font-size: 12px; color: var(--rz-text-secondary-color); position: relative; z-index: 1; } .vital-card__when b { color: var(--rz-text-color); font-weight: 600; } .vital-card__when-sep { margin: 0 4px; color: var(--rz-text-disabled-color, var(--rz-border-color)); } .vital-card__context { color: var(--rz-text-color); font-weight: 600; } .vital-card--abnormal .vital-card__context { color: var(--rz-danger); } /* === Ring + value-block layout (M2 device-page direction) ========== Two-column row inside the card body: 72px SVG donut on the left showing the value's position within the typical range, big number block on the right. The ring is decorative — see VitalRingPercent in DevicePage.razor for the (clamped, simplistic) percent math. */ .vital-card__ring-row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 18px; position: relative; z-index: 1; } .vital-card__ring { width: 64px; height: 64px; position: relative; flex-shrink: 0; } .vital-card__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .vital-card__ring circle { fill: none; stroke-width: 5; stroke-linecap: round; } .vital-card__ring-track { stroke: color-mix(in srgb, var(--rz-text-color) 8%, transparent); } .vital-card__ring-fill { transition: stroke-dasharray .6s ease-out; } .vital-card--bp .vital-card__ring-track { stroke: var(--cw-bp-soft); } .vital-card--bp .vital-card__ring-fill { stroke: var(--cw-bp); } .vital-card--hr .vital-card__ring-track { stroke: var(--cw-hr-soft); } .vital-card--hr .vital-card__ring-fill { stroke: var(--cw-hr); } .vital-card--temp .vital-card__ring-track { stroke: var(--cw-temp-soft); } .vital-card--temp .vital-card__ring-fill { stroke: var(--cw-temp); } .vital-card--spo2 .vital-card__ring-track { stroke: var(--cw-spo2-soft); } .vital-card--spo2 .vital-card__ring-fill { stroke: var(--cw-spo2); } .vital-card--hrv .vital-card__ring-track { stroke: var(--cw-hrv-soft); } .vital-card--hrv .vital-card__ring-fill { stroke: var(--cw-hrv); } .vital-card--glu .vital-card__ring-track { stroke: var(--cw-glu-soft); } .vital-card--glu .vital-card__ring-fill { stroke: var(--cw-glu); } .vital-card--steps .vital-card__ring-track { stroke: var(--cw-steps-soft); } .vital-card--steps .vital-card__ring-fill { stroke: var(--cw-steps); } .vital-card--abnormal .vital-card__ring-fill { stroke: var(--rz-danger); } .vital-card__ring-center { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--cw-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--rz-text-secondary-color); font-feature-settings: "tnum" 1; } .vital-card--bp .vital-card__ring-center { color: var(--cw-bp); } .vital-card--hr .vital-card__ring-center { color: var(--cw-hr); } .vital-card--temp .vital-card__ring-center { color: var(--cw-temp); } .vital-card--spo2 .vital-card__ring-center { color: var(--cw-spo2); } .vital-card--hrv .vital-card__ring-center { color: var(--cw-hrv); } .vital-card--glu .vital-card__ring-center { color: var(--cw-glu); } .vital-card--steps .vital-card__ring-center { color: var(--cw-steps); } .vital-card--abnormal .vital-card__ring-center { color: var(--rz-danger); } .vital-card__v-block { min-width: 0; } .vital-card__empty { font-size: 14px; color: var(--rz-text-disabled-color); font-weight: 500; margin-top: 12px; } /* Abnormal pill — top-right corner, replaces the old border-left */ .vital-card__pill { position: absolute; top: 18px; right: 18px; background: var(--rz-danger); color: var(--rz-on-danger, #fff); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; line-height: 1.2; z-index: 2; } /* Sleep / unsupported tile — muted treatment */ .vital-card--unsupported { background: color-mix(in srgb, var(--rz-text-color) 4%, var(--rz-panel-background-color)); border-style: dashed; cursor: default; opacity: 0.65; } .vital-card--unsupported:hover { transform: none; box-shadow: none; } /* Steps progress bar — used in the Steps tile only */ .vital-card__progress { margin-top: 12px; height: 6px; background: color-mix(in srgb, var(--rz-text-color) 8%, var(--rz-panel-background-color)); border-radius: 999px; overflow: hidden; position: relative; z-index: 1; } .vital-card__progress-fill { height: 100%; border-radius: 999px; background: var(--cw-steps); } /* === Per-vital detail drawer ====================================== */ .vital-drawer__backdrop { position: fixed; inset: 0; background: rgba(20, 18, 16, 0.32); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 9998; animation: cwBackdropIn .22s ease-out; } @keyframes cwBackdropIn { from { opacity: 0; } to { opacity: 1; } } .vital-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 540px; max-width: 92vw; background: var(--rz-panel-background-color); box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.25); /* Sit comfortably above Leaflet's max stack (controls at 1000) and any future popup overlays. isolation: isolate guards the value even if some ancestor briefly creates a stacking context (e.g. during the slide-in transform animation). */ isolation: isolate; z-index: 9999; display: flex; flex-direction: column; overflow: hidden; animation: cwDrawerIn .35s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes cwDrawerIn { from { transform: translateX(105%); } to { transform: translateX(0); } } .vital-drawer__head { padding: 22px 26px; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; border-bottom: 1px solid var(--rz-border-color); flex-shrink: 0; } .vital-drawer--bp .vital-drawer__head { background: linear-gradient(135deg, var(--cw-bp-soft) 0%, var(--rz-panel-background-color) 60%); } .vital-drawer--hr .vital-drawer__head { background: linear-gradient(135deg, var(--cw-hr-soft) 0%, var(--rz-panel-background-color) 60%); } .vital-drawer--temp .vital-drawer__head { background: linear-gradient(135deg, var(--cw-temp-soft) 0%, var(--rz-panel-background-color) 60%); } .vital-drawer--spo2 .vital-drawer__head { background: linear-gradient(135deg, var(--cw-spo2-soft) 0%, var(--rz-panel-background-color) 60%); } .vital-drawer--hrv .vital-drawer__head { background: linear-gradient(135deg, var(--cw-hrv-soft) 0%, var(--rz-panel-background-color) 60%); } .vital-drawer--glu .vital-drawer__head { background: linear-gradient(135deg, var(--cw-glu-soft) 0%, var(--rz-panel-background-color) 60%); } .vital-drawer--steps .vital-drawer__head { background: linear-gradient(135deg, var(--cw-steps-soft) 0%, var(--rz-panel-background-color) 60%); } .vital-drawer__lead { display: flex; gap: 14px; align-items: center; min-width: 0; } .vital-drawer__icon { width: 44px !important; height: 44px !important; border-radius: 14px !important; } .vital-drawer--bp .vital-drawer__icon { background: var(--cw-bp); } .vital-drawer--hr .vital-drawer__icon { background: var(--cw-hr); } .vital-drawer--temp .vital-drawer__icon { background: var(--cw-temp); } .vital-drawer--spo2 .vital-drawer__icon { background: var(--cw-spo2); } .vital-drawer--hrv .vital-drawer__icon { background: var(--cw-hrv); } .vital-drawer--glu .vital-drawer__icon { background: var(--cw-glu); } .vital-drawer--steps .vital-drawer__icon { background: var(--cw-steps); } ::deep .vital-drawer__icon .rzi { font-size: 22px !important; } .vital-drawer__title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--rz-text-color); } .vital-drawer__sub { margin-top: 4px; font-size: 12.5px; color: var(--rz-text-secondary-color); } .vital-drawer__close { width: 36px; height: 36px; border-radius: 10px; background: var(--rz-panel-background-color); border: 1px solid var(--rz-border-color); color: var(--rz-text-secondary-color); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: border-color .12s, color .12s; } .vital-drawer__close:hover { border-color: var(--rz-text-color); color: var(--rz-text-color); } .vital-drawer__stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rz-border-color); } .vital-drawer__stat { padding: 16px 18px; border-right: 1px solid var(--rz-border-color); } .vital-drawer__stat:last-child { border-right: 0; } .vital-drawer__stat .cw-eyebrow { font-size: 10px; } .vital-drawer__stat-num { margin-top: 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; color: var(--rz-text-color); font-feature-settings: "tnum" 1; } .vital-drawer__stat-sub { margin-top: 4px; font-size: 11.5px; color: var(--rz-text-secondary-color); font-family: var(--cw-mono); } .vital-drawer__chart { padding: 18px 24px 12px; border-bottom: 1px solid var(--rz-border-color); } .vital-drawer__readings { padding: 18px 24px; flex: 1; overflow-y: auto; border-bottom: 1px solid var(--rz-border-color); } .vital-drawer__readings::-webkit-scrollbar { width: 6px; } .vital-drawer__readings::-webkit-scrollbar-thumb { background: var(--rz-border-color); border-radius: 3px; } .vital-drawer__readings-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .vital-drawer__readings-head h3 { font-size: 14px; font-weight: 700; color: var(--rz-text-color); } .vital-drawer__readings-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .vital-drawer__readings-list li { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rz-border-color); font-size: 13px; gap: 12px; } .vital-drawer__readings-list li:last-child { border-bottom: 0; } .vital-drawer__reading-when { color: var(--rz-text-secondary-color); font-family: var(--cw-mono); font-size: 12px; } .vital-drawer__reading-val { font-family: var(--cw-mono); font-weight: 700; color: var(--rz-text-color); font-feature-settings: "tnum" 1; font-size: 14px; } .vital-drawer__reading-unit { margin-left: 4px; font-weight: 500; color: var(--rz-text-secondary-color); font-size: 11px; } .vital-drawer__reading--abnormal .vital-drawer__reading-val { color: var(--rz-danger); } .vital-drawer__empty { text-align: center; color: var(--rz-text-disabled-color); font-size: 13px; padding: 36px 0; } .vital-drawer__foot { padding: 16px 22px; background: color-mix(in srgb, var(--rz-text-color) 4%, var(--rz-panel-background-color)); display: flex; gap: 8px; border-top: 1px solid var(--rz-border-color); flex-shrink: 0; } ::deep .vital-drawer__btn { flex: 1; justify-content: center; } /* Footer secondary buttons (Outlined/Light) blend into the tinted foot bar — give the non-primary drawer buttons a clear panel background + stronger border so "View in table" reads as a button, not a label. */ ::deep .vital-drawer__btn:not(.vital-drawer__btn--primary) { background: var(--rz-panel-background-color) !important; border: 1px solid var(--rz-text-color) !important; color: var(--rz-text-color) !important; } ::deep .vital-drawer__btn:not(.vital-drawer__btn--primary):hover { background: color-mix(in srgb, var(--rz-text-color) 8%, var(--rz-panel-background-color)) !important; } /* === Activity section header + filter chips ====================== */ /* Activity + Positions sections both sit in panels, mirroring the chrome of the `vital-card` tiles above so the page reads as a stack of related cards rather than sections floating flat into the page. No hover lift / cursor: pointer — the panels are static, only their inner chips, rows and map are interactive. */ .device-activity__panel, .device-location__panel { background: var(--rz-panel-background-color); border: 1px solid var(--rz-border-color); border-radius: var(--cw-radius); padding: 22px; } .device-location__panel { margin-bottom: 18px; } .device-activity__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .device-activity__head-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .device-activity__head-eyebrow { font-family: var(--cw-mono); font-size: 11.5px; color: var(--rz-text-secondary-color); font-feature-settings: "tnum" 1; } .device-activity__filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .device-activity__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rz-border-color); background: var(--rz-panel-background-color); color: var(--rz-text-secondary-color); font-family: var(--cw-sans); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color .12s, background .12s, color .12s; } .device-activity__chip:hover { border-color: var(--rz-text-color); color: var(--rz-text-color); } .device-activity__chip.is-active { background: var(--rz-text-color); color: var(--rz-panel-background-color); border-color: var(--rz-text-color); } .device-activity__chip-count { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--rz-text-color) 8%, transparent); color: var(--rz-text-secondary-color); font-feature-settings: "tnum" 1; } .device-activity__chip.is-active .device-activity__chip-count { background: rgba(127, 127, 127, 0.28); color: inherit; } ::deep .device-activity__chip .rzi { font-size: 13px !important; color: inherit !important; } .device-activity__chip--mode { padding-right: 12px; } .device-activity__div { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--rz-border-color); } /* Vital filter strip — second row of chips below the activity head, shown only in table mode. Soft top divider so it reads as a sub-row, not a duplicate of the head. Reuses .device-activity__chip / .is-active for chip styling. */ .device-activity__filters--vitals { margin-top: 10px; margin-bottom: 18px; padding-top: 10px; border-top: 1px dashed var(--rz-border-color); } /* === Activity feed — vertical-rail timeline (Direction-C polish) === Three-column row: time gutter | rail (line + colored dot) | event body. The rail line is a per-row ::before that abuts neighbours so the line stays continuous within a day; day separators span the full width and visually break the line, matching the "earlier today" rule cuts in mockup C. */ .device-activity__feed { list-style: none; margin: 0; max-width: 760px; padding: 0; display: flex; flex-direction: column; gap: 0; } /* === Day separator — left-aligned bold label that earns its weight from typography + breathing room, not a heavy rule. */ .device-activity__day-sep { list-style: none; padding: 28px 0 8px; margin: 0; } .device-activity__day-sep:first-child { padding-top: 0; } .device-activity__day-sep-label { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rz-text-color); font-feature-settings: "tnum" 1; } /* === Event row — 3-col grid: time | rail | body ==================== */ .device-activity__row { list-style: none; display: grid; grid-template-columns: 64px 22px 1fr; gap: 0; margin: 0; padding: 0; align-items: stretch; /* Solid reads more present than dashed at the same opacity, and a higher contrast lets the eye trust each row as a horizontal unit. */ border-bottom: 1px solid color-mix(in srgb, var(--rz-text-color) 18%, transparent); } /* Drop the separator under the very last row AND under any row that immediately precedes a day separator — the day-sep block already provides the visual break, so a line under the last row of the day would compete with it. `:has` is supported in all evergreen browsers. */ .device-activity__row:last-of-type, .device-activity__row:has(+ .device-activity__day-sep) { border-bottom: none; } .device-activity__time { text-align: right; padding: 14px 12px 0 0; font-family: var(--cw-mono); font-feature-settings: "tnum" 1; } .device-activity__time-clock { font-size: 13px; color: var(--rz-text-color); font-weight: 600; line-height: 1.2; } .device-activity__time-rel { font-size: 9.5px; color: var(--rz-text-disabled-color); letter-spacing: 0.05em; margin-top: 1px; } /* === Rail — continuous vertical line + per-event colored dot ======= */ .device-activity__rail { position: relative; } .device-activity__rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; /* Theme-neutral mid-grey so the line reads against both light and dark panels — `--rz-border-color` was too faint to track. */ background: color-mix(in srgb, var(--rz-text-color) 22%, transparent); transform: translateX(-50%); } .device-activity__rail-dot { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--rz-text-secondary-color); /* 3px panel-color ring punches the dot away from the rail line so the disc reads as a node, not a smudge on the line. */ box-shadow: 0 0 0 3px var(--rz-panel-background-color); z-index: 2; } .device-activity__rail-dot--alarm { background: var(--rz-danger); } .device-activity__rail-dot--position { background: var(--cw-spo2); } .device-activity__rail-dot--battery { background: var(--rz-warning, var(--cw-temp)); } .device-activity__rail-dot--bp { background: var(--cw-bp); } .device-activity__rail-dot--hr { background: var(--cw-hr); } .device-activity__rail-dot--temp { background: var(--cw-temp); } .device-activity__rail-dot--spo2 { background: var(--cw-spo2); } .device-activity__rail-dot--hrv { background: var(--cw-hrv); } .device-activity__rail-dot--steps { background: var(--cw-steps); } .device-activity__rail-dot--glu { background: var(--cw-glu); } .device-activity__row--crit .device-activity__rail-dot { background: var(--rz-danger); } .device-activity__row--warn .device-activity__rail-dot { background: var(--rz-warning, var(--cw-temp)); } /* === Event body — full card or mini line =========================== */ .device-activity__body { padding: 8px 0 8px 14px; min-width: 0; } .device-activity__event { background: var(--rz-panel-background-color); border: 1px solid var(--rz-border-color); border-radius: var(--cw-radius-sm); padding: 14px 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } /* Critical events get the full mockup-C treatment: solid red border on all sides, soft red gradient washing in from the top-left corner, and a low-opacity red drop shadow for depth. The eye lands on these instantly even in a long feed. */ .device-activity__event--crit { border: 1px solid var(--rz-danger); background: linear-gradient(135deg, color-mix(in srgb, var(--rz-danger) 10%, var(--rz-panel-background-color)) 0%, var(--rz-panel-background-color) 55%); box-shadow: 0 4px 18px -4px color-mix(in srgb, var(--rz-danger) 22%, transparent); } /* Warn events get the same shape with the warning hue at a lower intensity — a softer cousin to the crit treatment. */ .device-activity__event--warn { border: 1px solid color-mix(in srgb, var(--rz-warning, var(--cw-temp)) 65%, var(--rz-border-color)); background: linear-gradient(135deg, color-mix(in srgb, var(--rz-warning, var(--cw-temp)) 8%, var(--rz-panel-background-color)) 0%, var(--rz-panel-background-color) 55%); box-shadow: 0 3px 14px -4px color-mix(in srgb, var(--rz-warning, var(--cw-temp)) 18%, transparent); } .device-activity__event-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .device-activity__event-name { font-size: 14px; font-weight: 700; color: var(--rz-text-color); line-height: 1.3; } .device-activity__event--crit .device-activity__event-name { color: var(--rz-danger); } .device-activity__event-tag { font-family: var(--cw-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--rz-text-disabled-color); text-transform: uppercase; flex: none; white-space: nowrap; } .device-activity__event-value { font-family: var(--cw-sans); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--rz-text-color); font-feature-settings: "tnum" 1; } .device-activity__event--crit .device-activity__event-value { color: var(--rz-danger); } .device-activity__event-unit { font-size: 12px; font-weight: 500; color: var(--rz-text-secondary-color); margin-left: 4px; } .device-activity__event-baseline { margin-top: 4px; font-size: 12px; color: var(--rz-text-secondary-color); font-weight: 500; } .device-activity__event--crit .device-activity__event-baseline { color: var(--rz-danger); } .device-activity__event-desc { margin-top: 6px; font-size: 12.5px; color: var(--rz-text-secondary-color); } .device-activity__event-actions { margin-top: 12px; display: flex; gap: 8px; } /* === Summary card (4b adaptive collapse) ========================= When a vital fires 4+ readings in a day, BuildEventFeed collapses them into a single card whose body is split: stats on the left (latest value + range/avg) and a sparkline on the right showing the day's trajectory. Sparkline scales to whatever range the readings span — so a flat day looks flat, a spike pops out. */ .device-activity__event--summary .device-activity__event-summary { display: grid; grid-template-columns: 1fr minmax(140px, 1.6fr); gap: 16px; /* `stretch` lets the chart column grow to the card's full height (the stats column drives the height) instead of centering the chart at a fixed 44px. */ align-items: stretch; margin-top: 4px; } .device-activity__event-summary-stats { min-width: 0; } .device-activity__event-range { margin-top: 4px; font-family: var(--cw-mono); font-size: 11.5px; color: var(--rz-text-secondary-color); font-feature-settings: "tnum" 1; } .device-activity__sparkline { width: 100%; /* SVG fills the plot column's flex space (axis row sits below at its natural height); a small min-height keeps narrow cards readable. */ flex: 1 1 auto; min-height: 36px; color: var(--rz-text-color); overflow: visible; } /* Chart wrapper — y-axis labels on the left, plot column on the right (svg above, time-axis below). Mirrors medpractice's VitalsBrowser layout so the two apps read the same. Wrapper fills its summary-grid cell so the chart matches the stats column's height. */ .device-activity__chart { display: grid; grid-template-columns: 26px 1fr; gap: 4px; min-width: 0; height: 100%; min-height: 56px; } .device-activity__chart-y-axis { position: relative; height: 100%; } .device-activity__chart-y-axis > span { position: absolute; right: 0; transform: translateY(-50%); line-height: 1; font-family: var(--cw-mono, ui-monospace, monospace); font-size: 9.5px; color: var(--rz-text-secondary-color); font-feature-settings: "tnum" 1; white-space: nowrap; } .device-activity__chart-plot { display: flex; flex-direction: column; gap: 2px; min-width: 0; height: 100%; } .device-activity__chart-axis { font-family: var(--cw-mono, ui-monospace, monospace); font-size: 9.5px; line-height: 1; color: var(--rz-text-secondary-color); font-feature-settings: "tnum" 1; } .device-activity__chart-axis--ends { display: flex; justify-content: space-between; padding: 0 1px; } .device-activity__chart-axis--per-bar { display: grid; text-align: center; } .device-activity__chart-axis--per-bar > span { overflow: hidden; text-overflow: clip; } /* BP bars carry semantic up/down via fill colour (currentColor for normal, danger for abnormal); no need for the per-vital tint that coloured the polyline. */ .device-activity__sparkline--bars { color: var(--cw-bp); } /* Per-vital sparkline tinting — picks up the same vital colour the rail dot uses, so a glance maps the chart back to its source. */ .device-activity__event--bp .device-activity__sparkline { color: var(--cw-bp); } .device-activity__event--hr .device-activity__sparkline { color: var(--cw-hr); } .device-activity__event--temp .device-activity__sparkline { color: var(--cw-temp); } .device-activity__event--spo2 .device-activity__sparkline { color: var(--cw-spo2); } .device-activity__event--hrv .device-activity__sparkline { color: var(--cw-hrv); } .device-activity__event--steps .device-activity__sparkline { color: var(--cw-steps); } .device-activity__event--glu .device-activity__sparkline { color: var(--cw-glu); } .device-activity__event--summary.device-activity__event--warn .device-activity__sparkline { color: var(--rz-warning, var(--cw-temp)); } .device-activity__event--summary.device-activity__event--crit .device-activity__sparkline { color: var(--rz-danger); } /* === Mini row — compact line for in-range readings ================= */ .device-activity__mini { display: flex; align-items: baseline; gap: 10px; padding: 6px 0 6px 2px; color: var(--rz-text-secondary-color); font-size: 12.5px; } .device-activity__mini-name { color: var(--rz-text-secondary-color); font-weight: 500; } .device-activity__mini-val { font-feature-settings: "tnum" 1; color: var(--rz-text-color); font-weight: 600; } .device-activity__mini-tag { margin-left: auto; font-family: var(--cw-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--rz-text-disabled-color); text-transform: uppercase; } .device-activity__empty { text-align: center; color: var(--rz-text-disabled-color); font-size: 13px; padding: 36px 0; } /* === Take-reading FAB =========================================== */ .device-fab { position: fixed; right: 32px; bottom: 32px; background: var(--rz-text-color); color: var(--rz-panel-background-color); border: 0; height: 60px; padding: 0 26px 0 18px; border-radius: 999px; font-family: var(--cw-sans); font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 12px; box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.15); cursor: pointer; /* Leaflet stacks its panes (200–700) and controls (≥800) inside the map container; if .rz-body doesn't establish a stacking context the FAB's z-index competes directly with those. Sit above Leaflet's max so the button stays clickable when the map is on the page. */ z-index: 1080; transition: transform .2s, box-shadow .2s; } .device-fab:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -8px rgba(0, 0, 0, 0.45), 0 6px 14px rgba(0, 0, 0, 0.2); } .device-fab__plus { width: 36px; height: 36px; background: var(--cw-hr); border-radius: 50%; display: grid; place-items: center; } ::deep .device-fab__plus .rzi { color: white !important; font-size: 22px !important; } .device-fab__backdrop { position: fixed; inset: 0; background: rgba(20, 18, 16, 0.16); z-index: 1070; } .device-fab__sheet { position: fixed; right: 32px; bottom: 108px; width: 320px; max-width: calc(100vw - 64px); background: var(--rz-panel-background-color); border: 1px solid var(--rz-border-color); border-radius: var(--cw-radius-sm); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.25); z-index: 1075; overflow: hidden; animation: cwSheetIn .3s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes cwSheetIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .device-fab__sheet-head { padding: 12px 18px; border-bottom: 1px solid var(--rz-border-color); display: flex; align-items: center; justify-content: space-between; } .device-fab__sheet-head .cw-eyebrow { font-size: 10.5px; } .device-fab__close { width: 28px; height: 28px; border: 0; background: transparent; color: var(--rz-text-secondary-color); border-radius: 6px; cursor: pointer; display: grid; place-items: center; } .device-fab__close:hover { background: color-mix(in srgb, var(--rz-text-color) 8%, var(--rz-panel-background-color)); color: var(--rz-text-color); } .device-fab__list { list-style: none; margin: 0; padding: 6px 0; max-height: 360px; overflow-y: auto; } .device-fab__opt { width: 100%; background: transparent; border: 0; padding: 12px 18px; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; transition: background .12s; font-family: var(--cw-sans); } .device-fab__opt:hover { background: color-mix(in srgb, var(--rz-text-color) 8%, var(--rz-panel-background-color)); } .device-fab__opt-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--cw-hr); color: white; display: grid; place-items: center; flex-shrink: 0; } ::deep .device-fab__opt-ic .rzi { color: white !important; font-size: 16px !important; } .device-fab__opt-body { flex: 1; min-width: 0; } .device-fab__opt-name { font-size: 14px; font-weight: 600; color: var(--rz-text-color); } .device-fab__opt-cmd { font-size: 11px; color: var(--rz-text-secondary-color); margin-top: 2px; } /* === Location section ============================================ */ .device-location-head { margin: 32px 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; padding: 0 4px; } ::deep .device-location-head__title { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.015em !important; margin: 0 !important; color: var(--rz-text-color); } .device-location-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--rz-text-secondary-color); font-size: 13px; } .device-location-head__when { color: var(--rz-text-color); font-weight: 500; } .device-location-head__sep { color: var(--rz-text-disabled-color, var(--rz-border-color)); } .device-map { border-radius: 0; overflow: hidden; border: 0; } /* === Location panel (P4) ========================================== */ .device-loc-panel { background: var(--rz-panel-background-color); border: 1px solid var(--rz-border-color); border-radius: var(--cw-radius); overflow: hidden; display: grid; grid-template-columns: 320px 1fr; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.04); margin-bottom: 0; } @media (max-width: 950px) { .device-loc-panel { grid-template-columns: 1fr; } } .device-loc-side { display: flex; flex-direction: column; border-right: 1px solid var(--rz-border-color); background: var(--rz-panel-background-color); } @media (max-width: 950px) { .device-loc-side { border-right: 0; border-bottom: 1px solid var(--rz-border-color); } } .device-loc-filters { display: flex; gap: 6px; padding: 18px 18px 14px; border-bottom: 1px solid var(--rz-border-color); } .device-loc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rz-border-color); background: var(--rz-panel-background-color); color: var(--rz-text-secondary-color); font-family: var(--cw-sans); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color .12s, background .12s; } .device-loc-chip:hover { border-color: var(--rz-text-color); } .device-loc-chip.is-active { background: var(--rz-text-color); color: var(--rz-panel-background-color); border-color: var(--rz-text-color); } .device-loc-chip__count { font-family: var(--cw-mono); font-size: 10.5px; color: var(--rz-text-disabled-color); margin-left: 2px; } .device-loc-chip.is-active .device-loc-chip__count { color: color-mix(in srgb, var(--rz-panel-background-color) 75%, transparent); } .device-loc-chip__pip { width: 6px; height: 6px; border-radius: 50%; background: var(--rz-danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rz-danger) 25%, transparent); } .device-loc-list { flex: 1; overflow-y: auto; max-height: 480px; } .device-loc-list::-webkit-scrollbar { width: 6px; } .device-loc-list::-webkit-scrollbar-thumb { background: var(--rz-border-color); border-radius: 3px; } .device-loc-item { width: 100%; background: transparent; border: 0; padding: 12px 18px 12px 22px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; text-align: left; cursor: pointer; position: relative; transition: background .12s; border-bottom: 1px solid var(--rz-border-color); font-family: var(--cw-sans); } .device-loc-item:last-child { border-bottom: 0; } .device-loc-item:hover { background: color-mix(in srgb, var(--rz-text-color) 3%, transparent); } .device-loc-item__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background .15s; } .device-loc-item.is-selected { background: color-mix(in srgb, var(--rz-text-color) 4%, transparent); } .device-loc-item--alarm.is-selected { background: color-mix(in srgb, var(--rz-danger) 6%, transparent); } .device-loc-item--live.is-selected { background: color-mix(in srgb, var(--rz-info) 6%, transparent); } .device-loc-item.is-selected .device-loc-item__bar { background: var(--rz-text-color); } .device-loc-item--alarm.is-selected .device-loc-item__bar { background: var(--rz-danger); } .device-loc-item--live.is-selected .device-loc-item__bar { background: var(--rz-info); } .device-loc-item__ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: white; flex-shrink: 0; } .device-loc-item--alarm .device-loc-item__ic { background: var(--rz-danger); } .device-loc-item--live .device-loc-item__ic { background: var(--rz-info); } ::deep .device-loc-item__ic .rzi { font-size: 14px !important; color: white !important; } .device-loc-item__body { min-width: 0; } .device-loc-item__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .device-loc-item__title { font-size: 13.5px; font-weight: 600; color: var(--rz-text-color); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .device-loc-item__when { font-family: var(--cw-mono); font-size: 11px; color: var(--rz-text-secondary-color); flex-shrink: 0; } .device-loc-item__sub { margin-top: 3px; font-size: 12px; color: var(--rz-text-secondary-color); } .device-loc-empty { padding: 32px 24px; text-align: center; color: var(--rz-text-disabled-color); font-size: 13px; } /* Map column inside the panel — stretch the column edges, no padding */ ::deep .device-loc-mapwrap { padding: 0 !important; flex-basis: auto !important; } .device-loc-mapwrap > #map { border-radius: 0 var(--cw-radius) var(--cw-radius) 0; height: 100%; min-height: 460px; } @media (max-width: 950px) { .device-loc-mapwrap > #map { border-radius: 0; min-height: 320px; } }