" (DICOM 0020,1208 / 0020,1206). Images stream into
Orthanc after the study row appears, so a study is only viewable once the
count is populated. js/revamp.js wraps the cell in a pill: RED while the
count is empty (not yet in Orthanc / not viewable), GREEN once it arrives. */
#edgestudtbl th#sinstance { width: 7%; text-align: center; }
#edgestudtbl td.imgcount-cell { text-align: center; white-space: nowrap; }
#edgestudtbl td.imgcount-cell .imgcount-pill {
display: inline-flex; align-items: center; gap: 3px;
padding: 3px 10px; border-radius: 11px;
font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
border: 1px solid transparent;
}
#edgestudtbl td.imgcount-cell .imgcount-pill.not-ready {
color: var(--bad);
background: color-mix(in srgb, var(--bad) 15%, transparent);
border-color: color-mix(in srgb, var(--bad) 40%, transparent);
}
#edgestudtbl td.imgcount-cell .imgcount-pill.ready {
color: var(--good);
background: color-mix(in srgb, var(--good) 16%, transparent);
border-color: color-mix(in srgb, var(--good) 42%, transparent);
}
#edgestudtbl td.imgcount-cell .imgcount-pill .ic-dot {
width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
/* Rad (assignee) cell */
#edgestudtbl td.rad-cell .rad-name { color: var(--font-color); white-space: nowrap; }
/* bulk-select checkboxes */
#edgestudtbl .r-sel, #edgestudtbl .r-sel-all {
/* QA #3 — a global `input[type=checkbox]{appearance:none}` stripped the native
control, which also disables accent-color, so a *checked* row box rendered as
an empty square — clicking it looked like nothing happened. Force native
rendering back on just these boxes so the accent-coloured tick shows. */
appearance: auto;
-webkit-appearance: auto;
accent-color: var(--def-gr-color-a);
cursor: pointer;
width: 15px; height: 15px;
vertical-align: middle;
margin: 0 8px 0 0;
}
/* #1 (R2.4) align the row checkboxes with the header select-all. The row's first
| ships an inline `text-align:right; width:1px` (and the serial number is a
::after counter), which pushed the box to the right — override with !important
and pin the column so the header □ and row □ share the same left edge. */
#edgestudtbl tbody th:first-child { text-align: left; }
#edgestudtbl tbody tr[data-rzd-entry] > td:first-child {
text-align: left !important;
width: 52px !important;
padding-left: 14px !important;
white-space: nowrap;
}
/* floating selection footer with count chip + bulk actions */
[data-revamp-selbar] {
position: fixed; left: 50%; bottom: 20px;
transform: translate(-50%, 220%);
display: flex; align-items: center; gap: 12px;
background: var(--fg-color);
border: 1px solid var(--fg-color-a);
box-shadow: 0 14px 36px rgba(0, 0, 0, .38);
border-radius: 12px;
padding: 10px 14px; min-width: 380px;
z-index: 997;
transition: transform .2s ease;
}
[data-revamp-selbar].open { transform: translate(-50%, 0); }
[data-revamp-selbar] .rsb-count {
color: var(--def-gr-color-a); font-weight: 700; font-size: 13px; white-space: nowrap;
}
[data-revamp-selbar] .rsb-btn {
/* Sanity check: bulk-action buttons may hold an icon+label — flex-centre so
the label sits centred both horizontally and vertically. */
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
background: transparent; border: 1px solid var(--fg-color-a); color: var(--font-color);
border-radius: 8px; padding: 6px 14px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
[data-revamp-selbar] .rsb-btn:hover { border-color: var(--def-gr-color-a); color: var(--def-gr-color-a); }
/* ============================================================================
R2.1 — mockup alignment: full-width bands, contrast, pills, fonts, columns
(appended last so it overrides the earlier R2 rules)
============================================================================ */
/* full-width layout — no floating card. Worklist body uses the mockup's --bg-0. */
.desk { padding: 0 !important; background-color: #0A1520; }
[data-ui-card-holder] { width: 100%; margin: 0; }
[data-ui-card][data-rzd-route="/api/spin/radon/studies"] {
border: none; border-radius: 0; box-shadow: none; margin: 0;
background-color: #0A1520;
}
/* contrasting bands — exact mockup hex: topbar + header row = --bg-1 (#16323D),
filter bar + worklist body = --bg-0 (#0A1520). */
[data-header-bar] {
background: linear-gradient(180deg, #16323D 0%, #14303A 100%);
border-bottom: 1px solid #1d4252;
}
#edgestudtbl tbody tr:first-child,
#edgestudtbl tbody tr:first-child th {
background-color: #16323D;
border-bottom: 1px solid #1d4252;
}
[data-revamp-chips] {
background-color: #0A1520;
border-bottom: 1px solid #1d4252;
padding: 10px 18px;
gap: 8px;
}
/* light-theme band overrides — SWAPPED experiment: worklist body + filter chips
are white; the page header bar and the column-header row are grey. */
:root[data-theme="light"] .desk,
:root[data-theme="light"] [data-ui-card][data-rzd-route="/api/spin/radon/studies"],
:root[data-theme="light"] [data-revamp-chips] { background-color: #ffffff; }
/* SHARED HEADER across modes — keep the page header bar and the worklist
column-header the SAME dark theme in light mode as in dark mode, so both modes
read as the same product. Only the worklist BODY flips (white in light). */
:root[data-theme="light"] [data-header-bar] { background: linear-gradient(180deg,#16323D 0%,#14303A 100%); border-bottom-color: #1d4252; }
:root[data-theme="light"] #edgestudtbl tbody tr:first-child,
:root[data-theme="light"] #edgestudtbl tbody tr:first-child th { background-color: #16323D; border-bottom-color: #1d4252; color: #9fb4bf; }
/* worklist body: force study rows white (base table paints a grey tint); hover
gives a soft light-grey highlight with the teal accent bar. */
:root[data-theme="light"] #edgestudtbl tbody tr[data-rzd-entry] { background-color: #ffffff; }
:root[data-theme="light"] #edgestudtbl tbody tr[data-rzd-entry]:hover {
background-color: #eef2f6;
box-shadow: inset 3px 0 0 var(--def-gr-color-a);
}
/* ── Light-theme hardening (QA #1/#9/#10). All rules are scoped to
[data-theme="light"] only, so dark mode (the default :root) is never affected.
── */
/* #9 — form controls (incl. DISABLED read-only fields such as the "Edit instated
study details" values) must render dark, readable text in light mode. WebKit
dims disabled inputs via -webkit-text-fill-color, which a plain color rule does
NOT override — so set it (and opacity) explicitly. */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea { color: var(--font-color); }
:root[data-theme="light"] input:disabled,
:root[data-theme="light"] input[disabled],
:root[data-theme="light"] select:disabled,
:root[data-theme="light"] textarea:disabled {
color: var(--font-color) !important;
-webkit-text-fill-color: var(--font-color) !important;
opacity: 1 !important;
}
/* #1 — notification dropdown follows the theme tokens explicitly (belt-and-braces
in case it is appended outside the themed subtree). */
:root[data-theme="light"] .rnotif-dropdown { background: var(--fg-color); color: var(--font-color); }
:root[data-theme="light"] .rnotif-head-title,
:root[data-theme="light"] .rnotif-title { color: var(--text-strong); }
:root[data-theme="light"] .rnotif-body { color: var(--font-color); }
/* #10 — priority / stage flag pills keep a visible outline on the pale
background so low-saturation states don't wash out. */
:root[data-theme="light"] [data-revamp-chips] .r-chip,
:root[data-theme="light"] .prio,
:root[data-theme="light"] .stage-pill { border: 1px solid color-mix(in srgb, var(--font-color) 18%, transparent); }
/* ── Option 1 (light mode): SOLID worklist data pills ──────────────────
On the pale grey worklist the tinted/outlined pills washed out. Fill each
pill with its own colour (deepened ~10% so white text stays legible on the
brighter ramps) + white text, so modality, image-count and report-stage
chips read at a glance. Dark mode (default :root) keeps the softer tint. */
:root[data-theme="light"] #edgestudtbl td .mod-chip {
background-color: color-mix(in srgb, var(--mc) 90%, #000);
border-color: color-mix(in srgb, var(--mc) 90%, #000);
color: #fff;
}
:root[data-theme="light"] #edgestudtbl td .icon[data-ui-svg^="report_"] {
background-color: color-mix(in srgb, var(--stage-c) 90%, #000);
border-color: color-mix(in srgb, var(--stage-c) 90%, #000);
color: #fff;
}
:root[data-theme="light"] #edgestudtbl td .icon[data-ui-svg^="report_"]:hover {
background-color: color-mix(in srgb, var(--stage-c) 78%, #000);
}
:root[data-theme="light"] #edgestudtbl td.imgcount-cell .imgcount-pill.ready {
background: color-mix(in srgb, var(--good) 90%, #000);
border-color: color-mix(in srgb, var(--good) 90%, #000);
color: #fff;
}
:root[data-theme="light"] #edgestudtbl td.imgcount-cell .imgcount-pill.not-ready {
background: color-mix(in srgb, var(--bad) 90%, #000);
border-color: color-mix(in srgb, var(--bad) 90%, #000);
color: #fff;
}
:root[data-theme="light"] #edgestudtbl td .attest-chip {
background-color: color-mix(in srgb, var(--ac) 90%, #000);
border-color: color-mix(in srgb, var(--ac) 90%, #000);
color: #fff;
}
/* #10b — emergency-flag picker icons must be obviously visible AT REST, not only
on hover. The base .icon only paints a highlight box on :hover, leaving flags as
bare, easy-to-miss emoji at rest — so give each flag that chip treatment
permanently (subtle tint + border), and deepen it on hover. Both themes. */
[data-radm-flags] .icon[data-ui-svg^="flag_"] {
/* Keep flags visible at rest (opacity/filter) but WITHOUT the chip box —
the coloured flag glyphs read fine on their own and the box was noisy. */
opacity: 1 !important;
filter: none !important;
background-color: transparent !important;
border: none;
padding: 0;
}
[data-radm-flags] .icon[data-ui-svg^="flag_"]:hover {
/* subtle highlight on hover only */
background-color: color-mix(in srgb, var(--def-gr-color-a) 18%, transparent) !important;
border-radius: 6px;
}
[data-radm-flags] .icon[data-ui-svg^="flag_"]::before { opacity: 1 !important; }
/* QA #7 (retry) — the emergency-flag picker emojis were STILL greyscaled at rest and
only regained colour on hover. Cause: the base rule `.icon[data-toggle="0"]{filter:
grayscale(1)}` is applied via a data-toggle the flag cell picks up at runtime, and
the earlier `[data-ui-svg^="flag_"]` override missed it once JS mutated the attribute.
Force full colour on EVERY direct icon child of the flag well, regardless of
data-toggle / data-ui-svg, in both themes. */
[data-radm-flags],
[data-ui-menuwell],
[data-radm-flags] > .icon,
[data-radm-flags] > .icon[data-toggle],
[data-radm-flags] > .icon[data-toggle="0"],
[data-radm-flags] .icon[data-ui-svg^="flag_"]::before {
filter: grayscale(0) !important;
-webkit-filter: grayscale(0) !important;
opacity: 1 !important;
}
/* QA #7 — the WORKLIST ROW flag chip ([data-name="radflag"]) was only visible on
hover (the base .icon paints its highlight box on :hover), so priority/emergency
flags washed out at rest, especially in light mode. Give it the same permanent
chip treatment (subtle tint + border) in both themes. */
[data-name="radflag"].icon {
/* Keep the flag emoji visible at rest but WITHOUT the tinted box — the
coloured glyph reads fine on its own and the box looked heavy. */
opacity: 1 !important;
filter: none !important;
background-color: transparent !important;
border: none;
padding: 0;
}
[data-name="radflag"].icon:hover {
background-color: color-mix(in srgb, var(--def-gr-color-a) 16%, transparent) !important;
border-radius: 6px;
}
[data-name="radflag"].icon::before { opacity: 1 !important; }
/* ── pills: mockup colors + selected state (cyan-shaded thicker borders) ── */
[data-revamp-chips] .r-chip {
border: 1.5px solid color-mix(in srgb, var(--def-gr-color-a) 45%, transparent);
color: var(--font-color);
background: transparent;
border-radius: 16px;
padding: 6px 13px;
}
[data-revamp-chips] .r-chip:hover { color: var(--text-strong); border-color: var(--def-gr-color-a); }
[data-revamp-chips] .r-chip.active,
[data-revamp-chips] .r-chip.r-mod.active {
background-color: color-mix(in srgb, var(--def-gr-color-a) 16%, transparent);
border-color: var(--def-gr-color-a);
color: var(--def-gr-color-b);
font-weight: 700;
}
[data-revamp-chips] .r-chip-adv {
border-style: dashed;
border-color: var(--def-gr-color-a);
color: var(--def-gr-color-b);
}
/* dropdown chips (Today / Pending Reports) */
[data-revamp-chips] .r-chip-dd { position: relative; display: inline-flex; }
[data-revamp-chips] .r-dd-btn { display: inline-flex; align-items: center; gap: 5px; }
[data-revamp-chips] .r-dd-caret { font-size: 9px; opacity: .85; }
[data-revamp-chips] .r-dd-menu {
position: absolute; top: calc(100% + 6px); left: 0; min-width: 168px;
background-color: var(--fg-color);
border: 1px solid var(--fg-color-a);
border-radius: 10px;
box-shadow: var(--def-box-shadow);
padding: 6px; z-index: 60; display: none;
}
[data-revamp-chips] .r-chip-dd.open .r-dd-menu { display: block; }
[data-revamp-chips] .r-dd-item {
padding: 8px 10px; border-radius: 6px; cursor: pointer;
font-size: 13px; color: var(--font-color); white-space: nowrap;
}
[data-revamp-chips] .r-dd-item:hover {
background-color: color-mix(in srgb, var(--def-gr-color-a) 14%, transparent);
color: var(--text-strong);
}
/* ── topbar: brand spacing, search box with icon, center pill ── */
[data-header-bar] [data-revamp-brand] { padding: 0 16px 0 8px; }
[data-revamp-search-wrap] {
flex: 1 1 auto; max-width: 540px;
position: relative; display: flex; align-items: center; margin: 0 12px;
}
[data-revamp-search-wrap] .rss-icon {
position: absolute; left: 12px; font-size: 13px; opacity: .65; pointer-events: none;
}
[data-header-bar] [data-revamp-search] { width: 100%; max-width: none; margin: 0; padding-left: 34px; }
/* center selector as a readable pin-pill */
[data-header-bar] [data-revamp-center] {
display: inline-flex; align-items: center; gap: 7px;
background-color: color-mix(in srgb, var(--def-gr-color-a) 12%, transparent);
border: 1.5px solid var(--def-gr-color-a);
border-radius: 18px;
padding: 6px 16px;
margin: 0 4px;
}
[data-header-bar] [data-revamp-center] .rc-pin { font-size: 14px; line-height: 1; }
[data-header-bar] [data-revamp-center] #centerdropdown {
-webkit-appearance: none !important; appearance: none !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none;
color: var(--text-strong); font-weight: 600; font-size: 13px;
padding: 0; margin: 0; min-width: 64px; height: auto; cursor: pointer;
}
[data-header-bar] [data-revamp-center] #centerdropdown option { color: #0a1520; }
/* keep the patient cell a real table-cell (was display:flex, which broke column
width and truncated names); flex lives on an inner wrapper instead */
#edgestudtbl td.pt-cell { display: table-cell !important; max-width: none; vertical-align: middle; }
#edgestudtbl td.pt-cell .pt-inner { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* ── fonts: brighter/bolder key text against the dark rows ── */
#edgestudtbl td.pt-cell .pt-name { color: var(--text-strong); font-weight: 700; }
#edgestudtbl td.study-cell,
#edgestudtbl td .rcv-d,
#edgestudtbl td.rad-cell .rad-name { color: var(--text-strong); }
/* ── column widths: Study is the flex column; the rest are sized so the row
fills uniformly with no dead gaps ── */
#edgestudtbl td:first-child, #edgestudtbl th:first-child { width: 52px; }
#edgestudtbl td.pt-cell, #edgestudtbl th#sname { width: 19%; }
#edgestudtbl td[data-rzd-d="@00101010"], #edgestudtbl th#sage { width: 6%; }
#edgestudtbl td:has(> .mod-chip), #edgestudtbl th#smod { width: 9%; }
#edgestudtbl td.study-cell, #edgestudtbl th#sstudy { width: 24%; }
/* ============================================================================
R2.2 — font sizes, uniform pills, larger detail glyphs
============================================================================ */
/* #5 font sizes (match mockup, top row a touch larger) */
#edgestudtbl tbody tr:first-child th {
font-size: 12px;
letter-spacing: 0.6px;
padding-top: 14px;
padding-bottom: 14px;
}
#edgestudtbl tbody td { font-size: 13px; }
#edgestudtbl td.pt-cell .pt-name { font-size: 14px; }
#edgestudtbl td .rcv-d { font-size: 13px; }
/* #7 uniform stage glyphs */
#edgestudtbl td .icon[data-ui-svg^="report_"] {
min-width: 26px;
justify-content: center;
}
/* #11 history / attachment -> clearer, larger glyphs */
#edgestudtbl td .icon[data-ui-svg="history"],
#edgestudtbl td .icon[data-ui-svg="attachment"] {
background-image: none !important;
aspect-ratio: auto !important;
width: 21px !important;
height: 21px !important;
margin: 0 5px;
background-color: var(--label-color);
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
}
#edgestudtbl td .icon[data-ui-svg="history"]:hover,
#edgestudtbl td .icon[data-ui-svg="attachment"]:hover { background-color: var(--def-gr-color-a); }
#edgestudtbl td .icon[data-ui-svg="history"] {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
#edgestudtbl td .icon[data-ui-svg="attachment"] {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
#edgestudtbl td .icon[data-ui-svg="history"]::after,
#edgestudtbl td .icon[data-ui-svg="attachment"]::after { content: none !important; }
/* #6 study cell: description first (flex), viewer icons larger on the right */
#edgestudtbl td.study-cell .study-inner {
display: flex; align-items: center; gap: 10px; min-width: 0;
}
#edgestudtbl td.study-cell .study-desc {
flex: 1 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--text-strong);
}
#edgestudtbl td.study-cell .study-icons {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
}
#edgestudtbl td.study-cell .study-icons .icon {
width: 24px; height: 24px; aspect-ratio: auto; background-size: contain;
}
/* the study-description edit cell (pencil) — narrow, no longer the flex column */
#edgestudtbl td.studydesc-edit { width: 34px; }
/* #2 refresh stamp + relocated reload button (in the filter bar, right side) */
[data-revamp-chips] [data-revamp-refresh-stamp] {
color: var(--label-color);
font-size: 12px;
margin: 0 6px 0 4px;
white-space: nowrap;
}
[data-revamp-chips] .r-reload-btn {
cursor: pointer;
color: var(--def-gr-color-b);
width: 30px; height: 30px;
aspect-ratio: auto;
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background-size: 54% 54%;
}
[data-revamp-chips] .r-reload-btn:hover {
background-color: color-mix(in srgb, var(--def-gr-color-a) 16%, transparent);
}
/* ============================================================================
R2.3 #4 — shared notifications bell + dropdown (topbar: after center pill,
before avatar). Mirrors the VidusNote notification UX.
============================================================================ */
[data-header-bar] .rnotif-bell {
flex: 0 0 auto;
position: relative;
width: 36px; height: 36px;
margin: 0 2px 0 6px;
padding: 0;
border: none;
border-radius: 50%;
background: color-mix(in srgb, var(--def-gr-color-a) 10%, transparent);
color: var(--text-strong);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
line-height: 1;
}
[data-header-bar] .rnotif-bell:hover {
background: color-mix(in srgb, var(--def-gr-color-a) 22%, transparent);
}
[data-header-bar] .rnotif-bell .rnotif-bell-glyph { font-size: 17px; }
[data-header-bar] .rnotif-bell .rnotif-badge {
position: absolute; top: -2px; right: -2px;
min-width: 17px; height: 17px;
padding: 0 4px;
border-radius: 9px;
background: var(--err-color);
color: #fff;
font-size: 10px; font-weight: 800; line-height: 17px;
text-align: center;
box-shadow: 0 0 0 2px var(--theme-color);
}
.rnotif-dropdown {
position: fixed;
z-index: 9999;
width: 360px; max-width: calc(100vw - 16px);
max-height: 70vh;
overflow: hidden;
display: flex; flex-direction: column;
background: var(--fg-color);
border: 1px solid color-mix(in srgb, var(--def-gr-color-a) 30%, transparent);
border-radius: 12px;
box-shadow: var(--def-box-shadow);
}
.rnotif-dropdown.hidden { display: none; }
.rnotif-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid color-mix(in srgb, var(--font-color) 14%, transparent);
}
.rnotif-head-title { font-weight: 700; font-size: 14px; color: var(--text-strong); }
.rnotif-mark-all {
border: none; background: transparent;
color: var(--def-gr-color-a);
font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px;
}
.rnotif-mark-all:hover { text-decoration: underline; }
.rnotif-list { overflow-y: auto; }
.rnotif-empty { padding: 26px 14px; text-align: center; color: var(--label-color); font-size: 13px; }
.rnotif-row {
padding: 10px 14px;
border-bottom: 1px solid color-mix(in srgb, var(--font-color) 9%, transparent);
cursor: pointer;
}
.rnotif-row:hover { background: color-mix(in srgb, var(--def-gr-color-a) 8%, transparent); }
.rnotif-row.unread { background: color-mix(in srgb, var(--def-gr-color-a) 12%, transparent); }
.rnotif-row.unread .rnotif-title { font-weight: 700; }
.rnotif-row.unread .rnotif-title::before {
content: ""; display: inline-block;
width: 7px; height: 7px; margin-right: 7px; vertical-align: middle;
border-radius: 50%; background: var(--def-gr-color-a);
}
.rnotif-title { font-size: 13px; color: var(--text-strong); }
.rnotif-body { font-size: 12px; color: var(--font-color); margin-top: 2px; }
.rnotif-foot {
display: flex; align-items: center; justify-content: space-between;
margin-top: 4px;
}
.rnotif-kind {
font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
color: var(--def-gr-color-a);
background: color-mix(in srgb, var(--def-gr-color-a) 14%, transparent);
padding: 1px 7px; border-radius: 8px;
}
.rnotif-time { font-size: 11px; color: var(--label-color); }
/* ============================================================================
R2.3 #9 — help (?) icon, tips popover, first-run spotlight tour
============================================================================ */
[data-header-bar] .r-help-btn {
flex: 0 0 auto;
width: 30px; height: 30px;
margin: 0 2px;
padding: 0;
border: 1.5px solid color-mix(in srgb, var(--def-gr-color-a) 55%, transparent);
border-radius: 50%;
background: transparent;
color: var(--text-strong);
font-weight: 800; font-size: 15px; line-height: 1;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
[data-header-bar] .r-help-btn:hover {
background: color-mix(in srgb, var(--def-gr-color-a) 18%, transparent);
}
/* The worklist header stays dark in BOTH modes, so force the center-pill text
and the help (?) glyph to white so they don't disappear (they used
--text-strong, which flips dark in light mode). */
[data-header-bar] [data-revamp-center] #centerdropdown,
[data-header-bar] .r-help-btn { color: #ffffff !important; }
.r-tips-pop {
position: fixed; z-index: 9999;
width: 360px; max-width: calc(100vw - 16px); max-height: 72vh;
overflow: hidden; display: flex; flex-direction: column;
background: var(--fg-color);
border: 1px solid color-mix(in srgb, var(--def-gr-color-a) 30%, transparent);
border-radius: 12px; box-shadow: var(--def-box-shadow);
}
.r-tips-pop.hidden { display: none; }
.r-tips-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid color-mix(in srgb, var(--font-color) 14%, transparent);
}
.r-tips-title { font-weight: 700; font-size: 14px; color: var(--text-strong); }
.r-tips-tour {
border: none; cursor: pointer;
background: linear-gradient(135deg, var(--def-gr-color-a), var(--def-gr-color-b));
color: #06222b; font-weight: 700; font-size: 12px;
padding: 5px 12px; border-radius: 14px;
}
.r-tips-body { overflow-y: auto; padding: 6px 0; }
.r-tip { display: flex; gap: 10px; padding: 9px 14px; }
.r-tip-ic { font-size: 16px; flex: 0 0 auto; line-height: 1.4; }
.r-tip-h { font-size: 13px; font-weight: 700; color: var(--text-strong); }
.r-tip-d { font-size: 12px; color: var(--font-color); margin-top: 1px; }
.r-tour-ov {
display: none; position: fixed; inset: 0; z-index: 10000;
background: rgba(3, 10, 18, .55);
}
.r-tour-spot {
display: none; position: fixed; z-index: 10001;
border-radius: 10px; pointer-events: none;
box-shadow: 0 0 0 9999px rgba(3, 10, 18, .55), 0 0 0 2px var(--def-gr-color-a);
transition: top .18s, left .18s, width .18s, height .18s;
}
.r-tour-tip {
display: none; position: fixed; z-index: 10002;
width: 280px;
background: var(--fg-color);
border: 1px solid color-mix(in srgb, var(--def-gr-color-a) 40%, transparent);
border-radius: 12px; box-shadow: var(--def-box-shadow);
padding: 14px;
}
.r-tour-h { font-size: 14px; font-weight: 800; color: var(--text-strong); }
.r-tour-d { font-size: 12.5px; color: var(--font-color); margin-top: 5px; line-height: 1.45; }
.r-tour-ft {
display: flex; align-items: center; justify-content: space-between;
margin-top: 12px;
}
.r-tour-step { font-size: 11px; color: var(--label-color); }
.r-tour-btns { display: inline-flex; gap: 8px; }
.r-tour-skip {
border: none; background: transparent; cursor: pointer;
color: var(--label-color); font-size: 12px; padding: 5px 6px;
}
.r-tour-next {
border: none; cursor: pointer;
background: linear-gradient(135deg, var(--def-gr-color-a), var(--def-gr-color-b));
color: #06222b; font-weight: 700; font-size: 12px;
padding: 6px 16px; border-radius: 14px;
}
/* #1 pagination footer — mockup-style pager */
[data-pagin] {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px; background-color: #0A1520;
border-top: 1px solid #1d4252;
}
:root[data-theme="light"] [data-pagin] { background-color: #eef2f6; border-top-color: var(--fg-color-a); }
[data-pagin] .icon {
width: 30px; height: 30px; aspect-ratio: auto;
border-radius: 8px; cursor: pointer;
border: 1px solid var(--fg-color-a);
background-size: 42% 42%;
color: var(--font-color);
}
[data-pagin] .icon:hover { border-color: var(--def-gr-color-a); }
[data-pagin] [data-pagin-pg] {
color: var(--font-color); font-size: 13px; font-weight: 600;
display: inline-flex; gap: 4px; padding: 0 8px;
}
#edgestudtbl td.rad-cell, #edgestudtbl th#sassign { width: 9%; }
/* Report cell: the template hard-codes an inline width:66px which clips the
stage pill (min-width 96px) + the critical flag beside it on narrower
screens. Override so the pill + flag always have room and never clip. */
#edgestudtbl td:has(> .icon[data-ui-svg^="report_"]) {
width: auto !important; min-width: 84px; white-space: nowrap; overflow: visible;
}
#edgestudtbl th[id="sreport"], #edgestudtbl tbody tr:first-child th:nth-of-type(8) { min-width: 84px; }
#edgestudtbl td[data-rzd-d="@instated_date"], #edgestudtbl th#sinstdate { width: 10%; }
/* ── Hover-revealed row actions ──
Clean rows by default: the viewer-launch, download, history and attachment
icons are hidden until the row is hovered (the ≡ menu already hover-reveals).
Reduces the per-row icon clutter like the mockup. */
#edgestudtbl tbody tr[data-rzd-entry] .icon[data-ui-svg="vue"],
#edgestudtbl tbody tr[data-rzd-entry] .icon[data-ui-svg="ocular"],
#edgestudtbl tbody tr[data-rzd-entry] .icon[data-ui-svg="download"],
#edgestudtbl tbody tr[data-rzd-entry] .icon[data-ui-svg="history"],
#edgestudtbl tbody tr[data-rzd-entry] .icon[data-ui-svg="attachment"],
#edgestudtbl tbody tr[data-rzd-entry] .icon[data-ui-svg="vidusprint"] {
opacity: 0;
transition: opacity .12s;
}
#edgestudtbl tbody tr[data-rzd-entry]:hover .icon[data-ui-svg="vue"],
#edgestudtbl tbody tr[data-rzd-entry]:hover .icon[data-ui-svg="ocular"],
#edgestudtbl tbody tr[data-rzd-entry]:hover .icon[data-ui-svg="download"],
#edgestudtbl tbody tr[data-rzd-entry]:hover .icon[data-ui-svg="history"],
#edgestudtbl tbody tr[data-rzd-entry]:hover .icon[data-ui-svg="attachment"],
#edgestudtbl tbody tr[data-rzd-entry]:hover .icon[data-ui-svg="vidusprint"] {
opacity: 1;
}
/* F6: message icon joins the hover-revealed set, but STAYS visible when it has
an unread message so an incoming message is never missed. */
#edgestudtbl tbody tr[data-rzd-entry] .icon[data-name="msgicon"] {
opacity: 0;
transition: opacity .12s;
}
#edgestudtbl tbody tr[data-rzd-entry]:hover .icon[data-name="msgicon"],
#edgestudtbl tbody tr[data-rzd-entry] .icon[data-name="msgicon"].has-unread {
opacity: 1;
}
/* Critical / emergency flag — make it prominent (was a tiny icon) */
#edgestudtbl td [data-name="radflag"] {
aspect-ratio: auto !important;
width: 24px !important;
height: 24px !important;
background-size: contain !important;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
vertical-align: middle;
margin-left: 6px;
filter: drop-shadow(0 0 4px color-mix(in srgb, var(--bad) 60%, transparent));
}
/* ============================================================================
MOBILE (≤900px) — worklist as cards, collapsed topbar, bottom bar, sheets.
Mobile component nodes are display:none by default (desktop); shown in the
media query. Built by js/revamp.js. Uses the shared theme tokens.
============================================================================ */
[data-revamp-mcards], [data-revamp-mcontext], [data-revamp-mbottombar] { display: none; }
.m-as-back { display: none; }
/* ---- mobile component styles (only visible inside mobile containers) ---- */
[data-revamp-mcontext] {
align-items: center; justify-content: space-between;
padding: 10px 14px; background: var(--bg-color);
border-bottom: 1px solid var(--fg-color-a);
}
[data-revamp-mcontext] .m-site {
background: color-mix(in srgb, var(--def-gr-color-a) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--def-gr-color-a) 30%, transparent);
color: var(--def-gr-color-a); padding: 4px 10px; border-radius: 12px;
font-size: 11px; font-weight: 600;
}
[data-revamp-mcontext] .m-count { font-size: 11.5px; color: var(--label-color); }
[data-revamp-mcontext] .m-count b { color: var(--text-strong); }
[data-revamp-mcards] { padding: 12px 14px 24px; background: var(--bg-color); }
[data-revamp-mcards] .m-empty { color: var(--label-color); text-align: center; padding: 40px 0; }
.m-card {
background: var(--fg-color); border: 1px solid var(--fg-color-a);
border-radius: 12px; padding: 12px; margin-bottom: 10px; position: relative;
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.m-card:active { background: color-mix(in srgb, var(--def-gr-color-a) 8%, var(--fg-color)); }
.m-card-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.m-card .m-pt-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--bg-color); border: 1px solid var(--fg-color-a);
color: var(--def-gr-color-a); display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.m-card .m-pt-info { flex: 1; min-width: 0; }
.m-card .m-pt-name { font-weight: 700; color: var(--text-strong); font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-card .m-pt-mrn { font-size: 11.5px; color: var(--label-color); margin-top: 3px; }
.m-card .m-pt-mrn .demo { color: var(--def-gr-color-a); font-weight: 600; margin-right: 8px; }
.m-card .m-crit { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); margin-top: 12px; flex-shrink: 0; }
.m-card .m-card-more { background: transparent; border: none; color: var(--label-color); font-size: 20px; line-height: 1; padding: 2px 4px; cursor: pointer; flex-shrink: 0; align-self: flex-start; }
.m-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.m-card .m-mod { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: .4px; border: 1px solid; }
.m-card .m-mod-CT { background: color-mix(in srgb, var(--def-gr-color-a) 14%, transparent); color: var(--def-gr-color-a); border-color: color-mix(in srgb, var(--def-gr-color-a) 35%, transparent); }
.m-card .m-mod-MR, .m-card .m-mod-MRI { background: color-mix(in srgb, var(--purple) 14%, transparent); color: var(--purple); border-color: color-mix(in srgb, var(--purple) 35%, transparent); }
.m-card .m-mod-US, .m-card .m-mod-USG { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.m-card .m-mod-CR, .m-card .m-mod-DX, .m-card .m-mod-XA { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.m-card .m-mod-MG { background: color-mix(in srgb, var(--pink, #f472b6) 14%, transparent); color: #f472b6; border-color: color-mix(in srgb, #f472b6 35%, transparent); }
.m-card .m-mod-NM, .m-card .m-mod-PT { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.m-card .m-stage { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 10px; font-size: 10px; font-weight: 600; border: 1px solid; }
.m-card .m-stage::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
.m-card .m-stage-new { color: var(--label-color); border-color: var(--fg-color-a); }
.m-card .m-stage-new::before { background: var(--label-color); }
.m-card .m-stage-transcript { color: var(--label-color); border-color: var(--fg-color-a); }
.m-card .m-stage-transcript::before { background: var(--label-color); }
.m-card .m-stage-draft { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.m-card .m-stage-draft::before { background: var(--warn); }
.m-card .m-stage-prelim { color: var(--def-gr-color-a); border-color: color-mix(in srgb, var(--def-gr-color-a) 40%, transparent); background: color-mix(in srgb, var(--def-gr-color-a) 8%, transparent); }
.m-card .m-stage-prelim::before { background: var(--def-gr-color-a); }
.m-card .m-stage-final { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 8%, transparent); }
.m-card .m-stage-final::before { background: var(--good); }
.m-card .m-stage-addendum { color: var(--purple); border-color: color-mix(in srgb, var(--purple) 40%, transparent); background: color-mix(in srgb, var(--purple) 8%, transparent); }
.m-card .m-stage-addendum::before { background: var(--purple); }
.m-card .m-card-study { font-size: 12.5px; color: var(--text-strong); margin-bottom: 4px; }
.m-card .m-card-date { font-size: 11px; color: var(--label-color); }
.m-card .m-card-date b { color: var(--font-color); font-weight: 600; }
/* bottom action bar */
[data-revamp-mbottombar] {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 950;
background: color-mix(in srgb, var(--fg-color) 96%, transparent);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-top: 1px solid var(--fg-color-a);
padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px));
justify-content: space-around;
}
[data-revamp-mbottombar] .m-bb-btn {
background: transparent; border: none; color: var(--label-color);
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 4px 10px; font-size: 10px; font-weight: 500; cursor: pointer; min-width: 56px;
}
[data-revamp-mbottombar] .m-bb-btn .ic { font-size: 19px; }
[data-revamp-mbottombar] .m-bb-btn.active { color: var(--def-gr-color-a); }
/* study action sheet */
.m-as-back { position: fixed; inset: 0; z-index: 1200; background: rgba(3,10,18,.6); opacity: 0; pointer-events: none; transition: opacity .2s; }
.m-as-back.open { display: block; opacity: 1; pointer-events: auto; }
.m-as-sheet {
position: absolute; left: 0; right: 0; bottom: 0; max-height: 90vh; overflow-y: auto;
background: var(--fg-color); border-top: 1px solid var(--fg-color-a);
border-radius: 18px 18px 0 0; padding: 6px 0 calc(20px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -10px 40px rgba(0,0,0,.4); transform: translateY(100%); transition: transform .22s ease;
}
.m-as-back.open .m-as-sheet { transform: translateY(0); }
.m-as-grip { width: 36px; height: 4px; background: var(--fg-color-a); border-radius: 3px; margin: 8px auto 12px; }
.m-as-pt { padding: 0 18px 12px; border-bottom: 1px solid var(--fg-color-a); margin-bottom: 6px; }
.m-as-pt-name { font-weight: 700; color: var(--text-strong); font-size: 14px; }
.m-as-pt-meta { font-size: 11.5px; color: var(--label-color); margin-top: 3px; }
.m-as-section-h { padding: 8px 18px 4px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--label-color); font-weight: 700; }
.m-as-item { display: flex; align-items: center; gap: 14px; padding: 13px 18px; color: var(--text-strong); font-size: 14px; cursor: pointer; }
.m-as-item:active { background: color-mix(in srgb, var(--def-gr-color-a) 8%, transparent); }
.m-as-item .ic { width: 22px; text-align: center; color: var(--def-gr-color-a); font-size: 17px; display: inline-flex; align-items: center; justify-content: center; }
.m-as-item .ic svg { width: 18px; height: 18px; display: block; }
.m-as-item.danger { color: var(--bad); }
.m-as-item.danger .ic { color: var(--bad); }
.m-as-flag-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 6px 18px 12px; }
.m-as-flag { aspect-ratio: 1; background: var(--bg-color); border: 1px solid var(--fg-color-a); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; }
.m-as-flag:active { border-color: var(--def-gr-color-a); }
.m-as-flag-clear { color: var(--bad); font-size: 16px; }
/* ── Emergency-flag icons: replace the per-flag SVG files with the friendly
emoji set so the worklist hmenu (desktop + mobile) matches the mobile cards
and action sheet. Applies wherever a flag icon renders. ── */
[data-radm-flags] .icon[data-ui-svg^="flag_"],
[data-name="radflag"][data-ui-svg^="flag_"] {
background-image: none !important;
display: inline-flex !important; align-items: center; justify-content: center;
}
[data-radm-flags] .icon[data-ui-svg^="flag_"]::before,
[data-name="radflag"][data-ui-svg^="flag_"]::before {
font-size: 19px; line-height: 1;
/* QA #7 (real cause) — computed style showed filter:none but color:#5a6572 (grey):
the flag emoji were rendering as MONOCHROME TEXT glyphs taking the grey text
colour, not as colour emoji. Force the colour-emoji font + emoji presentation so
they render in colour AT REST regardless of the inherited text colour. */
font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", "Twemoji Mozilla", "EmojiOne Color", system-ui, sans-serif !important;
font-variant-emoji: emoji;
}
[data-ui-svg="flag_emergency"]::before { content: "🚨"; }
[data-ui-svg="flag_priority"]::before { content: "❗"; }
[data-ui-svg="flag_stroke"]::before { content: "🧠"; }
[data-ui-svg="flag_icbleed"]::before { content: "🩸"; }
[data-ui-svg="flag_cardiovas"]::before { content: "🫀"; }
[data-ui-svg="flag_resp"]::before { content: "🫁"; }
/* GI: no good emoji (🩻 reads as a skeleton) — render the stomach glyph via a
masked SVG so the flag picker, the desktop worklist flag, and the mobile card
all match. */
[data-ui-svg="flag_gi"]::before {
content: "";
display: inline-block;
width: 1.2em; height: 1.2em;
background-color: #e8917f;
-webkit-mask: url("data:image/svg+xml,") center / contain no-repeat;
mask: url("data:image/svg+xml,") center / contain no-repeat;
}
[data-ui-svg="flag_gu"]::before { content: "💧"; }
[data-ui-svg="flag_obs"]::before { content: "🤰"; }
[data-ui-svg="flag_gyne"]::before { content: "⚧"; }
[data-ui-svg="flag_trauma"]::before { content: "🦴"; }
[data-ui-svg="flag_onco"]::before { content: "🎗"; }
[data-ui-svg="flag_infectious"]::before { content: "🦠"; }
/* the clear option: a subtle ✕, not a delete-looking icon */
[data-radm-flags] .icon[data-ui-svg="flag_delete"] { background-image: none !important; }
[data-radm-flags] .icon[data-ui-svg="flag_delete"]::before {
content: "✕"; color: var(--label-color); font-weight: 700; font-size: 14px;
}
[data-radm-flags] .icon[data-ui-svg="flag_delete"]:hover::before { color: var(--bad); }
/* ── Study hover-menu (the ⋯/≡ menuH popup): bring it closer to the revamp
style — themed surface, rounded, tidy rows. Scoped to the study menu. ── */
[data-ui-svg="menuH"][data-group="edge_study_menu"] + [data-ui-basemenu] {
background: var(--fg-color) !important;
border: 1px solid var(--fg-color-a) !important;
border-radius: 12px !important;
box-shadow: var(--def-box-shadow) !important;
padding: 6px !important;
}
[data-ui-svg="menuH"][data-group="edge_study_menu"] + [data-ui-basemenu] [data-ui-row="basemenu"] {
border-radius: 8px; padding: 9px 10px;
}
[data-ui-svg="menuH"][data-group="edge_study_menu"] + [data-ui-basemenu] [data-ui-row="basemenu"]:hover {
background: color-mix(in srgb, var(--def-gr-color-a) 10%, transparent);
}
[data-ui-svg="menuH"][data-group="edge_study_menu"] + [data-ui-basemenu] [data-radm-flags] {
display: flex; flex-wrap: wrap; gap: 6px;
}
@media (max-width: 900px) {
/* allow the page to scroll on mobile (desktop locks to 100dvh) and kill
any horizontal overflow that pushed the card actions (⋮) off-screen */
html, body { height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; max-width: 100% !important; }
.app { height: auto !important; max-width: 100% !important; overflow-x: hidden !important; }
.desk { padding: 0 !important; height: auto !important; overflow: visible !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
[data-ui-card-holder] { padding: 0 !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
[data-ui-card][data-rzd-route="/api/spin/radon/studies"] { border: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
[data-name="rad_study_list_view"] { height: auto !important; overflow: visible !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; min-height: 0 !important; }
[data-revamp-mcards] { padding: 0 12px; box-sizing: border-box; max-width: 100%; }
[data-revamp-mcards] .m-card { max-width: 100%; box-sizing: border-box; }
/* make the card actions button an obvious, easy tap target */
.m-card .m-card-more { font-size: 22px !important; color: var(--font-color) !important; padding: 2px 4px !important; margin-left: 2px; }
/* patient name acts like a link to the viewer (matches desktop) */
.m-card .m-pt-name[data-mcard-name] { cursor: pointer; }
.m-card .m-pt-name[data-mcard-name]:active { color: var(--def-gr-color-a); }
/* in-card report glyph → reporting tool */
.m-card .m-card-report {
background: transparent; border: none; font-size: 18px; line-height: 1;
padding: 2px 4px; cursor: pointer; flex-shrink: 0; align-self: flex-start;
}
/* active emergency flag, shown inside the card (chip only — no left bar) */
/* card flag: just the icon, a touch larger — no chip, no text */
.m-card .m-flag {
display: inline-flex; align-items: center; line-height: 1;
font-size: 19px; padding: 0; background: none; border: none;
}
/* the clear/"delete" flag has no place in the mobile flag grids */
[data-radm-flags] .icon[data-ui-svg="flag_delete"] { display: none !important; }
.m-as-flag-clear { display: none !important; }
/* safety net: nothing but cards should live in the card list (no stray bars) */
[data-revamp-mcards] > :not(.m-card):not(.m-empty) { display: none !important; }
/* notification bell: clean glyph only — no cyan disc, no tap-highlight flash */
[data-header-bar] .rnotif-bell { background: transparent !important; -webkit-tap-highlight-color: transparent !important; box-shadow: none !important; }
[data-header-bar] .rnotif-bell:hover { background: transparent !important; }
[data-header-bar] .rnotif-bell:focus, [data-header-bar] .rnotif-bell:active { outline: none !important; background: transparent !important; }
/* the framework status bar is absolutely-positioned and lands as a blank
bar over the cards on mobile — hide it here */
[data-ui-statusbar] { display: none !important; }
/* remove the bright cyan tap-highlight across the mobile action surfaces */
[data-revamp-mbottombar] .m-bb-btn, .m-as-item, .m-as-flag, .m-card-more, .m-card-report,
.m-pt-name[data-mcard-name], [data-revamp-mcenter] { -webkit-tap-highlight-color: transparent !important; }
/* bottom-bar funnel icon sizing */
[data-revamp-mbottombar] .m-bb-btn .ic svg { width: 20px; height: 20px; display: block; }
/* relocated in-row menu (Reassign / History / Attachments) as a bottom sheet */
.m-rm-back { position: fixed; inset: 0; z-index: 1200; background: rgba(3, 10, 18, .6); opacity: 0; pointer-events: none; transition: opacity .2s; }
.m-rm-back.open { opacity: 1; pointer-events: auto; }
.m-rm-sheet {
position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto;
background: var(--fg-color); border-top: 1px solid var(--fg-color-a); border-radius: 18px 18px 0 0;
padding: 6px 0 calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .4);
transform: translateY(100%); transition: transform .22s ease;
}
.m-rm-back.open .m-rm-sheet { transform: translateY(0); }
.m-rm-host { padding: 4px 16px 14px; }
/* force the framework's absolutely-positioned menu to render inline + full width */
.m-rm-host [data-ui-basemenu-cont] > *:first-child { display: none !important; } /* hide the trigger glyph */
.m-rm-host [data-ui-basemenu] {
position: static !important; display: block !important; inset: auto !important;
transform: none !important; max-height: none !important; width: 100% !important;
background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
}
.m-rm-host [data-ui-row="basemenu"] { padding: 12px 4px !important; font-size: 15px; }
.m-rm-host select { width: 100%; padding: 10px; margin-top: 6px; box-sizing: border-box; }
.m-rm-host [data-ui-lnbtn] { margin: 10px 0 0 !important; }
/* hide the desktop table + heavy chrome */
#edgestudtbl { display: none !important; }
[data-revamp-selbar] { display: none !important; }
[data-name="rad_study_list_view"] > [data-ui-opnbtn] { display: none !important; } /* upload/download/pacs buttons (also in chip strip) */
/* sticky topbar, collapsed. High z-index so the user-menu drawer (which
lives inside the header) paints above the chip strip and bottom bar. */
[data-header-bar] { position: sticky; top: 0; z-index: 1000; padding: 6px 8px; height: 52px; }
[data-header-bar] [data-revamp-center],
[data-header-bar] .r-help-btn,
[data-header-bar] [data-revamp-avatar],
[data-header-bar] .icon[data-ui-svg="edge"],
[data-header-bar] .icon[data-ui-svg="outpatient"],
[data-header-bar] .icon[data-ui-svg="search_list"] { display: none !important; }
/* two-row topbar: brand + bell on row 1, global search on row 2 */
[data-header-bar] { flex-wrap: wrap !important; height: auto !important; align-items: center; }
[data-header-bar] [data-revamp-brand] { flex: 0 1 auto; text-align: left; font-size: 18px; padding: 0 6px; }
[data-header-bar] [data-revamp-search-wrap] { display: flex !important; order: 20; flex: 1 0 100% !important; max-width: none; margin: 4px 0 2px; }
/* keep the notification bell visible, pinned to the top-right of row 1 */
[data-header-bar] .rnotif-bell { display: inline-flex !important; position: absolute; right: 12px; top: 8px; transform: none; z-index: 3; }
/* chip strip: WRAP so every filter is reachable without horizontal
scrolling, keep overflow visible so the Today/Pending dropdowns are not
clipped, and raise its stacking context above the cards. */
[data-revamp-chips] {
overflow: visible !important; flex-wrap: wrap !important;
align-items: center; justify-content: flex-start;
row-gap: 8px; column-gap: 8px; padding: 10px 12px;
position: relative; z-index: 300;
}
/* uniform, tidy chips so the wrapped strip looks neat */
[data-revamp-chips] .r-chip,
[data-revamp-chips] .r-dd-btn {
height: 32px; box-sizing: border-box; display: inline-flex; align-items: center;
margin: 0 !important; font-size: 12.5px;
}
[data-revamp-chips] .r-chip-div { display: none !important; } /* drop the divider on mobile */
[data-revamp-chips] .r-dd-menu { z-index: 500; }
[data-revamp-chips] .r-toolbtn,
[data-revamp-chips] .r-reload-btn,
[data-revamp-chips] [data-revamp-refresh-stamp],
[data-revamp-chips] .r-strip-spacer { display: none !important; }
/* context bar centre selector */
[data-revamp-mcontext] [data-revamp-mcenter] {
background: transparent; border: none; color: var(--def-gr-color-a);
font-weight: 600; font-size: 12px; padding: 2px 4px; max-width: 60vw;
font-family: inherit; cursor: pointer;
}
/* reveal mobile components */
[data-revamp-mcontext] { display: flex; }
[data-revamp-mcards] { display: block; }
[data-revamp-mbottombar] { display: flex; }
/* advanced-filters panel → bottom sheet */
[data-revamp-filter-panel] {
top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto;
max-height: 88vh; border-left: none; border-top: 1px solid var(--fg-color-a);
border-radius: 18px 18px 0 0; transform: translateY(100%);
box-shadow: 0 -10px 40px rgba(0,0,0,.45);
}
[data-revamp-filter-panel].open { transform: translateY(0); }
}
|