/* SBMCB — components
   The reusable pieces: panels, buttons, status, tables, the appointment
   timeline, attention items, patient signals, the activity feed and the
   patient drawer. Every one of them is a white surface, a hairline and
   typography doing the work. */

/* ---- Panel ------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.panel-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}

.panel-title { flex: 1 1 auto; font-size: var(--fs-sm); font-weight: 600; }
.panel-note { font-size: var(--fs-xs); color: var(--ink-3); }
.panel-body { padding: var(--s4); }
.panel-body--flush { padding: 0; }

.panel-foot {
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--surface-inset);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* ---- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 32px;
  padding: 0 var(--s3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-invert);
}

.btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}

.btn--quiet:hover { background: var(--surface-2); color: var(--ink); }

.btn--link {
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}

.btn--link:hover { text-decoration: underline; }

.btn[disabled] { opacity: 0.45; cursor: default; }

.btn-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* ---- Toggles and filters ------------------------------------------------ */

.seg {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.seg-btn {
  min-height: 30px;
  padding: 0 var(--s3);
  background: none;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  cursor: pointer;
}

.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { background: var(--surface-2); color: var(--ink); }

.seg-btn[aria-pressed="true"] {
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-weight: 600;
}

.field {
  min-height: 32px;
  padding: 0 var(--s3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
}

.field::placeholder { color: var(--ink-3); }
.field:focus { border-color: var(--accent); }

/* ---- Status ------------------------------------------------------------- */

/* Status is a word, not a colour. The dot carries the state so the label
   stays readable when colour is not available. */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  border-radius: 999px;
  background: var(--ink-3);
}

.status--completed { color: var(--pos); }
.status--completed::before { background: var(--pos); }

.status--confirmed::before { background: var(--accent); }

.status--scheduled::before { background: var(--series-ghost); }

.status--awaiting-payment { color: var(--warn); }
.status--awaiting-payment::before { background: var(--warn); }

.status--requires-action { color: var(--neg); }
.status--requires-action::before { background: var(--neg); }

.status--cancelled { color: var(--ink-3); text-decoration: line-through; }
.status--cancelled::before { background: var(--line-strong); }

.tag {
  display: inline-block;
  padding: 1px var(--s2);
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.tag--accent { background: var(--accent-wash); color: var(--accent-ink); }
.tag--warn { background: var(--warn-wash); color: var(--warn); }
.tag--pos { background: var(--pos-wash); color: var(--pos); }
.tag--neg { background: var(--neg-wash); color: var(--neg); }

/* ---- KPI --------------------------------------------------------------- */

/* Information blocks, not cards. No colour fill, no shadow, no icon
   ornament — a label, a figure, and the one comparison that makes the
   figure mean something. */
.kpi {
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.kpi-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.kpi-value {
  margin-top: var(--s2);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kpi-unit {
  margin-left: var(--s1);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
}

.kpi-sub {
  margin-top: var(--s2);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: var(--lh-snug);
}

.kpi-delta { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Appointment timeline ----------------------------------------------- */

.timeline { display: block; }

/* The shared shape of every worked-through list in the console: a time or
   date rail, a status rail, the substance, and the action. Appointments,
   tasks and queued messages are all read the same way, so they are all laid
   out the same way — but each keeps its own class, because a thing that is
   not an appointment must not answer to `.appt`. */
.list-row {
  display: grid;
  grid-template-columns: 76px 8px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-faint);
}

.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--surface-inset); }

.task-row { min-height: 52px; }
.msg-row { min-height: 56px; }

.appt--now { background: var(--accent-wash); }
.appt--past .appt-patient { color: var(--ink-2); }
.appt--cancelled { opacity: 0.55; }

.appt-time {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  padding-top: 1px;
}

.appt-duration { display: block; font-size: var(--fs-micro); color: var(--ink-3); }

/* The rail is the day running down the page. It is the only place in the
   console where a line is doing a job that a word could not do better. */
.appt-rail {
  width: 2px;
  align-self: stretch;
  margin-left: 3px;
  background: var(--line);
  border-radius: 999px;
}

.appt--completed .appt-rail { background: var(--pos); }
.appt--confirmed .appt-rail { background: var(--accent); }
.appt--awaiting-payment .appt-rail { background: var(--warn); }
.appt--requires-action .appt-rail { background: var(--neg); }
.appt--cancelled .appt-rail { background: var(--line-strong); }

.appt-main { min-width: 0; }

.appt-patient {
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appt-service { font-size: var(--fs-xs); color: var(--ink-2); }

.appt-meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s1);
  flex-wrap: wrap;
}

.appt-side {
  display: flex;
  align-items: center;
  gap: var(--s3);
  justify-self: end;
}

.appt-action { flex: none; }

/* ---- Needs attention ----------------------------------------------------- */

.attention { display: block; }

.attn-item {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: center;
  min-height: 60px;
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--line-faint);
}

.attn-item:last-child { border-bottom: 0; }

.attn-bar { align-self: stretch; border-radius: 999px; background: var(--ink-3); }

.attn-item--critical .attn-bar { background: var(--neg); }
.attn-item--attention .attn-bar { background: var(--warn); }
.attn-item--info .attn-bar { background: var(--line-strong); }

.attn-main { min-width: 0; }

.attn-title { font-size: var(--fs-sm); font-weight: 500; }

.attn-item--critical .attn-title { color: var(--neg); }

.attn-detail {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: var(--lh-snug);
}

.attn-action { flex: none; }

.attn-empty {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s5) var(--s4);
  color: var(--pos);
  font-size: var(--fs-sm);
}

/* ---- Patient signals ------------------------------------------------------ */

.patient-signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.signal {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  min-height: 46px;
  padding: var(--s3) var(--s4);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-faint);
  border-right: 1px solid var(--line-faint);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.signal:hover { background: var(--surface-2); }
.signal:nth-child(2n) { border-right: 0; }

.signal-value {
  font-size: var(--fs-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
}

.signal-label { flex: 1 1 auto; font-size: var(--fs-xs); color: var(--ink-2); }

.signal--warn .signal-value { color: var(--warn); }
.signal--neg .signal-value { color: var(--neg); }

/* ---- Activity ------------------------------------------------------------- */

.activity { display: block; }

.event {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--line-faint);
}

.event:last-child { border-bottom: 0; }

.event-time {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  white-space: nowrap;
}

.event-text {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: var(--lh-snug);
}

.event-kind {
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: var(--s2);
  border-radius: 999px;
  background: var(--series-ghost);
  vertical-align: middle;
}

.event--payment .event-kind { background: var(--pos); }
.event--cancellation .event-kind { background: var(--neg); }
.event--booking .event-kind { background: var(--accent); }
.event--registration .event-kind { background: var(--warn); }

/* ---- Tables ---------------------------------------------------------------- */

.table { font-size: var(--fs-xs); }

.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--s2) var(--s3);
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: left;
  white-space: nowrap;
}

.table td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line-faint);
  vertical-align: middle;
}

.table tbody tr:hover { background: var(--surface-inset); }

.table .right { text-align: right; font-variant-numeric: tabular-nums; }

.table-row-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent-ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.table-row-link:hover { text-decoration: underline; }

.table-wrap { max-height: 520px; overflow-y: auto; }

/* ---- Drawer ---------------------------------------------------------------- */

/* The one thing in this console that genuinely floats above the page: the
   patient workspace, opened from wherever the patient was mentioned. */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(17, 17, 17, 0.18);
}

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 50;
  width: min(560px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}

.drawer-title { flex: 1 1 auto; min-width: 0; }
.drawer-name { font-size: var(--fs-md); font-weight: 600; }
.drawer-sub { font-size: var(--fs-xs); color: var(--ink-2); }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s5); }
.drawer-close { flex: none; }

.drawer-section + .drawer-section { margin-top: var(--s5); }

.drawer-section-title {
  margin-bottom: var(--s2);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- Definition rows --------------------------------------------------------- */

.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2) var(--s4); }
.fact-key { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.fact-val { font-size: var(--fs-xs); color: var(--ink); }

/* ---- Empty and meter ---------------------------------------------------------- */

.empty {
  padding: var(--s7) var(--s4);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.meter {
  height: 4px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.meter-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.meter-fill--warn { background: var(--warn); }
.meter-fill--pos { background: var(--pos); }