/* NBC Practice Manager — component styles. Desktop-first clinical UI. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; font-size: 13px; } a { color: inherit; text-decoration: none; } .mono { font-family: var(--font-mono); } .muted { color: var(--ink-4); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: var(--track); border-radius: 6px; border: 3px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; } @keyframes nbcpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ===== top bar ===== */ .topbar { position: sticky; top: 0; z-index: 30; height: 56px; display: flex; align-items: center; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 1px 2px rgba(16, 36, 59, .03); } .brand { display: flex; align-items: center; gap: 11px; padding-right: 18px; margin-right: 8px; border-right: 1px solid var(--rule); } .brand img { height: 30px; width: auto; display: block; } .brand .b-title { font-size: 13px; font-weight: 600; color: var(--nbc-navy); letter-spacing: .01em; white-space: nowrap; line-height: 1.05; } .brand .b-sub { font-size: 10px; font-weight: 500; color: var(--ink-4); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; line-height: 1.05; } .mainnav { display: flex; align-items: stretch; gap: 1px; height: 100%; } .mainnav a { position: relative; height: 100%; display: flex; align-items: center; gap: 7px; padding: 0 15px; font-size: 13px; font-weight: 500; color: var(--ink-3); transition: color .12s, background .12s; } .mainnav a:hover { background: var(--hover); } .mainnav a.active { color: var(--nbc-navy); font-weight: 600; } .mainnav a.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2.5px; border-radius: 3px 3px 0 0; background: var(--nbc-blue); } .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--surface-3); color: var(--ink-4); font-size: 11px; font-weight: 600; } .mainnav a.active .nav-badge { background: var(--run-bg); color: var(--run-fg); } .nav-badge.err { background: var(--err-bg); color: var(--err-fg); } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .searchbox { display: flex; align-items: center; gap: 8px; width: 230px; height: 34px; padding: 0 12px; background: var(--surface-3); border: 1px solid var(--rule); border-radius: var(--r-ctl); } .searchbox input { border: none; background: transparent; outline: none; font-family: inherit; font-size: 12.5px; color: var(--ink); width: 100%; } .searchbox .ico { width: 13px; height: 13px; border: 1.6px solid var(--ink-5); border-radius: 50%; flex: none; position: relative; } .searchbox .ico::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 5px; height: 1.6px; background: var(--ink-5); transform: rotate(45deg); } .userchip { display: flex; align-items: center; gap: 9px; } .userchip .avatar { width: 31px; height: 31px; border-radius: 50%; background: var(--nbc-navy); color: var(--on-brand); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; } .userchip .u-name { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.18; } .userchip .u-role { font-size: 10.5px; color: var(--ink-4); line-height: 1.18; } /* ===== layout ===== */ .main { padding: 22px 24px 60px; max-width: 1340px; margin: 0 auto; } .page-head { margin-bottom: 15px; } .page-head h1 { font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 2px; } .page-head p { margin: 0; font-size: 12.5px; color: var(--ink-4); } /* ===== cards & tables ===== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; } /* `.card` clips to keep the table's rounded corners, which also clips any popover opened from a row. Opted in per card rather than changed globally, so only the queues that need an escaping popover give up corner clipping. */ .card.card-popover { overflow: visible; } .card-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--border-2); } .card-head h2 { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: .01em; } .card-body { padding: 14px 16px; } .card-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); } table.grid { width: 100%; border-collapse: collapse; font-size: 13px; } table.grid thead tr { background: var(--surface-2); text-align: left; } table.grid th { padding: 9px 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); } table.grid tbody tr { border-top: 1px solid var(--border-2); } table.grid td { padding: 11px 12px; color: var(--ink-2); vertical-align: top; } table.grid tr.clickable { cursor: pointer; } table.grid tr.clickable:hover { background: var(--hover); } /* Results card: the abnormal tally and the per-row marker are the whole point of the card — what was tested, and is any of it abnormal — so give abnormal rows a standing accent rather than relying on spotting a badge in a column of badges. */ .results-tally { padding: 12px 16px 0; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; } /* The model's stated reason for its proposal, under the clinical summary. Muted: it is context for the clinician's decision, not a finding competing with one. */ .triage-why { display: flex; gap: 8px; align-items: baseline; margin: 8px 0 12px; padding: 8px 10px; background: var(--surface-2); border-radius: var(--r-input); font-size: 12.5px; line-height: 1.45; color: var(--ink-3); } .triage-why .why-tag { flex: none; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); padding-top: 1px; } table.grid.results-grid tr.row-abnormal { background: var(--asap-bg); } table.grid.results-grid tr.row-abnormal td:first-child { box-shadow: inset 3px 0 0 var(--urg-asap); } .t-muted { font-size: 11.5px; color: var(--ink-4); } .chev { color: var(--ink-6); font-size: 18px; text-align: center; } /* ===== badges & pills ===== */ .urg { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; } .urg .dot { width: 7px; height: 7px; border-radius: 50%; } .urg.asap { background: var(--asap-bg); color: var(--asap-fg); } .urg.asap .dot { background: var(--urg-asap); } .urg.soon { background: var(--soon-bg); color: var(--soon-fg); } .urg.soon .dot { background: var(--urg-soon); } .urg.routine { background: var(--rout-bg); color: var(--rout-fg); } .urg.routine .dot { background: var(--urg-routine); } .urg.none { background: var(--surface-3); color: var(--ink-4); } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 5px; font-size: 11px; font-weight: 600; } .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Status pills: ok / info / warn / danger / neutral — the only five. Record status, never urgency (that is .urg, via _urgency_badge.html). */ .pill.ok { background: var(--ok-bg); color: var(--ok-fg); } .pill.info { background: var(--info-bg); color: var(--info-fg); } .pill.warn { background: var(--warn-bg); color: var(--warn-fg); } .pill.danger { background: var(--danger-bg); color: var(--err-fg); } .pill.neutral { background: var(--neutral-bg); color: var(--neutral-fg); } /* A date inside a status pill: present but subordinate to the status word, which is what the eye scans for. Slightly lighter weight and a touch of transparency rather than a second colour, so the pill still reads as one object. */ .pill .pill-date { font-weight: 500; opacity: .72; letter-spacing: .1px; } /* Inline "needs checking" marker on a details-form field label (validator flag). */ .field-flag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--flag-bg); color: var(--flag-fg); font-size: 10.5px; font-weight: 700; font-family: var(--font-mono); letter-spacing: .02em; vertical-align: middle; text-transform: uppercase; cursor: help; } /* ===== buttons ===== */ .btn { font-family: inherit; cursor: pointer; border-radius: var(--r-ctl); font-size: 13px; font-weight: 600; padding: 10px 20px; border: none; transition: background .12s, color .12s, border-color .12s; } .btn-primary { background: var(--nbc-action); color: var(--on-brand); } .btn-primary:not(:disabled):hover { background: var(--nbc-action-hover); } .btn-secondary { background: var(--surface); color: var(--nbc-navy); border: 1px solid var(--border); font-weight: 500; } .btn-secondary:not(:disabled):hover { background: var(--selected); } .btn-danger { background: var(--surface); color: var(--danger-fg); border: 1px solid var(--danger-border); font-weight: 500; } .btn-danger:not(:disabled):hover { background: var(--danger-bg-hover); border-color: var(--danger-border-hover); } /* A gated control must LOOK gated: without this a disabled button keeps its full brand colour and pointer cursor, so the click is silently ignored rather than loudly refused — worse than the 409 the status gating replaced. */ .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-sm { font-size: 11.5px; font-weight: 500; padding: 5px 11px; border-radius: var(--r-input); } .btn-xs { font-size: 11px; font-weight: 500; padding: 5px 10px; border-radius: 6px; } .btn-link { background: transparent; border: none; cursor: pointer; font-family: inherit; color: var(--ink-4); padding: 0; } .btn-link:hover { color: var(--nbc-navy); } /* ===== forms ===== */ .lbl { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 5px; } .sel, select.sel { width: 100%; font-family: inherit; font-size: 13px; color: var(--ink); padding: 8px 32px 8px 11px; border: 1px solid var(--border); border-radius: var(--r-input); background-color: var(--surface); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238593A8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; } .sel:hover, select.sel:hover { border-color: var(--nbc-blue-100); } .sel:focus, select.sel:focus { outline: none; border-color: var(--nbc-action); box-shadow: var(--focus-ring); } .sel-inline { width: auto; font-size: 12.5px; padding: 7px 28px 7px 11px; background-position: right 9px center; } /* Form controls. `.input` and `.textarea` share `.sel`'s box so every field in the app is the same height, border and focus ring. New forms use these; the scoped rules below (.details-form, #feedback-form, .grid .txt) are the older copies and migrate screen by screen. */ .input, .textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--fs-base); color: var(--ink); padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-input); background: var(--surface); transition: border-color .12s ease, box-shadow .12s ease; } .input:hover, .textarea:hover { border-color: var(--nbc-blue-100); } .input:focus, .textarea:focus { outline: none; border-color: var(--nbc-action); box-shadow: var(--focus-ring); } .textarea { min-height: 72px; resize: vertical; line-height: 1.5; } .input-sm { padding: 5px 9px; font-size: var(--fs-md); } .field-error { color: var(--danger-fg); font-size: 12px; margin: 4px 0 8px; } .details-form input, .details-form select, .details-form textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-input); background: var(--surface); color: var(--ink); } .details-form textarea { min-height: 90px; resize: vertical; line-height: 1.5; } .details-form .lbl { margin-top: 2px; } /* Beta feedback capture: give the HTMX form fields + dashboard note input the same look as .details-form inputs (they live outside a .details-form wrapper). */ #feedback-form .txt, .grid .txt { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-input); background: var(--surface); color: var(--ink); } #feedback-form textarea.txt { min-height: 80px; resize: vertical; line-height: 1.5; } #feedback-form .txt:focus, .grid .txt:focus { outline: none; border-color: var(--nbc-action); box-shadow: var(--focus-ring); } #feedback-form .danger { color: var(--danger-fg); font-size: 12px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--nbc-blue); cursor: pointer; } /* ===== settings two-pane rail ===== */ .settings-shell { display: grid; grid-template-columns: 224px 1fr; gap: 18px; align-items: start; } .settings-rail { position: sticky; top: 72px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 7px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 2px; } .settings-rail a { position: relative; display: block; padding: 9px 12px 9px 15px; border-radius: 8px; } .settings-rail a:hover { background: var(--hover); } .settings-rail a .r-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); } .settings-rail a .r-desc { display: block; font-size: 11px; color: var(--ink-5); margin-top: 1px; } .settings-rail a.active { background: var(--selected); } .settings-rail a.active .r-label { color: var(--nbc-navy); font-weight: 600; } .settings-rail a.active::before { content: ""; position: absolute; left: 5px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--nbc-action); } .settings-panel { display: flex; flex-direction: column; gap: 14px; } /* ===== review list / detail ===== */ /* The way out of a patient file. It was a bare chevron at 12.5px in the faintest ink on the palette, sitting in a banner full of louder things — easy to miss and a small target. Now a bordered control that names its destination. The margin-bottom went with it: this lives in a flex row, where it only pushed the link out of vertical alignment with the patient name beside it. */ .backlink { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 6px 11px 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); white-space: nowrap; } .backlink:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-6); } .backlink:focus-visible { outline: 2px solid var(--nbc-action); outline-offset: 2px; } .backlink .chev { font-size: 17px; line-height: 1; margin-top: -2px; } .banner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 18px; margin-bottom: 13px; } .banner .pt-avatar { width: 46px; height: 46px; border-radius: 11px; background: var(--selected); color: var(--nbc-navy); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; flex: none; } .banner h1 { font-size: 20px; font-weight: 600; color: var(--ink); margin: 0; } .banner .id-chip { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); background: var(--surface-3); padding: 2px 8px; border-radius: 5px; } .banner .meta { display: flex; gap: 16px; margin-top: 5px; font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap; } .banner .meta .k { color: var(--ink-5); } .alert { background: var(--alert-bg); border: 1px solid var(--alert-border); border-radius: 10px; padding: 11px 15px; display: flex; align-items: center; gap: 12px; margin-bottom: 13px; } .alert .mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--urg-soon); color: var(--on-brand); font-size: 13px; font-weight: 700; font-family: var(--font-mono); flex: none; } .alert .txt { font-size: 12.5px; color: var(--alert-fg); } .alert .txt strong { color: var(--alert-strong); } .detail-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; align-items: start; } /* source PDF card; sized by its .review-shell column on the review screen */ .pdf-card { display: flex; flex-direction: column; flex: 1; min-height: 0; } .pdf-toolbar { flex: none; height: 46px; padding: 0 14px; display: flex; align-items: center; gap: 11px; background: var(--surface-3); border-bottom: 1px solid var(--rule); } .pdf-icon { width: 14px; height: 16px; border-radius: 2px; background: var(--ink-5); display: inline-block; flex: none; } .pdf-filename { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); } .pdf-onprem { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ok-fg); cursor: help; } .pdf-onprem .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--urg-routine); } .pdf-toolbar-spacer { flex: 1; } .pdf-zoom { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); } .pdf-zoom-btn { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; line-height: 1; font-family: inherit; } .pdf-zoom-btn:hover { background: var(--selected); } .pdf-toolbar-divider { width: 1px; height: 20px; background: var(--rule); } .pdf-surface { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: flex; justify-content: center; background: var(--surface-2); } .pdf-frame-wrap { width: 100%; height: 100%; flex: none; transition: width .15s ease; } .source-frame { width: 100%; height: 100%; border: 1px solid var(--border); border-radius: 8px; display: block; } .source-image { width: 100%; height: auto; display: block; } .col { display: flex; flex-direction: column; gap: 14px; } .field { display: grid; grid-template-columns: 148px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--surface-3); align-items: baseline; } .field:last-child { border-bottom: none; } .field .f-label { font-size: 11.5px; color: var(--ink-4); font-weight: 500; display: flex; align-items: center; gap: 6px; } .field .f-value { font-size: 13px; color: var(--ink); } .field .f-value.flagged { background: var(--alert-bg); padding: 3px 8px; border-radius: 6px; } .details-form .field { align-items: center; } .details-form .field .f-value input, .details-form .field .f-value select, .details-form .field .f-value textarea { margin-bottom: 0; } /* triage panel */ .triage-card { border-color: var(--info-border); } .triage-card .card-head { background: var(--info-tint); border-bottom: 1px solid var(--info-rule); padding: 12px 16px; } .triage-card .card-head h2 { color: var(--nbc-navy); display: flex; align-items: center; gap: 7px; } .triage-card .card-head h2 .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nbc-blue); } .proposed { font-size: 11.5px; color: var(--ink-4); margin-bottom: 11px; line-height: 1.5; } .proposed strong { color: var(--ink-3); } .derived { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-radius: var(--r-ctl); margin-bottom: 13px; } .derived .d-lab { font-size: 12px; font-weight: 500; } .derived .d-val { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; } .derived .d-val .dot { width: 9px; height: 9px; border-radius: 50%; } .derived.asap { background: var(--asap-bg); color: var(--asap-fg); } .derived.asap .dot { background: var(--urg-asap); } .derived.soon { background: var(--soon-bg); color: var(--soon-fg); } .derived.soon .dot { background: var(--urg-soon); } .derived.routine { background: var(--rout-bg); color: var(--rout-fg); } .derived.routine .dot { background: var(--urg-routine); } .derived.none { background: var(--surface-3); color: var(--ink-3); } .preplist { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; } .preplist label { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; } /* match panel */ .sub-label { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-5); margin-bottom: 9px; } .match-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--border-2); border-radius: var(--r-ctl); margin-bottom: 9px; } .match-row.candidate { border-style: dashed; border-color: var(--border); } .match-row .m-title { font-size: 12.5px; color: var(--ink); font-weight: 500; } .match-row .m-sub { font-size: 11px; color: var(--ink-4); font-family: var(--font-mono); } /* ===== stat cards ===== */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 15px; } /* The booking queue carries a fifth card (attempts). Opted in per screen rather than making the default auto-fit, so the existing four-card rows keep their exact proportions. The narrow-screen rule below collapses both to two. */ .stat-row.cols-5 { grid-template-columns: repeat(5, 1fr); } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 13px 15px; box-shadow: 0 1px 3px rgba(16, 36, 59, .04); } .stat .n { font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1; } .stat .l { font-size: 11.5px; color: var(--ink-4); margin-top: 4px; } .stat.b-asap { border-left: 3px solid var(--urg-asap); } .stat.b-soon { border-left: 3px solid var(--urg-soon); } .stat.b-routine { border-left: 3px solid var(--urg-routine); } .stat.danger { background: var(--danger-tint); border: 1px solid var(--danger-line); } .stat.danger .n { color: var(--danger-fg); } .stat.danger .l { color: var(--danger-fg-soft); } .stat .n.ok { color: var(--ok-fg); } .stat .n.run { color: var(--nbc-action); } .stat .n.pend { color: var(--ink-4); } .filters { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; flex-wrap: wrap; } .filters .f-lab { font-size: 11.5px; color: var(--ink-4); font-weight: 500; } .filters .f-count { font-size: 11.5px; color: var(--ink-6); margin-left: auto; } .triage-filters { align-items: center; flex-wrap: wrap; padding: 9px 11px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); } /* The filter panel collapses. Closed, the summary and the actions share one row; open, the field grid takes a full row of its own and the actions wrap beneath it, so the six selects never have to squeeze in beside anything. */ .filter-disclosure { flex: 0 1 auto; min-width: 0; } .filter-disclosure[open] { flex: 1 1 100%; } .filter-summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2); list-style: none; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-3); user-select: none; } .filter-summary::-webkit-details-marker { display: none; } .filter-summary:hover { border-color: var(--ink-6); color: var(--ink); } .filter-disclosure:focus-within .filter-summary { outline: 2px solid var(--nbc-action); outline-offset: 2px; } .filter-summary .fs-label::before { content: "▸"; display: inline-block; margin-right: 6px; font-size: 10px; color: var(--ink-4); transition: transform .12s ease; } .filter-disclosure[open] .filter-summary .fs-label::before { transform: rotate(90deg); } .filter-disclosure[open] .filter-fields { margin-top: 9px; } .filter-fields { display: grid; grid-template-columns: minmax(80px, .7fr) minmax(135px, 1.3fr) minmax(100px, .9fr) minmax(100px, .9fr) minmax(108px, .95fr) minmax(104px, .9fr); gap: 8px; flex: 1 1 auto; min-width: 0; } .filter-field { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .filter-label { color: var(--ink-4); font-size: 10px; font-weight: 600; letter-spacing: .04em; line-height: 1; text-transform: uppercase; } .filter-field .sel { width: 100%; min-width: 0; height: 31px; padding: 4px 25px 4px 8px; font-size: 11.5px; } .filter-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; min-height: 31px; margin-left: auto; } .filters .filter-actions .f-count { margin-left: 0; white-space: nowrap; } /* Reject-with-reason popover (review footer) */ .reject-pop { position: relative; display: inline-block; } .reject-pop > summary { list-style: none; cursor: pointer; } .reject-pop > summary::-webkit-details-marker { display: none; } .reject-pop-body { position: absolute; bottom: calc(100% + 6px); right: 0; width: 320px; padding: 12px; z-index: 40; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: 0 10px 28px rgba(16, 36, 59, .16); } .reject-pop-body .lbl { display: block; margin-bottom: 6px; } .reject-pop-body .sel { width: 100%; margin-bottom: 8px; } .reject-pop-body textarea.sel { resize: vertical; min-height: 44px; } .reject-pop-actions { display: flex; justify-content: flex-end; } .filter-reset { color: var(--nbc-action); font-size: 11.5px; font-weight: 500; white-space: nowrap; } /* Booking queue. The row-level popover reuses the reject popover's mechanics (a
, so it works with no JS) but opens DOWNWARD and is wider: it holds three separate forms — book, log a call, close — where the reject one holds a single field, and a table row has space below it that a pinned footer does not. */ .popover { position: relative; display: inline-block; } .popover > summary { list-style: none; cursor: pointer; } .popover > summary::-webkit-details-marker { display: none; } .popover-panel { position: absolute; top: calc(100% + 6px); right: 0; width: 300px; padding: 12px; z-index: 40; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: 0 10px 28px rgba(16, 36, 59, .16); } .popover-panel .lbl { display: block; margin-bottom: 4px; } .popover-panel input, .popover-panel .sel { width: 100%; margin-bottom: 8px; } .col-actions { text-align: right; white-space: nowrap; } /* Booking rows are read top-down against a phone, so the wait column earns emphasis when a patient is well past target rather than a uniform grey. */ .t-danger { color: var(--danger-fg); font-weight: 600; } .booking-grid td { vertical-align: top; } /* A phone number is read aloud digit by digit; wrapping it mid-number is how you misdial. */ .booking-grid .col-phone { font-size: 12px; white-space: nowrap; } .booking-grid .wait-days { font-variant-numeric: tabular-nums; } /* category-rule settings matrix */ .settings-intro { max-width: 780px; margin: -6px 0 16px; color: var(--ink-3); font-size: 12.5px; } .rule-card { margin-bottom: 16px; } .rule-card .card-head { display: flex; align-items: center; justify-content: space-between; } .rule-card-body { padding: 6px 16px 16px; } .rule-matrix th[scope="row"] { width: 15%; color: var(--ink); font-weight: 600; } .rule-matrix td:nth-child(2) { width: 16%; } .rule-matrix td:nth-child(3) { width: 22%; } .rule-matrix .rule-missing { background: var(--warn-tint); } .rule-matrix .rule-missing th[scope="row"] { border-left: 3px solid var(--urg-soon); } .rule-matrix .rule-configured th[scope="row"] { border-left: 3px solid var(--urg-routine); } .rule-urgency { width: 100%; min-width: 145px; } .rule-flags { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; } .rule-flags label { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); cursor: pointer; font-size: 12px; white-space: nowrap; } .rule-save { display: flex; justify-content: flex-end; margin-top: 10px; } /* triage dashboard rows */ tr.overdue { background: var(--danger-row); } /* ===== pipeline ===== */ .stages { display: flex; align-items: center; gap: 4px; } .stages .node { width: 9px; height: 9px; border-radius: 50%; } .stages .seg { width: 14px; height: 2px; } .stages .node.done, .stages .seg.done { background: var(--urg-routine); } .stages .node.run { background: var(--nbc-action); } .stages .node.err { background: var(--urg-asap); } .stages .node.pend { background: var(--track); } .stages .node.off, .stages .seg.off, .stages .node.run ~ .seg, .stages .seg.pend, .stages .seg.err, .stages .seg.run { background: var(--rule); } .stages .seg.done { background: var(--urg-routine); } .stages .stage-name { margin-left: 7px; font-size: 11px; font-family: var(--font-mono); color: var(--ink-4); } .job-msg { font-size: 11px; color: var(--danger-fg); margin-top: 2px; } /* The reason a job was given up on. Deliberately NOT danger-coloured: an abandoned job is settled work, and painting it red would restore the alarm the status exists to remove. */ .job-note { font-size: 11px; color: var(--ink-4); margin-top: 2px; } tr.job-error { background: var(--danger-row); } tr.job-abandoned { background: var(--surface-2); color: var(--ink-4); } /* Abandoning asks for a reason, so the control is a disclosure rather than a bare button. The form flows IN the cell rather than floating over it: `.card` sets `overflow: hidden` (it clips the table's square corners to the card radius), so an absolutely-positioned panel was cut off whenever the list was short enough that there was no card left below the row -- which is exactly the state the page is in once it is doing its job. Growing the row instead cannot be clipped, needs no stacking context, and works at any list length. */ .job-abandon { display: inline-block; } /* inline-block so the summary hugs its label: once the panel below it is open the details box is as wide as the panel, and a block-level summary stretched the button across all of it. */ .job-abandon > summary { display: inline-block; list-style: none; cursor: pointer; } .job-abandon > summary::-webkit-details-marker { display: none; } .job-abandon-form { width: 260px; margin: 8px 0 2px auto; padding: 12px; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; } .job-abandon-form label { display: block; font-size: 11.5px; font-weight: 600; margin-bottom: 5px; } .job-abandon-form textarea { width: 100%; margin-bottom: 8px; } .is-running { animation: nbcpulse 1.1s infinite; } /* ===== style guide ===== */ .ds-section { margin-bottom: 14px; } .ds-section h2 { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 14px; } .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .swatch { border: 1px solid var(--border-2); border-radius: 9px; overflow: hidden; } .swatch .sw-fill { height: 54px; border-bottom: 1px solid rgba(0, 0, 0, .05); } .swatch .meta { padding: 8px 10px; } .swatch .s-hex { font-size: 10.5px; color: var(--ink-4); font-family: var(--font-mono); } .swatch .s-var { font-size: 10px; color: var(--ink-6); font-family: var(--font-mono); margin-top: 1px; } .brand-marks { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; } .brand-mark { border: 1px solid var(--border-2); border-radius: 9px; padding: 16px 22px; background: var(--surface); } .brand-mark.navy { border-color: var(--nbc-navy); background: var(--nbc-navy); } .ds-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 1000px) { .detail-grid, .ds-cols, .settings-shell { grid-template-columns: 1fr; } .settings-rail { position: static; flex-direction: row; overflow-x: auto; } .stat-row { grid-template-columns: repeat(2, 1fr); } .triage-filters { align-items: end; flex-wrap: wrap; } .filter-fields { flex-basis: 100%; grid-template-columns: repeat(3, minmax(120px, 1fr)); } .filter-actions { width: 100%; justify-content: flex-end; } } /* ---- single-screen review workspace (review_detail) ---- */ body.review-screen { height: 100vh; overflow: hidden; display: flex; flex-direction: column; } body.review-screen .main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 24px 14px; width: 100%; max-width: 1600px; box-sizing: border-box; } /* feedback form/success cards load into #feedback-slot above .main; float them so they can't push the fixed-height workspace off-screen */ body.review-screen #feedback-slot > .card { position: fixed; top: 70px; right: 24px; width: 430px; z-index: 60; box-shadow: var(--shadow-bar); } .banner-compact { padding: 9px 14px; gap: 12px; margin-bottom: 10px; } .banner-compact .pt-avatar { width: 34px; height: 34px; font-size: 13px; border-radius: 8px; } .banner-compact h1 { font-size: 16px; } .banner-compact .meta { margin-top: 0; } .banner-compact .ban-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; flex-wrap: wrap; } .patient-workflow-status { display: flex; align-items: center; gap: 7px; flex: none; } .booking-navigation { display: flex; align-items: center; gap: 6px; flex: none; } .booking-navigation-count { color: var(--ink-4); font-family: var(--font-mono); font-size: 11px; white-space: nowrap; } .booking-navigation .is-disabled { cursor: default; opacity: .45; } .booking-navigation-persistent { margin-left: auto; } .alert-strip { padding: 6px 14px; margin-bottom: 10px; border-radius: 8px; } .alert-strip .mark { width: 18px; height: 18px; font-size: 11px; } .alert-strip .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: stretch; } .review-shell .col { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .pdf-stagebar { display: flex; gap: 7px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10.5px; padding: 8px 12px; border-top: 1px solid var(--border-2); } .pdf-stagebar span { background: var(--ok-bg); color: var(--ok-fg); padding: 2px 7px; border-radius: 5px; } .workspace-card { flex: 1; min-height: 0; display: flex; flex-direction: column; } .tab-strip { display: flex; border-bottom: 1px solid var(--border-2); background: var(--surface-2); } .tab-strip .tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 11px 18px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-4); cursor: pointer; display: flex; align-items: center; gap: 7px; } .tab-strip .tab.active { color: var(--nbc-navy); border-bottom-color: var(--nbc-action); background: var(--surface); } .tab-state { font-size: 11px; color: var(--ink-5); } .tab-state.done { color: var(--ok-fg); } .tab-body { flex: 1; min-height: 0; overflow-y: auto; } .tab-panel { display: none; } .tab-panel.active { display: block; } /* partials keep their .card wrappers for reuse; flatten the chrome inside tabs. !important: _results_card.html sets an inline margin-top that must be beaten. */ .tab-panel > .card { border: 0; box-shadow: none; border-radius: 0; margin: 0 !important; } .tab-panel > .card + .card { border-top: 1px solid var(--border-2); } .workspace-footer { border-top: 1px solid var(--border-2); padding: 10px 14px; display: flex; align-items: center; gap: 9px; background: var(--surface); } .workspace-footer .footer-group { display: none; align-items: center; gap: 9px; flex: 1; min-width: 0; flex-wrap: wrap; } .workspace-footer .footer-group.active { display: flex; } .footer-accepted { color: var(--ok-fg); font-size: 13px; font-weight: 600; white-space: nowrap; } /* Booking is a third review workspace tab so an inbound patient call can be handled from search without returning to the call list. */ .booking-body { display: flex; flex-direction: column; gap: 16px; } .booking-workflow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .booking-stage { min-width: 0; padding: 13px; border: 1px solid var(--border-2); border-radius: 9px; background: var(--surface-2); } .booking-stage .sub-label { margin-bottom: 8px; } .booking-facts { margin: 12px 0 0; display: flex; flex-direction: column; gap: 7px; } .booking-facts div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline; } .booking-facts dt { color: var(--ink-4); font-size: 11.5px; } .booking-facts dd { margin: 0; color: var(--ink-2); font-size: 12.5px; overflow-wrap: anywhere; } .booking-help { margin: 10px 0 0; } .booking-history { border-top: 1px solid var(--border-2); padding-top: 15px; } .booking-attempt { display: grid; grid-template-columns: 112px 130px auto 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--surface-3); font-size: 12px; } .booking-attempt:last-child { border-bottom: 0; } .booking-attempt-date { color: var(--ink-4); font-family: var(--font-mono); font-size: 11px; } .booking-action { border-top: 1px solid var(--border-2); padding-top: 15px; } .booking-action-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 11px; } .booking-action .booking-form { max-width: 520px; } .booking-action .booking-form-actions, .booking-form-actions { margin-top: 8px; display: flex; gap: 8px; align-items: center; } .booking-grid .popover-panel { width: min(360px, calc(100vw - 32px)); } .booking-grid .popover-panel, .booking-grid .popover-panel * { overflow-wrap: anywhere; } .booking-attempt-warning { margin: 2px 0 6px; font-size: 11.5px; } .booking-blocked { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-fg); } /* tighter details rows so 11 fields fit the vertical budget */ .review-shell .details-form .field { padding: 6px 0; } /* narrow viewports: single column, page scrolls normally */ @media (max-width: 1000px) { .review-shell { grid-template-columns: 1fr; } .review-shell .pdf-card { min-height: 480px; } .booking-workflow-grid { grid-template-columns: 1fr; } .booking-attempt { grid-template-columns: 1fr; gap: 3px; } body.review-screen { height: auto; overflow: auto; display: block; } } /* ---- hold resolution (update_resolve) ---- */ /* Reuses the review screen's shell — source document left, decision and its evidence right, actions pinned — so the two screens read the same way. The difference is that the left card holds BOTH source documents, tab-switched, which keeps each one at full pane width. */ body.compare-screen { height: 100vh; overflow: hidden; display: flex; flex-direction: column; } body.compare-screen .main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 24px 14px; width: 100%; max-width: 1600px; box-sizing: border-box; } body.compare-screen #feedback-slot > .card { position: fixed; top: 70px; right: 24px; width: 430px; z-index: 60; box-shadow: var(--shadow-bar); } /* left card: one document at a time */ .doc-card .tab-strip .tab-meta { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--ink-4); } .doc-card .tab-strip .tab.active .tab-meta { color: var(--ink-3); } .doc-body { flex: 1; min-height: 0; display: flex; } .doc-panel { display: none; flex: 1; min-width: 0; flex-direction: column; } .doc-panel.active { display: flex; } .doc-panel .pdf-surface { flex: 1; min-height: 0; } .pane-empty { margin: auto; padding: 28px; text-align: center; color: var(--ink-4); font-size: 13px; } /* right card: the verdict, then the deltas that support it */ .compare-body { padding: 14px 16px; } .compare-section { margin-top: 16px; } .compare-note { font-size: 12.5px; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 10px 13px; line-height: 1.55; } .compare-note strong { color: var(--ink-2); } /* A hold nobody judged must not look like a considered opinion. */ .compare-note.note-warn { background: var(--warn-bg); border-color: var(--urg-soon); color: var(--warn-fg); } .compare-note.note-warn strong { color: var(--warn-fg); } .compare-section .sub-label { display: flex; align-items: center; gap: 8px; } .compare-section .ev-count { font-weight: 600; letter-spacing: 0; font-size: 10.5px; color: var(--ink-4); background: var(--surface-3); border-radius: 5px; padding: 1px 7px; } /* narrow viewports: single column, page scrolls normally */ @media (max-width: 1000px) { body.compare-screen { height: auto; overflow: auto; display: block; } .review-shell .doc-card { min-height: 480px; } } /* ---- return-to-referrer letter workflow ---- */ .referrer-replies-grid .col-actions { min-width: 150px; } .referrer-replies-grid .col-actions > * { margin: 3px 0; } .referrer-letter-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; } .referrer-letter-head h1 { margin-top: 8px; } .referrer-letter-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; } .referrer-letter-compose, .referrer-letter-context { padding: 18px; } .letter-template-picker { margin-bottom: 16px; } .letter-template-picker .sel { width: min(100%, 430px); display: block; margin-top: 5px; } .letter-alert { margin: 0 0 14px; } .letter-body { width: 100%; min-height: 430px; resize: vertical; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font: 13.5px/1.6 var(--font-sans); } .letter-body:focus { outline: none; border-color: var(--nbc-action); box-shadow: var(--focus-ring); } .letter-actions { display: flex; gap: 12px; align-items: center; margin-top: 12px; } .copy-status { color: var(--ok-fg); font-size: 12.5px; } .letter-hint { font-size: 11.5px; margin: 8px 0 0; } .referrer-letter-context h2 { margin: 0 0 18px; font-size: 16px; } .letter-context-row { padding: 12px 0; border-top: 1px solid var(--border-2); display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; line-height: 1.5; } .copy-email-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; } .referrer-letter-context form { margin-top: 18px; } @media (max-width: 900px) { .referrer-letter-layout { grid-template-columns: 1fr; } } /* --- review screen: status banner (non-NEEDS_REVIEW referrals) --------------- */ .status-banner { display: flex; align-items: flex-start; gap: 14px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; padding: 9px 14px; margin-bottom: 10px; font-size: 12.5px; color: var(--ink-3); } .status-banner strong { color: var(--ink-2); } .status-banner .sb-main { flex: 1; min-width: 0; } .status-banner .sb-sub { margin-top: 4px; font-size: 12px; } .status-banner .sb-sub .k { color: var(--ink-5); } .status-banner > a { flex: none; } .status-banner.warn { background: var(--warn-bg); border-color: var(--urg-soon); color: var(--warn-fg); } .status-banner.warn strong, .status-banner.warn .sb-sub .k { color: var(--warn-fg); } .purpose-banner { position: relative; display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; padding: 9px 14px; margin-bottom: 10px; font-size: 12.5px; color: var(--ink-3); } .purpose-banner strong { color: var(--ink-2); } .purpose-banner .sb-main { flex: 1; min-width: 0; } .purpose-banner .sb-sub { display: block; } .purpose-banner.warn { background: var(--warn-bg); border-color: var(--urg-soon); color: var(--warn-fg); } .purpose-banner.warn strong { color: var(--warn-fg); } .purpose-pop { position: relative; flex: none; } .purpose-pop > summary { list-style: none; cursor: pointer; } .purpose-pop > summary::-webkit-details-marker { display: none; } .purpose-form { position: absolute; z-index: 50; right: 0; top: calc(100% + 6px); width: 360px; padding: 13px; background: var(--surface); color: var(--ink); box-shadow: 0 10px 28px rgba(16, 36, 59, .16); } .purpose-form .lbl { display: block; margin: 7px 0 4px; } .purpose-form .sel { width: 100%; } .purpose-form textarea.sel { resize: vertical; min-height: 50px; } .purpose-form-row { display: grid; grid-template-columns: 1fr 145px; gap: 8px; margin: 8px 0; } .purpose-form-row label { font-size: 11.5px; color: var(--ink-3); } .correspondence-grid td:last-child { min-width: 210px; } .correspondence-grid .purpose-pop { display: inline-block; } /* ====================================================================== Shared components (UI consistency spec 2026-09-24, phase 2). Each has a partial in referrals/templates/referrals/ui/ and a live example on /style-guide/. Reach for these before writing new markup. ====================================================================== */ /* page head with an actions slot (Export CSV, Check email, ...) */ .page-head.has-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); } .page-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; } /* view tabs: switch between views of ONE queue (Awaiting / Accepted / All). Not navigation between screens — that is the top bar. */ .view-tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: var(--s-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-ctl); } .view-tab { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 6px; font-size: var(--fs-md); font-weight: 500; color: var(--ink-3); white-space: nowrap; } .view-tab:hover { background: var(--hover); color: var(--ink); } .view-tab:focus-visible { outline: 2px solid var(--nbc-action); outline-offset: 1px; } .view-tab.active { background: var(--nbc-navy); color: var(--on-brand); font-weight: 600; } .view-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 17px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--ink-4); font-variant-numeric: tabular-nums; } .view-tab.active .view-tab-count { background: rgba(255, 255, 255, .18); color: var(--on-brand); } .view-tab-count.err { background: var(--err-bg); color: var(--err-fg); } /* row chips: a short flag on a table row ("Manual entry needed", "Possible update", "no phone"). Status of the whole record is a .pill, not a chip. */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.5; } .chip.warn { background: var(--warn-bg); color: var(--warn-fg); } .chip.danger { background: var(--danger-bg); color: var(--err-fg); } .chip.info { background: var(--info-bg); color: var(--info-fg); } .chip.neutral { background: var(--neutral-bg); color: var(--neutral-fg); } .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } /* patient cell: name link, DOB, optional R-id, then row chips */ .pc-name { font-weight: 600; color: var(--ink); } a.pc-name:hover { color: var(--nbc-action); text-decoration: underline; text-underline-offset: 2px; } .pc-meta { margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .pc-missing { font-family: var(--font-sans); color: var(--danger-fg); font-weight: 600; } /* waiting cell: days is the scannable number, the start date sits under it */ .wait-days { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink-2); } .wait-days.over { color: var(--danger-fg); font-weight: 600; } .wait-since { font-size: var(--fs-sm); color: var(--ink-4); } /* rows that open a record: the name is still a real link (keyboard, middle- click); static/js/ui.js makes the rest of the row clickable too. */ tr[data-href] { cursor: pointer; } tr[data-href]:hover { background: var(--hover); } tr.empty-row td { padding: 28px; text-align: center; color: var(--ink-4); } /* notice: one box for every "read this before you act" message. info (context), warn (check before relying on it), danger (blocked/failed). */ .notice { display: flex; align-items: flex-start; gap: var(--s-3); padding: 11px 15px; margin-bottom: var(--s-3); border: 1px solid; border-radius: 10px; font-size: var(--fs-md); line-height: 1.5; } .notice-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--on-brand); margin-top: 1px; } .notice-body { flex: 1; min-width: 0; } .notice-title { font-weight: 600; } .notice-action { flex: none; align-self: center; } .notice.info { background: var(--info-tint); border-color: var(--info-border); color: var(--ink-2); } .notice.info .notice-mark { background: var(--nbc-action); } .notice.warn { background: var(--alert-bg); border-color: var(--alert-border); color: var(--alert-fg); } .notice.warn .notice-mark { background: var(--urg-soon); } .notice.warn .notice-title { color: var(--alert-strong); } .notice.danger { background: var(--danger-tint); border-color: var(--danger-line); color: var(--err-fg); } .notice.danger .notice-mark { background: var(--urg-asap); } .notice.compact { padding: 6px 12px; margin-bottom: var(--s-2); border-radius: 8px; align-items: center; } .notice.compact .notice-mark { width: 17px; height: 17px; font-size: 11px; margin-top: 0; } /* popover modifiers: .popover opens down-right by default */ .popover.up .popover-panel { top: auto; bottom: calc(100% + 6px); } .popover.left .popover-panel { right: auto; left: 0; } .popover-panel.wide { width: 360px; } /* menu: a
list of actions (Admin, More, split-button variants). Works with no JS; items are links or form buttons. */ .menu { position: relative; display: inline-block; } .menu > summary { list-style: none; cursor: pointer; } .menu > summary::-webkit-details-marker { display: none; } .menu > summary .caret { font-size: 12px; margin-left: 5px; opacity: .8; line-height: 1; } .menu-panel { position: absolute; z-index: 45; top: calc(100% + 6px); right: 0; min-width: 190px; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: 0 10px 28px rgba(16, 36, 59, .16); display: flex; flex-direction: column; gap: 1px; } .menu.up .menu-panel { top: auto; bottom: calc(100% + 6px); } .menu.left .menu-panel { right: auto; left: 0; } .menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: var(--fs-base); color: var(--ink-2); text-align: left; cursor: pointer; white-space: nowrap; } .menu-item:hover { background: var(--hover); color: var(--ink); } .menu-item.danger { color: var(--danger-fg); } .menu-item.danger:hover { background: var(--danger-bg-hover); } .menu-item:disabled { opacity: .45; cursor: not-allowed; } .menu-panel form { margin: 0; } .menu-sep { height: 1px; margin: 4px 2px; background: var(--border-2); } /* split button: one primary action plus a menu of its variants */ .btn-split { display: inline-flex; align-items: stretch; } .btn-split > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-split > .menu > summary.btn { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255, 255, 255, .28); padding-left: 10px; padding-right: 10px; height: 100%; } /* style-guide catalogue layout */ .ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); } .ds-caption { font-size: var(--fs-sm); color: var(--ink-4); margin: 0 0 7px; } .ds-code { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; padding: 1px 6px; } .ds-demo-pad { min-height: 190px; } .ds-gap { margin-top: var(--s-3); } .ds-type-title { font-size: var(--fs-xl); font-weight: 600; color: var(--ink); } .ds-type-body { font-size: 13.5px; color: var(--ink-2); margin-top: 10px; line-height: 1.55; } .ds-type-mono { font-family: var(--font-mono); font-size: var(--fs-base); color: var(--nbc-navy); margin-top: 12px; background: var(--hover); padding: 8px 11px; border-radius: 7px; } .brand-mark img { height: 64px; display: block; } .brand-mark.navy img { mix-blend-mode: screen; opacity: .96; } /* pagination under a queue table */ .pager { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-3); } .pager-info { font-size: var(--fs-md); color: var(--ink-4); } .pager [aria-disabled="true"] { opacity: .45; cursor: default; } /* a column of row actions, right-aligned, one line each */ .row-actions { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .row-actions form { margin: 0; } .popover-panel .textarea, .popover-panel .input { margin-bottom: 8px; } .popover-actions { display: flex; justify-content: flex-end; gap: var(--s-2); } .job-id { font-size: 12px; color: var(--nbc-navy); font-weight: 500; } .job-file { font-size: 12px; color: var(--ink); } .inline-form { display: inline; margin: 0; } .table-foot { padding: 10px 14px; border-top: 1px solid var(--border-2); font-size: var(--fs-sm); color: var(--ink-4); } /* ===== top bar menus (phase 4) ===== */ .brand-text { display: flex; flex-direction: column; } /* The Admin menu sits in the nav row and must look like one of its links. */ .mainnav .nav-menu { display: flex; align-items: stretch; height: 100%; } .mainnav .nav-menu > summary { position: relative; display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 15px; font-size: 13px; font-weight: 500; color: var(--ink-3); transition: color .12s, background .12s; } .mainnav .nav-menu > summary:hover, .mainnav .nav-menu[open] > summary { background: var(--hover); } .mainnav .nav-menu.active > summary { color: var(--nbc-navy); font-weight: 600; } .mainnav .nav-menu.active > summary::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2.5px; border-radius: 3px 3px 0 0; background: var(--nbc-blue); } .mainnav .nav-menu .menu-panel { top: calc(100% - 4px); } /* nav-menu links must not pick up .mainnav a's full-height tab styling */ .mainnav .menu-panel a.menu-item { height: auto; padding: 8px 11px; font-weight: 500; color: var(--ink-2); } .mainnav .menu-panel a.menu-item::after { display: none; } .menu-item.active { background: var(--selected); color: var(--nbc-navy); font-weight: 600; } .menu-item .nav-badge { margin-left: auto; } /* user menu: the chip is the button */ .user-menu > summary.userchip { padding: 5px 8px 5px 5px; border-radius: 9px; } .user-menu > summary.userchip:hover, .user-menu[open] > summary.userchip { background: var(--hover); } .userchip .u-text { display: flex; flex-direction: column; } .userchip .caret { color: var(--ink-4); } .topbar-right .user-menu .menu-panel { min-width: 200px; } /* ===== review screen (phase 5) ===== */ .ban-triage { display: flex; align-items: center; gap: 10px; flex: none; } .header-purpose > summary.chip { cursor: pointer; } .header-purpose > summary .caret { font-size: 11px; opacity: .8; } .header-purpose .popover-panel { top: calc(100% + 8px); } .header-purpose .popover-panel p { margin: 0 0 8px; font-size: var(--fs-md); } /* the purpose form inside a popover is already in a panel: drop its own float */ .popover-panel .purpose-form { position: static; width: auto; padding: 0; box-shadow: none; border: 0; background: none; } /* attention strip: every pre-action notice in one frame, most serious first. The item markup is the existing banners; the frame flattens them into rows. */ /* overflow stays visible: the purpose form opens as a popover from inside the strip and must not be clipped. The corner radius is carried by the first and last rows instead. */ .attention { margin-bottom: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-card); } .attention > :first-child { border-top-left-radius: 9px; border-top-right-radius: 9px; } .attention > :last-child { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; } .attention > .status-banner, .attention > .alert, .attention > .purpose-banner { margin: 0; border: 0; border-radius: 0; padding: 7px 14px; } .attention > * + * { border-top: 1px solid var(--border-2); } .attention > .purpose-banner { overflow: visible; } .attention .alert-strip .txt { white-space: normal; } .attention .alert-strip .txt p { margin: 3px 0 0; } .attention-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 6px 14px; font-size: var(--fs-sm); color: var(--ink-4); } .attention-note summary { cursor: pointer; color: var(--nbc-action); font-weight: 500; } .attention-note details[open] { flex-basis: 100%; } table.grid.page-checks { margin-top: 6px; font-size: var(--fs-md); } table.grid.page-checks td { padding: 6px 10px; } a.link { color: var(--nbc-action); font-weight: 500; } /* footer: split primary on the left, More on the right */ .workspace-footer .footer-more { margin-left: auto; } .workspace-footer .btn-split > .menu > summary.btn { padding-top: 10px; padding-bottom: 10px; } .footer-more .popover-panel { width: 320px; padding: 6px; } .footer-more .popover-panel form { margin: 0; } .footer-more .reject-pop { display: block; } .footer-more .reject-pop > summary.menu-item { list-style: none; } .footer-more .reject-pop > summary::-webkit-details-marker { display: none; } .footer-more .reject-pop[open] > summary { background: var(--danger-bg-hover); } /* inside the More panel the reject form flows in place instead of floating */ .footer-more .reject-pop-body { position: static; width: auto; padding: 8px 8px 4px; border: 0; box-shadow: none; } .footer-more .reject-pop-body .sel, .footer-more .reject-pop-body .textarea { margin-bottom: 8px; } /* ===== utilities (phase 6) ===== A deliberately small set for spacing, size and alignment, so a one-off tweak is a class instead of an inline style="" (which test_ui_conventions ratchets down). Components still own their own layout; reach for these only for glue. */ .m-0 { margin: 0; } .mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .t-sm { font-size: 12px; } .t-base { font-size: 13px; } .t-bold { font-weight: 700; } .t-name { font-weight: 500; color: var(--ink); } .t-right { text-align: right; } .flex-1 { flex: 1; min-width: 0; } .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .col-flex { display: flex; flex-direction: column; } .card-pad { padding: 6px 16px 16px; } .panel-intro { margin: -6px 0 4px; } .empty-cell { padding: 28px; text-align: center; color: var(--ink-4); } .ml-2 { margin-left: var(--s-2); } .prose { line-height: 1.65; } .card-lede { margin: 2px 0 12px; } .card-warn { border-color: var(--warn-fg); } .card-narrow { max-width: 560px; } .temp-password { font-size: 20px; user-select: all; } .input-name { width: 90px; } .input-username { width: 110px; } .input-num { width: 60px; } .textarea-mono { font-family: var(--font-mono); font-size: 12.5px; } .textarea-tall { min-height: 120px; resize: vertical; } .textarea-short { min-height: 64px; resize: vertical; } .m-kind { color: var(--ink-5); font-weight: 400; } .results-incomplete { margin: 12px 16px 0; } th.col-marker { width: 1%; } .raw-results { padding: 12px 16px; } .raw-results > summary { cursor: pointer; color: var(--ink-3); font-size: 13px; } .raw-results pre { white-space: pre-wrap; font-size: 12.5px; line-height: 1.5; margin-top: 10px; } .assign-row { padding: 0 16px 14px; border-top: 1px solid var(--border-2); margin-top: 2px; container-type: inline-size; } .assign-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 12px; align-items: start; padding-top: 12px; } .recommendation-control, .recommendation-clinic-type { display: flex; min-width: 0; flex-direction: column; gap: 4px; } .assign-form .filter-label { line-height: 16px; margin: 0; } .assign-form .sel { height: 36px; padding-top: 6px; padding-bottom: 6px; } .assign-form > .btn { height: 36px; margin-top: 20px; } .clinician-picker { width: 100%; min-width: 0; } .clinician-picker > summary { display: flex; align-items: center; list-style: none; } .clinician-picker > summary::-webkit-details-marker { display: none; } .clinician-picker > summary [data-clinician-summary] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Keep the options in the scrollable card's flow so it cannot clip the menu. */ .clinician-options { margin-top: 4px; padding: 4px; max-height: 230px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-input); background: var(--surface); box-shadow: var(--shadow-card); } .clinician-option { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1.4; } .clinician-option:hover { background: var(--selected); } .clinician-option input { flex: none; margin: 0; accent-color: var(--nbc-action); } .clinician-option span { min-width: 0; overflow-wrap: anywhere; } .clinician-option-any { border-bottom: 1px solid var(--border-2); border-radius: 0; } .recommendation-help { color: var(--ink-4); font-size: 11.5px; line-height: 1.3; } .clinician-options .recommendation-help { margin: 6px 8px; } @container (max-width: 520px) { .assign-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .assign-form > .btn { grid-column: 1 / -1; justify-self: start; margin-top: 0; } } @container (max-width: 340px) { .assign-form { grid-template-columns: 1fr; } } @media (max-width: 700px) { .booking-navigation-persistent { width: 100%; margin-left: 0; } } .override-note { padding: 6px 0; font-size: 12.5px; } .sms-history-wrap { padding: 0 16px 12px; } .sms-history { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); } .feedback-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .backup-codes { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .backup-codes li { font-family: var(--font-mono); font-size: 14px; letter-spacing: 1px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; text-align: center; } /* ===== sign-in pages (moved from template