/* OpComm light/dark. Own-CSS tokens + chrome. Syncfusion stays a one-line stylesheet swap with no component overrides. data-theme on . */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } /* Blazor enhanced-nav programmatically focuses the page heading on route change. Suppress the pointer/script ring; keep keyboard :focus-visible. Same rule as Platform Portal app.css — do not scope this to a wrapper class. */ :is(h1, h2):focus:not(:focus-visible) { outline: none; box-shadow: none; } /* Light defaults match the pre-token hardcoded values so unthemed surfaces do not shift. Dark redefines the same names. */ :root { --oc-band-bg: #ADCDFD; --oc-band-fg: #253C80; --oc-band-accent-from: #4285f4; --oc-band-accent-to: #356dc9; --oc-band-accent-hover-from: #5e98f7; --oc-band-accent-hover-to: #4285f4; --oc-band-accent-selected-from: #79abff; --oc-surface: #ffffff; --oc-surface-border: #E7E7E7; --oc-border-subtle: #e2e8f0; --oc-text: #000000; --oc-text-muted: #9F9F9F; --oc-chrome-text: #253C80; --oc-progress-track: #f0f0f0; --oc-chip-pending-bg: #F2F2F2; --oc-chip-pending-fg: #7F7F7F; --oc-chip-pending-bd: #7F7F7F; --oc-chip-progress-bg: #ffff00; --oc-chip-progress-fg: #3a3822; --oc-chip-progress-bd: #b7ab31; --oc-chip-completed-bg: #BBEEB8; --oc-chip-completed-fg: #38803D; --oc-chip-completed-bd: #52B358; --oc-chip-cancelled-bg: #F8C8C8; --oc-chip-cancelled-fg: #C00000; --oc-chip-cancelled-bd: #E56D6D; --oc-chip-discharged-bg: #4184f1; --oc-chip-discharged-fg: #fff; --oc-chip-discharged-bd: #051733; --oc-chip-noshow-bg: orange; --oc-chip-noshow-fg: #fff; --oc-chip-noshow-bd: #8d6213; --oc-chip-transparent-fg: #000; --oc-chip-transparent-bd: #666; /* Roster reachability confidence (duration-windowed, never a fault). */ --oc-chip-reach-grey-bg: #EEF1F6; --oc-chip-reach-grey-fg: #5B6472; --oc-chip-reach-grey-bd: #C9D4E6; --oc-chip-reach-amber-bg: #FFF3DE; --oc-chip-reach-amber-fg: #8A5A10; --oc-chip-reach-amber-bd: #E0B15A; /* Same tenant pill in both themes (Lightbox round-5). Logos stay on a light well. */ --oc-asset-well-bg: #f1f5f9; --oc-asset-well-pad: 4px 10px; --oc-asset-well-radius: 8px; --oc-asset-well-fg: #253C80; --oc-asset-well-muted: #4b5563; --oc-asset-well-margin: 6px 0; --oc-input-bg: #ffffff; --oc-input-fg: #253C80; --oc-input-border: #ccc; --oc-menu-bg: #ffffff; --oc-menu-fg: #1a202c; --oc-menu-item-fg: #4a5568; --oc-menu-border: #ccc; --oc-menu-hover-bg: #f0f0f0; --oc-menu-hover-fg: #1a202c; --oc-menu-selected-bg: #E6F0FE; --oc-menu-selected-fg: #1a365d; --oc-menu-accent-hover-bg: #253C80; --oc-menu-accent-hover-fg: #ffffff; --oc-control-hover-bg: #f0f4ff; --oc-nav-muted: #8593A9; --oc-nav-fg: #2C3E70; --oc-nav-link-fg: #7F7F7F; --oc-nav-hover-bg: rgba(27, 42, 107, 0.06); --oc-nav-selected-bg: #E6F0FE; --oc-nav-selected-fg: #1a365d; --nav-fg: var(--oc-nav-fg); --nav-hover-bg: var(--oc-nav-hover-bg); --nav-selected-bg: var(--oc-nav-selected-bg); --nav-selected-fg: var(--oc-nav-selected-fg); /* Expanded rail: 24px column, 20px drawing (2-unit inset on a 24 viewBox). Collapsed rail (52px) overrides the box to 18px in NavMenu.razor.css. One SVG source; stroke 1.75. */ --nav-icon-size: 20px; --nav-icon-box: 24px; --oc-nav-active-bg: #E3ECF7; --oc-nav-active-fg: #1B2A6B; --oc-strip-bg: #F7F9FC; --oc-strip-border: #E3E8F0; --oc-strip-title: #5B6472; --oc-card-title: #1B2A6B; --oc-card-sub: #64748B; --oc-card-border: #ECEEF2; --oc-card-hover-border: #C9D4E6; /* Case-details pass 3. Light border is visible (was transparent). */ --oc-context-card-bg: #ffffff; --oc-context-card-border: #E7E7E7; --oc-context-card-hover-bg: #f9fbff; --oc-section-bar-bg: #CEE1FE; --oc-section-bar-fg: #253C80; --oc-section-bar-bd: #253C80; --oc-section-bar-icon-bg: #253C80; --oc-section-bar-icon-fg: #ffffff; --oc-section-bar-done-bg: #BDEDB9; --oc-section-bar-done-fg: #548F56; --oc-section-bar-done-bd: #548F56; --oc-section-bar-done-icon-bg: #52B358; --oc-icon-accent: #ffffff; --oc-col-header-bg: #f5f5f5; --oc-col-header-fg: #253C80; --oc-col-header-border: #e0e0e0; --oc-splitter: #e0e0e0; --oc-panel-bg: #ffffff; --oc-check-outline: #D1D5DB; --oc-staff-card-bg: #ffffff; --oc-staff-card-border: #E7E7E7; --oc-staff-card-fg: #000000; --oc-staff-header-bg: #ADCDFD; --oc-staff-header-fg: #253C80; --oc-staff-action-bg: #233986; --oc-staff-action-hover-bg: #1a2c6a; --oc-chat-bg: #ffffff; --oc-chat-sent-bg: #007AFF; --oc-chat-sent-fg: #ffffff; --oc-chat-received-bg: #E9ECEF; --oc-chat-received-fg: #333333; --oc-chat-meta: #666666; --oc-chat-empty-fg: #2B439C; --oc-chat-composer-bg: #ffffff; --oc-chat-composer-border: #dddddd; --oc-family-sent-bg: #404040; --oc-family-sent-fg: #ffffff; --oc-family-received-bg: #1976d3; --oc-family-received-fg: #ffffff; --oc-invite-bg: #2B439C; --oc-invite-fg: #ffffff; --oc-invite-disabled-bg: #e3f2fd; --oc-invite-disabled-fg: #1976d2; --oc-participants-bar-bg: #bbdefb; --oc-participants-bar-fg: #333333; /* Corridor strip v2 (option C). Never red — overdue clock owns that. --oc-step-active is amber (hue ~30°), ≥4.5:1 on --oc-surface for ring + caption. */ --oc-step-done: #2f54d0; --oc-step-active: #aa6118; --oc-step-pending: #c3cadd; --oc-step-pulse: #f8e3cc; --oc-step-pulse-mid: #fdf2e4; --oc-step-line: #d7dcea; --oc-step-check-fg: #ffffff; /* Notification Settings / bell panel / presence pill leftovers. */ --oc-panel-header-bg: #e6f0ff; --oc-panel-header-fg: #1a365d; --oc-panel-nested-bg: #f0f7ff; --oc-switch-track: #cbd5e0; --oc-switch-track-on: #3182ce; --oc-switch-knob: #ffffff; --oc-pill-bg: #f3f4f6; --oc-pill-fg: #111827; --oc-pill-border: #e5e7eb; --oc-pill-hover-bg: #e9ebef; /* (b) designed prominence — light chip in both themes. */ --oc-pill-prominent-bg: #f3f4f6; --oc-pill-prominent-fg: #111827; --oc-pill-prominent-border: #e5e7eb; /* Person presence (Active / Away / Off / DND). One mapping for header, team-list, avatar, staff tab. Semantic colours — same in both themes. */ --presence-active: #22c55e; --presence-away: #f59e0b; --presence-off: #9ca3af; --presence-dnd: #ef4444; /* Chrome (header / nav / page). Dark bar is darker than --oc-surface. */ --oc-chrome-bg: #ffffff; --oc-chrome-border: #e2e8f0; --oc-scrollbar-size: 10px; --oc-scrollbar-track: var(--oc-strip-bg); --oc-scrollbar-thumb: var(--oc-nav-muted); --oc-scrollbar-thumb-hover: var(--oc-nav-fg); --oc-chrome-muted: #718096; --oc-chrome-faint: #a0aec0; --oc-chrome-sep: #CBD5E0; --oc-page-bg: #ffffff; --oc-body-bg: #F5F5F5; --oc-page-bg-muted: #f8f9fa; --oc-nav-legal: #0e3876; --oc-nav-active-solid: #1a365d; --oc-nav-active-solid-fg: #ffffff; --oc-on-accent: #ffffff; --oc-danger: #e53e3e; --oc-danger-hover-bg: #fff5f5; --oc-link: #007bff; --oc-link-alt: #0078d4; --oc-spinner: #80bdef; --oc-overlay-bg: rgba(255, 255, 255, 0.8); --oc-notify-bg: #000033; --oc-brand-orange: #E95A28; --oc-index-text: #333333; --oc-index-spin-outer: #90a7d6; --oc-wait-from: #000080; --oc-wait-mid: #000060; --oc-wait-accent: #335599; --oc-wait-panel: #264482; --oc-wait-inner: #000000d0; --oc-ui-overlay: #f8f9fa; --oc-ui-spinner-track: #e9ecef; --oc-ui-spinner-fg: #007bff; --oc-ui-spinner-text: #6c757d; /* Line accents locked to mobile app-icon hues (same both themes). */ --oc-line-or: #B45309; --oc-line-stroke: #6D28D9; --oc-line-stemi: #B91C1C; --oc-line-transfer: #0F766E; --oc-line-trauma: #C2410C; --oc-line-icu: #1D4ED8; --oc-line-surgery: #15803D; --oc-line-medicine: #AD014C; --oc-clock-warn: #B85410; --oc-debug-outline: #F5C542; --oc-overdue: #C64533; --oc-overdue-fg: #8B2E22; --oc-overdue-bg: #FDE8E5; --oc-overdue-border: #F0B4AB; --oc-overdue-item-border: #F0C8C2; --oc-overdue-hover-bg: #FFF5F3; --oc-overdue-grad-from: #FDF2F0; --oc-overdue-grad-to: #FFF8F6; --oc-census-icu: #0E7C86; --oc-census-surgery: #2F6FED; --oc-census-medicine: #6B4FBB; --oc-seen-yes: #1F8A4C; --oc-seen-yes-bg: #E6F6EC; --oc-seen-no: #C0C7D4; --oc-team-note-fg: #5A4A18; --oc-team-note-bg: #FFF8E8; --oc-team-note-bd: #F0DCA0; --oc-consults-fg: #8A6A3A; --oc-consult-row-bg: #F6F2EA; --oc-consult-row-selected-bg: #EDE6D6; --oc-consult-chip-fg: #6B4F3A; --oc-consult-chip-bg: #E8DFD0; --oc-census-chip-bg: #E8EEF8; --oc-coord: #C97F1B; --oc-collide: #6B4FBB; --oc-collide-fg: #4E3A8C; --oc-collide-bg: #F0ECFA; --oc-delta: #2F6FED; --oc-owner-bg: #F0F3F8; --oc-field-value: #1a2030; --oc-synthetic-pill-bg: #5B6B8C; --oc-synthetic-pill-fg: #F4F7FB; --oc-lab-bone: #c8cfe2; --oc-lab-current: #172B4D; --oc-lab-prior1: #172B4D; --oc-lab-prior2: #172B4D; --oc-lab-dot: #2f54d0; --oc-lab-flag-high: #c05612; --oc-lab-flag-low: #c05612; --oc-lab-flag-crit: #b91c1c; --oc-lab-band: #e8eef8; --oc-lab-marker: #8a93ad; /* Stay strip unit slots — no red/green (level of care, not danger/safe). */ --ss-slot-0: #4c6b9a; --ss-slot-1: #6b5b95; --ss-slot-2: #3d7a8c; --ss-slot-3: #8a6d3b; --ss-slot-4: #5a6a7a; --ss-slot-5: #3f5e7a; --ss-slot-6: #6a5a7a; --ss-slot-7: #4a6288; /* Timeline chips — prototype light tokens, named --oc-tl-* so component CSS stays hex-free. */ --oc-tl-c-proc: #7651A8; --oc-tl-c-med: #0B6FB0; --oc-tl-c-lab: #00815F; --oc-tl-c-micro: #BF4E0A; --oc-tl-c-img: #2585B8; --oc-tl-c-note: #566874; --oc-tl-c-consult: #A8700A; --oc-tl-c-event: #A2466C; --oc-tl-hi: #935400; --oc-tl-hi-bg: #FFF1D9; --oc-tl-crit: #BD2229; --oc-tl-crit-bg: #FCE8E8; --oc-tl-chip: #F2F5F7; --oc-tl-line: #D5DDE2; --oc-tl-line2: #E7ECEF; --oc-tl-muted: #566874; --oc-tl-faint: #8797A2; --oc-tl-accent: #1D6A9E; --oc-tl-accent-ink: #FFFFFF; --oc-tl-loc-ed: #E1A13A; --oc-tl-loc-floor: #90A5BF; --oc-tl-loc-sd: #379A92; --oc-tl-loc-icu: #C9474A; --oc-tl-loc-or: #8766C6; } html[data-theme="dark"] { --oc-band-bg: #1e293b; --oc-band-fg: #93c5fd; --oc-band-accent-from: #1d4ed8; --oc-band-accent-to: #1e3a8a; --oc-band-accent-hover-from: #2563eb; --oc-band-accent-hover-to: #1d4ed8; --oc-band-accent-selected-from: #3b82f6; --oc-surface: #1e2937; --oc-surface-border: #334155; --oc-border-subtle: #334155; --oc-text: #e5e7eb; --oc-text-muted: #94a3b8; --oc-chrome-text: #e5e7eb; --oc-progress-track: #334155; --oc-chip-pending-bg: #334155; --oc-chip-pending-fg: #e2e8f0; --oc-chip-pending-bd: #64748b; --oc-chip-progress-bg: #854d0e; --oc-chip-progress-fg: #fef3c7; --oc-chip-progress-bd: #d97706; --oc-chip-completed-bg: #14532d; --oc-chip-completed-fg: #bbf7d0; --oc-chip-completed-bd: #22c55e; --oc-chip-cancelled-bg: #7f1d1d; --oc-chip-cancelled-fg: #fecaca; --oc-chip-cancelled-bd: #ef4444; --oc-chip-discharged-bg: #1e40af; --oc-chip-discharged-fg: #dbeafe; --oc-chip-discharged-bd: #60a5fa; --oc-chip-noshow-bg: #9a3412; --oc-chip-noshow-fg: #ffedd5; --oc-chip-noshow-bd: #f97316; --oc-chip-transparent-fg: #e5e7eb; --oc-chip-transparent-bd: #64748b; --oc-chip-reach-grey-bg: #334155; --oc-chip-reach-grey-fg: #cbd5e1; --oc-chip-reach-grey-bd: #64748b; --oc-chip-reach-amber-bg: #78350f; --oc-chip-reach-amber-fg: #fde68a; --oc-chip-reach-amber-bd: #d97706; --oc-asset-well-bg: #f1f5f9; --oc-asset-well-pad: 4px 10px; --oc-asset-well-radius: 8px; --oc-asset-well-fg: #253C80; --oc-asset-well-muted: #4b5563; --oc-asset-well-margin: 6px 0; --oc-input-bg: #0f172a; --oc-input-fg: #e5e7eb; --oc-input-border: #475569; --oc-menu-bg: #1e2937; --oc-menu-fg: #e5e7eb; --oc-menu-item-fg: #e5e7eb; --oc-menu-border: #334155; --oc-menu-hover-bg: #334155; --oc-menu-hover-fg: #f8fafc; --oc-menu-selected-bg: #1e3a8a; --oc-menu-selected-fg: #dbeafe; --oc-menu-accent-hover-bg: #2563eb; --oc-menu-accent-hover-fg: #ffffff; --oc-control-hover-bg: #334155; --oc-nav-muted: #c5d4e8; --oc-nav-fg: #e2e8f0; --oc-nav-link-fg: #cbd5e1; --oc-nav-hover-bg: rgba(148, 163, 184, 0.12); --oc-nav-selected-bg: #1e3a8a; --oc-nav-selected-fg: #dbeafe; --nav-fg: var(--oc-nav-fg); --nav-hover-bg: var(--oc-nav-hover-bg); --nav-selected-bg: var(--oc-nav-selected-bg); --nav-selected-fg: var(--oc-nav-selected-fg); --oc-nav-active-bg: #1e3a5f; --oc-nav-active-fg: #dbeafe; --oc-strip-bg: #1e2937; --oc-strip-border: #334155; --oc-strip-title: #94a3b8; --oc-card-title: #e5e7eb; --oc-card-sub: #94a3b8; --oc-card-border: #334155; --oc-card-hover-border: #64748b; --oc-context-card-bg: #1e2937; --oc-context-card-border: #475569; --oc-context-card-hover-bg: #273549; --oc-section-bar-bg: #1e3a8a; --oc-section-bar-fg: #bfdbfe; --oc-section-bar-bd: #3b82f6; --oc-section-bar-icon-bg: #1e40af; --oc-section-bar-icon-fg: #dbeafe; --oc-section-bar-done-bg: #14532d; --oc-section-bar-done-fg: #bbf7d0; --oc-section-bar-done-bd: #22c55e; --oc-section-bar-done-icon-bg: #166534; --oc-icon-accent: #93c5fd; --oc-col-header-bg: #1e2937; --oc-col-header-fg: #e5e7eb; --oc-col-header-border: #0f172a; --oc-splitter: #0f172a; --oc-panel-bg: #0f172a; --oc-check-outline: #64748b; --oc-staff-card-bg: #0f1b33; --oc-staff-card-border: #1e3a5f; --oc-staff-card-fg: #e5e7eb; --oc-staff-header-bg: #1e3a8a; --oc-staff-header-fg: #bfdbfe; --oc-staff-action-bg: #233986; --oc-staff-action-hover-bg: #1d4ed8; --oc-chat-bg: #0f172a; --oc-chat-sent-bg: #007AFF; --oc-chat-sent-fg: #ffffff; --oc-chat-received-bg: #334155; --oc-chat-received-fg: #e5e7eb; --oc-chat-meta: #94a3b8; --oc-chat-empty-fg: #93c5fd; --oc-chat-composer-bg: #1e2937; --oc-chat-composer-border: #475569; --oc-family-sent-bg: #334155; --oc-family-sent-fg: #e5e7eb; --oc-family-received-bg: #1e40af; --oc-family-received-fg: #dbeafe; --oc-invite-bg: #1d4ed8; --oc-invite-fg: #dbeafe; --oc-invite-disabled-bg: #1e3a8a; --oc-invite-disabled-fg: #93c5fd; --oc-participants-bar-bg: #1e3a8a; --oc-participants-bar-fg: #dbeafe; --oc-step-done: #6b8cff; --oc-step-active: #f2a85c; --oc-step-pending: #64748b; --oc-step-pulse: rgba(240, 161, 90, 0.28); --oc-step-pulse-mid: rgba(240, 161, 90, 0.12); --oc-step-line: #334155; --oc-step-check-fg: #0f172a; --oc-panel-header-bg: #1e3a8a; --oc-panel-header-fg: #bfdbfe; --oc-panel-nested-bg: #0f172a; --oc-switch-track: #475569; --oc-switch-track-on: #3b82f6; --oc-switch-knob: #e5e7eb; /* (a) themed with the bar. (b) one-line swap: set these three to var(--oc-pill-prominent-*). */ --oc-pill-bg: #334155; --oc-pill-fg: #e5e7eb; --oc-pill-border: #475569; --oc-pill-hover-bg: #475569; --oc-pill-prominent-bg: #f3f4f6; --oc-pill-prominent-fg: #111827; --oc-pill-prominent-border: #e5e7eb; --presence-active: #22c55e; --presence-away: #f59e0b; --presence-off: #9ca3af; --presence-dnd: #ef4444; --oc-chrome-bg: #111827; --oc-chrome-border: #1f2937; --oc-scrollbar-track: #1e2937; --oc-scrollbar-thumb: #64748b; --oc-scrollbar-thumb-hover: #94a3b8; --oc-chrome-muted: #94a3b8; --oc-chrome-faint: #64748b; --oc-chrome-sep: #334155; --oc-page-bg: #0f172a; --oc-body-bg: #0f172a; --oc-page-bg-muted: #0f172a; --oc-nav-legal: #93c5fd; --oc-nav-active-solid: #1e3a8a; --oc-nav-active-solid-fg: #ffffff; --oc-on-accent: #ffffff; --oc-danger: #ef4444; --oc-danger-hover-bg: #7f1d1d; --oc-link: #60a5fa; --oc-link-alt: #60a5fa; --oc-spinner: #93c5fd; --oc-overlay-bg: rgba(15, 23, 42, 0.8); --oc-notify-bg: #020617; --oc-brand-orange: #E95A28; --oc-index-text: #e5e7eb; --oc-index-spin-outer: #64748b; --oc-wait-from: #000080; --oc-wait-mid: #000060; --oc-wait-accent: #335599; --oc-wait-panel: #264482; --oc-wait-inner: #000000d0; --oc-ui-overlay: #0f172a; --oc-ui-spinner-track: #334155; --oc-ui-spinner-fg: #60a5fa; --oc-ui-spinner-text: #94a3b8; --oc-line-or: #B45309; --oc-line-stroke: #6D28D9; --oc-line-stemi: #B91C1C; --oc-line-transfer: #0F766E; --oc-line-trauma: #C2410C; --oc-line-icu: #1D4ED8; --oc-line-surgery: #15803D; --oc-line-medicine: #AD014C; --oc-clock-warn: #fbbf24; --oc-debug-outline: #F5C542; --oc-overdue: #f87171; --oc-overdue-fg: #fecaca; --oc-overdue-bg: #7f1d1d; --oc-overdue-border: #991b1b; --oc-overdue-item-border: #b91c1c; --oc-overdue-hover-bg: #450a0a; --oc-overdue-grad-from: #7f1d1d; --oc-overdue-grad-to: #450a0a; --oc-census-icu: #0E7C86; --oc-census-surgery: #2F6FED; --oc-census-medicine: #6B4FBB; --oc-seen-yes: #4ade80; --oc-seen-yes-bg: #14532d; --oc-seen-no: #475569; --oc-team-note-fg: #fde68a; --oc-team-note-bg: #78350f; --oc-team-note-bd: #d97706; --oc-consults-fg: #e7d3b8; --oc-consult-row-bg: #292524; --oc-consult-row-selected-bg: #3f3a32; --oc-consult-chip-fg: #e7d3b8; --oc-consult-chip-bg: #44403c; --oc-census-chip-bg: #1e3a5f; --oc-coord: #C97F1B; --oc-collide: #6B4FBB; --oc-collide-fg: #ddd6fe; --oc-collide-bg: #2e1065; --oc-delta: #2F6FED; --oc-owner-bg: #1e2937; --oc-field-value: #e5e7eb; --oc-synthetic-pill-bg: #5B6B8C; --oc-synthetic-pill-fg: #F4F7FB; --oc-lab-bone: #475569; --oc-lab-current: #F9FAFB; --oc-lab-prior1: #F9FAFB; --oc-lab-prior2: #F9FAFB; --oc-lab-dot: #6b8cff; --oc-lab-flag-high: #fb923c; --oc-lab-flag-low: #fb923c; --oc-lab-flag-crit: #f87171; --oc-lab-band: #1e3a5f; --oc-lab-marker: #94a3b8; --ss-slot-0: #8aa4cc; --ss-slot-1: #a898c8; --ss-slot-2: #7ab0c0; --ss-slot-3: #c4a66a; --ss-slot-4: #9aa8b8; --ss-slot-5: #7a9ab8; --ss-slot-6: #b8a8c8; --ss-slot-7: #8aa8c8; --oc-tl-c-proc: #B7A0E0; --oc-tl-c-med: #5DADE6; --oc-tl-c-lab: #45C79E; --oc-tl-c-micro: #F28E52; --oc-tl-c-img: #78C4EC; --oc-tl-c-note: #A3B2BC; --oc-tl-c-consult: #E9B650; --oc-tl-c-event: #E08FB0; --oc-tl-hi: #F2B864; --oc-tl-hi-bg: rgba(242, 184, 100, 0.13); --oc-tl-crit: #FF6F6F; --oc-tl-crit-bg: rgba(255, 111, 111, 0.15); --oc-tl-chip: #1A252D; --oc-tl-line: #26343D; --oc-tl-line2: #1D2930; --oc-tl-muted: #98A8B3; --oc-tl-faint: #6A7A85; --oc-tl-accent: #62ADE3; --oc-tl-accent-ink: #07131B; --oc-tl-loc-ed: #C9913A; --oc-tl-loc-floor: #6E84A0; --oc-tl-loc-sd: #2F8A83; --oc-tl-loc-icu: #B5474A; --oc-tl-loc-or: #7A5CB8; } /* Shared presence-dot modifiers. Header pill, team-list, avatar, and staff tab all consume these — never a second hex mapping. */ .presence-dot--active { background: var(--presence-active); } .presence-dot--away { background: var(--presence-away); } .presence-dot--off, .presence-dot--unknown { background: var(--presence-off); } .presence-dot--dnd { background: var(--presence-dnd); } .opcomm-wordmark-on-dark { display: none; } html[data-theme="dark"] .opcomm-wordmark-on-light { display: none; } html[data-theme="dark"] .opcomm-wordmark-on-dark { display: block; } /* Chrome — values come from tokens so scoped CSS that wins on specificity still follows the theme when it uses the same names. */ html[data-theme="dark"] body.OpCommMainBody, html[data-theme="dark"] body { background-color: var(--oc-body-bg); color: var(--oc-text); } html[data-theme="dark"] .header, html[data-theme="dark"] .admin-header { background: var(--oc-chrome-bg); border-bottom-color: var(--oc-chrome-border); color: var(--oc-chrome-text); } html[data-theme="dark"] .nav-sidebar { background: var(--oc-chrome-bg); border-right: 1px solid var(--oc-chrome-border); color: var(--nav-fg); } html[data-theme="dark"] .nav-link, html[data-theme="dark"] .modules-nav-row { color: var(--nav-fg); } html[data-theme="dark"] .nav-link.active, html[data-theme="dark"] .modules-nav-row.active { color: var(--nav-selected-fg); } html[data-theme="dark"] .nav-link-button { color: var(--oc-nav-link-fg); } html[data-theme="dark"] .nav-footer, html[data-theme="dark"] .site-legal-footer { background: var(--oc-chrome-bg); border-top-color: var(--oc-chrome-border); color: var(--oc-chrome-muted); } html[data-theme="dark"] .site-legal-footer a, html[data-theme="dark"] .nav-footer-links a { color: var(--oc-nav-link-fg); } /* One colour + one selected-state rule for both sidebar groups (CLINICAL APPS rows and tool NavButtons). Count badges keep their own --oc-line-* colour. */ .nav-sidebar .nav-link, .nav-sidebar .modules-nav-row { color: var(--nav-fg); } .nav-sidebar .nav-link:hover, .nav-sidebar .modules-nav-row:hover { background: var(--nav-hover-bg); } .nav-sidebar .nav-link.active, .nav-sidebar .nav-link.active:hover, .nav-sidebar .modules-nav-row.active, .nav-sidebar .modules-nav-row.active:hover { background: var(--nav-selected-bg); color: var(--nav-selected-fg); } .nav-sidebar .nav-link:focus, .nav-sidebar .modules-nav-row:focus { outline: none; } .nav-sidebar .nav-link:focus:not(:focus-visible):not(:hover):not(.active), .nav-sidebar .modules-nav-row:focus:not(:focus-visible):not(:hover):not(.active) { background: transparent; } html[data-theme="dark"] .main-content, html[data-theme="dark"] .opcomm-content-container, html[data-theme="dark"] .OpCommPortalContentArea { background-color: var(--oc-page-bg); color: var(--oc-text); } html[data-theme="dark"] .page { background-color: var(--oc-page-bg); } /* Login (identity) */ html[data-theme="dark"] .main-login-container { background-color: #0f172a !important; } html[data-theme="dark"] .login-container { background: #1e2937; color: #e5e7eb; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .login-container input[type="email"], html[data-theme="dark"] .login-container input[type="password"] { background: #0f172a; color: #e5e7eb; border-color: #334155; } html[data-theme="dark"] .portal-title, html[data-theme="dark"] .footer-copyright, html[data-theme="dark"] .footer-legal a, html[data-theme="dark"] .version-label, html[data-theme="dark"] .version-number { color: #e5e7eb; } html[data-theme="dark"] .profile-dropdown, html[data-theme="dark"] .profile-menu { background: var(--oc-menu-bg); color: var(--oc-menu-fg); border-color: var(--oc-menu-border); } html[data-theme="dark"] select { color-scheme: dark; background-color: var(--oc-input-bg); color: var(--oc-input-fg); border-color: var(--oc-input-border); } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid #e2e8f0; border-radius: 50%; background: transparent; color: #4a5568; cursor: pointer; flex-shrink: 0; line-height: 1; transition: background-color 0.15s, border-color 0.15s, color 0.15s; } .theme-toggle.theme-row { width: 100%; height: auto; min-height: 0; padding: 0.75rem; border: 0; border-radius: 0.375rem; justify-content: flex-start; gap: 0.75rem; } .theme-toggle:hover { background: #f8fafc; border-color: #cbd5e1; color: #1e2937; } .theme-toggle:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; } .theme-icon { display: none; line-height: 0; } html[data-theme="light"] .theme-icon-sun, html:not([data-theme]) .theme-icon-sun { display: block; } html[data-theme="dark"] .theme-icon-moon { display: block; } .theme-menu { position: fixed; inset: unset; margin: 0; padding: 4px; min-width: 148px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #1e2937; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14); } .theme-menu-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font-size: 0.875rem; } .theme-menu-item:hover { background: #f1f5f9; } .theme-menu-item:focus-visible { background: #f1f5f9; outline: 2px solid #1e40af; outline-offset: 2px; } .theme-menu-item.is-selected, .theme-menu-item[aria-checked="true"] { font-weight: 600; } .theme-menu-item.is-selected::after, .theme-menu-item[aria-checked="true"]::after { content: " \2713"; float: right; color: #1e40af; } html[data-theme="dark"] .theme-toggle { border-color: #334155; color: #e5e7eb; } html[data-theme="dark"] .theme-toggle:hover { background: #1e2937; border-color: #475569; color: #fff; } html[data-theme="dark"] .theme-menu { background: #1e2937; color: #e5e7eb; border-color: #334155; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .theme-menu-item:hover, html[data-theme="dark"] .theme-menu-item:focus-visible { background: #334155; } html[data-theme="dark"] .theme-menu-item.is-selected::after, html[data-theme="dark"] .theme-menu-item[aria-checked="true"]::after { color: #93c5fd; } .login-theme-toggle { position: absolute; top: 12px; right: 12px; z-index: 20; } .login-container { position: relative; } /* OR case-view Syncfusion splitter grips follow the page color-scheme. */ html[data-theme="dark"] .e-splitter .e-split-bar, html[data-theme="dark"] .e-splitter .e-split-bar .e-resize-handler { background: var(--oc-surface-border, #334155); color: var(--oc-text-muted, #94a3b8); } .oc-synthetic-pill { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; padding: 1px 7px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; background: var(--oc-synthetic-pill-bg); color: var(--oc-synthetic-pill-fg); font-family: Consolas, "IBM Plex Mono", monospace; user-select: none; }