/* ═══════════════════════════════════════════════════════════
SMRV — extends css.css, never contradicts it
═══════════════════════════════════════════════════════════ */
/* ── SMRV Design Tokens ──────────────────────────────────── */
:root {
/* Semantic colour tokens (mapped to existing palette) */
--color-primary: #00be85;
--color-primary-dark: #007d58;
--color-primary-light: #e6faf4;
--color-text: #111827;
--color-text-muted: #6e7a90;
--color-border: #e0e8ff;
--color-bg-grey: #f5f8ff;
--radius-sm: 8px;
--radius-md: 16px;
/* Type scale (rem, base = 16px) */
--text-xs: 0.72rem; /* ~11.5px — labels, meta, badges */
--text-sm: 0.8125rem; /* 13px — secondary body, table cells */
--text-base: 0.9375rem; /* 15px — primary body, inputs */
--text-md: 1.0625rem; /* 17px — card titles, subheadings */
--text-lg: 1.25rem; /* 20px — screen titles */
--text-xl: 1.5rem; /* 24px — page headings */
--text-2xl: 1.875rem; /* 30px — hero / login brand */
/* Font weights */
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* Line heights */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.7;
/* Letter spacing */
--tracking-tight: -0.01em;
--tracking-normal: 0em;
--tracking-wide: 0.04em;
--tracking-wider: 0.08em;
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
}
/* ── Login ─────────────────────────────────────────────── */
.smrv-login-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
}
.smrv-login-card {
background: var(--card);
width: 380px;
padding: 36px 32px;
border-radius: var(--radius);
box-shadow: 0 8px 32px rgba(3,18,59,0.10);
display: flex;
flex-direction: column;
gap: 6px;
}
.smrv-login-brand {
text-align: center;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.smrv-login-title {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
margin-top: 6px;
}
/* ── Shared inputs ──────────────────────────────────────── */
.smrv-input {
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: var(--text-base);
font-family: inherit;
background: #fff;
color: var(--color-text);
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.smrv-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(0,190,133,0.14);
}
.smrv-input[type="date"],
.smrv-input select,
select.smrv-input {
cursor: pointer;
}
/* ── Alert / error banner ───────────────────────────────── */
.smrv-alert {
background: #fff3f3;
color: #c0392b;
border: 1px solid #fcc;
border-radius: var(--radius-sm);
padding: 10px var(--space-3);
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
.smrv-alert-warn {
background: #fffbe6;
color: #856404;
border-color: #ffe58f;
}
/* ── Topbar additions ───────────────────────────────────── */
.smrv-hospital-label {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-text);
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: var(--tracking-normal);
}
.smrv-hamburger {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: var(--muted);
padding: 4px 6px;
display: none;
}
/* ── Role badges ────────────────────────────────────────── */
.smrv-role-badge {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 3px 10px;
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.smrv-role-admin { background: #eef0ff; color: #4050c8; }
.smrv-role-records_officer { background: #e6faf4; color: #0a8060; }
.smrv-role-doctor { background: #fff4e6; color: #b85c00; }
/* ── Status badges ──────────────────────────────────────── */
.smrv-badge {
display: inline-block;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.02em;
}
.smrv-badge-pending { background: #f0f0f0; color: #555; }
.smrv-badge-processing { background: #fff4e0; color: #c07800; }
.smrv-badge-review_required { background: #ffeaea; color: #c0392b; }
.smrv-badge-complete { background: #e6faf4; color: #0a8060; }
.smrv-badge-reviewed { background: #e6faf4; color: #0a8060; }
.smrv-badge-not_required { background: #f0f0f0; color: #555; }
.smrv-badge-pending_review { background: #ffeaea; color: #c0392b; }
/* ── Count badge (queue, flags) ─────────────────────────── */
.smrv-count-badge {
background: #c0392b;
color: #fff;
font-size: var(--text-xs);
font-weight: var(--weight-bold);
padding: 1px 6px;
border-radius: 50px;
vertical-align: middle;
letter-spacing: 0.02em;
}
/* ── Breadcrumb row ─────────────────────────────────────── */
.smrv-breadcrumb {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
/* ── Upload steps indicator ─────────────────────────────── */
.smrv-steps {
display: flex;
gap: 0;
margin-bottom: 16px;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid #e0e8ff;
}
.smrv-step {
flex: 1;
text-align: center;
padding: 9px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--muted);
background: #f8faff;
border-right: 1px solid #e0e8ff;
}
.smrv-step:last-child { border-right: 0; }
.smrv-step.active {
background: var(--accent);
color: #fff;
}
.smrv-upload-step { display: flex; flex-direction: column; gap: 0; }
/* ── Preselect box (upload step 2 with pre-selected record) ── */
.smrv-preselect-box {
background: #f0faf6;
border: 1px solid #b2e8d6;
border-radius: var(--radius-sm);
padding: 10px var(--space-3);
margin-bottom: var(--space-3);
font-size: var(--text-sm);
color: #0a6050;
}
/* ── File list (upload step 3) ──────────────────────────── */
.smrv-file-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
border: 1px solid #f1f5ff;
border-radius: var(--radius-sm);
background: #fff;
font-size: var(--text-sm);
}
.smrv-file-status {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.02em;
}
.smrv-file-status-queued { background: #f0f0f0; color: #555; }
.smrv-file-status-uploading { background: #fff4e0; color: #c07800; }
.smrv-file-status-processing { background: #e8f0ff; color: #2255cc; }
.smrv-file-status-complete { background: #e6faf4; color: #0a8060; }
.smrv-file-status-flags { background: #ffeaea; color: #c0392b; }
.smrv-file-status-error { background: #ffeaea; color: #c0392b; }
/* ── Document cards (record detail) ─────────────────────── */
.smrv-doc-card {
padding: 12px;
border: 1px solid #f1f5ff;
border-radius: 8px;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.smrv-doc-card-info { flex: 1; }
.smrv-doc-card-info .name { font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--color-text); }
.smrv-doc-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* ── Document viewer text panel ─────────────────────────── */
.smrv-doc-text {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
white-space: pre-wrap;
word-break: break-word;
padding: var(--space-3);
background: #fbfdff;
border: 1px solid #eef4ff;
border-radius: var(--radius-sm);
min-height: 300px;
max-height: 600px;
overflow-y: auto;
color: var(--color-text);
}
/* UNCLEAR marker highlight */
.smrv-unclear {
background: #fff3cd;
color: #856404;
border-radius: 4px;
padding: 0 2px;
font-weight: 600;
}
/* ── Flags in viewer ────────────────────────────────────── */
.smrv-flag-item {
font-size: var(--text-xs);
padding: var(--space-2);
border: 1px solid #ffeaea;
border-radius: 6px;
background: #fff9f9;
margin-bottom: 6px;
line-height: var(--leading-normal);
}
.smrv-flag-item.resolved {
background: #f5fff9;
border-color: #b2e8d6;
color: var(--muted);
text-decoration: line-through;
}
.smrv-flag-context {
font-style: italic;
color: var(--muted);
margin-top: 3px;
}
/* ── Review queue rows ───────────────────────────────────── */
.smrv-queue-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border: 1px solid #f1f5ff;
border-radius: 8px;
background: #fff;
cursor: pointer;
transition: background 0.12s;
}
.smrv-queue-row:hover { background: #f8faff; }
/* ── Staff list rows ────────────────────────────────────── */
.smrv-staff-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border: 1px solid #f1f5ff;
border-radius: 8px;
background: #fff;
}
.smrv-staff-inactive { opacity: 0.55; }
/* ── Admin tabs ─────────────────────────────────────────── */
.smrv-tabs {
display: flex;
gap: 4px;
margin-bottom: 14px;
border-bottom: 2px solid #eef4ff;
padding-bottom: 4px;
}
.smrv-tabs .nav-item {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
padding: 7px 14px;
}
/* ── Audit table ────────────────────────────────────────── */
.smrv-audit-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-xs);
}
.smrv-audit-table th {
text-align: left;
color: var(--color-text-muted);
font-weight: var(--weight-semibold);
padding: 6px 10px;
border-bottom: 1px solid #eef4ff;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.smrv-audit-table td {
padding: 7px 10px;
border-bottom: 1px solid #f5f8ff;
vertical-align: top;
color: var(--color-text);
}
.smrv-audit-table tr:last-child td { border-bottom: 0; }
/* ── Pagination ─────────────────────────────────────────── */
.smrv-pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
/* ── Patient search result card ─────────────────────────── */
.smrv-patient-result {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border: 1px solid #f1f5ff;
border-radius: 8px;
background: #fff;
cursor: pointer;
transition: background 0.12s;
}
.smrv-patient-result:hover { background: #f8faff; }
/* ── Demographics grid ──────────────────────────────────── */
.smrv-demo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.smrv-demo-field .label { margin-bottom: 2px; }
.smrv-demo-field .value { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text); }
/* ── Record list row ────────────────────────────────────── */
.smrv-record-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border: 1px solid #f1f5ff;
border-radius: 8px;
background: #fff;
cursor: pointer;
transition: background 0.12s;
}
.smrv-record-row:hover { background: #f8faff; }
/* ── Toast container (multi-toast) ─────────────────────── */
#smrv-toast-container {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
pointer-events: none;
}
.smrv-toast {
padding: 10px 20px;
border-radius: 50px;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: #fff;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
opacity: 0;
transform: translateY(8px);
transition: opacity 200ms ease, transform 200ms ease;
pointer-events: none;
white-space: nowrap;
}
.smrv-toast.show { opacity: 1; transform: translateY(0); }
.smrv-toast-error { background: #dc2626; }
.smrv-toast-success { background: #16a34a; }
.smrv-toast-info { background: #2563eb; }
.smrv-toast-warning { background: #d97706; }
/* ── Spinner ────────────────────────────────────────────── */
.smrv-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(0,190,133,0.25);
border-top-color: var(--accent);
border-radius: 50%;
animation: smrv-spin 0.7s linear infinite;
vertical-align: middle;
margin-right: 6px;
}
@keyframes smrv-spin { to { transform: rotate(360deg); } }
/* ── OCR confidence colour ──────────────────────────────── */
/* Legacy inline colour-only classes — kept for JS compatibility */
.smrv-conf-high { color: #0a8060; font-weight: var(--weight-semibold); }
.smrv-conf-mid { color: #c07800; font-weight: var(--weight-semibold); }
.smrv-conf-low { color: #c0392b; font-weight: var(--weight-semibold); }
/* Badge-style OCR confidence classes — human-readable labels */
/* Usage: High confidence */
.smrv-conf-badge {
display: inline-block;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 3px 10px;
border-radius: 50px;
letter-spacing: 0.02em;
}
.smrv-conf-badge-high {
background: #e6faf4;
color: #0a8060;
border: 1px solid rgba(10,128,96,0.25);
}
.smrv-conf-badge-mid {
background: #fff4e0;
color: #c07800;
border: 1px solid rgba(192,120,0,0.25);
}
.smrv-conf-badge-low {
background: #ffeaea;
color: #c0392b;
border: 1px solid rgba(192,57,43,0.25);
}
/* ── Processing state ───────────────────────────────────── */
.smrv-processing-state {
text-align: center;
padding: 40px;
color: var(--muted);
}
/* ── Profile two-column shell ───────────────────────────── */
#page-profile.active {
display: flex;
padding: 0;
overflow: hidden;
height: calc(100vh - 56px); /* subtract topbar */
}
.smrv-profile-shell {
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
}
.smrv-profile-left {
width: 300px;
min-width: 260px;
max-width: 340px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 0;
padding: 24px 20px;
border-right: 1px solid #e6eefc;
overflow-y: auto;
background: #f8faff;
}
.smrv-profile-right {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.smrv-timeline-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
border-bottom: 1px solid #e6eefc;
background: #fff;
flex-shrink: 0;
}
.smrv-timeline-scroll {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* ── Timeline cards ─────────────────────────────────────── */
.smrv-timeline-card {
background: #fff;
border-radius: 10px;
border: 1px solid #e6eefc;
border-left: 4px solid #bbb;
box-shadow: 0 1px 4px rgba(3,18,59,0.05);
overflow: hidden; /* desktop: clips expanding body to card bounds */
position: relative; /* required for sticky child positioning */
}
.smrv-timeline-card[data-type="doctor_note"] { border-left-color: #2563eb; }
.smrv-timeline-card[data-type="prescription"] { border-left-color: #7c3aed; }
.smrv-timeline-card[data-type="lab"] { border-left-color: #059669; }
.smrv-timeline-card[data-type="radiology"] { border-left-color: #d97706; }
.smrv-timeline-card[data-type="discharge"] { border-left-color: #dc2626; }
.smrv-timeline-card[data-type="vital_signs"] { border-left-color: #0891b2; }
.smrv-timeline-card[data-type="other"] { border-left-color: #6b7280; }
.smrv-tc-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
cursor: pointer;
user-select: none;
gap: 10px;
}
.smrv-tc-header:hover { background: #f5f8ff; }
.smrv-tc-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.smrv-tc-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.smrv-tc-date { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); }
.smrv-tc-meta { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smrv-tc-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease;
border-top: 0 solid #e6eefc;
position: relative;
}
.smrv-tc-body.expanded {
max-height: 600px; /* desktop: generous cap, show-more JS manages inner */
border-top-width: 1px;
}
.smrv-tc-body-inner {
padding: var(--space-3) 14px;
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: var(--color-text);
white-space: pre-wrap;
word-break: break-word;
}
.smrv-tc-body-inner.loading { color: #999; font-style: italic; }
.smrv-tc-footer {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 14px;
gap: 8px;
flex-wrap: wrap;
border-top: 1px solid var(--color-border);
background: #fff;
}
.smrv-showmore {
background: none;
border: none;
color: #2563eb;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
cursor: pointer;
padding: 0;
}
.smrv-showmore:hover { text-decoration: underline; }
/* ── Type badges ────────────────────────────────────────── */
.smrv-type-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 50px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
background: #e5e7eb;
color: #374151;
letter-spacing: 0.02em;
}
.smrv-type-badge.doctor_note { background:#dbeafe; color:#1e40af; }
.smrv-type-badge.prescription { background:#ede9fe; color:#5b21b6; }
.smrv-type-badge.lab { background:#d1fae5; color:#065f46; }
.smrv-type-badge.radiology { background:#fef3c7; color:#92400e; }
.smrv-type-badge.discharge { background:#fee2e2; color:#991b1b; }
.smrv-type-badge.vital_signs { background:#cffafe; color:#155e75; }
.smrv-type-badge.other { background:#f3f4f6; color:#374151; }
.smrv-badge-amber {
display: inline-block;
padding: 3px 10px;
border-radius: 50px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
background: #fef3c7;
color: #92400e;
letter-spacing: 0.02em;
}
/* ── UNCLEAR highlight ──────────────────────────────────── */
.smrv-unclear {
background: #fef9c3;
color: #713f12;
border-radius: 3px;
padding: 0 2px;
}
/* ── Vitals mini-table (inside timeline card) ───────────── */
.smrv-vitals-mini {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
border-top: 0 solid #e6eefc;
}
.smrv-vitals-mini.open {
max-height: 500px;
border-top-width: 1px;
}
.smrv-vtable {
width: 100%;
border-collapse: collapse;
font-size: var(--text-xs);
}
.smrv-vtable th {
background: #f1f5fe;
padding: 5px 8px;
text-align: left;
font-weight: 600;
color: #555;
border-bottom: 1px solid #e0e8ff;
white-space: nowrap;
}
.smrv-vtable td {
padding: 4px 8px;
border-bottom: 1px solid #f0f4ff;
color: #222;
white-space: nowrap;
}
.smrv-vtable tr:last-child td { border-bottom: none; }
.smrv-null-cell { color: #d97706; font-style: italic; }
.smrv-null-row { background: #fffbeb; }
/* ── Vitals group separator ─────────────────────────────── */
.smrv-vitals-group-sep {
display: flex;
align-items: center;
gap: 10px;
margin: var(--space-4) 0 var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.smrv-vitals-group-sep::after {
content: '';
flex: 1;
height: 1px;
background: #e0e8ff;
}
/* ── Review banner ──────────────────────────────────────── */
.smrv-review-banner {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fef3c7;
color: #92400e;
border: 1px solid #fbbf24;
border-radius: var(--radius-sm);
padding: 5px var(--space-3);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.02em;
}
/* ── Vitals sheet page ──────────────────────────────────── */
#page-vitals.active {
display: flex;
padding: 0;
overflow: hidden;
height: calc(100vh - 56px);
}
.smrv-vitals-page-shell {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
}
.smrv-vitals-page-header {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 24px;
border-bottom: 1px solid #e6eefc;
background: #fff;
flex-shrink: 0;
}
#smrvVitalsContent {
flex: 1;
overflow-y: auto;
padding: 20px 24px;
}
/* ── Vitals sheet table ─────────────────────────────────── */
.smrv-vitals-sheet-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.smrv-vitals-sheet-table th {
position: sticky;
top: 0;
background: #f1f5fe;
padding: 8px 10px;
text-align: left;
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
border-bottom: 2px solid #dbe6ff;
white-space: nowrap;
z-index: 2;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.smrv-vitals-sheet-table td {
padding: 7px 10px;
border-bottom: 1px solid #f0f4ff;
vertical-align: middle;
color: var(--color-text);
}
.smrv-vitals-sheet-table tr:hover td { background: #f8faff; }
.smrv-vitals-sheet-table .smrv-null-cell { color: #d97706; font-style: italic; }
.smrv-vitals-sheet-table .smrv-null-row td { background: #fffbeb; }
/* ── Inline vitals edit ─────────────────────────────────── */
.smrv-vedit {
width: 70px;
padding: 3px 6px;
border: 1.5px solid #93c5fd;
border-radius: 5px;
font-size: var(--text-xs);
font-family: inherit;
background: #fff;
color: var(--color-text);
}
.smrv-vedit:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px #dbeafe; }
.smrv-vedit-actions { display: flex; gap: 4px; }
.smrv-vedit-save { background: #2563eb; color: #fff; border: none; border-radius: 5px; padding: 3px 8px; font-size: var(--text-xs); font-weight: var(--weight-semibold); cursor: pointer; }
.smrv-vedit-cancel { background: #e5e7eb; color: #374151; border: none; border-radius: 5px; padding: 3px 8px; font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; }
/* ── Vitals action bar ──────────────────────────────────── */
.smrv-vitals-action-bar {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex-shrink: 0;
}
.smrv-vitals-print-wrap {
position: relative;
}
/* ── Print / Export PDF dropdown panel ─────────────────── */
.smrv-vitals-print-panel {
position: absolute;
right: 0;
top: calc(100% + 6px);
background: #fff;
border: 1px solid #dde4f7;
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,0.13);
padding: 16px;
width: 290px;
z-index: 200;
}
.smrv-print-panel-title {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
margin-bottom: 10px;
}
.smrv-print-presets {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.smrv-print-date-row {
display: flex;
gap: 10px;
margin-bottom: 16px;
}
.smrv-print-date-field {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.smrv-print-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
/* ── Manual entry form ──────────────────────────────────── */
.vme-row {
display: flex;
gap: 12px;
margin-bottom: 12px;
}
.vme-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
}
.vme-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.vme-label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
margin-bottom: 2px;
}
.vme-input {
padding: 8px var(--space-3);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-family: inherit;
background: #fff;
color: var(--color-text);
width: 100%;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.vme-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(0,190,133,0.14);
}
.vme-error {
font-size: var(--text-xs);
color: #dc2626;
margin-top: 2px;
}
.smrv-req-star {
color: #dc2626;
}
/* ── Upload chart dropzone ──────────────────────────────── */
.smrv-chart-dropzone {
border: 2px dashed #c4d0ea;
border-radius: 10px;
padding: 30px 16px;
text-align: center;
background: #f8faff;
transition: background 0.15s, border-color 0.15s;
cursor: pointer;
}
.smrv-chart-dropzone.drag {
background: #eff6ff;
border-color: #2563eb;
}
.smrv-chart-drop-label {
font-size: var(--text-base);
color: var(--color-text-muted);
line-height: var(--leading-normal);
}
.smrv-browse-link {
color: #2563eb;
cursor: pointer;
text-decoration: underline;
font-weight: 500;
}
.smrv-chart-status {
font-size: var(--text-sm);
color: #2563eb;
padding: 6px 0;
}
.smrv-chart-status.error {
color: #dc2626;
}
/* ── Login screen extras ────────────────────────────────── */
.smrv-login-link {
background: none;
border: none;
color: #2563eb;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
cursor: pointer;
padding: 0;
font-family: inherit;
}
.smrv-login-link:hover { text-decoration: underline; }
/* ── Session expiry overlay ─────────────────────────────── */
.smrv-expiry-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.65);
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
}
.smrv-expiry-overlay.hidden { display: none; }
.smrv-expiry-card {
background: #fff;
border-radius: 14px;
padding: 40px 36px;
max-width: 340px;
width: 90%;
text-align: center;
box-shadow: 0 12px 48px rgba(0,0,0,0.30);
}
/* ── Session expiry warning banner ─────────────────────── */
.smrv-expiry-banner {
background: #fef3c7;
color: #92400e;
border-bottom: 1px solid #fcd34d;
padding: var(--space-2) var(--space-5);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-shrink: 0;
z-index: 100;
}
.smrv-expiry-banner.hidden { display: none; }
/* ── Document viewer textarea (inline editing) ──────────── */
.smrv-viewer-textarea {
width: 100%;
min-height: 300px;
max-height: 60vh;
resize: vertical;
padding: var(--space-3);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
font-family: inherit;
background: #fbfdff;
color: var(--color-text);
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.smrv-viewer-textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(0,190,133,0.14);
}
/* ── Unsaved indicator ──────────────────────────────────── */
.smrv-unsaved-indicator {
font-size: var(--text-xs);
color: #b45309;
font-weight: var(--weight-medium);
}
/* ── Saved confirmation ─────────────────────────────────── */
.smrv-saved-confirm {
font-size: var(--text-xs);
color: #0a8060;
font-weight: var(--weight-semibold);
}
/* ── Unclear bar ────────────────────────────────────────── */
.smrv-unclear-bar {
background: #fef9c3;
color: #713f12;
border: 1px solid #fde68a;
border-radius: 6px;
padding: 6px var(--space-3);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
}
.smrv-unclear-bar.resolved {
background: #f0fdf4;
color: #065f46;
border-color: #86efac;
}
/* ── Save hint (Ctrl+S label) ───────────────────────────── */
.smrv-save-hint {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* ── Image expand panel ─────────────────────────────────── */
.smrv-image-panel {
position: fixed;
left: -51vw;
top: 0;
width: 50vw;
height: 100vh;
background: #1a1f2e;
z-index: 800;
display: flex;
flex-direction: column;
transition: left 0.25s ease;
box-shadow: 4px 0 24px rgba(0,0,0,0.35);
}
.smrv-image-panel.open { left: 0; }
.smrv-img-panel-close {
position: absolute;
top: 12px;
right: 12px;
background: rgba(255,255,255,0.15);
border: none;
color: #fff;
font-size: 22px;
line-height: 1;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.smrv-img-panel-close:hover { background: rgba(255,255,255,0.28); }
.smrv-img-panel-zoom-bar {
display: flex;
gap: 6px;
padding: 12px 14px 6px 14px;
flex-shrink: 0;
padding-right: 60px; /* clear the × button */
}
.smrv-img-panel-zoom-bar .btn {
background: rgba(255,255,255,0.12);
color: #ddd;
border: 1px solid rgba(255,255,255,0.2);
}
.smrv-img-panel-zoom-bar .btn:hover { background: rgba(255,255,255,0.22); }
.smrv-img-panel-viewport {
flex: 1;
overflow: auto;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 12px 16px;
}
.smrv-img-panel-img {
max-width: 100%;
transform-origin: top center;
transition: transform 0.15s ease;
border-radius: 4px;
display: block;
}
/* handle on the right edge of the panel */
.smrv-img-panel-handle {
position: absolute;
right: -18px;
top: 50%;
transform: translateY(-50%);
background: #1a1f2e;
color: #aaa;
width: 18px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 6px 6px 0;
cursor: pointer;
font-size: 16px;
box-shadow: 3px 0 10px rgba(0,0,0,0.25);
z-index: 1;
user-select: none;
}
.smrv-img-panel-handle:hover { color: #fff; }
/* Thumbnail: shows zoom cursor */
.smrv-img-thumb-clickable {
cursor: zoom-in;
border-radius: 4px;
transition: opacity 0.15s;
display: block;
}
.smrv-img-thumb-clickable:hover { opacity: 0.82; }
/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 900px) {
.smrv-hamburger { display: block; }
#smrvApp .sidebar { position: fixed; left: -240px; top: 0; height: 100vh; z-index: 1000; transition: left 0.22s; display: flex; }
#smrvApp .sidebar.open { left: 0; }
.smrv-sidebar-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 999;
display: none;
}
.smrv-sidebar-overlay.visible { display: block; }
.smrv-demo-grid { grid-template-columns: 1fr 1fr; }
#page-profile.active { height: auto; overflow: visible; }
.smrv-profile-shell { flex-direction: column; height: auto; }
.smrv-profile-left { width: 100%; max-width: 100%; border-right: none; border-bottom: 1px solid #e6eefc; }
.smrv-profile-right { overflow: visible; }
.smrv-timeline-scroll { max-height: 60vh; }
#page-vitals.active { height: auto; overflow: visible; }
.smrv-vitals-page-shell { height: auto; }
#smrvVitalsContent { overflow-y: visible; }
/* Image panel: full screen on mobile */
.smrv-image-panel { width: 100vw; left: -101vw; }
.smrv-img-panel-handle { display: none; }
/* Document viewer: show tab bar, default to text col */
.smrv-viewer-tab-bar { display: flex; }
#smrvViewerRow .preview-col { display: none; }
#smrvViewerRow .text-col { width: 100%; }
#smrvViewerRow.show-original .preview-col { display: block; width: 100%; }
#smrvViewerRow.show-original .text-col { display: none; }
}
@media (max-width: 600px) {
/* smrv-login-card now handled in ≤768px block */
.smrv-demo-grid { grid-template-columns: 1fr; }
/* topbar .search now hidden at ≤768px; no width needed */
}
/* ── Upload: draggable file cards (Step 3) ──────────────── */
.smrv-file-card {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid #e0e8ff;
border-radius: 8px;
background: #fff;
cursor: grab;
user-select: none;
transition: background 0.1s, box-shadow 0.1s;
margin-bottom: 6px;
}
.smrv-file-card.smrv-file-card-active { cursor: default; }
.smrv-file-card.smrv-drag-over {
background: #eef4ff;
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(0,190,133,0.18);
}
.smrv-drag-handle {
font-size: 18px;
color: #bbb;
cursor: grab;
flex-shrink: 0;
line-height: 1;
}
.smrv-drag-handle-hidden { visibility: hidden; }
.smrv-page-badge {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
color: #fff;
background: var(--color-primary);
border-radius: 50px;
padding: 2px 7px;
flex-shrink: 0;
white-space: nowrap;
}
.smrv-file-thumb-wrap {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 5px;
overflow: hidden;
border: 1px solid #e0e8ff;
display: flex;
align-items: center;
justify-content: center;
background: #f8faff;
}
.smrv-file-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.smrv-file-thumb-placeholder {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
color: #888;
text-align: center;
}
.smrv-file-card-info {
flex: 1;
min-width: 0;
}
.smrv-file-card-name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.smrv-file-card-end {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* ── Document viewer: page navigator ────────────────────── */
.smrv-page-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 8px 12px;
margin-bottom: 8px;
background: #f0f4ff;
border: 1px solid #dce6ff;
border-radius: 8px;
}
.smrv-page-nav-btn {
background: #fff;
border: 1px solid #dce6ff;
border-radius: 6px;
padding: 4px 12px;
font-size: 16px;
cursor: pointer;
color: #334;
transition: background 0.1s;
}
.smrv-page-nav-btn:hover:not(:disabled) { background: #e8f0ff; }
.smrv-page-nav-btn:disabled { opacity: 0.4; cursor: default; }
.smrv-page-label {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-text);
min-width: 80px;
text-align: center;
}
/* ── Reorder pages modal ────────────────────────────────── */
.smrv-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.smrv-modal-card {
background: #fff;
border-radius: 12px;
padding: var(--space-6);
width: 100%;
max-width: 640px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 12px 48px rgba(0,0,0,0.28);
}
.smrv-reorder-pages {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.smrv-reorder-page {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px;
border: 1px solid #e0e8ff;
border-radius: 8px;
background: #fafbff;
cursor: grab;
user-select: none;
width: 110px;
transition: background 0.1s, box-shadow 0.1s;
}
.smrv-reorder-page.smrv-drag-over {
background: #eef4ff;
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(0,190,133,0.2);
}
.smrv-reorder-page-num {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
color: #fff;
background: var(--color-primary);
border-radius: 50px;
padding: 1px 8px;
}
.smrv-reorder-thumb {
width: 90px;
height: 70px;
border-radius: 4px;
overflow: hidden;
border: 1px solid #e0e8ff;
display: flex;
align-items: center;
justify-content: center;
background: #f5f8ff;
}
.smrv-reorder-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.smrv-reorder-filename {
font-size: var(--text-xs);
max-width: 94px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
color: var(--color-text-muted);
}
/* ══════════════════════════════════════════════════════════════
AI ASSISTANT DRAWER
══════════════════════════════════════════════════════════════ */
/* ── Floating trigger button ─────────────────────────────── */
.smrv-ai-trigger {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 1500;
background: #0d9488;
color: #fff;
border: none;
border-radius: 999px;
padding: 12px 22px;
font-size: var(--text-base);
font-weight: var(--weight-semibold);
font-family: inherit;
cursor: pointer;
box-shadow: 0 4px 18px rgba(13,148,136,0.35);
transition: background 0.15s, transform 0.12s, box-shadow 0.12s;
white-space: nowrap;
}
.smrv-ai-trigger:hover {
background: #0f766e;
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(13,148,136,0.45);
}
.smrv-ai-trigger.hidden { display: none; }
/* ── Drawer panel ────────────────────────────────────────── */
.smrv-ai-drawer {
position: fixed;
top: 56px; /* height of topbar */
right: 0;
width: 420px;
height: calc(100vh - 56px);
background: #fff;
box-shadow: -4px 0 24px rgba(0,0,0,0.10);
z-index: 1400;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 280ms ease;
overflow: hidden;
}
.smrv-ai-drawer.open { transform: translateX(0); }
/* ── Drawer header ───────────────────────────────────────── */
.smrv-ai-drawer-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 16px 18px 12px;
border-bottom: 1px solid #f0f4ff;
flex-shrink: 0;
}
.smrv-ai-drawer-title {
font-size: var(--text-md);
font-weight: var(--weight-bold);
color: var(--color-text);
letter-spacing: var(--tracking-tight);
}
.smrv-ai-drawer-patient {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: 3px;
}
.smrv-ai-close {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
color: #aaa;
line-height: 1;
padding: 2px 4px;
border-radius: 4px;
transition: color 0.12s;
flex-shrink: 0;
}
.smrv-ai-close:hover { color: #333; }
/* ── Tabs ────────────────────────────────────────────────── */
.smrv-ai-tabs {
display: flex;
border-bottom: 1px solid #f0f4ff;
flex-shrink: 0;
}
.smrv-ai-tab {
flex: 1;
background: none;
border: none;
border-bottom: 2px solid transparent;
padding: 10px 8px;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
font-family: inherit;
cursor: pointer;
color: var(--color-text-muted);
transition: color 0.15s, border-color 0.15s;
margin-bottom: -1px;
}
.smrv-ai-tab:hover { color: #555; }
.smrv-ai-tab.active {
color: #0d9488;
border-bottom-color: #0d9488;
font-weight: 600;
}
/* ── Tab content panes ───────────────────────────────────── */
.smrv-ai-tab-content {
display: none;
flex: 1;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.smrv-ai-tab-content.active { display: flex; }
/* ── Search tab ──────────────────────────────────────────── */
.smrv-ai-search-bar {
display: flex;
gap: 8px;
padding: 14px 16px 10px;
flex-shrink: 0;
}
.smrv-ai-search-bar .smrv-input { flex: 1; min-width: 0; }
.smrv-ai-search-results {
flex: 1;
overflow-y: auto;
padding: 4px 16px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.smrv-ai-result-card {
border: 1px solid #e8f0ff;
border-radius: 10px;
padding: 12px 14px;
background: #fff;
}
.smrv-ai-result-card:hover { background: #fafcff; }
.smrv-ai-result-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 5px;
flex-wrap: wrap;
}
.smrv-ai-result-date {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.smrv-ai-result-meta {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-bottom: 6px;
}
.smrv-ai-result-excerpt {
font-size: var(--text-xs);
color: #444;
line-height: var(--leading-normal);
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.smrv-ai-confidence {
height: 3px;
border-radius: 2px;
background: #e8f0ff;
margin-bottom: 8px;
overflow: hidden;
}
.smrv-ai-confidence-fill {
height: 100%;
background: #0d9488;
border-radius: 2px;
transition: width 0.4s ease;
}
.smrv-ai-search-empty {
padding: 28px 0;
text-align: center;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.smrv-ai-search-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 32px;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
/* ── History tab ─────────────────────────────────────────── */
.smrv-ai-history-toolbar {
padding: 6px 16px;
flex-shrink: 0;
border-bottom: 1px solid #f5f5f5;
display: flex;
justify-content: flex-end;
}
.smrv-ai-clear-btn {
background: none;
border: none;
font-size: var(--text-xs);
color: #bbb;
cursor: pointer;
font-family: inherit;
padding: 3px 0;
}
.smrv-ai-clear-btn:hover { color: #c0392b; }
/* Messages scroll area */
.smrv-ai-messages {
flex: 1;
overflow-y: auto;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
}
/* Individual message bubbles */
.smrv-ai-msg {
max-width: 88%;
padding: 10px 14px;
font-size: var(--text-base);
line-height: var(--leading-relaxed);
word-break: break-word;
}
.smrv-ai-msg.user {
align-self: flex-end;
background: #0d9488;
color: #fff;
border-radius: 16px 16px 4px 16px;
}
.smrv-ai-msg.ai {
align-self: flex-start;
background: #f5f5f5;
color: #222;
border-radius: 16px 16px 16px 4px;
}
.smrv-ai-msg.ai strong { font-weight: 700; }
.smrv-ai-msg.ai em { font-style: italic; }
.smrv-ai-msg.ai ul { margin: 4px 0 4px 16px; padding: 0; }
.smrv-ai-msg.ai li { margin-bottom: 2px; }
.smrv-ai-error-bubble {
align-self: center;
background: #fff0f0;
color: #c0392b;
border: 1px solid #fcc;
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-3);
font-size: var(--text-xs);
max-width: 88%;
}
/* Teal highlights inside AI messages */
.smrv-ai-date { color: #0d9488; font-weight: 600; }
.smrv-ai-recnum { color: #0d9488; font-weight: 600; }
/* Streaming cursor */
.smrv-ai-cursor {
display: inline-block;
margin-left: 1px;
animation: smrv-blink 0.75s step-start infinite;
}
@keyframes smrv-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Input area at bottom of history tab */
.smrv-ai-input-area {
display: flex;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid #f0f4ff;
flex-shrink: 0;
align-items: flex-end;
}
.smrv-ai-textarea {
flex: 1;
resize: none;
font-family: inherit;
font-size: var(--text-base);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-2) 10px;
line-height: var(--leading-normal);
overflow-y: auto;
background: #fff;
color: var(--color-text);
min-width: 0;
transition: border-color 0.15s, box-shadow 0.15s;
}
.smrv-ai-textarea:focus {
outline: none;
border-color: #0d9488;
box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 640px) {
.smrv-ai-drawer { width: 100%; }
.smrv-ai-trigger { bottom: 20px; right: 16px; padding: 10px 18px; }
}
/* ═══════════════════════════════════════════════════════════
CLINICAL EXTRACTS UI
═══════════════════════════════════════════════════════════ */
/* ── Clinical Summary Card (patient profile left column) ── */
.clinical-summary-card {
margin-top: 12px;
background: #fafafa;
border: 1px solid #ebebeb;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: border-color 0.15s;
}
.clinical-summary-card:hover {
border-color: #d5d5d5;
}
.summary-header {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 14px;
user-select: none;
}
.clinical-summary-title {
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
color: var(--color-text);
flex-shrink: 0;
}
.summary-ai-pill {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
background: #e6f7f5;
color: #0d9488;
border: 1px solid rgba(13,148,136,0.3);
border-radius: 50px;
padding: 2px 8px;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.summary-preview {
font-size: var(--text-xs);
color: var(--color-text-muted);
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: opacity 0.2s;
}
.summary-chevron {
font-size: 17px;
color: #bbb;
line-height: 1;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.summary-body {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.25s ease;
padding: 0 14px;
}
.clinical-summary-card.is-open .summary-body {
padding-bottom: 12px;
}
.cs-row {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 7px 0;
border-top: 1px solid #f0f0f0;
}
.cs-row:first-child {
border-top: none;
}
.cs-label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
min-width: 90px;
padding-top: 3px;
flex-shrink: 0;
}
.cs-pills {
display: flex;
flex-wrap: wrap;
gap: 4px;
flex: 1;
align-items: center;
}
.cs-none {
font-size: var(--text-xs);
color: #ccc;
}
.cs-pill {
display: inline-flex;
align-items: center;
padding: 3px 9px;
font-size: var(--text-xs);
border-radius: 50px;
white-space: nowrap;
line-height: 1.5;
border: 1px solid transparent;
}
.cs-pill-diagnosis {
background: #eff6ff;
color: #1d4ed8;
border-color: rgba(29,78,216,0.2);
}
.cs-pill-medication {
background: #f0fdf4;
color: #15803d;
border-color: rgba(21,128,61,0.2);
}
.cs-pill-allergy {
background: #fffbeb;
color: #b45309;
border-color: rgba(180,83,9,0.35);
}
.cs-pill-procedure {
background: #faf5ff;
color: #7e22ce;
border-color: rgba(126,34,206,0.2);
}
.cs-pill-more {
background: transparent;
color: #0d9488;
border-color: #0d9488;
cursor: pointer;
font-weight: 600;
}
.cs-pill-more:hover {
background: #e6f7f5;
}
/* ── Extract Pills (shared — used by timeline record strip) ── */
.extract-pill {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 10px;
font-size: var(--text-xs);
background: #f0f0f0;
color: #333;
border-radius: 50px;
white-space: nowrap;
border: 1px solid transparent;
transition: background 0.15s;
line-height: var(--leading-normal);
}
.extract-pill-tipped {
cursor: default;
}
/* ── Extract Strip (inline on timeline record cards) ─────── */
.smrv-extract-strip-wrapper {
padding: 0 16px 10px;
}
.extract-strip {
border-top: 1px solid #eee;
padding-top: 10px;
}
.extract-strip-label {
font-size: var(--text-xs);
color: var(--color-text-muted);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
margin-bottom: 7px;
}
.extract-strip-pills {
display: flex;
gap: 6px;
flex-wrap: wrap;
overflow-x: auto;
}
.extract-superseded-note {
font-size: var(--text-xs);
color: #b45309;
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: 4px;
padding: 4px 8px;
margin-top: 8px;
line-height: var(--leading-normal);
}
/* ── Skeleton Loader ─────────────────────────────────────── */
.skeleton,
.skeleton-bar {
background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4px;
display: block;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-text-sm { height: 12px; margin-bottom: 8px; }
.skeleton-text-md { height: 16px; margin-bottom: 10px; }
.skeleton-text-lg { height: 24px; margin-bottom: 12px; }
.skeleton-card {
border: 1px solid #e0e8ff;
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
display: flex;
flex-direction: column;
gap: 8px;
background: #fff;
}
/* ── Floating Extract Tooltip ────────────────────────────── */
.extract-tooltip {
position: absolute;
background: #1a1a1a;
color: #fff;
font-size: var(--text-xs);
padding: 6px 10px;
border-radius: 6px;
max-width: 250px;
z-index: 200;
pointer-events: none;
line-height: var(--leading-normal);
word-break: break-word;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
/* ═══════════════════════════════════════════════════════════
FOLLOW-UP FLAGS UI
═══════════════════════════════════════════════════════════ */
/* ── Profile card ───────────────────────────────────────── */
.followup-profile-card {
margin-top: 12px;
}
.followup-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
flex-wrap: wrap;
gap: 6px;
}
.followup-toggle-btn {
background: none;
border: none;
cursor: pointer;
padding: 0;
font-size: var(--text-xs);
color: var(--color-text-muted);
text-decoration: underline;
text-underline-offset: 2px;
}
.followup-toggle-btn:hover { color: #444; }
/* Badge variant: red when overdue items exist */
.followup-badge-red {
background: #dc2626 !important;
}
/* ── Individual follow-up item ───────────────────────────── */
.followup-item {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.followup-item:last-child { border-bottom: none; }
.followup-item-top {
display: flex;
gap: 10px;
align-items: flex-start;
}
.followup-status-icon {
font-size: 15px;
flex-shrink: 0;
margin-top: 1px;
line-height: 1;
}
.followup-icon-complete { color: #16a34a; font-size: 14px; font-weight: 700; }
.followup-icon-dismissed { color: #aaa; font-size: 14px; }
.followup-item-body {
flex: 1;
min-width: 0;
}
.followup-instruction {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
line-height: var(--leading-normal);
word-break: break-word;
}
.followup-item[data-status="completed"] .followup-instruction,
.followup-item[data-status="dismissed"] .followup-instruction {
color: #aaa;
font-weight: 400;
}
.followup-meta {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: 3px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.followup-overdue-badge {
display: inline-block;
background: #fee2e2;
color: #dc2626;
padding: 3px 10px;
border-radius: 50px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
white-space: nowrap;
letter-spacing: 0.02em;
}
.followup-actions {
display: flex;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.followup-note-prompt {
margin-top: 8px;
padding: 10px 12px;
background: #f8faff;
border: 1px solid #e0e8ff;
border-radius: 8px;
}
.followup-note-input {
width: 100%;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-2) 10px;
font-size: var(--text-sm);
font-family: inherit;
margin-top: 4px;
resize: vertical;
min-height: 48px;
box-sizing: border-box;
background: #fff;
color: var(--color-text);
transition: border-color 0.15s, box-shadow 0.15s;
}
.followup-note-input:focus { outline: none; border-color: var(--accent); }
.followup-empty {
font-size: var(--text-sm);
color: #16a34a;
font-weight: var(--weight-medium);
padding: 6px 0 2px;
}
.followup-items { /* container — no extra styling needed */ }
/* ── Follow-ups screen ───────────────────────────────────── */
.followups-screen-header {
margin-bottom: 20px;
}
.followup-table {
width: 100%;
border-collapse: collapse;
}
.followup-table th {
text-align: left;
padding: 10px 12px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
border-bottom: 2px solid #e5e7eb;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.followup-table td {
padding: 12px;
font-size: var(--text-sm);
border-bottom: 1px solid #f0f0f0;
vertical-align: top;
color: var(--color-text);
}
.followup-table tr:hover td {
background: #f9fafb;
}
.followup-table-row {
transition: opacity 0.3s ease;
}
.followup-row-fade {
opacity: 0;
pointer-events: none;
}
.followup-days-overdue {
color: #dc2626;
font-weight: 700;
}
.followup-patient-link {
background: none;
border: none;
padding: 0;
color: var(--accent);
cursor: pointer;
font-size: inherit;
font-family: inherit;
text-decoration: underline;
text-underline-offset: 2px;
text-align: left;
}
.followup-patient-link:hover { opacity: 0.75; }
/* Table inline note prompt */
.followup-table-prompt td {
background: #f9fafb !important;
border-bottom: 1px solid #e5e7eb;
}
/* ── Empty state ─────────────────────────────────────────── */
.followups-empty-state {
text-align: center;
padding: 64px 24px;
}
.followups-empty-icon {
font-size: 3rem;
color: #16a34a;
margin-bottom: 12px;
}
.followups-empty-title {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin-bottom: 6px;
}
.followups-empty-sub {
color: var(--color-text-muted);
font-size: var(--text-sm);
}
/* ── Shared empty state component ─────────────────────────── */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 24px;
text-align: center;
gap: 10px;
}
.empty-state-icon {
font-size: 2.5rem;
margin-bottom: 4px;
opacity: 0.6;
}
.empty-state-title {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.empty-state-subtitle {
font-size: var(--text-sm);
color: var(--color-text-muted);
max-width: 320px;
line-height: var(--leading-normal);
}
.empty-state .btn {
margin-top: 8px;
}
/* Follow-up profile card — no pending items */
.followup-empty {
padding: 8px 0 4px;
font-size: var(--text-sm);
color: #16a34a;
font-weight: var(--weight-medium);
}
/* ── Vitals abnormality display ───────────────────────────── */
.vitals-row-abnormal { background: #fff5f5; }
.vitals-cell-abnormal {
color: #dc2626;
font-weight: 600;
}
.vitals-flag-detail {
background: #fef2f2;
border-top: 1px solid #fecaca;
padding: 10px var(--space-3);
font-size: var(--text-sm);
color: #b91c1c;
line-height: var(--leading-relaxed);
}
.vitals-flag-detail textarea {
width: 100%;
box-sizing: border-box;
margin-top: 8px;
padding: 7px 9px;
border: 1.5px solid #fca5a5;
border-radius: 6px;
font-size: var(--text-xs);
font-family: inherit;
color: var(--color-text);
resize: vertical;
min-height: 52px;
}
.vitals-flag-detail textarea:focus {
outline: none;
border-color: #dc2626;
}
.vitals-review-pill-pending {
background: #fff7ed;
color: #c2410c;
border: 1px solid #fed7aa;
padding: 3px 10px;
border-radius: 50px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
white-space: nowrap;
letter-spacing: 0.02em;
}
.vitals-review-pill-done {
background: #f0fdf4;
color: #166534;
border: 1px solid #bbf7d0;
padding: 3px 10px;
border-radius: 50px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.02em;
}
.vitals-abnormal-banner {
background: #fff7ed;
border: 1px solid #fed7aa;
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: var(--text-sm);
color: #c2410c;
margin-bottom: var(--space-3);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
line-height: var(--leading-normal);
}
.vitals-abnormal-banner a {
color: #c2410c;
font-weight: 600;
white-space: nowrap;
text-decoration: underline;
cursor: pointer;
}
/* ── Manual entry form: live abnormality feedback ─────────── */
.input-abnormal { border-color: #dc2626 !important; }
.input-abnormal-note {
font-size: var(--text-xs);
color: #dc2626;
margin-top: 2px;
}
.entry-abnormal-summary {
background: #fff7ed;
border: 1px solid #fed7aa;
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: var(--text-sm);
color: #c2410c;
margin-bottom: var(--space-3);
line-height: var(--leading-normal);
}
/* ── AI Thinking Dots ────────────────────────────────────── */
.ai-thinking {
display: flex;
gap: 4px;
align-items: center;
padding: 12px 16px;
}
.ai-thinking span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--muted);
animation: thinkingDot 1.2s ease infinite;
}
.ai-thinking span:nth-child(2) { animation-delay: 0.2s; }
.ai-thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkingDot {
0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
40% { opacity: 1; transform: scale(1); }
}
/* ── Screen Error ────────────────────────────────────────── */
.screen-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 60px 24px;
text-align: center;
color: var(--muted);
}
.screen-error-icon { font-size: 2rem; }
.screen-error-message { font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-normal); }
.screen-error-retry {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-primary);
cursor: pointer;
text-decoration: underline;
background: none;
border: none;
font-family: inherit;
padding: 0;
}
/* ═══════════════════════════════════════════════════════════
TYPOGRAPHY OVERRIDES
Supplement css.css base classes with SMRV design tokens.
Placed before responsive blocks so media queries can win.
═══════════════════════════════════════════════════════════ */
/* ── Heading hierarchy ───────────────────────────────────── */
#smrvApp h1 {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: var(--color-text);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
}
#smrvApp h2 {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
}
#smrvApp h3 {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--color-text);
line-height: var(--leading-normal);
}
#smrvApp h4 {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
/* ── Nav item overrides (extend css.css base) ────────────── */
#smrvApp .nav-item {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-muted);
letter-spacing: var(--tracking-normal);
transition: background 0.12s, color 0.12s;
}
#smrvApp .nav-item.active {
background: rgba(0,190,133,0.08);
color: var(--color-primary);
font-weight: var(--weight-semibold);
border-left: 3px solid var(--color-primary);
padding-left: 5px; /* compensate: 8px base − 3px border */
}
#smrvApp .nav-item:hover:not(.active) {
background: rgba(0,190,133,0.05);
color: var(--color-text);
}
/* ── Button sizing overrides (extend css.css base) ──────────
css.css: padding: 8px 12px — we bump to 9px 18px
─────────────────────────────────────────────────────────── */
#smrvApp .btn,
.smrv-login-card .btn {
padding: 9px 18px;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
border-radius: var(--radius-sm);
letter-spacing: var(--tracking-normal);
transition: background 0.15s, transform 0.1s, box-shadow 0.1s;
}
#smrvApp .btn.small,
#smrvApp .btn-sm {
padding: 6px 12px;
font-size: var(--text-xs);
}
#smrvApp .btn-lg {
padding: 12px 24px;
font-size: var(--text-base);
}
/* ── Form label standardisation ──────────────────────────── */
#smrvApp .label,
.smrv-modal-card .label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
display: block;
margin-bottom: var(--space-1);
}
/* ═══════════════════════════════════════════════════════════
RESPONSIVE — TABLET (769px–1024px) & MOBILE (≤768px)
All new breakpoints live here, below every base rule.
═══════════════════════════════════════════════════════════ */
/* ── Vitals table: sticky first column ──────────────────────
Always applied — the wrapper already has overflow-x:auto
─────────────────────────────────────────────────────────── */
.smrv-vitals-sheet-table th:first-child,
.smrv-vitals-sheet-table td:first-child {
position: sticky;
left: 0;
background: #fff;
z-index: 1;
}
.smrv-vitals-sheet-table thead th:first-child { background: #f5f8ff; }
.vitals-row-abnormal td:first-child { background: #fff5f5; }
/* ── Document viewer tab bar (shown at ≤900px via media query) */
.smrv-viewer-tab-bar {
display: none;
gap: 0;
border-bottom: 2px solid #e0e8ff;
margin-bottom: 12px;
}
.smrv-viewer-tab {
flex: 1;
padding: 10px;
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text-muted);
cursor: pointer;
font-family: inherit;
transition: color 0.15s;
}
.smrv-viewer-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* ── Search toggle button (shown at ≤768px) */
.smrv-search-toggle {
display: none;
background: none;
border: none;
font-size: 18px;
cursor: pointer;
padding: 8px;
color: #444;
line-height: 1;
}
/* ── "Jump to Timeline" sticky button (mobile profile) */
/* JS sets display:none/'' based on scroll position.
CSS base is hidden; the ≤768px media query enables it via display:block
which is the initial visible state before JS hides it on scroll. */
.smrv-jump-timeline {
display: none;
position: sticky;
bottom: 16px;
z-index: 50;
text-align: center;
pointer-events: none; /* wrapper: pass clicks through to button child */
margin-top: 8px;
padding-bottom: 4px;
}
.smrv-jump-timeline button {
pointer-events: all;
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 50px;
padding: 10px 22px;
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,0.22);
font-family: inherit;
}
/* ── Mobile upload step indicator (shown at ≤768px) */
.smrv-mobile-step-indicator { display: none; margin-bottom: var(--space-4); }
.smrv-mobile-step-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); margin-bottom: 6px; }
.smrv-mobile-step-progress { height: 4px; background: #e0e8ff; border-radius: 2px; overflow: hidden; }
.smrv-mobile-step-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.25s ease; }
/* ── File card reorder buttons (shown at ≤768px) */
.smrv-file-reorder-btns {
display: none; /* revealed in mobile media query */
flex-direction: column;
gap: 2px;
flex-shrink: 0;
}
.smrv-file-reorder-btn {
background: none;
border: 1px solid #e0e8ff;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
padding: 2px 6px;
line-height: 1;
color: #555;
}
.smrv-file-reorder-btn:disabled {
opacity: 0.3;
cursor: default;
}
/* ─────────────────────────────────────────────────────────────
TABLET: 769px – 1024px
Hamburger sidebar (same overlay approach as mobile). Placed
AFTER the 900px block so it wins at 769–900px overlap range.
───────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
/* Document viewer: show tab bar at tablet */
.smrv-viewer-tab-bar { display: flex; }
#smrvViewerRow .preview-col { display: none; }
#smrvViewerRow .text-col { width: 100%; }
#smrvViewerRow.show-original .preview-col { display: block; width: 100%; }
#smrvViewerRow.show-original .text-col { display: none; }
/* Timeline cards: internal scroll at tablet */
.smrv-tc-body.expanded {
max-height: 320px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* AI drawer: slightly narrower at tablet */
.smrv-ai-drawer { width: 380px; }
/* Profile: side-by-side at tablet */
.smrv-profile-shell { flex-direction: row; height: 100%; }
.smrv-profile-left {
width: 260px;
min-width: 240px;
max-width: 260px;
border-right: 1px solid #e6eefc;
border-bottom: none;
}
.smrv-profile-right { overflow: auto; }
.smrv-timeline-scroll { max-height: none; }
}
/* ─────────────────────────────────────────────────────────────
SIDEBAR OVERLAY: ≤1024px
Hamburger overlay for tablet AND mobile. Placed after the
769–1024px block so it wins at that range. At ≤900px it
overrides the 900px block with explicit width and shadow.
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.smrv-hamburger { display: block; }
#smrvApp .sidebar {
position: fixed;
left: -280px; /* hide fully off-screen (260px + 20px buffer) */
top: 0;
width: 260px;
height: 100vh;
z-index: 1000;
transition: left 0.22s ease;
overflow-y: auto;
box-shadow: none;
}
#smrvApp .sidebar.open {
left: 0;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
}
.smrv-sidebar-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 999;
display: none;
}
.smrv-sidebar-overlay.visible { display: block; }
}
/* ─────────────────────────────────────────────────────────────
MOBILE: ≤768px
Full overlay sidebar, bottom-sheet modals, search toggle,
touch targets, viewer tabs, upload reorder arrows.
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* ── Topbar ─────────────────────────────────────────────── */
.smrv-hospital-label { display: none; }
.smrv-search-toggle { display: block; }
/* Hide the inline search — toggle reveals it below topbar */
.topbar .center { display: none; }
/* Expanded search panel */
.topbar.search-open .center {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
padding: 10px 12px;
box-shadow: 0 4px 14px rgba(0,0,0,0.12);
z-index: 200;
border-top: 1px solid #e6eefc;
}
.topbar.search-open .center .search {
width: 100%;
box-sizing: border-box;
}
/* ── Touch targets: 44 px minimum ──────────────────────── */
.btn,
.nav-item,
.smrv-input,
select.smrv-input,
.smrv-hamburger,
.smrv-search-toggle,
.smrv-ai-tab,
.smrv-viewer-tab { min-height: 44px; }
/* ── Profile: jump-to-timeline sticky button ────────────── */
.smrv-jump-timeline { display: block; }
/* ── Timeline cards: internal body scroll (Fix 4) ───────── */
/* overflow: visible overrides card's overflow:hidden so the */
/* sticky footer works and the body scrolls within its cap. */
.smrv-timeline-card { overflow: visible; }
.smrv-tc-body.expanded {
max-height: 260px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Subtle fade-out at the bottom of a scrollable body */
.smrv-tc-body.expanded::after {
content: '';
display: block;
position: sticky;
bottom: 0;
height: 28px;
background: linear-gradient(to bottom, transparent, #fff);
pointer-events: none;
margin-top: -28px; /* pull up so it overlaps last content line */
}
/* ── Vitals: compact font & padding ────────────────────── */
.smrv-vitals-sheet-table { font-size: var(--text-xs); }
.smrv-vitals-sheet-table th,
.smrv-vitals-sheet-table td { padding: 6px 8px; }
/* ── AI chat textarea: 16px prevents iOS auto-zoom ──────── */
.smrv-ai-textarea { font-size: 16px !important; }
/* ── Bottom-sheet modals ─────────────────────────────────── */
.modal { align-items: flex-end !important; }
.modal-box {
width: 100% !important;
max-width: 100% !important;
max-height: 92vh;
overflow-y: auto;
border-radius: 16px 16px 0 0 !important;
}
/* Slide-up entry animation — plays when hidden class is removed */
.modal:not(.hidden) .modal-box {
animation: smrvSheetSlideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes smrvSheetSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* Drag-handle indicator bar */
.modal-box::before {
content: '';
display: block;
width: 40px;
height: 4px;
background: #dde4f0;
border-radius: 2px;
margin: 0 auto 16px;
}
/* ── Upload: mobile step indicator ─────────────────────── */
.smrv-steps { display: none; }
.smrv-mobile-step-indicator { display: block; }
/* ── Upload file cards: reorder arrows instead of drag ───── */
.smrv-drag-handle { display: none; }
.smrv-file-reorder-btns { display: flex; }
.smrv-file-card { cursor: default !important; }
/* ── Login card tight padding ────────────────────────────── */
.smrv-login-card { width: 95vw; padding: 24px 16px; }
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
}
.nav-icon {
width: 18px;
height: 18px;
object-fit: contain;
flex-shrink: 0;
opacity: 0.6;
transition: opacity 150ms ease;
}
.nav-item.active .nav-icon,
.nav-item:hover .nav-icon {
opacity: 1;
}
/* Sidebar nav icons — consistent sizing at all breakpoints */
.nav-icon {
width: 18px;
height: 18px;
}
/* ─────────────────────────────────────────────────────────────
REVIEW QUEUE — Priority badges
───────────────────────────────────────────────────────────── */
.smrv-priority-badge {
display: inline-block;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 2px 8px;
border-radius: 50px;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
}
/* Priority 1 — Immediate (prescription unclear) */
.smrv-priority-1 { background: #ffeaea; color: #c0392b; border: 1px solid rgba(192,57,43,0.25); }
/* Priority 2 — Today (lab result unclear) */
.smrv-priority-2 { background: #fff4e0; color: #c07800; border: 1px solid rgba(192,120,0,0.25); }
/* Priority 3 — This week (other types) */
.smrv-priority-3 { background: #eef4ff; color: #3a56c8; border: 1px solid rgba(58,86,200,0.20); }
/* Priority 4 — Low (unknown type) */
.smrv-priority-4 { background: #f0f0f0; color: #666; border: 1px solid #d0d0d0; }
/* ─────────────────────────────────────────────────────────────
LAB RESULT TABLE
Renders STRUCTURED_FORM documents as colour-coded HTML tables.
───────────────────────────────────────────────────────────── */
.smrv-lab-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 10px 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.smrv-lab-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
min-width: 480px; /* keeps table readable on scroll rather than squashed */
}
.smrv-lab-table thead tr {
background: #f5f8ff;
}
.smrv-lab-table th {
text-align: left;
padding: 8px 12px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
border-bottom: 2px solid var(--color-border);
white-space: nowrap;
}
.smrv-lab-table td {
padding: 7px 12px;
border-bottom: 1px solid #eef2ff;
color: var(--color-text);
vertical-align: middle;
}
.smrv-lab-table tbody tr:last-child td {
border-bottom: none;
}
.smrv-lab-table tbody tr:hover td {
background: #fafbff;
}
/* Flag column colour coding */
.smrv-lab-flag-h {
color: #c0392b;
font-weight: var(--weight-semibold);
background: rgba(192, 57, 43, 0.06);
}
.smrv-lab-flag-l {
color: #c07800;
font-weight: var(--weight-semibold);
background: rgba(192, 120, 0, 0.06);
}
.smrv-lab-flag-n {
color: #0a8060;
background: rgba(10, 128, 96, 0.05);
}
.smrv-lab-flag-u {
background: #fff8e0;
}
/* Metadata lines above/below the table (lab header info) */
.smrv-lab-meta {
font-size: var(--text-sm);
color: var(--color-text);
margin: 2px 0;
line-height: var(--leading-normal);
}
.smrv-lab-note {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 4px 0;
line-height: var(--leading-relaxed);
}
/* Mobile: allow table container to scroll without breaking layout */
@media (max-width: 768px) {
.smrv-lab-table-wrap { margin: 8px -4px; border-radius: 0; border-left: none; border-right: none; }
.smrv-lab-table th,
.smrv-lab-table td { padding: 6px 10px; }
}
/* ═══════════════════════════════════════════════════════════
WARD ROUND OVERLAY
Full-screen overlay that slides up over the patient profile.
═══════════════════════════════════════════════════════════ */
.ward-round-overlay {
position: fixed;
top: 56px; /* below topbar */
left: 0;
right: 0;
bottom: 0;
z-index: 400;
background: #f5f8ff;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.ward-round-overlay.open {
transform: translateY(0);
}
/* ── Ward header ────────────────────────────────────────────── */
.ward-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
background: #fff;
border-bottom: 1px solid #e6eefc;
flex-shrink: 0;
}
.ward-header-center {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 0;
}
.ward-patient-name {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 280px;
}
.ward-round-label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
/* ── Draft banner ───────────────────────────────────────────── */
.ward-draft-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 20px;
background: #fffbe6;
border-bottom: 1px solid #ffe58f;
font-size: var(--text-sm);
color: #856404;
flex-shrink: 0;
}
/* ── Filter tabs ────────────────────────────────────────────── */
.ward-filter-tabs {
display: flex;
gap: 0;
padding: 0 20px;
background: #fff;
border-bottom: 2px solid #e6eefc;
flex-shrink: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ward-filter-tabs::-webkit-scrollbar { display: none; }
.ward-filter-tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
padding: 10px 14px;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-muted);
cursor: pointer;
white-space: nowrap;
transition: color 0.12s, border-color 0.12s;
}
.ward-filter-tab:hover { color: var(--color-text); }
.ward-filter-tab.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
font-weight: var(--weight-semibold);
}
/* ── Continuum (scrollable entry list) ──────────────────────── */
.ward-continuum {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
padding: 16px 20px 120px; /* bottom pad clears the composer bar */
/* block layout — flex would compress overflow:hidden cards to zero height */
}
/* ── Date separator ─────────────────────────────────────────── */
.ward-date-separator {
display: flex;
align-items: center;
gap: 10px;
margin: 16px 0 10px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.ward-date-separator::before,
.ward-date-separator::after {
content: '';
flex: 1;
height: 1px;
background: #e0e8ff;
}
.ward-date-separator:first-child { margin-top: 0; }
/* ── Load older link ────────────────────────────────────────── */
.ward-load-older {
text-align: center;
padding: 8px 0 4px;
}
/* ── Ward cards ─────────────────────────────────────────────── */
.ward-card {
background: #fff;
border-radius: 10px;
border: 1px solid #e6eefc;
border-left: 4px solid #bbb;
box-shadow: 0 1px 4px rgba(3,18,59,0.05);
margin-bottom: 10px;
overflow: hidden;
}
.ward-card-live[data-type="doctor_note"] { border-left-color: #2563eb; }
.ward-card-live[data-type="nursing_note"] { border-left-color: #0891b2; }
.ward-card-live[data-type="observation"] { border-left-color: #7c3aed; }
.ward-card-live[data-type="drug_chart_entry"] { border-left-color: #d97706; }
.ward-card-uploaded[data-type="lab"] { border-left-color: #059669; }
.ward-card-uploaded[data-type="radiology"] { border-left-color: #d97706; }
.ward-card-uploaded[data-type="discharge"] { border-left-color: #dc2626; }
.ward-card-vitals { border-left-color: #0891b2; }
.ward-card-drug { border-left-color: #7c3aed; }
.ward-card-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
flex-wrap: wrap;
}
.ward-card-time {
margin-left: auto;
font-size: var(--text-xs);
color: var(--color-text-muted);
white-space: nowrap;
}
.ward-card-body {
padding: 8px 14px 10px;
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: var(--color-text);
white-space: pre-wrap;
word-break: break-word;
border-top: 1px solid #f0f4ff;
}
.ward-card-author {
padding: 6px 14px 8px;
font-size: var(--text-xs);
color: var(--color-text-muted);
border-top: 1px solid #f0f4ff;
}
/* ── Type badges (ward) ─────────────────────────────────────── */
.ward-type-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 50px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
background: #e5e7eb;
color: #374151;
letter-spacing: 0.02em;
}
.ward-type-badge.doctor_note { background:#dbeafe; color:#1e40af; }
.ward-type-badge.nursing_note { background:#cffafe; color:#155e75; }
.ward-type-badge.observation { background:#ede9fe; color:#5b21b6; }
.ward-type-badge.drug_chart_entry { background:#fef3c7; color:#92400e; }
.ward-type-badge.vital_signs { background:#cffafe; color:#155e75; }
.ward-type-badge.drug_chart { background:#ede9fe; color:#5b21b6; }
.ward-type-badge.lab { background:#d1fae5; color:#065f46; }
.ward-type-badge.radiology { background:#fef3c7; color:#92400e; }
.ward-type-badge.discharge { background:#fee2e2; color:#991b1b; }
.ward-type-badge.other { background:#f3f4f6; color:#374151; }
/* ── Draft badge ────────────────────────────────────────────── */
.ward-draft-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 50px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
background: #fffbe6;
color: #856404;
border: 1px solid #ffe58f;
letter-spacing: 0.02em;
}
/* ── Drug / vitals table inside card ────────────────────────── */
.ward-drug-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.ward-drug-table th {
background: #f5f8ff;
padding: 6px 12px;
text-align: left;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
border-bottom: 1px solid #e6eefc;
}
.ward-drug-table td {
padding: 7px 12px;
border-bottom: 1px solid #f0f4ff;
color: var(--color-text);
vertical-align: middle;
}
.ward-drug-table tr:last-child td { border-bottom: none; }
/* Administration status cells */
.admin-given {
display: inline-block;
padding: 2px 8px;
border-radius: 50px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
background: #d1fae5;
color: #065f46;
margin: 1px 2px;
}
.admin-pending {
display: inline-block;
padding: 2px 8px;
border-radius: 50px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
background: #f3f4f6;
color: #6b7280;
margin: 1px 2px;
}
.admin-na {
display: inline-block;
padding: 2px 8px;
border-radius: 50px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
background: #fee2e2;
color: #991b1b;
margin: 1px 2px;
}
/* ── New Note panel ─────────────────────────────────────────── */
.ward-note-panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 2px solid #e6eefc;
border-radius: 14px 14px 0 0;
box-shadow: 0 -4px 24px rgba(3,18,59,0.10);
padding: 16px 20px 24px;
z-index: 10;
animation: ward-panel-up 0.22s ease;
}
@keyframes ward-panel-up {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.ward-note-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.smrv-note-close {
background: none;
border: none;
font-size: 18px;
color: var(--color-text-muted);
cursor: pointer;
padding: 2px 6px;
line-height: 1;
}
.smrv-note-close:hover { color: var(--color-text); }
/* ── Empty / loading states ──────────────────────────────────── */
.ward-loading,
.ward-empty {
text-align: center;
padding: 40px 20px;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
/* ── Ward Round button (teal accent) ────────────────────────── */
#smrvWardRoundBtn {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
#smrvWardRoundBtn:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
}
/* ── Nurse role badge ───────────────────────────────────────── */
.smrv-role-nurse { background: #f0fdf4; color: #15803d; }
/* ── Mobile adjustments ─────────────────────────────────────── */
@media (max-width: 768px) {
.ward-round-overlay { top: 56px; }
.ward-header { padding: 10px 14px; gap: 8px; }
.ward-continuum { padding: 12px 14px 140px; }
.ward-patient-name { max-width: 160px; }
.ward-filter-tabs { padding: 0 10px; }
.ward-filter-tab { padding: 9px 10px; font-size: var(--text-xs); }
.ward-drug-table th,
.ward-drug-table td { padding: 5px 8px; }
}
/* ══════════════════════════════════════════════════════════════
WARD ROUND — COMPOSER BAR
══════════════════════════════════════════════════════════════ */
.ward-composer {
background: #fff;
border-top: 1px solid var(--color-border);
flex-shrink: 0;
z-index: 20;
transition: all 200ms ease;
}
/* ── Collapsed: two trigger buttons ─────────────────────────── */
.ward-composer-collapsed {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 12px 20px;
min-height: 60px;
}
/* ── Expanded layout ─────────────────────────────────────────── */
.ward-composer-expanded {
padding: 14px 20px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.ward-composer-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
/* ── Main textarea ───────────────────────────────────────────── */
.ward-composer-textarea {
width: 100%;
min-height: 120px;
max-height: 300px;
resize: vertical;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 12px;
font-size: 16px; /* 16px prevents iOS auto-zoom */
font-family: inherit;
line-height: var(--leading-relaxed);
color: var(--color-text);
background: #fff;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.ward-composer-textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(0,190,133,0.14);
}
/* ── Auto-save indicator ─────────────────────────────────────── */
.ward-autosave-indicator {
font-size: var(--text-xs);
color: var(--color-text-muted);
min-width: 120px;
}
/* ══════════════════════════════════════════════════════════════
RECORDING UI
══════════════════════════════════════════════════════════════ */
.ward-recording-ui {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: var(--radius-sm);
}
.recording-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #dc2626;
flex-shrink: 0;
animation: recordPulse 1s ease infinite;
}
@keyframes recordPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
/* ── Transcription review two-column grid ────────────────────── */
.ward-transcription-panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 600px) {
.ward-transcription-panel { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════
WARD MODALS (drug admin / add drug)
Position absolute inside the fixed overlay — appear over continuum.
══════════════════════════════════════════════════════════════ */
.ward-modal-overlay {
position: absolute;
inset: 0;
background: rgba(3,18,59,0.45);
z-index: 50;
display: flex;
align-items: flex-end; /* bottom-sheet on mobile */
justify-content: center;
padding: 0 0 0;
}
@media (min-width: 600px) {
.ward-modal-overlay {
align-items: center;
padding: 20px;
}
}
.ward-modal {
background: #fff;
border-radius: 14px 14px 0 0;
padding: 20px 20px 28px;
width: 100%;
max-width: 460px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 -4px 32px rgba(3,18,59,0.15);
display: flex;
flex-direction: column;
gap: 6px;
animation: ward-modal-up 0.2s ease;
}
@media (min-width: 600px) {
.ward-modal {
border-radius: 14px;
box-shadow: 0 8px 40px rgba(3,18,59,0.18);
}
}
@keyframes ward-modal-up {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.ward-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
/* Clickable pending admin cell */
.ward-admin-btn {
background: none;
border: 1px solid #d1d5db;
border-radius: 50px;
padding: 2px 8px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: #6b7280;
cursor: pointer;
transition: background 0.1s, border-color 0.1s;
}
.ward-admin-btn:hover {
background: #f3f4f6;
border-color: #9ca3af;
}
/* ══════════════════════════════════════════════════════════════
DRAFTS PANEL (slides up from bottom of overlay)
══════════════════════════════════════════════════════════════ */
.ward-drafts-panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 2px solid var(--color-border);
border-radius: 14px 14px 0 0;
box-shadow: 0 -4px 24px rgba(3,18,59,0.12);
padding: 16px 20px 24px;
z-index: 30;
max-height: 70vh;
overflow-y: auto;
animation: ward-panel-up 0.22s ease;
}
.ward-drafts-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.ward-drafts-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.ward-draft-item {
border: 1px solid #e6eefc;
border-radius: var(--radius-sm);
padding: 10px 12px;
background: #f8faff;
}
.ward-draft-item-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.ward-draft-item-preview {
font-size: var(--text-sm);
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 8px;
}
.ward-draft-item-actions {
display: flex;
gap: 8px;
}
/* Add medication button in continuum */
.ward-add-drug-bar {
display: flex;
justify-content: flex-end;
padding: 8px 14px 4px;
margin-bottom: 0;
}
/* ── Discontinued drugs section ─────────────────────────────── */
.ward-discontinued-wrapper {
padding: 0 14px 6px;
border-top: 1px solid #f0f4ff;
}
.ward-drug-toggle {
background: none;
border: none;
cursor: pointer;
color: var(--color-text-muted);
font-size: var(--text-sm);
padding: 8px 0;
text-align: left;
width: 100%;
transition: color 0.1s;
}
.ward-drug-toggle:hover { color: var(--color-text); }
.ward-discontinued-body {
border-top: 1px solid #f0f4ff;
margin-top: 4px;
}
/* Strikethrough on discontinued drug names handled inline with tag */
/* ── Transcription review textareas (Review state) ───────────── */
#smrvTranscriptStructured,
#smrvTranscriptRaw {
max-height: 200px;
overflow-y: auto;
resize: vertical;
}
/* ── Composer expanded transitions ───────────────────────────── */
#smrvComposerExpanded {
transition: all 200ms ease;
}
.ward-composer-expanded {
transition: all 200ms ease;
}
/* ══════════════════════════════════════════════════════════════
WARD ROUND — UPLOADED RECORD CONTENT STYLES
══════════════════════════════════════════════════════════════ */
.ward-card-content {
white-space: pre-wrap;
word-break: break-word;
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text);
margin-top: 10px;
}
.ward-card-content-mono {
white-space: pre-wrap;
word-break: break-word;
font-family: 'Courier New', Courier, monospace;
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: var(--color-text);
margin-top: 10px;
}
.ward-card-no-content {
color: var(--color-text-muted);
font-size: var(--text-sm);
font-style: italic;
padding: 8px 0;
display: flex;
align-items: center;
gap: 8px;
}
.ward-card-meta {
margin-top: 12px;
padding: 10px 14px 12px;
border-top: 1px solid var(--color-border);
font-size: var(--text-xs);
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.ward-view-record-link {
color: var(--color-primary);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-decoration: none;
margin-left: auto;
}
/* ── Login legal text ──────────────────────────────────────── */
.login-legal {
font-size: var(--text-xs);
color: var(--color-text-muted);
text-align: center;
margin-top: 12px;
}
.login-legal a {
color: var(--color-primary);
text-decoration: underline;
}
/* ── Sidebar footer with privacy link ─────────────────────── */
.sidebar-footer {
font-size: var(--text-xs);
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.sidebar-footer a {
color: var(--color-text-muted);
text-decoration: underline;
transition: color 150ms ease;
}
.sidebar-footer a:hover {
color: var(--color-primary);
}
/* ── Policy placeholder highlight (privacy.html) ──────────── */
.policy-placeholder {
background: #fef3c7;
color: #b45309;
padding: 1px 6px;
border-radius: 3px;
font-size: 0.9em;
font-style: italic;
}
.ward-view-record-link:hover { text-decoration: underline; }
/* ══════════════════════════════════════════════════════════════
PATIENT PROFILE HEADER ACTIONS
══════════════════════════════════════════════════════════════ */
.patient-header-actions {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
/* ══════════════════════════════════════════════════════════════
DRUG CHART OVERLAY
Slides up from bottom, same pattern as ward round overlay.
══════════════════════════════════════════════════════════════ */
.drug-chart-overlay {
position: fixed;
inset: 0;
top: 56px;
background: white;
z-index: 150;
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(100%);
transition: transform 300ms ease;
}
.drug-chart-overlay.open {
transform: translateY(0);
}
/* ── Header ─────────────────────────────────────────────────── */
.drug-chart-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
background: #fff;
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.drug-chart-title-wrap {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 0;
}
.drug-chart-patient-name {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 280px;
}
.drug-chart-label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
/* ── Scrollable body ─────────────────────────────────────────── */
.drug-chart-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 20px;
padding-bottom: 40px;
}
/* ── Drug cards ─────────────────────────────────────────────── */
.drug-card {
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius-sm);
padding: 16px;
margin-bottom: 12px;
background: white;
transition: box-shadow 150ms ease;
}
.drug-card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.drug-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.drug-card-name {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.drug-card-meta {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 4px 0 12px;
line-height: var(--leading-relaxed);
}
.drug-card-notes {
font-size: var(--text-sm);
color: var(--color-text-muted);
font-style: italic;
margin-bottom: 10px;
}
/* ── Admin section ──────────────────────────────────────────── */
.drug-admin-section {
border-top: 1px solid var(--color-border);
padding-top: 10px;
margin-top: 4px;
font-size: var(--text-sm);
}
.drug-admin-label {
font-weight: var(--weight-semibold);
font-size: var(--text-xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 6px;
}
.drug-admin-row {
display: flex;
align-items: center;
gap: 8px;
padding: 3px 0;
}
.drug-admin-period {
width: 80px;
color: var(--color-text-muted);
font-size: var(--text-xs);
flex-shrink: 0;
}
.drug-admin-given { color: #16a34a; font-weight: var(--weight-semibold); }
.drug-admin-mark { color: var(--color-primary); cursor: pointer; text-decoration: underline; font-size: var(--text-xs); }
.drug-admin-mark:hover { opacity: 0.8; }
/* ── Inline forms (mark-given / discontinue) ─────────────────── */
.drug-inline-form {
background: #f8faff;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 12px;
margin-top: 8px;
}
.drug-inline-form label {
display: block;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
margin-bottom: 4px;
}
.drug-inline-form input,
.drug-inline-form textarea,
.drug-inline-form select {
width: 100%;
padding: 6px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-family: inherit;
margin-bottom: 8px;
box-sizing: border-box;
}
.drug-inline-form-actions {
display: flex;
gap: 8px;
}
/* ── Discontinue button ─────────────────────────────────────── */
.drug-discontinue-btn {
background: none;
border: 1px solid #fca5a5;
color: #dc2626;
border-radius: var(--radius-sm);
padding: 3px 10px;
font-size: var(--text-xs);
cursor: pointer;
transition: background 150ms ease;
flex-shrink: 0;
}
.drug-discontinue-btn:hover {
background: #fee2e2;
}
/* ── Empty state ─────────────────────────────────────────────── */
.drug-empty-state {
text-align: center;
padding: 48px 24px;
color: var(--color-text-muted);
}
.drug-empty-icon { font-size: 40px; margin-bottom: 12px; }
.drug-empty-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); margin-bottom: 6px; }
/* ── Discontinued section toggle ────────────────────────────── */
.drug-section-toggle {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
color: var(--color-text);
padding: 14px 0;
border-top: 1px solid var(--color-border);
margin-top: 8px;
user-select: none;
background: none;
border-left: none;
border-right: none;
border-bottom: none;
width: 100%;
text-align: left;
}
/* ── Discontinued table ─────────────────────────────────────── */
.drug-discontinued-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
margin-top: 8px;
}
.drug-discontinued-table th {
text-align: left;
padding: 6px 10px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
border-bottom: 1px solid var(--color-border);
}
.drug-discontinued-table td {
padding: 8px 10px;
border-bottom: 1px solid #f0f4ff;
vertical-align: top;
}
.drug-discontinued-name {
text-decoration: line-through;
color: var(--color-text-muted);
}