/* Patients, Setup & people with the Add person form, and Audit. */

/* Patients */
.list-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
/* min-width: 0, as Rails sets size from maxlength, which would hold it wide. */
.list-search-input { width: 320px; max-width: 100%; min-width: 0; height: 36px; }
.patients { font-size: var(--text-base); }
.patients td { padding-block: 13px; }
.patient-name { font-weight: 500; }
.patients-quiet { color: var(--text-secondary); }
.patients-phone { white-space: nowrap; }
.patients .table-sub { margin-top: 1px; font-size: 11.5px; }

/* Setup & people */
.setup-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.setup-clinic { display: flex; flex-direction: column; gap: 12px; padding: 18px; font-size: var(--text-base); }
.setup-card-title { margin: 0; font-size: var(--text-md); font-weight: 600; }
.setup-clinic-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.setup-clinic-form .alert { margin: 0; padding-left: 28px; }
.setup-save { align-self: flex-start; }
.setup-note { font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }
.setup-templates { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.setup-templates li { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: var(--radius-control); background: var(--bg-muted-2); }
.setup-templates a { font-size: var(--text-meta); }
.setup-people { overflow: hidden; }
.setup-people-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-row); }
.setup-people-head .page-header-text { gap: 2px; }
.setup-people-scroll { overflow-x: auto; }
.people { font-size: var(--text-base); }
.people td { padding: 13px 18px; }
.setup-person-name { font-weight: 500; }
.setup-quiet { color: var(--text-secondary); }
@media (max-width: 60rem) { .setup-grid { grid-template-columns: minmax(0, 1fr); } }

/* Add person, in the dialog or on its own page */
.person-dialog { width: min(460px, calc(100vw - 32px)); }
.person-card { width: min(460px, 100%); border: 1px solid var(--border-card); border-radius: var(--radius-dialog); background: var(--bg-surface); }
.person-form { margin: 0; }
.person-form-head { padding: 20px 22px; border-bottom: 1px solid var(--border-row); }
.person-form-body { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; }
.person-form-body .alert { margin: 0; padding-left: 28px; }
.person-form .input { height: 36px; }
.person-form [hidden] { display: none; }
.person-form .check-field { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); font-weight: 500; cursor: pointer; }
.person-form .check-field input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.role-picker { gap: 8px; margin: 0; padding: 0; border: 0; }
.role-picker legend { padding: 0; margin-bottom: 8px; }
.role-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-weight: 400; }
.role-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 1px var(--border-input);
  cursor: pointer;
}
.role-card input { position: absolute; opacity: 0; pointer-events: none; }
.role-card:has(input:checked) { background: var(--bg-subtle); box-shadow: inset 0 0 0 1.5px var(--text-primary); }
.role-card:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.role-card-name { font-weight: 500; }
.role-card-sub { font-size: 11.5px; color: var(--text-muted); }
.field-hint-ok { color: oklch(0.45 0.1 155); }
.person-form .info-note { padding: 12px; font-size: var(--text-meta); }

/* Audit */
.audit-window { font-size: var(--text-base); color: var(--text-tertiary); }
.audit-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.audit-tile { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 16px 18px; border: 1px solid var(--border-card); border-radius: var(--radius-card); background: var(--bg-surface); }
.audit-tile h2 { margin: 0; font-size: var(--text-meta); font-weight: 400; color: var(--text-tertiary); }
.audit-figure { margin: 0; font-size: 26px; font-weight: 600; }
.audit-tile-note { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.audit-tiers { display: flex; gap: 6px; }
.audit-tiers span { min-width: 5.5rem; color: var(--text-tertiary); }
.audit-tile-danger { border-color: transparent; background: var(--danger-tile-bg); }
.audit-tile-danger h2 { color: oklch(0.45 0.15 27); }
.audit-tile-danger .audit-figure { color: oklch(0.45 0.17 27); }
.audit-tile-danger .audit-tile-note { color: var(--text-tertiary); }
@media (max-width: 60rem) { .audit-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.audit-section-title { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.audit-table { min-width: 820px; font-size: var(--text-base); }
.audit-table td { padding-block: 13px; }
.audit-time { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--text-secondary); white-space: nowrap; }
.audit-reference { font-family: var(--font-mono); font-size: var(--text-meta); }
.audit-strong { font-weight: 500; }
.audit-quiet { color: var(--text-secondary); }
.audit-nowrap { white-space: nowrap; }
.audit-flag { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.audit-flag-title { font-size: var(--text-meta); color: var(--text-secondary); }
.audit-status-ok { color: var(--text-body); }
.audit-status-warn { color: var(--caution-fg); }
.audit-status-warn::before { background: oklch(0.7 0.14 60); box-shadow: none; }
.audit-status-error { color: var(--danger-fg); }
.audit-status-error::before { background: var(--status-failed); box-shadow: none; }
.audit-status-ok::before { background: var(--status-sent); box-shadow: none; }
.audit-status-muted::before, .audit-status-neutral::before { background: var(--text-faint); box-shadow: none; }
.audit-status-muted, .audit-status-neutral { color: var(--text-secondary); }
.audit-time a { color: inherit; }