/* The Patients page and the patient quick switcher (Open patient and the pickers). Tokens only; Geist comes from the page. */

/* ---- Patients page ---- */
.pt-page { display: flex; flex-direction: column; gap: var(--ck-space-3); height: calc(100vh - 8.5rem); min-height: 28rem; }
.pt-page .page-header { margin-bottom: 0; }
.pt-toolbar { display: flex; flex-wrap: wrap; gap: var(--ck-space-3); align-items: center; }
.pt-search { flex: 1 1 22rem; max-width: 34rem; }
.pt-search .e-input-group { width: 100%; }
.pt-sort { display: inline-flex; gap: var(--ck-space-2); align-items: center; font: var(--ck-text-label); color: var(--ck-slate); }
.pt-sort select { min-height: var(--ck-control-sm); padding: 0 var(--ck-space-2); border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-md); background: var(--ck-surface); color: var(--ck-ink); font: inherit; }
.pt-toolbar .rx-cols { flex-basis: auto; position: relative; }
.pt-toolbar .rx-cols[open] .rx-collist { position: absolute; right: 0; z-index: var(--ck-z-popover); min-width: 18rem; max-height: 70vh; overflow: auto; padding: var(--ck-space-3); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); background: var(--ck-surface); box-shadow: var(--ck-shadow-raised); }

.pt-toolbar .rx-collist li { flex-wrap: nowrap; }
.pt-toolbar .rx-collist .ab-btn { min-height: 1.75rem; padding: 0 var(--ck-space-2); font-size: 0.8125rem; }

.pt-subbar { display: flex; flex-wrap: wrap; gap: var(--ck-space-3); align-items: center; }
.pt-count { margin-left: 0.25rem; color: var(--ck-slate); font-weight: 500; }
.ck-segmented > button[aria-pressed="true"] .pt-count { color: var(--ck-primary-hover); }
.pt-hint { color: var(--ck-slate); font: var(--ck-text-helper); }
.pt-total { margin-left: auto; color: var(--ck-slate); font: var(--ck-text-helper); }

.pt-body { display: flex; gap: var(--ck-space-3); flex: 1; min-height: 0; }
.pt-grid { flex: 1; min-width: 0; min-height: 0; border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); overflow: hidden; background: var(--ck-surface); }
.pt-grid .e-grid { border: 0; height: 100%; }
.pt-grid .e-grid .e-headercell { background: var(--ck-canvas); font-weight: 600; color: var(--ck-slate); }
.pt-grid .e-grid .e-row .e-rowcell { padding-block: 0.25rem; vertical-align: middle; }
.pt-grid .e-grid .e-row.e-active .e-rowcell,
.pt-grid .e-grid .e-row .e-rowcell.e-active { background: var(--row-selected); color: var(--ck-ink); }
.pt-patient { display: flex; justify-content: center; flex-direction: column; gap: 0.125rem; min-width: 0; }
.pt-line1 { display: flex; flex: none; flex-wrap: nowrap; gap: var(--ck-space-2); align-items: center; min-width: 0; min-height: 1.375rem; }
.pt-name { font-weight: 600; white-space: nowrap; }
.pt-preferred { color: var(--ck-slate); white-space: nowrap; }
.pt-line2 { flex: none; color: var(--ck-slate); font: var(--ck-text-helper); white-space: nowrap; }
.pt-grid .ck-chip { flex: none; margin-left: 0.25rem; }

/* Quick-look panel */
.pt-panel { flex: 0 0 20rem; display: flex; flex-direction: column; gap: var(--ck-space-3); padding: var(--ck-space-4); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); background: var(--ck-surface); box-shadow: var(--ck-shadow-panel); overflow: auto; }
.pt-panel-head { display: flex; justify-content: space-between; gap: var(--ck-space-2); align-items: flex-start; }
.pt-panel-name { margin: 0; font-size: 1.125rem; font-weight: 650; letter-spacing: normal; }
.pt-panel-sub { color: var(--ck-slate); font: var(--ck-text-helper); }
.pt-badges { display: flex; flex-wrap: wrap; gap: var(--ck-space-1); }
.pt-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--ck-space-2) var(--ck-space-3); margin: 0; }
.pt-facts dt { color: var(--ck-slate); font: var(--ck-text-label); }
.pt-facts dd { margin: 0; overflow-wrap: anywhere; }
.pt-muted { color: var(--ck-slate); }
.pt-panel-actions { display: flex; flex-wrap: wrap; gap: var(--ck-space-2); margin-top: auto; }

@media (max-width: 900px) {
    .pt-body { flex-direction: column; }
    .pt-panel { flex-basis: auto; }
}

/* ---- Quick switcher ---- */
.pf { display: flex; flex-direction: column; gap: var(--ck-space-2); }
.pf-search .e-input-group { width: 100%; }
.pf-sub { display: flex; flex-wrap: wrap; gap: var(--ck-space-2) var(--ck-space-3); align-items: center; }
.pf-hint { color: var(--ck-slate); font: var(--ck-text-helper); }
.pf-status { min-height: 1.25rem; color: var(--ck-slate); font: var(--ck-text-helper); }
.pf-results { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ck-border); border-radius: var(--ck-radius-md); overflow: hidden; min-height: 3rem; }
.pf-results:empty { display: none; }
.pf-row { display: flex; justify-content: space-between; gap: var(--ck-space-3); align-items: center; padding: var(--ck-space-2) var(--ck-space-3); border-bottom: 1px solid var(--ck-border); cursor: pointer; }
.pf-row:last-child { border-bottom: 0; }
.pf-row:hover { background: var(--ck-canvas); }
.pf-row.pf-selected { background: var(--row-selected); box-shadow: inset 3px 0 0 var(--ck-primary); }
.pf-main { display: flex; flex-wrap: wrap; gap: 0 var(--ck-space-2); align-items: baseline; min-width: 0; }
.pf-name { font-weight: 600; }
.pf-meta { flex-basis: 100%; color: var(--ck-slate); font: var(--ck-text-helper); }
.pf-record { flex: none; color: var(--ck-slate); font: var(--ck-text-helper); }
.pf-actions { display: flex; flex-wrap: wrap; gap: var(--ck-space-2); align-items: center; justify-content: flex-end; }
.pf-keys { margin-right: auto; color: var(--ck-slate); font: var(--ck-text-helper); }
.patient-finder-dialog .e-dlg-content { padding-top: var(--ck-space-2); }

/* The recent patients list holds up to 20, so it scrolls; the selected row is kept in view by js/patientFinder.js. */
.pf-results { max-height: 26rem; overflow-y: auto; }

/* Add / edit patient: a side navigation of sections, one grouped panel at a time on a 12-column field grid. */
.patient-edit-dialog.e-dialog { max-height: 92vh; }
.patient-edit-dialog .e-dlg-content { padding: 0; overflow: hidden; }
.pe-shell { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); height: min(34rem, calc(92vh - 9rem)); }
.pe-nav { display: flex; flex-direction: column; gap: 2px; padding: var(--ck-space-3); border-right: 1px solid var(--ck-border); background: var(--ck-canvas); overflow-y: auto; }
.pe-tab { display: flex; flex-direction: column; gap: 1px; padding: 0.55rem 0.75rem; border: 0; border-left: 3px solid transparent; border-radius: var(--ck-radius-md); background: transparent; text-align: left; cursor: pointer; font: inherit; color: var(--ck-ink); }
.pe-tab:hover { background: var(--ck-surface); }
.pe-tab:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); }
.pe-tab-name { font-size: 0.875rem; font-weight: 600; }
.pe-tab-hint { font-size: 0.75rem; color: var(--ck-slate); }
.pe-tab[aria-current="true"] { background: var(--ck-primary-soft); border-left-color: var(--ck-primary); }
.pe-tab[aria-current="true"] .pe-tab-name { color: var(--ck-primary-hover); }
.pe-panels { overflow-y: auto; padding: var(--ck-space-4) 1.5rem 1.5rem; }
.pe-panel[hidden] { display: none; }
.pe-panel h3 { margin: 0 0 var(--ck-space-2); padding-bottom: 0.35rem; border-bottom: 1px solid var(--ck-border); font-size: 0.9375rem; font-weight: 650; color: var(--ck-ink); letter-spacing: 0; text-transform: none; }
.pe-panel h3 small { font-weight: 400; color: var(--ck-slate); font-size: 0.8125rem; margin-left: 0.35rem; }
.pe-panel h3:not(:first-child) { margin-top: 1.5rem; }
.pe-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.25rem 1rem; align-items: end; }
.pe-fields > * { min-width: 0; }
.pe-2 { grid-column: span 2; } .pe-3 { grid-column: span 3; } .pe-4 { grid-column: span 4; } .pe-5 { grid-column: span 5; }
.pe-6 { grid-column: span 6; } .pe-8 { grid-column: span 8; } .pe-12 { grid-column: span 12; }
.pe-check { padding-bottom: 0.6rem; }
.pe-hint { margin: 0; color: var(--ck-slate); font-size: 0.75rem; line-height: 1.4; }
.patient-edit-dialog .patient-duplicates, .patient-edit-dialog .e-message { margin: var(--ck-space-3) 1.5rem 0; }
@media (max-width: 760px) {
    .pe-shell { grid-template-columns: minmax(0, 1fr); height: auto; }
    .pe-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ck-border); }
    .pe-tab-hint { display: none; }
    .pe-fields > * { grid-column: span 12; }
}

/* Book together: who, when, and the complete fits that were found. */
.visit-form { display: grid; gap: var(--ck-space-3); }
.visit-people { display: grid; gap: var(--ck-space-2); }
.visit-person { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ck-space-2) var(--ck-space-3); padding: var(--ck-space-2) var(--ck-space-3); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-md); }
.visit-name { min-width: 11rem; font-weight: 600; display: inline-flex; gap: 0.4rem; align-items: center; }
.visit-step, .visit-step-fixed { font-size: 0.8125rem; color: var(--ck-slate); }
.visit-when { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ck-space-3); }
.visit-when label { display: grid; gap: 0.2rem; font-size: 0.8125rem; color: var(--ck-slate); }
.visit-when select, .visit-when input[type="date"], .visit-person select { min-height: var(--ck-control-sm); padding: 0 var(--ck-space-2); border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-md); background: var(--ck-surface); color: var(--ck-ink); font: inherit; }
.visit-option { padding: var(--ck-space-3); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-md); background: var(--ck-canvas); }
.visit-option-head { display: flex; justify-content: space-between; align-items: center; gap: var(--ck-space-3); }
.visit-option ul { margin: var(--ck-space-2) 0 0; padding-left: 1.1rem; font-size: 0.875rem; }

/* Safety flag on the patient banner: always visible, plain wording, no reason shown. */
.banner-safety { display: inline-flex; align-items: center; gap: 0.4rem; margin: var(--ck-space-1) 0; padding: 0.25rem var(--ck-space-3); border: 1px solid var(--ck-critical); border-radius: var(--ck-radius-md); background: var(--ck-critical-soft); color: var(--ck-critical-text); font: inherit; font-size: 0.8125rem; font-weight: 650; cursor: pointer; }
.banner-safety:hover { background: var(--ck-surface); }
.banner-safety:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); }

.pe-check-inline { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; cursor: pointer; }