/* Patients: the directory and the patient record to the design (design/DESIGN_GUIDE.md; audit design/previews/visit-redesign/audit/app-gaps.json). Desktop and the web only: every rule is scoped :root:not(.android):not(.ios) or wrapped in @media (min-width:768px); the phones keep their tiers. Colours through tokens.css only (rule I-3). */ /* ==== Directory ==== */ /* The Patients list (README 5.3, isPatients): search + New patient in the card, one column template shared by header and rows, a single Start visit action per row (the source's own note, line 2431, drops Open record — the name is the link), a 56px row, and the New patient dialog (Source 1683-1738). Legacy rules in studio.css/app.css carry ids and !important for tables and dialogs shared with other screens (Review, Schedule, Edit details); every rule below is scoped to #patients-table, #patients-tools, #patients-pagination or #clinical-dialog.patient-dialog/.new-patient so it never reaches those screens. */ @media (min-width:768px){ /* ---- Search + New patient: 44px stays (owner rule); the rest — font, button padding, no accent border/shadow — to the design ---- */ :root #patients-tools.table-tools .table-search input{font-size:13px!important} :root #patients-tools.table-tools .primary{padding:0 13px!important;font-size:12.5px!important;border:0!important;box-shadow:none!important} :root #patients-tools.table-tools .primary .icon{width:16px;height:16px} /* ---- Column header: 11px 19px padding (Source 909); the range cell agrees with the pager (paintPageNow, F060) ---- */ :root:not(.android):not(.ios) #patients-table.table-card>.table-head.patient-columns{padding:11px 19px} /* ---- One column template for header and rows, sized for Start visit alone (Source 910, 918-920). studio.css sizes the last track for the Open record + Start visit pair it no longer has (252px, !important): out-specified with both ids. ---- */ :root:not(.android):not(.ios) #home-page #patients-table .table-head.patient-columns,:root:not(.android):not(.ios) #home-page #patients-table .table-rows>.table-row.patient-columns{grid-template-columns:minmax(150px,1.5fr) minmax(84px,.8fr) minmax(96px,.9fr) 116px!important;gap:14px!important} /* ---- Row: 56px (13px 19px padding, no forced min-height) — Source 913 ---- */ :root:not(.android):not(.ios) #home-page #patients-table .table-rows>.table-row.patient-columns{padding:13px 19px!important;min-height:0!important} /* ---- Initials avatar: 700 weight (Source 915) ---- */ :root #patients-table .patient-avatar{font-weight:700} /* ---- Start visit: 8px radius, 6px gap, no border, the record dot at 16px (Source 918-920) ---- */ :root #patients-table .row-button{border-radius:var(--r-control);gap:6px;border:0} :root #patients-table .row-button[data-action-icon=record] .icon{width:16px;height:16px} /* ---- Pager: 12.5px/550, secondary ink, card background (Source 927-931) ---- */ :root #patients-table .pagination :is(.pager-back,.pager-next){font-size:12.5px!important;font-weight:550!important;color:var(--secondary)!important} :root #patients-table .pagination :is(.pager-back,.pager-next):disabled{color:var(--disabled)!important} /* ---- Empty directory: New patient (primary) beside Record a visit (quiet), one line each, a real way forward ---- */ :root #patients-empty .empty-actions{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap} } /* ==== New patient dialog ==== */ /* Every #clinical-dialog.patient-dialog rule below also reaches Edit details (the same dialog, patient record's own gaps): it is basic chrome — the head block, the field grid's type and spacing, the footer buttons — the same for both, never their own layout (tabs, medical history). Rules that only fit New patient (no record number to type, the phone country code, Reason for the visit, one flat section instead of tabs, the dialog's own height) carry .new-patient too, so Edit details keeps its tabbed, taller form exactly as it is. */ :root #clinical-dialog.patient-dialog .clinical-dialog-header{border-bottom:0;padding:24px 28px 0} :root #clinical-dialog.patient-dialog #clinical-dialog-content{padding-top:0} :root #clinical-dialog.patient-dialog h2{font-size:22px;font-weight:600;letter-spacing:-.026em} :root #clinical-dialog.patient-dialog .dialog-note{margin:5px 0 20px;font-size:13px;color:var(--ink2);line-height:1.65} :root #clinical-dialog.patient-dialog .field-grid{gap:16px} :root #clinical-dialog.patient-dialog .field-grid label{font-size:13px;font-weight:550;gap:7px} :root #clinical-dialog.patient-dialog .field-grid :is(input,select){background:var(--panel2);padding:0 13px} :root #clinical-dialog.patient-dialog .field-grid .field-full{grid-column:1/-1} :root #clinical-dialog.patient-dialog .field-note-inline{color:var(--ink3);font-weight:400} :root #clinical-dialog.patient-dialog .field-hint{font-size:12px;color:var(--ink3);margin:7px 0 0;line-height:1.55} :root #clinical-dialog.patient-dialog input[name=dob].mono-field{font-family:var(--font-mono);font-size:13px} :root #clinical-dialog.patient-dialog .dialog-actions #clinical-cancel{height:var(--h-control);padding:0 16px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);font-size:13px;font-weight:550;border-radius:var(--r-control)} :root #clinical-dialog.patient-dialog .dialog-actions #clinical-submit{height:var(--h-control);padding:0 18px;border-radius:var(--r-control);font-size:13px;font-weight:600} :root #clinical-dialog.patient-dialog .dialog-actions #clinical-submit.primary{border:0;background:var(--accent);color:var(--accent-ink)} :root #clinical-dialog.patient-dialog .dialog-actions .dialog-extra{height:var(--h-control);padding:0 16px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);font-size:13px;font-weight:550;border-radius:var(--r-control)} /* The head row (title + the × in the corner): every clinical dialog gets it, since showDialog builds it for all of them. */ :root #clinical-dialog .clinical-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px} :root #clinical-dialog .clinical-dialog-head-text{min-width:0} :root #clinical-dialog .dialog-close{flex:none;width:34px;height:34px;border-radius:var(--r-control);border:0;background:var(--panel2);color:var(--ink2);padding:0} :root #clinical-dialog .dialog-close .icon{width:19px;height:19px} :root #clinical-dialog .dialog-close:hover{background:var(--accent-soft);color:var(--accent-text)} @media (min-width:768px){ /* ---- New patient only: the panel (Source 1684-1685: max-width 560; the height stays the shared, proven fixed height — tabs keep the languages editor from ever entering the same view as the full grid, so nothing here needs to scroll). ---- */ :root #clinical-dialog.patient-dialog.new-patient{width:min(560px,calc(100vw - 32px))} /* No footer icons — the source's buttons carry no glyph — New patient only. */ :root #clinical-dialog.patient-dialog.new-patient .dialog-actions .action-icon{display:none} /* Details has six fields, Reason and the record strip in one 660px-tall panel: a tighter grid, tab gap, head and foot earn back the room — never the fields themselves (still 44px, still readable) — and the age hint (an app addition beyond the source, which has none for this field) stays for an error only. */ :root #clinical-dialog.patient-dialog.new-patient .field-grid{gap:9px} :root #clinical-dialog.patient-dialog.new-patient .patient-tabs{margin-bottom:11px} :root #clinical-dialog.patient-dialog.new-patient #patient-error-dob:not(.field-error){display:none} :root #clinical-dialog.patient-dialog.new-patient .field-hint{margin-top:3px;line-height:1.35} :root #clinical-dialog.patient-dialog.new-patient .field-record-strip{padding:7px 13px} :root #clinical-dialog.patient-dialog.new-patient .clinical-dialog-header{padding-top:18px} :root #clinical-dialog.patient-dialog.new-patient .dialog-note{margin-bottom:11px;line-height:1.5} :root #clinical-dialog.patient-dialog.new-patient #clinical-dialog-content{padding-bottom:10px} :root #clinical-dialog.patient-dialog.new-patient .dialog-actions{padding:10px 28px 14px} /* Disabled while the name is empty (Source 1735: no submit-time message for it — F062) */ :root #clinical-dialog.patient-dialog.new-patient .dialog-actions #clinical-submit:disabled{background:var(--panel2);color:var(--ink3);cursor:not-allowed} :root #clinical-dialog.patient-dialog.new-patient .dialog-actions .dialog-extra:disabled{color:var(--ink3);cursor:not-allowed} /* The composite phone field: a country-code select beside the digits, one bordered box (Source 1710-1717) */ :root #clinical-dialog.patient-dialog.new-patient .phone-field{display:flex;align-items:center;height:calc(var(--h-control) + 2px); /* the border sits outside so the select and the field inside stand the same 44px as every control */border:1px solid var(--line);border-radius:var(--r-control);background:var(--panel2);overflow:hidden} :root #clinical-dialog.patient-dialog.new-patient .phone-field select{flex:none;width:auto;height:100%;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink2);padding:0 8px;font-size:13px;font-family:var(--font-mono)} :root #clinical-dialog.patient-dialog.new-patient .phone-field input{flex:1;min-width:0;height:100%;border:0;border-radius:0;background:transparent;padding:0 12px;font-family:var(--font-mono);font-size:13.5px;letter-spacing:.3px} /* The read-only record-number strip: "Record number" · "Assigned on save" (Source 1727-1730) */ :root #clinical-dialog.patient-dialog.new-patient .field-record-strip{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:var(--r-control);background:var(--panel2);border:1px solid var(--line)} :root #clinical-dialog.patient-dialog.new-patient .field-record-label{flex:1;font-size:12.5px;color:var(--ink2)} :root #clinical-dialog.patient-dialog.new-patient .field-record-value{font-size:13px;color:var(--ink);font-family:var(--font-mono)} } /* ==== Patient record ==== */ /* renderRecord (clinical.js) only paints #patient-page at isPhone()===false (phone.js: max-width 760px); at or under that width the page is the phones’ own renderPatient, which keeps its tier untouched — so every .record-*/#patient-page rule below stays behind the same 768px gate studio.css’s own patient-record block uses. */ @media (min-width:768px){ /* The page never scrolls (owner, 16 Sept 2026): the side column is bound the same way the history card already is, and each of its panels hugs only the rows fitPanel (clinical.js) measured to fit — never a row cut in half, never a page-level scrollbar. */ :root:not(.android):not(.ios) #patient-page{overflow:hidden;gap:18px!important} /* studio.css:257 gap:14px!important; the design’s content column is 18px (Source 499) */ :root:not(.android):not(.ios) .record-side{overflow:hidden} :root:not(.android):not(.ios) .record-rows{overflow:hidden} /* Visit history entry: the design’s 14px 18px padding and natural height, not the generic 61px-row rule (studio.css:846). */ :root:not(.android):not(.ios) .record-history .table-rows>.table-row.record-entry{padding:14px 18px!important;min-height:0} /* The row is a big, forgiving click target; the design shows no hover fill on it and no fill on the Documents rows either. */ :root:not(.android):not(.ios) .record-entry:hover,:root:not(.android):not(.ios) .record-doc:hover{background:none} /* The copy column is left-aligned like its title, date and action (app.css’s generic .table-row>span:last-child otherwise pushes the wrapped summary text to the right). */ :root:not(.android):not(.ios) .record-entry>.record-entry-copy{text-align:left} /* The entry icon takes the row’s own status colour; the badge glyph inside the chip is 13px, not the general 14px. */ :root:not(.android):not(.ios) .record-entry:has(.status-chip.review) .record-entry-icon{color:var(--review-text)} :root:not(.android):not(.ios) .record-entry:has(.status-chip.signed) .record-entry-icon{color:var(--signed-text)} :root:not(.android):not(.ios) .record-entry:has(.status-chip.recording) .record-entry-icon{color:var(--secondary)} :root:not(.android):not(.ios) .record-entry .status-chip .icon{width:13px;height:13px} /* The whole entry is a div (role=button), not a