/* ── Theme Variables ───────────────────────────────────────────── */
:root,[data-theme="dark"]{
--bg: #0a0a0f;
--surface: #111118;
--surface2: #16161f;
--surface3: #1c1c28;
--surface4: #22222f;
--border: rgba(255,255,255,.07);
--border2: rgba(255,255,255,.12);
--text: #e8e8f0;
--text2: #9898b0;
--text3: #5a5a78;
--accent: #6c63ff;
--accent2: #a5a0ff;
--accent-bg: rgba(108,99,255,.12);
--accent-border: rgba(108,99,255,.35);
--green: #22c55e; --green-bg: rgba(34,197,94,.1); --green-border: rgba(34,197,94,.25);
--amber: #f59e0b; --amber-bg: rgba(245,158,11,.1); --amber-border: rgba(245,158,11,.25);
--red: #ef4444; --red-bg: rgba(239,68,68,.1); --red-border: rgba(239,68,68,.25);
--blue: #38bdf8; --blue-bg: rgba(56,189,248,.1); --blue-border: rgba(56,189,248,.25);
--teal: #2dd4bf; --teal-bg: rgba(45,212,191,.1); --teal-border: rgba(45,212,191,.25);
/* User-customizable (Appearance panel, js/ui-prefs.js) — these defaults apply
until the user picks their own; overridden via inline style on so
they win regardless of dark/light theme. */
--user-status-drafted: #f59e0b;
--user-status-completed: #38bdf8;
--user-status-finalized: #22c55e;
--user-status-printed: #6c63ff;
--user-has-history: #22c55e;
--sidebar-w: 240px;
--topbar-h: 56px;
/* UI Preferences (Settings → UI Preferences, js/ui-prefs.js) — --radius-scale/--pad-scale/
--ui-zoom default to 1 (no change from the hardcoded values below) until the server-side
theme is fetched and applied; --r/--r-sm/--r-lg and every padding: calc(...) declaration
read the scale so the ~20 existing --r* usages and the handful of padding rules tokenized
for density all move together from one multiplier each, without needing to touch every
individual rule. */
--radius-scale: 1;
--pad-scale: 1;
--ui-zoom: 1;
--font-sans: 'Inter', sans-serif;
--r: calc(10px * var(--radius-scale));
--r-sm: calc(6px * var(--radius-scale));
--r-lg: calc(14px * var(--radius-scale));
--shadow: 0 4px 24px rgba(0,0,0,.4);
--shadow-sm: 0 2px 8px rgba(0,0,0,.3);
}
[data-theme="light"]{
--bg: #f0f0f8;
--surface: #ffffff;
--surface2: #f8f8fc;
--surface3: #f0f0f8;
--surface4: #e8e8f4;
--border: rgba(0,0,0,.08);
--border2: rgba(0,0,0,.14);
--text: #1a1a2e;
--text2: #5a5a7a;
--text3: #9898b8;
--accent: #5b52e8;
--accent2: #6c63ff;
--accent-bg: rgba(91,82,232,.1);
--accent-border: rgba(91,82,232,.35);
--green: #16a34a; --green-bg: rgba(22,163,74,.08); --green-border: rgba(22,163,74,.3);
--amber: #d97706; --amber-bg: rgba(217,119,6,.08); --amber-border: rgba(217,119,6,.3);
--red: #dc2626; --red-bg: rgba(220,38,38,.08); --red-border: rgba(220,38,38,.3);
--blue: #0284c7; --blue-bg: rgba(2,132,199,.08); --blue-border: rgba(2,132,199,.3);
--teal: #0d9488; --teal-bg: rgba(13,148,136,.08); --teal-border: rgba(13,148,136,.3);
--shadow: 0 4px 24px rgba(0,0,0,.1);
--shadow-sm: 0 2px 8px rgba(0,0,0,.08);
}
/* ── Reset & Base ──────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:14px;display:flex;overflow:hidden;line-height:1.5;transition:background .2s,color .2s}
/* ── Layout Shell ──────────────────────────────────────────────── */
/* Login is compulsory: #app stays hidden and #login-screen stays shown until JS confirms a
valid session (see auth.js bootAuthGate) and adds body.authed — default-hidden here rather
than only toggled by JS avoids a flash of the full app before that check completes.
zoom (not transform:scale) for the UI Preferences font-size setting: scales text AND padding
AND icons together as one unit, matching what a user means by "make everything bigger" far
better than resizing text alone — and unlike transform:scale, layout/scrollbars/hit-targets
stay correct since zoom changes the effective CSS-pixel ratio for this subtree rather than
visually stretching an already-laid-out box. Only #app (the authenticated shell) is zoomed;
the login screen itself always renders at 1:1. */
#app{display:none;width:100%;height:100vh;zoom:var(--ui-zoom)}
body.authed #app{display:flex}
body.authed #login-screen{display:none!important}
/* ── Sidebar ───────────────────────────────────────────────────── */
#sidebar{
width:var(--sidebar-w);flex-shrink:0;
background:var(--sidebar-bg, var(--surface));
border-right:1px solid var(--border);
display:flex;flex-direction:column;height:100vh;
transition:background .2s,border-color .2s;
}
.sidebar-logo{
padding:20px 18px 16px;
border-bottom:1px solid var(--border);
display:flex;align-items:center;gap:10px;
}
.logo-icon{
width:38px;height:38px;border-radius:9px;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;overflow:hidden;
}
.logo-icon img{width:100%;height:100%;object-fit:cover;display:block}
.logo-text{}
.logo-brand{font-size:17px;font-weight:700;color:var(--sidebar-text, var(--text));letter-spacing:-.02em}
.logo-sub{font-size:10px;color:var(--sidebar-text3, var(--text3));font-family:'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase}
/* Was an inline style on the element itself (index.html) — moved here as a real, overridable
rule so body.nav-topbar's own #branch-switcher-holder padding (below) can actually win the
cascade instead of silently losing to an inline style on the same property. */
#branch-switcher-holder{padding:0 14px 10px}
.sidebar-nav{padding:12px 10px;flex:1;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav-section{
font-size:10px;font-family:'JetBrains Mono',monospace;
color:var(--sidebar-text3, var(--text3));letter-spacing:.1em;text-transform:uppercase;
padding:14px 8px 5px;
}
.nav-item{
display:flex;align-items:center;gap:10px;
padding:calc(9px * var(--pad-scale)) calc(10px * var(--pad-scale));border-radius:var(--r-sm);
cursor:pointer;color:var(--sidebar-text2, var(--text2));font-size:13px;font-weight:500;
transition:all .15s;border:1px solid transparent;user-select:none;
}
.nav-item:hover{background:var(--sidebar-hover-bg, var(--surface3));color:var(--sidebar-text, var(--text))}
.nav-item.active{
background:var(--accent-bg);color:var(--accent2);
border-color:var(--accent-border);
}
.nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:5px;font-size:14px;flex-shrink:0}
/* ── Icon system (js/icons.js) ─────────────────────────────────────────
Sizing lives here, not on individual icon() calls, so every icon on the page stays visually
consistent — this was the actual problem with the emoji this replaced (wildly different
rendered sizes across browsers/OS/fonts for the same "font-size:1em" emoji glyph). */
.icon{width:15px;height:15px;flex-shrink:0}
.nav-icon .icon{width:18px;height:18px}
.form-section-title .icon,.card-title .icon,.modal-title .icon,.form-section-icon .icon{width:16px;height:16px}
.badge .icon{width:11px;height:11px;margin-right:1px}
.metric-icon .icon{width:20px;height:20px}
.login-logo-icon .icon{width:22px;height:22px}
.icon-spin{animation:icon-spin 1s linear infinite}
@keyframes icon-spin{to{transform:rotate(360deg)}}
.nav-item.active .nav-icon{background:rgba(108,99,255,.2)}
/* Collapsible sidebar submenu (Masters) */
.nav-group-toggle{justify-content:space-between}
.nav-group-toggle-label{display:flex;align-items:center;gap:10px}
.nav-chevron{font-size:10px;color:var(--sidebar-text3, var(--text3));transition:transform .15s;flex-shrink:0}
.nav-chevron.open{transform:rotate(90deg)}
/* .sidebar-nav is display:flex;flex-direction:column with a capped, scrollable height
(overflow-y:auto) — flex items default to flex-shrink:1, and because this item has
overflow:hidden, its "automatic minimum size" per the flexbox spec is 0, not its content
size. Without flex-shrink:0, the flex algorithm was squeezing it down to literally 0px
(confirmed: className had "open" and computed max-height was correctly 400px, but computed
height was 0px) to keep the rest of the nav fitting, instead of letting .sidebar-nav's own
overflow-y:auto do its job and scroll. That's what looked like "the dropdown doesn't open." */
.nav-submenu{overflow:hidden;max-height:0;flex-shrink:0;transition:max-height .18s ease}
/* 400px used to be enough for every Masters entry that existed at the time; it no longer is —
at 13 sub-items (and growing), this cap silently clipped the last couple of rows (Payment
Types, Discount References, Attachment Types) with no scrollbar of its own to reveal them,
which looked exactly like "Payment Types is missing" even though it was in the DOM the whole
time. Bumped well past any realistic list length instead of tuning it to today's exact count
again — .sidebar-nav's own overflow-y:auto (see the comment above) is what actually makes the
page scrollable if the whole expanded sidebar now exceeds viewport height, not this value. */
.nav-submenu.open{max-height:800px}
.nav-subitem{padding-left:38px;font-size:12.5px}
/* Hidden per product decision — SCP status/controls, queue chips, and live-connection status
are internal DICOM-receiver plumbing that front-desk/clinical users never need to see or
touch; the underlying elements are left in the DOM (not removed) so websocket.js/auth.js's
existing status-update code keeps working untouched, it just has nothing visible to update. */
.sidebar-footer{display:none;padding:12px 14px 14px;border-top:1px solid var(--border)}
.scp-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:all .3s}
.dot-green{background:var(--green);box-shadow:0 0 0 2px rgba(34,197,94,.25)}
.dot-red {background:var(--red); box-shadow:0 0 0 2px rgba(239,68,68,.25)}
.dot-pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.scp-label{font-size:12px;font-weight:500;color:var(--sidebar-text2, var(--text2))}
.queue-chips{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.chip{font-size:10px;font-family:'JetBrains Mono',monospace;padding:3px 8px;border-radius:20px;background:var(--surface3);border:1px solid var(--border2);color:var(--sidebar-text3, var(--text3))}
.ws-indicator{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--sidebar-text3, var(--text3));display:flex;align-items:center;gap:5px}
.ws-dot{width:5px;height:5px;border-radius:50%;background:var(--text3)}
.ws-dot.connected{background:var(--green)}
.scp-actions{display:flex;gap:4px;margin-bottom:10px}
.scp-actions .btn{flex:1;padding:5px 0;font-size:12px;justify-content:center}
.scp-actions .btn:disabled{opacity:.35;cursor:not-allowed}
/* ── Horizontal Topbar nav layout (My Display Preferences → Main Navigation, default) ──────
Reflows the SAME #sidebar element and nav-item markup into a horizontal strip above #main
instead of a vertical column beside it — one nav-item list, one set of module/permission
gating (applyModuleVisibility()/applyPermVisibility() in auth.js never need to know which
layout is active), two layouts. Toggled by js/ui-prefs.js's applyNavLayoutPref() via this one
body class. */
body.nav-topbar #app{flex-direction:column}
body.nav-topbar #sidebar{
width:100%;height:auto;flex-shrink:0;
flex-direction:row;flex-wrap:wrap;align-items:stretch;
border-right:none;border-bottom:1px solid var(--border);
transform:none; /* overrides the mobile off-canvas transform below — never off-canvas in this mode */
}
/* Row 1: logo + branch switcher (left) and the clock/theme-toggle/user-menu (right — moved in
here from the app's own .topbar bar by ui-prefs.js's applyNavLayoutPref(), see
#nav-topbar-controls-slot below). Row 2: nav items — .sidebar-nav's flex-basis:100% forces it
onto its own line via #sidebar's flex-wrap above, instead of everything crowding one row. */
body.nav-topbar .sidebar-logo{padding:7px 16px;gap:8px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);flex-shrink:0}
body.nav-topbar .logo-icon{width:26px;height:26px;border-radius:6px}
body.nav-topbar .logo-brand{font-size:13.5px}
body.nav-topbar #branch-switcher-holder{padding:6px 14px;flex-shrink:0;display:flex;align-items:center;border-bottom:1px solid var(--border)}
body.nav-topbar #branch-switcher-holder select{margin:4px 0}
body.nav-topbar #nav-topbar-controls-slot{
margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:8px;
padding:6px 16px;border-bottom:1px solid var(--border);min-height:40px;box-sizing:border-box;
}
/* The clock/theme-toggle/user-menu keep their normal (larger) size in the sidebar layout's own
.topbar — these overrides apply only once they're relocated into the compact row-1 slot. */
body.nav-topbar #nav-topbar-controls-slot .clock{font-size:11px;padding:3px 8px}
body.nav-topbar #nav-topbar-controls-slot .topbar-icon-btn{width:26px;height:26px;font-size:13px}
body.nav-topbar #nav-topbar-controls-slot .user-badge{font-size:11px;padding:3px 8px 3px 3px;gap:5px}
body.nav-topbar .sidebar-nav{
flex:1 1 100%;
flex-direction:row;align-items:center;flex-wrap:nowrap;
overflow-x:auto;overflow-y:visible;padding:6px 8px;gap:2px;
}
body.nav-topbar .nav-item{white-space:nowrap;flex-shrink:0}
/* Section labels ("Role Dashboards", "Reports", "Configuration") don't fit a single-row strip —
the items themselves stay in the same order, just without the group heading. */
body.nav-topbar .nav-section{display:none}
/* Positioned via inline style at open time (state.js's toggleNavGroup(), which also detaches
this element to ) — a submenu is a DOM *sibling* of its own toggle, not a child, so a
plain CSS position:absolute here has no correctly-positioned containing block to anchor to.
While CLOSED it's still an in-flow flex child of the horizontally-scrolling nav row, though —
width:0 keeps it from silently reserving a 220px-wide gap between every pair of top-level
items (which is what made the row need horizontal scrolling well before it actually ran out
of room). The panel's real width only matters once .open takes it out of that row entirely. */
body.nav-topbar .nav-submenu{width:0;flex-basis:0}
body.nav-topbar .nav-submenu.open{
width:auto;flex-direction:column;
background:var(--sidebar-bg, var(--surface));border:1px solid var(--border);border-radius:var(--r);
box-shadow:var(--shadow);min-width:220px;padding:6px;z-index:50;
max-height:80vh;overflow-y:auto;
}
body.nav-topbar .nav-subitem{padding-left:10px}
/* The vertical-only concepts (off-canvas drawer toggle, width-collapse toggle) have no
equivalent here — the strip is always "expanded" and just scrolls horizontally instead. */
body.nav-topbar #sidebar-toggle-btn,
body.nav-topbar #sidebar-collapse-btn{display:none}
@media (max-width:1023px){
/* Cancels the off-canvas drawer's position:fixed further down this file — without this the
strip would float over #main instead of pushing it down, since fixed positioning takes an
element out of normal flow. */
body.nav-topbar #sidebar{position:static;transform:none}
}
/* ── Main ──────────────────────────────────────────────────────── */
#main{flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;min-width:0}
.topbar{
height:var(--topbar-h);flex-shrink:0;
background:linear-gradient(180deg, var(--topbar-bg, var(--surface)), color-mix(in srgb, var(--topbar-bg, var(--surface)) 90%, var(--topbar-text, var(--text)) 10%));
border-bottom:1px solid var(--border);
display:flex;align-items:center;padding:0 22px;gap:12px;
transition:background .2s;
box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.page-title{font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--topbar-text, var(--text))}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.clock{font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--topbar-text3, var(--text3));padding:4px 10px;background:var(--surface3);border-radius:20px}
.user-badge{font-size:12px;color:var(--topbar-text2, var(--text2));padding:4px 10px 4px 4px;background:var(--surface3);border-radius:20px;cursor:pointer;transition:background .15s;display:inline-flex;align-items:center;gap:6px}
.user-badge:hover{background:var(--surface4)}
.user-badge-avatar{
width:20px;height:20px;border-radius:50%;flex-shrink:0;
background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:10px;font-weight:700;line-height:1;
}
.user-menu-wrap{position:relative}
.user-menu{
position:absolute;top:calc(100% + 6px);right:0;z-index:150;
min-width:200px;background:var(--surface);border:1px solid var(--border2);
border-radius:var(--r-sm);box-shadow:var(--shadow);padding:5px;
animation:slideUp .12s ease;
}
.user-menu-item{
padding:8px 10px;border-radius:6px;font-size:12.5px;color:var(--text2);
cursor:pointer;white-space:nowrap;transition:background .1s,color .1s;
}
.user-menu-item:hover{background:var(--surface3);color:var(--text)}
/* Topbar tool group — theme/appearance/refresh icon buttons, visually clustered into one pill */
.topbar-toolgroup{
display:flex;align-items:center;gap:2px;
background:var(--surface3);border:1px solid var(--border2);border-radius:var(--r-sm);padding:2px;
}
.topbar-toolgroup .topbar-icon-btn{border:none;background:transparent;box-shadow:none}
.topbar-toolgroup .topbar-icon-btn:hover{background:var(--surface4)}
.topbar-toolgroup .topbar-icon-btn.active{background:var(--accent-bg);color:var(--accent2)}
/* Theme Toggle / generic topbar icon button */
.theme-toggle,.topbar-icon-btn{
width:32px;height:32px;border-radius:var(--r-sm);
border:1px solid var(--border2);background:var(--surface3);
color:var(--topbar-text2, var(--text2));cursor:pointer;display:flex;align-items:center;justify-content:center;
font-size:15px;transition:all .15s;
}
.theme-toggle:hover,.topbar-icon-btn:hover{background:var(--topbar-hover-bg, var(--surface4));color:var(--topbar-text, var(--text))}
#content{flex:1;overflow-y:auto;padding:22px;scroll-behavior:smooth}
/* ── Buttons ───────────────────────────────────────────────────── */
.btn{
padding:calc(7px * var(--pad-scale)) calc(14px * var(--pad-scale));border-radius:var(--r-sm);
border:1px solid var(--border2);background:var(--surface3);
color:var(--text);cursor:pointer;font-family:var(--font-sans);
font-size:12px;font-weight:500;transition:all .15s;
display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
}
.btn:hover{background:var(--btn-hover-bg, var(--surface4));border-color:var(--border2)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(108,99,255,.35)}
.btn-primary:hover{opacity:.9;background:var(--accent)}
.btn-success{background:var(--green-bg);border-color:var(--green-border);color:var(--green)}
.btn-success:hover{background:rgba(34,197,94,.15)}
.btn-danger{background:var(--red-bg);border-color:var(--red-border);color:var(--red)}
.btn-danger:hover{background:rgba(239,68,68,.15)}
.btn-teal{background:var(--teal-bg);border-color:var(--teal-border);color:var(--teal)}
.btn-teal:hover{background:rgba(45,212,191,.15)}
.btn-blue{background:var(--blue-bg);border-color:var(--blue-border);color:var(--blue)}
.btn-blue:hover{background:rgba(56,189,248,.15)}
.btn-sm{padding:4px 10px;font-size:11px}
.btn-icon{width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;font-size:14px}
/* Row action buttons (patient/study browser) — bigger glyphs than .btn-icon so
the icon itself (not just the click target) is easy to read at a glance. */
.btn-action{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
/* td only, not th — .row-actions also marks the header | (as a position anchor for
js/action-column.js), but display:flex there overrides a | 's native display:table-cell,
which silently breaks position:sticky (app.css's .data-table th rule) in every browser tested:
a sticky table header relies on genuinely being a table cell, not a flex item pretending to be
one. The header only ever holds a plain text label anyway, so it never needed flex layout. */
td.row-actions{display:flex;gap:6px;flex-wrap:nowrap}
/* History button — filled green once a patient actually has a history note, so its
presence is visible without opening the modal. Solid-ish (not a faint tint) so it
reads clearly at a glance; color itself is user-customizable (Appearance panel). */
.btn-action.has-history{background:color-mix(in srgb, var(--user-has-history) 38%, var(--surface3));border-color:var(--user-has-history);color:var(--text)}
.btn-action.has-history:hover{background:color-mix(in srgb, var(--user-has-history) 55%, var(--surface3))}
/* Report button — tinted by the report's own lifecycle stage; each stage's color
is user-customizable (Appearance panel, js/ui-prefs.js). */
.btn-action.rpt-status-drafted{background:color-mix(in srgb, var(--user-status-drafted) 38%, var(--surface3));border-color:var(--user-status-drafted);color:var(--text)}
.btn-action.rpt-status-completed{background:color-mix(in srgb, var(--user-status-completed) 38%, var(--surface3));border-color:var(--user-status-completed);color:var(--text)}
.btn-action.rpt-status-finalized{background:color-mix(in srgb, var(--user-status-finalized) 38%, var(--surface3));border-color:var(--user-status-finalized);color:var(--text)}
.btn-action.rpt-status-printed{background:color-mix(in srgb, var(--user-status-printed) 38%, var(--surface3));border-color:var(--user-status-printed);color:var(--text)}
.btn-action.rpt-status-drafted:hover{background:color-mix(in srgb, var(--user-status-drafted) 55%, var(--surface3))}
.btn-action.rpt-status-completed:hover{background:color-mix(in srgb, var(--user-status-completed) 55%, var(--surface3))}
.btn-action.rpt-status-finalized:hover{background:color-mix(in srgb, var(--user-status-finalized) 55%, var(--surface3))}
.btn-action.rpt-status-printed:hover{background:color-mix(in srgb, var(--user-status-printed) 55%, var(--surface3))}
.btn-action.rpt-export-disabled{opacity:.35;cursor:not-allowed}
.btn-action.rpt-export-disabled:hover{background:var(--surface3)}
/* Generic disabled look for any row-action icon button (e.g. viewer launch buttons before
any DICOM images have been received) — same treatment as rpt-export-disabled, reusable name. */
.btn-action:disabled{opacity:.35;cursor:not-allowed}
.btn-action:disabled:hover{background:var(--surface3)}
/* Small "pending" pill for placeholder studies (registration data only, no images received yet) */
.badge-pending{background:var(--surface3);color:var(--text3);border-color:var(--border2)}
/* ── Appearance panel ─────────────────────────────────────────────── */
.uip-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.uip-row:last-of-type{border-bottom:none}
.uip-swatch{width:44px;height:30px;padding:0;border:1px solid var(--border2);border-radius:6px;cursor:pointer;background:none}
/* Auto Contrast readout next to a font-color picker's label — see refreshContrastBadge()
(js/ui-prefs.js). Deliberately uses fixed semantic green/amber, not the user's own configurable
palette — a status indicator staying legible regardless of what colors are being edited. */
.uip-contrast-badge{
display:inline-block;margin-left:6px;padding:1px 6px;border-radius:20px;
font-size:9.5px;font-weight:700;font-family:'JetBrains Mono',monospace;
letter-spacing:.02em;text-transform:none;vertical-align:middle;cursor:help;
}
.uip-contrast-badge.ok{background:rgba(34,197,94,.15);color:#22c55e}
.uip-contrast-badge.warn{background:rgba(245,158,11,.18);color:#f59e0b}
.uip-preset-chip{display:inline-flex;align-items:center;gap:6px}
.uip-preset-del{
border:none;background:none;color:var(--text3);cursor:pointer;font-size:12px;line-height:1;
padding:2px 4px;border-radius:4px;
}
.uip-preset-del:hover{color:var(--red);background:var(--red-bg)}
/* ── Table Style preview (Settings → UI Preferences) ──────────────────────
Purely illustrative dummy tables — deliberately its own tsp-* class family, never table-wrap/
data-table, so table-enhance.js's #content scanner never tries to enhance these mockups. */
.tsp-option{display:block;border:1px solid var(--border2);border-radius:var(--r);padding:10px;cursor:pointer;width:230px;transition:border-color .15s}
.tsp-option:hover{border-color:var(--accent-border)}
.tsp-option.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tsp-option-head{display:flex;align-items:center;gap:7px;font-size:13px;margin-bottom:2px}
.tsp-option-sub{font-size:10.5px;color:var(--text3);margin:0 0 8px 21px}
.tsp-preview{border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.tsp-preview-bar{display:flex;justify-content:flex-end;gap:5px;padding:4px 6px;background:var(--surface2);border-bottom:1px solid var(--border)}
.tsp-preview-bar:last-child{border-bottom:none;border-top:1px solid var(--border)}
.tsp-chip{font-size:9px;padding:2px 6px;border-radius:10px;background:var(--surface3);color:var(--text3);border:1px solid var(--border2);white-space:nowrap}
.tsp-preview-scrollbar{height:6px;background:var(--surface2);border-bottom:1px solid var(--border);position:relative}
.tsp-preview-scrollbar::after{content:'';position:absolute;left:20%;top:1.5px;width:40%;height:3px;background:var(--border2);border-radius:3px}
.tsp-preview-table{width:100%;border-collapse:collapse;font-size:9.5px}
.tsp-preview-table th{background:var(--surface2);color:var(--text3);text-transform:uppercase;font-size:8px;padding:4px 6px;text-align:left;border-bottom:1px solid var(--border)}
.tsp-preview-table td{padding:4px 6px;border-bottom:1px solid var(--border);color:var(--text2)}
.tsp-preview-table tr:last-child td{border-bottom:none}
/* ── Tabs (folder-tab style — Settings, Appointment Slots, and any future
sectioned page) ──────────────────────────────────────────────────────
Rounded-top tabs sitting on a shared baseline; the active tab lifts off
the others using the app's accent color — same --accent-bg/--accent2/
--accent-border tint already used for .nav-item.active and the topbar's
active icon buttons — so a user's custom accent (Settings → General →
Appearance) drives every tab strip in the app consistently, not just this
one. Inactive tabs sit muted (--text3) and recede on a transparent
background until hovered, echoing a classic connected folder-tab look. */
.tab-bar{display:flex;gap:3px;border-bottom:1px solid var(--border);margin-bottom:16px;flex-wrap:wrap}
.tab-btn{
appearance:none;background:transparent;cursor:pointer;font-family:inherit;
/* Bottom border is always 1px, transparent by default — active state below only changes its
*color* to blend with the tab's own background, never its width, so the active tab's box is
never a pixel taller than its neighbors (that mismatch used to visibly misalign the active
tab against the inactive tabs' shared baseline line). */
border:1px solid transparent;
padding:9px 18px;font-size:13px;font-weight:600;color:var(--text3);
border-radius:var(--r-sm) var(--r-sm) 0 0;
margin-bottom:-1px;
transition:background .15s,color .15s,border-color .15s;
}
.tab-btn:hover:not(.active){background:var(--surface3);color:var(--text2)}
.tab-btn.active{
background:var(--accent-bg);color:var(--accent2);
border-color:var(--accent-border) var(--accent-border) var(--accent-bg) var(--accent-border);
box-shadow:inset 0 2px 0 0 var(--accent);
}
.tab-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ── Cards ─────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:calc(18px * var(--pad-scale));transition:background .2s,border-color .2s}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--text3);letter-spacing:.07em;text-transform:uppercase}
/* A card that directly wraps a .table-wrap — zeroes the card's own padding so the table's border
and rounded corners read as the card's edge, instead of every such page repeating
style="padding:0;overflow:hidden" inline (the same override appeared on 6+ pages). */
.card.card-table{padding:0;overflow:hidden}
/* ── Metric Cards ──────────────────────────────────────────────── */
.metrics-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px}
@media (max-width:1400px){.metrics-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.metrics-grid{grid-template-columns:repeat(2,1fr)}}
.metric-card{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-lg);padding:16px 18px;
position:relative;overflow:hidden;transition:all .2s;cursor:default;
}
.metric-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:var(--accent-color,var(--accent));opacity:.75;
box-shadow:0 0 10px 0 var(--accent-color,var(--accent));
}
.metric-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.metric-icon{position:absolute;top:14px;right:16px;font-size:20px;opacity:.5;line-height:1}
.metric-card.c-blue {--accent-color:var(--blue)}
.metric-card.c-teal {--accent-color:var(--teal)}
.metric-card.c-green {--accent-color:var(--green)}
.metric-card.c-red {--accent-color:var(--red)}
.metric-card.c-amber {--accent-color:var(--amber)}
.metric-card.c-purple{--accent-color:var(--accent)}
.metric-label{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text3);letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px;padding-right:22px}
.metric-value{font-size:30px;font-weight:600;letter-spacing:-.04em;font-family:'JetBrains Mono',monospace;line-height:1}
.metric-card.c-blue .metric-value{color:var(--blue)}
.metric-card.c-teal .metric-value{color:var(--teal)}
.metric-card.c-green .metric-value{color:var(--green)}
.metric-card.c-red .metric-value{color:var(--red)}
.metric-card.c-amber .metric-value{color:var(--amber)}
.metric-card.c-purple .metric-value{color:var(--accent2)}
.metric-sub{font-size:11px;color:var(--text3);margin-top:5px}
/* ── Badges ─────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:10px;font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:.03em;border:1px solid transparent;white-space:nowrap}
.badge-green {background:var(--green-bg);color:var(--green);border-color:var(--green-border)}
.badge-red {background:var(--red-bg); color:var(--red); border-color:var(--red-border)}
.badge-amber {background:var(--amber-bg);color:var(--amber);border-color:var(--amber-border)}
.badge-blue {background:var(--blue-bg); color:var(--blue); border-color:var(--blue-border)}
.badge-teal {background:var(--teal-bg); color:var(--teal); border-color:var(--teal-border)}
.badge-purple{background:var(--accent-bg);color:var(--accent2);border-color:var(--accent-border)}
.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge-live .badge-dot{animation:pulse 1.4s ease-in-out infinite}
/* ── Collection Report summary panel ──────────────────────────────
Deliberately fixed navy/white (not var(--surface)/var(--text)) — a self-contained "important
numbers" block that reads the same in light or dark mode, same idea as the printed bill's
letterhead using fixed black-on-white regardless of the app theme around it. */
.coll-summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;background:#0f2138;border:1px solid #1c3a5e;border-radius:var(--r-lg);padding:16px 22px;margin-bottom:16px;color:#dbe7f5}
.coll-summary-col{padding:0 20px;border-left:1px solid rgba(255,255,255,.12)}
.coll-summary-col:first-child{padding-left:0;border-left:none}
.coll-summary-title{font-size:10px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:#8fb3d9;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.coll-summary-title .icon{width:13px;height:13px}
.coll-summary-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:3px 0;font-size:12.5px}
.coll-summary-row b{font-family:'JetBrains Mono',monospace;font-weight:700}
.coll-summary-row.total b{font-size:16px;color:#4ade80}
.coll-mode-dot{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:7px;flex-shrink:0}
.coll-summary-legend{font-size:11px;color:#8fa8c7;line-height:1.7}
.coll-summary-legend b{color:#dbe7f5}
.coll-badge-current{background:rgba(74,222,128,.15);color:#4ade80;border:1px solid rgba(74,222,128,.35);border-radius:20px;padding:2px 8px;font-size:9.5px;font-family:'JetBrains Mono',monospace;font-weight:700}
.coll-badge-balance{background:rgba(251,191,36,.15);color:#fbbf24;border:1px solid rgba(251,191,36,.35);border-radius:20px;padding:2px 8px;font-size:9.5px;font-family:'JetBrains Mono',monospace;font-weight:700}
@media (max-width:900px){
.coll-summary{grid-template-columns:1fr}
.coll-summary-col{padding:10px 0;border-left:none;border-top:1px solid rgba(255,255,255,.12)}
.coll-summary-col:first-child{border-top:none;padding-top:0}
}
/* ── Dashboard 2-col ───────────────────────────────────────────── */
.dash-grid{display:grid;grid-template-columns:1fr 280px;gap:14px}
.dash-grid>.card{min-width:0}
/* ── Single-page Registration (js/registration-single.js) ───────────────
Own equal-column grid rather than reusing .dash-grid's asymmetric 1fr/280px split — needs a
plain CSS class (not an inline grid-template-columns) so the mobile override below can actually
win; an inline style always beats a stylesheet rule regardless of the media query it's in. */
.rs-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
/* Registration page only (rs-grid-6-4, added alongside rs-grid on that page's own grid div) —
patient/visit info needs more room than the compact Select Tests/Selected Tests/Billing Summary
column next to it. Visit Details (visit-view.js) keeps the shared plain .rs-grid 1fr/1fr split. */
.rs-grid.rs-grid-6-4{grid-template-columns:6fr 4fr}
/* auto-fit/minmax instead of a fixed repeat(5,1fr) — the Billing Summary sits in the rs-grid-6-4
split's narrower right-hand column (~40% of the page), which isn't wide enough to fit all 5
fields on one line at that fixed ratio; each field now claims only as much width as it needs
and the row wraps onto a second line by itself instead of squeezing every input unreadably
narrow. */
.rs-billing-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
@media (max-width:900px){
.rs-grid{grid-template-columns:1fr}
.rs-grid.rs-grid-6-4{grid-template-columns:1fr}
.rs-billing-row{grid-template-columns:1fr 1fr}
}
/* ── Activity Feed ─────────────────────────────────────────────── */
/* One-row-per-study, image counter increments in place */
.feed-table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.feed-table th{
font-size:10px;font-family:'JetBrains Mono',monospace;
color:var(--text3);letter-spacing:.07em;text-transform:uppercase;
padding:8px 10px;text-align:left;border-bottom:1px solid var(--border);
background:var(--surface2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
/* Every other table page's header stays pinned via .data-table th's sticky positioning —
.feed-table is bespoke (its own column-width classes, table-layout:fixed) and had been
missing this, so its header alone scrolled away with the body. Same mechanism, same
scroll ancestor (#content), so it behaves identically to .data-table th now. */
position:sticky;top:0;z-index:1;
}
.feed-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-table tr:hover td{background:var(--surface2)}
.feed-table tr.flash td{animation:rowflash .5s ease}
@keyframes rowflash{from{background:rgba(108,99,255,.14)}to{background:transparent}}
/* column widths */
.feed-table .c-time{width:150px}
.feed-table .c-event{width:110px}
.feed-table .c-patient{width:150px}
.feed-table .c-pid{width:92px}
.feed-table .c-mod{width:55px;text-align:center}
.feed-table .c-dest{width:110px}
.feed-table .c-ser{width:64px;text-align:center}
.feed-table .c-img{width:65px;text-align:center}
.feed-table .c-total{width:70px;text-align:center}
.feed-table .c-recv{width:82px;text-align:center}
.feed-table .c-comp{width:98px;text-align:center}
.feed-table .c-sentn{width:70px;text-align:center}
.feed-table .c-start{width:150px}
.feed-table .c-end{width:150px}
.feed-table .c-dur{width:90px;text-align:center}
.feed-table .c-status{width:70px}
.feed-table .c-msg{width:auto}
.img-counter{
font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
color:var(--blue);
transition:color .2s;
}
.img-counter.updated{animation:counterpop .3s ease}
@keyframes counterpop{0%{transform:scale(1.4);color:var(--amber)}100%{transform:scale(1);color:var(--blue)}}
.count-cell{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;transition:color .2s}
.count-cell.recv{color:var(--blue)}
.count-cell.comp{color:var(--teal)}
.count-cell.sentn{color:var(--green)}
.count-cell.total{color:var(--text2)}
.count-cell.ser{color:var(--text2)}
.count-cell.dur{color:var(--amber)}
.count-cell.bump{animation:counterpop .3s ease}
/* ── Sender Status Cards ───────────────────────────────────────── */
.sender-card{
padding:12px 14px;border:1px solid var(--border);
border-radius:var(--r);background:var(--surface2);
margin-bottom:8px;transition:all .15s;
}
.sender-card:hover{border-color:var(--border2)}
.sender-card.ok{border-left:3px solid var(--green)}
.sender-card.err{border-left:3px solid var(--red)}
.sender-card.idle{border-left:3px solid var(--border2)}
/* ── Tables ─────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border)}
/* ── Table enhancement experiment (js/table-enhance.js) ───────────────────
Applied automatically to every .table-wrap in the main content area (not inside the wizard
or a modal — those stay as they were), UNLESS Settings → UI Preferences → Table Style is set
to Classic (body.table-style-classic), in which case every table stays exactly as it always
was — see js/table-enhance.js's unenhance(). Turns the page-level scroll a long table used to
force into a self-contained, height-bounded scroll region with a mirrored top scrollbar, the
page's own pagination controls pulled up into the table's own footer, and a per-table column
show/hide dropdown (top toolbar opens it downward, bottom toolbar opens it upward, so it's
never offscreen at either end).
To fully remove this feature outright (not just switch everyone to Classic): delete the
|