/** * PalMed Custom Theme for OpenMRS O3 * * Color Palette: * Brand #1 (Primary): #821b3b — navbar, selected items * Brand #2 (Dark): #5c1329 — hover states, darker accents * Brand #3 (Accent): #a8264e — buttons, active indicators * Warm White: #FAF8F7 — page backgrounds (replaces cold #f4f4f4) * Surface: #FFFFFF — card/section backgrounds * Border: #E8E4E2 — softer borders * Text Primary: #2D2A2A — headings * Text Secondary: #6B6565 — body text * Text Muted: #9A9494 — labels, hints * * Note: Brand colors (navbar, buttons, tabs) are also configured via * palmed-config.json -> @openmrs/esm-styleguide Brand color #1/#2/#3. */ /* ============================================================================= 1. TYPOGRAPHY — Inter + Noto Sans Arabic ============================================================================= */ /* 'Inter' has zero Arabic glyph coverage. Before this fix, Arabic text silently fell through the rest of this stack to whichever generic sans-serif the OS/browser happened to substitute -- confirmed live (computed styles + screenshot) that this was never a deliberate choice, just an accidental fallback; different OSes/browsers ship different default Arabic-capable fonts, so this was never guaranteed to render consistently across real users' devices even though it happened to look acceptable in this session's own test environment. 'Noto Sans Arabic' is loaded (see deploy-branding.sh) specifically as an Arabic companion to Inter, not a replacement -- per-character font-family fallback resolves Latin/digit glyphs via Inter (first in the stack, full coverage) and Arabic-script glyphs via Noto Sans Arabic (Inter simply has no glyphs there to "win" with) automatically, with no [dir="rtl"]-scoped override needed. Chosen over a more stylized Arabic-native font (Cairo, Tajawal) for the same reason 'Inter' itself was chosen -- broad, reliable, professional-register Unicode coverage over a distinctive but narrower typographic identity, appropriate for a clinical record system. */ body, .cds--body, .cds--content, .omrs-main-content, .cds--text-input, .cds--text-area, .cds--dropdown, .cds--btn, .cds--side-nav__link-text, .cds--header__name, .cds--modal-content, .cds--data-table th, .cds--data-table td { font-family: 'Inter', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* Smoother font rendering */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ============================================================================= 2. WARM BACKGROUND COLORS Replace Carbon's cold #f4f4f4 with warm #FAF8F7 ============================================================================= */ body { background-color: #FAF8F7 !important; } /* Main content area */ .omrs-main-content, [class*="dashboard-container__dashboardContainer"], [class*="dashboardView"] { background-color: #FAF8F7 !important; } /* Carbon's default backgrounds */ .cds--content { background-color: #FAF8F7 !important; } /* Data table backgrounds */ .cds--data-table-container { background-color: #FFFFFF !important; } /* ============================================================================= 3. CSS CUSTOM PROPERTIES ============================================================================= */ :root { /* PalMed color tokens */ --palmed-bg: #FAF8F7; --palmed-surface: #FFFFFF; --palmed-border: #E8E4E2; --palmed-text-primary: #241B1E; --palmed-text-secondary: #5F5559; --palmed-text-muted: #A79DA0; /* The brand wash, and the hairline that makes it read on a light ground. Both are the public site's own values (`--brand-wash` and the 26%-of-`--brand-lift` border its .alert/.chip use); section 19 independently arrived at the same #F8EDF1 for Carbon's selected-surface tokens, which is what makes this a palette entry rather than one rule's magic number. A wash this close to paper needs the border: on the patient banner's own ground it sits at 1.09:1. */ --palmed-brand-wash: #F8EDF1; --palmed-brand-wash-border: rgba(168, 38, 78, 0.26); /* Display typeface, used by section 20. Inter leads so Latin headings are unchanged; Noto Kufi Arabic has only the arabic subset, so it wins exactly the glyphs Inter has none of. Noto Sans Arabic stays last as the fallback if Kufi has not loaded yet. */ --palmed-font-display: 'Inter', 'Noto Kufi Arabic', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Warm shadow, not neutral black. Every surface here sits on a warm paper (#FAF8F7), and a pure-black shadow on a warm ground reads as grey dirt rather than depth. */ --palmed-shadow-sm: 0 1px 2px rgba(36, 27, 30, 0.06); --palmed-shadow-md: 0 4px 12px rgba(36, 27, 30, 0.10); /* Override OpenMRS interaction colors */ --omrs-color-interaction: #821b3b; --omrs-color-interaction-minus-two: #5c1329; --omrs-color-interaction-plus-two: #a8264e; } /* ============================================================================= 4. SIDEBAR / LEFT NAV STYLING ============================================================================= */ /* Sidebar background: white instead of gray */ .cds--side-nav, .cds--side-nav--expanded, [class*="left-nav-module__leftNav"] { background-color: var(--palmed-surface) !important; } /* Sidebar border: softer */ [class*="left-nav-module__leftNav"] { border-right: 1px solid var(--palmed-border) !important; } /* Nav links: better spacing; square corners in every state (rest, hover, active) */ .cds--side-nav__link { border-radius: 0 !important; margin: 0.125rem 0.5rem !important; padding: 0 0.75rem !important; transition: background-color 0.15s ease, color 0.15s ease !important; } .cds--side-nav__link:hover { background-color: #FAF8F7 !important; } /* Active nav link: brand-colored background tint + left indicator */ .cds--side-nav__link.active-left-nav-link { background-color: rgba(130, 27, 59, 0.08) !important; border-left: 0.25rem solid var(--brand-01, #821b3b) !important; border-radius: 0 !important; } .cds--side-nav__link.active-left-nav-link .cds--side-nav__link-text { color: #821b3b !important; font-weight: 600 !important; } /* Nav link text styling */ .cds--side-nav__link-text { color: var(--palmed-text-secondary) !important; font-size: 0.875rem !important; font-weight: 500 !important; } .cds--side-nav__link:hover .cds--side-nav__link-text { color: var(--palmed-text-primary) !important; } /* ============================================================================= 5. LOGIN PAGE ============================================================================= */ [class*="container"][class*="login"] { background: linear-gradient(135deg, #FAF8F7 0%, #f8dfe7 50%, #f2bece 100%) !important; } /* ============================================================================= 6. HIDE "Built with OpenMRS" footer on login page ============================================================================= */ [class*="poweredByTile"] { display: none !important; } /* ============================================================================= 7. CUSTOM SCROLLBAR ============================================================================= */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #faf6f7; } ::-webkit-scrollbar-thumb { background: #e47d9d; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #a8264e; } /* ============================================================================= 8. SELECTION HIGHLIGHT ============================================================================= */ ::selection { background-color: #f2bece; color: #5c1329; } /* ============================================================================= 9. FOCUS RING ============================================================================= */ *:focus-visible { outline-color: #a8264e !important; } /* ============================================================================= RTL (Right-to-Left) Layout Overrides ============================================================================= These overrides fix layout issues when the UI language is set to Arabic (or any RTL language). The pre-built O3 module bundles use physical CSS properties (margin-left, border-right, etc.) that don't automatically flip in RTL mode. We override them here with direction-aware values under html[dir="rtl"]. ============================================================================= */ /* --------------------------------------------- 1. CRITICAL: Main Content Area Margin --------------------------------------------- */ html[dir="rtl"] .omrs-main-content { margin-left: unset !important; margin-right: 0 !important; transition: margin-right 0.5s ease !important; } html[dir="rtl"] .omrs-breakpoint-gt-tablet .omrs-main-content { margin-left: unset !important; } /* --------------------------------------------- 1b. CRITICAL: Dashboard Container Width --------------------------------------------- */ html[dir="rtl"] [class*="dashboard-container__dashboardContainer"] { width: auto !important; flex: 1 1 0% !important; min-width: 0 !important; } /* --------------------------------------------- 2. Left Nav Border (RTL) --------------------------------------------- */ html[dir="rtl"] [class*="left-nav-module__leftNav"] { border-right: none !important; border-left: 1px solid var(--palmed-border) !important; } html[dir="rtl"] .active-left-nav-link { border-left: unset !important; border-right: 0.25rem solid var(--brand-01) !important; } /* --------------------------------------------- 3. Workspace Panel --------------------------------------------- The original rule here (targeting a [class*="workspace-module__..."] substring) is dead -- a later esm-app-shell bundle switched this component to fully-hashed CSS-module class names with no readable prefix at all (confirmed live: zero elements on the page match any class containing the word "workspace"), so the selector has silently matched nothing for some time. The real, currently-live bug this masked: the v2 workspace panel is positioned with plain physical `right: 0; left: -Npx` (docking flush against the right edge, sliding in from further left) -- correct only for LTR. ``'s own CSS Grid (`grid-template-areas: "leftNav appRoots workspace"`) correctly mirrors under RTL per spec, moving the #omrs-workspaces-container grid cell itself to the visual LEFT edge of the viewport (confirmed live: leftNav's own anchor moves to the right, matching this app's existing intentional RTL nav mirroring) -- but the panel's own left/right docking values never got a matching RTL flip, so it renders 420px past the LEFT edge into negative x-coordinates: fully present in the DOM with real content, completely invisible. Every Arabic-locale user opening any v2 workspace (Dispense, Pause, Close, lab orders, clinical notes, etc.) hit this. Fixed with a stable ID-based structural selector (#omrs-workspaces- container is a permanent index.html anchor, not a build artifact) that flips the panel to dock flush against its now-mirrored LEFT edge instead, matching where its grid cell actually sits under RTL. --------------------------------------------- */ html[dir="rtl"] #omrs-workspaces-container > div { right: auto !important; left: 0 !important; } html[dir="rtl"] [class*="action-menu-module__container"] { right: unset !important; left: 0 !important; border-left: none !important; border-right: 1px solid #a8a8a8 !important; } /* --------------------------------------------- 4. Service Queues Module --------------------------------------------- */ html[dir="rtl"] [class*="patient-queue-header__header"] { border-left: unset !important; border-right: 0 !important; padding-right: unset !important; padding-left: 0.5rem !important; } html[dir="rtl"] [class*="patient-queue-header__dropdown"] .cds--dropdown--inline .cds--list-box__menu { left: unset !important; right: -4rem !important; } html[dir="rtl"] [class*="patient-queue-header__date-and-location"] { margin-left: unset !important; margin-right: 1rem !important; } html[dir="rtl"] [class*="queue-status__statusContainer"] svg { margin-right: unset !important; margin-left: 0.5rem !important; } html[dir="rtl"] [class*="queueTableByStatusNavMenu"] .active-left-nav-link { padding-left: unset !important; padding-right: 1.75rem !important; } html[dir="rtl"] [class*="metrics-card__link"] svg { margin-left: unset !important; margin-right: 0.5rem !important; } html[dir="rtl"] [class*="backButton"] button svg { margin-right: unset !important; margin-left: 0.5rem !important; } html[dir="rtl"] [class*="triage-note__unit"], html[dir="rtl"] [class*="triage-note__vitalValues"], html[dir="rtl"] [class*="triage-note__danger-icon"], html[dir="rtl"] [class*="triage-note__iconWrapper"] { margin-left: unset !important; margin-right: 0.25rem !important; } html[dir="rtl"] [class*="triage-note__grid"] { padding-left: unset !important; padding-right: 0 !important; } html[dir="rtl"] [class*="past-visit-summary__selectedTab"] > button, html[dir="rtl"] [class*="past-visit-summary__tab"][aria-selected="true"] { border-left: none !important; border-right: 3px solid var(--brand-03) !important; margin-left: unset !important; margin-right: 0 !important; } html[dir="rtl"] [class*="past-visit-summary__tab"][aria-selected="false"] { border-left: none !important; border-right: 0.125rem solid #e0e0e0 !important; margin-left: unset !important; margin-right: 0 !important; } html[dir="rtl"] [class*="queue-linelist-base-table__subTitle"] { margin-left: unset !important; margin-right: 0.75rem !important; } /* --------------------------------------------- 5. Appointments Module --------------------------------------------- */ html[dir="rtl"] [class*="appointments-header__header"] { border-left: unset !important; border-right: 0 !important; padding-right: unset !important; padding-left: 0.5rem !important; } html[dir="rtl"] [class*="metrics-header__metricsContent"] { margin-left: unset !important; margin-right: auto !important; } html[dir="rtl"] [class*="calendar-header__titleContainer"], html[dir="rtl"] [class*="calendar-header__titleContent"], html[dir="rtl"] [class*="patient-appointments-header__titleContent"] { margin-left: unset !important; margin-right: 1rem !important; } html[dir="rtl"] [class*="calendar-header__backButton"] svg, html[dir="rtl"] [class*="patient-appointments-header__backButton"] svg { margin-right: unset !important; margin-left: 0.5rem !important; } html[dir="rtl"] [class*="appointments-table__headerContainer"] svg { margin-left: unset !important; margin-right: 0.5rem !important; } html[dir="rtl"] [class*="monthly-workload__monthly-cell"] { border-left: none !important; border-right: 1px solid #e0e0e0 !important; } html[dir="rtl"] [class*="workload__tileContainer"]:first-child { border-left-width: unset !important; border-right-width: 1px !important; } html[dir="rtl"] [class*="monthly-workload__serviceArea"] { text-align: right !important; } /* --------------------------------------------- 6. Laboratory Module --------------------------------------------- */ html[dir="rtl"] [class*="overlay__desktopOverlay"] { right: unset !important; left: 0 !important; border-left: none !important; border-right: 1px solid #a8a8a8 !important; } html[dir="rtl"] [class*="overlay__desktopOverlay"]::after { border-left: none !important; border-right: 1px solid #a8a8a8 !important; } html[dir="rtl"] [class*="orders-data-table__toolbarItem"] { margin-left: unset !important; margin-right: 1rem !important; } html[dir="rtl"] [class*="orders-data-table__toolbarItem"] p { padding-right: unset !important; padding-left: 0.5rem !important; } html[dir="rtl"] [class*="lab-summary-tile__link"] svg { margin-left: unset !important; margin-right: 0.5rem !important; } /* --------------------------------------------- 7. Shared Components (all modules) --------------------------------------------- */ html[dir="rtl"] [class*="datepicker-module__inputWrapper"], html[dir="rtl"] [class*="date-range-picker-module__inputWrapper"], html[dir="rtl"] [class*="date-range-picker-module__dateInputWrapper"], html[dir="rtl"] [class*="date-range-picker-module__inputsWrapper"] { margin-left: unset !important; margin-right: 1rem !important; } html[dir="rtl"] [class*="error-state-module__desktopHeading"], html[dir="rtl"] [class*="error-state-module__tabletHeading"], html[dir="rtl"] [class*="empty-state__desktopHeading"], html[dir="rtl"] [class*="empty-state__tabletHeading"], html[dir="rtl"] [class*="appointments-table__desktopHeading"], html[dir="rtl"] [class*="appointments-table__tabletHeading"] { text-align: right !important; } html[dir="rtl"] [class*="app-menu-panel__launchIcon"] { margin-left: unset !important; margin-right: 0.5rem !important; } /* --------------------------------------------- 8. Table row-action "..." (kebab) overflow menus --------------------------------------------- */ /* Every data table's per-row action menu (Vitals, Biometrics, Conditions, Allergies, Programs, Medications, etc.) is a Carbon from esm-patient-common-lib, sharing the aria-label pattern "Edit or delete ". Carbon computes RTL "flip" positioning in JS by anchoring the menu's *right* edge to the trigger's right edge: left = triggerRight - menuWidth (page-absolute pixels, recalculated fresh on every open). On a full-width single table, the Actions column ends up at the visual left edge (RTL mirrors the table), leaving no room to open further left, so the menu renders partly off-screen (observed: left: -62px on the Vitals table). FIRST ATTEMPT (reverted): overrode `left` to a fixed absolute value (`left: 0.5rem !important`). This "worked" on single-table pages by coincidence — the Actions column happens to sit near the page's own left edge there — but broke completely on the Patient Summary page, where multiple tables sit side-by-side in a grid (e.g. Conditions in the *right* column, Active medications in the *left*). An absolute override drags every menu to the same fixed page position regardless of which column its trigger is actually in — confirmed live: Carbon's own computed `left` for the Conditions table's menu was `551.5px` (correctly near its right-column trigger), but the absolute override forced it to `8px`, all the way across the page into the *left* column's content. ACTUAL FIX: `transform: translateX()` is *additive* on top of Carbon's own computed `left`/`right` (left untouched here, unlike the first attempt), so it correctly re-anchors relative to each trigger's real position regardless of which column/table it's in. Carbon's flip formula is `left = triggerRight - menuWidth`; shifting right by exactly `menuWidth` (200px = 12.5rem, this menu's fixed Carby "sm" size) turns that into `left = triggerRight` — i.e. flips the menu to open forward from the trigger's own right edge instead of backward past it, which stays on-screen no matter where the trigger sits. Verified on both the single-table Vitals page and the multi-column Patient Summary page. THE SELECTOR USED TO BE KEYED ON `[aria-label^="Edit or delete"]`, AND THAT WAS SELF-DEFEATING. It is an ENGLISH LITERAL, but this rule only ever applies in Arabic -- so every component that correctly translates its aria-label stopped matching in exactly the language the rule exists for. Measured on Patient Summary at 360px in an Arabic session: the Vitals menus render `aria-label="تعديل أو حذف العلامات الحيوية"` and Medications renders "قائمة الإجراءات", so neither matched, while Conditions matched only because it hardcodes `aria-label="Edit or delete condition"` in English rather than passing it through t(). The one component that forgot to translate was the one component the fix reached, which is why Conditions was reported as behaving correctly and every other section was not. Menus that miss this rule do not merely stay off-screen: the runtime safety net (palmed-rtl-popover-fix.js) then clamps them to the viewport edge, which reproduces the absolute-`left` behaviour described above as the reverted FIRST ATTEMPT. Measured at 1280px: the Medications trigger sits at 110..150 while its menu was pinned to 8..208, i.e. dragged out of its own column. With this rule matching, the menu lands at `triggerRight..triggerRight+width` and the safety net computes a zero shift, so it no longer intervenes at all. Scoped now to `.cds--overflow-menu--flip` with no label test. In this codebase `flipped` is passed only by row-action kebab menus -- ten of them (allergies, attachments, clinical-views, conditions, encounters, medications, orders, procedures, programs, vitals) -- so the class is a precise stand-in for "table row action" and reaches all of them in any language. The patient banner does not use OverflowMenu at all, so it cannot be caught by this. `translateX(100%)` rather than a hardcoded 12.5rem: the shift has to be exactly the menu's own width for `left = triggerRight - width` to become `left = triggerRight`, and a percentage in a transform resolves against the element's own border box. 100% is that width by definition, so this stays correct if a menu is ever wider than Carbon's 200px "sm" default -- which Arabic labels can easily cause. */ html[dir="rtl"] ul.cds--overflow-menu-options.cds--overflow-menu--flip { transform: translateX(100%) !important; } /* --------------------------------------------- 9. Table row-action "..." (kebab) HOVER TOOLTIP fixed at the source, no rule needed here --------------------------------------------- */ /* This used to carry `transform: translateX(6.5rem) !important` plus a `pointer-events: none`, and both are gone. Do not reinstate either. Same cause as #9b: upstream hardcoded `align="left"` on these OverflowMenu triggers, Carbon treats that as a PHYSICAL side and ships `[dir='rtl']` rules that deliberately un-mirror it, and so in Arabic the "Options" label opened leftward into the table's own `overflow: auto` scroll container and was clipped away. The 6.5rem shift restored visibility and nothing else: one fixed offset for labels of different widths, landing each on top of its own trigger by a different amount, which is why `pointer-events: none` was needed to stop the label swallowing the click meant for the button underneath. Overriding `transform` also discarded the `-50%` that centres the label on its trigger. Every one of those call sites now passes a mirrored `align` instead (`useActionMenuAlignment`, in esm-patient-common-lib and duplicated into the two patient-management apps and palmed-esm-visits-app), so Carbon places the label itself — correct side, correct offset, correct caret, never over the button. `pointer-events: none` is still applied at runtime by palmed-rtl-popover-fix.js to any popover it inspects, so the click-swallowing protection is not lost with this rule. Rule #8 above is a DIFFERENT bug and stays: that is the open dropdown menu, positioned by Carbon's own JS flip, not this hover label. */ /* --------------------------------------------- 9b. Left action rail (Order basket / Visit note / Clinical forms) HOVER TOOLTIP — fixed at the source, no rule needed here --------------------------------------------- */ /* This used to carry a `transform: translateX(8rem) !important` to drag the rail's hover labels back on screen in RTL. That is gone, and must not come back. The cause was upstream hardcoding `align="left"` on these triggers. Carbon treats that as a PHYSICAL side and even ships `[dir='rtl']` rules that deliberately un-mirror it, so in Arabic — where the rail moves to the left edge — the label opened off the left of the viewport. The 8rem shift made it visible again but could not make it right: a fixed nudge lands every label at the same x whatever its width, so all three sat on top of their own icons, and because the override replaced Carbon's whole transform it also dropped the `-50%` that centres the label on its trigger, leaving each one hanging half a label-height too low. `ActionMenuButton`/`ActionMenuButton2` now pass `align="right"` under RTL (see use-document-direction.ts), which is the mirror of what LTR already does and hands Carbon back full control of placement, caret included. Nothing to override. Rule #9 above is NOT the same case and stays: those are data-table row action menus, a different Carbon component in a scrollable container, not this rail. */ /* --------------------------------------------- 9c. Laboratory app (esm-laboratory-app): content stops well short of the (right, in RTL) nav, leaving a large empty gap --------------------------------------------- */ /* Different bug class from #8/#9/#9b above — this one is a plain layout-width bug, not a popover/tooltip positioning bug. Rule #1b earlier in this file already fixes the *outer* dashboard container (`[class*="dashboard-container__dashboardContainer"]`) to correctly narrow itself to the space actually available next to the nav. But the laboratory app's own tab-content wrapper — a completely unstyled `
` with no class or id at all — carries its *own*, separate `margin-right: 256px` (reserving space for the 256px-wide nav a second time, nested one level inside a container that already accounts for it), squeezing the visible content down to 1088px inside an already-correctly-sized 1344px container. Net effect: a ~256px dead gap between the content and the nav. No class/id to select on directly, so this uses `:has()` with an explicit direct-child combinator (`> `) to identify it structurally: "the `
` whose direct child is the laboratory tabs wrapper". The direct-child combinator is required, not optional — without it, `:has()` also matches the *outer* dashboard-container `
` (the tabs wrapper is a descendant of that one too, just not a direct child), and zeroing that one's margin as well made the content overlap the nav entirely instead of stopping short of it. Verified after the fix: content's right edge and the nav's left edge both land at the same x-coordinate, and no horizontal scrollbar appears (`document.documentElement.scrollWidth === window.innerWidth`). */ html[dir="rtl"] section:has(> [class*="laboratory-tabs__tabs"]) { margin-right: 0 !important; width: auto !important; } /* --------------------------------------------- 9d. Patient Lists app (esm-patient-list-management-app): same double-reserved-nav-width gap as #9c, plus a flex-basis wrinkle --------------------------------------------- */ /* Same root cause and same fix shape as Gotcha 143 (#9c above) — this app's own dashboard `
` (`[class*="lists-dashboard__dashboard___"]`, e.g. `-esm-patient-list-management__lists-dashboard__dashboard___O17Hh`, distinct from the *sibling* `...dashboardContainer___` class on its MAIN ancestor, which is already correctly handled by rule #1b) also carries its own redundant `margin-right: 256px`. Unlike #9c's plain unstyled `
`, this one's class name IS readable (webpack's CSS-module hash embeds the original name), so no `:has()` structural workaround was needed here — a direct `[class*=]` attribute selector on the stable name prefix works. The `___` (three underscores, right before the hash suffix) in the selector is load-bearing: without it, `[class*="lists-dashboard__dashboard"]` also matches the sibling `...dashboardContainer___` class (which starts with the same "dashboard" prefix) — harmless in practice here since that element's margin is already 0, but imprecise and easy to have go wrong if that ancestor's styling ever changes. Removing the margin alone was NOT sufficient here (unlike #9c) — the element still didn't widen to fill the freed space, just shifted right while staying at its shrink-to-fit content width. Its parent is a flex container and this element had `flex-grow: 0`, so `width: auto` alone has no effect in a flex item that isn't allowed to grow. Needed `flex: 1 1 0%` as well to actually let it expand and claim the available space. Verified: content's right edge lands exactly at the nav's left edge, no horizontal scrollbar, consistent across all 4 tabs (Starred / System lists / My lists / All lists). */ html[dir="rtl"] [class*="lists-dashboard__dashboard___"] { margin-right: 0 !important; width: auto !important; flex: 1 1 0% !important; } /* --------------------------------------------- 9e. Patient Lists app: same visible nav gap as #9d, but on the LIST DETAIL page (viewing one list's patients) instead of the browse page, and via a genuinely different mechanism --------------------------------------------- */ /* Confirmed live by walking `document.styleSheets` for every rule whose selector actually matches this element (not guessing from the SCSS source, which declares no margin on `.cohortHeader` at all — see `list-details.scss`). The real culprit is a core OpenMRS/esm-styleguide global RTL rule, NOT a PalMed or app-specific one: html[dir="rtl"] .omrs-breakpoint-gt-tablet main > section { margin-right: var(--omrs-sidenav-width); (= 16rem = 256px) margin-left: unset; } This rule is meant to reserve nav space for the app's real top-level content section (an actual `
>
` pair right under `.omrs-main-content`). It's unscoped beyond that plain tag-combinator shape, so it also matches ANY unrelated `
>
` pair anywhere in the DOM — and `list-details.component.tsx` happens to render exactly that shape internally: `
` is a direct child of its own `
` wrapper, several levels deep inside the real page structure, not the top-level target this rule was written for. Net effect: the same "nav width reserved twice" gap as #9c/#9d, but the second reservation comes from a generic selector collision rather than a duplicated dashboard-container class. Fixed narrowly, scoped only to this one class, so the legitimate top-level `main > section` rule is untouched everywhere else. No `width`/`flex` override needed here (unlike #9d) — `.cohortHeader`'s parent (`.container`) is a `flex-direction: column` container with the default `align-items: stretch`, so a plain flex child already fills the available cross-axis width once its own margin stops shrinking it. Verified after the fix: content's right edge lands exactly at the nav's left edge, top/bottom/left margins unaffected (they were already 0 from a more specific override elsewhere), no horizontal scrollbar. */ html[dir="rtl"] [class*="list-details__cohortHeader___"] { margin-right: 0 !important; } /* ============================================================================= 10. MOBILE NAVBAR RESPONSIVENESS Upstream O3 navbar doesn't collapse — items overflow on narrow screens. We progressively hide / shrink elements to fit. ============================================================================= */ /* Nothing in this section hides a navbar control by ROLE, and nothing here should start to. Pharmacist and Lab Technician do not get the patient-search and add-patient icons, but that is decided in `esm-primary-navigation-app`'s `minimal-navbar.ts`, which filters them out of `top-nav-actions-slot` so they are never mounted at all. A `display: none` rule would leave both in the DOM and, for patient search specifically, would take the full-screen search overlay down with it -- see the standing warning in the ≤320px block below. The rules here are about width, for everyone; that one is about who the user is. */ /* --- Tablet: ≤ 480px — hide location text, keep icon only --- */ @media (max-width: 480px) { /* Shrink logo */ .cds--header [class*="logo__logo"] { max-width: 80px !important; height: auto !important; } /* Hide location name text, keep the location icon button */ [class*="currentLocationText"] { display: none !important; } /* Tighten header action button padding */ .cds--header .cds--header__action { padding: 0 0.5rem !important; width: auto !important; min-width: 2.5rem !important; } /* "Add patient" is NOT hidden here, and must not be hidden again. It used to be, on the stated grounds that it was "accessible via the app menu" -- but the app menu was gated to System Developer only on 2026-08-29, so for the doctors and registration clerks who actually register patients that fallback no longer exists and the icon was the only route left. There is no space argument for hiding it either: measured with it shown, `document.scrollWidth` still equals the viewport at 390px, 360px AND 320px, the header's own scrollWidth does not grow, and the logo does not move. */ } /* --- Small phone: ≤ 360px — further compact --- */ @media (max-width: 360px) { /* Smaller logo */ .cds--header [class*="logo__logo"] { max-width: 64px !important; } /* Hide the divider between logo and location */ .cds--header [class*="divider"] { display: none !important; } /* Tighter action buttons */ .cds--header .cds--header__action { padding: 0 0.375rem !important; min-width: 2rem !important; } /* Hide implementer tools button if visible */ [data-extension-id="implementer-tools-button"] { display: none !important; } } /* --- Very narrow: ≤ 320px — minimal navbar --- */ @media (max-width: 320px) { /* Even smaller logo */ .cds--header [class*="logo__logo"] { max-width: 52px !important; } /* * DO NOT hide `[data-extension-id="patient-search-icon"]` here. A rule that did so lived at * this spot, justified as "accessible via app menu or page search". Both halves of that were * false by the time it was read: * * - the App Menu was gated to System Developer on 2026-08-29, so for a doctor, nurse or * clerk there is no menu to reach search through; * - `PatientSearchOverlay` is rendered INSIDE `.patientSearchIconWrapper`, so hiding this * extension also hid the full-screen search UI on /search itself -- destroying the "page * search" fallback the comment named. At <=320px the page fell back to the desktop * two-column layout, laid out 1032px wide and centred, which put every row's Actions and * Start visit buttons off-screen with no way to scroll to them, and left no search input * at all. * * The space it was meant to reclaim is not needed: with the icon shown, the header still fits * exactly at 320px (icon at 184..218) and at 302px (166..200) -- measured, header scrollWidth * == clientWidth in both. Same shape as Gotcha 472, which un-hid the add-patient icon here for * the same reason. */ /* Compact hamburger */ .cds--header [class*="headerMenuButton"] { padding: 0 0.375rem !important; width: auto !important; min-width: 2rem !important; } } /* ============================================================================= 11. DISPENSING WORKSPACE — MOBILE RESPONSIVENESS Upstream dispense/pause/close workspace forms use fixed-width flex layouts that overflow on narrow screens. Override to stack vertically. ============================================================================= */ /* --- Always: prevent overflow from upstream fixed widths --- */ [class*="medicationDispenseReviewContainer"] { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } /* Stack vertical container: clip children that overflow */ [class*="medicationDispenseReviewContainer"] .cds--stack-vertical { max-width: 100% !important; overflow: hidden !important; } [class*="medicationTile"] { max-width: 100% !important; min-width: 0 !important; flex-wrap: wrap !important; } /* --- Tablet & phone: ≤ 672px — stack dispensing form fields vertically --- */ @media (max-width: 672px) { /* Main dispense details: stack fields vertically, respect parent width */ [class*="dispenseDetailsContainer"] { flex-direction: column !important; max-width: 100% !important; width: auto !important; min-width: 0 !important; box-sizing: border-box !important; gap: 0.75rem !important; } /* Force the review container to not exceed parent */ [class*="medicationDispenseReviewContainer"], [class*="medicationDispenseReviewContainer"] > * { max-width: 100% !important; min-width: 0 !important; } /* Form group: stack vertically */ [class*="forms__formGroup"] { flex-direction: column !important; } /* Medication tile: stack drug name and info icon */ [class*="medicationTile"] { flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem !important; padding: 0.5rem !important; } /* Quantity summary: full width */ [class*="quantitySummary"] { max-width: 100% !important; } /* Number inputs / combo boxes: full width */ [class*="medicationDispenseReviewContainer"] .cds--number, [class*="medicationDispenseReviewContainer"] .cds--combo-box, [class*="medicationDispenseReviewContainer"] .cds--text-input, [class*="medicationDispenseReviewContainer"] .cds--date-picker, [class*="medicationDispenseReviewContainer"] .cds--text-area { max-width: 100% !important; width: 100% !important; } /* Form items: full width, allow shrinking */ [class*="medicationDispenseReviewContainer"] .cds--form-item { width: 100% !important; min-width: 0 !important; } /* Dispense details: override intrinsic sizing */ [class*="dispenseDetailsContainer"] .cds--form-item, [class*="dispenseDetailsContainer"] .cds--number, [class*="dispenseDetailsContainer"] .cds--combo-box, [class*="dispenseDetailsContainer"] .cds--list-box__wrapper { min-width: 0 !important; max-width: 100% !important; } } /* ============================================================================= 12. HOME PAGE: Fix flex overflow on mobile The upstream homePageWrapper is flex-row. Its child (dashboardContainerTablet) has flex: 1 1 auto but min-width: auto causes content to overflow the parent. ============================================================================= */ [class*="homePageWrapper"] > * { min-width: 0 !important; } [class*="dashboardContainerTablet"] { overflow: hidden; } /* ============================================================================= 13. PATIENT CHART: Modern warm design overhaul Targets upstream patient-chart, patient-banner, vitals, medications widgets. Uses attribute selectors to match hashed CSS module class names. ============================================================================= */ /* --- Patient Banner --- */ [class*="patient-banner__container"] { background: linear-gradient(135deg, #faf8f5 0%, #f5f0ec 100%) !important; border-bottom: 2px solid #e8e0da !important; padding: 1rem 1.25rem !important; } /* Patient name in the patient chart's page header. The styleguide component that renders it is a CSS module with content-hashed class names, so this counts DOM depth from the chart banner's own (readable) class instead. Scoped to esm-patient-banner deliberately: esm-patient-search-app renders the same component one level deeper, behind its own patientInfoAndClinic wrapper, and scales those rows itself via compact-patient-info. */ [class*="esm-patient-banner__patient-banner__patientBanner"] > div > div > div > span { font-weight: 400 !important; font-size: 1.0625rem !important; color: #4a4545 !important; letter-spacing: normal !important; } [class*="patient-banner__container"] [class*="patientInfo"] { gap: 0.25rem !important; } [class*="patient-banner__container"] [class*="demographics"] { color: #5a5353 !important; font-size: 0.875rem !important; } /* Active Visit tag */ [class*="patient-banner__container"] .cds--tag--green, [class*="patient-banner__container"] .cds--tag--blue { font-weight: 500 !important; font-size: 0.75rem !important; border-radius: 1rem !important; letter-spacing: 0.02em !important; } /* Identifier chips: PalMed ID and ID Card. ONE RULE FOR BOTH, deliberately. They are rendered by two different components -- the primary identifier is a Carbon Tag, every other identifier is a Carbon FormLabel -- and they were styled by two rules that had already drifted apart: the Tag inherited the row's 1rem text while the label was pinned to 0.75rem, so the PalMed ID sat noticeably larger than the ID Card beside it. They are two readings of the same kind of fact and should look like a set, so one declaration block now sets the size for both and they cannot diverge again. THE COLOUR IS THE PUBLIC SITE'S OWN TAG RECIPE, not a new invention: landing-page/assets/styles.css declares `.tag-brand { background: var(--brand-wash); color: var(--brand) }`, which in its light palette is exactly these two values. What was here before was #3A8D99 -- a teal, hardcoded, from the OpenMRS palette this project retired on 2026-09-03. Being written as a literal is why the token remap in section 19 never reached it. Contrast is 8.5:1, comfortably past AA. Matched on Carbon's own class names rather than the components' CSS-module ones, which the app shell minifies to opaque base64 (`WvJbhTqh9ZSXAOeO7O+qjw==`) that no stylesheet can select -- see the dead selectors documented in gotcha 425. Verified live that the ID Card is the only .cds--label in this banner, with contact details both collapsed and expanded. The hairline border is not decoration. This banner's own ground is a warm #faf8f5 gradient, and the wash sits at 1.09:1 against it -- so on its own the pill shape simply does not read, which is the site's own problem with a wash chip on a light ground and the site's own answer to it. Both values are named in section 3 rather than spelled here; see the note there for where they come from. */ [class*="patient-banner__container"] .cds--tag--gray, [class*="patient-banner__container"] .cds--label { background-color: var(--palmed-brand-wash, #f8edf1) !important; color: var(--brand-01, #821b3b) !important; border: 1px solid var(--palmed-brand-wash-border, rgba(168, 38, 78, 0.26)) !important; padding: 0.125rem 0.5rem !important; border-radius: 1rem !important; font-size: 0.75rem !important; font-weight: 600 !important; min-height: 0 !important; line-height: 1.35 !important; /* An identifier is a single token and breaking it across two lines never helps anyone read it. Without this the ID Card became a two-line pill at 320px -- its label and its value are separate flex children, and a nowrap flex line shrinks them past their content width rather than moving one down. The widest chip here is ~142px against 288px of usable width, and the row it sits in wraps, so a chip that refuses to break still cannot push the page sideways. */ white-space: nowrap !important; /* ...but that last sentence only holds while the identifier TYPE NAME is short, and that name is deployment-configured. Staging calls it "OpenMRS Identification Number", which makes the chip 310px against 288px of usable width; it runs to x=410 in a 390px viewport and is clipped with no scroll to reach it. `max-width: 100%` + `text-overflow: ellipsis` was tried here and measured to change nothing -- the chip still drew 310px -- so it was removed rather than left looking like a fix. PalMed's own "PalMed ID" / "ID Card" are nowhere near the limit, and only the identifier TEXT is affected: every control in the row stays on screen. Recorded in CLAUDE_KNOWN_ISSUES.md with what was ruled out. */ } /* Load-bearing, not belt-and-braces: Carbon sets a colour on the label span itself (`.cds--tag__label { color: var(--cds-tag-color-gray, #161616) }`), so colouring only the Tag above it leaves the text painted Carbon's near-black regardless. */ [class*="patient-banner__container"] .cds--tag--gray .cds--tag__label { color: inherit !important; font-size: inherit !important; } /* Vitals & biometrics header in banner — lighter */ [class*="vitals-header__heading"] { font-weight: 400 !important; color: #4a4545 !important; } /* Patient avatar in banner */ [class*="patient-banner__container"] [class*="patientAvatar"], [class*="patient-banner__container"] [class*="avatar"] { box-shadow: 0 2px 8px rgba(130, 27, 59, 0.15) !important; } /* --- Visit Action Bar --- */ [class*="visitActionBar"] { background: #faf8f5 !important; border-top: 1px solid #e8e0da !important; border-bottom: 1px solid #e8e0da !important; padding: 0.5rem 1rem !important; } [class*="visitActionBar"] .cds--btn--danger { font-weight: 600 !important; } /* --- Chart Side Navigation (right sidebar) --- */ .cds--side-nav__link { font-size: 0.875rem !important; font-weight: 400 !important; color: #5f5559 !important; transition: color 0.15s ease, background 0.15s ease !important; } .cds--side-nav__link:hover { color: #241b1e !important; background: rgba(139, 30, 63, 0.05) !important; } .cds--side-nav__link.active-left-nav-link { color: #8b1e3f !important; font-weight: 500 !important; background: rgba(139, 30, 63, 0.1) !important; border-inline-start: none !important; } /* --- Widget Cards (tiles) --- */ .cds--tile[class*="tile"] { background: #ffffff !important; border: none !important; box-shadow: var(--palmed-shadow-sm) !important; transition: box-shadow 0.2s ease !important; overflow: hidden !important; } .cds--tile[class*="tile"]:hover { box-shadow: var(--palmed-shadow-md) !important; } /* Service Queues metric tiles: restore the same light border the Appointments metric cards have. Both apps' source declares `border: 1px solid $ui-03` on an identically-named metrics-card__tileContainer class, but Service Queues renders a real Carbon , which the generic widget-card rule above strips (`border: none !important`), while Appointments' plain
escapes that rule and keeps its border -- per direct user request the two should match. Same specificity as the stripping rule; later in the file, so it wins. */ .cds--tile[class*="metrics-card__tileContainer"] { border: 1px solid #e0e0e0 !important; } [class*="widgetCard"] { background: #ffffff !important; border: none !important; box-shadow: var(--palmed-shadow-sm) !important; overflow: hidden !important; } /* --- Section Headers (h4 in widget cards) --- */ [class*="desktopHeading"] h4, [class*="desktopHeader"] h4, [class*="cardHeader"] h4, [class*="tabletHeader"] h4 { font-weight: 500 !important; font-size: 0.9375rem !important; color: #3d3838 !important; letter-spacing: normal !important; text-transform: none !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; } /* Vertical accent bar before section headers */ [class*="desktopHeading"] h4::before, [class*="desktopHeader"] h4::before { content: '' !important; display: inline-block !important; width: 3px !important; height: 1.125rem !important; background: #8b1e3f !important; border-radius: 2px !important; flex-shrink: 0 !important; } /* Remove old underline accent */ [class*="desktopHeading"] h4::after, [class*="desktopHeader"] h4::after { content: none !important; } /* --- Empty States --- */ [class*="empty-state__tile"], [class*="emptyState"] { border: none !important; background: #ffffff !important; } [class*="empty-state"] [class*="content"] { color: #7a7272 !important; } /* --- Data Tables (medications, etc.) --- */ .cds--data-table { overflow: hidden !important; } .cds--data-table thead { background: #faf8f5 !important; } .cds--data-table th { font-weight: 500 !important; font-size: 0.8125rem !important; color: #5f5559 !important; text-transform: none !important; letter-spacing: normal !important; border-bottom: 1px solid #f0edec !important; } .cds--data-table td { font-size: 0.8125rem !important; /* 500 (Inter medium) per direct user feedback that English table text read too light at 400; the RTL override in section 18a puts Arabic back to 400 with a lighter color, since Arabic script's denser strokes already carry more visual weight than Latin. */ font-weight: 500 !important; color: #3d3838 !important; border-bottom: 1px solid #f0edec !important; vertical-align: top !important; padding: 0.75rem 1rem !important; line-height: 1.5 !important; } /* Service Queues worklist exception: center every cell on one midline. The global `vertical-align: top` above suits multi-line clinical tables (medications etc.), but in the queue table the Actions cell's fixed-height button block stretches the row, leaving top-aligned text visibly higher than the expand chevron and the Call button (which center themselves) — reported by the user in both English and Arabic. */ [class*="queue-table__tableContainer"] .cds--data-table td { vertical-align: middle !important; } .cds--data-table tbody tr:hover { background: rgba(130, 27, 59, 0.02) !important; } .cds--data-table tbody tr:last-child td { border-bottom: none !important; } /* --- Pagination --- */ .cds--pagination { background: #faf8f5 !important; border-top: 1px solid #e8e0da !important; font-size: 0.8125rem !important; } /* --- Bottom Action Tabs (order basket, forms, visit note) --- */ [class*="actionMenu"] { border-top: 1px solid #e8e0da !important; background: #ffffff !important; } [class*="actionMenu"] button { font-size: 0.8125rem !important; font-weight: 500 !important; color: #5a5353 !important; } /* --- Chart Review Content Area --- Vertical only, and as longhand. Two reasons, both measured against dev3 at 1280px: No horizontal padding, because the stock dashboard inside this element already carries `margin: 0 16px`. Adding our own doubled it and cost 32px of content width on every chart tab -- the results viewer came out 912px wide here against 944px on dev3, from exactly this. Longhand, because `padding` as a shorthand resets every side, and stock sets `padding-bottom: 4rem` to keep the last row clear of the action bar. The shorthand was silently cutting that to 1rem at desktop widths; section 22 only restores it below 1023px. Same trap as CLAUDE_GOTCHAS.md Gotcha 470 -- do not collapse these back into a shorthand. The 672px and 480px rules further down deliberately DO keep a small horizontal padding: on a phone the content should not touch the screen edge. */ [class*="chartReview"] { padding-top: 1rem !important; padding-bottom: 4rem !important; padding-left: 0 !important; padding-right: 0 !important; gap: 1rem !important; } /* --- Patient Chart Overflow Prevention --- */ /* Extension widgets must not exceed their grid column. The grid child (extension) has min-width:auto which lets it grow beyond the column track. Force it to respect the parent width so tables scroll inside. */ [class*="dashboard-view__extension"] { min-width: 0 !important; max-width: 100% !important; } [class*="dashboard-view__extensionWrapper"] { min-width: 0 !important; max-width: 100% !important; } /* Vitals & biometrics widget cards — constrain width, let table content scroll */ [class*="vitals-overview__widgetCard"], [class*="biometrics-base__widgetCard"], [class*="medications-details__widgetCard"], [class*="widgetCard"] { min-width: 0 !important; max-width: 100% !important; } /* Data table — the content div handles horizontal scroll. Container must not clip it; dashboard-level overflow:hidden prevents page-wide overflow */ .cds--data-table-content { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* Data table — stop the toolbar sitting on top of the column headings. Carbon positions .cds--table-toolbar absolutely, and TableContainer is expected to reserve the space for it with its own title/description header. A table given no title renders no header, so nothing reserves it and the 48px toolbar lands squarely on the header row: measured as a 46px overlap on the Subscriptions, Payments and Invoices lists, where the search box and the filter dropdown were swallowing every hover and click meant for a column heading. The space is reserved with padding on the container, not a margin on the content. A margin collapses straight through a container that has no padding or border of its own, so it moved the container and the toolbar down together and left the overlap exactly where it was. Padding cannot collapse, and the toolbar is anchored at top:2px against the container's padding box, which padding-top does not shift — so the headings move down and the toolbar stays put. Deliberately narrow. It applies only where that header is genuinely absent, so the tables that do carry a title keep the spacing Carbon already gave them — 4 of the 20 in the admin app. The :has() guard is what makes that distinction possible; a browser without it simply drops the rule and nothing changes. */ .cds--data-table-container:not(:has(.cds--data-table-header)) { padding-top: 3rem; } /* Navbar global actions — prevent overflow on mobile. `overflow` is deliberately `visible`, and must stay that way. This rule used to say `hidden`, which clipped away every tooltip on the right-hand navbar icons (Search patient, Add patient, Notifications, My Account, App Menu): Carbon renders an icon-button tooltip below its trigger, and the trigger sits inside this 48px-tall bar, so a hidden overflow ate the label entirely. What made that visible rather than merely broken is palmed-rtl-popover-fix.js. Its vertical correction is not RTL-gated: it walks up for the nearest ancestor whose overflow-y clips, found this bar, and dragged each label back up INSIDE the header — beside the icon instead of under it. (It also lost Carbon's own `translateX(-50%)` on the way, since it composes onto the inline transform only, which is why the labels ran rightwards from the icon's left edge rather than staying centred.) The location button escaped all of this only because it lives in `top-nav-info-slot`, outside this bar, and so has no clipping ancestor at all — which is exactly why its tooltip has always looked right and the others have not. Carbon itself never sets overflow here and explicitly raises the z-index of popovers inside this bar (`.cds--header__global .cds--popover`), so escaping the header is the intended behaviour. `flex-shrink: 1` and `min-width: 0` below are what actually do the mobile job — measured at 360px, scrollWidth == clientWidth, so the hidden overflow was clipping nothing. */ .cds--header__global { flex-shrink: 1 !important; min-width: 0 !important; overflow: visible !important; } /* Chart grid container — prevent child overflow */ [class*="dashboard-view__dashboard"] { min-width: 0 !important; overflow: hidden !important; } /* Card header (tabletHeader) — constrain */ [class*="card-header__tabletHeader"] { min-width: 0 !important; max-width: 100% !important; } /* --- Mobile Responsiveness for Patient Chart --- */ @media (max-width: 672px) { [class*="patient-banner__container"] { padding: 0.75rem !important; flex-wrap: wrap !important; } [class*="esm-patient-banner__patient-banner__patientBanner"] > div > div > div > span { font-size: 0.9375rem !important; } [class*="chartReview"] { padding: 0.75rem !important; gap: 0.75rem !important; } /* Constrain the dashboard grid extensions */ [class*="dashboard-view__dashboard"] { max-width: 100% !important; overflow: hidden !important; } /* Table cells — compact on tablet */ .cds--data-table td { font-size: 0.8125rem !important; padding: 0.5rem 0.75rem !important; } .cds--data-table th { font-size: 0.75rem !important; padding: 0.5rem 0.75rem !important; } /* Widget card headers — stack controls */ [class*="tabletHeader"], [class*="card-header__tabletHeader"] { flex-wrap: wrap !important; gap: 0.5rem !important; } } @media (max-width: 480px) { [class*="patient-banner__container"] { padding: 0.5rem 0.75rem !important; } [class*="esm-patient-banner__patient-banner__patientBanner"] > div > div > div > span { font-size: 0.875rem !important; } [class*="patient-banner__container"] [class*="patientAvatar"], [class*="patient-banner__container"] [class*="avatar"] { width: 2.5rem !important; height: 2.5rem !important; } /* Compact table cells on phone. NOT `word-break: break-word`, which this rule used to carry. That value is a deprecated alias for `overflow-wrap: anywhere`, and `anywhere` -- unlike `break-word` -- also shrinks the element's MIN-CONTENT width, to the width of a single character. Every cell in the table therefore reported that it could survive at ~8px, the table happily compressed to whatever was left, and "03-Sept-2026" came out stacked one character per line. `overflow-wrap: break-word` breaks an over-long token the same way without touching min-content, so the table keeps an honest minimum and section 21 lets it scroll instead of collapse. */ .cds--data-table td { font-size: 0.75rem !important; padding: 0.375rem 0.5rem !important; word-break: normal !important; overflow-wrap: break-word !important; } .cds--data-table th { font-size: 0.6875rem !important; padding: 0.375rem 0.5rem !important; white-space: nowrap !important; } /* Tighter chart review padding */ [class*="chartReview"] { padding: 0.5rem !important; gap: 0.5rem !important; } /* Widget section headers — smaller gap */ [class*="desktopHeading"] h4::before, [class*="desktopHeader"] h4::before { height: 1.25rem !important; width: 3px !important; } } /* ============================================================================= 14. HIDE LEFT NAV FOR SINGLE-APP-LOCKED ROLES (Lab Technician, Pharmacist) RoleAccessGuard (palmed-esm-admin-app) toggles this class on once it determines the logged-in user's role is locked to exactly one app (every other left-nav destination -- Clinic Dashboard, Service queues, Appointments, Patient lists -- just bounces straight back, so showing them at all is pure clutter). The stock `