/* MediMeet admin dashboard, verify, reset, join, two-step sign-in, visits and patient pages.
   UI-5: every colour, shadow and radius comes from brand/tokens.css (one brand on every page); this
   file holds layout and components only and no colour literal (test/ui-5-brand.test.js). No external
   font or asset: the typeface is self-hosted by the tokens file. */
@import url("brand/tokens.css");

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  font: 15px/1.6 var(--font-sans);
  color: var(--ink);
  background: var(--bg);
}

[hidden] { display: none !important; }

a { color: var(--accent); }

h1 { font-size: 1.4rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; }

.muted { color: var(--muted); }
.small { font-size: 0.88rem; }

/* Layout: left rail with the sections, content on the right */
.layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  background: var(--rail);
  color: var(--rail-ink);
  padding: 1.25rem 0;
  display: flex;
  flex-direction: column;
}

.brand {
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0 1.25rem 1rem;
}

.rail ul { list-style: none; margin: 0; padding: 0; }

.rail a {
  display: block;
  padding: 0.6rem 1.25rem;
  color: inherit;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.rail a:hover { background: var(--accent-soft); }

.rail a.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  font-weight: 600;
}

.rail-footer {
  margin-top: auto;
  padding: 1rem 1.25rem 0;
  font-size: 0.9rem;
  border-top: 1px solid var(--line);
  word-break: break-all;
}

.rail-footer .link { color: var(--rail-ink); margin-top: 0.35rem; }

.content { padding: 1.75rem 2rem 3rem; max-width: 1200px; }

.placeholder { color: var(--muted); font-style: italic; }

/* Cards (login, denied, verify, join) */
.centered {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.5rem;
  width: 100%;
  max-width: 440px;
}

.centered.wide .card { max-width: 760px; }

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Forms */
label { display: block; margin: 0.6rem 0; font-size: 0.92rem; }

input, select {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  background: var(--panel);
  color: inherit;
}

input:focus, select:focus, button:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Keyboard focus for links and disclosures on light panels and the dark rail. */
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.rail a:focus-visible, .rail summary:focus-visible {
  outline-color: var(--accent);
}

button {
  font: inherit;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  margin-top: 0.5rem;
}

button.secondary { background: var(--panel); color: var(--accent); }
button.danger { background: var(--panel); color: var(--danger); border-color: var(--danger); }
/* Codex fix — owner review: keep this target at least 44px at every width. */
button.link { min-width: 44px; min-height: 44px; background: none; border: 0; padding: 0; margin: 0; color: var(--accent); text-decoration: underline; }
button:disabled { opacity: 0.6; cursor: default; }

.inline-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.inline-form label { margin: 0; min-width: 200px; flex: 1 1 200px; }
.inline-form button { margin: 0; }

/* Messages */
.msg {
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  border: 1px solid transparent;
  word-break: break-word;
}

.msg.error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.msg.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 0.92rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

th { background: var(--head); font-weight: 600; }

td.verified { white-space: nowrap; }
td.actions { min-width: 330px; }
/* Codex fix — owner review: keep this target at least 44px at every width. */
td.actions button { min-width: 44px; min-height: 44px; padding: 0.3rem 0.6rem; font-size: 0.85rem; margin: 0.15rem 0.35rem 0.15rem 0; }
td.actions select { display: inline-block; width: auto; margin: 0 0.2rem 0 0; padding: 0.3rem 0.4rem; font-size: 0.85rem; }
.tier-change { display: inline-block; white-space: nowrap; margin-right: 0.35rem; }

/* Units column (1A-09): the account's units, each with a remove "×", then the assign control */
td.units { min-width: 180px; }
.unit-list { list-style: none; padding: 0; margin: 0 0 0.3rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.unit-chip {
  display: inline-flex; align-items: center; gap: 0.15rem;
  padding: 0.05rem 0.15rem 0.05rem 0.55rem; border-radius: 999px;
  background: var(--head); border: 1px solid var(--line); font-size: 0.8rem;
}
/* Codex fix — owner review: keep this target at least 44px at every width. */
.unit-chip button.unit-remove { min-width: 44px; min-height: 44px;
  margin: 0; padding: 0 0.35rem; border: 0; border-radius: 999px;
  background: none; color: var(--danger); font-size: 1rem; line-height: 1.2;
}
.unit-chip button.unit-remove:hover { background: var(--danger-bg); }
.unit-assign { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
td.units select { display: inline-block; width: auto; max-width: 12rem; margin: 0; padding: 0.3rem 0.4rem; font-size: 0.85rem; }
td.units .unit-assign button { margin: 0; padding: 0.3rem 0.6rem; font-size: 0.85rem; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--head);
}

.badge.active { background: var(--ok-bg); color: var(--ok); }
.badge.pending { background: var(--warn-bg); }
.badge.disabled, .badge.deleted { background: var(--danger-bg); color: var(--danger); }
.badge.allowed { background: var(--ok-bg); color: var(--ok); }
.badge.refused { background: var(--danger-bg); color: var(--danger); }

/* Audit panel: long targets and JSON details wrap inside their cells */
.inline-form label.narrow { min-width: 110px; flex: 0 1 140px; }
#audit-table td { vertical-align: top; overflow-wrap: anywhere; }
#audit-table td.audit-time { white-space: nowrap; }
#audit-table td.audit-detail code { font-size: 0.8rem; letter-spacing: normal; }

/* Transcripts panel (P3-09): short identifiers (model, state, job) wrap only between words, never
   inside one as the audit table's long JSON may; times stay on one line */
#transcripts-table td { vertical-align: top; overflow-wrap: break-word; }
#transcripts-table td.transcript-time { white-space: nowrap; }

/* Outbox and rooms lists */
.outbox, .rooms { list-style: none; padding: 0; margin: 0; }

.outbox li, .rooms li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.6rem;
  word-break: break-word;
}

.rooms li { background: var(--bg); }

.meta { font-size: 0.85rem; color: var(--muted); }
.meta.error { color: var(--danger); font-weight: 600; }

.outbox a { word-break: break-all; }

.room-actions button { margin-right: 0.35rem; }
.room-status .msg { margin: 0.6rem 0 0; }

/* Rooms panel (DB-4): a room's grants, one line each with its Revoke, then its grant form */
.rooms .grant-list { list-style: none; padding: 0; margin: 0.3rem 0 0; }
.rooms .grant-list li { background: none; border: 0; border-radius: 0; padding: 0.15rem 0; margin: 0; }
/* Codex fix — owner review: keep this target at least 44px at every width. */
.rooms .grant-list button { min-width: 44px; min-height: 44px; margin: 0 0 0 0.5rem; padding: 0.2rem 0.6rem; font-size: 0.85rem; }
.rooms .grant-form { margin-top: 0.6rem; }

code {
  background: var(--head);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 1em;
  letter-spacing: 0.08em;
}

details { margin-top: 0.4rem; }
summary { cursor: pointer; color: var(--muted); font-size: 0.88rem; }

pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
}

/* Links that act as the main next step, and a highlighted note */
.button-link {
  display: inline-block; padding: 0.6rem 1.1rem; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none;
}
.button-link:hover { filter: brightness(1.08); }
.note-box {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid var(--line); font-size: 0.92rem;
}

/* Two-step sign-in (MFA): the code step, mfa.html, and the MFA column of Users and Access */
.steps { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; }
.steps li { margin: 0.25rem 0; }
.qr-box { text-align: center; margin: 0.75rem 0; }
img.qr {
  display: inline-block; max-width: 100%; height: auto;
  image-rendering: pixelated; background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px;
}
.setup-key { display: inline-block; margin-top: 0.3rem; word-break: break-all; }
.codes {
  list-style: none; padding: 0; margin: 0.5rem 0 0.75rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1rem;
}
.codes code { font-size: 1.05em; }
td.mfa-state { font-size: 0.85rem; min-width: 160px; vertical-align: top; }
td.mfa-state div + div { color: var(--muted); }

/* ---- Codex (P3/P4) ---- Instruction actions retain a 44px touch target without inline styles. */
body[data-page="visits"] [data-mm-slot="instructions"] button { min-height: 44px; }

/* Codex fix — owner review: S1-07 mobile target sizes and page containment at 320px.
 * Wide administrative tables keep their own scroll area; no data is clipped or hidden. */
@media (max-width: 640px) {
  body { overflow-wrap: anywhere; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .content { padding: 1rem; min-width: 0; max-width: 100%; }
  .rail { min-width: 0; }
  .rail ul { display: flex; flex-wrap: wrap; }
  .rail-footer { margin-top: 1rem; }
  .centered, .card { min-width: 0; max-width: 100%; }
  .card { padding: 1rem; }
  .inline-form label, .inline-form label.narrow { min-width: 0; max-width: 100%; }
  .unit-assign { flex-wrap: wrap; white-space: normal; max-width: 100%; }
  .tier-change { white-space: normal; }
  a, button, input, select, summary {
    min-height: 44px;
    min-width: 44px;
  }
  a { display: inline-flex; align-items: center; max-width: 100%; }
  button, summary { white-space: normal; overflow-wrap: anywhere; }
  input, select, textarea { max-width: 100%; }
  img, video, iframe { max-width: 100%; }
  table { display: block; max-width: 100%; overflow-x: auto; }
  pre, code { overflow-wrap: anywhere; }
}

/* Codex fix — owner review: Jeremy show-password field rules. */
.pw-wrap { position: relative; display: block; margin-top: 0.25rem; }
.pw-wrap input { margin-top: 0; padding-right: 2.9rem; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; margin: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer;
}
.pw-eye:hover { background: var(--accent-soft); color: inherit; }
.pw-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* October design handoff: shared responsive shell and accessible controls. */
body { overflow-wrap: anywhere; }
input, select, button, textarea { font: inherit; min-height: 44px; }
button { border-radius: 8px; font-weight: 650; }
input,select,textarea { border-radius: 8px; max-width: 100%; }
h1 { font-size: clamp(1.65rem, 2.5vw, 2.25rem); font-weight: 750; line-height: 1.25; letter-spacing: -.04em; }
h2 { font-weight: 750; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.card { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow); padding: var(--space); }
.rail { border-right: 1px solid var(--line); padding: 28px 16px; }
.rail a { border: 0; border-radius: 8px; margin: 4px 0; min-height: 44px; padding: 10px 14px; }
.rail a:hover,.rail a.active { background: var(--accent-soft); color: var(--accent); }
.brand { padding: 0 0 28px; }
.brand img { width: 174px; max-width: 100%; display: block; }
.rail-footer { color: var(--muted); }
.content { padding: clamp(20px, 4vw, 56px); min-width: 0; }
.rooms>li { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--panel); margin: 12px 0; }
.inline-form { gap: 16px; align-items: end; }
.inline-form label { min-width: 0; }
.session-warning { position: fixed; right: 24px; bottom: 24px; width: min(380px,calc(100% - 48px)); z-index: 100; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.session-warning p { margin: 0 0 12px; }
.staff-picker { position: relative; flex: 1; min-width: 200px; }
.staff-options { list-style: none; padding: 0; margin: 4px 0; width: 100%; }
.staff-options button { display: block; text-align: left; width: 100%; background: var(--accent-soft); color: var(--ink); border: 1px solid var(--line); margin: 4px 0; }
.staff-options small { display: block; color: var(--muted); }
.room-select option:disabled { color: var(--muted); }
.back-link { min-height: 44px; display: inline-flex; align-items: center; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 20px 0; }
.login-layout { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 100vh; width: 100%; margin: 0; padding: 0; align-items: stretch; }
.login-story { background: var(--story); padding: clamp(32px,5vw,72px); display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.login-story img { width: min(290px,100%); display: block; }
.login-story .eyebrow { color: var(--muted); font-size: .7rem; letter-spacing: .2em; font-weight: 750; }
.login-story h2 { font-size: clamp(2rem,4vw,3.5rem); line-height: 1.16; letter-spacing: -.055em; margin: 20px 0; max-width: 400px; }
.login-story p { max-width: 340px; color: var(--muted); }
.login-story footer { color: var(--muted); font-size: .8rem; margin-top: 48px; }
.login-forms { width: min(100%,540px); padding: 48px; margin: auto; min-width: 0; }
.login-forms .card { border: 0; box-shadow: none; padding: 0; background: transparent; }
.login-forms button[type=submit] { width: 100%; margin-top: 16px; }
.login-forms h1 { font-size: 2rem; margin-bottom: 14px; }
.login-badge { display: inline-flex; padding: 6px 12px; font-size: .7rem; font-weight: 750; letter-spacing: .12em; color: var(--muted); border: 1px solid var(--line); border-radius: 30px; margin-bottom: 24px; }
.login-forms label { margin-top: 20px; font-weight: 650; }
@media(max-width:760px) {
  .login-layout { grid-template-columns: 1fr; }
  .login-story { padding: 24px; gap: 20px; }
  .login-story img { width: 180px; }
  .login-story h2 { font-size: 2rem; margin: 12px 0; }
  .login-story footer { display: none; }
  .login-forms { padding: 28px 24px 48px; }
  .layout { grid-template-columns: 1fr; }
  .rail { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; }
  .rail ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .rail-footer { margin-top: 16px; }
  .brand { padding-bottom: 12px; }
  .content { padding: 20px 16px; }
  .card { padding: 20px; }
  .inline-form { flex-wrap: wrap; }
  .inline-form label { width: 100%; }
}

.login-layout {background:var(--panel);}
.room-select {display:block;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);}
.pw-eye {min-width:44px;min-height:44px;height:44px;}

/* Clinic-unit management: editable labels with explicit account impact. */
.clinic-unit-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; margin:16px 0 24px; }
.unit-manage-form { min-width:0; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.unit-manage-form label { display:block; overflow-wrap:anywhere; }
.unit-manage-form input { width:100%; min-width:0; margin-top:8px; }
.unit-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.unit-actions button { min-height:44px; }

.account-table-wrap { max-width:100%; overflow-x:auto; margin:16px 0; }
#accounts-table { display:table; min-width:1400px; max-width:none; overflow-wrap:normal; }
#accounts-table th { white-space:nowrap; }
#accounts-table td { min-width:100px; max-width:280px; overflow-wrap:anywhere; }
#accounts-table td:first-child { min-width:190px; }
#accounts-table td.units { min-width:230px; }
#accounts-table td:last-child { min-width:280px; }

.staff-options button { display: flex; align-items: center; gap: 12px; }
.staff-initials { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.room-share { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.room-share a { overflow-wrap: anywhere; min-width: 0; }
.linked-room { outline: 2px solid var(--accent); outline-offset: 3px; }

/* UI-5: the shared logo header on the pages that have neither a sign-in story nor an app header
   (mfa, reset, verify, app-reset and the patient visit page). The markup is in docs/ui-5-10/HTML-SPEC.md
   §1: one <header class="brand-header"> with the logo, before the page's sections. */
.brand-header { display: flex; justify-content: center; padding: clamp(20px, 4vw, 40px) 16px 0; }
.brand-header img { display: block; width: 174px; max-width: 100%; height: auto; }
.brand-header ~ .centered { min-height: calc(100vh - 120px); }
.brand-header a { display: inline-flex; min-height: 44px; align-items: center; }

/* UI-7: once the call opens, keep it below a compact status card rather than a full-height entry screen. */
body[data-page="visit"]:has(#visit-frame:not([hidden])) .centered { min-height: 0; }
body[data-page="visit"] #visit-frame:not([hidden]) { height: clamp(360px, 60vh, 720px); }
body[data-page="visit"] #visit-frame iframe { width: 100%; height: 100%; border: 0; }

/* UI-14: approved wordmark starts at 32.5% of the exact transparent logo width. */
.practice-brand { display: inline-flex; flex-direction: column; align-items: stretch; width: var(--practice-logo-width,174px); max-width: 100%; flex-shrink: 0; }
.practice-brand img { display: block; width: 100%; height: auto; }
.practice-subtitle { display: block; margin: var(--practice-subtitle-gap) 0 0; padding-left: var(--practice-wordmark-start); color: var(--muted); font: 500 var(--practice-subtitle-size)/1.25 var(--font-sans); overflow-wrap: anywhere; text-align: left; }
.login-story > .practice-brand { --practice-logo-width: 280px; }
.brand-header .practice-brand { vertical-align: middle; }
.wm:has(> .practice-brand) { display: block; margin: 0; }
.app-header a:has(> .practice-brand) { min-width: 0; max-width: 65%; }

/* UI-13: selected rounded visual system, across existing routes and states. */
body { font-optical-sizing: auto; }
button, input, select, textarea { font-family: var(--font-sans); }
h1, h2, h3 { letter-spacing: -.02em; }
button, input, select, textarea { border-radius: var(--radius-sm); }
button:not(.pw-eye), input:not([type=checkbox]):not([type=radio]), select { min-height: 44px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
.rail a { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-right: 12px; }
.card, .panel { border-radius: var(--radius-lg); }
@media (max-width: 600px) { .content { padding: 1rem 1rem 2rem; } }

/* UI12: readable columns inside a keyboard-scrollable results region on phones. */
.feedback-table-wrap { max-width:100%; overflow-x:auto; }
#feedback-table { display:table; min-width:48rem; max-width:none; table-layout:auto; }
#feedback-table th { white-space:nowrap; }
#feedback-table td { vertical-align:top; min-width:6rem; max-width:20rem; overflow-wrap:anywhere; }

.users-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: .75rem 0; }
#users-filter { margin-bottom: 1rem; }
#users-filter input[type=search] { min-width: 0; width: min(100%,24rem); }
#outbox-title { scroll-margin-top: 1rem; }