/* Nixon Dental Floor Board — Modern Medical / U-Flow */

:root {
  --brand: #5B9BC6;
  --brand-deep: #3F7CA6;
  --brand-soft: #E8F2FA;
  --brand-tint: #F3F8FC;

  --ink-900: #0F172A;
  --ink-700: #334155;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-100: #F1F5F9;
  --ink-50:  #F8FAFC;

  --bg: #F4F7FB;
  --surface: #FFFFFF;

  --ok: #16A34A;
  --ok-soft: #DCFCE7;
  --warn: #D97706;
  --warn-soft: #FEF3C7;
  --bad: #DC2626;
  --bad-soft: #FEE2E2;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .03);
  --shadow-md: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .06);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 14px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--font);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  height: 100vh;
  overflow: hidden;
}

button { font-family: inherit; }

/* ============ TOP BAR ============ */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--ink-200);
  box-shadow: var(--shadow-sm);
  height: 64px;
  flex-wrap: nowrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.logoImg {
  height: 38px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.titleBlock {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  border-left: 1px solid var(--ink-200);
  padding-left: 12px;
}
.titleMain {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.titleSub {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-500);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tabs {
  display: flex;
  gap: 4px;
  background: var(--ink-100);
  padding: 4px;
  border-radius: 10px;
  flex-shrink: 0;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: none;
  background: transparent;
  color: var(--ink-500);
  font-size: 13px;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tab:hover { color: var(--ink-700); }
.tab.active {
  background: var(--surface);
  color: var(--brand-deep);
  box-shadow: var(--shadow-sm);
}
.tabBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--ink-200);
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
}
.tab.active .tabBadge {
  background: var(--brand-soft);
  color: var(--brand-deep);
}

.meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-left: auto;
  flex-shrink: 0;
}

.kpiInline {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  /* overflow visible so hover tooltips can escape the KPI strip */
  overflow: visible;
}
.kpiI {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 6px 14px;
  border-right: 1px solid var(--ink-200);
  min-width: 70px;
  white-space: nowrap;
}
.kpiI:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.kpiI:last-child { border-right: none; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

/* 2026-06-14 KPI REDESIGN — hover tooltips. Title bold, body regular, two lines. */
.kpiTip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 2000;
  background: #1f2937;
  color: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  max-width: 260px;
  width: max-content;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  pointer-events: none;
}
.kpiI:hover > .kpiTip { display: block; }
.kpiTip-t { display: block; font-weight: 700; margin-bottom: 2px; }
.kpiTip-b { display: block; font-weight: 400; }
/* upward arrow */
.kpiTip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 14px;
  border: 6px solid transparent;
  border-bottom-color: #1f2937;
}
.kpiI-l {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1;
  margin-bottom: 4px;
}
.kpiI-v {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kpiI-v.warn { color: var(--warn); }
.kpiI-v.kpi-yellow { color: #b45309; }
.kpiI-v.kpi-orange { color: var(--warn); }
.kpiI-v.kpi-red    { color: var(--bad); }
.kpiI-v.good       { color: var(--ok); }
.kpiI-v.bad        { color: var(--bad); }
.kpiI-of {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-400);
  margin-left: 1px;
}

.clock {
  text-align: right;
  line-height: 1.05;
}
.time {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.date {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-500);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.conn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  background: var(--ok-soft);
  color: var(--ok);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.conn.offline {
  background: var(--bad-soft);
  color: var(--bad);
}
.connDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

/* ============ DENTIST FILTER STRIP ============ */
.docFilter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--ink-200);
  height: 44px;
  overflow-x: auto;
  scrollbar-width: none;
}
.docFilter::-webkit-scrollbar { display: none; }

.docFilterLabel {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-right: 4px;
  flex-shrink: 0;
}

.docFilterDivider {
  width: 1px;
  height: 22px;
  background: var(--ink-200);
  margin: 0 6px;
  flex-shrink: 0;
}

.docPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
  flex-shrink: 0;
  white-space: nowrap;
}
.docPill:hover {
  border-color: var(--ink-300);
  background: var(--ink-50);
}
.docPill.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 2px 6px rgba(91, 155, 198, .3);
}
.docPill.active .docPillCount {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}
.docPillDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.docPillName { font-weight: 600; }
/* Clinical-tab dentist screener — reuses .docFilter/.docPill from floor board.
   Two surfaces: (1) inside #patientBody (Clinical tab), where it sits between
   the editor cards and the past-notes list; (2) inside the Edit treatment
   overlay's right pane. Both want a softer top border so it reads as a
   contextual control row, not a primary nav. */
.clinicalDocFilter {
  margin-bottom: 8px;
  border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-200);
  background: var(--ink-50);
  /* 2026-06-13 — Wrap to a second line in the Clinical tab instead of
     hidden horizontal scroll. Dentists per patient is typically small
     (1–5), wrapping reads better than scroll. Bump right padding so the
     last chip never kisses the patientBody's right edge. */
  flex-wrap: wrap;
  height: auto;
  min-height: 44px;
  row-gap: 6px;
  padding-right: 24px;
  overflow-x: visible;
}
.nxOvPaneRight .clinicalDocFilter {
  /* Inside the overlay right pane: tighter padding + no extra background
     since the pane already has its own surface. Also wraps when many
     dentists. */
  padding: 6px 14px 6px 12px;
  height: auto;
  min-height: 40px;
  background: var(--surface);
  border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-200);
  margin-bottom: 0;
  flex-wrap: wrap;
  row-gap: 6px;
  overflow-x: visible;
}
.docPillCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--ink-100);
  color: var(--ink-700);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.modePill {
  margin-left: auto;
  background: var(--surface);
  border-color: var(--ink-200);
  color: var(--ink-700);
  flex-shrink: 0;
}
.modePill:hover {
  border-color: var(--brand);
  color: var(--brand-deep);
}
.modePill.active {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}
.modeIcon { font-size: 14px; line-height: 1; }

/* ============ FLOOR LAYOUT — U-shape ============ */
.floor {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(0, 1fr)
    minmax(300px, 1.1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "outside pre  rooms"
    "done    post rooms";
  gap: 12px;
  padding: 12px 20px 16px;
  height: calc(100vh - 64px - 44px);
}

.zone.outside { grid-area: outside; }
.zone.pre     { grid-area: pre; }
.zone.post    { grid-area: post; }
.zone.done    { grid-area: done; }
.roomsCol     { grid-area: rooms; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.roomsCol .zone { flex: 1; min-height: 0; }

/* Flow arrows */
.flowArrow {
  position: absolute;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  z-index: 5;
  pointer-events: none;
  background: var(--brand);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px var(--bg), 0 2px 6px rgba(91, 155, 198, .35);
}
.flowArrow.a1 { top: 25%; left: 41.6%; transform: translate(-50%, -50%); }
.flowArrow.a2 { top: 25%; left: 69%;   transform: translate(-50%, -50%); }
.flowArrow.a3 { top: 75%; left: 69%;   transform: translate(-50%, -50%); }
.flowArrow.a4 { top: 75%; left: 41.6%; transform: translate(-50%, -50%); }

.roomsHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-900);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.roomsHeader .zoneCount {
  margin-left: auto;
  background: var(--brand-deep);
}
.ofTotal {
  font-size: 10px;
  font-weight: 600;
  opacity: .75;
  margin-left: 1px;
}

.stepNum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink-900);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-right: 4px;
}
.zone.outside .stepNum,
.roomsHeader  .stepNum { background: var(--brand-deep); }
.zone.pre     .stepNum { background: var(--warn); }
.zone.post    .stepNum { background: var(--ok); }
.zone.done    .stepNum { background: var(--ink-400); }

/* ============ ZONE BASE ============ */
.zone {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.zone.outside { background: linear-gradient(180deg, var(--brand-tint), var(--surface) 70%); }
.zone.pre     { background: linear-gradient(180deg, #FFF7ED, var(--surface) 70%); }
.zone.room    { background: linear-gradient(180deg, var(--brand-soft), var(--surface) 60%); }
.zone.post    { background: linear-gradient(180deg, #F0FDF4, var(--surface) 70%); }
.zone.done    { background: var(--ink-50); }

.zone.dropTarget {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.zoneHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--ink-200);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(4px);
  flex-shrink: 0;
}
.zoneTitle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-900);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.zoneIcon { font-size: 14px; }
.zoneCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--ink-900);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.zone.room .zoneCount     { background: var(--brand-deep); }
.zone.pre .zoneCount      { background: var(--warn); }
.zone.post .zoneCount     { background: var(--ok); }
.zone.done .zoneCount     { background: var(--ink-400); }
.zone.outside .zoneCount  { background: var(--brand-deep); }

/* "Add Walk-In" button — shown in the Not-arrived header only when a single
   dentist filter is active. Sits just left of the count badge. */
.walkInBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 8px;
  padding: 3px 10px;
  background: var(--brand-deep);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .12s ease;
}
.walkInBtn:hover { filter: brightness(1.08); }
.walkInBtn[hidden] { display: none; }
.walkInBtnIcon { font-size: 13px; line-height: 1; font-weight: 700; }

.cardList {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.cardList.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 7px;
  align-content: start;
}

/* ============ PATIENT CARD ============ */
.pCard {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .2s, filter .2s;
}
.pCard:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--ink-300);
}
.pCard:active { cursor: grabbing; }
.pCard.dragging { opacity: .5; }

/* Multi-service visit — the floor board collapsed N siblings (e.g. Filling +
   Whitening at 12:00 with the same dentist) into ONE card. Subtle inset orange
   border + an "Nx" pill next to the treatment chip make this obvious so
   reception knows moving this card cascades the zone change to all N appts. */
.pCard.pCardMulti {
  box-shadow: inset 0 0 0 1.5px rgba(249, 115, 22, .55), var(--shadow-sm);
}
.pCard.pCardMulti:hover {
  box-shadow: inset 0 0 0 1.5px rgba(249, 115, 22, .7), var(--shadow-md);
}
.pCardMultiPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 8px;
  background: rgba(249, 115, 22, .12);
  color: #c2410c;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(194, 65, 12, .35);
  vertical-align: middle;
}

/* Compact small cards in Outside / Done grids */
.pCard.sm { padding: 8px 10px; }
.pCard.sm .cardLine1 { margin-bottom: 4px; gap: 8px; }
.pCard.sm .patientName { font-size: 13px; }
.pCard.sm .apptTime    { font-size: 12px; padding: 1px 6px; }
.pCard.sm .cardLine2   { margin-bottom: 0; gap: 6px; }
.pCard.sm .docChip     { width: 18px; height: 18px; font-size: 9px; }
.pCard.sm .docName     { font-size: 11px; }
.pCard.sm .cardType {
  font-size: 11px;
  margin-top: 4px;
  margin-bottom: 0;
  padding-top: 4px;
  border-top: 1px dashed var(--ink-200);
}

/* Room cards — fill height */
.pCard.roomCard {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  background: linear-gradient(135deg, #fff, var(--brand-tint));
  gap: 10px;
}
.pCard.roomCard .roomCardTop  { display: flex; flex-direction: column; gap: 8px; }
.pCard.roomCard .roomCardBot  { display: flex; flex-direction: column; gap: 6px; }
.pCard.roomCard .patientName  { font-size: 18px; white-space: normal; line-height: 1.15; }
.pCard.roomCard .apptTime     { font-size: 13px; padding: 3px 8px; }
.pCard.roomCard .docName      { font-size: 13px; }
.pCard.roomCard .docChip      { width: 24px; height: 24px; font-size: 10px; }
/* Room cards: stack the name onto its own row so the time chip and the
   green elapsed stamp can never collide with the patient name on iPad widths. */
.pCard.roomCard .cardLine1    { margin-bottom: 0; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.pCard.roomCard .cardLine1 .patientName { flex: 1 0 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.pCard.roomCard .cardLine2    { margin-bottom: 0; }
.pCard.roomCard .cardType {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  margin: 0;
  padding: 6px 10px;
  background: var(--brand-soft);
  border-radius: 8px;
  white-space: normal;
  line-height: 1.3;
  text-overflow: clip;
  border-top: none;
}
.pCard.roomCard .cardCheckin { font-size: 11px; }

.pCard.warn   { border-left: 3px solid var(--warn); }
.pCard.alarm  { border-left: 3px solid var(--bad); background: linear-gradient(90deg, var(--bad-soft) 0%, var(--surface) 18%); }
.pCard.inroom { border-left: 3px solid var(--brand); }

.pCard.doneCard {
  opacity: .7;
  background: var(--surface);
  box-shadow: none;
}
.pCard.doneCard:hover { opacity: 1; }
.pCard.doneCard .patientName { color: var(--ink-700); }

.pCard.dna {
  opacity: .5;
  filter: grayscale(.5);
}

/* Round 2 (2026-05-09) — chair-block visual state.
   Patients whose registration form is not yet completed are dimmed and given
   a red warning so reception sees at a glance that they cannot be moved into
   a treatment chair. The hard block lives in moveCard().

   R4 (2026-05-12) — border-only signal, applied to every card regardless of
   zone. Green = form completed, red = anything else. No corner badge, no
   stripe background. Status surfaced via tooltip on the card. */
.pCard.formReady {
  border: 2px solid #16a34a;
}
.pCard.formBlocked {
  border: 2px solid #dc2626;
  opacity: .85;
}
.pCard.formBlocked:hover { opacity: 1; }
/* Yellow tint — the card's dentist has typed today's clinical treatment note.
   !important so it overrides the many zone/state background rules above. */
.pCard.pCard-noteTyped { background: #FEF3C7 !important; }

/* Round 3 (2026-05-09) — language badge.
   Tiny chip next to the patient name. Cantonese (default) renders no badge.
   English → "EN" (blue). Mandarin → "普" (deep red — reminds reception to
   switch register and avoid Cantonese-isms). Compact so it doesn't crowd the
   sex chip + name + birthday cake. */
.langBadge {
  /* R5 (2026-05-12) — bumped size, weight and contrast. Previous palette
     (blue EN / red 普) clashed with the new sex-coded name colors
     (pink F / blue M) and read like another gender signal. New palette:
     EN → deep teal, 普 → deep amber. Both are far from any pink/blue/red
     name tone and pass strong AA contrast against the card background. */
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 6px;
  letter-spacing: .4px;
  color: #fff;
  background: #0F766E;          /* default tone (overridden per-language below) */
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.langBadge.lang-en  { background: #0F766E; }   /* deep teal for EN */
.langBadge.lang-cmn { background: #B45309; }   /* deep amber for 普 */

/* ============ FLOOR-STATUS NOTE (pre-treatment only) ============
   Small bottom-right chip on pre-treatment cards. Empty state shows
   a discreet "+ Status" prompt; set state shows the actual status
   text in a brand-blue pill. Click opens a modal with preset buttons
   plus a free-text field. Storage is localStorage, date-keyed
   (auto-clears at HK midnight, and never persists past the pre-zone).
=========================================================================== */
.floorStatusWrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 6px;
  min-height: 22px;
}
.floorStatusBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--ink-200);
  background: var(--surface);
  color: var(--ink-500);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .08s ease;
  max-width: 100%;
  overflow: hidden;
}
.floorStatusBtn:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand-deep);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.floorStatusBtn:active { transform: translateY(1px); }
.floorStatusBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(91, 155, 198, .25);
}
.floorStatusBtn-empty {
  color: var(--ink-400);
  border-style: dashed;
  background: transparent;
}
.floorStatusBtn-empty:hover {
  color: var(--brand-deep);
  border-style: solid;
  background: var(--brand-tint);
}
.floorStatusBtn-set {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
}
.floorStatusBtn-set::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(91, 155, 198, .25);
}
.floorStatusBtn-set:hover {
  background: #DCEBF7;
  border-color: var(--brand-deep);
}
.floorStatusText {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floorStatusDots {
  font-weight: 500;
  letter-spacing: .01em;
}

/* Modal */
.floorStatusModalBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: floorStatusFadeIn .15s ease-out;
}
@keyframes floorStatusFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.floorStatusModal {
  background: var(--surface);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: floorStatusSlideIn .18s ease-out;
}
@keyframes floorStatusSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.floorStatusModalHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--ink-100);
}
.floorStatusModalHeadText { flex: 1 1 auto; min-width: 0; }
.floorStatusModalTitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -.01em;
}
.floorStatusModalSub {
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floorStatusModalClose {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-400);
  padding: 2px 6px;
  margin: -4px -6px 0 0;
  border-radius: 6px;
}
.floorStatusModalClose:hover { color: var(--ink-900); background: var(--ink-100); }
.floorStatusModalBody {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.floorStatusSectionLbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.floorStatusPresetGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.floorStatusPresetBtn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .08s ease;
}
.floorStatusPresetBtn:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand-deep);
}
.floorStatusPresetBtn:active { transform: scale(.98); }
.floorStatusPresetBtn.is-current {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.floorStatusOtherWrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.floorStatusOtherInput {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm, 8px);
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.floorStatusOtherInput::placeholder { color: var(--ink-400); }
.floorStatusOtherInput:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(91, 155, 198, .22);
}
.floorStatusModalFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--ink-100);
  background: var(--ink-50);
}
.floorStatusFootRight {
  display: flex;
  gap: 8px;
}
.floorStatusBtnClear,
.floorStatusBtnCancel,
.floorStatusBtnSave {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.floorStatusBtnClear {
  background: transparent;
  color: var(--ink-500);
  border-color: transparent;
}
.floorStatusBtnClear:hover { color: #B91C1C; background: #FEF2F2; }
.floorStatusBtnClear:disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
.floorStatusBtnCancel {
  background: var(--surface);
  color: var(--ink-700);
  border-color: var(--ink-200);
}
.floorStatusBtnCancel:hover { background: var(--ink-100); border-color: var(--ink-300); }
.floorStatusBtnSave {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.floorStatusBtnSave:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.floorStatusModalHint {
  font-size: 11px;
  color: var(--ink-500);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.floorStatusModalHint .floorStatusModalHintIcon {
  display: inline-block;
  font-style: normal;
  font-weight: 700;
  color: var(--brand);
  flex: 0 0 auto;
  line-height: 1.4;
}

/* Mobile tightening */
@media (max-width: 480px) {
  .floorStatusModal { max-width: calc(100vw - 24px); }
  .floorStatusPresetGrid { grid-template-columns: 1fr; }
  .floorStatusModalFoot { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .floorStatusFootRight { width: 100%; }
  .floorStatusBtnCancel, .floorStatusBtnSave { flex: 1; }
  .floorStatusBtnClear { width: 100%; text-align: center; }
}

/* ============ MOBILE STEPPER BUTTONS ============
   On touch devices, drag-drop is awkward. Show a clear back/forward
   stepper plus a "Move to…" picker on each card.
========================================================== */
.cardStepper {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-200);
}

.stepBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-height: 36px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  color: var(--ink-700);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.stepBtn:active { transform: scale(.97); }
.stepBtn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.stepBtn .stepArrow { font-size: 16px; line-height: 1; font-weight: 800; }
.stepBtn.next  { background: var(--brand); border-color: var(--brand); color: #fff; }
.stepBtn.next:disabled { background: var(--ink-100); border-color: var(--ink-200); color: var(--ink-400); }
.stepBtn.back  { background: var(--surface); }
.stepBtn.move  { flex: 0 0 auto; min-width: 36px; padding: 6px 10px; font-size: 14px; }

/* In room cards, place stepper at the bottom of the bot row */
.pCard.roomCard .cardStepper { margin-top: 6px; padding-top: 8px; }

/* Zone picker popover (anchored to a card when “Move to…” is tapped) */
.zonePicker {
  position: fixed;
  z-index: 90;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .15);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
}
.zonePicker.hidden { display: none; }
.zonePicker button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.zonePicker button:hover,
.zonePicker button:active { background: var(--ink-100); }
.zonePicker button.current {
  color: var(--brand-deep);
  background: var(--brand-soft);
}
.zonePicker button .pickerNum {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink-200);
  color: var(--ink-700);
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.zonePicker button.current .pickerNum {
  background: var(--brand);
  color: #fff;
}

.zonePickerBackdrop {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: transparent;
}
.zonePickerBackdrop.hidden { display: none; }

/* Filtered-out cards (dentist filter active) */
.pCard.dimmed {
  opacity: .2;
  filter: grayscale(.7);
  pointer-events: none;
}

/* Solo screen mode — hide non-active dentist cards entirely */
body.soloMode .pCard.dimmed {
  display: none;
}

.cardBadge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-bottom: 7px;
  background: var(--warn-soft);
  color: var(--warn);
}
.cardBadge.ok     { background: var(--ok-soft);   color: var(--ok); }
.cardBadge.inroom { background: var(--brand-soft); color: var(--brand-deep); }
.pCard.alarm .cardBadge { background: var(--bad-soft); color: var(--bad); }

.cardLine1 {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 5px;
}
.apptTime {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
  background: var(--brand-soft);
  padding: 2px 7px;
  border-radius: 6px;
  flex-shrink: 0;
}
.patientName {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* R5 (2026-05-12) — sex-coded name color, replacing the inline ♀/♂ chip.
   Female names render in a saturated pink, male in a strong blue. Tuned to
   pass WCAG AA against the card's white background while staying friendly. */
.patientName.patientNameF { color: #C8246E; }   /* pink (female) */
.patientName.patientNameM { color: #1E63D1; }   /* blue (male)   */
/* Hold the badge's white-on-color treatment even when the parent name is
   pink/blue sex-coded — the previous override broke contrast by recoloring
   the badge text to dark ink against a colored chip. */
.patientName.patientNameF .langBadge,
.patientName.patientNameM .langBadge { color: #fff; }
.cardLine2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.docChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}
.docName {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cardType {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-500);
  margin-bottom: 5px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cardCheckin {
  font-size: 10px;
  color: var(--ink-400);
  padding-top: 5px;
  border-top: 1px dashed var(--ink-200);
  font-variant-numeric: tabular-nums;
}
.cardCheckin b { color: var(--ink-700); font-weight: 700; }

/* Card flash on remote update */
@keyframes flashHi {
  0%   { box-shadow: 0 0 0 3px var(--brand); }
  100% { box-shadow: var(--shadow-sm); }
}
.pCard.flash { animation: flashHi 1s ease-out; }

/* Custom scrollbars */
.cardList::-webkit-scrollbar { width: 6px; }
.cardList::-webkit-scrollbar-track { background: transparent; }
.cardList::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 3px; }
.cardList::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* ============ V8 PER-CARD CHROME ============ */

/* Birthday cake emoji */
.birthdayCake {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  filter: saturate(1.15);
  cursor: help;
}
.pCard.roomCard .birthdayCake { font-size: 16px; }

/* Treatment shorthand pill
   R5 (2026-05-12) — allow the pill to wrap to a second line so long appt
   types like "NIGHT-GUARD IMPRESSION" stay inside the card instead of
   getting cut off at the right edge. We drop the nowrap and flex-shrink:0
   constraints; the pill now fills available width and word-breaks if needed. */
.treatChip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  /* Wrapping behavior — keep the pill compact when content fits on one line
     but allow it to wrap to a second line for long types. min-width:0 lets
     it shrink inside flex parents; word-break handles long single tokens. */
  white-space: normal;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}
.pCard.roomCard .treatChip {
  font-size: 12px;
  padding: 3px 9px;
}

/* Wait-elapsed badge with green→yellow→orange→red ramp */
.waitBadge {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.waitBadgeNum  { font-size: 11px; }
.waitBadgeUnit { font-size: 9px; font-weight: 600; opacity: .85; text-transform: uppercase; }

.waitBadge.wb-green {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: rgba(22, 163, 74, .18);
}
.waitBadge.wb-yellow {
  background: #FEF9C3;
  color: #854D0E;
  border-color: rgba(133, 77, 14, .2);
}
.waitBadge.wb-orange {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: rgba(217, 119, 6, .25);
}
.waitBadge.wb-red {
  background: var(--bad-soft);
  color: var(--bad);
  border-color: rgba(220, 38, 38, .28);
  animation: waitPulse 1.6s ease-in-out infinite;
}
@keyframes waitPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
}

.pCard.roomCard .waitBadge { padding: 3px 9px; }
.pCard.roomCard .waitBadgeNum  { font-size: 13px; }
.pCard.roomCard .waitBadgeUnit { font-size: 10px; }

/* ============ MOBILE / TABLET (≤ 960px) ============
   Stack zones vertically in patient-flow order:
   Not arrived → Pre → Rooms → Post → Done
========================================================== */
@media (max-width: 960px) {
  html, body { overflow: auto; height: auto; }

  .topbar {
    flex-wrap: wrap;
    height: auto;
    gap: 10px;
    padding: 10px 14px;
  }
  .topbar .brand { order: 1; }
  .topbar .meta  { order: 2; margin-left: auto; }
  .topbar .tabs  { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; }
  .titleBlock { padding-left: 10px; }
  .meta { gap: 10px; }
  .kpiInline { display: none; }              /* drop dense KPI strip on small screens */
  .clock .date { display: none; }
  .time { font-size: 20px; }
  .conn .connText { display: none; }
  .conn { padding: 5px 7px; }

  .docFilter {
    height: auto;
    padding: 8px 14px;
    flex-wrap: nowrap;
  }
  .docFilterLabel { display: none; }
  .docFilterDivider { display: none; }
  .modePill { margin-left: 6px; }
  .modePill .modeIcon + * { display: none; } /* keep just the icon on mobile */

  .floor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px 20px;
    height: auto;
    min-height: 0;
  }
  /* Re-order children using flex order so DOM order doesn't matter */
  .zone.outside { order: 1; }
  .zone.pre     { order: 2; }
  .roomsCol     { order: 3; }
  .zone.post    { order: 4; }
  .zone.done    { order: 5; }

  /* Each zone gets a sensible min-height so cards aren't squashed */
  .zone, .roomsCol { min-height: 200px; }
  .roomsCol .zone { min-height: 140px; }

  /* Arrows don't make sense in vertical stack — hide them */
  .flowArrow { display: none; }

  /* Looser card grids on mobile */
  .cardList.grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  /* Show stepper buttons on mobile, hide drag cursor */
  .cardStepper { display: flex; }
  .pCard { cursor: pointer; }
  .pCard:active { cursor: pointer; }

}

/* Phone (≤ 520px) — single column card grids, tighter padding */
@media (max-width: 520px) {
  .topbar { padding: 8px 12px; gap: 8px; }
  .logoImg { height: 32px; }
  .titleMain { font-size: 14px; }
  .titleSub  { font-size: 9px; }
  .tab { padding: 6px 10px; font-size: 12px; }

  .docFilter { padding: 6px 12px; gap: 5px; }
  .docPill { padding: 5px 9px; font-size: 11px; }

  .floor { padding: 10px 12px 16px; gap: 10px; }
  .cardList.grid {
    grid-template-columns: 1fr;
  }

  .pCard.roomCard .patientName { font-size: 16px; }
}

/* ============================================================
   APP SHELL — sidebar + main pane
   ============================================================ */
body.appShell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--ink-200);
  display: flex;
  flex-direction: column;
  transition: width .2s ease;
  z-index: 10;
}
body.sidebarCollapsed .sidebar { width: 64px; }
body.sidebarCollapsed .sidebarBrandText,
body.sidebarCollapsed .navLabel,
body.sidebarCollapsed .navHint { display: none; }
body.sidebarCollapsed .sidebarBrand { justify-content: center; padding: 16px 0; }
body.sidebarCollapsed .navItem { justify-content: center; padding: 12px 0; }

.sidebarBrand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--ink-100);
}
.sidebarLogo { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; }
.sidebarBrandName { font-weight: 700; color: var(--ink-900); font-size: 14px; line-height: 1.2; }
.sidebarBrandSub  { font-size: 11px; color: var(--ink-500); }

.sidebarNav {
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 2px;
  flex: 1;
}
.navItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-700);
  cursor: pointer;
  transition: background .15s ease;
  position: relative;
}
/* 2026-06-01 — .navItem uses display:flex which overrode the implicit
   [hidden]{display:none}. Without this rule, JS that sets el.hidden=true
   on dentist accounts (Pending Changes, Availability) had no visual effect. */
.navItem[hidden] { display: none !important; }
.navItem:hover { background: var(--ink-50); color: var(--ink-900); }
.navItem.active {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.navItem.active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--brand);
  border-radius: 2px;
}
.navIcon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.navLabel { font-weight: 600; font-size: 13px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navHint  { display: none; }  /* hide hints in narrow sidebar — they were confusing the layout */
.navItem.active .navHint { color: var(--brand-deep); opacity: .8; }

.sidebarFooter {
  padding: 10px;
  border-top: 1px solid var(--ink-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
/* When sidebar is collapsed, stack chip + toggle vertically and hide chip text. */
body.sidebarCollapsed .sidebarFooter {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.sidebarToggle {
  background: transparent;
  border: 1px solid var(--ink-200);
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1;
}
.sidebarToggle:hover { background: var(--ink-50); color: var(--ink-700); }

.appMain {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.view.hidden { display: none; }

/* ============================================================
   REFRESH BUTTON
   ============================================================ */
.refreshBtn {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-500);
  font-size: 16px;
  line-height: 1;
  transition: transform .25s ease, color .15s ease;
}
.refreshBtn:hover { color: var(--brand); }
.refreshBtn:active { transform: rotate(180deg); }

/* ============================================================
   CALENDAR — ADJUSTMENT PANEL (card height / font / zoom)
   Replaces the old ↻ refresh button. Sliders drive two CSS
   variables read by the calendar grid: --calSlotH (px per 15m)
   and --calFontScale (multiplier). Prefs are saved per account.
   ============================================================ */
.calAdjustWrap { position: relative; display: inline-flex; }
.calAdjustBtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--ink-200);
  height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  color: var(--ink-700, #334155); font-size: 13px; font-weight: 600; line-height: 1;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.calAdjustBtn svg { width: 15px; height: 15px; }
.calAdjustBtn:hover { border-color: var(--brand); color: var(--brand); }
.calAdjustBtn.active { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-soft); }
.calAdjustPanel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 320px;
  background: var(--surface); border: 1px solid var(--ink-200); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(16,24,40,.16); padding: 16px 16px 14px;
  /* Sit above the sticky daily-remarks header (z:300) so the panel is never
     covered by it; still below modals/scrims (z:900+). */
  z-index: 400;
  max-height: calc(100vh - 120px); overflow-y: auto;
}
.calAdjustPanel[hidden] { display: none; }
.calAdjustHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calAdjustTitle { font-size: 14px; font-weight: 800; color: var(--ink-900, #0f172a); }
.calAdjustReset {
  border: 0; background: transparent; color: var(--ink-500);
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.calAdjustReset:hover { background: var(--ink-100, #f1f5f9); color: var(--ink-700, #334155); }
.calAdjustRow { padding: 10px 0; border-top: 1px solid var(--ink-100, #f1f5f9); }
.calAdjustRow:first-of-type { border-top: 0; }
.calAdjustRowTop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; }
.calAdjustLabel { font-size: 12.5px; font-weight: 700; color: var(--ink-700, #334155); }
.calAdjustHint { font-size: 11px; color: var(--ink-400, #94a3b8); margin-top: 1px; }
.calAdjustVal {
  font-size: 12px; font-weight: 700; color: var(--brand-deep);
  background: var(--brand-soft); border-radius: 6px; padding: 3px 8px;
  min-width: 52px; text-align: center; white-space: nowrap;
}
.calAdjustRowMaster .calAdjustVal { color: #fff; background: var(--brand); }
.calAdjustSlider {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px; background: var(--ink-200); outline: none; margin: 0;
}
.calAdjustSlider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand); cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(16,24,40,.25);
}
.calAdjustSlider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--brand);
  cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(16,24,40,.25);
}
.calAdjustNote { font-size: 10.5px; color: var(--ink-400, #94a3b8); margin-top: 6px; line-height: 1.4; }
.calAdjustResetBtn {
  display: block; width: 100%; margin-top: 14px;
  height: 36px; border-radius: 9px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--ink-200);
  color: var(--ink-700, #334155); font-size: 13px; font-weight: 700; font-family: inherit;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.calAdjustResetBtn:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-soft); }

/* ============================================================
   DAILY SCHEDULE — DATE PICKER
   ============================================================ */
.schedDatePickWrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}
.schedDatePick {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
  color: var(--ink-700);
  font-family: inherit;
  cursor: pointer;
}
.schedDatePick:hover { border-color: var(--brand); }
.schedDatePick:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(var(--brand-rgb,59,130,246), 0.15);
}
.schedTodayBtn {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-500);
  cursor: pointer;
  font-family: inherit;
  transition: color .15s ease, border-color .15s ease;
}
.schedTodayBtn:hover {
  color: var(--brand);
  border-color: var(--brand);
}
.schedNavBtn {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  height: 32px;
  width: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-500);
  cursor: pointer;
  font-family: inherit;
  transition: color .15s ease, border-color .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.schedNavBtn:hover {
  color: var(--brand);
  border-color: var(--brand);
}
.schedNavBtn:active { transform: translateY(1px); }

/* ============================================================
   SCHEDULE VIEW
   ============================================================ */
.schedBody {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* 2026-06-23 sched-hscroll — allow horizontal scrolling when N dentist
     columns at their minimum width exceed the viewport. Previously hidden,
     which forced wide grids to squash columns and wrap long appt-type pills
     one character per line. The minimum-width rules per col-count live in
     the [data-col-count] block lower in the file. */
  overflow-x: auto;
  padding: 16px;
  display: grid;
  /* 2026-06-22 sched-fullwidth — equal-share columns that consume the FULL
     container width regardless of dentist count. The old
     `repeat(auto-fit, minmax(440px,1fr))` left a large empty band on the
     right with 2 columns (auto-fit reserved a phantom 3rd track on wide
     screens). Drive the track count off data-col-count (set by the JS render)
     so N dentists => N equal 1fr columns. Per-count rules live near the
     bottom of this file alongside the other [data-col-count] overrides. */
  grid-template-columns: minmax(0, 1fr);
  /* Each grid row sizes to its tallest column's content — not to viewport.
     Without this, browsers can stretch implicit rows to fill the grid's
     remaining height, and rows that wrap (e.g. long planned-treatment
     notes) end up visually clipped past the viewport with no scroll. */
  grid-auto-rows: max-content;
  gap: 16px;
  align-content: start;
  align-items: start;
}
.schedEmpty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-500);
  font-size: 14px;
  grid-column: 1 / -1;
}
.schedEmpty.error { color: var(--bad); }
.schedEmpty.small { padding: 16px; font-size: 12px; }

.schedColumn {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  /* No overflow:hidden — it caused tall columns (e.g. 12+ rows with wrapped
     planned-treatment notes) to be clipped at the viewport with the page
     refusing to scroll past 17:30. Border-radius alone keeps the corners
     rounded; rows fit naturally inside the column's height. */
  min-height: 0;
}
.schedColHead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ink-100);
  background: var(--brand-tint);
  /* Inherit the column's rounded top corners since the column no longer
     uses overflow:hidden as a clipping mask. */
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.schedColDot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.schedColName { font-weight: 700; color: var(--ink-900); font-size: 14px; flex: 1; }
.schedColCount {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-700);
}
.schedColBody { padding: 4px; }

.schedRow {
  display: grid;
  /* 2026-07-01 sched-redesign v34 — 4-column 2-row layout (mockup):
     [time]  [main: rowA name / rowB planned+lab]  [type pill]  [duration]
     Applies to both the Daily Schedule tab and the calendar day view (they
     share renderSchedule). Context overrides (data-col-count / mobile) below
     are re-pointed at this same track set. */
  grid-template-columns: 64px 1fr 130px 42px;
  gap: 12px;
  align-items: start;
  padding: 11px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
  border-bottom: 1px solid var(--ink-100);
  position: relative;
  background: #fff;
}
.schedRow.schedRow-pre,
.schedRow.schedRow-room1,
.schedRow.schedRow-room2,
.schedRow.schedRow-room3,
.schedRow.schedRow-post { background: rgba(34, 197, 94, .06); }
.schedRow.schedRow-done { background: rgba(100, 116, 139, .06); opacity: .7; }
.schedTimes { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.schedArrived {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 17px;
  font-weight: 700;
  color: #15803D;
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  border-radius: 4px;
  padding: 1px 5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  white-space: nowrap;
}
.schedDNA {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 17px;
  font-weight: 700;
  color: #991B1B;
  background: #FEE2E2;
  border: 1px solid #FCA5A5;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
.schedConfirmedTick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: #f97316; /* orange-500 — "confirmed by reception" */
  box-shadow: 0 0 0 1px rgba(255,255,255,.85);
}
.schedRow.schedRow-arrived { background: rgba(34, 197, 94, .06); }
.schedRow:last-child { border-bottom: none; }
.schedRow:hover { background: var(--ink-50); }
/* Yellow tint — the row's dentist has typed today's clinical note. Placed after
   the zone rules so it wins at equal specificity (good-state confirmation). */
.schedRow.schedRow-noteTyped { background: #FEF3C7; }

/* 2026-06-28 CAL-FOCUS — brief highlight when the user lands on this row via the
   Appointments-tab "Calendar" deep-link. A short brand-tinted pulse + ring makes
   the exact appointment obvious without being garish. !important + high
   specificity so it wins over the zone/arrived/noteTyped background rules above
   while the flash is active. The class is auto-removed by JS after ~2.6s. */
.schedRow.schedRow-flash {
  animation: schedRowFlash 2.6s ease-out 1;
  position: relative;
  z-index: 1;
}
@keyframes schedRowFlash {
  0% {
    background: var(--brand-soft) !important;
    box-shadow: 0 0 0 2px var(--brand), 0 4px 14px rgba(91, 155, 198, .35);
  }
  60% {
    background: var(--brand-soft) !important;
    box-shadow: 0 0 0 2px var(--brand), 0 4px 14px rgba(91, 155, 198, .28);
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 0 rgba(91, 155, 198, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Honour reduced-motion: hold a static highlight instead of pulsing. */
  .schedRow.schedRow-flash {
    animation: none;
    background: var(--brand-soft) !important;
    box-shadow: 0 0 0 2px var(--brand);
  }
}
.schedTime {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--brand-deep);
  font-size: 18px;
  line-height: 1;
}
/* 2026-07-01 v34 — 2-row main column (mockup .schedMain/.rowA/.rowB). */
.schedMain { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rowA { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.rowB { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
/* Patient-ref chip (rowA) — mockup .schedRef. */
.schedRef {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-600);
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 4px;
  padding: 1px 5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  flex-shrink: 0;
}
/* Appointment-type pill lives in its own column, left-aligned (mockup). */
.schedType { padding-top: 1px; }
/* ===== LAB WORK strip — 5 statuses, each its own colour + glyph (mockup) ===== */
.labStrip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 3px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: var(--lab-soft);
  color: var(--lab-ac);
  border: 1px solid color-mix(in srgb, var(--lab-ac) 24%, #fff);
  white-space: nowrap;
}
.labStrip .g {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--lab-ac);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}
.labStrip .st { font-weight: 800; letter-spacing: .2px; }
.labStrip.flagged  { --lab-ac: #B45309; --lab-soft: #FEF3C7; }
.labStrip.prepared { --lab-ac: #5B4BC4; --lab-soft: #EDEAFB; }
.labStrip.sent     { --lab-ac: #1D6FB8; --lab-soft: #E3F0FB; }
.labStrip.overdue  { --lab-ac: #DC2626; --lab-soft: #FEECEC; }
.labStrip.returned { --lab-ac: #1F7D5C; --lab-soft: #E1F4EC; }
.schedPatient {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
}
/* 2026-06-01 sched-redesign — name line wraps sex chip / ref / name / alert / lab
   together on the first line; branch chip drops to its own line below. */
.schedNameLine {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.schedName {
  font-weight: 700;
  color: var(--ink-900);
  font-size: 15px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Name coloured by sex (no gender glyph) — mirrors .calApptNameM/.calApptNameF. */
.schedName.m { color: #1565C0; }
.schedName.f { color: #C2185B; }
/* Branch chip on its own line below the name (sched-redesign 2026-06-01). */
.schedBranchChip {
  margin-top: 2px;
  display: inline-flex;
  width: max-content;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-600);
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* 2026-05-21 — Patient reference chip on Daily Schedule rows. Sits between
   the sex chip and the patient name so reception can quote the # without
   opening the row. Tabular numerals so M50001 / C00794 line up vertically. */
.schedPatientRef {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-600);
  background: var(--ink-50, #f1f5f9);
  border: 1px solid var(--ink-200, #e2e8f0);
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  vertical-align: 1px;
  flex-shrink: 0;
}

/* 2026-05-21 — patient reference chip on Floor Board patient cards.
   Same visual language as .schedPatientRef but sized for the smaller
   floor-board card metrics (10px chip text, tighter padding). Sits in
   cardLine1 between the arrival stamp and the patient name. */
.fbPatientRef {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-600, #475569);
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 3px;
  padding: 0 4px;
  margin-right: 4px;
  line-height: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  white-space: nowrap;
}
.pCard.sm .fbPatientRef {
  font-size: 9px;
  line-height: 13px;
  padding: 0 3px;
  margin-right: 3px;
}
.medAlertIcon {
  font-size: 14px;
  cursor: help;
  flex-shrink: 0;
  filter: hue-rotate(-10deg);
}
.schedLabChip {
  font-size: 20px;
  flex-shrink: 0;
  cursor: help;
}
/* +50% schedule row text (Panel B, v3n) — scope the shared medical-alert
   icon increase to the schedule name line so the medAlertBanner is unaffected. */
.schedNameLine .medAlertIcon {
  font-size: 21px;
}
/* Appointment type rendered as a pill chip (sched-redesign 2026-06-01). */
.schedTreat {
  display: inline-block;
  font-size: 12px;
  color: var(--ink-700);
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 4px;
  padding: 2px 8px;
  text-align: left;
  line-height: 1.3;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  min-width: 0;
}
.schedDur {
  font-size: 13px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
  padding-top: 2px;
}

/* Planned-treatment line on schedule rows — shows the dentist's free-text
   plan ("(CT) SP + EXT 48' (+/-XN 18) GI") imported from ClinicSolution and
   preserved in Cliniko's appointment.notes "reason=" field. */
.schedPatientLine {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* Planned-treatment column (sched-redesign 2026-06-01) — gets its own grid
   column on the schedule row. 2026-06-22 sched-fullwidth: the Daily Schedule
   is a glance-first page, so wrap the full remark/plan text instead of the
   old 2-line ellipsis clamp. Rows grow vertically to fit. */
.schedPlanned {
  font-size: 14px;
  color: var(--ink-600);
  font-weight: 500;
  line-height: 1.4;
  display: block;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

/* Planned-treatment line on floor cards — shown beneath the doc/treat row. */
.cardPlanned {
  font-size: 12px;
  color: var(--ink-700);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 2px;
  padding: 3px 6px;
  background: rgba(245, 158, 11, .08);
  border-left: 2px solid #F59E0B;
  border-radius: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pCard.sm .cardPlanned { font-size: 11px; padding: 2px 5px; }
.pCard.roomCard .cardPlanned { font-size: 13px; padding: 4px 8px; }

/* Plan pill in the treatment-note editor header strip — distinct color so
   the dentist immediately spots the planned treatment vs the appt type. */
.editorMetaPair.editorMetaPlanned {
  background: rgba(245, 158, 11, .1);
  border-color: #F59E0B;
}
.editorMetaPair.editorMetaPlanned .editorMetaV {
  color: #92400E;
  font-weight: 600;
}

/* ============================================================
   LAB VIEW — Phase 1 D1-native module (3 sub-tabs + slide-in)
   Overview (command center) · Status Board (kanban) · End-of-Day Checklist
   Faithfully ports approved mockups A / B / C. 2026-06-29.
   ============================================================ */
#view-lab {
  --lab-amber: #B45309; --lab-amber-bg: #FFFBEB; --lab-amber-bd: #FCD34D;
  --lab-red: #B91C1C; --lab-red-bg: #FEF2F2; --lab-red-bd: #FCA5A5;
  --lab-green: #15803D; --lab-green-bg: #F0FDF4; --lab-green-bd: #86EFAC;
  --lab-violet: #6D5BA6; --lab-violet-bg: #F3F0FC; --lab-violet-bd: #DDD2F2;
  --lab-male: #5B9BC6; --lab-female: #E9879F;
  --lab-radius: 14px;
  --lab-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  --lab-shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
}

/* container — sub-tab nav + body render inside via JS */
.labBody {
  flex: 1;
  overflow: auto;
  padding: 0;
  display: block;
  background: var(--ink-50);
}
.labEmpty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-400);
  font-size: 13px;
  font-weight: 600;
}
.labEmpty.error { color: var(--lab-red); }
.labEmpty.small { padding: 22px 16px; font-size: 12.5px; }

/* sub-tab header */
.labSubhead {
  padding: 18px 22px 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.labPageTitle { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-900); }
.labPageSub { color: var(--ink-500); font-size: 13px; margin-top: 3px; }
.labSubtabs { display: flex; gap: 6px; background: var(--ink-100); padding: 4px; border-radius: 10px; }
.labSubtab {
  padding: 7px 16px; border-radius: 7px; font-weight: 700; font-size: 13px;
  color: var(--ink-500); cursor: pointer; border: none; background: transparent;
  font-family: inherit;
}
.labSubtab:hover { color: var(--ink-700); }
.labSubtab.active { background: #fff; color: var(--brand-deep); box-shadow: var(--lab-shadow); }
.labSubtabBadge {
  background: var(--lab-amber); color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 999px; padding: 1px 6px; margin-left: 2px;
}
.labSubbody { padding: 0; }

/* ===== OVERVIEW (Mockup C) ===== */
.labKpis {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  padding: 18px 22px 4px;
}
.labKpi {
  background: #fff; border: 1px solid var(--ink-200); border-radius: var(--lab-radius);
  padding: 14px 15px; box-shadow: var(--lab-shadow);
}
.labKpi.danger { border-color: var(--lab-red-bd); background: linear-gradient(180deg, var(--lab-red-bg), #fff); }
.labKpi.danger .labKpiNum, .labKpi.danger .labKpiLbl { color: var(--lab-red); }
.labKpi.ok { border-color: var(--lab-green-bd); background: linear-gradient(180deg, var(--lab-green-bg), #fff); }
.labKpi.ok .labKpiNum, .labKpi.ok .labKpiLbl { color: var(--lab-green); }
.labKpi.violet { border-color: var(--lab-violet-bd); background: linear-gradient(180deg, var(--lab-violet-bg), #fff); }
.labKpi.violet .labKpiNum, .labKpi.violet .labKpiLbl { color: var(--lab-violet); }
.labKpiLbl { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); }
.labKpiNum { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-top: 7px; line-height: 1; color: var(--ink-900); }
.labKpiDelta { font-size: 11.5px; color: var(--ink-400); font-weight: 600; margin-top: 5px; }

.labGrid2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; padding: 16px 22px 40px; }
.labStack { display: flex; flex-direction: column; gap: 16px; }
.labCard {
  background: #fff; border: 1px solid var(--ink-200); border-radius: var(--lab-radius);
  box-shadow: var(--lab-shadow); overflow: hidden;
}
.labCardH { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-bottom: 1px solid var(--ink-100); }
.labCardT { font-weight: 800; font-size: 14px; color: var(--ink-900); }
.labCardIco { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.labCardPill { margin-left: auto; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.labCardH.amber .labCardIco { background: var(--lab-amber-bg); color: var(--lab-amber); }
.labCardH.amber .labCardPill { background: var(--lab-amber-bg); color: var(--lab-amber); border: 1px solid var(--lab-amber-bd); }
.labCardH.brand .labCardIco { background: var(--brand-soft); color: var(--brand-deep); }
.labCardH.brand .labCardPill { background: var(--brand-soft); color: var(--brand-deep); }
.labCardH.violet .labCardIco { background: var(--lab-violet-bg); color: var(--lab-violet); }
.labCardH.violet .labCardPill { background: var(--lab-violet-bg); color: var(--lab-violet); border: 1px solid var(--lab-violet-bd); }
.labCardH.green .labCardIco { background: var(--lab-green-bg); color: var(--lab-green); }
.labCardH.green .labCardPill { background: var(--lab-green-bg); color: var(--lab-green); border: 1px solid var(--lab-green-bd); }

.labLi { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--ink-100); cursor: pointer; }
.labLi:last-child { border-bottom: none; }
.labLi:hover { background: var(--brand-tint); }
.labGstripe { width: 4px; height: 34px; border-radius: 3px; flex: none; background: var(--ink-300); }
.labGstripe.male { background: var(--lab-male); }
.labGstripe.female { background: var(--lab-female); }
.labLiMain { flex: 1; min-width: 0; }
.labLiNm { font-weight: 700; font-size: 13.5px; color: var(--ink-900); display: flex; align-items: center; gap: 7px; }
.labLiMeta { font-size: 11.5px; color: var(--ink-500); font-weight: 600; margin-top: 2px; }
.labLiMeta b { color: var(--ink-700); }
.labRt { text-align: right; flex: none; }
.labSub { font-size: 11px; color: var(--ink-400); font-weight: 600; margin-top: 3px; }
.labAct {
  flex: none; display: inline-flex; align-items: center; gap: 5px; background: var(--brand);
  color: #fff; border: none; padding: 6px 11px; border-radius: 7px; font-weight: 700;
  font-size: 11.5px; cursor: pointer; font-family: inherit;
}
.labAct:hover { background: var(--brand-deep); }
.labAct.amber { background: var(--lab-amber); }
.labAct.green { background: var(--lab-green); }
.labAct.violet { background: var(--lab-violet); }

.labBadge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--ink-100); color: var(--ink-500); }
.labBadge.urgent { background: var(--lab-red-bg); color: var(--lab-red); border: 1px solid var(--lab-red-bd); }
.labBadge.lock { background: var(--brand-soft); color: var(--brand-deep); }

.labSrcBadge { font-size: 9px; font-weight: 800; letter-spacing: .03em; padding: 2px 6px; border-radius: 5px; display: inline-block; }
.labSrcBadge.dentist { background: var(--brand-soft); color: var(--brand-deep); }
.labSrcBadge.checkout { background: var(--ink-100); color: var(--ink-500); }
.labSrcBadge.manual { background: #fff; border: 1px solid var(--ink-200); color: var(--ink-500); }

/* Req E/F flow markers on lab checklist rows */
.labFlowBadge { font-size: 9px; font-weight: 800; letter-spacing: .02em; padding: 2px 6px; border-radius: 5px; display: inline-block; margin-left: 6px; white-space: nowrap; vertical-align: middle; }
.labFlowBadge.autoflag { background: #fdecec; color: #b42318; border: 1px solid #f5c2c0; }
.labFlowBadge.awaiting { background: #fff5e6; color: #b25e00; border: 1px solid #f5d99b; }
.labFlowBadge.carry { background: #eef2ff; color: #3538cd; border: 1px solid #c7ccf7; }

/* ===== STATUS BOARD (Mockup A — kanban) ===== */
.labBoard { display: flex; gap: 14px; padding: 18px 22px 40px; overflow-x: auto; align-items: flex-start; }
.labLane { flex: 0 0 270px; background: var(--ink-100); border-radius: 14px; padding: 10px; min-height: 120px; }
.labLane.overdue { background: #FFFBF4; border: 1px solid var(--lab-amber-bd); }
.labLane.returned { background: #F4FBF6; }
.labLaneStripe { height: 3px; border-radius: 3px; margin: 0 6px 8px; background: var(--ink-300); }
.labLane.prepared .labLaneStripe { background: #A78BFA; }
.labLane.production .labLaneStripe { background: #5B9BC6; }
.labLane.sent .labLaneStripe { background: #3F7CA6; }
.labLane.returned .labLaneStripe { background: var(--lab-green); }
.labLane.overdue .labLaneStripe { background: var(--lab-amber-bd); }
.labLaneHead { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; }
.labLaneTitle { font-weight: 800; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-700); }
.labLane.overdue .labLaneTitle { color: var(--lab-amber); }
.labLaneCount { margin-left: auto; background: #fff; border: 1px solid var(--ink-200); color: var(--ink-500); font-weight: 800; font-size: 11px; border-radius: 999px; padding: 2px 8px; }

.labBoardCard {
  background: #fff; border: 1px solid var(--ink-200); border-radius: 11px; padding: 0;
  margin-bottom: 9px; box-shadow: var(--lab-shadow); overflow: hidden; cursor: pointer;
  transition: box-shadow .12s, transform .04s;
}
.labBoardCard:hover { box-shadow: var(--lab-shadow-md); }
.labBoardCard:active { transform: translateY(1px); }
.labCardGender { height: 3px; width: 100%; background: var(--ink-300); }
.labCardGender.male { background: var(--lab-male); }
.labCardGender.female { background: var(--lab-female); }
.labCardBody { padding: 11px 12px 12px; }
.labCardTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.labPtName { font-weight: 700; font-size: 13.5px; color: var(--ink-900); }
.labPtId { font-size: 11px; color: var(--ink-400); font-weight: 600; margin-top: 1px; }
.labWorkChip {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  background: var(--brand-soft); color: var(--brand-deep); white-space: nowrap; display: inline-block;
}
.labWorkChip.empty { background: var(--ink-100); color: var(--ink-400); }
.labCardMeta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.labMeta {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-500);
  font-weight: 600; background: var(--ink-50); border: 1px solid var(--ink-100); padding: 3px 7px; border-radius: 6px;
}
.labMeta b { color: var(--ink-700); font-weight: 700; }
.labCardFit {
  margin-top: 9px; padding: 7px 9px; background: var(--brand-tint); border-radius: 7px;
  font-size: 11.5px; color: var(--ink-700); display: flex; align-items: center; gap: 6px;
}
.labCardFit.unlinked { background: #F6F4FB; color: var(--lab-violet); }
.labFitLbl { color: var(--ink-400); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; }
.labCardFoot { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--ink-100); }
.labCycleBtn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px; background: var(--brand);
  color: #fff; border: none; padding: 6px 11px; border-radius: 7px; font-weight: 700; font-size: 11.5px;
  cursor: pointer; font-family: inherit;
}
.labCycleBtn:hover { background: var(--brand-deep); }
.labAddCard {
  width: 100%; padding: 9px; border: 1px dashed var(--ink-300); border-radius: 9px; background: transparent;
  color: var(--ink-400); font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit;
}
.labAddCard:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-tint); }

/* ===== END-OF-DAY CHECKLIST (Mockup B) ===== */
.labEodBanner {
  margin: 16px 22px 0; display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  background: var(--lab-amber-bg); border: 1px solid var(--lab-amber-bd); border-radius: var(--lab-radius);
  color: var(--lab-amber); font-weight: 600; font-size: 13px;
}
.labEodBanner .ico { font-size: 16px; }
.labEodBanner.ok { background: var(--lab-green-bg); border-color: var(--lab-green-bd); color: var(--lab-green); }
.labSubbody > .labCard { margin: 14px 22px 40px; }
.labRow {
  display: grid; grid-template-columns: 30px 2.2fr 1.4fr 1.3fr 1.4fr 1fr; align-items: center;
  gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ink-100); cursor: pointer;
}
.labRow:last-child { border-bottom: none; }
.labRow:hover { background: var(--brand-tint); }
.labRow.head {
  background: var(--ink-50); cursor: default; font-size: 10.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-400); padding: 9px 16px;
}
.labRow.head:hover { background: var(--ink-50); }
.labRow.locked-row { background: #FAFCFE; }
.chk { width: 19px; height: 19px; border-radius: 6px; border: 2px solid var(--ink-300); position: relative; }
.chk.done { background: var(--brand); border-color: var(--brand); }
.chk.done:after { content: "\2713"; color: #fff; font-size: 12px; font-weight: 900; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.chk.lock { border-color: var(--brand-deep); background: var(--brand-soft); }
.chk.lock:after { content: "\1F512"; font-size: 10px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.labCellPt { display: flex; align-items: center; gap: 10px; }
.labPtSub { font-size: 11.5px; color: var(--ink-400); font-weight: 600; }
.labFitCell { font-size: 12px; color: var(--ink-700); font-weight: 600; }
.labFitCell .lbl { font-size: 10px; color: var(--ink-400); text-transform: uppercase; letter-spacing: .03em; display: block; font-weight: 700; }
.labPillStatus { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; }
.labPillStatus.need { background: var(--lab-amber-bg); color: var(--lab-amber); border: 1px solid var(--lab-amber-bd); }
.labPillStatus.ok { background: var(--lab-green-bg); color: var(--lab-green); border: 1px solid var(--lab-green-bd); }
.labPillStatus.prep { background: var(--lab-violet-bg); color: var(--lab-violet); border: 1px solid var(--lab-violet-bd); }
.labPillStatus.mid { background: var(--lab-violet-bg); color: var(--lab-violet); border: 1px solid var(--lab-violet-bd); }
.labPillStatus.none { background: var(--ink-50); color: var(--ink-400); border: 1px solid var(--ink-100); }

/* ===== END-OF-DAY CHECKLIST v3 — decision sweep (Lab work needed / No lab work needed) ===== */
.labChkStrip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 14px 22px 0;
}
.labChkStat {
  background: #fff; border: 1px solid var(--ink-100); border-radius: var(--lab-radius);
  padding: 14px 16px; box-shadow: var(--lab-shadow-sm, 0 1px 2px rgba(16,24,40,.05));
}
.labChkStat b { display: block; font-size: 26px; font-weight: 800; color: var(--ink-900); line-height: 1; }
.labChkStat span { display: block; font-size: 11px; font-weight: 700; color: var(--ink-400); margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; }
.labChkStat.amber b { color: var(--lab-amber); }
.labChkStat.teal b { color: var(--brand-deep); }
.labChkStat.grey b { color: var(--ink-400); }

/* ---- panel shell ---- */
.labChkTop { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; margin: 16px 22px 0; }
.labChkPanel {
  background: #fff; border: 1px solid var(--ink-100); border-radius: var(--lab-radius);
  box-shadow: var(--lab-shadow-sm, 0 1px 2px rgba(16,24,40,.05)); overflow: hidden;
}
.labChkPanel.bottom { margin: 18px 22px 40px; }
.labChkPhead { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-bottom: 1px solid var(--ink-100); }
.labChkPhead .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.labChkPhead h3 { font-size: 14px; margin: 0; font-weight: 800; color: var(--ink-900); }
.labChkCount { margin-left: auto; font-size: 12px; color: var(--ink-400); font-weight: 700; background: var(--ink-50); border: 1px solid var(--ink-100); padding: 2px 9px; border-radius: 20px; }
.labChkPanel.pending .dot { background: var(--lab-amber); }
.labChkPanel.pending .labChkPhead { background: var(--lab-amber-bg); }
.labChkPanel.none .dot { background: var(--ink-300); }
.labChkPanel.none .labChkPhead { background: var(--ink-50); }
.labChkPanel.need .dot { background: var(--brand); }
.labChkPanel.need .labChkPhead { background: var(--brand-tint); }
.labChkEmpty { padding: 24px 18px; text-align: center; color: var(--ink-400); font-size: 13px; }

/* ---- shared name/sex/zh ---- */
.labChkName { font-weight: 700; font-size: 13.5px; color: var(--ink-900); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.labChkName .nm { }
.labChkZh { color: var(--ink-500); font-weight: 500; }
.labChkRef { color: var(--ink-900); font-size: 13px; margin-left: 6px; font-weight: 700; }
.labChkSex { flex: none; display: inline-flex; width: 16px; height: 16px; border-radius: 50%; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; }
.labChkSex.m { background: var(--lab-male); }
.labChkSex.f { background: var(--lab-female); }
.labChkMeta { color: var(--ink-900); font-size: 13px; margin-top: 3px; font-weight: 700; }

/* ---- appt chips ---- */
.labChkChips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1; }
.labChkChip { background: var(--brand-tint); color: var(--brand-deep); border: 1px solid var(--brand-soft); border-radius: 7px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }

/* ---- pending row: two-line ---- */
.labChkProw { padding: 13px 16px; border-bottom: 1px solid var(--ink-100); }
.labChkProw:last-child { border-bottom: none; }
.labChkLine1 { display: flex; align-items: baseline; gap: 10px; }
.labChkLine2 { display: flex; align-items: center; gap: 12px; margin-top: 9px; flex-wrap: wrap; }
.labChkTime { font-weight: 800; font-size: 13.5px; flex: none; min-width: 44px; color: var(--ink-700); font-variant-numeric: tabular-nums; }
.labChkPt { min-width: 0; flex: 1; }
.labChkPrac { color: var(--ink-600); font-size: 12.5px; font-weight: 600; flex: none; }
.labChkActs { display: flex; gap: 7px; justify-content: flex-end; flex: none; margin-left: auto; }
.labChkBtn { border: 1px solid; border-radius: 9px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: .12s; background: #fff; line-height: 1; }
.labChkBtn:active { transform: translateY(1px); }
.labChkBtn.need { border-color: var(--brand); color: var(--brand-deep); }
.labChkBtn.need:hover { background: var(--brand); color: #fff; }
.labChkBtn.none { border-color: var(--ink-200); color: var(--ink-600); }
.labChkBtn.none:hover { background: var(--ink-50); }

/* ---- single-line awaiting-decision row (fields spread across full width) ---- */
.labChkProw.oneline {
  display: flex; align-items: center; gap: 28px;
  padding: 14px 22px; flex-wrap: nowrap; min-width: 0;
}
.labChkProw.oneline .labChkTime { flex: 0 0 56px; }
.labChkProw.oneline .labChkName { flex: 1 1 30%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.labChkProw.oneline .labChkPrac { flex: 1 1 18%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.labChkChipsInline { flex: 1 1 22%; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.labChkChipsInline .labChkChips { margin: 0; }
.labChkProw.oneline .labChkActs { flex: none; margin-left: auto; }

/* ---- no-lab compact rows (greyed) ---- */
.labChkSrow { display: grid; grid-template-columns: 24px 1fr auto; gap: 11px; align-items: start; padding: 11px 16px; border-bottom: 1px solid var(--ink-100); opacity: .62; }
.labChkSrow:last-child { border-bottom: none; }
.labChkSrow .labChkChips { margin-top: 4px; }
.labChkSrow .labChkChip { background: var(--ink-50); border-color: var(--ink-100); color: var(--ink-500); }
.labChkTick { color: var(--ink-300); font-size: 14px; line-height: 1.4; }
.labChkTick.on { color: var(--brand); font-weight: 800; font-size: 15px; }
/* single-line no-lab-needed row (fields spread across full width) */
.labChkSrow.oneline {
  display: flex; align-items: center; gap: 28px; grid-template-columns: none;
  padding: 14px 22px; opacity: 1;
}
.labChkSrow.oneline .labChkTick { color: var(--lab-green); font-size: 15px; flex: 0 0 18px; }
.labChkSrow.oneline .labChkTime { flex: 0 0 56px; }
.labChkSrow.oneline .labChkName { flex: 1 1 30%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-700); }
.labChkSrow.oneline .labChkPrac { flex: 1 1 18%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.labChkSrow.oneline .labChkChipsInline { flex: 1 1 22%; }
.labChkSrow.oneline .labChkChipsInline .labChkChip { background: var(--ink-50); border-color: var(--ink-100); color: var(--ink-500); }
.labChkSrow.oneline .labChkUndo { margin-left: auto; flex: none; }
.labChkUndo {
  font-size: 12px; font-weight: 700; color: var(--ink-600); cursor: pointer;
  border: 1px solid var(--ink-200); background: #fff;
  border-radius: 8px; padding: 7px 13px; white-space: nowrap; align-self: center;
  display: inline-flex; align-items: center; gap: 5px; line-height: 1;
  box-shadow: var(--lab-shadow-sm, 0 1px 2px rgba(16,24,40,.05)); transition: .14s;
}
.labChkUndo:hover { color: var(--brand-deep); border-color: var(--brand); background: var(--brand-tint); }
.labChkUndo:active { transform: translateY(1px); }
.labChkAddBtn { font-size: 12px; font-weight: 800; color: #fff; cursor: pointer; border: 1px solid var(--brand); background: var(--brand); border-radius: 8px; padding: 7px 14px; white-space: nowrap; align-self: center; }
.labChkAddBtn:hover { background: var(--brand-deep); border-color: var(--brand-deep); }

/* ---- lab-work-needed row + inline entry ---- */
.labChkLrow { border-bottom: 1px solid var(--ink-100); padding: 14px 16px; }
.labChkLrow:last-child { border-bottom: none; }
.labChkLhead { display: grid; grid-template-columns: 24px minmax(0,1.5fr) 130px minmax(0,1.4fr) auto; gap: 12px; align-items: center; }
.labChkBadge { font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.labChkBadge.todo { color: #8a5a00; background: #fff2d6; border: 1px solid #f0dca6; }
.labChkBadge.done { color: var(--brand-deep); background: var(--brand-tint); border: 1px solid var(--brand-soft); }
.labChkEdit { font-size: 11px; color: var(--brand-deep); cursor: pointer; font-weight: 700; }
.labChkSummary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.labChkKv { font-size: 11.5px; background: #fff; border: 1px solid var(--brand-soft); border-radius: 6px; padding: 2px 8px; color: var(--brand-deep); }
.labChkKv b { color: var(--brand-deep); }

.labChkEntry { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px 14px; background: var(--lab-tint-bg, #fafcfc); border: 1px dashed var(--brand-soft); border-radius: 11px; padding: 14px 16px; }
.labChkFld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.labChkFld.full { grid-column: 1 / -1; }
.labChkFld label { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); }
.labChkFld label .opt { color: var(--ink-300); font-weight: 600; text-transform: none; letter-spacing: 0; }
.labChkFld input, .labChkFld select, .labChkFld textarea { font: inherit; font-size: 13px; border: 1px solid var(--ink-200); border-radius: 8px; padding: 8px 10px; background: #fff; color: var(--ink-900); width: 100%; }
.labChkFld input:focus, .labChkFld select:focus, .labChkFld textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.labChkFld textarea { resize: vertical; min-height: 38px; }
.labChkEntryActs { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; margin-top: 2px; }
.labChkSave { background: var(--brand); border: 1px solid var(--brand); color: #fff; border-radius: 9px; padding: 8px 16px; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.labChkSave:hover { background: var(--brand-deep); }

/* ===== SAVED LAB CASE — full-width detail card ===== */
.labChkLrow.hasCase { background: var(--lab-tint-bg, #fafcfc); }
.labCaseHead { display: flex; align-items: flex-start; gap: 12px; }
.labCaseWho { flex: 1 1 auto; min-width: 0; }
.labCaseActs { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; white-space: nowrap; }
.labCaseGrid {
  margin: 12px 0 0 36px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 16px;
  background: #fff;
  border: 1px solid var(--brand-soft);
  border-radius: 11px;
  padding: 14px 16px;
}
.labCaseCell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.labCaseCell.full { grid-column: 1 / -1; }
.labCaseLbl { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-400); }
.labCaseVal { font-size: 13.5px; font-weight: 700; color: var(--ink-900); line-height: 1.4; word-break: break-word; white-space: pre-wrap; }
.labCaseEmpty { color: var(--ink-300); font-weight: 600; }
.labCaseItem { margin: 10px 0 0 36px; }
.labCaseItem .labCaseGrid { margin-left: 0; }
.labCaseItemHead { display: flex; align-items: center; gap: 12px; }
.labCaseAddWrap { margin: 12px 0 2px 36px; }
.labChkAddBtn.ghost { background: #fff; color: var(--brand-deep); border: 1px dashed var(--brand); }
.labChkAddBtn.ghost:hover { background: var(--brand-tint); border-style: solid; }

/* ---- item 6: per-case header actions (Edit + Remove) ---- */
.labCaseHeadActs { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: none; }
.labChkRemove { font-size: 11px; color: var(--lab-red); cursor: pointer; font-weight: 700; white-space: nowrap; }
.labChkRemove:hover { text-decoration: underline; }

/* ===== item 7: redesigned end-of-day checklist (single panel + filter tabs) ===== */
.labChkHdr { display: flex; align-items: stretch; gap: 14px; margin: 16px 22px 0; flex-wrap: wrap; }
.labChkArrived {
  display: flex; flex-direction: row; align-items: center; gap: 11px;
  min-width: 168px; padding: 14px 18px;
  background: #fff; border: 1px solid var(--ink-100); border-radius: var(--lab-radius, 14px);
  box-shadow: var(--lab-shadow-sm, 0 1px 2px rgba(16,24,40,.05));
}
.labChkArrived b { font-size: 26px; font-weight: 800; color: var(--ink-900); line-height: 1; flex: none; }
.labChkArrived .labChkArrivedLbl { font-size: 11px; font-weight: 700; color: var(--ink-400); text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; }
.labChkArrived .labChkGo.on { width: 24px; height: 24px; font-size: 14px; flex: none; }
.labChkArrived.done { background: var(--lab-green-bg); border-color: var(--lab-green-bd); }
.labChkArrived.done .labChkArrivedLbl { color: var(--lab-green); }

.labChkTabs { display: flex; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
.labChkTab {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px; flex: 1 1 0; min-width: 150px;
  background: #fff; border: 1px solid var(--ink-100); border-radius: var(--lab-radius, 14px);
  cursor: pointer; transition: .14s; text-align: left; font: inherit;
  box-shadow: var(--lab-shadow-sm, 0 1px 2px rgba(16,24,40,.05));
}
.labChkTab:hover { border-color: var(--ink-200); background: var(--ink-50); }
.labChkTab.active {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
  background: var(--brand-tint);
}
.labChkTabLbl { font-size: 12.5px; font-weight: 700; color: var(--ink-700); line-height: 1.2; flex: 1; min-width: 0; }
.labChkTab.active .labChkTabLbl { color: var(--brand-deep); }
.labChkTabN {
  flex: none; min-width: 24px; text-align: center;
  font-size: 12px; font-weight: 800; color: var(--ink-500);
  background: var(--ink-50); border: 1px solid var(--ink-100);
  border-radius: 20px; padding: 2px 8px;
}
.labChkTab.active .labChkTabN { background: #fff; border-color: var(--brand-soft); color: var(--brand-deep); }
.labChkTab.done { border-color: var(--lab-green-bd); }
.labChkTab.done .labChkTabLbl { color: var(--lab-green); }
.labChkTab.done.active { background: var(--lab-green-bg); box-shadow: 0 0 0 3px var(--lab-green-bd); }

/* green-tick badge (shared by arrived box + tabs) */
.labChkGo {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--ink-200); background: #fff;
  font-size: 13px; font-weight: 800; color: transparent; line-height: 1;
}
.labChkGo.on { border-color: var(--lab-green); background: var(--lab-green); color: #fff; }

/* single body panel */
.labChkPanel.single { margin: 16px 22px 40px; }
@media (max-width: 720px) {
  .labCaseGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; }
  .labCaseItem, .labCaseAddWrap { margin-left: 0; }
}

/* ===== SLIDE-IN DETAIL DRAWER (Mockup B) ===== */
.labScrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .28); z-index: 900; }
.labSidepanel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 430px; max-width: 92vw; background: #fff;
  box-shadow: var(--lab-shadow-md); border-left: 1px solid var(--ink-200); display: flex;
  flex-direction: column; z-index: 901;
}
.labSpHead { padding: 18px 22px; border-bottom: 1px solid var(--ink-100); }
.labSpEyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.labSpKicker { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-deep); display: inline-flex; align-items: center; gap: 7px; }
.labSpTitle { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-900); }
.labSpSub { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; font-weight: 600; }
.labSpClose { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--ink-200); background: #fff; color: var(--ink-400); font-size: 16px; cursor: pointer; }
.labSpBody { padding: 18px 22px; overflow-y: auto; flex: 1; }
.labPreLinked {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--brand-tint);
  border: 1px solid var(--brand-soft); border-radius: 10px; margin-bottom: 18px;
}
.labPreLinked .ico { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-deep); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.labPreLinked .t { font-size: 12.5px; font-weight: 700; color: var(--ink-900); }
.labPreLinked .s { font-size: 11px; color: var(--ink-500); font-weight: 600; }
.labPreLinked .ro { margin-left: auto; font-size: 9.5px; font-weight: 800; color: var(--ink-400); border: 1px solid var(--ink-200); padding: 2px 7px; border-radius: 5px; }
.labField { margin-bottom: 14px; }
.labField label { display: block; font-size: 11px; font-weight: 800; color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.labField input, .labField select, .labField textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--ink-200); border-radius: 9px;
  font-size: 13.5px; font-family: inherit; color: var(--ink-900); background: #fff;
}
.labField input:focus, .labField select:focus, .labField textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.labFieldHint { font-size: 11.5px; color: var(--ink-500); margin-top: 5px; font-style: italic; }
.labReq { color: #dc2626; font-weight: 700; margin-left: 2px; }
.labRetToggle { display: flex; gap: 6px; margin-bottom: 8px; }
.labRetTab {
  flex: 1; padding: 7px 10px; border: 1px solid var(--ink-200); border-radius: 8px;
  background: #fff; color: var(--ink-500); font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer; text-align: center;
}
.labRetTab:hover { border-color: var(--brand); }
.labRetTab.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); }
.labRetDur { display: flex; gap: 8px; align-items: center; }
.labRetDur input { flex: 0 0 auto; }
.labRetDur select { flex: 1; }
.labFieldRow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.labTeeth { display: flex; gap: 6px; flex-wrap: wrap; }
.labTooth { padding: 5px 10px; border: 1px solid var(--ink-200); border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--ink-500); background: #fff; cursor: pointer; }
.labTooth.sel { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); }
.labSpFoot { padding: 14px 22px; border-top: 1px solid var(--ink-100); display: flex; align-items: center; gap: 10px; background: var(--ink-50); }
.labBtn { padding: 10px 16px; border-radius: 9px; font-weight: 700; font-size: 13px; cursor: pointer; border: none; font-family: inherit; }
.labBtn.primary { background: var(--brand); color: #fff; flex: 1; }
.labBtn.primary:hover { background: var(--brand-deep); }
.labBtn.ghost { background: #fff; border: 1px solid var(--ink-200); color: var(--ink-700); }
.labVoidLink { font-size: 11.5px; color: var(--lab-amber); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ===== Req D: two-panel Laboratory Case Editor ===== */
.labSidepanel.twoCol { width: 780px; max-width: 96vw; }
/* Split holds the left summary + the right form column. Fills remaining height
   below the shared header; each column scrolls independently. */
.labSpSplit { display: grid; grid-template-columns: 300px 1fr; flex: 1; min-height: 0; }
.labSidepanel:not(.twoCol) .labSpSplit { grid-template-columns: 1fr; }
.labSpForm { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.labSpSummary {
  border-right: 1px solid var(--ink-100); background: var(--ink-50);
  padding: 18px 18px 22px; overflow-y: auto;
}
.labHoHead { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: 8px; }
.labHoMeta { font-size: 12px; font-weight: 600; color: var(--ink-500); margin-bottom: 10px; }
.labHoBadges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.labHoBadges .labFlowBadge { margin-left: 0; }
.labHoBox { border: 1px solid var(--ink-200); border-radius: 10px; background: #fff; padding: 12px 13px; }
.labHoBox.filled { padding: 6px 13px; }
.labHoBox.state, .labHoBox.empty { font-size: 12.5px; line-height: 1.5; color: var(--ink-700); font-weight: 600; }
.labHoBox.empty { color: var(--ink-500); font-style: italic; font-weight: 500; }
.labHoRow { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--ink-100); }
.labHoRow:last-child { border-bottom: none; }
.labHoLbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-400); flex: 0 0 auto; }
.labHoVal { font-size: 13px; font-weight: 700; color: var(--ink-900); text-align: right; }
.labHoNote { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--ink-100); }
.labHoNoteLbl { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-400); margin-bottom: 4px; }
.labHoNoteBody { font-size: 12.5px; line-height: 1.5; color: var(--ink-900); white-space: pre-wrap; }
.labHoHint { font-size: 11px; color: var(--ink-500); font-style: italic; margin-top: 10px; }
/* 2026-07-01 (Req D · multi-case) — per-case blocks in the handoff summary */
.labHoCase + .labHoCase { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--ink-200); }
.labHoCaseHead { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0f766e; margin: 0 0 6px; }
@media (max-width: 820px) {
  .labSidepanel.twoCol { width: 100vw; max-width: 100vw; }
  .labSpSplit { grid-template-columns: 1fr; overflow-y: auto; }
  .labSpSummary { border-right: none; border-bottom: 1px solid var(--ink-100); }
}

@media (max-width: 1100px) {
  .labKpis { grid-template-columns: repeat(2, 1fr); }
  .labGrid2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .labSubhead { padding: 14px; }
  .labKpis { padding: 14px 14px 0; }
  .labGrid2 { padding: 14px; }
  .labBoard { padding: 14px; }
  .labRow {
    grid-template-columns: 26px 1fr auto; gap: 8px;
  }
  .labRow .labFitCell:nth-of-type(2), .labRow.head > div:nth-child(4), .labRow.head > div:nth-child(5) { display: none; }
  .labSidepanel { width: 100vw; max-width: 100vw; }
}

/* Arrival timestamp on floor cards — small green stamp next to scheduled time */
.arrivedStamp {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #15803D;
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  border-radius: 4px;
  padding: 0 5px;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ============================================================
   PATIENT NOTES VIEW
   ============================================================ */
.patientTopbar {
  align-items: center;
}
.backBtn {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  width: 36px; height: 36px;
  border-radius: 8px;
  font-size: 18px;
  color: var(--ink-700);
  cursor: pointer;
  margin-right: 10px;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.backBtn:hover { background: var(--ink-100); color: var(--ink-900); }

.titleSub.hasAlert { color: #b91c1c; font-weight: 600; }

.clinikoLink {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 11px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--surface);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.clinikoLink:hover { color: var(--brand-deep); border-color: var(--brand); }

.addNoteBtn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: white;
  background: var(--brand-deep, #2563eb);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .15s ease;
}
.addNoteBtn:hover { background: #1e40af; }

.patientTabs {
  display: flex;
  gap: 4px;
  padding: 0 22px;
  border-bottom: 1px solid var(--ink-200);
  background: var(--surface);
  flex-shrink: 0;
}
.patientTab {
  background: transparent;
  border: 0;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .15s ease, border-color .15s ease;
}
.patientTab:hover { color: var(--ink-700); }
.patientTab.active {
  color: var(--brand-deep);
  border-bottom-color: var(--brand);
}
.patientTabBadge {
  background: var(--ink-100);
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}
.patientTab.active .patientTabBadge {
  background: var(--brand-soft);
  color: var(--brand-deep);
}

/* ------------------------------------------------------------------
   PATIENT PAGE LAYOUT — body + permanent right sidebar (1/3 width)
   Sidebar shows complete patient info (HKID, medical history, phones,
   etc.) at all times, regardless of the active tab.
   ------------------------------------------------------------------ */
.patientLayout {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--ink-50, #f8fafc);
}
.patientBody {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 18px 22px 28px;
  background: var(--ink-50, #f8fafc);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.patientSidebar {
  flex: 0 0 33.333%;
  max-width: 420px;
  min-width: 280px;
  min-height: 0;
  overflow: auto;
  border-left: 1px solid var(--ink-200);
  background: var(--surface, #fff);
  padding: 18px 18px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.psEmpty {
  color: var(--ink-500);
  font-size: 13px;
  text-align: center;
  padding: 20px 8px;
}
.psSection {
  background: var(--ink-50, #f8fafc);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.psSection.psAlert {
  background: #fef2f2;
  border-color: #fecaca;
}
.psSectionTitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.psSection.psAlert .psSectionTitle { color: #b91c1c; }

/* Hidden note: yellow warning pill at the very top of the patient sidebar.
   Collapsed by default; full content appears on hover only. Used by staff to
   warn each other about difficult patients without exposing the text
   inadvertently. */
.psHiddenNoteWrap {
  position: relative;
  margin-bottom: 8px;
}
.psHiddenNotePill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 12px;
  padding: 8px 12px;
  color: #78350f;
  font-size: 12px;
  font-weight: 600;
  cursor: help;
  user-select: none;
}
.psHiddenNotePill .psHiddenNoteIcon { font-size: 14px; line-height: 1; }
.psHiddenNotePill .psHiddenNoteHint { font-weight: 400; color: #92400e; font-size: 11px; }
.psHiddenNotePopup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 12px;
  padding: 12px 14px;
  color: #78350f;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 8px 24px rgba(120, 53, 15, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  z-index: 50;
  pointer-events: none;
}
.psHiddenNoteWrap:hover .psHiddenNotePopup,
.psHiddenNoteWrap:focus-within .psHiddenNotePopup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .12s ease, transform .12s ease;
}
.psRow {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 6px 10px;
  align-items: baseline;
  font-size: 13px;
}
.psRow + .psRow { border-top: 1px dashed var(--ink-200); padding-top: 6px; margin-top: 2px; }
.psLabel {
  font-size: 11px;
  color: var(--ink-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.psValue {
  color: var(--ink-900, #0f172a);
  word-break: break-word;
  white-space: pre-wrap;
}
.psValue.psMuted { color: var(--ink-500); font-style: italic; }
.psValue a { color: var(--brand-deep); text-decoration: none; }
.psValue a:hover { text-decoration: underline; }
.psBlock {
  font-size: 13px;
  color: var(--ink-900, #0f172a);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}
.psPhones {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.psPhones .psPhone {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.psPhoneRel { font-size: 12px; color: var(--ink-500); }
.psPhoneNote { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.psPhoneNote--whatsapp { background: #DCFCE7; color: #15803d; }
.psPhoneNote--no_whatsapp { background: #FEE2E2; color: #b91c1c; }
.psPhoneNote--old, .psPhoneNote--unused { background: #f1f3f7; color: #6a7688; }
.psPhoneNote--backup { background: #FEF3C7; color: #92600e; }
.psPhoneNote--new { background: #DBEAFE; color: #1d4ed8; }
.psPhoneNote--dont_call { background: #FEE2E2; color: #b91c1c; text-decoration: line-through; }
.psPhones .psPhoneType {
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--ink-500);
  background: var(--surface, #fff);
  border: 1px solid var(--ink-200);
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.psPhones .psPhoneNumber { font-weight: 500; }
.psPhones .psPhoneNumber--primary { font-weight: 700; }
.psHkid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.psList {
  margin: 4px 0 4px;
  padding-left: 18px;
  font-size: 13px;
  color: var(--ink-900, #0f172a);
  line-height: 1.55;
}
.psList li { padding: 1px 0; }
.psSubRow {
  display: block;
  font-size: 13px;
  color: var(--ink-900, #0f172a);
  padding: 4px 0;
  line-height: 1.5;
  word-break: break-word;
}
.psSubRow + .psSubRow { border-top: 1px dashed var(--ink-200); }
.psSubLabel {
  font-weight: 600;
  color: var(--ink-600, #475569);
  margin-right: 4px;
}
.psBadge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--brand-deep, #0e6ba8);
  background: var(--brand-soft, #e0f1fb);
  border-radius: 999px;
  vertical-align: middle;
}
.psSidebarToggle {
  display: none;
}

/* Mobile/narrow: stack sidebar below the body, collapsible. */
@media (max-width: 900px) {
  .patientLayout { flex-direction: column; }
  .patientSidebar {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--ink-200);
    max-height: 50vh;
  }
  .patientSidebar.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    border-top: none;
  }
  .psSidebarToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 14px;
    background: var(--surface, #fff);
    border: none;
    border-top: 1px solid var(--ink-200);
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-deep);
    cursor: pointer;
  }
}
.patientEmpty {
  background: var(--surface);
  border: 1px dashed var(--ink-200);
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  color: var(--ink-500);
  font-size: 14px;
}
.patientEmpty.error { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }

.noteCard {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.noteCard:hover {
  border-color: var(--brand);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.noteCardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.noteCardDate {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.noteRecent {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.noteRecent.today {
  background: #fef3c7;
  color: #92400e;
}
.noteRecent.latest {
  background: var(--brand-soft, #dbeafe);
  color: var(--brand-deep, #1e40af);
}
.noteCardActions { display: flex; gap: 6px; }
.noteOpenBtn {
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.noteOpenBtn:hover { color: var(--brand-deep); background: var(--brand-soft); border-color: var(--brand); }

.noteCardTitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.4;
  word-break: break-word;
}
.notePinned { margin-right: 4px; }
.noteAuthor {
  font-weight: 400;
  color: var(--ink-500);
  font-size: 13px;
  margin-left: 4px;
}
.noteCardPreview {
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.5;
  word-break: break-word;
}

/* ============================================================
   MOBILE BAR (hamburger) — only visible on small screens
   ============================================================ */
.mobileBar { display: none; }
.mobileBarSpacer { width: 36px; }
.sidebarBackdrop { display: none; }

/* ============================================================
   MOBILE OPTIMIZATION — sidebar drawer + responsive everything
   ============================================================ */
@media (max-width: 768px) {
  body.appShell {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  /* Show top mobile bar */
  .mobileBar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--ink-200);
    position: sticky;
    top: 0;
    z-index: 30;
    height: 52px;
    box-sizing: border-box;
  }
  .mobileMenuBtn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 36px; height: 36px;
    border: 1px solid var(--ink-200);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    padding: 0;
  }
  .mobileMenuBtn span {
    display: block;
    width: 18px; height: 2px;
    background: var(--ink-700);
    border-radius: 1px;
  }
  .mobileBarTitle {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-900);
    text-align: center;
  }

  /* Sidebar becomes a left drawer */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 50;
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
  }
  body.sidebarOpen .sidebar { transform: translateX(0); }
  body.sidebarCollapsed .sidebar { width: 260px; }
  body.sidebarCollapsed .sidebarBrandText,
  body.sidebarCollapsed .navLabel,
  body.sidebarCollapsed .navHint { display: revert; }
  .sidebarFooter { display: none; }

  .sidebarBackdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.sidebarOpen .sidebarBackdrop { opacity: 1; pointer-events: auto; }

  /* Larger nav tap targets */
  .navItem { padding: 14px 14px; }
  .navLabel { font-size: 15px; }
  .navHint { font-size: 12px; }

  /* App main full-width */
  .appMain {
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .view {
    height: auto;
    overflow: visible;
  }

  /* ===== TOPBAR — single tidy row ===== */
  .topbar {
    flex-wrap: wrap;
    padding: 12px 14px 10px;
    gap: 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--ink-200);
  }
  .topbar .brand { width: 100%; order: 1; }
  .titleMain { font-size: 18px; }
  .titleSub  { font-size: 11px; }
  .topbar .tabs {
    order: 2;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .topbar .tabs::-webkit-scrollbar { display: none; }
  .tab {
    padding: 8px 14px;
    font-size: 13px;
    flex-shrink: 0;
    min-height: 36px;
  }
  .topbar .meta { display: none; }   /* hide dense clock/conn/KPI on phone */

  /* Doc filter — horizontal scroll */
  .docFilter {
    padding: 8px 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .docPill { flex-shrink: 0; padding: 7px 11px; font-size: 12px; min-height: 34px; }

  /* ===== FLOOR — vertical zones with clearer scroll ===== */
  .floor {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    height: auto;
    min-height: 0;
  }
  .zone, .roomsCol { min-height: auto; }
  .zone {
    border-radius: 12px;
    padding: 12px;
  }
  .roomsCol .zone { min-height: auto; }
  .cardList.grid { grid-template-columns: 1fr; }
  .pCard {
    cursor: pointer;
    padding: 12px;
    min-height: 64px;
  }
  .pCard .patientName { font-size: 16px; }
  .pCard .apptTime { font-size: 14px; font-weight: 700; }
  .cardStepper { display: flex; }
  .stepBtn { min-height: 36px; min-width: 36px; }
  .flowArrow { display: none; }

  /* ===== SCHEDULE — stack columns vertically ===== */
  .schedBody {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    height: auto;
    overflow: visible;
  }
  .schedColumn {
    width: 100%;
    flex-shrink: 0;
    border-radius: 10px;
  }
  /* 2026-07-01 v34 — mobile keeps the same 4-col mockup layout (the 2-row
     main column already stacks name / planned+lab vertically). */
  .schedRow {
    grid-template-columns: 56px 1fr 110px 40px;
    grid-template-areas: none;
    column-gap: 10px;
    row-gap: 4px;
    padding: 11px 10px;
    align-items: start;
  }
  .schedTreat { font-size: 12px; }
  .schedDur { font-size: 13px; }
  .schedTime { font-size: 18px; }
  .schedName { font-size: 15px; font-weight: 700; }
  /* 2026-06-22 sched-consistent — the desktop multi-col rule
     `.schedBody:not([data-col-count="1"]) .schedRow` has higher specificity
     (0,2,0) than this mobile rule and lives outside the media query, so its
     5-track grid-template-columns would otherwise leak in here and clash with
     the 3-area mobile template. Re-assert the mobile tracks/areas (and the
     pill/dur cell sizing) at matching specificity so phones keep the stacked
     2-row layout. */
  .schedBody:not([data-col-count="1"]) .schedRow {
    grid-template-columns: 56px 1fr 110px 40px;
    grid-template-areas: none;
    column-gap: 10px;
    row-gap: 4px;
    padding: 11px 10px;
    align-items: start;
  }
  .schedBody:not([data-col-count="1"]) .schedTreat {
    justify-self: start;
    width: auto;
  }
  .schedBody:not([data-col-count="1"]) .schedDur {
    justify-self: end;
    text-align: right;
  }

  /* ===== LAB — mobile (new sub-tab layout handled in its own @media) ===== */
  .labBody { height: auto; overflow: visible; }

  /* ===== PATIENT VIEW ===== */
  .patientTopbar { padding: 10px 14px; }
  .patientTopbar .brand { display: flex; align-items: center; }
  .patientTopbar .meta {
    display: flex !important;
    width: 100%;
    order: 3;
    gap: 8px;
  }
  .patientTopbar .meta .clinikoLink,
  .patientTopbar .meta .addNoteBtn {
    flex: 1;
    justify-content: center;
    min-height: 40px;
  }
  .patientTabs { padding: 0 14px; overflow-x: auto; }
  .patientTab { padding: 12px 14px; font-size: 14px; }
  .patientBody { padding: 14px; }
  .noteCard { padding: 12px; border-radius: 10px; }
  .noteCardHead {
    flex-wrap: wrap;
    gap: 8px;
  }
  .noteCardActions { width: 100%; }
  .noteOpenBtn {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    min-height: 36px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .noteCardTitle { font-size: 14px; }
  .noteCardPreview { font-size: 13px; }

  /* Avoid horizontal scroll surprises */
  html, body { overflow-x: hidden; }
}

/* Smaller phones */
@media (max-width: 420px) {
  .titleMain { font-size: 17px; }
  .topbar { padding: 10px 12px 8px; }
  .floor, .schedBody, .labBody, .patientBody { padding: 12px; }
  .schedRow {
    grid-template-columns: 52px 1fr 96px 38px;
    grid-template-areas: none;
    padding: 10px 8px;
  }
  .pCard { padding: 11px; }
  .navItem { padding: 13px 14px; }
}

/* ============================================================
   NOTE METADATA STRIP — flat row of "Date 10/02/2026  Clinic JD  Doctor Dr X"
   All tokens same font/size; only the values are bold so they pop.
   ============================================================ */
.noteMetaStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.5;
}
.noteMetaPair {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  white-space: nowrap;
}
.noteMetaK {
  font-weight: 400;
  color: var(--ink-500);
}
.noteMetaV {
  font-weight: 700;
  color: var(--ink-900);
}
@media (max-width: 420px) {
  .noteMetaStrip { font-size: 12px; gap: 4px 12px; }
}

/* ============================================================
   NOTE BODY PANEL — cream "patient chart" panel that makes the
   actual treatment notes pop visually.
   ============================================================ */
.noteBodyPanel {
  background: #fffdf6;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 2px;
}
@media (max-width: 420px) {
  .noteBodyPanel { padding: 12px 14px; }
}
.noteCardPreviewInner {
  font-size: 14px;
  color: var(--ink-900);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================
   FULL NOTE BODY — structured Q/A rendering (rendered inside .noteBodyPanel)
   ============================================================ */
.noteCardBody {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}
.noteSection {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.noteSection:not(:first-child) {
  border-top: 1px dashed var(--ink-200);
  padding-top: 10px;
}
.noteSectionName {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-deep, #1e40af);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.noteSectionDesc {
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}
.noteList {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.noteRow {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 14px;
  align-items: baseline;
}
.noteRow.stacked {
  /* Long or multi-line answers stack below the label for readability */
  grid-template-columns: 1fr;
  row-gap: 4px;
}
.noteList .noteQ {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-500);
  margin: 0;
}
.noteList .noteA {
  margin: 0;
  font-size: 13px;
  color: var(--ink-900);
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Mobile: always stack Q above A so long answers don't overflow */
@media (max-width: 768px) {
  .noteRow,
  .noteRow.stacked {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .noteList { gap: 10px; }
  .noteList .noteQ { font-size: 11px; }
  .noteList .noteA { font-size: 13px; }
}

/* ============================================================
   FINANCIAL VIEW V2 — Option A (status-first dashboard card)
   Imported from the Phase-6 ClinicSolution payment data.
   ============================================================ */
.finCard {
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  font-variant-numeric: tabular-nums;
  /* .patientBody is a flex column; without flex-shrink:0 the card collapses
     to its container height and its overflow:hidden then clips the visit
     list. We want the card to take its full natural height and let
     .patientBody (overflow:auto) handle scrolling. */
  flex-shrink: 0;
}
.finBanner {
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  color: #fff;
}
.finBanner.paid   { background: linear-gradient(135deg, #16a34a 0%, #059669 100%); }
.finBanner.owing  { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }
.finBanner.credit { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.finBannerLabel {
  font-size: 11px; font-weight: 700; opacity: .9;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 6px;
}
.finBannerHeadline {
  font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
}
.finBannerSub { font-size: 13px; opacity: .9; margin-top: 8px; line-height: 1.4; }
.finBannerMeta { text-align: right; font-size: 12px; opacity: .92; line-height: 1.5; flex-shrink: 0; }
.finBannerMeta b { font-size: 14px; }
.finStats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #E2E8F0;
}
.finStat { padding: 14px 16px; border-right: 1px solid #F1F5F9; }
.finStat:last-child { border-right: 0; }
.finStatK {
  font-size: 11px; font-weight: 600; color: #64748B;
  text-transform: uppercase; letter-spacing: .06em;
}
.finStatV { font-size: 18px; font-weight: 700; color: #0F172A; margin-top: 4px; }
.finStatV.finStatVSmall { font-size: 13px; font-weight: 600; }
.finMethodMix { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.finMethodMix .finMethod { font-size: 10px; padding: 1px 6px; }
.finSectionHead {
  padding: 14px 24px;
  font-size: 12px; font-weight: 700; color: #64748B;
  text-transform: uppercase; letter-spacing: .08em;
  background: #F8FAFC; border-top: 1px solid #E2E8F0;
}
.finVisit { border-top: 1px solid #F1F5F9; padding: 14px 24px; }
.finVisitHead {
  display: flex; align-items: center; gap: 14px;
  font-size: 14px; flex-wrap: wrap;
}
.finVisitDate {
  width: 110px; font-weight: 700; color: #0F172A;
  flex-shrink: 0;
}
.finVisitClinic {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  background: #F1F5F9; color: #334155;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  flex-shrink: 0;
}
.finVisitDoctor { color: #64748B; font-size: 13px; flex-shrink: 0; }
.finVisitServices { flex: 1 1 200px; color: #0F172A; font-weight: 600; min-width: 160px; }
.finVisitBilled { font-size: 13px; color: #64748B; font-weight: 600; flex-shrink: 0; }
.finVisitBilled b { color: #0F172A; font-weight: 700; }
.finVisitStatus {
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .06em;
  background: #DCFCE7; color: #15803D;
  flex-shrink: 0;
}
.finVisitStatus.owing { background: #FEE2E2; color: #B91C1C; }
.finVisitPay {
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .06em;
  background: #0F172A; color: #fff;
  border: 0; cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, transform .1s ease;
}
.finVisitPay:hover { background: #1E293B; }
.finVisitPay:active { transform: translateY(1px); }
.finVisit.finVisitLive { box-shadow: inset 3px 0 0 #0EA5E9; }
.finVisit.finVisitVoid { opacity: 0.65; box-shadow: inset 3px 0 0 #DC2626; background: #FEF2F2; }
.finVisit.finVisitVoid .finVisitDate, .finVisit.finVisitVoid .finVisitClinic, .finVisit.finVisitVoid .finVisitDoctor { text-decoration: line-through; }
.finVisitStatus.void { background: #FEE2E2; color: #991B1B; }
.finVisitHistBadge {
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .05em;
  background: #F1F5F9; color: #475569;
  border: 1px solid #CBD5E1;
  flex-shrink: 0;
}
.finVisitPay.finVisitPayHist { background: #475569; }
.finVisitPay.finVisitPayHist:hover { background: #334155; }
/* Receipt printer button — same pill shape as Pay but orange (Nixon brand)
   to visually distinguish a print action from a money action. */
.finVisitReceipt {
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .06em;
  background: #f97316; color: #fff;
  border: 0; cursor: pointer;
  flex-shrink: 0; margin-left: 4px;
  transition: background .15s ease, transform .1s ease;
}
.finVisitReceipt:hover { background: #ea580c; }
.finVisitReceipt:active { transform: translateY(1px); }

/* Admin pill buttons — inline on each invoice and payment row */
.finAdminBtn {
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid; cursor: pointer;
  margin-left: 4px;
  transition: background .12s ease, color .12s ease;
}
.finAdminEdit  { background: #fff; color: #0369A1; border-color: #0369A1; }
.finAdminEdit:hover  { background: #0369A1; color: #fff; }
.finAdminVoid  { background: #fff; color: #C2410C; border-color: #C2410C; }
.finAdminVoid:hover  { background: #C2410C; color: #fff; }
.finAdminDel   { background: #fff; color: #B91C1C; border-color: #B91C1C; }
.finAdminDel:hover   { background: #B91C1C; color: #fff; }

.finPayRow.finPayRowVoid { opacity: .55; text-decoration: line-through; }
.finPayRow.finPayRowVoid .finAdminBtn { text-decoration: none; opacity: 1; }
.finPayVoidBadge {
  display: inline-block; font-size: 9px; font-weight: 800;
  padding: 1px 6px; border-radius: 4px; background: #B91C1C; color: #fff;
  margin-left: 6px; letter-spacing: .08em;
  text-decoration: none;
}
.finArBadge {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
  background: #EEF2FF; color: #4338CA; border: 1px solid #C7D2FE;
  margin-left: 6px; letter-spacing: .04em; text-transform: uppercase;
}

/* Admin mode toggle and banner */
.cxBtn.cxAdminOn { background: #B91C1C; color: #fff; border-color: #B91C1C; }
.cxAdminBanner {
  background: #FEF3C7; border: 1px solid #F59E0B;
  color: #78350F; padding: 8px 12px; border-radius: 6px;
  font-size: 12px; margin-bottom: 12px;
}
.cxAdminWarn {
  background: #FEF2F2; border: 1px solid #FCA5A5;
  color: #991B1B; padding: 8px 12px; border-radius: 6px;
  font-size: 12px; margin-bottom: 14px;
}
.cxAdminModal { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cxAdminModal .cxModalCard { background: #fff; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.3); max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto; }
.cxAdminModal .cxHead { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #E2E8F0; }
.cxAdminModal .cxHead h2 { font-size: 16px; margin: 0; font-weight: 600; }
.cxAdminModal .cxClose { background: none; border: 0; font-size: 18px; cursor: pointer; color: #64748b; }
.cxAdminModal .cxBody { padding: 16px 20px; }
.cxAdminModal .cxFoot { padding: 12px 20px; border-top: 1px solid #E2E8F0; display: flex; justify-content: flex-end; gap: 8px; }
.finVisitItems {
  margin: 8px 0 0 110px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  font-size: 13px;
}
.finVisitItems.empty { color: #94A3B8; font-style: italic; padding: 6px 14px; }
.finItemRow {
  display: flex; align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed #F1F5F9;
}
.finItemRow:last-child { border-bottom: 0; }
.finItemName {
  flex: 1 1 auto;
  color: #0F172A;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.finItemAmt {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #0F172A;
  min-width: 90px;
  text-align: right;
}
.finItemRow.neg .finItemAmt { color: #B91C1C; }
.finItemRow.neg .finItemName { color: #475569; }
.finPayLedger {
  margin: 10px 0 0 110px;
  padding: 10px 14px;
  border-left: 3px solid #E2E8F0;
  background: #fff;
  border-radius: 0 6px 6px 0;
}
.finPayRow {
  display: flex; gap: 14px;
  padding: 6px 0; font-size: 13px;
  align-items: center;
}
.finPayRow + .finPayRow,
.finPayHidden .finPayRow + .finPayRow,
.finPayHidden .finPayRow:first-child {
  border-top: 1px dashed #F1F5F9;
}
.finPayDate { width: 84px; color: #334155; font-weight: 600; flex-shrink: 0; }
.finMethod {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  min-width: 56px; text-align: center; flex-shrink: 0;
}
.finPayAmt { flex: 1; font-weight: 700; color: #0F172A; }
.finPayCum { color: #64748B; font-size: 12px; flex-shrink: 0; }
.finCleared { color: #15803D; font-weight: 700; }
.finClinicMove {
  background: #FEF3C7; color: #92400E;
  padding: 1px 6px; border-radius: 3px;
  font-size: 11px; font-weight: 600; margin-left: 8px;
}
.finPayCollapsed {
  padding: 8px 0; font-size: 12px; color: #64748B;
  font-style: italic; text-align: center;
  border-top: 1px dashed #F1F5F9; border-bottom: 1px dashed #F1F5F9;
}
.finPayCollapsed b { font-style: normal; color: #334155; font-weight: 700; }
.finPayExpand { color: #2563eb; font-style: normal; font-weight: 600; text-decoration: none; }
.finPayExpand:hover { text-decoration: underline; }
.finPaySummary {
  display: flex; gap: 18px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid #E2E8F0;
  font-size: 13px;
}
.finLbl { color: #64748B; }
.finValPaid { color: #15803D; font-weight: 700; }
.finValOwing { color: #B91C1C; font-weight: 700; }
.finLedgerEmpty {
  margin: 10px 0 0 110px;
  padding: 8px 14px;
  font-size: 12px; color: #B91C1C; font-style: italic;
  border-left: 3px solid #FEE2E2;
}

/* Mobile: stack the visit head, drop the indent on the ledger,
   make rows wrap cleanly. */
@media (max-width: 768px) {
  .finBanner { padding: 18px 18px; }
  .finBannerHeadline { font-size: 26px; }
  .finBannerMeta { font-size: 11px; }
  .finStats { grid-template-columns: repeat(2, 1fr); }
  .finStat:nth-child(2) { border-right: 0; }
  .finStat:nth-child(1), .finStat:nth-child(2) { border-bottom: 1px solid #F1F5F9; }
  .finVisit { padding: 12px 16px; }
  .finVisitHead { gap: 8px; }
  .finVisitDate { width: 100%; }
  .finVisitServices { flex: 1 1 100%; min-width: 0; }
  .finVisitBilled, .finVisitStatus { font-size: 12px; }
  .finVisitItems { margin-left: 0; padding: 6px 10px; font-size: 12.5px; }
  .finItemAmt { min-width: 72px; }
  .finPayLedger { margin-left: 0; }
  .finPayRow { flex-wrap: wrap; gap: 8px; padding: 8px 0; }
  .finPayDate { width: auto; }
  .finPayAmt { flex: 0 0 auto; min-width: 80px; }
  .finPayCum { flex: 1 1 100%; padding-left: 0; }
  .finPaySummary { flex-wrap: wrap; gap: 12px; }
}

/* ===================================================================
   GLOBAL SEARCH (sidebar)
   =================================================================== */
.globalSearch {
  position: relative;
  padding: 8px 12px 14px;
  border-bottom: 1px solid var(--ink-200);
}
.globalSearchInner {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 6px 8px 6px 30px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.globalSearchInner:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.globalSearchIcon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: .55;
  pointer-events: none;
}
#globalSearchInput {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink-900);
  min-width: 0;
}
#globalSearchInput::placeholder { color: var(--ink-400); }
.globalSearchKbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--ink-500);
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
}

.globalSearchResults {
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(100% - 6px);
  z-index: 50;
  max-height: min(560px, 70vh);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 4px;
}
.globalSearchResults[hidden] { display: none; }

.searchHit {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  color: var(--ink-900);
}
.searchHit:hover,
.searchHit.active {
  background: var(--brand-soft);
}
.searchHitTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.searchHitName {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-900);
}
.searchHitArchived {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--ink-100);
  color: var(--ink-500);
  padding: 2px 6px;
  border-radius: 999px;
}
.searchHitSub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-500);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.searchHitRef {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  color: var(--brand-deep);
}
.searchHitZh { color: var(--ink-700); }
.searchHitDob { color: var(--ink-500); }
.searchHitPhone { color: var(--ink-500); font-variant-numeric: tabular-nums; }
.searchHitPhone--matched { color: var(--ink-800, #1f2937); font-weight: 600; background: #EFF6FF; padding: 0 5px; border-radius: 5px; }
.searchHitSep { opacity: .5; }
.searchEmpty,
.searchMore {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-500);
}
.searchMore { border-top: 1px solid var(--ink-100); }

/* ===================================================================
   CALENDAR VIEW
   =================================================================== */
.calToolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.calNav,
.calViewSwitch {
  display: inline-flex;
  background: var(--ink-100);
  border-radius: 8px;
  padding: 2px;
  gap: 0;
}
.calBtn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-700);
  font: inherit;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.calBtn:hover { background: var(--surface); color: var(--ink-900); }
.calBtnView.active,
.calBtn.active {
  background: var(--surface);
  color: var(--brand-deep);
  box-shadow: var(--shadow-sm);
}
.calBtnToday { font-weight: 600; }

.calLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ink-200);
  background: var(--ink-50);
  font-size: 12px;
}
.calLegend:empty { display: none; }
.calLegendItem { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-700); }
.calLegendSwatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid rgba(0,0,0,.06);
}

.calBody {
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  gap: 16px;
  overflow: auto;
  width: 100%;
  box-sizing: border-box;
}
/* Daily Remarks (and any other top-level widgets) span the full row so
   they don't share a row with the clinic columns. */
.calBody > .remarksHost,
.calBody > #calRemarksHost {
  grid-column: 1 / -1;
}
/* When 2+ clinics are shown, lay them out side-by-side and force them to
   share the full available width equally — no leftover space on the right. */
.calBody:has(.calClinicCol + .calClinicCol) {
  grid-template-columns: repeat(var(--clinicCount, 3), minmax(0, 1fr));
}
.calEmpty,
.calDayEmpty {
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-500);
  font-size: 14px;
}
.calError { color: var(--bad); }

.calClinicCol {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calClinicHeader {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-deep);
  letter-spacing: .2px;
}
.calDayHeader {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--ink-200);
}

.calDayGrid {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px;
  min-width: 0;
}
.calTimeAxis {
  position: relative;
  border-right: 1px solid var(--ink-200);
}
.calAxisRow {
  position: absolute;
  left: 0;
  right: 4px;
  font-size: 10px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
  text-align: right;
  padding-right: 4px;
}
/* Invisible spacer that matches .calPracHeader's box (sticky header above
   the appointment grid). Without it the time axis's top: 0 sits ~25px
   higher than each practitioner column's chip area, pushing every hour
   label ~25px above its true grid position. Mirror exactly the same
   padding + border + font metrics as .calPracHeader so the offset is
   identical across viewport widths. The spacer renders as \200B (zero-width
   space) so it occupies a line-box but shows nothing. */
.calTimeAxisHeader {
  position: sticky;
  top: var(--stickyTopOffset, 0px);
  /* z:10 keeps the header above .calAppt (z:5) so appointment chips
     scroll *under* the header band instead of bleeding over it. */
  z-index: 10;
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-200);
  padding: 5px 22px 5px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  visibility: hidden;
}

.calPracColsWrap {
  position: relative;
  display: grid;
  /* Practitioner columns share the available width evenly. We use
     grid-template-columns via inline --colCount (set in JS) so the
     1fr math actually distributes width. The auto-flow fallback below
     keeps things working even when --colCount isn't set. */
  grid-template-columns: repeat(var(--colCount, 1), minmax(0, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  overflow: visible;
  min-width: 0;
  width: 100%;
}
.calPracCol {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  /* overflow:visible so the sticky child header can escape the column's
     own vertical bounds and pin to the .calBody scroll viewport instead.
     overflow:hidden here would clip the sticky header inside the column. */
  overflow: visible;
  min-width: 0;
}
.calPracHeader {
  position: sticky;
  /* Slot directly beneath the sticky daily-remarks + mini-cal bar.
     --stickyTopOffset is the live measured height of the remarks host,
     published from app.js via updateStickyTopOffset(). Falls back to 0
     if the var isn't set (e.g. on views without the remarks bar). */
  top: var(--stickyTopOffset, 0px);
  /* z:10 keeps the practitioner name band above .calAppt (z:5) so
     appointment chips scroll *under* the header instead of covering
     the practitioner's name. */
  z-index: 10;
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-200);
  /* Drop-shadow so appointment chips scrolling under the header don't
     visually bleed through its bottom edge. */
  box-shadow: 0 4px 8px -6px rgba(15, 23, 42, 0.25);
  padding: 5px 22px 5px 8px; /* extra right padding for the hide × */
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .2px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.calPracHeaderLane {
  font-weight: 500;
  color: var(--ink-500);
  font-size: 10px;
  margin-left: 2px;
}
/* Reception can hide a practitioner column for the session when it has zero
   bookings (otherwise the calendar gets cluttered with unworked days). The
   button sits in the column header and is only rendered when apptCount === 0. */
.calPracHideBtn {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-400, #94a3b8);
  font-size: 14px;
  line-height: 14px;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
.calPracHideBtn:hover {
  background: var(--ink-200, #e2e8f0);
  color: var(--ink-700, #334155);
}
/* (the column header is already position:sticky, which creates a positioning
   context for the absolute hide button — no extra rules needed.) */

/* "Show N hidden" pill in the day toolbar — same geometry as Modify
   availability ghost variant but with a neutral fill so it reads as a
   restore action rather than a primary one. */
.calShowHiddenPracsBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--ink-100, #f1f5f9);
  color: var(--ink-700, #334155);
  border: 1px dashed var(--ink-300, #cbd5e1);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.calShowHiddenPracsBtn:hover {
  background: var(--ink-200, #e2e8f0);
  border-color: var(--ink-400, #94a3b8);
}
.calPracBody {
  position: relative;
  flex: 1;
  background:
    repeating-linear-gradient(to bottom,
      rgba(15,23,42,.04) 0,
      rgba(15,23,42,.04) 1px,
      transparent 1px,
      transparent 54px); /* 15-min row hint */
}
.calHourLine {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1px solid var(--ink-200);
  pointer-events: none;
  z-index: 1;
}
.calOffHours {
  position: absolute;
  left: 0; right: 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(148, 163, 184, .14) 0 6px,
      rgba(148, 163, 184, .07) 6px 12px);
  pointer-events: none;
  z-index: 2;
}
.calUnavail {
  position: absolute;
  left: 2px; right: 2px;
  /* Painted ON TOP of appointment chips (z:5) so reception immediately
     sees that the practitioner is blocked off / unavailable when bookings
     happen to fall inside the block window. Two layered hatching patterns
     (45deg + 135deg) form a red X-cross weave — maximally legible against
     both white columns and (now) grey-bottomed off-hours regions. The
     column underneath this block is also painted grey by the renderer
     (see .calUnavail::before — the .calOffHours.fromBlock variant) so the
     practitioner reads as fully unavailable, not just "appointment with a
     red badge". */
  background:
    repeating-linear-gradient(
       45deg,
      rgba(220,  38,  38, .82) 0,
      rgba(220,  38,  38, .82) 2px,
      transparent 2px,
      transparent 10px
    ),
    repeating-linear-gradient(
      135deg,
      rgba(185,  28,  28, .82) 0,
      rgba(185,  28,  28, .82) 2px,
      transparent 2px,
      transparent 10px
    ),
    rgba(254, 226, 226, .55);
  border: 2px solid #991B1B;
  border-left: 5px solid #991B1B;
  border-radius: 5px;
  z-index: 6;
  display: flex;
  align-items: center;
  padding: 0 6px;
  /* 2026-06-25 — block is now click-through so appointments underneath stay
     editable. The red ribbon visually covers the slot (preserving the at-a-
     glance "practitioner is unavailable" cue) but pointer events fall through
     to the .calAppt chip below. Only the .calUnavailLabel text below opts back
     in to pointer events so reception/owner can still click the visible label
     text to edit/delete the block. */
  pointer-events: none;
  box-shadow:
    0 1px 3px rgba(153, 27, 27, .35),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
.calUnavail .calUnavailLabel {
  color: #7F1D1D;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .65);
  font-weight: 800;
  letter-spacing: .35px;
  /* Re-enable pointer events on the visible label so the click affordance
     for editing the block survives the parent's pointer-events:none. */
  pointer-events: auto;
  cursor: pointer;
}
.calUnavailLabel {
  font-size: 10px;
  color: #92400E;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calVacant {
  position: absolute;
  left: 2px; right: 2px;
  background: var(--surface);
  border: 1px dashed var(--ink-300);
  border-radius: 6px;
  cursor: pointer;
  z-index: 3;
  font: inherit;
  color: var(--ink-500);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2px 6px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.calVacant:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
}
.calVacantLabel {
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────────────
   v3o (Option A — Rail + stack). Calendar event cards: soft tinted bg
   derived from the appointment type's color (--ac, set inline from
   appt_type.color), a solid 5px left rail in the full type color, a 12-14px
   radius, a subtle drop shadow, and three text rows that all share ONE
   font-size (--cal-row-fs). Hierarchy = weight + ink color, NOT size.
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* Base card font size. Multiplied by --calFontScale, which the Calendar
     Adjustment panel sets on #view-calendar (defaults to 1 = 18px). */
  --calFontScale: 1;
  /* Line spacing multiplier — scales the vertical gap between the text rows
     inside a card and the card's inner padding. Set by the Calendar
     Adjustment panel's Line spacing slider (× overall zoom). Base 1. */
  --calLineScale: 1;
  --cal-row-fs: calc(18px * var(--calFontScale, 1));  /* shared size for all 3 card rows */
  --cal-ink-full: #28251D;     /* full ink — patient name */
  --cal-ink-muted: #5F5C54;    /* muted ink — meta rows */
}
.calAppt {
  position: absolute;
  /* Single-lane appointments fill the column edge-to-edge for max visibility.
     Multi-lane (calApptLaned) overrides via inline left/width. */
  left: 0; right: 0;
  /* Soft tint: mix the type color ~12% into white for the card background. */
  background: color-mix(in srgb, var(--ac, #94A3B8) 12%, #ffffff);
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  z-index: 5;
  text-align: left;
  /* Internal padding: ~24px left (clears the 5px rail) / ~18px top-bottom.
     Top/bottom padding scales with the Line spacing slider. */
  padding: calc(18px * var(--calLineScale, 1)) 16px calc(18px * var(--calLineScale, 1)) 24px;
  font: inherit;
  color: var(--cal-ink-full);
  /* v3r — overflow visible (was hidden) + min-height applied inline so a card
     can grow past its slot box when 18px rows don't fit in a 15-min (60px)
     slot. Clipping the second row was the old behavior; now the card extends
     downward instead. */
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: calc(1px * var(--calLineScale, 1));
  /* Subtle drop shadow per spec. */
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
  transition: filter .12s ease, transform .08s ease, box-shadow .12s ease;
  container-type: size;
}
/* Solid 5px left rail in the appointment type's full color (accent stripe). */
.calApptRail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--ac, #94A3B8);
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
  pointer-events: none;
}
.calApptBody {
  display: flex;
  flex-direction: column;
  /* vertical gap between rows (base ~7px) — scaled by the Line spacing slider. */
  gap: calc(7px * var(--calLineScale, 1));
  min-width: 0;
}
/* v3o (Option A) — status pill chip in the top-right of the card. Replaces
   the old red/green confirmation dot blobs. */
.calApptChip {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  white-space: nowrap;
  z-index: 6;
  pointer-events: none;
}
.calApptChipUnconfirmed { color: #964219; background: #FCE8DA; }
.calApptChipConfirmed   { color: #437A22; background: #E4F0DE; }
/* v3p — dual status ticks in the top-right corner (replaces the pill above).
   orange = WhatsApp sent, green = patient confirmed. Independent: 0/1/2 shown. */
.calTickRow {
  position: absolute;
  top: 6px;
  right: 8px;
  display: flex;
  gap: 3px;
  z-index: 6;
  pointer-events: none;
}
.calTick {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
}
.calTickWA      { background: #f97316; }  /* orange — WhatsApp sent */
.calTickPatient { background: #16a34a; }  /* green — patient confirmed */
/* 2026-07-01 cal lab-badge v35 — compact lab status badge pinned to the
   lower-right corner of a calendar card. Absolute → no layout impact. */
.calLabBadge{
  display:inline-flex; align-items:center; gap:5px;
  padding:1px 8px 1px 3px; border-radius:999px;
  font-size:11px; font-weight:800; line-height:1.25;
  background:var(--lab-soft); color:var(--lab-ac);
  border:1px solid color-mix(in srgb, var(--lab-ac) 24%, #fff);
  white-space:nowrap; pointer-events:none;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.calLabBadge .g{
  width:15px; height:15px; border-radius:50%;
  background:var(--lab-ac); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:800; flex-shrink:0; line-height:1;
}
.calLabBadge .st{ font-weight:800; letter-spacing:.2px; }
.calLabBadge.flagged{ --lab-ac:#B45309; --lab-soft:#FEF3C7; }
.calLabBadge.prepared{ --lab-ac:#5B4BC4; --lab-soft:#EDEAFB; }
.calLabBadge.sent{ --lab-ac:#1D6FB8; --lab-soft:#E3F0FB; }
.calLabBadge.overdue{ --lab-ac:#DC2626; --lab-soft:#FEECEC; }
.calLabBadge.returned{ --lab-ac:#1F7D5C; --lab-soft:#E1F4EC; }

/* v62 (2026-07-02) — "Booked by <name>" chip. v63 (2026-07-02) refactor:
   now rendered inside .calBottomBar as an inline sibling of .calLabBadge,
   so both sit on the SAME bottom row (booked-by LEFT of lab pill). */
.calBottomBar{
  position:absolute; right:8px; bottom:7px; z-index:3;
  display:inline-flex; align-items:center; gap:6px;
  max-width:calc(100% - 16px); pointer-events:none;
}
.calBookedBy{
  display:inline-flex; align-items:baseline; gap:4px;
  padding:1px 8px; border-radius:999px;
  font-size:10.5px; line-height:1.35;
  background:rgba(255,255,255,.72);
  color:var(--ink-500);
  border:1px solid var(--ink-200);
  backdrop-filter:saturate(140%) blur(2px);
  -webkit-backdrop-filter:saturate(140%) blur(2px);
  white-space:nowrap;
  min-width:0; overflow:hidden; text-overflow:ellipsis;
}
.calBookedBy .lbl{ font-weight:500; letter-spacing:.15px; color:var(--ink-400); text-transform:uppercase; font-size:9.5px; }
.calBookedBy .nm{ font-weight:700; color:var(--ink-800); }
/* v3q — appointment type full name rendered INLINE in Row 1 (time · type · dur),
   colored to match the rail (--ac) and slightly bolder so it stands out from the
   muted time/duration around it. Replaces v3p's separate colored Row 1b. */
.calApptTypeInline {
  font-weight: 700;
}
/* All appt chips use the standard 3-row layout (time / gender+name /
   treatment). With pxPerMin = 4 (15 min = 60px), even short slots have
   enough vertical room — no special short-chip variant needed. */
.calAppt:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .10); }
.calAppt:active { transform: translateY(1px); }

/* Flash-highlight pulse on a freshly-saved appointment chip so the
   receptionist immediately sees what was just booked. Triggered by JS
   adding the .calApptFlash class for ~1.8s after a successful save. */
.calAppt.calApptFlash {
  animation: calApptFlashPulse 1.8s ease-out 1;
  z-index: 7;
}
@keyframes calApptFlashPulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(37, 99, 235, .55),
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -1px 0 rgba(0,0,0,.12);
    transform: scale(1);
  }
  18% {
    box-shadow:
      0 0 0 6px rgba(37, 99, 235, .35),
      0 0 0 10px rgba(37, 99, 235, .12),
      inset 0 1px 0 rgba(255,255,255,.55),
      inset 0 -1px 0 rgba(0,0,0,.10);
    transform: scale(1.02);
  }
  60% {
    box-shadow:
      0 0 0 4px rgba(37, 99, 235, .18),
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -1px 0 rgba(0,0,0,.12);
    transform: scale(1);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(37, 99, 235, 0),
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -1px 0 rgba(0,0,0,.12),
      0 1px 2px rgba(15, 23, 42, .08);
    transform: scale(1);
  }
}
/* v3o (Option A) — all three rows share ONE font-size (--cal-row-fs).
   Visual hierarchy comes purely from weight + ink color, never size. */
.calApptRowMeta {
  font-size: var(--cal-row-fs);
  font-weight: 500;                /* medium weight */
  line-height: 1.4;
  color: var(--cal-ink-muted);     /* muted ink */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calApptRow2.calApptName {
  font-size: var(--cal-row-fs);
  font-weight: 700;                /* bold */
  line-height: 1.4;
  color: var(--cal-ink-full);      /* full ink */
  /* Keep the tooth emoji + name on one line so the name doesn't wrap awkwardly;
     long CJK + transliteration names may still wrap to a 2nd line. */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* v3q — patient name colored by sex (no glyph, no pill). Foreground colors
   reused verbatim from the established .sexChipM / .sexChipF text colors so the
   calendar matches the rest of the app. */
.calApptName.calApptNameM { color: #1565C0; }   /* male — matches .sexChipM color */
.calApptName.calApptNameF { color: #C2185B; }   /* female — matches .sexChipF color */
/* v3q — per-booking memo appended after the name with an em-dash. Muted and
   regular-weight so it reads as secondary to the bold colored name. */
.calApptMemo {
  font-weight: 400;
  color: var(--cal-ink-muted);
}
/* Ginny-only (usr_recep_ginny) patient meta suffix on calendar chips. */
.calApptGinnyMeta { color: #475569; font-weight: 500; }
.calApptGinnyEng { color: #2563eb; font-weight: 600; font-size: 0.85em; }
.calApptDna { opacity: .45; text-decoration: line-through; }

/* Parked appointment \u2014 the calendar chip is dimmed and gets a dashed
   amber outline so the user immediately sees the booking is currently in
   the parked tray. The chip remains draggable (drag back to a new slot to
   reschedule), and the tray chip is the canonical version. */
.calApptParked {
  opacity: .35;
  outline: 2px dashed #f59e0b;
  outline-offset: -2px;
  filter: saturate(.6);
}
.calApptArrived { box-shadow: 0 0 0 1.5px var(--ok), 0 4px 12px rgba(0, 0, 0, .06); }

/* WhatsApp confirmation-flow badge on appointment chips. v3o moved this to
   the bottom-LEFT so it no longer collides with the new status pill (top-right)
   or the multi-service count pill (bottom-right). */
.calApptBadge {
  position: absolute;
  bottom: 6px;
  left: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  color: #fff;
  z-index: 6;
  box-shadow: 0 0 0 1px rgba(255,255,255,.85);
  pointer-events: auto;
}
.calApptBadgeSent    { background: #16a34a; }   /* green check */
.calApptBadgePending { background: #d97706; }   /* amber dots */
.calApptBadgeFailed  { background: #dc2626; }   /* red bang */

/* Multi-service visit — small "Nx" pill at the bottom-right corner so the
   user sees "2 treatments in one visit" at a glance. Stays subtle so it
   doesn't compete with the confirmation/sent badges in the top-right. */
.calApptMultiCount {
  position: absolute;
  bottom: 2px;
  right: 4px;
  min-width: 18px;
  height: 14px;
  padding: 0 4px;
  border-radius: 7px;
  background: rgba(255,255,255,.92);
  color: #c2410c;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  z-index: 5;
  box-shadow: 0 0 0 1px rgba(194,65,12,.35);
  pointer-events: none;
  letter-spacing: .02em;
}
.calAppt.calApptMulti {
  /* Subtle inset border in brand orange so multi-service chips read as a
     single grouped block even when adjacent to other chips. Keep the v3o
     drop shadow so the card still feels grounded. */
  box-shadow: inset 0 0 0 1.5px rgba(249,115,22,.55), 0 4px 12px rgba(0,0,0,.06);
}

/* v3r — uniform sizing across ALL durations. The previous data-dur="short"
   compact tier (12-13px rows for ≤15-min slots) was removed: every card now
   uses --cal-row-fs (18px) for both rows regardless of slot length. 15-min
   slots will overflow their 60px slot box at 18px — accepted by reception, who
   will see the visual collision and reschedule. The card root uses min-height
   (not height) and has overflow:visible so the card grows downward instead of
   clipping its second row. The data-dur attribute is still emitted on the card
   for potential JS use; only its CSS styling rules were dropped. */

/* Drag-and-drop reschedule */
.calAppt[draggable="true"] { cursor: grab; }
.calApptDragging {
  opacity: 0.45;
  cursor: grabbing;
  outline: 2px dashed rgba(15, 23, 42, .35);
}
.calPracBody.calDropTarget {
  background: rgba(56, 142, 230, .06);
  outline: 1.5px dashed rgba(56, 142, 230, .55);
  outline-offset: -1.5px;
}
.calDropIndicator {
  position: absolute;
  left: 2px;
  right: 2px;
  border: 1.5px dashed #2563eb;
  background: rgba(37, 99, 235, .12);
  border-radius: 6px;
  z-index: 8;
  pointer-events: none;
  font-size: 10.5px;
  font-weight: 700;
  color: #1d4ed8;
  padding: 2px 6px;
  font-variant-numeric: tabular-nums;
}

/* Booking modal — confirmation status panel */
.bookingConfStatus {
  margin: 0 16px 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}
.bookingConfBadgeSent    { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.bookingConfBadgePending { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.bookingConfBadgeFailed  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Booking modal — danger / cancel button + WhatsApp toggle */
.bookingBtnDanger {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.bookingBtnDanger:hover { background: #fecaca; }
.bookingBtnDanger:disabled { opacity: .55; cursor: not-allowed; }
.bookingFieldInline { align-items: center; gap: 8px; }
.bookingToggleLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-700);
  cursor: pointer;
  user-select: none;
}
.bookingToggleLabel input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--brand-deep, #2563eb);
}

/* Multi-clinic C2 layout polish (Slice E) */
.calBody:has(.calClinicCol + .calClinicCol) .calClinicCol {
  /* Remove top padding so the header sits flush against the card's top.
     We must NOT use overflow:clip/hidden here — that would make the
     calClinicCol the sticky reference and the header would scroll away
     with the card. The header's high z-index handles paint order. */
  padding-top: 0;
}
.calBody:has(.calClinicCol + .calClinicCol) .calClinicHeader {
  position: sticky;
  /* In multi-clinic view (Central / Mong Kok / Jordan side-by-side) the
     clinic name acts as the sticky header. Add --stickyTopOffset so it
     slots below the remarks/mini-cal bar instead of being hidden behind
     it. The -12px base offset compensates for .calBody's padding-top
     so its own top-padding visually masks the strip cleanly. */
  top: calc(var(--stickyTopOffset, 0px) - 12px);
  /* High z so the header paints over every appointment, vacant slot,
     hour line and grid item that scrolls under it. The 50 is well
     above .calAppt (z:5), .calOffHours overlay (z:2), .calVacant (z:3),
     and .calPracHeader (z:4). */
  z-index: 50;
  background: var(--surface);
  /* Extra top padding (12 base + 12 to cover the .calBody padding strip). */
  padding: 24px 12px 8px 12px;
  margin: -12px -12px 0 -12px;
  border-bottom: 1px solid var(--ink-200);
  box-shadow: 0 1px 0 var(--ink-100), 0 4px 8px -4px rgba(15, 23, 42, .08);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  isolation: isolate;
}
/* Make sure the practitioner columns wrapper does NOT create a stacking
   context that traps the sticky header. The previous z:auto behavior was
   correct, but flex-item + overflow can create implicit contexts. */
.calBody:has(.calClinicCol + .calClinicCol) .calPracColsWrap,
.calBody:has(.calClinicCol + .calClinicCol) .calPracCol {
  z-index: 0;
}
.calBody:has(.calClinicCol + .calClinicCol) .calClinicCol {
  /* No per-clinic scrollbar — the page scrolls as a whole instead. */
  max-height: none;
  overflow: visible;
}
@media (max-width: 1100px) {
  /* On narrower screens, stack to 2 cols, then 1 */
  .calBody:has(.calClinicCol + .calClinicCol) {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}
@media (max-width: 720px) {
  .calBody:has(.calClinicCol + .calClinicCol) {
    grid-template-columns: 1fr;
  }
  .calBody:has(.calClinicCol + .calClinicCol) .calClinicCol {
    max-height: none;
  }
}

/* Mobile tweaks */
@media (max-width: 720px) {
  .calToolbar { flex-wrap: wrap; gap: 6px; }
  .calBtn { font-size: 12px; padding: 5px 8px; }
  .calBody { padding: 8px; gap: 10px; }
  .calClinicCol { padding: 8px; }
  .calPracColsWrap { grid-auto-columns: 100px; }
  .globalSearchKbd { display: none; }
}

/* ===================================================================
   CLINICAL TAB — DATE HIGHLIGHT (from calendar deep-link)
   =================================================================== */
.noteCard.highlightDate {
  border-color: #F59E0B;
  background: linear-gradient(180deg, #FFFBEB 0%, var(--surface) 60%);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .25), var(--shadow-sm);
  scroll-margin-top: 80px;
}
.noteCard.highlightDate::before {
  content: "📍 from calendar";
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #92400E;
  background: #FEF3C7;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}

/* ===================================================================
   CALENDAR — DATE JUMPER (month grid picker)
   =================================================================== */
.titleBlock { position: relative; }

button.calDateJumpBtn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-500);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px 2px 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  letter-spacing: .2px;
  text-transform: uppercase;
  transition: background .12s ease, color .12s ease;
}
button.calDateJumpBtn:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}
button.calDateJumpBtn[aria-expanded="true"] {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.calCaret { font-size: 9px; opacity: .6; }

.calDatePicker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 80;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .08);
  padding: 12px;
  width: 280px;
  text-transform: none;
  letter-spacing: 0;
}
.calDatePicker[hidden] { display: none; }

.calDpHeader {
  display: grid;
  grid-template-columns: 28px 1fr 1fr 28px;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.calDpNav {
  appearance: none;
  border: 1px solid var(--ink-200);
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 0;
  color: var(--ink-700);
  transition: background .12s ease, border-color .12s ease;
}
.calDpNav:hover {
  background: var(--ink-100);
  border-color: var(--ink-300);
  color: var(--ink-900);
}
.calDpSelect {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ink-200);
  background: var(--surface);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  padding: 5px 22px 5px 8px;
  color: var(--ink-900);
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
    linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
  background-position:
    calc(100% - 12px) 50%,
    calc(100% - 8px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  min-width: 0;
}
.calDpSelect:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.calDpGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.calDpWk {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 4px 0 6px;
}
.calDpCell {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--ink-900);
  padding: 6px 0;
  text-align: center;
  transition: background .1s ease, color .1s ease, border-color .1s ease;
}
.calDpCell:hover {
  background: var(--ink-100);
}
.calDpCell.calDpDim {
  color: var(--ink-300);
}
.calDpCell.calDpToday {
  border-color: var(--brand);
  color: var(--brand-deep);
  font-weight: 600;
}
.calDpCell.calDpSelected {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}
.calDpCell.calDpSelected:hover {
  background: var(--brand-deep);
}

/* ---------------------------------------------------------------------------
   HK red-day styling — Sundays + Hong Kong public holidays
   Used by calendar headers, mini-cal date pickers, and native date inputs.
--------------------------------------------------------------------------- */
.calDayHeader-red,
.calDateLabel-red,
.calDentistDayHeader-red,
.calDentistDayHeader.calDentistDayHeader-red {
  color: #c8222a;
}
.calDpCell.calDpRed {
  color: #c8222a;
}
.calDpCell.calDpRed.calDpDim {
  color: #e8a4a8;
}
.calDpCell.calDpRed.calDpSelected {
  /* When selected, keep the brand bg but force white text for contrast */
  color: #fff;
}
.calDpCell.calDpHoliday {
  background: #fef5ee;
  position: relative;
}
.calDpCell.calDpHoliday:hover {
  background: #fde9d6;
}
.calDpCell.calDpHoliday.calDpSelected {
  background: var(--brand);
}
.calDpHolDot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c8222a;
  pointer-events: none;
}
.calDpCell.calDpSelected .calDpHolDot {
  background: #fff;
}
.calDpWk.calDpWk-red {
  color: #c8222a;
}

/* Holiday-name chip rendered next to the date in column / subtitle headers */
.calHolChip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: #fff3e6;
  color: #c45a08;
  border: 1px solid #f6c089;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
  line-height: 1.4;
  white-space: nowrap;
}

/* Native <input type="date"> red-day styling — applied by a delegated
   listener whenever the input's value falls on a Sun or HK holiday. */
input[type="date"].is-red-day {
  color: #c8222a;
  font-weight: 600;
}

/* Inline chip rendered next to a date input when it lands on a HK holiday */
.dateRedChip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: #fff3e6;
  color: #c45a08;
  border: 1px solid #f6c089;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
  line-height: 1.4;
  white-space: nowrap;
}

.calDpFooter {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-100);
}
.calDpFootBtn {
  appearance: none;
  border: 1px solid var(--ink-200);
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 5px 12px;
  color: var(--ink-700);
  transition: background .12s ease, border-color .12s ease;
}
.calDpFootBtn:hover {
  background: var(--ink-100);
  border-color: var(--ink-300);
  color: var(--ink-900);
}
.calDpFootBtn[data-action="today"] {
  color: var(--brand-deep);
  border-color: var(--brand);
}
.calDpFootBtn[data-action="today"]:hover {
  background: var(--brand-soft);
}

/* Mobile: anchor picker so it doesn't overflow viewport */
@media (max-width: 540px) {
  .calDatePicker { width: calc(100vw - 32px); max-width: 320px; }
}

/* ===================================================================
   CALENDAR — RAIL LAYOUT (always-visible date picker on the left)
   =================================================================== */
/* Hide the legend bar entirely — colors are self-evident on appointments */
.calLegend { display: none !important; }

.calLayout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  height: calc(100vh - var(--topbar-h, 64px));
  min-height: 0;
}
.calRail {
  border-right: 1px solid var(--ink-200);
  padding: 12px;
  background: var(--ink-50);
  overflow-y: auto;
  min-width: 0;
}
.calLayout > .calBody {
  height: auto;          /* fill the grid cell */
  overflow: auto;
  padding: 12px;
}

/* Override popup positioning — picker now lives in the rail */
.calRail .calDatePicker {
  position: static;
  width: 100%;
  box-shadow: none;
  border: 1px solid var(--ink-200);
  background: var(--surface);
  padding: 12px;
}

@media (max-width: 880px) {
  .calLayout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .calRail {
    border-right: 0;
    border-bottom: 1px solid var(--ink-200);
    max-height: 360px;
  }
}

/* ============================================================
   PHASE 7 — TREATMENT NOTE EDITOR (Clinical tab)
   Inline editor card shown above the past-notes list. One per
   appointment for the patient on the requested date.
   ============================================================ */
.treatmentEditor {
  background: var(--surface);
  border: 1.5px solid var(--brand, #2563eb);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.06);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.treatmentEditor.isDirty {
  border-color: #f59e0b;
  box-shadow: 0 1px 6px rgba(245, 158, 11, 0.18);
}
.editorHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.editorHeadLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.editorHeadRight {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.editorTitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.editorPill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.editorPill.draft     { background: #dbeafe; color: #1e40af; }
.editorPill.new       { background: #ede9fe; color: #6d28d9; }
.editorPill.locked    { background: #f1f5f9; color: #475569; }
.editorPill.finalizing{ background: #fef3c7; color: #92400e; }
.editorPill.finalized { background: #dcfce7; color: #15803d; }
.editorPill.skipped   { background: #f1f5f9; color: #64748b; }
.editorPill.failed    { background: #fee2e2; color: #b91c1c; }
.editorPill.missed    { background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; font-weight: 600; }

.editorMetaStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--ink-700);
}
.editorMetaPair { white-space: nowrap; }
.editorMetaK {
  color: var(--ink-500);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-weight: 600;
  margin-right: 3px;
}
.editorMetaV { color: var(--ink-900); font-weight: 600; }

.editorTextarea {
  width: 100%;
  /* Doubled from 140px per Calvin's request — dentists write longer
     treatment-note drafts and shouldn't have to resize every time. */
  min-height: 280px;
  padding: 12px 14px;
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-900);
  background: #fafafa;
  resize: vertical;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.editorTextarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.editorTextarea[readonly] {
  background: #f8fafc;
  color: var(--ink-700);
  cursor: not-allowed;
}

/* 2026-06-26 — Inline-edit redesign: textarea prefilled with today's entry
   shows a greyed/locked look + a hover-only "Edit" overlay. Click unlocks. */
.editorTextareaWrap {
  position: relative;
  width: 100%;
}
.editorTextarea.hasExisting[readonly] {
  background: #f3f4f6;
  color: #4b5563;
  cursor: pointer;
}
.entryEditOverlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(243, 244, 246, 0);
  border-radius: 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
  pointer-events: auto;
}
.editorTextareaWrap:hover .entryEditOverlay,
.entryEditOverlay:hover {
  opacity: 1;
  background: rgba(229, 231, 235, 0.55);
}
.entryEditOverlayBtn {
  background: #fff;
  color: var(--brand, #2563eb);
  border: 1px solid var(--brand, #2563eb);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 2026-06-26 — Unsaved-changes confirmation modal.
   Must sit ABOVE .nxRedesignOverlay (z-index 10600) which spawns it.
   Use !important to match the pattern used by .nxModal.open at line 15847
   and defeat any future cascade collision. */
.nxUnsavedConfirm {
  position: fixed !important;
  inset: 0 !important;
  z-index: 11000 !important;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: nxUnsavedFadeIn .12s ease-out;
}
@keyframes nxUnsavedFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.nxUnsavedConfirmCard {
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px 18px;
  width: min(420px, calc(100vw - 32px));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  animation: nxUnsavedSlideIn .14s ease-out;
}
@keyframes nxUnsavedSlideIn {
  from { transform: translateY(8px); opacity: 0.4; }
  to   { transform: translateY(0);   opacity: 1; }
}
.nxUnsavedConfirmTitle {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900, #0f172a);
  margin-bottom: 8px;
}
.nxUnsavedConfirmBody {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-700, #334155);
  margin-bottom: 18px;
}
.nxUnsavedConfirmActions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.nxUnsavedBtn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.nxUnsavedBtnCancel {
  background: #fff;
  color: var(--ink-700, #334155);
  border-color: var(--ink-200, #e2e8f0);
}
.nxUnsavedBtnCancel:hover {
  background: #f8fafc;
  border-color: var(--ink-300, #cbd5e1);
}
.nxUnsavedBtnDiscard {
  background: #fff;
  color: #b91c1c;
  border-color: #fecaca;
}
.nxUnsavedBtnDiscard:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}
.nxUnsavedBtnSave {
  background: var(--brand, #2563eb);
  color: #fff;
}
.nxUnsavedBtnSave:hover {
  background: var(--brand-deep, #1e40af);
}
.nxUnsavedBtn:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 2px;
}

.editorBtn {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.editorBtnSave {
  background: var(--brand, #2563eb);
  color: #fff;
}
.editorBtnSave:hover { background: var(--brand-deep, #1e40af); }
.editorBtnSave:disabled { opacity: 0.55; cursor: wait; }
.editorBtnRetry {
  background: #b91c1c;
  color: #fff;
}
.editorBtnRetry:hover { background: #991b1b; }
.editorBtnRetry:disabled { opacity: 0.55; cursor: wait; }
.editorBtnLink {
  background: var(--ink-50);
  color: var(--ink-700);
  border-color: var(--ink-200);
}
.editorBtnLink:hover {
  color: var(--brand-deep, #1e40af);
  background: var(--brand-soft, #dbeafe);
  border-color: var(--brand, #2563eb);
}

.editorRevChip {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-500);
  background: var(--ink-50);
  padding: 3px 8px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.editorSaveStatus {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-500);
  min-width: 60px;
  text-align: right;
}
.editorSaveStatus.unsaved { color: #b45309; }
.editorSaveStatus.saving  { color: var(--ink-500); }
.editorSaveStatus.saved   { color: #15803d; }
.editorSaveStatus.saveErr { color: #b91c1c; }

.editorErrorBanner {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
}
.editorSkippedBanner {
  background: #f8fafc;
  color: var(--ink-700);
  border: 1px solid var(--ink-200);
  border-left: 3px solid #94a3b8;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
}
.editorByline {
  font-size: 11px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

/* Divider header between today's editor(s) and past notes */
.notePastHeader {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ink-500);
  margin: 22px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-200);
}

@media (max-width: 720px) {
  .treatmentEditor { padding: 12px 14px; }
  .editorTextarea { min-height: 240px; font-size: 14px; }
  .editorBtn { padding: 6px 10px; font-size: 12px; }
  .editorTitle { font-size: 14px; }
  .editorPill { font-size: 10px; }
  .editorHeadRight { width: 100%; justify-content: flex-end; }
}

/* ============================================================ */
/* Multi-entry treatment notes — Visit Today list               */
/* ============================================================ */

.editorTopBoxRow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.editorTopBoxActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.visitTodayHeader {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ink-500);
  padding-top: 12px;
  border-top: 1px solid var(--ink-200);
  display: flex;
  align-items: center;
  gap: 8px;
}
.visitTodayCount {
  background: var(--ink-100, #f1f5f9);
  color: var(--ink-700, #334155);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.visitTodayList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.visitEntry {
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: #fafbfc;
  padding: 10px 12px;
  transition: background 120ms ease, border-color 120ms ease;
}
.visitEntry:hover {
  background: #f5f7fa;
}

.visitEntryHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.visitEntryMeta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-700, #334155);
}
.visitEntryTime {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-900, #0f172a);
}
.visitEntryDot {
  color: var(--ink-400, #94a3b8);
}
.visitEntryDentist {
  color: var(--ink-700, #334155);
}

.visitEntryActions {
  display: flex;
  gap: 6px;
}

.visitEntryBody {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-900, #0f172a);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 4px 0 2px;
}

.visitEntryEditTextarea {
  width: 100%;
  /* Doubled from 90px per Calvin's request. Same reasoning as
     .editorTextarea — editing an existing entry should give the
     dentist room to expand without manually resizing. */
  min-height: 180px;
  padding: 8px 10px;
  border: 1.5px solid var(--brand, #2563eb);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-900, #0f172a);
  resize: vertical;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.entryPill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2px;
  margin-left: 4px;
}
.entryPill.open       { background: #dbeafe; color: #1e40af; }
.entryPill.finalizing { background: #fef3c7; color: #92400e; }
.entryPill.finalized  { background: #dcfce7; color: #15803d; }
.entryPill.failed     { background: #fee2e2; color: #b91c1c; }
.entryPill.locked     { background: #f1f5f9; color: #475569; }
.entryPill.imported   { background: #ede9fe; color: #6d28d9; }

/* Phase 11 — imported / read-only entries get a faint purple wash so they
   visually separate from editable ones at a glance. */
.visitEntry.imported {
  background: #fbfaff;
  border-color: #e9e4fa;
}
.visitEntry.imported:hover {
  background: #f6f3ff;
}

/* Phase 11 — yellow banner above the editor when a receptionist views a
   clinical record. */
.editorReadOnlyBanner {
  margin: 4px 0 10px;
  padding: 8px 12px;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 8px;
  color: #713f12;
  font-size: 12.5px;
  line-height: 1.45;
}

/* Phase 11 — collapsed edit-history toggle + expanded panel. */
.entryHistoryWrap {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--ink-200, #e2e8f0);
}
.entryHistoryToggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 0;
  background: transparent;
  border: none;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-600, #475569);
  cursor: pointer;
  user-select: none;
  font-family: inherit;
}
.entryHistoryToggle:hover {
  color: var(--brand, #2563eb);
}
.entryHistoryChevron {
  display: inline-block;
  width: 12px;
  font-size: 10px;
  color: var(--ink-500, #64748b);
}
.entryHistoryPanel {
  margin-top: 6px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid var(--ink-200, #e2e8f0);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.entryHistoryRow {
  padding: 6px 0;
  border-bottom: 1px dashed var(--ink-200, #e2e8f0);
}
.entryHistoryRow:last-child { border-bottom: none; }
.entryHistoryRowMeta {
  font-size: 11px;
  color: var(--ink-600, #475569);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.entryHistoryRowTime {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-800, #1e293b);
}
.entryHistoryRowDot { color: var(--ink-400, #94a3b8); }
.entryHistoryRowWho { color: var(--ink-700, #334155); }
.entryHistoryRowBody {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-800, #1e293b);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.entryHistoryEmpty {
  font-size: 12px;
  color: var(--ink-500, #64748b);
  font-style: italic;
  padding: 4px 0;
}

.entryBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--ink-200);
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-700, #334155);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.entryBtn:hover {
  background: var(--ink-100, #f1f5f9);
  border-color: var(--ink-300, #cbd5e1);
}
.entryBtnEdit { color: var(--brand, #2563eb); border-color: rgba(37, 99, 235, 0.25); }
.entryBtnEdit:hover { background: rgba(37, 99, 235, 0.06); }
.entryBtnDelete {
  color: #b91c1c;
  border-color: #fecaca;
  font-weight: 700;
  padding: 4px 9px;
  line-height: 1;
}
.entryBtnDelete:hover { background: #fef2f2; border-color: #fca5a5; }
.entryBtnSave {
  color: #fff;
  background: var(--brand, #2563eb);
  border-color: var(--brand, #2563eb);
}
.entryBtnSave:hover { background: var(--brand-deep, #1e40af); }
.entryBtnSave:disabled { opacity: .55; cursor: wait; }
.entryBtnCancel {
  color: var(--ink-700, #334155);
}
.entryBtnLink {
  color: var(--brand, #2563eb);
  border-color: rgba(37, 99, 235, 0.25);
  text-decoration: none;
}
.entryBtnLink:hover { background: rgba(37, 99, 235, 0.06); }

.entryErrorBanner {
  margin: 4px 0 6px;
  padding: 6px 10px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .visitEntry { padding: 9px 11px; }
  .visitEntryBody { font-size: 13px; }
  .entryBtn { padding: 5px 9px; font-size: 12px; }
  .visitEntryHeader { gap: 6px; }
}

/* ============================================================
   DAILY REMARKS — amber block at top of Calendar + Today's Schedule
   ============================================================ */

.remarksHost { display: block; margin-bottom: 16px; grid-column: 1 / -1; }

/* Sticky daily-remarks header.
   --------------------------------------------------------------
   The remarks host sits as the first grid child of the scrolling body
   (#schedBody has 16px padding, #calBody has 12px). Sticking it to
   the top of that scroll container keeps daily notices + a mini
   month-calendar visible while the dentist scrolls through long
   appointment lists. Solid white backdrop + high z-index + a hard
   bottom border ensure rows scrolling underneath don't leak through. */
#schedRemarksHost.remarksHost,
#calRemarksHost.remarksHost {
  position: sticky;
  top: 0;
  /* Above appointment chips (~5), clinic headers (~50), tooltips. */
  z-index: 300;
  /* Hard opaque background — don't trust theme tokens to be fully opaque. */
  background: #ffffff !important;
  border-bottom: 1px solid var(--ink-200, #e2e8f0);
  /* Create our own stacking context so descendant chips can't escape it. */
  isolation: isolate;
  /* Stronger shadow so floating chips/zoned rows underneath are visually
     pushed back. */
  box-shadow: 0 8px 16px -8px rgba(15, 23, 42, 0.35);
}
/* Bleed left/right + top into the scroll container's own padding so the
   sticky bar visually spans the full body width when pinned and sits
   completely flush against the topbar (NO whitespace gap). Use a
   matching negative top margin equal to .calBody / .schedBody's own
   padding-top so the host's top edge butts directly against the
   topbar's bottom border. */
#schedRemarksHost.remarksHost {
  margin: 0 -16px 12px !important;
  padding: 4px 16px 8px;
}
#calRemarksHost.remarksHost {
  margin: 0 -12px 12px !important;
  padding: 4px 12px 8px;
}
/* Belt-and-braces: kill any padding-top on the scroll viewports so the
   sticky bar's top edge sits flush against the topbar's bottom border. */
.calLayout > .calBody { padding-top: 0 !important; }
.schedBody { padding-top: 0 !important; }

/* 2-column FLEX layout inside the sticky header: remarks (flexible) +
   mini-cal (right, fixed). Flexbox is more robust than grid here because
   it doesn't fight with the .calDatePicker / .miniCal absolute-position
   default and lets the right column hold a hard 240px regardless of
   inner content. */
.stickyHeaderRow {
  display: flex !important;
  flex-direction: row !important;
  /* Stretch so the 3 left tray boxes grow to match the mini-cal's natural
     ~230px height. */
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  background: #ffffff;
  position: relative;
  z-index: 1;
  width: 100%;
}
/* 4-column horizontal layout (remarks | pending | parked | mini-cal).
   Wraps to 2 rows on medium screens, stacks on mobile. */
.stickyHeaderRow4Col {
  flex-wrap: wrap;
}
.stickyHeaderRemarks {
  /* All 3 left boxes split the remaining width evenly (after the 240px
     mini-cal on the far right and 3 gaps). flex: 1 1 0 makes them share
     the leftover space equally. */
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: 140px;
}
.stickyHeaderRemarks > .remarkBlock,
.stickyHeaderRemarks > #calRemarksInner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* Equalise the 3 left boxes (remarks + pending + parked) to a shared min-height
   so they read as a uniform row, regardless of inner content. The mini-cal
   keeps its natural taller height because it has its own intrinsic sizing. */
.stickyHeaderPending,
.stickyHeaderParked {
  min-height: 140px;
}
/* Columns: Remarks | Staging | Patient Detail share the leftover width
   EQUALLY (1:1:1); the mini-cal keeps its fixed 240px on the far right.
   All three left boxes use flex:1 1 0 so they are always the same width. */
.stickyHeaderRow4Col .stickyHeaderRemarks,
.stickyHeaderRow4Col .stickyHeaderPending,
.stickyHeaderRow4Col .stickyHeaderParked {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
/* Push mini-cal to the far right (creates the natural "far right" anchor
   while 3 left boxes flex to fill). */
.stickyHeaderRow4Col .stickyHeaderCal {
  margin-left: auto;
}
.pendingPatientTray,
.parkedTray {
  flex: 1 1 auto;
}
.stickyHeaderCal {
  flex: 0 0 240px;
  width: 240px;
  max-width: 240px;
  background: #ffffff;
  /* Override the default .calDatePicker which is position:absolute + 280px. */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  box-shadow: none;
}
@media (max-width: 720px) {
  .stickyHeaderRow {
    flex-direction: column !important;
  }
  .stickyHeaderRemarks,
  .stickyHeaderCal,
  .stickyHeaderParked,
  .stickyHeaderPending {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }
}

/* Hide the legacy 📅 date picker button + popover in the Calendar topbar:
   the inline mini-cal in the sticky header now handles date jumping. */
#calPickDate, #calDatePickerPop { display: none !important; }

/* ============================================================
   PARKED APPOINTMENTS TRAY
   ============================================================
   Sits between .stickyHeaderRemarks (flex 1) and .stickyHeaderCal (240px).
   Acts as a per-user staging area for appointments the user has dragged
   out of the calendar (intended to be re-dropped on a different date).
   Underlying booking + Cliniko appt are NOT modified while parked.
   ============================================================ */
.stickyHeaderParked {
  flex: 0 0 280px;
  width: 280px;
  max-width: 280px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
}
.parkedTray {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px dashed #f59e0b;
  border-radius: 10px;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 140px;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.parkedTray.parkedTrayDropTarget {
  border-color: #f97316;
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}
.parkedTrayHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.parkedTrayTitle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  color: #92400e;
  text-transform: uppercase;
}
.parkedTrayIcon { font-size: 12px; line-height: 1; }
.parkedTrayCount {
  font-size: 10px;
  background: #f59e0b;
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}
.parkedTrayEmpty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b45309;
  font-size: 11px;
  font-style: italic;
  text-align: center;
  padding: 10px;
  line-height: 1.4;
}
.parkedTrayList {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  max-height: 220px;
}
.parkedTrayChip {
  background: #fecaca; /* fallback — chips don't carry per-type color in tray */
  border-left: 3px solid rgba(0, 0, 0, 0.22);
  border-radius: 6px;
  padding: 5px 22px 5px 7px; /* extra right padding for the × button */
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 11px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .10),
    0 1px 2px rgba(15, 23, 42, .08);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
.parkedTrayChip:active { cursor: grabbing; }
.parkedTrayChip.parkedTrayChipDragging { opacity: 0.45; outline: 2px dashed #f97316; }

/* Multi-service visit parked in tray — subtle orange inset border + "Nx" pill
   in the top-right corner so the user knows dropping this chip onto a new
   slot will cascade ALL treatments in the visit (mirrors .calAppt.calApptMulti
   on the calendar). */
.parkedTrayChip.parkedTrayChipMultiVisit {
  box-shadow:
    inset 0 0 0 1.5px rgba(249, 115, 22, .55),
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .10),
    0 1px 2px rgba(15, 23, 42, .08);
}
.parkedTrayChipMulti {
  position: absolute;
  top: 2px;
  right: 22px; /* sit to the LEFT of the × remove button */
  min-width: 18px;
  height: 14px;
  padding: 0 4px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .92);
  color: #c2410c;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  z-index: 5;
  box-shadow: 0 0 0 1px rgba(194, 65, 12, .35);
  pointer-events: none;
  letter-spacing: .02em;
}
.parkedTrayChipTime {
  font-weight: 700;
  font-size: 10px;
  color: #334155;
}
.parkedTrayChipName {
  font-weight: 600;
  color: #0F172A;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.parkedTrayChipDesc {
  color: #334155;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.parkedTrayChipOrigin {
  color: #64748b;
  font-size: 9px;
  border-top: 1px dashed rgba(0, 0, 0, .15);
  padding-top: 2px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.parkedTrayChipRemove {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #64748b;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.parkedTrayChipRemove:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #0F172A;
}

/* ============================================================
   STAGING CHIP — S2 "time-rail" layout (2026-06-28 redesign)
   ============================================================
   Applied on top of .parkedTrayChip / .pendingPatientChip so existing
   drag/drop + remove handlers keep matching. Two states:
     .stagingChipScheduled — a real (dragged-in) booking; amber rail w/ time.
     .stagingChipToBook    — a "Make appointment" patient; violet "TO BOOK" rail.
   The chip becomes a horizontal flex row (rail | body), overriding the
   column layout inherited from .parkedTrayChip. */
.stagingChip {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 0;
  padding: 0 !important;
  overflow: hidden;
  background: #fff !important;
  /* Brand Harmony: white chip, light-blue border, coloured left accent bar. */
  border: 1px solid #d4e6f4 !important;
  border-left: 4px solid #c2410c !important; /* scheduled = warm accent */
  border-radius: 9px;
}
.stagingChipToBook { border-left-color: #5B9BC6 !important; } /* to-book = brand blue */
.stagingChip + .stagingChip { margin-top: 8px; }
.stagingChipRail {
  flex: 0 0 54px;
  background: #fef6e7;
  color: #92660a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 3px;
  border-right: 1px solid #f1e4c4;
  text-align: center;
}
.stagingChipRailDate { font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.stagingChipRailTime { font-size: 13px; font-weight: 800; margin-top: 1px; line-height: 1.1; }
.stagingChipRailDur  { font-size: 9px; color: #b58a2e; margin-top: 1px; }
/* "To book" chips: empty, narrow accent rail (the TO BOOK/new header was
   dropped). The brand-blue left accent border now marks not-yet-scheduled,
   so the inner rail is collapsed to nothing. */
.stagingChipRailToBook {
  flex: 0 0 0;
  width: 0;
  background: transparent;
  border-right: none;
  padding: 0;
}
.stagingChipBody {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  padding: 7px 22px 8px 9px; /* right pad for the × button */
}
.stagingChipName {
  font-weight: 700;
  color: #0f172a;
  font-size: 12.5px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stagingChipRef {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stagingChipMeta {
  font-size: 10.5px;
  color: #475569;
  margin-top: 3px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stagingChipHint {
  font-size: 10.5px;
  color: #3F7CA6;
  font-style: italic;
  margin-top: 4px;
  line-height: 1.3;
}
.stagingChipPills {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.stagingChipPill {
  font-size: 10px;
  background: #E8F2FA;
  color: #3F7CA6;
  border-radius: 5px;
  padding: 1px 6px;
  font-weight: 600;
  white-space: nowrap;
}
/* Keep the multi-visit "Nx" badge and × button positioned over the body. */
.stagingChip .parkedTrayChipMulti { right: 22px; top: 4px; }
.stagingChip .parkedTrayChipRemove,
.stagingChip .pendingPatientChipRemove { top: 4px; right: 5px; }

/* ============================================================
   PATIENT DETAIL — P2 "header band" layout (2026-06-28 redesign)
   ============================================================ */
/* Brand Harmony patient-detail band: name on the left, patient-number pill on
   the right (no "Patient No." label). Header colour signals sex —
   brand blue = male / unknown, rose pink = female. */
.pdBand {
  background: linear-gradient(135deg, var(--brand-deep, #3F7CA6), var(--brand, #5B9BC6));
  color: #fff;
  border-radius: 8px;
  padding: 11px 12px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pdBand.pdBandFemale {
  background: linear-gradient(135deg, #be4d86, #d96ca5);
}
.pdBandName { font-size: 15px; font-weight: 800; line-height: 1.18; min-width: 0; }
.pdBandSub  { font-size: 10.5px; opacity: .92; font-weight: 600; margin-top: 1px; }
.pdBandRef {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  background: rgba(255, 255, 255, .22);
  border-radius: 7px;
  padding: 4px 11px;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* Medical history + allergy cards. */
.pdMedSec { display: flex; flex-direction: column; gap: 6px; padding: 6px 2px 2px; }
.pdMedCard {
  border-radius: 8px;
  padding: 6px 10px;
  border: 1px solid transparent;
}
.pdMedCardAllergy { background: rgba(239, 68, 68, .07); border-color: rgba(239, 68, 68, .3); }
.pdMedCardHistory { background: var(--brand-soft, #E8F2FA); border-color: rgba(91, 155, 198, .4); }
.pdBandFemale ~ .pdGrid .pdMedCardHistory,
.pdGridFemale .pdMedCardHistory { background: #fbeef5; border-color: #e8b9d3; }
.pdMedK {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pdMedCardAllergy .pdMedK { color: #dc2626; }
.pdMedCardHistory .pdMedK { color: #3F7CA6; }
.pdGridFemale .pdMedCardHistory .pdMedK { color: #be4d86; }
.pdMedV { font-size: 11.5px; font-weight: 600; color: #334155; margin-top: 3px; line-height: 1.35; word-break: break-word; }
.pdGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 10px;
  padding: 4px 2px 2px;
}
.pdCell { min-width: 0; }
.pdCellFull { grid-column: 1 / -1; }
.pdCellK {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.pdCellV {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin-top: 1px;
  line-height: 1.25;
  word-break: break-word;
}
.pdChips { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 5px; }
.pdChip {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}
.pdChipIns { background: #fff1e6; color: #b45309; }
.pdChipImp { background: #ecfdf3; color: #127a3a; }
.pdNote {
  font-size: 11.5px;
  color: #334155;
  margin-top: 2px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px 8px;
  max-height: 96px;
  overflow-y: auto;
}

/* ============================================================
   PENDING APPOINTMENT TRAY (per-tab sessionStorage)
   ============================================================
   Standalone 240px column sitting horizontally between remarks and parked.
   Holds at most ONE patient chip — the patient the user clicked
   "📅 Make appointment" on. Drag chip onto a calendar slot to open
   the booking modal with that patient pre-selected.
   ============================================================ */
.stickyHeaderPending {
  flex: 0 0 240px;
  width: 240px;
  max-width: 240px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
}
/* Legacy wrapper (kept for safety in case any rendered markup still uses it). */
.stickyHeaderParkedCol {
  flex: 0 0 280px;
  width: 280px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stickyHeaderParkedCol .stickyHeaderParked {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-height: 140px;
}
@media (max-width: 720px) {
  .stickyHeaderParkedCol {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }
}
.pendingPatientTray {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border: 1.5px dashed #3b82f6;
  border-radius: 10px;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 140px;
  transition: border-color .12s ease, background .12s ease;
}
.pendingPatientTrayHeader {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.pendingPatientTrayTitle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  color: #1e3a8a;
  text-transform: uppercase;
}
.pendingPatientTrayIcon { font-size: 12px; line-height: 1; }
.pendingPatientTrayList {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pendingPatientTrayEmpty {
  color: #1e40af;
  font-size: 11px;
  font-style: italic;
  text-align: center;
  padding: 6px;
  line-height: 1.4;
  opacity: 0.75;
}
.pendingPatientChip {
  background: #dbeafe;
  border-left: 3px solid #2563eb;
  border-radius: 6px;
  padding: 5px 22px 5px 8px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .06),
    0 1px 2px rgba(15, 23, 42, .08);
}
.pendingPatientChip:active { cursor: grabbing; }
.pendingPatientChip.pendingPatientChipDragging {
  opacity: 0.45;
  outline: 2px dashed #f97316;
}
.pendingPatientChipHint {
  font-size: 9.5px;
  color: #1d4ed8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  opacity: 0.8;
}
.pendingPatientChipName {
  font-weight: 700;
  color: #0F172A;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pendingPatientChipRemove {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #64748b;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pendingPatientChipRemove:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #0F172A;
}

/* ============================================================
   STAGING BOX (merged Pending + Parked)
   ============================================================
   Reuses the .parkedTray surface (so calendar-card park drops keep working)
   and composes the pending chip + parked chips into one list with two
   sub-slots. The combined count + empty state live at this level.
   ============================================================ */
.stickyHeaderPending.stagingTrayHost {
  display: flex;
  flex-direction: column;
}
.stagingTrayHost .parkedTray.stagingTray {
  flex: 1 1 auto;
  /* Brand Harmony: professional light-blue surface (ties to the brand blue
     used in the patient detail header), clearly distinct from the yellow
     Daily Remarks beside it. */
  background: linear-gradient(180deg, #f6fafd 0%, #e8f2fa 100%);
  border: 1.5px solid #bcdcf0;
}
.stagingTrayHost .parkedTray.stagingTray.parkedTrayDropTarget {
  border-color: #f97316;
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}
.stagingTrayHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.stagingTrayTitle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  color: #3F7CA6;
  text-transform: uppercase;
}
.stagingTrayIcon { font-size: 12px; line-height: 1; }
.stagingTrayCount {
  font-size: 10px;
  background: #5B9BC6;
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}
.stagingTrayList {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  max-height: 240px;
  flex: 1 1 auto;
}
.stagingPendingSlot,
.stagingParkedList {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* The inner parked sub-list must NOT have its own scroll — the outer
   .stagingTrayList owns scrolling so pending + parked scroll together. */
.stagingParkedList {
  max-height: none;
  overflow: visible;
}
.stagingPendingSlot:empty,
.stagingParkedList:empty { display: none; }
.stagingTrayEmpty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 11px;
  font-style: italic;
  text-align: center;
  padding: 10px;
  line-height: 1.4;
}

/* ============================================================
   PATIENT DETAIL BOX (hover-driven, mounted in the freed parked slot)
   ============================================================ */
.patientDetailBox {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 140px;
  /* v64 (2026-07-02) — clicking the box opens the shown patient's folder
     (Yan's request). Cursor + subtle hover feedback signal that the whole
     box is a link, not just the header. When a patient is shown the .pdBand
     is present; the empty-state ("Hover an appointment…") has none. We rely
     on the click handler's no-op guard for the empty case, but visually,
     the pointer cursor + hover lift always applies. */
  cursor: pointer;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.patientDetailBox:hover {
  border-color: #94a3b8;
  box-shadow: 0 3px 12px rgba(15, 23, 42, .08);
}
.patientDetailBox.locked:hover {
  /* When locked, keep the amber accent even on hover so the lock state is
     never obscured by the generic hover treatment. */
  border-color: #d97706;
  box-shadow: 0 3px 12px rgba(245, 158, 11, .22);
}
.patientDetailHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.patientDetailTitle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  color: #334155;
  text-transform: uppercase;
}
.patientDetailIcon { font-size: 12px; line-height: 1; }

/* v63 (2026-07-02) — Lock toggle in the Patient Detail header. Compact pill
   that matches the panel's cool-slate palette. Locked state uses the panel's
   accent (a warm amber) so the pinned state is unmistakable without shouting. */
.patientDetailLockBtn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  user-select: none;
}
.patientDetailLockBtn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #1e293b;
}
.patientDetailLockBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, .45);
}
.patientDetailLockBtn .patientDetailLockIcon {
  font-size: 11px;
  line-height: 1;
}
.patientDetailLockBtn .patientDetailLockLbl {
  font-variant-caps: all-small-caps;
}
/* Locked state — warm amber accent, filled pill, drops the border. */
.patientDetailLockBtn.locked {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #78350f;
  box-shadow: 0 1px 0 rgba(120, 53, 15, .08);
}
.patientDetailLockBtn.locked:hover {
  background: #fde68a;
  border-color: #d97706;
  color: #78350f;
}
/* When locked, subtly accent the entire box so it's obvious even at a glance. */
.patientDetailBox.locked {
  border-color: #f59e0b;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .18);
}
.patientDetailBody {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 260px;
  font-size: 11px;
}
.patientDetailEmpty {
  color: #64748b;
  font-size: 11px;
  font-style: italic;
  text-align: center;
  padding: 10px;
  line-height: 1.4;
  opacity: .8;
}
.patientDetailSection {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.patientDetailSectionTitle {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #94a3b8;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 2px;
  margin-bottom: 2px;
}
.patientDetailRow {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  line-height: 1.3;
}
.patientDetailRowLabel { color: #64748b; flex: 0 0 auto; }
.patientDetailRowVal {
  color: #0f172a;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
.patientDetailUpcomingItem {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 2px 0;
  border-bottom: 1px dashed #e2e8f0;
}
.patientDetailUpcomingWhen { font-weight: 700; color: #334155; font-size: 10px; }
.patientDetailUpcomingTx { color: #475569; font-size: 10px; }

/* ---------------------------------------------------------------
   Collapse toggle button — a small pill that straddles the bottom
   edge of the sticky daily-remarks + mini-cal block. Lets the user
   hide both blocks when they need maximum vertical room for the
   appointment grid; clicks toggle the .stickyHeaderCollapsed class
   on the host (which hides .stickyHeaderRow). Persisted to
   localStorage so the preference sticks across reloads.
   --------------------------------------------------------------- */
.stickyHeaderCollapseBtn {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  /* Above sticky practitioner headers (z:4) and clinic headers (z:50)
     so the pill never gets visually covered when the user scrolls. */
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--ink-200, #e2e8f0);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink-700, #334155);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.stickyHeaderCollapseBtn:hover {
  background: #f97316;
  color: #ffffff;
  border-color: #f97316;
}
.stickyHeaderCollapseChevron {
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}

/* Collapsed state: hide the remarks + mini-cal row, shrink the host so
   the appointment grid takes over the freed space. The toggle button
   stays visible (anchored to the bottom edge of the collapsed host)
   so the user can re-expand. Extra bottom margin gives the collapse
   pill room to hang without overlapping the practitioner name headers
   that sit just below. */
.remarksHost.stickyHeaderCollapsed .stickyHeaderRow {
  display: none !important;
}
.remarksHost.stickyHeaderCollapsed {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 20px !important;
  min-height: 4px;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Compact the inline mini-calendar so it fits the 240px header column.
   These rules also override .calDatePicker defaults (which were designed
   for a popover: position:absolute, width:280px). */
.miniCal.calDatePicker {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  padding: 6px 8px 8px;
  border: 1px solid var(--ink-200, #e2e8f0);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  width: 100% !important;
  max-width: 240px;
  box-sizing: border-box;
}
.miniCal .calDpGrid { width: 100%; }
.miniCal .calDpHeader {
  gap: 4px;
  margin-bottom: 4px;
}
.miniCal .calDpSelect {
  font-size: 12px;
  padding: 2px 4px;
}
.miniCal .calDpGrid {
  gap: 2px;
}
.miniCal .calDpCell {
  min-height: 26px;
  height: 26px;
  font-size: 12px;
}
.miniCal .calDpWk {
  font-size: 10px;
  height: 18px;
}
.miniCal .calDpFooter {
  margin-top: 4px;
}
.miniCal .calDpFootBtn {
  font-size: 11px;
  padding: 3px 8px;
}

/* Tighten the remarks block when shown inside the compact sticky header. */
.stickyHeaderRemarks .remarkBlock {
  margin: 0;
}
.stickyHeaderRemarks .remarkBlockHead {
  padding-bottom: 4px;
}

.remarkBlock {
  border: 1px solid rgba(245, 158, 11, .4);
  background: rgba(245, 158, 11, .10);
  border-radius: var(--radius-sm, 8px);
  padding: 12px 14px;
}
.remarkBlock.empty {
  border-style: dashed;
  background: rgba(245, 158, 11, .04);
}

.remarkBlockHead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.remarkBlockTitle {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: #92400e;
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.remarkBlock.empty .remarkBlockTitle { color: var(--ink-500); }
.remarkPin { font-size: 12px; }

.remarkAddBtn {
  background: var(--brand-deep, #3F7CA6);
  color: white;
  border: none;
  padding: 5px 12px;
  border-radius: var(--radius-sm, 8px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  flex-shrink: 0;
}
.remarkAddBtn:hover { background: var(--brand, #5B9BC6); }

/* Day group inside week-view block */
.remarkDayGroup { margin-top: 10px; }
.remarkDayGroup:first-of-type { margin-top: 0; }
.remarkDayLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(245, 158, 11, .35);
  display: flex; align-items: baseline; gap: 8px;
}
.remarkDayLabel.today {
  color: var(--brand-deep, #3F7CA6);
  border-bottom-color: rgba(63, 124, 166, .4);
}
.remarkDow {
  font-size: 10px;
  color: var(--ink-500);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0;
}

.remarkRow {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0;
}
.remarkRow + .remarkRow { border-top: 1px dashed rgba(245, 158, 11, .25); }
.remarkRowBody { flex: 1; min-width: 0; }
.remarkText {
  font-size: 13.5px;
  color: var(--ink-900);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.remarkMeta {
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 2px;
}
.remarkMeta .by { font-weight: 600; color: var(--ink-700); }

.remarkClinicChips { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
.remarkClinicChip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  white-space: nowrap;
}
.remarkClinicChip-central { background: rgba(37, 99, 235, .12); color: #1d4ed8; }
.remarkClinicChip-mongkok { background: rgba(16, 185, 129, .12); color: #047857; }
.remarkClinicChip-jordan  { background: rgba(249, 115, 22, .12); color: #c2410c; }

.remarkRowActions { display: flex; gap: 2px; flex-shrink: 0; align-self: flex-start; }
.remarkIconBtn {
  background: transparent; border: none; color: var(--ink-400); cursor: pointer;
  padding: 2px 4px; font-size: 13px; border-radius: 4px;
}
.remarkIconBtn:hover { color: var(--ink-700); background: rgba(15, 23, 42, .04); }

.remarkEmptyHint {
  font-size: 12px;
  color: var(--ink-500);
  font-style: italic;
}
.remarkEmptyHint.remarkError { color: var(--bad, #DC2626); font-style: normal; }

/* ---------- Editor modal ---------- */

.remarkModalRoot { position: fixed; inset: 0; z-index: 9000; }
.remarkModalBackdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.remarkModal {
  background: white;
  border-radius: var(--radius, 12px);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.remarkModalHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-100);
}
.remarkModalTitle { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.remarkModalClose {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink-500);
  padding: 0 4px;
}
.remarkModalClose:hover { color: var(--ink-900); }
.remarkModalBody {
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto;
}
.remarkField { display: flex; flex-direction: column; gap: 4px; }
.remarkFieldLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--ink-500);
}
.remarkFieldInput {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-900);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
  background: white;
}
.remarkFieldInput:focus {
  outline: none;
  border-color: var(--brand, #5B9BC6);
  box-shadow: 0 0 0 3px rgba(91, 155, 198, .15);
}
.remarkTextarea { resize: vertical; min-height: 70px; }
.remarkClinicChecks {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px;
}
.remarkClinicCheck {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--ink-300);
  border-radius: 999px;
  background: white;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.remarkClinicCheck:hover { border-color: var(--ink-400); }
.remarkClinicCheck input { accent-color: var(--brand-deep, #3F7CA6); }
.remarkClinicCheck:has(input:checked) {
  background: var(--brand-soft, #E8F2FA);
  border-color: var(--brand-deep, #3F7CA6);
  color: var(--brand-deep, #3F7CA6);
  font-weight: 500;
}
.remarkModalError {
  font-size: 12px;
  color: var(--bad, #DC2626);
  background: var(--bad-soft, #FEE2E2);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
}
.remarkModalFoot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--ink-100);
  background: var(--ink-50);
}
.remarkFootSpacer { flex: 1; }
.remarkBtn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm, 8px);
  padding: 7px 14px;
  cursor: pointer;
  border: 1px solid transparent;
}
.remarkBtnPrimary {
  background: var(--brand-deep, #3F7CA6);
  color: white;
}
.remarkBtnPrimary:hover { background: var(--brand, #5B9BC6); }
.remarkBtnPrimary:disabled { opacity: .6; cursor: not-allowed; }
.remarkBtnGhost {
  background: white;
  color: var(--ink-700);
  border-color: var(--ink-300);
}
.remarkBtnGhost:hover { background: var(--ink-50); }
.remarkBtnDanger {
  background: white;
  color: var(--bad, #DC2626);
  border-color: rgba(220, 38, 38, .35);
}
.remarkBtnDanger:hover { background: var(--bad-soft, #FEE2E2); }

/* Mobile fits */
@media (max-width: 600px) {
  .remarkBlock { padding: 10px 12px; }
  .remarkText { font-size: 13px; }
  .remarkRow { flex-wrap: wrap; }
  .remarkClinicChips { order: 3; width: 100%; padding-top: 4px; }
  .remarkRowActions { order: 2; }
}

/* ============================================================================
   BOOKING MODAL
   ============================================================================ */

.calVacant { cursor: pointer; }
.calOffHoursBtn {
  border: none;
  cursor: pointer;
  padding: 0;
  background: rgba(148, 163, 184, .18);
  position: absolute;
  /* The base .calOffHours class sets pointer-events:none for the static
     greyed overlay. The button variant must opt back IN so reception can
     click an off-hours 15-min slot to book outside the working window. */
  pointer-events: auto;
  z-index: 3;
  left: 2px;
  right: 2px;
  border-radius: 4px;
  transition: background .12s ease;
}
.calOffHoursBtn:hover {
  background: rgba(91, 155, 198, .25);
  outline: 1px dashed rgba(91, 155, 198, .55);
}

.bookingModalRoot { position: fixed; inset: 0; z-index: 9100; }
.bookingModalBackdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.bookingModal {
  background: white;
  border-radius: var(--radius, 12px);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.bookingModalHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-100);
}
.bookingModalTitle { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.bookingModalClose {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink-500);
  padding: 0 4px;
}
.bookingModalClose:hover { color: var(--ink-900); }
.bookingModalSubhead {
  padding: 8px 18px 0;
  font-size: 12px;
  color: var(--ink-600);
  letter-spacing: .01em;
}
.bookingOutsideHoursNote {
  margin: 8px 18px 0;
  padding: 8px 10px;
  font-size: 12px;
  background: #FFF7E6;
  border: 1px solid #F59E0B;
  border-radius: var(--radius-sm, 8px);
  color: #92400E;
}
.bookingModalBody {
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
}
.bookingField { display: flex; flex-direction: column; gap: 4px; }
/* The `display:flex` above overrides the UA `[hidden]{display:none}`, so a
   .bookingField with the hidden attribute would still render. Re-assert none
   so the Add-Walk-In path can hide the Practitioner row via `hidden`. */
.bookingField[hidden] { display: none; }
.bookingFieldRow { display: flex; gap: 10px; }
.bookingFieldHalf { flex: 1; }
.bookingFieldLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--ink-500);
}
.bookingFieldInput {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-900);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
  background: white;
  width: 100%;
  box-sizing: border-box;
}
.bookingFieldInput:focus {
  outline: none;
  border-color: var(--brand, #5B9BC6);
  box-shadow: 0 0 0 3px rgba(91, 155, 198, .15);
}
.bookingTextarea { resize: vertical; min-height: 50px; }

/* Multi-service view-mode stacked treatments list. Renders read-only when
   the user opens a multi-service booking, mirroring the create modal's
   numbered-badge styling for visual continuity. */
.bookingViewMultiCount {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.bookingViewMultiList {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.bookingViewMultiRow {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--ink-50, #f8fafc);
  border: 1px solid var(--ink-100, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
}
.bookingViewMultiBadge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #f97316; color: white;
  font-size: 11px; font-weight: 700;
  flex: 0 0 20px;
}
.bookingViewMultiName {
  flex: 1; min-width: 0;
  font-size: 13px;
  color: var(--ink-800, #1e293b);
}

/* Multi-service stacked rows (Variant B) */
.bookingServicesField { gap: 6px; }
.bookingServicesList { display: flex; flex-direction: column; gap: 6px; }
.bookingServiceRow {
  display: flex; align-items: center; gap: 8px;
}
.bookingServiceBadge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 50%;
  background: #f97316; color: white;
  font-size: 12px; font-weight: 700;
  font-family: inherit;
  user-select: none;
}
.bookingServiceSelect { flex: 1; min-width: 0; }
.bookingServiceRemove {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--ink-200);
  color: var(--ink-500);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.bookingServiceRemove:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.bookingServiceRemove[hidden] { display: none !important; }
.bookingAddServiceBtn {
  align-self: flex-start;
  margin-top: 2px;
  background: transparent;
  border: 1px dashed #f97316;
  color: #c2410c;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s ease;
}
.bookingAddServiceBtn:hover { background: #fff7ed; }
.bookingAddServiceBtn[disabled] {
  opacity: .5; cursor: not-allowed;
  border-style: solid; border-color: var(--ink-200); color: var(--ink-500);
}
.bookingServicesHelp {
  font-size: 11px;
  color: var(--ink-500);
  line-height: 1.4;
  margin-top: 2px;
}

.bookingPatientPicker { position: relative; }
.bookingPatientResults {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm, 8px);
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  background: white;
}
.bookingPatientResultRow {
  display: block;
  width: 100%;
  text-align: left;
  background: white;
  border: none;
  border-bottom: 1px solid var(--ink-100);
  padding: 8px 10px;
  cursor: pointer;
  font-family: inherit;
}
.bookingPatientResultRow:last-child { border-bottom: none; }
.bookingPatientResultRow:hover { background: var(--ink-50); }
.bookingPatientResultName {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-900);
}
.bookingPatientZh { color: var(--ink-600); font-weight: 400; }
.bookingPatientResultMeta {
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 2px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.bookingPatientHomeClinic {
  background: var(--ink-100);
  border-radius: 4px;
  padding: 0 6px;
}
.bookingPatientResultEmpty {
  padding: 10px;
  font-size: 13px;
  color: var(--ink-500);
  text-align: center;
}
.bookingPatientResultErr { color: var(--bad, #DC2626); }

.bookingPatientChosen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: var(--brand-soft, #E8F2FA);
  border: 1px solid var(--brand-deep, #3F7CA6);
  border-radius: var(--radius-sm, 8px);
}
.bookingPatientChosenName {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-deep, #3F7CA6);
}
.bookingPatientChosenPhone { font-weight: 400; color: var(--ink-600); }

.bookingLinkBtn {
  background: transparent;
  border: none;
  color: var(--brand-deep, #3F7CA6);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
  font-weight: 500;
}
.bookingLinkBtn:hover { text-decoration: underline; }

.bookingNewPatientForm {
  border: 1px dashed var(--ink-300);
  border-radius: var(--radius-sm, 8px);
  padding: 10px;
  margin-top: 4px;
  background: var(--ink-50);
}
.bookingNewPatientGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bookingNewPatientGrid input,
.bookingNewPatientGrid select {
  width: 100%;
}
/* New-patient phone row — spans both columns so type+cc+digits fit cleanly */
.bookingNewPatientGrid .bnpPhoneWrap {
  grid-column: 1 / -1;
}
.bnpPhoneWrap .pePhoneMain {
  /* In new-patient form there's no remove button — still use 4-col but last is empty */
  grid-template-columns: 100px 90px 1fr 0;
}
.bookingNewPatientFoot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.bookingNewPatientError {
  margin-top: 8px;
  font-size: 12px;
  color: var(--bad, #DC2626);
  background: var(--bad-soft, #FEE2E2);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
}
.bookingNewPatientDupes {
  margin-top: 10px;
  border: 1px solid #F59E0B;
  border-radius: var(--radius-sm, 8px);
  background: #FFF7E6;
  padding: 8px;
}
.bookingNewPatientDupesHead {
  font-size: 12px;
  font-weight: 600;
  color: #92400E;
  margin-bottom: 6px;
}
.bookingNewPatientDupesFoot {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.bookingModalError {
  font-size: 12px;
  color: var(--bad, #DC2626);
  background: var(--bad-soft, #FEE2E2);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
}
.bookingConflictList {
  margin: 6px 0 0 16px;
  padding: 0;
  font-size: 12px;
  color: var(--ink-700);
}
.bookingConflictList li { margin-bottom: 2px; }
.bookingConflictList em { color: var(--ink-500); font-style: italic; }

.bookingModalFoot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--ink-100);
  background: var(--ink-50);
}
.bookingFootSpacer { flex: 1; }
.bookingBtn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm, 8px);
  padding: 7px 14px;
  cursor: pointer;
  border: 1px solid transparent;
}
.bookingBtnPrimary {
  background: var(--brand-deep, #3F7CA6);
  color: white;
}
.bookingBtnPrimary:hover { background: var(--brand, #5B9BC6); }
.bookingBtnPrimary:disabled { opacity: .6; cursor: not-allowed; }
.bookingBtnGhost {
  background: white;
  color: var(--ink-700);
  border-color: var(--ink-300);
}
.bookingBtnGhost:hover { background: var(--ink-50); }
.bookingLoading {
  text-align: center;
  font-size: 13px;
  color: var(--ink-500);
  padding: 20px;
}

@media (max-width: 600px) {
  .bookingModal { max-width: 100%; }
  .bookingNewPatientGrid { grid-template-columns: 1fr; }
  .bookingFieldRow { flex-direction: column; gap: 8px; }
}

/* Lane layout for overlapping appointments (side-by-side chips). */
.calAppt.calApptLaned {
  right: auto; /* override default right:2px; let inline left+width drive layout */
}

/* ============================================================
   Calendar layout — full-width (rail collapsed by default).
   The date picker now opens as a popover from the toolbar.
   ============================================================ */
.calLayout.calLayoutNoRail {
  grid-template-columns: 1fr;
}
.calLayout.calLayoutNoRail .calRail {
  display: none;
}

.calBtnPickDate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-weight: 500;
  white-space: nowrap;
}

.calDatePickerPop {
  position: absolute;
  top: 60px; /* below toolbar */
  left: 16px;
  z-index: 50;
  background: var(--surface, #fff);
  border: 1px solid var(--ink-200, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
  padding: 12px;
  min-width: 280px;
}
.calDatePickerPop[hidden] { display: none; }
/* Inside the popover the picker should be flush */
.calDatePickerPop .calDatePicker {
  position: static;
  width: 100%;
  box-shadow: none;
  border: 0;
  background: transparent;
  padding: 0;
}

/* Make the calendar header relative so the popover anchors below it */
#view-calendar .topbar {
  position: relative;
}

@media (max-width: 600px) {
  .calDatePickerPop {
    left: 8px;
    right: 8px;
    min-width: 0;
  }
}

/* =====================================================================
   PHASE A — Medical alerts banner (top of Clinical tab)
   ===================================================================== */
.medAlertBanner {
  background: linear-gradient(180deg, #fff5f5 0%, #ffeaea 100%);
  border: 1px solid #f5c2c2;
  border-left: 4px solid #d63838;
  border-radius: 10px;
  padding: 12px 14px 10px;
  margin: 0 0 14px;
  box-shadow: 0 1px 2px rgba(214, 56, 56, 0.08);
}
.medAlertHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.medAlertIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  background: #d63838;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}
.medAlertHeading {
  font-size: 13px;
  font-weight: 700;
  color: #8a1f1f;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.medAlertRows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.medAlertRow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.medAlertLabel {
  flex: 0 0 auto;
  min-width: 110px;
  font-size: 11px;
  font-weight: 600;
  color: #6b2020;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 4px;
}
.medAlertValue {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
/* Medical alert chips — base style. Tier color set by modifier class. */
.medAlertChip {
  display: inline-block;
  font-weight: 600;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 12px;
  line-height: 1.4;
  background: #d63838;
  color: #fff;
}
/* ALLERGY tier — strong red, white text. Stop-the-press signal. */
.medAlertChip--allergy {
  background: #d63838;
  color: #fff;
  border: 1px solid #b81f1f;
}
/* MEDICAL HISTORY tier — amber. Clinical context, not stop-the-press. */
.medAlertChip--medhx {
  background: #fff5e0;
  color: #8a5a00;
  border: 1px solid #e8c074;
  font-weight: 500;
}
/* DRUG HISTORY tier — blue. Medication awareness. */
.medAlertChip--drug {
  background: #e6f0fa;
  color: #1a4b80;
  border: 1px solid #9fc4ec;
  font-weight: 500;
}
/* Legacy generic chip (kept for any callers still using it). */
.medAlertChipNeutral {
  display: inline-block;
  background: #fff;
  color: #8a1f1f;
  font-weight: 500;
  font-size: 13px;
  padding: 3px 10px;
  border: 1px solid #e8b4b4;
  border-radius: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
}

/* Sidebar Alerts panel — mirrors the top-of-page banner with the same
   color tiers, laid out compactly inside the patient sidebar. */
.psAlertRows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.psAlertRow {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.psAlertLabel {
  font-size: 10px;
  font-weight: 700;
  color: #6b2020;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.psAlertChips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* =====================================================================
   PHASE A — Prescriptions section (below editor, above earlier visits)
   ===================================================================== */
.rxSection {
  margin: 0 0 18px;
}
.rxSectionHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.rxSectionTitle {
  font-size: 14px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rxSectionCount {
  font-size: 12px;
  color: #7f8c8d;
}
.rxEventList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rxEvent {
  background: #fafbfc;
  border: 1px solid #e3e8ec;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
.rxEvent:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.rxEventHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}
.rxEventHeadLeft {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.rxEventHeadRight {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #5a6c7d;
  flex-shrink: 0;
}
.rxEventDate {
  font-weight: 600;
  font-size: 13px;
  color: #2c3e50;
}
.rxEventCount {
  font-size: 12px;
  color: #7f8c8d;
  background: #ecf0f3;
  padding: 1px 7px;
  border-radius: 10px;
}
.rxEventClinic {
  font-weight: 500;
  color: #34495e;
}
.rxEventDoctor {
  color: #5a6c7d;
}
.rxEventChevron {
  font-size: 11px;
  color: #95a5a6;
  transition: transform 0.15s ease;
}
.rxEventOpen .rxEventChevron {
  transform: rotate(180deg);
}
.rxDrugList {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.rxEventOpen .rxDrugList {
  max-height: 9999px;
  border-top: 1px solid #e3e8ec;
}
.rxDrugItem {
  padding: 8px 12px;
  border-bottom: 1px solid #eef1f4;
}
.rxDrugItem:last-child {
  border-bottom: none;
}
.rxDrugHeadRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.rxDrugName {
  font-weight: 600;
  font-size: 13px;
  color: #2c3e50;
  flex: 1;
  min-width: 0;
}
.rxDrugPrintBtns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.rxDrugPrintBtn {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid #d0d6dc;
  border-radius: 4px;
  background: #fff;
  color: #5a6c7d;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.rxDrugPrintBtn:hover { color: #f97316; border-color: #f97316; }
.rxDrugPrintBtn:disabled { opacity: 0.55; cursor: progress; }
.rxDrugMeta {
  font-size: 11px;
  color: #7f8c8d;
  margin-bottom: 3px;
}
.rxDrugInstruction {
  font-size: 12px;
  color: #34495e;
  line-height: 1.4;
  white-space: pre-wrap;
  margin-bottom: 2px;
}
.rxDrugSchedule {
  font-size: 12px;
  color: #5a6c7d;
  font-style: italic;
  white-space: pre-wrap;
}

/* ==========================================================================
   Booking modal — VIEW mode (read-only display of an existing booking)
   Mirrors the visual language of .bookingField* but renders as definition
   pairs instead of editable inputs. Used by the two-mode booking modal so
   reception can read details before optionally clicking "Edit".
   ========================================================================== */

.bookingViewGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  padding: 4px 0 6px;
}

.bookingViewRow {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0; /* let long values wrap inside grid cells */
}

/* Full-width rows for note blocks (patient-visible / reception-only). */
.bookingViewRowFull {
  grid-column: 1 / -1;
}

.bookingViewLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--ink-500);
}

.bookingViewValue {
  font-size: 14px;
  color: var(--ink-900);
  word-break: break-word;
  line-height: 1.4;
}
.bookingViewCreatedWhen {
  color: var(--ink-400);
  font-weight: 500;
}

/* Note blocks (patient-visible + reception-only) get a soft surface so
   they stand apart from the simple definition pairs. */
.bookingViewNote {
  font-size: 13px;
  color: var(--ink-800, var(--ink-900));
  line-height: 1.5;
  background: var(--ink-50, #F8FAFC);
  border: 1px solid var(--ink-100, #E2E8F0);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Reception-only notes use the same warm tint as outside-hours warnings
   so dentists at a glance know "this is internal, not visible to patient". */
.bookingViewNoteReception {
  background: #FFF7E6;
  border-color: #F59E0B;
  color: #78350F;
}

/* 2026-07-05 — Patient review outcome card in the booking-details modal.
   Three tints: positive (green), neutral (amber), needs-attention (red). */
.bookingReviewCard {
  border: 1px solid #BFE8D6;
  background: linear-gradient(180deg, #E8F7F0, #FFFFFF 78%);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bookingReviewCard.bookingReviewNeu {
  border-color: #F2DCAE;
  background: linear-gradient(180deg, #FDF4E5, #FFFFFF 78%);
}
.bookingReviewCard.bookingReviewNeg {
  border-color: #F5C6C0;
  background: linear-gradient(180deg, #FDECEA, #FFFFFF 78%);
}
.bookingReviewTop {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bookingReviewEmoji {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 30, 50, .10);
  flex: none;
}
.bookingReviewMeta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.bookingReviewStatus {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bookingReviewStars {
  letter-spacing: 1px;
  font-size: 15px;
}
.bookingReviewStarsOn { color: #F5A623; }
.bookingReviewStarsOff { color: #D7DDE6; }
.bookingReviewBadge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  background: #1A9D6B;
}
.bookingReviewNeu .bookingReviewBadge { background: #B06F11; }
.bookingReviewNeg .bookingReviewBadge { background: #C0392B; }
.bookingReviewWhen {
  font-size: 12px;
  color: #7B8697;
}
.bookingReviewReason {
  background: #fff;
  border: 1px solid #E6EAF0;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: #3A4553;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.bookingReviewReasonLbl {
  display: block;
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #7B8697;
  font-weight: 600;
  margin-bottom: 3px;
}

/* "Confirmed booking" row in booking modal. Owner + receptionist see the
   checkbox; dentists/nurses see a read-only chip. */
.bookingConfirmedRow {
  background: #FFF7ED; /* orange-50 — keeps the orange visual cue */
  border: 1px solid #FDBA74; /* orange-300 */
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
  gap: 6px;
}
.bookingConfirmedToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #9A3412; /* orange-800 */
  cursor: pointer;
  user-select: none;
}
.bookingConfirmedToggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #f97316; /* orange-500 */
  cursor: pointer;
}
.bookingConfirmedToggle input[type="checkbox"]:disabled { cursor: progress; opacity: .6; }
.bookingConfirmedChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #9A3412;
}
.bookingConfirmedTick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f97316;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 540px) {
  .bookingViewGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ============================================================
   DOCUMENTS TAB — Imported certificates / referrals / sickness slips
   ============================================================ */
.docSection {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Generate-buttons strip at the top of the Documents tab — owner/dentist only. */
.docGenBar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 12px 0;
  border-bottom: 1px solid #eef0f3;
}
.docGenBtn { font-weight: 600; }
.docLabelBar {
  display: flex;
  padding: 4px 0 12px 0;
}
.docLabelBtn { font-weight: 600; }
/* Small chip on a generated cert row — distinguishes from imported PDFs. */
.docRowChip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}
.docRowChipGen {
  background: #e8f1ff;
  color: #1858b8;
  border: 1px solid #cfe0fa;
}
/* Cert modal tweaks — reuses rxModal classes; just narrow it a bit because
   the form has fewer columns than the prescription form. */
.certModal { max-width: 720px; }
.certFormRow .rxDrugFieldGrid { padding-top: 8px; }
.certBodyTa {
  font-family: inherit;
  resize: vertical;
  min-height: 140px;
}
.certModalError {
  background: #fdecea;
  color: #b71c1c;
  border: 1px solid #f5c2bd;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 8px;
  font-size: 13px;
}
.docFilterBar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.docFilterChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.docFilterChip:hover { background: #f9fafb; border-color: #9ca3af; }
.docFilterChip.active {
  background: #111827;
  border-color: #111827;
  color: #fff;
}
.docFilterChip .docFilterCount {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
}
.docFilterChip.active .docFilterCount { background: rgba(255,255,255,0.18); color: #fff; }

.docRowList { display: flex; flex-direction: column; gap: 8px; }

.docRow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.docRow:hover {
  border-color: #c7d2fe;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.docRowMain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.docRowHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.docRowDate { font-weight: 600; color: #111827; min-width: 100px; }
.docRowType {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.docType_sickness   { background: #fef3c7; color: #92400e; }
.docType_attendance { background: #dbeafe; color: #1e40af; }
.docType_referral   { background: #ede9fe; color: #5b21b6; }
.docType_reply      { background: #d1fae5; color: #065f46; }
.docType_other      { background: #f3f4f6; color: #374151; }
.docRowSubtype { color: #6b7280; font-size: 13px; }
.docRowMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: #6b7280;
}
.docRowClinic::before  { content: "🏥 "; }
.docRowDoctor::before  { content: "👤 "; }
.docRowActions { flex-shrink: 0; display: inline-flex; gap: 6px; align-items: center; }
/* Ghost-style red Delete button — visually de-emphasized vs the primary Open
   button so receptionists don't fat-finger it. Same height as docRowOpen. */
.docRowDelete {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #fecaca;
  background: #fff;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.docRowDelete:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}
.docRowDelete:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.docRowOpen {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease;
}
.docRowOpen:hover { background: #1d4ed8; border-color: #1d4ed8; }
.docRowOpen.disabled {
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
  cursor: not-allowed;
}

/* PDF modal overlay */
.docPdfModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.docPdfBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
}
.docPdfDialog {
  position: relative;
  width: min(1000px, 95vw);
  height: min(900px, 92vh);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.docPdfHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.docPdfTitle { font-weight: 600; color: #111827; font-size: 14px; }
.docPdfActions { display: flex; align-items: center; gap: 8px; }
.docPdfDownload {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.docPdfDownload:hover { background: #f3f4f6; }
.docPdfClose {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
}
.docPdfClose:hover { background: #f3f4f6; color: #111827; }
.docPdfBody { flex: 1; background: #525659; }
.docPdfFrame { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 768px) {
  .docRow { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .docRowDate { min-width: 0; }
  .docRowActions { display: flex; gap: 6px; }
  .docRowOpen { flex: 1; text-align: center; }
  .docRowDelete { flex: 0 0 auto; text-align: center; }
  .docPdfDialog { width: 100vw; height: 100vh; border-radius: 0; }
  .docPdfModal { padding: 0; }
}

/* =====================================================================
   IMAGES TAB — thumbnail grid, tile cards, fullscreen lightbox
   ===================================================================== */

/* Reuses .docFilterBar / .docFilterChip from documents tab. */

.imgSection { display: flex; flex-direction: column; gap: 12px; }

.imgTileGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.imgTile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.imgTile:hover {
  border-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.10);
}
.imgTile:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.imgTileThumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.imgTileImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0f172a;
}

.imgTilePlaceholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #cbd5e1;
}
.imgTilePlaceholderIcon { font-size: 36px; }
.imgTilePlaceholderExt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.10);
  padding: 2px 8px;
  border-radius: 4px;
}

.imgTileMeta {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #374151;
}
.imgTileHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.imgTileDate { font-weight: 600; color: #111827; }
.imgTileCat {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
}
.imgCat_xray  { background: #fee2e2; color: #991b1b; }
.imgCat_photo { background: #dbeafe; color: #1e40af; }
.imgCat_scan  { background: #ede9fe; color: #5b21b6; }
.imgCat_other { background: #f3f4f6; color: #374151; }

.imgTileDesc {
  color: #6b7280;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imgTileDoctor {
  color: #6b7280;
  font-size: 11px;
}
.imgTileDoctor::before { content: "👤 "; }

/* Fullscreen lightbox */
.imgLightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.imgLightboxBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  cursor: zoom-out;
}
.imgLightboxDialog {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: #f1f5f9;
}
.imgLightboxHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(6px);
}
.imgLightboxTitle { font-weight: 600; font-size: 14px; }
.imgLightboxActions { display: flex; gap: 6px; align-items: center; }
.imgLightboxBtn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #f1f5f9;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}
.imgLightboxBtn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.30); }
.imgLightboxClose { font-size: 18px; padding: 4px 10px; }

.imgLightboxStage {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
}
.imgLightboxStage.dragging { cursor: grabbing; }
.imgLightboxImg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 60ms ease-out;
  will-change: transform;
}

.imgLightboxFallback {
  display: flex;
  align-items: center;
  justify-content: center;
}
.imgLightboxFallbackInner {
  text-align: center;
  background: rgba(15, 23, 42, 0.6);
  padding: 36px 48px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
}
.imgLightboxFallbackIcon { font-size: 64px; margin-bottom: 12px; }
.imgLightboxFallbackText { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.imgLightboxFallbackHint { font-size: 12px; color: #cbd5e1; }

.imgLightboxNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  color: #f1f5f9;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.imgLightboxNav:hover { background: rgba(255,255,255,0.20); }
.imgLightboxPrev { left: 16px; }
.imgLightboxNext { right: 16px; }

.imgLightboxFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.85);
  font-size: 12px;
  color: #cbd5e1;
}

@media (max-width: 768px) {
  .imgTileGrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .imgLightboxNav { width: 40px; height: 40px; font-size: 22px; }
  .imgLightboxPrev { left: 8px; }
  .imgLightboxNext { right: 8px; }
  .imgLightboxBtn { padding: 5px 8px; font-size: 12px; }
}

/* =================================================================== */
/* PRACTITIONER AVAILABILITY — modal + context menu + edit-block ribbon */
/* =================================================================== */

/* Toolbar button */
.calBtn.calBtnAvail {
  background: var(--surface);
  border: 1px solid var(--ink-300);
  color: var(--ink-700);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  margin-left: 6px;
}
.calBtn.calBtnAvail:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
}

/* Make existing block ribbons (with cliniko_id) feel clickable */
button.calUnavail.calUnavailBtn {
  cursor: pointer;
  border: 0;
  border-left: 3px solid #DC2626;            /* red instead of amber */
  background: rgba(220, 38, 38, .10);
  font: inherit;
  width: calc(100% - 4px);
  text-align: left;
}
button.calUnavail.calUnavailBtn:hover {
  background: rgba(220, 38, 38, .18);
}
button.calUnavail.calUnavailBtn .calUnavailLabel {
  color: #991B1B;
}

/* Right-click context menu */
.availContextMenu {
  position: fixed;
  z-index: 1000;
  background: var(--surface, #fff);
  border: 1px solid var(--ink-300, #cbd5e1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
  padding: 4px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.availContextMenu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  color: var(--ink-700, #334155);
}
.availContextMenu button:hover {
  background: var(--brand-soft, #eff6ff);
  color: var(--brand-deep, #1e40af);
}

.availModeDot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.availModeDot.block { background: #DC2626; }
.availModeDot.open  { background: #16A34A; }

/* Modal — backdrop never closes; only X button */
.availModalRoot {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.availModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.availModal {
  position: relative;
  background: var(--surface, #fff);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.availModalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-200, #e2e8f0);
  background: var(--ink-50, #f8fafc);
}
.availModalTitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900, #0f172a);
}
.availModalClose {
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-500, #64748b);
  padding: 0 6px;
  border-radius: 4px;
}
.availModalClose:hover {
  background: var(--ink-100, #f1f5f9);
  color: var(--ink-900, #0f172a);
}
.availModalBody {
  padding: 16px 18px;
  overflow-y: auto;
}
.availLoading { color: var(--ink-500); padding: 12px; text-align: center; }
.availMuted { color: var(--ink-500); font-size: 13px; padding: 8px; }
/* Helper note explaining why some practitioners aren't shown in the picker
   (block-mode filter only includes scheduled / booked practitioners). */
.availMutedNote {
  color: var(--ink-600, #475569);
  font-size: 12px;
  padding: 8px 10px;
  margin-top: 6px;
  background: var(--ink-50, #f8fafc);
  border: 1px dashed var(--ink-200, #e2e8f0);
  border-radius: 6px;
  line-height: 1.45;
}
.availMutedNote b { color: var(--ink-800, #1e293b); font-weight: 600; }

/* Mode toggle */
.availModeRow {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  background: var(--ink-100, #f1f5f9);
  padding: 4px;
  border-radius: 8px;
}
.availModeBtn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--ink-600, #475569);
  transition: background .15s;
}
.availModeBtn.active {
  background: var(--surface, #fff);
  color: var(--ink-900, #0f172a);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* Form fields */
.availFieldRow { display: flex; gap: 12px; margin-bottom: 12px; }
.availFieldRow .availField { flex: 1; }
.availField { margin-bottom: 12px; }
.availLabel {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700, #334155);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.availInput {
  width: 100%;
  border: 1px solid var(--ink-300, #cbd5e1);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  background: var(--surface, #fff);
  color: var(--ink-900, #0f172a);
}
.availInput:focus {
  outline: none;
  border-color: var(--brand, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
.availInput[disabled] { background: var(--ink-100, #f1f5f9); color: var(--ink-500, #64748b); }

.availPracChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--ink-200, #e2e8f0);
  border-radius: 8px;
  max-height: 140px;
  overflow-y: auto;
}
.availPracChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--ink-300, #cbd5e1);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  background: var(--surface, #fff);
  user-select: none;
  transition: background .12s, border-color .12s, color .12s;
}
.availPracChip input { display: none; }
.availPracChip.checked {
  background: var(--brand-soft, #dbeafe);
  border-color: var(--brand, #3b82f6);
  color: var(--brand-deep, #1e40af);
  font-weight: 600;
}
.availLinkBtn {
  background: transparent;
  border: 0;
  color: var(--brand, #3b82f6);
  cursor: pointer;
  font-size: 11px;
  padding: 0 4px;
  text-transform: none;
  letter-spacing: 0;
}
.availLinkBtn:hover { text-decoration: underline; }

/* Time presets */
.availPresets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.availPresetBtn {
  background: var(--ink-100, #f1f5f9);
  border: 1px solid var(--ink-200, #e2e8f0);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink-700, #334155);
}
.availPresetBtn:hover {
  background: var(--brand-soft, #dbeafe);
  border-color: var(--brand, #3b82f6);
  color: var(--brand-deep, #1e40af);
}

/* Conflict / error */
.availConflict {
  background: rgba(217, 119, 6, .12);
  border: 1px solid rgba(217, 119, 6, .35);
  color: #92400E;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 10px;
}
.availError {
  background: rgba(220, 38, 38, .10);
  border: 1px solid rgba(220, 38, 38, .35);
  color: #991B1B;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 10px;
}

/* Action row */
.availActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.availActionsRight {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.availSaveBtn,
.availCancelBtn,
.availDeleteBtn {
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.availSaveBtn {
  background: var(--brand, #3b82f6);
  color: #fff;
}
.availSaveBtn:hover { background: var(--brand-deep, #1e40af); }
.availSaveBtn[disabled] { opacity: .6; cursor: not-allowed; }
.availCancelBtn {
  background: transparent;
  color: var(--ink-700, #334155);
  border: 1px solid var(--ink-300, #cbd5e1);
}
.availCancelBtn:hover { background: var(--ink-100, #f1f5f9); }
.availDeleteBtn {
  background: transparent;
  color: #991B1B;
  border: 1px solid rgba(220, 38, 38, .35);
}
.availDeleteBtn:hover { background: rgba(220, 38, 38, .10); }
.availDeleteBtn[disabled] { opacity: .6; cursor: not-allowed; }

/* v49: Existing blocks list inside the block-off modal */
.availExistingWrap { margin-top: 4px; }
.availExistingList {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--ink-200, #e5e7eb);
  border-radius: 8px;
  padding: 6px;
  background: var(--ink-50, #f8fafc);
}
.availExistingRow {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.availExistingEdit {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--ink-200, #e5e7eb);
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-800, #1e293b);
  cursor: pointer;
  text-align: left;
  transition: background .12s, border-color .12s;
}
.availExistingEdit:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}
.availExistingPrac { font-weight: 600; color: var(--ink-900, #0f172a); min-width: 110px; }
.availExistingTime { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #b91c1c; }
.availExistingClinic {
  font-size: 11px;
  padding: 2px 6px;
  background: #e0e7ff;
  color: #3730a3;
  border-radius: 4px;
}
.availExistingLabel {
  font-size: 12px;
  color: var(--ink-600, #475569);
  font-style: italic;
  margin-left: auto;
}
.availExistingDel {
  width: 32px;
  background: transparent;
  border: 1px solid rgba(220, 38, 38, .35);
  border-radius: 6px;
  color: #991B1B;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .12s;
}
.availExistingDel:hover { background: rgba(220, 38, 38, .12); }
.availExistingDel[disabled] { opacity: .5; cursor: not-allowed; }

/* v53 — kind badges + open-hours row variant. Block rows keep the existing
   red hover (destructive treatment); Open rows use green (additive). */
.availExistingKind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.availExistingKindBlock { background: #fee2e2; color: #991B1B; border-color: #fecaca; }
.availExistingKindOpen  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.availExistingRow--open .availExistingEdit:hover { background: #f0fdf4; border-color: #86efac; }
.availExistingRow--open .availExistingTime { color: #166534; }
.availExistingRow--open .availExistingDel { border-color: rgba(22, 101, 52, .35); color: #166534; }
.availExistingRow--open .availExistingDel:hover { background: rgba(22, 101, 52, .12); }

@media (max-width: 600px) {
  .availFieldRow { flex-direction: column; gap: 0; }
  .availModal { max-width: calc(100vw - 16px); }
  .availExistingPrac { min-width: 0; }
}

/* ============================================================
   PRESCRIPTION MODAL — add / edit a prescription event
   ============================================================
   Pattern follows the remarkModal but with NO backdrop close
   (per Calvin's standing rule: only X-button or Cancel close). */

.rxAddBar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}
.rxBtn {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.rxBtnPrimary {
  background: #1f6feb;
  color: #fff;
  border-color: #1f6feb;
  font-weight: 600;
}
.rxBtnPrimary:hover { background: #1858b8; border-color: #1858b8; }
.rxBtnPrimary:disabled { background: #95a5a6; border-color: #95a5a6; cursor: not-allowed; }
.rxBtnGhost {
  background: #fff;
  color: #34495e;
  border-color: #cbd2d9;
}
.rxBtnGhost:hover { background: #f4f6f8; }
/* Secondary action — the plain "Save" (no print) sitting next to the primary
   "Save and print". Outline/blue so it reads as the lighter of the two. */
.rxBtnSecondary {
  background: #eef4ff;
  color: #1f6feb;
  border-color: #9ec1f5;
  font-weight: 600;
}
.rxBtnSecondary:hover { background: #dfeaff; border-color: #1f6feb; }
.rxBtnSecondary:disabled { background: #f0f2f4; color: #95a5a6; border-color: #d6dbe0; cursor: not-allowed; }

/* Edit/Delete buttons on rxEvent header (board-written events only) */
.rxEventBtn {
  font: inherit;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #cbd2d9;
  background: #fff;
  color: #5a6c7d;
  cursor: pointer;
  transition: all 0.12s ease;
}
.rxEventBtn:hover { background: #f4f6f8; }
.rxEventBtnEdit:hover { color: #1f6feb; border-color: #1f6feb; }
.rxEventBtnDelete:hover { color: #c0392b; border-color: #c0392b; }
.rxEventBtnPrint:hover { color: #f97316; border-color: #f97316; }
.rxEventBtnPrint:disabled { opacity: 0.55; cursor: progress; }

.rxPrintAllBtn {
  margin-left: auto;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid #f97316;
  color: #f97316;
  background: #fff7ed;
  border-radius: 6px;
  cursor: pointer;
}
.rxPrintAllBtn:hover { background: #f97316; color: #fff; }
.rxPrintAllBtn:disabled { opacity: 0.55; cursor: progress; }

/* Printer settings modal */
.prnHelperOk    { padding: 10px 12px; border-radius: 6px; background: #ecfdf5; color: #047857; font-size: 13px; margin-bottom: 10px; }
.prnHelperFail  { padding: 10px 12px; border-radius: 6px; background: #fef3c7; color: #92400e; font-size: 13px; margin-bottom: 10px; line-height: 1.45; }
.prnHelperFail a { color: #92400e; text-decoration: underline; }
.prnIntro       { color: #5a6c7d; font-size: 13px; margin: 4px 0 12px; line-height: 1.45; }
.prnRows        { display: flex; flex-direction: column; gap: 10px; }
.prnRow         { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 14px; padding: 10px; border: 1px solid #e6e9ec; border-radius: 6px; background: #fafbfc; }
.prnRowClinic   { font-size: 12px; color: #5a6c7d; line-height: 1.35; }
.prnSelect      { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid #cbd2d9; border-radius: 5px; background: #fff; width: 100%; }
.prnNoDevices   { margin-top: 10px; padding: 10px 12px; border-radius: 6px; background: #fef3c7; color: #92400e; font-size: 13px; }

.userChipMenuItem {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 13px; padding: 8px 12px;
  background: transparent; border: 0; cursor: pointer; color: #1a202c;
}
.userChipMenuItem:hover { background: #f4f6f8; }

/* Modal */
.rxModalRoot {
  position: fixed;
  inset: 0;
  z-index: 9000;
}
.rxModalBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 38, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rxModal {
  background: #fff;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rxModalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e3e8ec;
}
.rxModalTitle {
  font-size: 15px;
  font-weight: 700;
  color: #2c3e50;
}
.rxModalClose {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #95a5a6;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 4px;
}
.rxModalClose:hover { background: #f0f3f5; color: #34495e; }

.rxModalBody {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}
.rxModalContext {
  display: flex;
  gap: 18px;
  padding: 10px 12px;
  background: #f6f9fc;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  flex-wrap: wrap;
}
.rxModalCtxItem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rxModalCtxLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7f8c8d;
  font-weight: 600;
}
.rxModalCtxValue {
  font-weight: 500;
  color: #2c3e50;
}

.rxDrugRows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rxDrugRow {
  border: 1px solid #e3e8ec;
  border-radius: 8px;
  background: #fafbfc;
  padding: 10px 12px;
}
.rxDrugRowHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.rxDrugRowTitle {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6c7d;
}
.rxDrugRowRemove {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #c0392b;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 4px;
}
.rxDrugRowRemove:hover { background: #fdedec; }

.rxDrugFieldGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 10px;
}
.rxField {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rxFieldFull {
  grid-column: 1 / -1;
}
.rxFieldLabel {
  font-size: 11px;
  font-weight: 600;
  color: #5a6c7d;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rxFieldRequired { color: #c0392b; }
.rxFieldHint {
  font-size: 10px;
  font-weight: 500;
  color: #95a5a6;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}
.rxFieldInput {
  font: inherit;
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid #cbd2d9;
  border-radius: 5px;
  background: #fff;
  color: #2c3e50;
  outline: none;
  transition: border-color 0.12s ease;
}
.rxFieldInput:focus { border-color: #1f6feb; }

.rxAddDrugRow {
  margin-top: 12px;
}

.rxModalError {
  margin-top: 12px;
  padding: 8px 12px;
  background: #fdedec;
  border: 1px solid #f5c6cb;
  color: #c0392b;
  border-radius: 6px;
  font-size: 13px;
}

.rxModalFoot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid #e3e8ec;
  background: #fafbfc;
}

@media (max-width: 600px) {
  .rxDrugFieldGrid { grid-template-columns: 1fr; }
  .rxModal { max-width: calc(100vw - 16px); }
  .rxModalContext { gap: 12px; }
}

/* ---------- Drug picker + combo presets (Phase 1b enhancement) ---------- */

/* Combo bar: appears once at top of modal body, above all drug rows. */
.rxComboBar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 0 0 14px 0;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 8px;
}
.rxComboBarLabel {
  font-size: 12px;
  font-weight: 600;
  color: #856404;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.rxComboBtn {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  background: #ffc107;
  color: #2c3e50;
  border: 1px solid #f0ad00;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.06s ease;
}
.rxComboBtn:hover { background: #ffb300; }
.rxComboBtn:active { transform: translateY(1px); }

/* Drug picker: per-row strip of common-drug buttons. */
.rxDrugPicker {
  margin: 0 0 12px 0;
  padding: 8px 10px;
  background: #f0f6ff;
  border: 1px solid #c7dbf5;
  border-radius: 6px;
}
.rxDrugPickerLabel {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #2c5282;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.rxDrugPickerGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rxDrugPickerBtn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  background: #fff;
  color: #2c5282;
  border: 1px solid #c7dbf5;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.rxDrugPickerBtn:hover {
  background: #2c5282;
  color: #fff;
  border-color: #2c5282;
}
.rxDrugPickerBtn:active { transform: translateY(1px); }

@media (max-width: 600px) {
  .rxDrugPickerBtn { font-size: 11px; padding: 4px 8px; }
  .rxComboBtn { font-size: 12px; padding: 5px 10px; }
}

/* ---------- Editable header fields (Date / Clinic / Doctor) ---------- */
.rxModalContextEditable {
  align-items: stretch;
}
.rxModalContextEditable .rxModalCtxItem {
  flex: 1 1 160px;
  min-width: 140px;
  cursor: default;
}
.rxModalCtxInput {
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 5px;
  padding: 6px 8px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  cursor: pointer;
}
.rxModalCtxInput:focus {
  outline: none;
  border-color: #2c5282;
  box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.15);
}
select.rxModalCtxInput {
  appearance: auto;
  cursor: pointer;
}
input[type="date"].rxModalCtxInput {
  cursor: text;
}

@media (max-width: 600px) {
  .rxModalContextEditable {
    flex-direction: column;
    gap: 10px;
  }
  .rxModalContextEditable .rxModalCtxItem {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ============================================================ */
/* IMAGE UPLOAD MODAL (Phase 2) — multi-file picker on Images tab */
/* ============================================================ */

.imgUploadBar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 0 12px 0;
}
/* Smart X-Ray / CT button — routes to RAYBridge (MK) or NNT helper (JD/Central). */
.xrayOpenBtn {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: #f8fafc;
  border: 1px solid #0f172a;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.xrayOpenBtn:hover:not(:disabled) {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}
.xrayOpenBtn:disabled {
  opacity: 0.65;
  cursor: wait;
}
/* Toast variants for the X-Ray flow — reuse the phToast base style. */
.phToast.phToastError {
  background: linear-gradient(180deg, #b91c1c 0%, #991b1b 100%);
  color: #fff;
}
.phToast.phToastSuccess {
  background: linear-gradient(180deg, #15803d 0%, #166534 100%);
  color: #fff;
}

.imgUploadModalBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.imgUploadModal {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
}
.imgUploadModalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e3e8ee;
}
.imgUploadModalTitle {
  font-size: 16px;
  font-weight: 700;
  color: #1f2d3d;
}
.imgUploadModalBody {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.imgUploadFileList {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.imgUploadFileRow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid #e3e8ee;
  border-radius: 6px;
  background: #fafbfc;
  font-size: 13px;
}
.imgUploadFileName {
  font-weight: 500;
  color: #1f2d3d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imgUploadFileMeta {
  font-size: 12px;
  color: #95a5a6;
  white-space: nowrap;
}
.imgUploadFileStatus {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.imgUploadFileStatus[data-status="pending"]   { background: #ecf0f1; color: #7f8c8d; }
.imgUploadFileStatus[data-status="uploading"] { background: #fff4d6; color: #b07b00; }
.imgUploadFileStatus[data-status="done"]      { background: #d4edda; color: #155724; }
.imgUploadFileStatus[data-status="warn"]      { background: #fce4b3; color: #8a5a00; }
.imgUploadFileStatus[data-status="error"]     { background: #f8d7da; color: #842029; }

@media (max-width: 600px) {
  .imgUploadModal { max-width: calc(100vw - 16px); }
  .imgUploadFileRow { grid-template-columns: 1fr auto; }
  .imgUploadFileMeta { display: none; }
}

/* Per-tile soft-delete button (Option C \u2014 hides from board, keeps in Cliniko) */
.imgTile { position: relative; }
.imgTileDeleteBtn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  z-index: 2;
  opacity: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: background 0.12s ease, transform 0.08s ease;
}
.imgTile:hover .imgTileDeleteBtn,
.imgTile:focus-within .imgTileDeleteBtn {
  transform: scale(1.06);
}
.imgTileDeleteBtn:hover {
  background: #c0392b;
}
.imgTileDeleteBtn:disabled {
  opacity: 0.5;
  cursor: progress;
}
@media (max-width: 600px) {
  /* On touch devices, always show the delete button (no hover). */
  .imgTileDeleteBtn { opacity: 1; }
}

/* =============================================================
   PHASE 3 — Errors page (owner only)
   ============================================================= */

/* Sidebar nav badge for active error count */
.navItem .navBadge {
  display: inline-block;
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: #e74c3c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff inset;
}
.navItem .navBadge[data-severity="high"] {
  animation: navBadgePulse 1.6s ease-in-out infinite;
}
/* Respect HTML `hidden` attribute even though .navItem .navBadge forces display:inline-block. */
.navItem .navBadge[hidden] {
  display: none;
}
@keyframes navBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); }
}

/* Filter chips in topbar */
.errFilters {
  display: flex;
  gap: 6px;
  align-items: center;
}
.errFilterBtn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s ease;
}
.errFilterBtn:hover { background: #e2e8f0; }
.errFilterBtn.active {
  background: #1e293b;
  border-color: #1e293b;
  color: #fff;
}
.errFilterCount {
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  min-width: 16px;
  text-align: center;
  font-weight: 700;
}
.errFilterBtn:not(.active) .errFilterCount {
  background: #e74c3c;
  color: #fff;
}
.errFilterBtn:not(.active) .errFilterCount:empty { display: none; }
/* Zero counts: muted neutral instead of red */
.errFilterBtn:not(.active) .errFilterCount[data-zero="1"] {
  background: #cbd5e1;
  color: #475569;
}

/* Body */
.errBody {
  padding: 16px 20px 40px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.errEmpty {
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
  padding: 60px 20px;
}

.errTable {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.errTableHead {
  display: grid;
  grid-template-columns: 140px 200px 220px 1fr 320px;
  gap: 12px;
  padding: 10px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.errRow {
  border-bottom: 1px solid #f1f5f9;
}
.errRow:last-child { border-bottom: none; }
.errRow.errSev-critical .errRowMain { background: #fff5f5; }
.errRow.errSev-warning  .errRowMain { background: #fffbeb; }
.errRow.errRowResolved  { opacity: 0.6; }

.errRowMain {
  display: grid;
  grid-template-columns: 140px 200px 220px 1fr 320px;
  gap: 12px;
  padding: 12px 16px;
  align-items: center;
  font-size: 13px;
  color: #1e293b;
}

.errCol { min-width: 0; word-break: break-word; }
.errColWhen { font-variant-numeric: tabular-nums; color: #64748b; font-size: 12px; }
.errColMsg  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #b91c1c; }
.errColPatient { font-weight: 500; }
.errPid {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.errSrcPill {
  display: inline-block;
  background: #e0e7ff;
  color: #3730a3;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.errSevTag {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: #64748b;
}
.errSev-critical .errSevTag { color: #b91c1c; font-weight: 600; }
.errSev-warning  .errSevTag { color: #b45309; }

.errColActions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.errBtn {
  display: inline-block;
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
}
.errBtn:hover { background: #f1f5f9; border-color: #94a3b8; }
.errBtn:disabled { opacity: 0.5; cursor: progress; }
.errBtnRetry { border-color: #2563eb; color: #2563eb; }
.errBtnRetry:hover { background: #dbeafe; }
.errBtnDismiss { border-color: #94a3b8; }
.errBtnOpen { border-color: #16a34a; color: #16a34a; }
.errBtnOpen:hover { background: #dcfce7; }
.errBtnExpand { color: #64748b; }
.errResolvedTag {
  display: inline-block;
  background: #dcfce7;
  color: #15803d;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.errPayload {
  background: #f8fafc;
  border-top: 1px dashed #e2e8f0;
  padding: 12px 16px;
}
.errPayloadMeta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;
}
.errPayloadMeta b { color: #1e293b; font-weight: 600; }
.errPayloadPre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 12px 14px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  max-height: 400px;
  margin: 0;
}

/* Mobile — collapse the grid into stacked rows */
@media (max-width: 900px) {
  .errTableHead { display: none; }
  .errRowMain {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .errCol { width: 100%; }
  .errColActions { justify-content: flex-start; }
}

/* ============================================================
   ERRORS — FORCE-TEST BUTTON (owner-only proof of pipeline)
   ============================================================ */
.errTestBtn {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  color: var(--ink-600);
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.errTestBtn:hover {
  background: #fff7ed; /* warm wash to signal "test action" */
  border-color: #fdba74;
  color: #9a3412;
}
.errTestBtn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* =============================================================
   Phase 4 Chunk 4 — Errors top banner (owner-only, threshold 5)
   ============================================================= */
.errorsTopBanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(180deg, #B91C1C 0%, #991B1B 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: background .15s;
}
.errorsTopBanner:hover {
  background: #7F1D1D;
  text-decoration: none;
}
.errorsTopBannerIcon {
  font-size: 16px;
  line-height: 1;
}
.errorsTopBannerText {
  flex: 1;
}
.errorsTopBannerText b {
  font-weight: 700;
}
.errorsTopBannerCta {
  font-weight: 600;
  font-size: 13px;
  opacity: 0.9;
  white-space: nowrap;
}
.errorsTopBanner[hidden] {
  display: none !important;
}
/* Push page content down when banner is visible */
body:has(#errorsTopBanner:not([hidden])) {
  padding-top: 38px;
}

/* ===== Sex chip (Chinese-first display: replaces Mr/Ms) ===== */
.sexChip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  margin-right: 6px;
  vertical-align: middle;
  letter-spacing: 0;
}
.sexChipF {
  background: #FCE4EC;
  color: #C2185B;
  border: 1px solid #F8BBD0;
}
.sexChipM {
  background: #E3F2FD;
  color: #1565C0;
  border: 1px solid #BBDEFB;
}
/* Search dropdown: secondary English label when Chinese is primary */
.searchHitEn,
.bookingPatientEn {
  color: #64748B;
  font-size: 13px;
  font-weight: 400;
}

/* Calendar — "Add practitioner" pill that lives at the end of the
   practitioner-columns row. Slim, dashed, low-emphasis until hover. */
.calAddPracPill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  width: 64px;
  min-width: 64px;
  align-self: stretch;
  border: 1.5px dashed var(--ink-200);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-500);
  cursor: pointer;
  font: inherit;
  padding: 12px 6px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.calAddPracPill:hover {
  background: var(--ink-50);
  color: var(--ink-800);
  border-color: var(--ink-400);
  border-style: solid;
}
.calAddPracIcon {
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
}
.calAddPracLabel {
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  letter-spacing: .2px;
}

/* Calendar day toolbar — sits between the day header and the time grid.
   Hosts the manual "Add appointment" button. */
.calDayToolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 6px 0 8px 0;
}
.calAddApptBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--ink-300, #cbd5e1);
  background: var(--ink-50, #f8fafc);
  color: var(--ink-800, #0f172a);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.calAddApptBtn:hover {
  background: var(--ink-100, #f1f5f9);
  border-color: var(--ink-400, #94a3b8);
}
.calAddApptIcon {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.calAddApptLabel { letter-spacing: .2px; }

/* Booking modal — Verified ✓ badge. Sits under the subhead. Compact and
   confidence-cueing in green; the failure variants stay neutral so reception
   knows there's something to investigate without alarming the patient if
   they happen to glance at the screen. */
.bookingVerifiedBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 24px 0 24px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.4;
  width: fit-content;
}
.bookingVerifiedOk {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
}
.bookingVerifiedTick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #047857;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.bookingVerifiedPending {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}
.bookingVerifiedFail {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}

/* Round 4 — vacant 15-min slots are visually invisible at rest so the
   day column reads as one clean empty area (matching the original
   single-block design). Each slot is still individually clickable; the
   blue dashed border + time label only appear on the slot under the
   cursor. No OS tooltip — hover reveals everything we need to show. */
.calVacantSlot {
  background: transparent;
  border: 1px dashed transparent;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.calVacantSlot:hover,
.calVacantSlot:focus-visible {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
}
.calVacantSlotLabel {
  display: block;
  font-size: 11px;
  color: var(--ink-500, #64748b);
  padding: 2px 6px;
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}
.calVacantSlot:hover .calVacantSlotLabel,
.calVacantSlot:focus-visible .calVacantSlotLabel {
  opacity: 1;
}

/* Floating fallback hover chip — mirrors .calVacantSlot:hover styling, but
   used for empty .calPracBody minutes that didn't render a vacant slot button
   (e.g. lane-aware emission gap). Created lazily and positioned absolutely
   via JS (setupCalSlotHoverChip). pointer-events:none so clicks pass through
   to the underlying .calPracBody fallback click handler. */
.calSlotHoverChip {
  position: fixed;
  z-index: 4;
  background: var(--brand-soft);
  border: 1px dashed var(--brand);
  border-radius: 4px;
  color: var(--brand-deep);
  font-size: 11px;
  padding: 2px 6px;
  pointer-events: none;
  box-sizing: border-box;
}

/* Round 3 — "Modify availability" button gets a ghost variant so it reads
   as secondary next to the primary "+ Add appointment" button. Same
   geometry, lighter fill and a dashed-feel border to suggest it's a
   utility action rather than the main create action. */
.calAddApptBtnGhost {
  background: transparent;
  color: var(--ink-700, #334155);
  border-color: var(--ink-200, #e2e8f0);
}
.calAddApptBtnGhost:hover {
  background: var(--ink-50, #f8fafc);
  border-color: var(--ink-300, #cbd5e1);
}

/* ============================================================ */
/* Patient Appointments Tab — upcoming + past list (Cliniko-style) */
/* ============================================================ */
.apptHist { display: flex; flex-direction: column; gap: 28px; }
.apptHistSection { display: flex; flex-direction: column; gap: 10px; }
.apptHistSectionHead {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ink-500);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink-200);
  display: flex;
  align-items: center;
  gap: 8px;
}
.apptHistCount {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-500);
  background: var(--ink-100, #f1f5f9);
  border-radius: 999px;
  padding: 1px 8px;
  letter-spacing: 0;
  text-transform: none;
}
.apptHistList { display: flex; flex-direction: column; gap: 6px; }
.apptHistEmpty {
  color: var(--ink-500);
  font-size: 13px;
  padding: 8px 4px;
  font-style: italic;
}
.apptHistRow {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--ink-200);
  background: #fff;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.apptHistRow:hover {
  background: var(--ink-50, #f8fafc);
  border-color: var(--ink-300, #cbd5e1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.apptHistRow:focus-visible {
  outline: 2px solid var(--accent-500, #2563eb);
  outline-offset: 1px;
}
.apptHistRow.isPast { opacity: .92; }
.apptHistRow.isDna { background: #fef2f2; border-color: #fecaca; }
.apptHistDate {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
  padding-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apptHistMain { min-width: 0; }
.apptHistTitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900, #0f172a);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.apptHistSub {
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 2px;
}
.apptHistMuted { color: var(--ink-400, #94a3b8); font-style: italic; font-weight: 500; }
.apptHistChip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 1px 6px;
  border-radius: 4px;
}
.apptHistChipDna { background: #fee2e2; color: #b91c1c; }
.apptHistChipArr { background: #dcfce7; color: #166534; }
/* Multi-service visit indicator in patient sidebar appointment rows. */
.apptHistChipMulti { background: #fff7ed; color: #c2410c; border-color: #fed7aa; font-weight: 700; }
.apptHistShowOlderRow { padding-top: 6px; }
.apptHistShowOlderBtn {
  background: transparent;
  border: 1px dashed var(--ink-300, #cbd5e1);
  color: var(--ink-700);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.apptHistShowOlderBtn:hover {
  background: var(--ink-50, #f8fafc);
  border-style: solid;
}
@media (max-width: 720px) {
  .apptHistRow { grid-template-columns: 100px 1fr; gap: 8px; padding: 8px 10px; }
  .apptHistDate { font-size: 11px; }
  .apptHistTitle { font-size: 13px; }
}

/* ============================================================ */
/* Appt-jump banner — shown on Clinical when we fell back to the */
/* closest treatment note instead of an exact-date match.        */
/* ============================================================ */
.apptJumpBanner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
  font-size: 13px;
  margin: 0 0 14px;
}
.apptJumpBanner-none {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}
.apptJumpIcon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c7d2fe;
  color: #3730a3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.apptJumpBanner-none .apptJumpIcon {
  background: #fde68a;
  color: #92400e;
}
.apptJumpText { flex: 1 1 auto; line-height: 1.45; }
.apptJumpText strong { font-weight: 700; }
.apptJumpDismiss {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: .65;
}
.apptJumpDismiss:hover { opacity: 1; background: rgba(0,0,0,.05); }


/* ============================================================
 * Phase 4 RBAC — body-class-based gating
 * ============================================================ */

/* Nurse: hide all vacant booking slots and off-hours slot buttons */
body.rbac-no-booking .calVacant,
body.rbac-no-booking .calOffHoursBtn,
body.rbac-no-booking [data-action="book"],
body.rbac-no-booking [data-action="add-appointment"] {
  display: none !important;
  pointer-events: none;
}

/* Nurse: hide the "Add remark" button (receptionist-level action) */
body.rbac-is-nurse [data-action="add"] .remarkAddBtn,
body.rbac-is-nurse .remarkAddBtn {
  display: none !important;
}

/* Receptionist + Nurse: hide note-write controls */
body.rbac-no-notes-write .editorBtnSave,
body.rbac-no-notes-write .editorBtnRetry,
body.rbac-no-notes-write [data-action="save"],
body.rbac-no-notes-write [data-action="retry"] {
  display: none !important;
}
body.rbac-no-notes-write .editorTextarea {
  pointer-events: none;
  opacity: 0.7;
}

/* Dentist: hide the clinic branch picker on calendar (they only see own column) */
body.rbac-is-dentist #calClinicTabs {
  display: none !important;
}

/* Phase 4 RBAC fix #3 — Dentist + week view: 7 days side-by-side
   (sizing now handled by the round-2 rule further down with horizontal
   scroll + proper minimum widths). */
.calDentistDayCol .calClinicHeader.calDentistDayHeader {
  font-size: 13px;
  color: var(--brand-deep);
}
.calDentistDayCol .calClinicSubtitle {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-600);
  margin-top: -4px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.calDentistDayCol .calClinicSubtitle.calClinicSubtitleEmpty {
  color: var(--ink-400);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

/* Phase 4 RBAC fix #4: dentist's Today's Schedule has no branch picker */
body.rbac-is-dentist #schedTabs {
  display: none !important;
}
/* Clinic chip on schedule rows when aggregated across all clinics */
.schedClinicChip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--ink-100);
  color: var(--ink-700);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Phase 4 RBAC fix #1 (round 2) — Defensive CSS: ownerOnly elements are
   hidden by default and only revealed when body has rbac-is-owner. This
   beats any errant code that might clear the `hidden` attribute. */
.ownerOnly {
  display: none !important;
}
body.rbac-is-owner .ownerOnly {
  display: revert !important;
}

/* Phase 4 RBAC fix #3 (round 7) — Today's Schedule single-column width.
   Goal: when only one clinic is shown (e.g. dentist view aggregated to a
   single practitioner), the column should occupy ~50% of the available
   horizontal space inside the schedBody. Previous attempt put max-width on
   the schedBody itself, which didn't visibly stretch the column.
   New approach: keep schedBody full-width, override the grid track to a
   single 50% column, and let the rest stay empty (justify-content:start). */
/* 2026-06-01 sched-redesign v2 — single-dentist view: stretch the column to
   fill the available width (cap at 1100px so very wide monitors stay
   readable). Uses data-col-count="1" set by the JS render because .schedBody
   also contains the remarks block, so :has(.schedColumn:only-child) never
   matches in practice. */
.schedBody[data-col-count="1"] {
  grid-template-columns: minmax(560px, min(1100px, 100%)) !important;
  justify-content: start;
}
.schedBody[data-col-count="1"] .schedColumn {
  width: 100%;
  min-width: 0;
  max-width: none;
}

/* 2026-06-23 sched-hscroll v2 — multi-dentist views: each dentist column must
   be wide enough for the inner schedRow's 5 tracks to all render at their
   minimum width:
     time 100 + patient 200 + planned 160 + pill 120 + duration 50
     + 4×12 column-gaps + 2×10 row-padding = 698px → round to 700px.
   When N × 700px exceeds the viewport, .schedBody scrolls horizontally
   (overflow-x:auto above). On wide screens, columns still grow via 1fr to
   fill remaining space.

   v1 (460px) was a half-fix: body scrolled but the inner planned-treatment
   track — declared as minmax(0,1fr) — still collapsed to zero, so long
   Chinese/English strings wrapped one character per line inside the row.
   v2 raises the column floor to 700px AND adds a 160px floor to the inner
   planned track (see .schedBody:not([data-col-count="1"]) .schedRow below). */
.schedBody[data-col-count="2"] { grid-template-columns: repeat(2, minmax(700px, 1fr)); }
.schedBody[data-col-count="3"] { grid-template-columns: repeat(3, minmax(700px, 1fr)); }
.schedBody[data-col-count="4"] { grid-template-columns: repeat(4, minmax(700px, 1fr)); }
.schedBody[data-col-count="5"] { grid-template-columns: repeat(5, minmax(700px, 1fr)); }
.schedBody[data-col-count="6"] { grid-template-columns: repeat(6, minmax(700px, 1fr)); }
.schedBody[data-col-count="7"],
.schedBody[data-col-count="8"],
.schedBody[data-col-count="9"] {
  grid-template-columns: repeat(auto-fit, minmax(700px, 1fr));
}

/* 2026-06-01 sched-redesign v3 — alignment fix. Each .schedRow has its own
   grid, so columns reflow per row by default. Lock col 2 (patient) and col 4
   (appt-type pill) to fixed widths so every row's planned-treatment column
   starts and ends at the same x-position, giving a clean vertical line of
   plans down the column.
   The 240/180px patient column truncates very long names with ellipsis.
   This rule applies only in the wide single-column view; multi-col view
   keeps its existing flexible tracks to fit in 543px wide columns. */
.schedBody[data-col-count="1"] .schedRow {
  /* v34 — mockup 4-col layout (single-col dentist view). */
  grid-template-columns: 64px 1fr 130px 42px;
}
/* 2026-06-11 sched-redesign v4 — multi-col tight grid. When the Daily
   Schedule shows 2+ practitioner columns, each .schedColumn is ~440-480px
   wide, far less than the 586px the original 5-track grid needs. The grid
   would overflow / overlap (time and duration cells visually colliding
   with patient and treatment cells). Use a tighter track set for multi-col
   so all 5 cells fit cleanly inside a 440px column. */
.schedBody:not([data-col-count="1"]) .schedRow {
  /* 2026-06-22 sched-consistent — every track is a FIXED width (except the
     flexible name/remark track) so columns form vertical guidelines and rows
     stop jittering row-to-row:
       col 1  time + ✅ badge        100px  (full "✅ 12:55" fits)
       col 2  patient (ref + name)   200px  (ref pinned left, name wraps below)
       col 3  planned-treatment      1fr    (all remaining width; wraps fully)
       col 4  appt-type pill         120px  (wraps inside its fixed box)
       col 5  duration               50px   (right-aligned guideline)
     Rows center-align vertically so the time/badge cluster sits centred next
     to multi-line content instead of floating at the top. */
  /* 2026-06-23 sched-hscroll v2 — planned-treatment column now has a 160px
     floor (was minmax(0,1fr) = collapse to zero, which let long Chinese
     strings wrap one character per line). Pairs with the 700px column floor
     on .schedBody[data-col-count] above so each .schedRow always has room. */
  /* v34 — mockup 4-col layout (multi-practitioner view). */
  grid-template-columns: 64px 1fr 130px 42px;
  column-gap: 12px;
  padding: 11px 12px;
  align-items: start;
}
.schedBody:not([data-col-count="1"]) .schedTime {
  font-size: 18px;
}
.schedBody:not([data-col-count="1"]) .schedDur {
  font-size: 13px;
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}
.schedBody:not([data-col-count="1"]) .schedTreat {
  font-size: 12px;
  min-width: 0;
  justify-self: start;
}
.schedBody:not([data-col-count="1"]) .schedPlanned {
  font-size: 14px;
  min-width: 0;
  /* 2026-06-22 sched-fullwidth — glance-first page: wrap the remark/planned
     text fully instead of clamping to 2 lines + ellipsis. Row grows taller. */
  display: block;
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.schedBody:not([data-col-count="1"]) .schedPatient {
  min-width: 0;
}
.schedBody:not([data-col-count="1"]) .schedName {
  font-size: 15px;
  white-space: normal;
  overflow-wrap: anywhere;
  flex: 1 1 auto;
  min-width: 0;
}
/* 2026-06-22 sched-consistent — keep the ref chip on a fixed left guideline so
   ref nos (J08313 / M55077 / J08282) all start at the same X regardless of
   whether the optional sex chip is present. The sex chip gets a fixed-width
   slot here (schedule-scoped only — the shared .sexChip base is untouched), and
   the ref chip a consistent min-width so short and long refs align. */
.schedBody:not([data-col-count="1"]) .schedNameLine {
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: 2px;
}
.schedBody:not([data-col-count="1"]) .schedNameLine .sexChip {
  flex-shrink: 0;
  width: 22px;
  margin-right: 4px;
  text-align: center;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}
.schedBody:not([data-col-count="1"]) .schedPatientRef {
  flex-shrink: 0;
  min-width: 56px;
  text-align: center;
  box-sizing: border-box;
}
.schedBody[data-col-count="1"] .schedTreat {
  justify-self: start;
}
/* Allow Chinese names to wrap properly without breaking each character
   onto its own line.
   2026-06-01 — overflow-wrap: anywhere was breaking patient names char-by-char
   when the patient column was squeezed in multi-practitioner views. Switch to
   normal/break-word so wraps happen at sensible boundaries (between the chip,
   ref, and name spans) and the column has a guaranteed min-width via the grid. */
.schedBody[data-col-count="1"] .schedColumn .schedName {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.3;
}
/* Single-column schedule (sched-redesign 2026-06-01) — keep the SAME 5-col
   row grid as multi-column views; the column itself stretches to 100% of its
   ~50%-width parent, which gives planned-treatment plenty of room. */

/* Phase 4 RBAC fix #5 (round 2) — Dentist version of calendar:
   - No "Add appointment" / "Modify availability" buttons in any day
   - Week view: horizontal scroll with proper-size day columns */
body.rbac-is-dentist .calDayToolbar {
  display: none !important;
}
/* Week view: 7 day columns side-by-side. Each at least 440px wide (2x the
   previous size) so appointments breathe. Horizontal scroll kicks in when
   total exceeds the viewport — expected on most screens since 7 × 440 = 3080px. */
body.rbac-is-dentist .calBody:has(.calDentistDayCol) {
  display: grid;
  grid-template-columns: repeat(7, minmax(440px, 1fr));
  gap: 12px;
  overflow-x: auto;
  /* Keep remarks block full-width above the day grid */
}
body.rbac-is-dentist .calBody:has(.calDentistDayCol) > .remarksHost,
body.rbac-is-dentist .calBody:has(.calDentistDayCol) > #calRemarksHost {
  grid-column: 1 / -1;
}
.calDentistDayCol {
  min-width: 440px;
  /* Cap day-column padding so each chip has room. */
}
.calDentistDayCol .calDayGrid {
  grid-template-columns: 36px 1fr;     /* slimmer time axis in week view */
}
.calDentistDayCol .calTimeAxis {
  font-size: 10px;
}
.calDentistDayCol .calAxisRow {
  font-size: 10px;
}

/* Phase 4 RBAC — dentist must not see inline Pay/charge buttons in the
   unified financial ledger. Server still renders them (shared markup),
   so hide on the client when role is dentist. */
body.rbac-is-dentist .finVisitPay,
body.rbac-is-dentist .finPayBtn,
body.rbac-is-dentist .finChargeBtn,
body.rbac-is-dentist button.finVisitPay,
body.rbac-is-dentist .fin-row-pay,
body.rbac-is-dentist .finRowActions .payBtn {
  display: none !important;
}

/* =========================================================================
 * PATIENT EDIT MODAL (rxModal-flavoured)
 * Pencil button next to #patientName, plus the modal form.
 * ======================================================================= */

.patientEditBtn {
  margin-left: 12px;
  padding: 3px 10px;
  font-size: 0.82em;
  line-height: 1.2;
  font-weight: 500;
  background: transparent;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  cursor: pointer;
  color: #57606a;
  vertical-align: middle;
  transition: background-color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.patientEditBtn:hover {
  background: #f6f8fa;
  border-color: #b1bac4;
  color: #24292f;
}
.patientEditBtn.hidden { display: none; }

/* Read-only field (e.g. Patient number — system-generated) */
.peInput.peReadonly {
  background: #f6f8fa;
  color: #57606a;
  cursor: not-allowed;
  border-color: #d0d7de;
}
.peInput.peReadonly:focus {
  outline: none;
  box-shadow: none;
}

/* Modal layout — wider than rxModal because there are more fields */
.patientEditModal {
  width: min(880px, 92vw);
  max-height: 88vh;
}
.patientEditModal .rxModalBody {
  max-height: calc(88vh - 130px);
  overflow-y: auto;
  padding: 18px 22px;
}

.peSection {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef0f2;
}
.peSection:last-of-type { border-bottom: none; }

.peSectionTitle {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #6a737d;
  margin-bottom: 10px;
}

.peGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
@media (max-width: 600px) {
  .peGrid { grid-template-columns: 1fr; }
}

.peField {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.peFieldFull { grid-column: 1 / -1; }

.peLabel {
  font-size: 0.78em;
  font-weight: 600;
  color: #57606a;
}

.peSubLabel {
  font-size: 0.78em;
  font-weight: 600;
  color: #57606a;
  margin: 12px 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.peLinkBtn {
  background: transparent;
  border: none;
  color: #0969da;
  font-size: 0.85em;
  cursor: pointer;
  padding: 0;
}
.peLinkBtn:hover { text-decoration: underline; }

/* Allergies block inside Edit Patient modal */
.peLabelHint {
  font-weight: 400;
  color: #6e7781;
  font-size: 0.85em;
}
.peAllergies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 28px;
  padding: 6px 0 4px 0;
}
.peAllergyChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #d63838;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 3px 4px 3px 10px;
  border-radius: 12px;
  line-height: 1.4;
  border: 1px solid #b81f1f;
}
.peAllergyChip--new {
  background: #fff;
  color: #1f2328;
  border: 1px dashed #b81f1f;
  padding: 0;
}
.peAllergyChip--new .peAllergyInput {
  border: none;
  background: transparent;
  font-size: 13px;
  padding: 4px 10px;
  width: 220px;
  outline: none;
  font-family: inherit;
  color: #1f2328;
}
.peAllergyName { padding-right: 2px; }
.peAllergyRemove {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.peAllergyRemove:hover { background: rgba(255,255,255,0.32); }

/* ============================================================
 * Phase 1E (2026-06-06) — card-style history / allergy entries
 * ============================================================ */
.peHxField { margin-bottom: 4px; }
.peHxList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.peHxCard {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 3px solid #f97316;
  border-radius: 8px;
  padding: 10px 12px;
}
.peHxCard .peHxBody { flex: 1; min-width: 0; }
.peHxCard .peHxText {
  font-size: 13.5px;
  line-height: 1.45;
  color: #111827;
  white-space: pre-wrap;
  word-break: break-word;
}
.peHxCard .peHxMeta { font-size: 11px; color: #9a6b3f; margin-top: 4px; }
.peHxCard .peHxDel {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #9a6b3f;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.peHxCard .peHxDel:hover { background: #fed7aa; color: #7c2d12; }
/* Pending soft-delete: greyed + struck through, × becomes a restore toggle. */
.peHxCard.peHxCard--pendingDelete { background: #f3f4f6; border-color: #d1d5db; border-left-color: #9ca3af; }
.peHxCard.peHxCard--pendingDelete .peHxText { color: #9ca3af; text-decoration: line-through; }
.peHxCard.peHxCard--pendingDelete .peHxMeta { color: #b0b0b0; }
/* Pending add: same orange tint, "Pending add" pill in the meta line. */
.peHxPill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c2410c;
  background: #ffedd5;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
}
.peHxEmpty { font-size: 13px; color: #9ca3af; font-style: italic; padding: 6px 0; }
.peHxAddRow { margin-top: 2px; }
.peHxAddLink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0969da;
  font-size: 13px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.peHxAddLink:hover { text-decoration: underline; }
.peHxAddForm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px dashed #93c5fd;
  background: #eff6ff;
  border-radius: 8px;
  padding: 10px;
  margin-top: 6px;
}
.peHxAddForm textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 60px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px;
  font-family: inherit;
  font-size: 13.5px;
  resize: vertical;
}
.peHxAddForm .peHxAddActions { display: flex; gap: 8px; justify-content: flex-end; }
.peHxBtn {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
.peHxBtn--primary { background: #f97316; color: #fff; border-color: #f97316; }
.peHxBtn--primary:hover { background: #ea6a0c; }
.peHxBtn--ghost { background: #fff; color: #374151; border-color: #d1d5db; }
.peHxBtn--ghost:hover { background: #f9fafb; }

.peInput {
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.95em;
  font-family: inherit;
  background: #fff;
  color: #1f2328;
  min-width: 0;
}
.peInput:focus {
  outline: none;
  border-color: #0969da;
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
}
.peTextarea {
  resize: vertical;
  min-height: 56px;
}

.pePhones {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pePhoneRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  background: #fbfcfe;
}
.pePhoneMain {
  display: grid;
  grid-template-columns: 96px 88px 1fr 30px;
  gap: 8px;
  align-items: center;
}
.pePhoneLabels {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr auto auto;
  gap: 8px;
  align-items: center;
}
.pePhoneLabels .peInput { height: 32px; font-size: 12.5px; }
.pePhoneRel { min-width: 140px; }
/* Inline WhatsApp glyph shown right after a WhatsApp-enabled number in the
   patient CONTACT panel (replaces the old green "WhatsApp" text tag). */
.psPhoneWaIcon {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 5px;
}
.pePhoneFlag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-700);
  white-space: nowrap;
}
.pePhoneFlag input { margin: 0; }
.pePhoneWa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-700);
  white-space: nowrap;
}
.pePhoneWaOpt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.pePhoneWaOpt input { margin: 0; }
@media (max-width: 520px) {
  .pePhoneLabels { grid-template-columns: 1fr 1fr; }
}
.pePhoneRow .pePhoneError {
  /* Error spans the full width of the main grid, sits below the row inputs */
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--bad, #DC2626);
  background: var(--bad-soft, #FEE2E2);
  border-radius: 6px;
  padding: 4px 8px;
  margin-top: 2px;
}
.pePhoneRemove {
  background: transparent;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: #6a737d;
  font-size: 1.1em;
  line-height: 1;
}
.pePhoneRemove:hover {
  background: #ffebe9;
  border-color: #cf222e;
  color: #cf222e;
}

.patientEditLoading {
  padding: 32px;
  text-align: center;
  color: #57606a;
}

/* =============================================================================
 * PATIENT REGISTRATION FORM STATUS (topbar pill + buttons)
 * Mirrors patientEditBtn aesthetic — neutral, compact, mobile-tolerant.
 * ============================================================================= */
/* =========================================================================
   2026-06-27 — Form toolbar redesign ("single status hub").
   The patient topbar now rests as just TWO pills: a clickable status chip
   (.formPill) that opens a dropdown (.formMenu) of contextual actions, plus a
   cohesive soft-orange "Make appointment" pill (.formBtn-primary). The old
   standalone Copy / QR / Send / Fill buttons were folded into the dropdown.
   ========================================================================= */
.formStatusBox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: 6px;
  position: relative;
}
.formPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  font-size: 0.80em;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  font-family: inherit;
  transition: filter 120ms ease;
}
.formPill:hover { filter: brightness(0.97); }
.formPill:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.formPill .formPillDot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: currentColor; opacity: 0.85;
}
.formPill .formPillChev {
  font-size: 0.72em; opacity: 0.55; margin-left: 1px;
  transition: transform 180ms ease;
}
.formPill.is-open .formPillChev { transform: rotate(180deg); }
.formPill-loading  { background: #f1f3f5; color: #57606a; border-color: #e4e7eb; cursor: default; }
.formPill-notsent  { background: #f1f3f5; color: #57606a; border-color: #e2e6ea; } /* grey */
.formPill-sent     { background: #fff4e5; color: #8a4b00; border-color: #ffd9a8; } /* amber */
.formPill-viewed   { background: #fff4e5; color: #8a4b00; border-color: #ffd9a8; } /* amber */
.formPill-done     { background: #e6f4ea; color: #1e6f3a; border-color: #b6dfc2; } /* green */
.formPill-err      { background: #fdecea; color: #8a1a13; border-color: #f5c2c0; cursor: default; }

/* ---- dropdown menu ---- */
.formMenu {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 60;
  display: none; min-width: 272px; padding: 7px;
  background: #fff; border: 1px solid #e3e8e6; border-radius: 15px;
  box-shadow: 0 12px 34px rgba(16,40,34,.16); transform-origin: top left;
}
.formMenu.is-open { display: block; animation: formMenuPop 150ms cubic-bezier(.2,.7,.3,1); }
@keyframes formMenuPop { from { opacity: 0; transform: scale(.97) translateY(-6px); } to { opacity: 1; transform: none; } }
.formMenuHead { padding: 10px 12px 9px; border-bottom: 1px solid #eef1f0; margin-bottom: 6px; }
.formMenuHead .fmh-state { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.86em; color: #1f2a28; }
.formMenuHead .fmh-state .fmh-dot { width: 8px; height: 8px; border-radius: 50%; }
.formMenuHead .fmh-sub { font-size: 0.76em; color: #6b7a76; margin-top: 3px; }
.formMenuItem {
  display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent;
  padding: 10px 12px; border-radius: 10px; font-size: 0.86em; font-weight: 550; color: #1f2a28;
  cursor: pointer; text-align: left; font-family: inherit; transition: background 120ms ease;
}
.formMenuItem:hover { background: #eef1f0; }
.formMenuItem:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.formMenuItem.is-disabled { opacity: 0.42; pointer-events: none; }
.formMenuItem .fmi-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 1.0em; }
.formMenuItem .fmi-ic.ic-qr   { background: #dbeafe; color: #1d4ed8; }
.formMenuItem .fmi-ic.ic-fill { background: #ede9fe; color: #6d28d9; }
.formMenuItem .fmi-ic.ic-pdf  { background: #e6f4ea; color: #15803d; }
.formMenuItem .fmi-txt { display: flex; flex-direction: column; line-height: 1.3; }
.formMenuItem .fmi-sub { font-size: 0.82em; color: #6b7a76; font-weight: 450; }

/* ---- cohesive soft-orange "Make appointment" pill ---- */
.formBtn {
  padding: 7px 15px;
  font-size: 0.80em;
  line-height: 1.2;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
  font-family: inherit;
  border: 1px solid transparent;
  transition: background-color 120ms ease, transform 120ms ease;
}
.formBtn:disabled { opacity: 0.6; cursor: not-allowed; }
.formBtn.formBtn-ghost {
  background: transparent;
  color: #57606a;
  border-color: #d0d7de;
}
.formBtn.formBtn-ghost:hover {
  background: #f6f8fa;
  border-color: #b1bac4;
  color: #24292f;
}
.formBtn.formBtn-primary {
  background: #fde9dd;
  border-color: transparent;
  color: #c2410c;
}
.formBtn.formBtn-primary:hover {
  background: #fbdcc9;
  transform: translateY(-1px);
}
.formBtn.formBtn-primary:active { transform: translateY(0); }
/* v64 (2026-07-02) — "Lock patient" pill, sits beside Make appointment.
   Shares the pill geometry with .formBtn-primary but uses the warm amber
   palette so its role (lock/pin, not book) is visually distinct at a glance.
   Matches .patientDetailLockBtn.locked so the two lock affordances feel
   like the same family. */
.formBtn.formBtn-lock {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #78350f;
  margin-left: 6px;
}
.formBtn.formBtn-lock:hover {
  background: #fde68a;
  border-color: #d97706;
  color: #78350f;
  transform: translateY(-1px);
}
.formBtn.formBtn-lock:active { transform: translateY(0); }

@media (max-width: 600px) {
  .formStatusBox { width: 100%; margin-top: 6px; }
  .formPill, .formBtn { font-size: 0.74em; padding: 6px 11px; }
  .formMenu { min-width: 240px; }
}

/* =========================================================================
   SMALL TALK TAB — D1-only DOCTOR_NOTES imported from ClinicSolution.
   Read-only narrative blob; one card per patient. Uses pre-wrap to honour
   the original bullets and paragraph breaks the dentists typed.
   ========================================================================= */
.smallTalkCard {
  background: var(--surface, #ffffff);
  border: 1px solid var(--ink-200, #e5e7eb);
  border-radius: 12px;
  padding: 18px 22px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.smallTalkHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-100, #f1f5f9);
}
.smallTalkBadge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #e0f2f1;
  color: #00696f;
}
.smallTalkTitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700, #334155);
}
.smallTalkBody {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-900, #0f172a);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.smallTalkMeta {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--ink-100, #f1f5f9);
  font-size: 12px;
  color: var(--ink-500, #64748b);
  display: flex;
  align-items: center;
  gap: 8px;
}
.smallTalkRef {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--ink-50, #f8fafc);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--ink-700, #334155);
}
@media (max-width: 600px) {
  .smallTalkCard { padding: 14px 16px; border-radius: 10px; }
  .smallTalkBody { font-size: 14px; }
}

/* =========================================================================
   SMALL TALK — Composer + Staff Entries (D1-attributed, multi-author).
   Composer sits at top of the tab; staff entries stack below newest-first;
   the legacy imported blob (if any) renders last with the existing
   .smallTalkCardLegacy + .smallTalkBadge styles.
   ========================================================================= */
.smallTalkComposer {
  background: var(--surface, #ffffff);
  border: 1px solid var(--ink-200, #e5e7eb);
  border-radius: 12px;
  padding: 14px 16px 12px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.smallTalkComposerInput {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ink-200, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-900, #0f172a);
  background: var(--ink-50, #f8fafc);
  resize: vertical;
  min-height: 64px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.smallTalkComposerInput:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.smallTalkComposerInput::placeholder { color: var(--ink-400, #94a3b8); }
.smallTalkComposerRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.smallTalkComposerHint {
  font-size: 12px;
  color: var(--ink-500, #64748b);
}
.smallTalkAddBtn {
  appearance: none;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s, transform .05s;
}
.smallTalkAddBtn:hover:not(:disabled) {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}
.smallTalkAddBtn:active:not(:disabled) { transform: translateY(1px); }
.smallTalkAddBtn:disabled {
  background: var(--ink-200, #e5e7eb);
  border-color: var(--ink-200, #e5e7eb);
  color: var(--ink-500, #64748b);
  cursor: not-allowed;
}

/* Staff entry card — same base as legacy but with attribution header. */
.smallTalkEntry { margin-bottom: 12px; }
.smallTalkEntry:last-of-type { margin-bottom: 0; }
.smallTalkEntryHeader {
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
}
.smallTalkAttribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.smallTalkAuthor {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900, #0f172a);
}
.smallTalkWhen {
  font-size: 12px;
  color: var(--ink-500, #64748b);
  font-variant-numeric: tabular-nums;
}
.smallTalkEdited {
  margin-left: 4px;
  font-style: italic;
  color: var(--ink-400, #94a3b8);
}
.smallTalkEntryActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.smallTalkLinkBtn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--brand-deep);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.smallTalkLinkBtn:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft);
}
.smallTalkLinkBtnDanger { color: var(--bad, #dc2626); }
.smallTalkLinkBtnDanger:hover {
  background: var(--bad-soft, #fee2e2);
  border-color: var(--bad-soft, #fee2e2);
  color: var(--bad, #dc2626);
}

/* Inline editor (replaces .smallTalkBody on Edit). */
.smallTalkInlineEditor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Empty state. */
.smallTalkEmpty {
  text-align: center;
  padding: 22px 16px;
  color: var(--ink-500, #64748b);
  font-size: 13.5px;
  background: var(--ink-50, #f8fafc);
  border: 1px dashed var(--ink-200, #e5e7eb);
  border-radius: 10px;
  margin-top: 4px;
}

/* Legacy imported card — slightly distinct from staff entries via a subtle
   warm tint, so users can tell at a glance it's archival, not active. */
.smallTalkCardLegacy {
  background: var(--brand-tint, #F3F8FC);
  margin-top: 14px;
}

@media (max-width: 600px) {
  .smallTalkComposer { padding: 12px 14px 10px; }
  .smallTalkEntryHeader { flex-wrap: wrap; }
  .smallTalkEntryActions { width: 100%; justify-content: flex-end; }
}

/* =====================================================================
   FINANCIAL VIEW — modern, restrained, money-feels
   ===================================================================== */

.finBody {
  padding: 24px 28px 48px;
  overflow-y: auto;
  height: calc(100vh - 64px);
  background: var(--bg);
}

.finEmpty {
  padding: 40px 20px;
  color: var(--ink-500);
  text-align: center;
  font-size: 14px;
}
.finEmpty.error { color: var(--bad); }

/* ---- Top KPI cards (Today / This Month) ---- */
.finKpiRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 8px;
}

.finCard {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease;
}
.finCard:hover { box-shadow: var(--shadow-md); }

.finCardBig {
  position: relative;
}

.finCardLabel {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 6px;
}

.finCardValue {
  font-size: 38px;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.finCardSub {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-500);
}

.finRefund { color: var(--bad); font-weight: 500; }

.finScopeNote {
  margin: 12px 2px 22px;
  font-size: 12px;
  color: var(--ink-500);
  font-style: italic;
}

/* ---- Section wrapper ---- */
.finSection {
  margin-top: 28px;
}

.finSectionTitle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: 12px;
  padding-left: 2px;
}

/* ---- By-clinic mini cards ---- */
.finClinicGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.finClinicCard {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.finClinicName {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 12px;
}

.finClinicTotals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.finClinicCell {}

.finClinicCellLabel {
  font-size: 11px;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.finClinicCellValue {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.01em;
}

/* ---- By-dentist table ---- */
.finTableWrap {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* Always allow horizontal scroll so wide method matrices (cash, FPS, Visa,
     Master, Amex, Alipay, UnionPay, JFA, voucher, DISCOUNT, …) don't get
     clipped on the right. The wrapper still clips vertically for rounded
     corners. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Keep the matrix table from squishing columns when there are many
   payment methods. 90px per method column is enough for $99,999.00. */
.finMatrixTable { min-width: 100%; width: max-content; }
.finMatrixTable .finTd,
.finMatrixTable .finTh { white-space: nowrap; }
.finMatrixTable .finMatrixMethod { min-width: 90px; }
.finMatrixTable .finMatrixDate { min-width: 110px; }
.finMatrixTable .finMatrixCount { min-width: 80px; }
.finMatrixTable .finMatrixTotal { min-width: 110px; }

.finTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.finTh {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-500);
  padding: 12px 18px;
  border-bottom: 1px solid var(--ink-200);
  background: var(--ink-50);
}

.finThNum { text-align: right; }

.finTd {
  padding: 12px 18px;
  border-bottom: 1px solid var(--ink-100);
  color: var(--ink-900);
}

.finTable tbody tr:last-child .finTd { border-bottom: 0; }

.finTable tbody tr:hover { background: var(--ink-50); }

.finTdName { font-weight: 500; }

.finTdNum {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
}

.finPos { color: var(--ink-900); }
.finNeg { color: var(--bad); }
.finZero { color: var(--ink-400); }

.finTotalRow .finTd {
  background: var(--ink-50);
  font-weight: 700;
  color: var(--ink-900);
  border-top: 2px solid var(--ink-200);
  border-bottom: 0;
}

/* ---- Mobile ---- */
@media (max-width: 700px) {
  .finBody { padding: 16px 12px 80px; }
  .finKpiRow { grid-template-columns: 1fr; gap: 12px; }
  .finCard { padding: 16px; }
  .finCardValue { font-size: 30px; }
  .finClinicGrid { grid-template-columns: 1fr; }
  .finTh, .finTd { padding: 10px 12px; font-size: 13px; }
}

/* ---- Rostered-only row + clinic badges (Today table) ---- */
.finTdClinics {
  white-space: nowrap;
}

.finClinicBadge {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--brand-deep);
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 999px;
  line-height: 1.4;
}

/* Rostered-but-no-payment-yet row: subtly dimmed so reception's eye is drawn
   to the dentists who HAVE received money. */
.finRowRostered .finTd { color: var(--ink-500); }
.finRowRostered .finTdName { font-weight: 400; color: var(--ink-700); }
.finRowRostered .finTdNum.finZero { color: var(--ink-400); }

/* Compact count column (number of payments) */
.finCount { color: var(--ink-500); font-weight: 500; }

/* ============================================================
   Financial · Day View detail section
   Date picker + dentist dropdown + per-payment table
   ============================================================ */

.finDaySection .finSectionTitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.finDayLabel {
  color: var(--ink-700);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.finDayControls {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 10px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-xs);
}

.finDayControls .finDayDate {
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 6px 10px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-900);
  min-width: 140px;
}

.finDayControls .finDayDate:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
}

.finDayControls .finDayDentistSel {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-900);
  min-width: 160px;
  cursor: pointer;
}

.finDayControls .btn {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-900);
  cursor: pointer;
  line-height: 1;
}

.finDayControls .btn:hover:not(:disabled) {
  background: var(--ink-50);
  border-color: var(--ink-300);
}

.finDayControls .btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.finDayControls .finDayStep {
  font-size: 12px;
  padding: 6px 10px;
  min-width: 32px;
}

.finDayControls .finDayToday {
  font-weight: 500;
}

.finDaySummary {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

.finDayCount {
  color: var(--ink-500);
  font-size: 13px;
}

.finDayTotal {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
}

/* ---- Day-view payments table ---- */
.finDayTable .finDayTime {
  font-variant-numeric: tabular-nums;
  color: var(--ink-700);
  white-space: nowrap;
  width: 80px;
}

.finDayTable .finDayPatient { min-width: 200px; }
.finDayTable .finPtMain { font-weight: 500; color: var(--ink-900); }
.finDayTable .finPtZh {
  color: var(--ink-600);
  font-weight: 400;
  margin-left: 4px;
}
.finDayTable .finPtRef {
  color: var(--ink-500);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.finDayTable .finPtLink {
  color: inherit;
  text-decoration: none;
}
.finDayTable .finPtLink:hover {
  color: var(--brand-deep);
  text-decoration: underline;
}

.finDayTable .finDayItems {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.finItemChip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  color: var(--ink-800);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: nowrap;
  max-width: 100%;
}

.finItemQty {
  color: var(--ink-500);
  font-weight: 500;
  font-size: 11.5px;
}

.finItemTooth {
  font-weight: 600;
  color: var(--brand-deep);
  background: var(--brand-soft);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.finItemAmt {
  color: var(--ink-500);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

.finDayTable .finDayDentist {
  white-space: nowrap;
  color: var(--ink-800);
}

.finDayTable .finDayMethod {
  white-space: nowrap;
  color: var(--ink-800);
}

.finDayTable .finDayAmt {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.finDayTable .finDayEmpty {
  text-align: center;
  color: var(--ink-500);
  padding: 32px 12px;
  font-style: italic;
}

.finMuted { color: var(--ink-400); }

/* Refund rows */
.finRefundRow {
  background: color-mix(in srgb, var(--danger, #c92a2a) 4%, transparent);
}
.finRefundRow .finItemChip {
  background: color-mix(in srgb, var(--danger, #c92a2a) 8%, transparent);
  border-color: color-mix(in srgb, var(--danger, #c92a2a) 18%, transparent);
  color: var(--ink-800);
}

/* Responsive tweaks: stack controls under header on narrow screens. */
@media (max-width: 720px) {
  .finDayControls { padding: 8px; gap: 6px; }
  .finDayControls .finDayDate,
  .finDayControls .finDayDentistSel { flex: 1 1 140px; min-width: 0; }
  .finDaySummary { margin-left: 0; flex-basis: 100%; justify-content: flex-end; }
  .finDayTable .finDayItems { padding-top: 8px; padding-bottom: 8px; }
  .finItemChip { font-size: 12px; padding: 2px 8px; }
}

/* ============================================================
 * FINANCIAL v4 — view toggle, layered controls, matrix tables,
 * side-by-side clinic columns. Coexists with legacy fin styles
 * above; only new class names introduced here.
 * ============================================================ */

/* Clinic color tokens — soft fills + saturated text/border. */
:root {
  --c-central: #7C3AED;        /* purple */
  --c-central-soft: #F3EBFE;
  --c-central-line: #C4A4F3;
  --c-mongkok: #0891B2;        /* teal */
  --c-mongkok-soft: #E0F7FA;
  --c-mongkok-line: #76D5E2;
  --c-jordan:  #EA580C;        /* orange */
  --c-jordan-soft: #FFEDD5;
  --c-jordan-line: #FBB57E;
}

/* ---- Controls (layers 1–4) ---- */
/* Compact, non-sticky. Lots of content lives in the data panel and KPI strip,
 * so we keep the controls visually tight and let them scroll out of view on
 * small screens to maximise data real-estate. */
.finControls {
  background: #fff;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--ink-200);
  display: flex; flex-direction: column; gap: 8px;
}
.finControlsRow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.finControlsRow2 {
  /* No divider — keeps the controls block visually one unit. */
  padding-top: 0;
}

/* View toggle pill */
.finViewToggle {
  display: inline-flex; background: var(--ink-100);
  border-radius: 8px; padding: 2px;
  align-self: flex-start;
}
.finVTBtn {
  border: 0; background: transparent;
  padding: 5px 14px; font-weight: 600; font-size: 13px;
  color: var(--ink-500); border-radius: 6px; cursor: pointer;
  transition: all .12s;
}
.finVTBtn:hover { color: var(--ink-700); }
.finVTBtn.active {
  background: #fff; color: var(--brand-deep);
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
}

/* Clinic tabs (Clinic View) */
.finClinicTabs {
  display: inline-flex; gap: 4px; flex-wrap: wrap;
}
.finCTab {
  border: 0; background: transparent;
  padding: 5px 12px; font-weight: 500; font-size: 13px;
  color: var(--ink-500); border-radius: 6px; cursor: pointer;
  border: 1px solid transparent;
}
.finCTab:hover { color: var(--ink-700); background: var(--ink-50); }
.finCTab.active {
  background: var(--brand-soft); color: var(--brand-deep);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  font-weight: 600;
}

/* Dentist picker (Dentist View) */
.finDentistPicker {
  display: inline-flex; align-items: center; gap: 10px;
}
.finDPLabel {
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-500);
}
.finDPSel {
  font: inherit; padding: 5px 10px; min-width: 180px;
  border: 1px solid var(--ink-300); border-radius: 6px;
  background: #fff; color: var(--ink-900); cursor: pointer;
  font-size: 13px;
}
.finDPSel:disabled { background: var(--ink-50); cursor: default; }
.finDPSel:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* Grain toggle (Daily / Monthly) */
.finGrainToggle {
  display: inline-flex; background: var(--ink-100);
  border-radius: 6px; padding: 2px;
}
.finGTBtn {
  border: 0; background: transparent;
  padding: 4px 12px; font-weight: 500; font-size: 12px;
  color: var(--ink-500); border-radius: 4px; cursor: pointer;
}
.finGTBtn.active { background: #fff; color: var(--ink-900); font-weight: 600; box-shadow: 0 1px 2px rgba(15,23,42,.08); }

/* Date / month picker bar */
.finDateBar {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap;
}
.finDateBar .btn,
.finStep, .finToday, .finThisMonth {
  border: 1px solid var(--ink-300); background: #fff;
  padding: 4px 8px; font-size: 12px; border-radius: 5px;
  color: var(--ink-700); cursor: pointer; line-height: 1.4;
}
.finDateBar .btn:hover:not(:disabled) { background: var(--ink-50); }
.finDateBar .btn:disabled { opacity: .4; cursor: default; }
.finDatePick, .finMonthPick {
  font: inherit; padding: 4px 8px; font-size: 13px;
  border: 1px solid var(--ink-300); border-radius: 5px; color: var(--ink-900);
  max-width: 165px;
}
/* finDateNice removed visually — the picker already shows the date. Kept
 * available as a class so non-mobile layouts can choose to show it; default
 * is hidden everywhere to remove the redundant line. */
.finDateNice { display: none; }

/* ---- KPI strip ---- */
.finKpiStrip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 16px 20px;
}
.finKpiStripGhost { grid-template-columns: 1fr; }
.finKpi {
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: 10px; padding: 14px 16px;
  min-height: 78px;
}
.finKpiPrimary { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.finKpiPrimary .finKpiValue { color: var(--brand-deep); }
.finKpiLabel {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-500);
  margin-bottom: 6px;
}
.finKpiValue {
  font-size: 26px; font-weight: 700; color: var(--ink-900);
  line-height: 1.1;
}
.finKpiValueSm { font-size: 16px; line-height: 1.3; }
.finKpiSub { font-size: 12px; color: var(--ink-500); margin-top: 4px; }
.finKpiInactive { opacity: .55; }
.finKpiInactive .finKpiValue { color: var(--ink-400); }

/* Clinic-tinted KPI cards */
.finKpiClinic.cc-central { background: var(--c-central-soft); border-color: var(--c-central-line); }
.finKpiClinic.cc-central .finKpiLabel { color: var(--c-central); }
.finKpiClinic.cc-mongkok { background: var(--c-mongkok-soft); border-color: var(--c-mongkok-line); }
.finKpiClinic.cc-mongkok .finKpiLabel { color: var(--c-mongkok); }
.finKpiClinic.cc-jordan  { background: var(--c-jordan-soft);  border-color: var(--c-jordan-line); }
.finKpiClinic.cc-jordan  .finKpiLabel { color: var(--c-jordan); }
.finKpiClinic .finKpiValue { color: var(--ink-900); }
.finKpiInactive.cc-central, .finKpiInactive.cc-mongkok, .finKpiInactive.cc-jordan {
  background: #fff;
}

/* =========================================================================
   Clinic·Daily v4 — Primary KPI + method tile grid + dentist chip row
   ========================================================================= */
.finTopGrid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  padding: 16px 20px;
}
.finPrimary {
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 156px;
}
.finPrimaryLabel {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-deep);
}
.finPrimaryScope {
  font-size: 13px; color: var(--ink-700); margin-top: 4px; font-weight: 500;
}
.finPrimaryValue {
  font-size: 34px; font-weight: 700; color: var(--brand-deep); line-height: 1.05;
  margin-top: 14px;
}
.finPrimarySub { font-size: 12px; color: var(--ink-500); margin-top: 6px; }

.finMethodGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-content: start;
}
.finMethodTile {
  background: #fff; border: 1px solid var(--ink-200); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
  min-height: 72px;
}
.finMethodTile .mLabel {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-500);
}
.finMethodTile .mAmt {
  font-size: 18px; font-weight: 700; color: var(--ink-900); line-height: 1.1;
}
.finMethodTile .mSub { font-size: 11px; color: var(--ink-500); }
.finMethodTile.empty { background: var(--ink-50); border-style: dashed; }
.finMethodTile.empty .mAmt { color: var(--ink-400); }
.finMethodTile.empty .mSub { color: var(--ink-300); }

/* Method-family tints (border + label colour). Amount stays ink-900 for legibility. */
.finMethodTile.cash { border-color: color-mix(in srgb, #047857 30%, transparent); }
.finMethodTile.cash .mLabel { color: #047857; }
.finMethodTile.fps  { border-color: color-mix(in srgb, #1d4ed8 30%, transparent); }
.finMethodTile.fps  .mLabel { color: #1d4ed8; }
.finMethodTile.card { border-color: color-mix(in srgb, #6d28d9 30%, transparent); }
.finMethodTile.card .mLabel { color: #6d28d9; }
.finMethodTile.recv { border-color: color-mix(in srgb, #ea580c 30%, transparent); }
.finMethodTile.recv .mLabel { color: #ea580c; }
.finMethodTile.disc { border-color: color-mix(in srgb, #b45309 50%, transparent); }
.finMethodTile.disc .mLabel { color: #b45309; }

/* Dentist chip row */
.finDentistRow {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 12px 20px;
  background: #fff;
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
}
.finDentistRowLabel {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500); margin-right: 6px;
}
.finDChip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--ink-200);
  font-size: 12px; font-weight: 500; color: var(--ink-700);
  cursor: pointer;
}
.finDChip:hover { background: var(--ink-50); }
.finDChip.active {
  background: var(--ink-900); color: #fff; border-color: var(--ink-900);
}
.finDChip .count {
  background: var(--ink-100); color: var(--ink-500);
  padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.finDChip.active .count { background: rgba(255,255,255,.15); color: #fff; }

/* Responsive: tablet stacks primary above the method grid */
@media (max-width: 900px) {
  .finTopGrid { grid-template-columns: 1fr; padding: 12px 16px; gap: 10px; }
  .finPrimary { min-height: 0; padding: 14px 16px; }
  .finPrimaryValue { font-size: 28px; margin-top: 8px; }
  .finMethodGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .finTopGrid { padding: 10px 12px; gap: 8px; }
  .finPrimary { padding: 12px 14px; }
  .finPrimaryValue { font-size: 22px; }
  .finMethodGrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .finMethodTile { padding: 10px 12px; min-height: 0; }
  .finMethodTile .mAmt { font-size: 16px; }
  .finDentistRow { padding: 10px 12px; gap: 6px; }
  .finDentistRowLabel { display: none; }
  .finDChip { padding: 4px 10px; font-size: 12px; }
}

/* ---- Data panel ---- */
.finPanel {
  background: #fff; margin: 0 20px 20px;
  border: 1px solid var(--ink-200); border-radius: 12px;
  overflow: hidden;
}
.finPanelHeader {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 18px; border-bottom: 1px solid var(--ink-200);
}
.finPanelTitle { font-weight: 600; color: var(--ink-900); }
.finPanelMeta  { font-size: 12px; color: var(--ink-500); }

/* Clinic chip pill (in payment table) */
.finClinicChip {
  display: inline-block; padding: 2px 10px;
  font-size: 12px; font-weight: 500; border-radius: 999px;
  border: 1px solid var(--ink-200); background: var(--ink-50); color: var(--ink-700);
}
.finClinicChip.cc-central { background: var(--c-central-soft); color: var(--c-central); border-color: var(--c-central-line); }
.finClinicChip.cc-mongkok { background: var(--c-mongkok-soft); color: var(--c-mongkok); border-color: var(--c-mongkok-line); }
.finClinicChip.cc-jordan  { background: var(--c-jordan-soft);  color: var(--c-jordan);  border-color: var(--c-jordan-line); }

/* ---- Day-by-method matrix table ---- */
.finMatrixTable .finTh { font-size: 11px; }
.finMatrixTable .finMatrixMethod { font-weight: 600; }
.finMatrixDate {
  white-space: nowrap; font-weight: 500; color: var(--ink-900);
}
.finMatrixCount { color: var(--ink-500); font-size: 12px; }
.finMatrixCell { font-variant-numeric: tabular-nums; }
.finMatrixCellEmpty { color: var(--ink-300); }
.finMatrixTotal {
  font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--ink-100);
}
.finMatrixRowBig {
  background: color-mix(in srgb, var(--brand) 6%, transparent);
}
.finMatrixRowBig .finMatrixTotal { color: var(--brand-deep); }

/* ---- Side-by-side clinic columns (Dentist Daily) ---- */
.finColGrid {
  display: grid; gap: 16px; padding: 16px;
}
.finColGrid-1 { grid-template-columns: 1fr; }
.finColGrid-2 { grid-template-columns: repeat(2, 1fr); }
.finColGrid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .finColGrid-3, .finColGrid-2 { grid-template-columns: 1fr; } }
.finCol {
  border: 1px solid var(--ink-200); border-radius: 10px;
  overflow: hidden; background: #fff;
}
.finColHeader {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ink-200);
}
.finColChip {
  display: inline-block; padding: 2px 10px;
  font-size: 12px; font-weight: 600; border-radius: 999px;
  background: #fff;
}
.finColHeader.cc-central { background: var(--c-central-soft); }
.finColHeader.cc-central .finColChip { color: var(--c-central); border: 1px solid var(--c-central-line); }
.finColHeader.cc-mongkok { background: var(--c-mongkok-soft); }
.finColHeader.cc-mongkok .finColChip { color: var(--c-mongkok); border: 1px solid var(--c-mongkok-line); }
.finColHeader.cc-jordan  { background: var(--c-jordan-soft); }
.finColHeader.cc-jordan  .finColChip { color: var(--c-jordan);  border: 1px solid var(--c-jordan-line); }
.finColPatients { font-size: 12px; color: var(--ink-700); }
.finColTotal {
  margin-left: auto; font-weight: 700; color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.finColBody {
  padding: 6px 0;
}
.finColEmpty {
  padding: 16px; text-align: center; color: var(--ink-400); font-size: 13px;
}

/* Mini row inside a clinic column */
.finMiniRow {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ink-100);
  display: flex; flex-direction: column; gap: 6px;
}
.finMiniRow:last-child { border-bottom: 0; }
.finMRtop {
  display: grid; grid-template-columns: 56px 1fr auto;
  align-items: baseline; gap: 10px;
}
.finMRtime {
  font-variant-numeric: tabular-nums; font-weight: 500;
  color: var(--ink-700);
}
.finMRpt {
  color: var(--ink-900); font-weight: 500;
}
.finMRpt a { color: inherit; text-decoration: none; }
.finMRpt a:hover { text-decoration: underline; }
.finPtRefInline { font-size: 12px; color: var(--ink-500); font-weight: 400; }
.finMRamt {
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.finMRbot {
  padding-left: 66px;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  font-size: 12px;
}
.finMRitems { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.finMRmethod { color: var(--ink-500); }

/* Items inside mini rows: smaller chip style. */
.finMiniRow .finItemChip {
  font-size: 12px; padding: 2px 8px;
}
.finMiniRow .finItemDesc { color: var(--ink-700); }
.finMiniRow .finItemAmt { color: var(--ink-900); font-weight: 500; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .finKpiStrip { grid-template-columns: 1fr 1fr; padding: 12px 16px; gap: 8px; }
  .finKpiStrip .finKpiPrimary { grid-column: 1 / -1; }
  .finKpi { padding: 10px 12px; min-height: 0; }
  .finKpiValue { font-size: 22px; }
}
@media (max-width: 560px) {
  /* Aggressive compaction: every layer collapses to a single tight row so
   * the controls block consumes minimal vertical space and the data panel
   * is visible above the fold. */
  .finControls { padding: 8px 12px; gap: 6px; }
  .finControlsRow { gap: 8px; }
  .finControlsRow2 { gap: 6px; }

  .finViewToggle, .finGrainToggle { padding: 1px; }
  .finVTBtn { padding: 4px 10px; font-size: 12px; }
  .finGTBtn { padding: 3px 10px; font-size: 12px; }
  .finCTab { padding: 4px 10px; font-size: 12px; }

  .finDPLabel { display: none; }
  .finDPSel { min-width: 0; flex: 1 1 140px; max-width: 100%; }
  .finDentistPicker { flex: 1 1 auto; }

  .finDateBar { width: 100%; gap: 4px; }
  .finDatePick, .finMonthPick { flex: 1 1 auto; max-width: none; min-width: 0; }
  .finStep { padding: 4px 6px; }
  .finToday, .finThisMonth { padding: 4px 8px; }

  .finKpiStrip { grid-template-columns: 1fr 1fr; padding: 10px 12px; gap: 6px; }
  .finKpi { padding: 8px 10px; }
  .finKpiLabel { font-size: 10px; margin-bottom: 2px; }
  .finKpiValue { font-size: 18px; }
  .finKpiSub { font-size: 11px; }

  .finPanel { margin: 0 12px 12px; }
  .finPanelHeader { padding: 10px 12px; }

  .finMatrixTable { font-size: 12px; }
  .finMatrixTable .finTd, .finMatrixTable .finTh { padding: 6px 8px; }

  /* Mini-row tightening for Dentist Daily side-by-side columns */
  .finMiniRow { padding: 8px 12px; gap: 4px; }
  .finMRtop { grid-template-columns: 46px 1fr auto; gap: 8px; }
  .finMRbot { padding-left: 54px; font-size: 11px; }
  .finColGrid { padding: 12px; gap: 12px; }
  .finColHeader { padding: 8px 12px; }
}

/* ============================================================
 * Mobile card view for Clinic Daily payments + collapsible
 * Dentist Daily mini-rows (2026-05-12 — user request)
 * ============================================================ */

/* Default: desktop table shown, mobile cards hidden */
.finDesktopOnly { display: block; }
.finMobileOnly { display: none; }

/* Card list (Clinic Daily, mobile only) */
.finCardList {
  background: var(--card-bg, #fff);
  border-radius: 12px;
  overflow: hidden;
}
.finCard {
  border-bottom: 1px solid var(--ink-100);
  padding: 0;
}
.finCard:last-child { border-bottom: 0; }
.finCardSummary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 50px 1fr auto 16px;
  align-items: baseline;
  gap: 10px;
  user-select: none;
}
.finCardSummary::-webkit-details-marker { display: none; }
.finCardSummary::marker { display: none; }
.finCardTime {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink-700);
  font-size: 14px;
}
.finCardPt {
  color: var(--ink-900);
  font-weight: 500;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finCardPt a { color: inherit; text-decoration: none; }
.finCardPt a:hover { text-decoration: underline; }
.finCardPt .finPtZh { font-size: 12px; color: var(--ink-600); margin-left: 4px; }
.finCardPt .finPtRefInline { font-size: 11px; color: var(--ink-500); margin-left: 6px; }
.finCardAmt {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 15px;
}
.finCardChev {
  color: var(--ink-400);
  font-size: 12px;
  transition: transform 0.15s ease;
  justify-self: end;
}
.finCard[open] > .finCardSummary .finCardChev { transform: rotate(180deg); }
.finCardBody {
  padding: 4px 14px 12px 64px;
  background: var(--ink-50, #fafafa);
  border-top: 1px dashed var(--ink-100);
}
.finCardMetaRow {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
}
.finCardMetaItem { color: var(--ink-700); }
.finCardDentist { color: var(--ink-800); font-weight: 500; }
.finCardMethod { color: var(--ink-500); }
.finCardItems {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.finCardItems .finItemChip {
  font-size: 11px;
  padding: 2px 8px;
}

/* Dentist Daily mini-rows — collapse on mobile */
.finMiniRow > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.finMiniRow > summary::-webkit-details-marker { display: none; }
.finMiniRow > summary::marker { display: none; }
.finMiniRow .finMRchev {
  color: var(--ink-400);
  font-size: 11px;
  margin-left: 6px;
  transition: transform 0.15s ease;
  display: none; /* hidden on desktop where row is always expanded */
}
.finMiniRow[open] > summary .finMRchev { transform: rotate(180deg); }

/* On desktop, force mini-row body always visible regardless of open state */
@media (min-width: 561px) {
  .finMiniRow > .finMRbot { display: flex; }
}

/* Mobile-only swaps */
@media (max-width: 560px) {
  .finDesktopOnly { display: none; }
  .finMobileOnly { display: block; }

  /* On mobile, the matrix needs at least this width to stay legible. The
     .finTableWrap rule above already handles overflow-x: auto on all
     viewports. */
  .finMatrixTable { min-width: 560px; }

  /* Mini-rows: collapse on mobile, show chevron, hide body when closed */
  .finMiniRow .finMRchev { display: inline; }
  .finMiniRow:not([open]) > .finMRbot { display: none; }
  .finMiniRow > .finMRbot { display: flex; }
  .finMRtop { grid-template-columns: 46px 1fr auto auto; gap: 8px; }

  /* Smaller card amount sizing on very narrow phones */
  .finCardSummary { grid-template-columns: 44px 1fr auto 14px; gap: 8px; padding: 10px 12px; }
  .finCardTime { font-size: 13px; }
  .finCardPt { font-size: 13px; }
  .finCardAmt { font-size: 14px; }
  .finCardBody { padding: 4px 12px 10px 52px; }
}

/* ============================================================
 * Mobile day-card list for Monthly views (2026-05-12)
 * Each day collapses to Date · Payments · Day Total; tap to expand
 * for the per-method breakdown.
 * ============================================================ */
.finDayCardList {
  background: var(--card-bg, #fff);
  border-radius: 12px;
  overflow: hidden;
}
.finDayCard {
  border-bottom: 1px solid var(--ink-100);
}
.finDayCard:last-of-type { border-bottom: 0; }
.finDayCardSummary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto auto 16px;
  align-items: baseline;
  gap: 12px;
  user-select: none;
}
.finDayCardSummary::-webkit-details-marker { display: none; }
.finDayCardSummary::marker { display: none; }
.finDayCardDate {
  font-weight: 500;
  color: var(--ink-900);
  font-size: 14px;
  white-space: nowrap;
}
.finDayCardStar {
  color: var(--accent, #C28E0E);
  font-size: 11px;
  margin-left: 2px;
}
.finDayCardBig .finDayCardDate { font-weight: 700; }
.finDayCardCount {
  font-size: 12px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.finDayCardTotal {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-900);
  font-size: 15px;
  white-space: nowrap;
}
.finDayCardBig .finDayCardTotal { color: var(--accent, #C28E0E); }
.finDayCardChev {
  color: var(--ink-400);
  font-size: 12px;
  transition: transform 0.15s ease;
  justify-self: end;
}
.finDayCard[open] > .finDayCardSummary .finDayCardChev { transform: rotate(180deg); }
.finDayCardBody {
  padding: 6px 14px 14px;
  background: var(--ink-50, #fafafa);
  border-top: 1px dashed var(--ink-100);
  display: flex; flex-direction: column; gap: 4px;
}
.finDayCardMethod {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
}
.finDayCardMethodLabel { color: var(--ink-700); }
.finDayCardMethodAmt {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink-900);
}
.finDayCardFooter {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 12px;
  background: var(--ink-50, #fafafa);
  border-top: 2px solid var(--ink-200);
  font-weight: 700;
}
.finDayCardFooter .finDayCardDate { font-weight: 700; }
.finDayCardFooter .finDayCardTotal { color: var(--ink-900); }

/* ============================================================================
   BETA — Suggest Treatment Note Template
   Beta button + inline disclaimer banner shown after a template is inserted.
   ========================================================================= */
.editorBtnSuggest {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  cursor: pointer;
}
.editorBtnSuggest:hover { filter: brightness(1.05); }
.editorBtnSuggest:disabled { opacity: 0.6; cursor: wait; }

.editorBetaPill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.25);
  color: #fff;
  text-transform: uppercase;
  vertical-align: middle;
}
.editorSuggestBanner .editorBetaPill {
  background: #f59e0b;
  color: #1a1a1a;
  margin-right: 8px;
}

.editorSuggestBanner {
  margin-bottom: 8px;
  padding: 8px 12px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  color: #78350f;
  font-size: 13px;
  line-height: 1.5;
}
.editorSuggestBanner strong { color: #451a03; }

/* ============================================================================
   BETA — Tap-to-fill Template Placeholder Toolbar
   Replaces the older static disclaimer banner with an interactive chip bar.
   Each [[placeholder]] in the textarea becomes a clickable chip; tapping
   selects that placeholder so the next keystroke replaces it cleanly.
   ========================================================================= */
.tplFillBar {
  margin-bottom: 8px;
  padding: 10px 12px;
  background: #fffbea;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(146, 64, 14, 0.05);
}
.tplFillBarMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #78350f;
  margin-bottom: 8px;
  line-height: 1.4;
}
.tplFillBar .editorBetaPill {
  background: #f59e0b;
  color: #1a1a1a;
}
.tplFillBarTitle { color: #78350f; }
.tplFillBarTitle strong { color: #92400e; font-weight: 700; }
.tplFillBarSrc {
  font-size: 12px;
  color: #92400e;
  margin-left: auto;
  opacity: 0.85;
}
.tplFillSrcFb strong { color: #78350f; }

.tplFillChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tplFillChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  color: #78350f;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  max-width: 100%;
}
.tplFillChip:hover {
  background: #fef3c7;
  border-color: #f59e0b;
}
.tplFillChip:active { transform: scale(0.97); }
.tplFillChipLabel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.tplFillNext, .tplFillClear {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s, transform 0.08s;
}
.tplFillNext {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border: none;
}
.tplFillNext:hover { filter: brightness(1.08); }
.tplFillNext:active { transform: scale(0.97); }

.tplFillClear {
  background: transparent;
  color: #92400e;
  border: 1px dashed #d97706;
}
.tplFillClear:hover { background: #fef3c7; }

/* Compact "all filled" state */
.tplFillBarDone {
  padding: 8px 12px;
  background: #ecfdf5;
  border-color: #6ee7b7;
}
.tplFillBarDone .tplFillBarMeta { color: #065f46; margin-bottom: 0; }
.tplFillBarDone .editorBetaPill { background: #10b981; color: #fff; }

/* Mobile: keep chips readable when stacked */
@media (max-width: 600px) {
  .tplFillBar { padding: 10px; }
  .tplFillBarSrc { margin-left: 0; flex-basis: 100%; }
  .tplFillChipLabel { max-width: 160px; }
}

.tplFillBarNote {
  font-size: 12px;
  color: #92400e;
  background: #fffaf0;
  border: 1px dashed #fcd34d;
  border-radius: 6px;
  padding: 4px 8px;
  margin: -4px 0 8px;
  line-height: 1.4;
}
.tplFillBarNote strong { color: #78350f; }

/* ============================================================
   AUDIT VIEW (owner-only Phase 12)
   ============================================================ */
.auditBody {
  padding: 16px 20px 40px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.auditEmpty {
  padding: 32px 16px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}
.auditToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 12px;
}
.auditFilter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}
.auditFilter label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.auditFilter select,
.auditFilter input[type="date"] {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}
.auditFilterActions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.auditMeta {
  font-size: 12px;
  color: #6b7280;
  padding: 4px 4px 8px;
}
.auditMeta strong { color: #111827; }
.auditTableWrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.auditTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.auditTable thead th {
  background: #f3f4f6;
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 12px;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.auditTable tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}
.auditTable tbody tr:hover { background: #f9fafb; }
.auditTable .auditTs {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #374151;
  width: 140px;
}
.auditTable .auditActor {
  color: #1f2937;
  word-break: break-all;
  width: 220px;
}
.auditRole {
  display: inline-block;
  font-size: 10px;
  background: #e5e7eb;
  color: #374151;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
}
.auditTable .auditAction {
  color: #111827;
  font-weight: 500;
  width: 220px;
}
.auditActionRaw {
  font-size: 10px;
  color: #9ca3af;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-top: 2px;
}
.auditBadgeCritical {
  display: inline-block;
  font-size: 10px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.auditRowCritical { background: #fffbeb; }
.auditRowCritical:hover { background: #fef3c7 !important; }
.auditEntity {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #4b5563;
  width: 220px;
}
.auditEntity .auditEntityId { color: #1f2937; font-weight: 500; }
.auditDetails {
  font-size: 12px;
  color: #4b5563;
  word-break: break-word;
  line-height: 1.5;
}
.auditDetailKey {
  color: #6b7280;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.auditDetailVal {
  color: #111827;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.auditPager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  padding: 8px 0;
}
.auditPager .btn {
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.auditPager .btn:hover:not([disabled]) {
  background: #f3f4f6;
}
.auditPager .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.auditPager .btnPrimary,
.auditToolbar .btnPrimary {
  background: #f97316;
  color: #fff;
  border-color: #ea580c;
}
.auditToolbar .btnPrimary:hover { background: #ea580c; }
.auditToolbar .btn {
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.auditToolbar .btn:hover { background: #f3f4f6; }
.auditPageInfo { font-size: 13px; color: #374151; }
.auditPageInfo strong { color: #111827; }
@media (max-width: 700px) {
  .auditFilter { min-width: 100%; }
  .auditFilterActions { margin-left: 0; width: 100%; }
  .auditFilterActions .btn { flex: 1; }
  .auditTable .auditTs,
  .auditTable .auditActor,
  .auditTable .auditAction,
  .auditTable .auditEntity { width: auto; }
}

/* =========================================================================
   Cancellation & Change-Request feature
   ========================================================================= */

/* Change-requested appointment chip — extremely low opacity so the slot
   visually reads as "soft vacancy". Drop a new booking onto it and the
   original auto-cancels (see handleCalDrop). */
.calApptChangeRequested {
  opacity: 0.15;
  filter: saturate(0.5);
}
.calApptChangeRequested:hover { opacity: 0.35; }

/* 2026-05-21 — Per-user override for Ginny (usr_recep_ginny). She handles
   reschedules herself and asked for change-requested chips to remain visible
   on her calendar at reduced (but legible) opacity, so she can see the slot
   the patient wants to leave. Other accounts keep the 0.15 default above. */
.calApptChangeRequested.calApptChangeRequestedGinny {
  opacity: 0.45;
  filter: saturate(0.7);
}
.calApptChangeRequested.calApptChangeRequestedGinny:hover { opacity: 0.7; }
.calApptChangeRequested::after {
  content: "⟳ change requested";
  position: absolute;
  left: 4px;
  bottom: 2px;
  font-size: 9px;
  font-weight: 700;
  color: #b45309;
  background: rgba(255,255,255,0.85);
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
}

/* 4-state status picker in the booking modal — replaces the old single
   "Confirmed" checkbox. Owner + receptionist see this; everyone else sees
   a read-only badge. */
.bookingStatusPicker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.bookingStatusOpt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, background .15s;
}
.bookingStatusOpt:hover { background: #f9fafb; }
.bookingStatusOpt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bookingStatusOptLbl {
  font-weight: 600;
  font-size: 13px;
  color: #111827;
}
.bookingStatusOptDesc {
  font-size: 11px;
  color: #6b7280;
}
.bookingStatusOptActive {
  border-color: #f97316;
  background: #fff7ed;
  box-shadow: 0 0 0 1px #f97316 inset;
}
.bookingStatusOptActive .bookingStatusOptLbl { color: #c2410c; }
.bookingStatusCrFields {
  margin-top: 10px;
  padding: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
}
.bookingStatusCrRow { margin-bottom: 8px; }
.bookingStatusCrLbl {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #9a3412;
  margin-bottom: 4px;
}
.bookingStatusErr {
  margin-top: 8px;
  padding: 6px 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #991b1b;
  font-size: 12px;
}

/* Read-only status chips for non-owner/receptionist viewers */
.bookingChangeReqChip { color: #b45309; background: #fffbeb; }
.bookingCancelledChip { color: #991b1b; background: #fef2f2; }
.bookingPendingChip   { color: #6b7280; background: #f3f4f6; }

/* "Pending Appointment Changes" top-level tab */
.pendingChangesPanel {
  padding: 16px 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.pendingChangesHeader {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.pendingChangesTitle {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}
.pendingChangesCount {
  font-size: 13px;
  color: #6b7280;
}
.pendingChangesList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pendingChangeCard {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #f97316;
  border-radius: 8px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
}
.pendingChangeCard.resolved {
  border-left-color: #94a3b8;
  opacity: 0.6;
}
/* v16 (Phase 0.6): cancelled-but-kept rows are visible greyed-out audit trail */
.pendingChangeCard--cancelled {
  border-left-color: #94a3b8;
  background: #f9fafb;
  opacity: 0.7;
}
.pendingChangeCard--cancelled .pendingChangeDates b {
  color: #6b7280;
  text-decoration: line-through;
}
.pendingChangeCancelledBadge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #6b7280;
  color: #fff;
  border-radius: 3px;
  vertical-align: middle;
}
.pendingChangeBtn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.pendingChangePatient {
  font-weight: 700;
  color: #111827;
  font-size: 14px;
}
.pendingChangePatientMeta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}
.pendingChangeDates {
  font-size: 13px;
  color: #374151;
  margin-top: 6px;
}
.pendingChangeDates b { color: #c2410c; }
.pendingChangeReason {
  margin-top: 6px;
  padding: 6px 10px;
  background: #fffbeb;
  border-radius: 4px;
  font-size: 12px;
  color: #78350f;
}
.pendingChangeActions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.pendingChangeBtn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
}
.pendingChangeBtn:hover { background: #f3f4f6; }
.pendingChangeBtn.primary {
  background: #f97316;
  border-color: #f97316;
  color: #fff;
}
.pendingChangeBtn.primary:hover { background: #ea580c; }
.pendingChangeBtn.danger { color: #991b1b; border-color: #fecaca; }
.pendingChangeBtn.danger:hover { background: #fef2f2; }
.pendingChangesEmpty {
  padding: 30px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  background: #f9fafb;
  border-radius: 8px;
}

/* Polished empty / loading / error state for Pending Changes view */
.pendingChangesEmptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 28px;
  margin: 24px auto;
  max-width: 520px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pendingChangesEmptyIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff7ed;
  color: #f97316;
  margin-bottom: 18px;
}
.pendingChangesEmptyTitle {
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.pendingChangesEmptyText {
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
  max-width: 380px;
}
.pendingChangesEmptyHint {
  margin-top: 14px;
  padding: 10px 14px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 10px;
  max-width: 420px;
}
.pendingChangesEmptyHint b {
  color: #f97316;
  font-weight: 600;
}
.pendingChangesEmptyState--error .pendingChangesEmptyIcon {
  background: #fef2f2;
  color: #dc2626;
}
.pendingChangesEmptyState--loading {
  padding: 56px 28px;
}
.pendingChangesEmptySpinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid #fed7aa;
  border-top-color: #f97316;
  animation: pendingChangesSpin 0.8s linear infinite;
  margin-bottom: 14px;
}
@keyframes pendingChangesSpin {
  to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
  .pendingChangesEmptyState {
    padding: 44px 18px;
    margin: 14px;
  }
  .pendingChangesEmptyIcon { width: 60px; height: 60px; }
  .pendingChangesEmptyTitle { font-size: 17px; }
}

/* Patient sidebar Appointments sub-tabs */
.apptSubTabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 10px;
  padding: 0 4px;
  flex-wrap: wrap;
}
.apptSubTab {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.apptSubTab:hover { color: #111827; }
.apptSubTabActive { color: #c2410c; border-bottom-color: #f97316; }
.apptSubTabCount {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-size: 10px;
  background: #f3f4f6;
  color: #6b7280;
  border-radius: 8px;
  font-weight: 700;
}
.apptSubTabActive .apptSubTabCount { background: #fed7aa; color: #c2410c; }

/* Change-history dropdown inside an appointment row */
.apptHistToggle {
  background: none;
  border: 0;
  padding: 2px 6px;
  font-size: 11px;
  color: #2563eb;
  cursor: pointer;
}
.apptHistToggle:hover { text-decoration: underline; }
.apptHistList {
  margin-top: 6px;
  padding: 8px 10px;
  background: #f8fafc;
  border-left: 2px solid #cbd5e1;
  border-radius: 4px;
  font-size: 11px;
  color: #475569;
}
.apptHistList .apptHistRow {
  padding: 3px 0;
  border-bottom: 1px dotted #e2e8f0;
}
.apptHistList .apptHistRow:last-child { border-bottom: 0; }
.apptHistTime { color: #94a3b8; margin-right: 6px; }
.apptHistFromTo { font-weight: 600; color: #334155; }

/* ============================================================ */
/* Appointment history timeline (Upcoming row → Hide history)   */
/* Modern timeline: dot rail, pill labels, grouped time chips.  */
/* ============================================================ */
.apptHistList {
  /* Override older flat list styling defined upstream. */
  background: #fafbfc;
  border: 1px solid #eef2f7;
  border-left: none;
  border-radius: 8px;
  padding: 14px 16px 12px;
  margin-top: 8px;
}
.apptHistEmpty {
  color: #94a3b8;
  font-size: 12px;
  padding: 4px 2px;
}
.apptHistTimeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.apptHistTimeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, #e2e8f0 0%, #e2e8f0 100%);
  border-radius: 1px;
}
.apptHistItem {
  position: relative;
  padding: 0 0 14px 22px;
  display: block;
}
.apptHistItem:last-child { padding-bottom: 0; }
.apptHistDot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 3px #fafbfc;
}
.apptHistDot.isReschedule { background: #f97316; }
.apptHistDot.isConfirm    { background: #16a34a; }
.apptHistDot.isCancel     { background: #dc2626; }
.apptHistDot.isChangeReq  { background: #f59e0b; }
.apptHistDot.isPending    { background: #64748b; }

.apptHistMain { min-width: 0; }
.apptHistHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.2;
}
.apptHistLabel {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.apptHistLabel.isReschedule { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.apptHistLabel.isConfirm    { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.apptHistLabel.isCancel     { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.apptHistLabel.isChangeReq  { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.apptHistLabel.isPending    { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

.apptHistWhen {
  margin-left: auto;
  font-size: 11px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.apptHistWhenDate { color: #64748b; }
.apptHistWhenTime { color: #94a3b8; }

.apptHistSlots {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.apptHistSlot {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.apptHistSlotOld {
  color: #94a3b8;
  text-decoration: line-through;
  text-decoration-color: #cbd5e1;
  background: #f8fafc;
}
.apptHistSlotNew {
  color: #0f172a;
  background: #fff;
  border-color: #fed7aa;
  box-shadow: 0 0 0 1px #fff7ed inset;
}
.apptHistArrow {
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 600;
}

.apptHistMeta {
  display: inline-block;
  font-size: 12px;
  color: #64748b;
  margin-top: 6px;
}
.apptHistMeta em { font-style: normal; color: #334155; font-weight: 500; }

.apptHistExtras {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.apptHistReason {
  font-size: 12px;
  color: #475569;
  font-style: italic;
  background: #fff;
  border: 1px dashed #e2e8f0;
  padding: 2px 8px;
  border-radius: 6px;
}

.apptHistActor {
  margin-top: 7px;
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .apptHistList { padding: 12px 12px 10px; }
  .apptHistWhen { margin-left: 0; width: 100%; order: 3; }
  .apptHistSlots { gap: 6px; }
  .apptHistSlot { font-size: 11px; padding: 3px 7px; }
}

/* —— Speed layer: "Last synced · refresh" indicator —— */
.syncIndicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  margin-right: 12px;
  line-height: 1.2;
}
.syncIndicator .syncTag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 11px;
  border-radius: 50%;
  background: #f3f4f6;
}
.syncIndicator .syncTag.fast { color: #f97316; background: #fff7ed; }
.syncIndicator .syncTag.live { color: #2563eb; background: #eff6ff; }
.syncIndicator .syncTag.warn { color: #dc2626; background: #fef2f2; font-weight: 700; }
.syncIndicator .syncAge { white-space: nowrap; }
.syncIndicator .syncRefresh {
  background: none;
  border: none;
  color: #f97316;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
}
.syncIndicator .syncRefresh:hover { color: #ea580c; }
.syncIndicator .syncRefresh:disabled { color: #9ca3af; cursor: wait; text-decoration: none; }

/* —— Double-booking merge indicator on treatment editor card —— */
.editorPill.mergedPill {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  font-weight: 600;
}

/* ===== Financial tab: collapsible per-date rows (2026-05-15) =====
   Each .finVisit starts with the .collapsed class. Clicking the head toggles
   it. When collapsed, the items + ledger panel is hidden so reception only
   sees date / clinic / doctor / billed / status per row. Chevron rotates on
   expand. */
.finVisitHead {
  cursor: pointer;
  user-select: none;
}
.finVisitHead:hover {
  background: #F8FAFC;
}
.finVisitChev {
  display: inline-block;
  color: #94A3B8;
  font-size: 14px;
  font-weight: 400;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  transition: transform 0.18s ease;
  margin-right: 2px;
}
.finVisit:not(.collapsed) > .finVisitHead > .finVisitChev {
  transform: rotate(90deg);
  color: #F97316;
}
.finVisit.collapsed > .finVisitBody {
  display: none;
}
.finVisitHead:focus-visible {
  outline: 2px solid #F97316;
  outline-offset: -2px;
  border-radius: 4px;
}

/* ============================================================================
   PHASE 12 — Option C: dentist-authored note templates + appt-type reselection
   - .apptTypeChip: clickable pill at top of treatment record (re-classify)
   - .apptTypePickerModal: type picker
   - .nxModal*: shared modal primitives
   - .editorBtnTpl / .editorBtnSaveTpl: template toolbar buttons
   - .tplMenu: slash-style picker (My / Built-in)
   - .saveTplModal: auto-capture sheet with detected placeholders
   - Orange brand: #f97316
   ========================================================================= */

/* ---- Appointment type chip (clickable) ---- */
.apptTypeChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--ink-200, #e2e8f0);
  background: var(--ink-50, #f8fafc);
  color: var(--ink-800, #1e293b);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  white-space: nowrap;
}
.apptTypeChip:hover {
  background: #fff7ed;
  border-color: #f97316;
  color: #9a3412;
}
.apptTypeChip:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 2px;
}
.apptTypeChip::after {
  content: "▾";
  font-size: 9px;
  opacity: 0.55;
  margin-left: 2px;
}
.apptTypeChip[data-readonly="1"] {
  cursor: default;
  background: transparent;
}
.apptTypeChip[data-readonly="1"]::after { display: none; }

/* ---- Shared modal primitives ---- */
/* The .nxModal wrapper IS the full-screen overlay. Hidden unless .open. */
.nxModal {
  display: none;
}
.nxModal.open {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 16px 16px;
  overflow-y: auto;
  animation: nxFadeIn .12s ease-out;
}
.nxModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 0;
  cursor: pointer;
}
@keyframes nxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.nxModalCard {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: nxRise .14s ease-out;
}
@keyframes nxRise {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.nxModalHead {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--ink-100, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nxModalHead h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900, #0f172a);
}
.nxModalHead .nxModalSub {
  font-size: 12px;
  color: var(--ink-500, #64748b);
  font-weight: 400;
  margin-top: 2px;
}
.nxModalClose {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-400, #94a3b8);
  padding: 4px 8px;
  border-radius: 6px;
}
.nxModalClose:hover { background: var(--ink-100, #f1f5f9); color: var(--ink-700, #334155); }
.nxModalFoot {
  padding: 12px 18px;
  border-top: 1px solid var(--ink-100, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: #fafbfc;
}

/* ---- Shared buttons ---- */
.nxBtn {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease;
  background: #fff;
  color: var(--ink-700, #334155);
  border-color: var(--ink-200, #e2e8f0);
}
.nxBtn:hover { background: var(--ink-50, #f8fafc); border-color: var(--ink-300, #cbd5e1); }
.nxBtn:disabled { opacity: 0.55; cursor: not-allowed; }
.nxBtnGhost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-600, #475569);
}
.nxBtnGhost:hover { background: var(--ink-100, #f1f5f9); border-color: transparent; }
.nxBtnPrimary {
  background: #f97316;
  color: #fff;
  border-color: #f97316;
}
.nxBtnPrimary:hover { background: #ea580c; border-color: #ea580c; }
.nxBtnPrimary:disabled { background: #fdba74; border-color: #fdba74; }
.nxBtnDanger {
  background: transparent;
  color: #b91c1c;
  border-color: transparent;
}
.nxBtnDanger:hover { background: #fef2f2; }
/* Brand-blue primary action (used by labConfirm and other on-brand dialogs). */
.nxBtnBrand {
  background: var(--brand, #5B9BC6);
  color: #fff;
  border-color: var(--brand, #5B9BC6);
}
.nxBtnBrand:hover { background: var(--brand-deep, #3F7CA6); border-color: var(--brand-deep, #3F7CA6); }
.nxBtnBrand:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- labConfirm — on-brand confirmation dialog ---- */
.nxConfirmCard { max-width: 440px; }
.nxConfirmBody {
  padding: 16px 18px 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-700, #334155);
}

/* ---- Appointment Type Picker ---- */
.apptTypePickerModal .nxModalCard { max-width: 480px; }
.apptTypeSearch {
  margin: 12px 14px 0;
  padding: 9px 12px;
  border: 1px solid var(--ink-200, #e2e8f0);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.apptTypeSearch:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
.apptTypeList {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px 6px 12px;
  margin: 0;
}
.apptTypeCat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-500, #64748b);
  padding: 10px 12px 4px;
}
.apptTypeItem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-800, #1e293b);
  transition: background .1s ease;
}
.apptTypeItem:hover { background: #fff7ed; }
.apptTypeItem.apptTypeCurrent {
  background: #fff7ed;
  outline: 1px solid #fed7aa;
}
.apptTypeItem.apptTypeCurrent::after {
  content: "Current";
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: #9a3412;
  background: #fed7aa;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.apptTypeDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-300, #cbd5e1);
  flex-shrink: 0;
}
.apptTypeName { font-weight: 600; }
.apptTypeMeta {
  font-size: 11px;
  color: var(--ink-500, #64748b);
  margin-left: 4px;
}

/* ---- Template toolbar buttons (replace Suggest) ---- */
.editorBtnTpl {
  background: var(--ink-50, #f8fafc);
  color: var(--ink-700, #334155);
  border: 1px solid var(--ink-200, #e2e8f0);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.editorBtnTpl:hover {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}
.editorBtnTpl::after {
  content: "▾";
  font-size: 10px;
  opacity: 0.6;
}
.editorBtnSaveTpl {
  background: transparent;
  color: var(--ink-600, #475569);
  border: 1px dashed var(--ink-300, #cbd5e1);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.editorBtnSaveTpl:hover {
  background: #fff7ed;
  border-color: #f97316;
  color: #9a3412;
  border-style: solid;
}
.editorBtnSaveTpl:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Slash template menu ---- */
/* Phase 12.1 — .tplMenu is now an .nxModal centered overlay (positioning
   handled by .nxModal.open). .tplMenuCard sizes the inner card and clips
   children so the body can scroll independently. */
.tplMenu.nxModal.open {
  /* Align card a bit higher so the keyboard doesn't cover it on mobile */
  align-items: flex-start;
  padding-top: 64px;
}
.tplMenuCard {
  width: 100%;
  max-width: 460px;
  max-height: min(640px, calc(100vh - 96px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tplMenuHead {
  flex-shrink: 0;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--ink-100, #f1f5f9);
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
}
.tplMenuHead .tplMenuSearch { flex: 1; }
.tplMenuClose {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-400, #94a3b8);
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.tplMenuClose:hover { background: var(--ink-100, #f1f5f9); color: var(--ink-700, #334155); }
.tplMenuSearch {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--ink-200, #e2e8f0);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
.tplMenuSearch:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18);
}
.tplMenuBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 4px;
}
.tplMenuLoading {
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-500, #64748b);
  font-size: 12px;
}
.tplMenuSecHint {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-500, #64748b);
  background: var(--ink-100, #f1f5f9);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: auto;
}
.tplMenuFootBtn {
  background: transparent;
  border: 0;
  color: #f97316;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.tplMenuFootBtn:hover { background: #fff7ed; }
.tplMenuSec {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-500, #64748b);
  padding: 8px 12px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tplMenuSec::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink-100, #f1f5f9);
}
.tplMenuItem {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .1s ease;
}
.tplMenuItem:hover,
.tplMenuItem.isActive { background: #fff7ed; }
.tplMenuItemIcon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.tplMenuItemBody {
  flex: 1;
  min-width: 0;
}
.tplMenuItemTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900, #0f172a);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tplMenuItemMeta {
  font-size: 11px;
  color: var(--ink-500, #64748b);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tplMenuItemKbd {
  font-size: 10px;
  font-weight: 600;
  background: var(--ink-100, #f1f5f9);
  color: var(--ink-600, #475569);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
}
.tplMenuItemDefault {
  font-size: 10px;
  font-weight: 700;
  background: #fed7aa;
  color: #9a3412;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.3px;
}
.tplMenuEmpty {
  padding: 24px 16px;
  text-align: center;
  color: var(--ink-500, #64748b);
  font-size: 12px;
  line-height: 1.5;
}
.tplMenuFoot {
  flex-shrink: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--ink-100, #f1f5f9);
  background: #fafbfc;
  font-size: 11px;
  color: var(--ink-500, #64748b);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* ---- Save-as-template capture sheet ---- */
.saveTplModal .nxModalCard { max-width: 600px; }
.saveTplBody {
  padding: 14px 18px;
  max-height: 60vh;
  overflow-y: auto;
}
.saveTplField {
  margin-bottom: 14px;
}
.saveTplField label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-700, #334155);
  margin-bottom: 5px;
  letter-spacing: 0.2px;
}
.saveTplField input[type="text"],
.saveTplField select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ink-200, #e2e8f0);
  border-radius: 7px;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
}
.saveTplField input[type="text"]:focus,
.saveTplField select:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
.saveTplRow {
  display: flex;
  gap: 12px;
  align-items: center;
}
.saveTplRow > .saveTplField { flex: 1; margin-bottom: 0; }
.saveTplRow .saveTplCheck {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-700, #334155);
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
}
.saveTplRow .saveTplCheck input { margin: 0; }

.saveTplPreview {
  background: var(--ink-50, #f8fafc);
  border: 1px solid var(--ink-100, #f1f5f9);
  border-radius: 8px;
  padding: 12px;
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-800, #1e293b);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}
.saveTplPh {
  display: inline-block;
  background: #fed7aa;
  color: #9a3412;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 11px;
}

.saveTplDetect {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.saveTplChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--ink-200, #e2e8f0);
  background: #fff;
  color: var(--ink-700, #334155);
  cursor: pointer;
  transition: background .1s ease, border-color .1s ease, color .1s ease;
}
.saveTplChip:hover { background: var(--ink-50, #f8fafc); }
.saveTplChip.isActive {
  background: #fff7ed;
  border-color: #f97316;
  color: #9a3412;
}
.saveTplChip.isActive::before {
  content: "✓";
  font-size: 10px;
  font-weight: 700;
}
.saveTplHelp {
  font-size: 11px;
  color: var(--ink-500, #64748b);
  margin-top: 6px;
  line-height: 1.45;
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
  .nxModalBackdrop { padding: 20px 10px 10px; }
  .nxModalCard { max-width: 100%; }
  .apptTypePickerModal .apptTypeList { max-height: 60vh; }
  .tplMenu { width: calc(100vw - 24px); max-width: 360px; }
  .saveTplRow { flex-direction: column; align-items: stretch; gap: 0; }
  .saveTplRow > .saveTplField { margin-bottom: 14px; }
}

/* Phase 12 hotfix — extra modal helper classes used in markup */
.nxModalKicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #f97316;
  margin-bottom: 2px;
}
.nxModalTitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900, #0f172a);
}
/* When .nxModalSub appears outside the head (current markup), give it side padding */
.nxModalCard > .nxModalSub {
  padding: 0 18px 10px;
  font-size: 12px;
  color: var(--ink-500, #64748b);
  border-bottom: 1px solid var(--ink-100, #f1f5f9);
}
.apptTypeLoading,
.apptTypeEmpty,
.apptTypeError {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-500, #64748b);
}
.apptTypeError { color: #b91c1c; }
.apptTypeStatus,
.saveTplStatus {
  font-size: 12px;
  color: var(--ink-500, #64748b);
  margin-right: auto;
}
.saveTplPreviewLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-500, #64748b);
  padding: 12px 18px 6px;
}
.saveTplLbl {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-700, #334155);
  margin-bottom: 5px;
  letter-spacing: 0.2px;
}
.saveTplModal .saveTplPreview,
.saveTplModal .saveTplDetect,
.saveTplModal .saveTplField,
.saveTplModal .saveTplRow,
.saveTplModal .saveTplHelp {
  margin-left: 18px;
  margin-right: 18px;
}
.saveTplModal .saveTplDetect { margin-top: 8px; margin-bottom: 14px; }
.saveTplModal .saveTplField { margin-bottom: 12px; }
.saveTplModal .saveTplHelp { margin-bottom: 14px; }
.saveTplHelp code {
  background: var(--ink-100, #f1f5f9);
  color: #9a3412;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.apptTypeItem.current {
  background: #fff7ed;
  outline: 1px solid #fed7aa;
}
.apptTypeCurrent {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: #9a3412;
  background: #fed7aa;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

/* =========================================================================
   Phase 13 — Smart Templates v2 + multi-type picker
   Selected state + tray + chips for openApptTypePicker
   ========================================================================= */

.apptTypeItem .apptTypeCheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  margin-right: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: #fff;
  flex: 0 0 auto;
  line-height: 1;
}
.apptTypeItem.selected .apptTypeCheck {
  background: #f97316;
  border-color: #f97316;
}
.apptTypeItem.selected {
  background: #fff7ed;
  outline: 1px solid #fdba74;
}

.apptTypeSelectedTray {
  border-top: 1px solid #e2e8f0;
  background: #fafaf9;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apptTypeSelectedTray[hidden] { display: none; }
.apptTypeSelectedLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #64748b;
}
.apptTypeSelectedLabel [data-selcount] {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  background: #f97316;
  color: #fff;
  border-radius: 9px;
  text-align: center;
}
.apptTypeSelectedChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.apptTypeSelectedChips .apptTypeChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  /* override the existing .apptTypeChip ::after caret */
}
.apptTypeSelectedChips .apptTypeChip::after { display: none; }
.apptTypeSelectedChips .apptTypeChipDot {
  width: 8px; height: 8px; border-radius: 50%;
}
.apptTypeSelectedChips .apptTypeChipX {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 999px;
}
.apptTypeSelectedChips .apptTypeChipX:hover { color: #ef4444; background: #fef2f2; }
.apptTypeChipEmpty {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}
.apptTypeSelectedHint {
  font-size: 11px;
  color: #94a3b8;
}

/* Footer Save button (uses existing .nxBtnPrimary if present, else this) */
.apptTypePickerModal .nxModalFoot [data-save] {
  margin-left: auto;
  background: #f97316;
  color: #fff;
  border: 0;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.apptTypePickerModal .nxModalFoot [data-save]:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}
.apptTypePickerModal .nxModalFoot [data-save]:not(:disabled):hover {
  background: #ea580c;
}

/* =========================================================================
   Phase 13 — Beta features toggle in topbar
   ========================================================================= */
.betaToggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-left: 8px;
  background: #fafaf9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  user-select: none;
}
.betaToggleLabel {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
}
.betaToggleSwitch {
  position: relative;
  width: 32px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
}
.betaToggleSwitch.on {
  background: #f97316;
}
.betaToggleKnob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: left 0.15s ease;
}
.betaToggleSwitch.on .betaToggleKnob {
  left: 16px;
}
.betaToggleSwitch:hover {
  filter: brightness(1.05);
}

/* =============================================================================
   Phase 13 Stage 2 — Smart Templates v2 (two-pane editor + 3-col builder)
   ============================================================================= */

/* ---- Two-pane Clinical editor V2 ---- */
.treatmentEditorV2 {
  background: #fff;
  border: 1px solid #E5EAF0;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  /* .patientBody is a flex column (flex-direction: column). Without
     flex-shrink:0 the editor card collapses to 2px and its overflow:hidden
     clips every section/input. Same fix the legacy .treatmentEditor has. */
  flex-shrink: 0;
}
.v2EditorHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, #FFF7ED 0%, #FFFBF6 100%);
  border-bottom: 1px solid #FED7AA;
}
.v2EditorHeadLeft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2EditorHeadRight { display: flex; align-items: center; gap: 8px; }
.v2EditorTitle { font-weight: 700; font-size: 15px; color: #0F172A; margin-right: 4px; }
.v2Pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  border: 1px solid transparent;
}
.v2PillBeta { background: #f97316; color: #fff; }
.v2PillTpl { background: #FFEDD5; color: #9A3412; border-color: #FED7AA; }
.v2PillMerged { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }
.v2MetaStrip {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  padding: 10px 16px;
  background: #FAFBFC;
  border-bottom: 1px solid #E5EAF0;
  font-size: 12px; color: #475569;
}
.v2MetaPair b { display: inline-block; margin-right: 4px; font-weight: 600; color: #0F172A; }
.v2MetaPair { display: inline-flex; align-items: center; gap: 4px; }
.v2ApptTypeChip {
  appearance: none; background: #FFF7ED; border: 1px solid #FED7AA;
  padding: 2px 8px; border-radius: 6px; cursor: pointer; color: #0F172A;
  font: inherit;
}
.v2ApptTypeChip:hover { background: #FFEDD5; border-color: #FDBA74; }
.v2ChipEdit { opacity: .5; margin-left: 2px; }

.v2Body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}
@media (max-width: 900px) { .v2Body { grid-template-columns: 1fr; } }

.v2BodyForm { padding: 14px 16px; border-right: 1px solid #E5EAF0; }
.v2BodyPreview { padding: 14px 16px; background: #F8FAFC; }
.v2PreviewHead {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
  font-size: 12px; font-weight: 600; color: #475569;
}
.v2PreviewHint { font-weight: 400; color: #94A3B8; font-size: 11px; }
.v2PreviewBody { display: flex; flex-direction: column; gap: 14px; }
.v2PreviewSection {
  background: #fff; border: 1px solid #E5EAF0; border-radius: 8px; padding: 10px 12px;
}
.v2PreviewSection.is-overridden { border-color: #FED7AA; background: #FFFBF6; }
.v2PreviewSecHead {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.v2PreviewSecLabel { font-weight: 700; font-size: 13px; color: #0F172A; }
.v2PreviewSecBadge {
  font-size: 10px; padding: 2px 6px; border-radius: 6px;
  background: #E0F2FE; color: #075985; border: 1px solid #BAE6FD;
}
.v2PreviewSecBadge.v2BadgeOverride { background: #FFEDD5; color: #9A3412; border-color: #FED7AA; }
.v2PreviewSecText {
  margin: 0; white-space: pre-wrap; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px; color: #1E293B; line-height: 1.55;
}

.v2Empty {
  padding: 24px 12px; text-align: center; color: #94A3B8; font-size: 13px;
  border: 1px dashed #E5EAF0; border-radius: 8px;
}

.v2TplPanel { margin-bottom: 18px; }
.v2TplPanel:last-child { margin-bottom: 0; }
.v2TplPanelHead { display: flex; gap: 6px; align-items: baseline; margin-bottom: 10px; }
.v2TplPanelKicker {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #94A3B8; font-weight: 600;
}
.v2TplPanelTitle { font-weight: 700; font-size: 14px; color: #0F172A; }

.v2Section {
  background: #FAFBFC; border: 1px solid #E5EAF0; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 10px;
}
.v2SecHead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.v2SecCode {
  display: inline-block; font-size: 10px; font-weight: 700;
  background: #f97316; color: #fff; padding: 2px 6px; border-radius: 4px;
  letter-spacing: 0.04em;
}
.v2SecLabel { font-weight: 600; color: #0F172A; font-size: 13px; }

.v2SecVars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px;
  margin-bottom: 8px;
}
.v2VarField { display: flex; flex-direction: column; gap: 3px; }
.v2VarLabel { font-size: 11px; color: #64748B; font-weight: 500; }
.v2VarField input {
  border: 1px solid #CBD5E1; border-radius: 6px; padding: 6px 8px;
  font-size: 13px; background: #fff;
}
.v2VarField input:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15); }

.v2SecAddRow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.v2BtnAdd {
  appearance: none; cursor: pointer;
  background: #FFEDD5; color: #9A3412; border: 1px dashed #FDBA74;
  padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
}
.v2BtnAdd:hover { background: #FED7AA; }

.v2SecInstances { display: flex; flex-direction: column; gap: 8px; }

/* ---- Modern instance card (matches the items palette aesthetic) ----
   Soft white card with a subtle border + faint shadow, generous padding,
   an orange ordinal chip on the left of the header (echoes the palette
   "+" circle), prettified field labels, and inputs with a clean focus ring.
   Remove button reveals on hover so it doesn't distract from the content. */
.v2BlockInstance {
  background: #fff;
  border: 1px solid #E5EAF0;
  border-radius: 12px;
  padding: 14px 16px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color .15s, box-shadow .15s;
}
.v2BlockInstance:hover {
  border-color: #FDE3CC;
  box-shadow: 0 2px 6px rgba(249, 115, 22, 0.08);
}
.v2BlockHead {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.v2BlockOrdinalChip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px;
  background: #FFF7ED; color: #C2410C;
  border: 1px solid #FED7AA;
  font-size: 11.5px; font-weight: 700;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.v2BlockName {
  font-weight: 600; color: #0F172A; font-size: 13.5px;
  letter-spacing: .01em;
  flex: 1;
}
.v2BlockRemove {
  appearance: none; background: transparent; border: none; cursor: pointer;
  color: #94A3B8;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
}
.v2BlockInstance:hover .v2BlockRemove,
.v2BlockRemove:focus-visible { opacity: 1; }
.v2BlockRemove:hover { background: #FEF2F2; color: #DC2626; }
.v2BlockRemove svg { display: block; }

/* Phase 9 — engine / dentist source tag chips */
.v2SrcTag {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em;
  flex-shrink: 0;
  text-transform: uppercase;
}
.v2SrcTagEngine {
  background: #FFF7ED; color: #C2410C; border: 1px solid #FDBA74;
}
.v2SrcTagDentist {
  background: #F1F5F9; color: #334155; border: 1px solid #CBD5E1;
}
/* Phase 9 — inline override-reason capture */
.v2OverrideReason {
  margin-top: 8px;
  background: #F8FAFC;
  border: 1px dashed #CBD5E1;
  border-radius: 8px;
  padding: 8px 10px;
}
.v2OverrideReason > summary {
  cursor: pointer; font-size: 12px; color: #475569; font-weight: 600;
  list-style: none;
}
.v2OverrideReason > summary::-webkit-details-marker { display: none; }
.v2OverrideReason > summary small { color: #94A3B8; font-weight: 400; }
.v2OverrideReason > summary::before {
  content: "\25B8"; display: inline-block; margin-right: 6px;
  transition: transform .15s; color: #94A3B8;
}
.v2OverrideReason[open] > summary::before { transform: rotate(90deg); }
.v2OverrideReason textarea {
  display: block; width: 100%; box-sizing: border-box;
  margin-top: 6px;
  border: 1px solid #E2E8F0; border-radius: 6px;
  padding: 6px 8px; font-size: 13px; color: #0F172A;
  resize: vertical; min-height: 40px;
  font-family: inherit;
}
.v2OverrideReason textarea:focus {
  outline: none; border-color: #F97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15);
}

/* Phase 10 — audit footer rendered at bottom of Live Preview */
.v2AuditFooter {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px dashed #E2E8F0;
  border-radius: 8px;
  background: #F8FAFC;
  font-size: 12px;
  color: #334155;
  line-height: 1.5;
}
.v2AuditTitle {
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  margin-bottom: 8px;
}
.v2AuditRow {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 4px 0;
  border-top: 1px solid #EEF2F6;
}
.v2AuditRow:first-of-type { border-top: 0; }
.v2AuditK {
  color: #64748B;
  font-weight: 500;
}
.v2AuditV {
  color: #0F172A;
}
.v2AuditV code {
  background: #EEF2F6;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: #1E293B;
}
.v2AuditReason {
  margin-top: 4px;
  padding: 6px 8px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  color: #1E293B;
  font-style: italic;
}

/* Phase 10 — inline source tag on preview section headers. Reuses .v2SrcTag
   palette but shrinks slightly to fit alongside the ## label. */
.v2PreviewSecHead .v2SrcTag {
  font-size: 10.5px;
  padding: 1px 6px;
  height: 18px;
  line-height: 16px;
}

.v2BlockFields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 14px;
}
.v2FieldRow {
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0; /* allow flex children to shrink in narrow lanes */
}
.v2FieldRowWide { grid-column: 1 / -1; }
.v2FieldLabel {
  font-size: 11px;
  color: #64748B;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.v2FieldRow input,
.v2FieldRow select,
.v2FieldRow textarea {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13.5px;
  font-family: inherit;
  color: #0F172A;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.v2FieldRow input::placeholder,
.v2FieldRow textarea::placeholder { color: #CBD5E1; }
.v2FieldRow input:hover,
.v2FieldRow select:hover,
.v2FieldRow textarea:hover { border-color: #CBD5E1; }
.v2FieldRow input:focus,
.v2FieldRow select:focus,
.v2FieldRow textarea:focus {
  outline: none;
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
  background: #fff;
}
.v2FieldRow textarea {
  resize: vertical; min-height: 64px; line-height: 1.45;
}

/* ---- Items-driven left pane (Smart Template v2) ----
   Replaces the legacy section-grouped form (CC/HIST/TCA/TX/PX/PO badges).
   The dentist sees a palette of "+ Add <item>" buttons (one per block in
   the template) and a stack of added instances grouped by item type.
   Sections still drive the right-side preview. */
.v2ItemsPaneHead {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 2px 8px;
  border-bottom: 1px solid #F1F5F9;
  margin-bottom: 10px;
}
.v2ItemsPaneTitle { font-size: 13px; font-weight: 700; color: #0F172A; letter-spacing: .02em; }
.v2ItemsPaneSub   { font-size: 11.5px; color: #94A3B8; }

.v2ItemsPalette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.v2ItemsPaletteBtn {
  appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  background: #FFF7ED; color: #9A3412;
  border: 1px dashed #FDBA74; border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px; font-weight: 600;
  text-align: left;
  transition: background .15s, border-color .15s, transform .05s;
}
.v2ItemsPaletteBtn:hover {
  background: #FFEDD5; border-color: #f97316; border-style: solid;
}
.v2ItemsPaletteBtn:active { transform: scale(.98); }
.v2ItemsPaletteIcon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #f97316; color: #fff;
  font-size: 14px; font-weight: 700;
  flex-shrink: 0;
}
.v2ItemsPaletteLabel { flex: 1; line-height: 1.2; }

.v2ItemsEmpty {
  font-size: 12.5px; color: #94A3B8;
  background: #F8FAFC; border: 1px dashed #E2E8F0; border-radius: 8px;
  padding: 16px; text-align: center; margin-bottom: 8px;
}

.v2ItemsStack { display: flex; flex-direction: column; gap: 12px; }

.v2ItemGroup {
  background: #fff;
  border: 1px solid #E5EAF0; border-radius: 10px;
  padding: 10px 12px 12px;
}
.v2ItemGroupHead {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid #F1F5F9;
}
.v2ItemGroupName { font-size: 12.5px; font-weight: 700; color: #0F172A; flex: 1; }
.v2ItemGroupCount {
  font-size: 11px; font-weight: 600;
  color: #f97316; background: #FFF7ED;
  border: 1px solid #FFEDD5; border-radius: 999px;
  padding: 1px 8px; min-width: 22px; text-align: center;
}
.v2ItemGroupStack { display: flex; flex-direction: column; gap: 10px; }
/* Inside an item group, the surrounding group already provides the frame, so
   we drop the inner card's border, shadow, and background — but keep the
   modern internal layout (header chip, label styling, input styling). */
.v2ItemGroupStack .v2BlockInstance {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 4px 0 0;
}
.v2ItemGroupStack .v2BlockInstance:hover {
  border-color: transparent;
  box-shadow: none;
}
.v2ItemGroupStack .v2BlockInstance + .v2BlockInstance {
  border-top: 1px dashed #F1F5F9;
  padding-top: 12px;
  margin-top: 4px;
}
/* The remove button stays subtle but is always visible inside grouped cards
   so users can quickly delete one instance from a stack of many. */
.v2ItemGroupStack .v2BlockRemove { opacity: .55; }
.v2ItemGroupStack .v2BlockInstance:hover .v2BlockRemove { opacity: 1; }

.v2Btn {
  appearance: none; cursor: pointer; padding: 6px 12px;
  border-radius: 6px; font-size: 12.5px; font-weight: 600;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.v2BtnPrimary { background: #f97316; color: #fff; border-color: #f97316; }
.v2BtnPrimary:hover { background: #EA580C; border-color: #EA580C; }
.v2BtnGhost { background: #fff; color: #475569; border-color: #CBD5E1; }
.v2BtnGhost:hover { background: #F1F5F9; border-color: #94A3B8; }

.v2SaveStatus { font-size: 12px; color: #94A3B8; min-width: 80px; text-align: right; }
.v2SaveStatus.saving { color: #f97316; }
.v2SaveStatus.saved  { color: #16A34A; }
.v2SaveStatus.err    { color: #B91C1C; }
.v2SaveStatus.unsaved { color: #f97316; }

/* ---- Edit Template Builder modal ---- */
.nxTplBuilderModal .v2BuilderCard {
  max-width: 1100px; width: 96vw; max-height: 92vh;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.v2BuilderHead { padding: 12px 16px; }
.v2BuilderHeadRight { display: flex; align-items: center; gap: 12px; }
.v2BuilderStatus { font-size: 12px; color: #94A3B8; min-width: 80px; text-align: right; }
.v2BuilderStatus.saving { color: #f97316; }
.v2BuilderStatus.saved  { color: #16A34A; }
.v2BuilderStatus.err    { color: #B91C1C; }
.v2BuilderBody {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 220px 240px minmax(0, 1fr);
  overflow: hidden;
  border-top: 1px solid #E5EAF0;
}
@media (max-width: 900px) {
  .v2BuilderBody { grid-template-columns: 1fr; grid-auto-rows: auto; overflow: auto; }
}
.v2BuilderCol {
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid #E5EAF0;
}
.v2BuilderCol:last-child { border-right: none; }
.v2BuilderColHead {
  padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: #64748B; background: #F8FAFC;
  border-bottom: 1px solid #E5EAF0;
}
.v2SectionList, .v2BlockList {
  list-style: none; margin: 0; padding: 6px 6px; flex: 1; overflow-y: auto;
}
.v2SectionListItem, .v2BlockListItem {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12.5px;
}
.v2SectionListItem:hover, .v2BlockListItem:hover { background: #F1F5F9; }
.v2SectionListItem.is-active, .v2BlockListItem.is-active {
  background: #FFEDD5; border: 1px solid #FED7AA;
}
.v2SectionListItem .v2SecCode { align-self: flex-start; }
.v2SectionListItem .v2SecLabel { font-weight: 600; color: #0F172A; }
.v2BlockListItem { gap: 1px; }
.v2BlockListName { font-weight: 600; color: #0F172A; }
.v2BlockListMeta { font-size: 11px; color: #94A3B8; }
.v2BlockListEmpty { font-size: 12px; color: #94A3B8; padding: 8px 10px; }
.v2BuilderAddSec, .v2BuilderAddBlock {
  margin: 6px 8px 10px; padding: 6px 10px; font-size: 12px;
}

.v2BuilderColMain {
  padding: 14px 18px;
  overflow-y: auto;
  background: #fff;
}
.v2BuilderMainEmpty {
  padding: 60px 20px; text-align: center; color: #94A3B8; font-size: 13px;
}
.v2BuilderPaneHead {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid #F1F5F9;
}
.v2BuilderPaneHead > div:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2BuilderHint { font-size: 11.5px; color: #94A3B8; max-width: 360px; text-align: right; }
.v2BuilderHint code {
  background: #F1F5F9; padding: 0 4px; border-radius: 3px; font-size: 11px;
}
.v2BuilderInput {
  border: 1px solid #CBD5E1; border-radius: 6px; padding: 6px 10px;
  font-size: 13px; background: #fff;
}
.v2BuilderInput:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15); }
.v2BuilderInputLabel { font-weight: 600; font-size: 14px; min-width: 200px; }
.v2BuilderRepeat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: #475569;
}
.v2BuilderBodyText {
  width: 100%; min-height: 140px;
  border: 1px solid #CBD5E1; border-radius: 8px; padding: 10px 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px;
  line-height: 1.55; resize: vertical; background: #FAFBFC;
}
.v2BuilderBodyText:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15); background: #fff; }
.v2BuilderFootRow { margin-top: 6px; }

.v2BuilderSubHead {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #475569; font-weight: 700; margin: 18px 0 8px;
}

.v2FieldsTable {
  width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 8px;
}
.v2FieldsTable thead th {
  text-align: left; font-weight: 600; color: #64748B;
  padding: 6px 8px; border-bottom: 1px solid #E5EAF0; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.v2FieldsTable tbody td {
  padding: 4px 6px; border-bottom: 1px solid #F1F5F9; vertical-align: middle;
}
.v2FieldsTable .v2BuilderInput, .v2FieldsTable select {
  width: 100%; padding: 4px 6px; font-size: 12px;
  border: 1px solid #E5EAF0; border-radius: 5px; background: #fff;
}
.v2BuilderTinyBtn {
  appearance: none; background: transparent; border: none; cursor: pointer;
  color: #94A3B8; font-size: 14px; line-height: 1; padding: 4px 7px; border-radius: 4px;
}
.v2BuilderTinyBtn:hover { background: #FEE2E2; color: #B91C1C; }

.v2BuilderRulesList { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.v2RuleRow {
  background: #FAFBFC; border: 1px solid #E5EAF0; border-radius: 8px;
  padding: 8px 10px;
}
.v2RuleRowHead {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.v2RuleTarget { font-size: 12.5px; color: #0F172A; flex: 1; }
.v2RuleTarget code { background: #FEF3C7; padding: 0 4px; border-radius: 3px; font-size: 11.5px; color: #92400E; }
.v2RuleKind {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  background: #E0F2FE; color: #075985; padding: 2px 6px; border-radius: 4px; font-weight: 600;
}
.v2RuleTpl { min-height: 50px; font-size: 12px; }
.v2RuleHint { font-size: 11px; color: #94A3B8; margin-top: 4px; }
.v2RuleHint code { background: #F1F5F9; padding: 0 3px; border-radius: 3px; }

.v2BuilderRuleAddRow {
  display: grid; grid-template-columns: 1.4fr 1.4fr 0.9fr auto; gap: 6px;
  align-items: center;
}
.v2BuilderRuleAddRow select, .v2BuilderRuleAddRow input {
  border: 1px solid #CBD5E1; border-radius: 6px; padding: 6px 8px; font-size: 12.5px;
}
@media (max-width: 700px) {
  .v2BuilderRuleAddRow { grid-template-columns: 1fr 1fr; }
  .v2BuilderRuleAddRow button { grid-column: span 2; }
}

/* =============================================================================
   Phase 14 — Capability Matrix view
   ============================================================================= */
.capBody { padding: 16px 20px; }
.capEmpty { padding: 40px 20px; text-align: center; color: #94A3B8; }
.capLegend {
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center;
  padding: 10px 12px; margin-bottom: 12px;
  background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 8px;
  font-size: 12.5px; color: #475569;
}
.capLegendLabel { font-weight: 600; color: #0F172A; }
.capLegendItem { display: inline-flex; align-items: center; gap: 6px; }
.capLegendHint { color: #94A3B8; font-size: 11.5px; margin-left: auto; }
.capLegendDot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(15,23,42,0.1);
}
.capLegendDot-primary   { background: #16A34A; }
.capLegendDot-secondary { background: #EAB308; }
.capLegendDot-no        { background: #DC2626; }

.capTableWrap {
  overflow-x: auto;
  background: #fff; border: 1px solid #E5EAF0; border-radius: 8px;
}
.capTable {
  border-collapse: separate; border-spacing: 0;
  font-size: 12px;
  width: 100%;
}
.capTable thead th {
  position: sticky; top: 0; z-index: 2;
  background: #F8FAFC;
  border-bottom: 1px solid #E5EAF0;
}
.capTable .capCorner {
  position: sticky; left: 0; top: 0; z-index: 3;
  background: #F8FAFC; min-width: 160px; max-width: 200px;
  text-align: left; padding: 10px 12px;
  font-weight: 700; color: #0F172A;
  border-right: 1px solid #E5EAF0; font-size: 11.5px;
}
.capTable .capTypeHead {
  height: 110px; padding: 4px;
  border-right: 1px solid #F1F5F9;
  min-width: 88px; max-width: 88px;
  vertical-align: bottom;
}
.capTypeHeadInner {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-weight: 600; color: #0F172A;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 4px;
  white-space: nowrap;
}
.capTypeName { font-size: 11.5px; max-height: 90px; overflow: hidden; text-overflow: ellipsis; }
.capTypeMeta { font-size: 10px; color: #94A3B8; font-weight: 500; }

.capTable tbody tr:hover .capCell { background-color: #FFFBF6; }
.capTable .capPracHead {
  position: sticky; left: 0; z-index: 1;
  background: #fff; border-right: 1px solid #E5EAF0;
  padding: 8px 12px; text-align: left;
  font-weight: 600; color: #0F172A; font-size: 12.5px;
}
.capTable tbody tr:nth-child(even) .capPracHead { background: #FAFBFC; }
.capTable tbody tr:nth-child(even) .capCell { background: #FAFBFC; }
.capCell {
  width: 80px; height: 36px; padding: 0;
  border-right: 1px solid #F1F5F9; border-bottom: 1px solid #F1F5F9;
  text-align: center; cursor: pointer; transition: background-color .12s;
  user-select: none;
}
.capCell:hover { background-color: #FFEDD5 !important; }
.capCellPill {
  display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(15, 23, 42, 0.06);
  box-shadow: inset 0 0 0 2px #fff;
}
.capCell-primary   .capCellPill { background: #16A34A; }
.capCell-secondary .capCellPill { background: #EAB308; }
.capCell-no        .capCellPill { background: #DC2626; }
.capCell-no { opacity: 0.92; }

.capSaveStatus {
  margin-top: 8px; height: 18px; font-size: 12px; color: #94A3B8;
}
.capSaveStatus.saving { color: #f97316; }
.capSaveStatus.saved  { color: #16A34A; }
.capSaveStatus.err    { color: #DC2626; }

/* ============================================================================
   AVAILABILITY (BETA) VIEW
   ============================================================================ */
.betaTag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  background: #f97316; color: #fff; padding: 2px 8px; border-radius: 9999px;
  vertical-align: middle; margin-left: 8px;
}
.availBody { padding: 20px 24px 32px; overflow-y: auto; height: calc(100vh - 60px); }
.availEmpty, .availResultsEmpty { color: #6b7280; padding: 24px; text-align: center; }
.availResultsEmpty.err { color: #DC2626; }
.availLayout {
  display: grid; grid-template-columns: minmax(320px, 380px) 1fr; gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .availLayout { grid-template-columns: 1fr; }
}
.availForm {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
  display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 16px;
}
.availSection { display: flex; flex-direction: column; gap: 8px; }
.availSectionTitle { font-size: 13px; font-weight: 600; color: #0f172a; }
.availHint { font-weight: 400; color: #6b7280; font-size: 12px; margin-left: 4px; }
.availChipGroup { display: flex; flex-wrap: wrap; gap: 6px; }
.availChip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 9999px;
  font-size: 13px; cursor: pointer; user-select: none; background: #fff;
  transition: background .12s, border-color .12s;
}
.availChip:hover { background: #f9fafb; }
.availChip input { margin: 0; cursor: pointer; }
.availChip:has(input:checked) { background: #fff7ed; border-color: #f97316; color: #9a3412; }
.availInline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; }
.availInlineRow { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.availLbl { color: #6b7280; min-width: 70px; }
.availSelect, .availNum, .availDate, .availTime {
  border: 1px solid #d1d5db; border-radius: 6px; padding: 6px 8px; font-size: 13px;
  background: #fff; color: #111827; font-family: inherit;
}
.availSelect { width: 100%; }
.availSelect.availSmall { width: auto; }
.availNum { width: 90px; }
.availActions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.availBtnPrimary {
  background: #f97316; color: #fff; border: 0; padding: 8px 18px; border-radius: 8px;
  font-weight: 600; font-size: 14px; cursor: pointer; transition: background .12s;
}
.availBtnPrimary:hover { background: #ea580c; }
.availBtnGhost {
  background: #fff; color: #374151; border: 1px solid #d1d5db; padding: 8px 14px;
  border-radius: 8px; font-size: 13px; cursor: pointer;
}
.availBtnGhost:hover { background: #f9fafb; }
.availBtnTiny {
  background: transparent; border: 1px solid #d1d5db; border-radius: 4px;
  padding: 2px 8px; font-size: 11px; color: #6b7280; cursor: pointer;
}
.availBtnTiny:hover { background: #f3f4f6; color: #111827; }
.availStatus { font-size: 12px; color: #6b7280; }
.availStatus.loading { color: #f97316; }
.availStatus.ok { color: #16A34A; }
.availStatus.err { color: #DC2626; }
.availResults { min-width: 0; }
.availResultsHead {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 4px 14px; border-bottom: 1px solid #e5e7eb; margin-bottom: 14px;
}
.availResolved { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.availTag {
  background: #fff7ed; color: #9a3412; padding: 3px 10px; border-radius: 9999px;
  font-weight: 600; font-size: 12px;
}
.availMuted { color: #6b7280; font-size: 12px; }
.availCount { font-size: 13px; color: #374151; font-weight: 600; }
.availDayBlock { margin-bottom: 18px; }
.availDayHead {
  font-weight: 600; color: #f97316; padding: 6px 4px; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.availTable {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; font-size: 13px;
}
.availTable th, .availTable td {
  text-align: left; padding: 8px 12px; border-bottom: 1px solid #f1f5f9;
}
.availTable th { background: #f8fafc; font-weight: 600; color: #475569; font-size: 12px; }
.availTable tr:last-child td { border-bottom: 0; }
.availTable tbody tr:hover { background: #fffbeb; }
.availTable .availTime { font-weight: 600; color: #0f172a; }
.availTable .availMuted { color: #6b7280; }
.availBranchTag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  background: #f1f5f9; color: #334155; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
}

/* 2026-06-15 — Multi-select appointment-type picker (Availability tab).
   Replaces the native <select>. Trigger button shows the chosen types as
   chips; tapping opens the apptTypePicker modal pattern (reused styles). */
.availApptTrigger {
  width: 100%; min-height: 40px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid #d1d5db; border-radius: 8px;
  background: #fff; color: #0f172a; font-size: 14px;
  text-align: left; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.availApptTrigger:hover { border-color: #9ca3af; }
.availApptTrigger:focus,
.availApptTrigger:focus-visible {
  outline: none; border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .18);
}
.availApptChips {
  flex: 1; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.availApptPlaceholder { color: #9ca3af; font-style: italic; }
.availApptCaret { color: #6b7280; font-size: 12px; }
.availApptChipPicked {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 8px;
  border-radius: 999px;
  background: #fff7ed; border: 1px solid #fed7aa;
  color: #9a3412; font-size: 12px; font-weight: 500;
  max-width: 100%;
}
.availApptChipDot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.availApptChipName {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
.availApptChipX {
  background: transparent; border: 0; cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #9a3412; font-size: 14px; line-height: 1; padding: 0;
}
.availApptChipX:hover { background: rgba(154, 52, 18, .12); }
.availApptSummary {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #475569;
  padding: 6px 2px 0;
}
.availApptSumLbl { color: #6b7280; }
.availApptSumDur { font-weight: 600; color: #0f172a; }
.availApptClear {
  margin-left: auto;
  background: transparent; border: 0; cursor: pointer;
  color: #ea580c; font-size: 12px; font-weight: 500; padding: 2px 4px;
}
.availApptClear:hover { text-decoration: underline; }

/* The picker modal reuses .apptTypePicker* / .nxModal* classes already
   defined elsewhere in this stylesheet. We only add positioning tweaks
   for the availability variant (more vertical room on tall lists). */
.availApptPickerModal .nxModalCard {
  max-width: 560px; width: 92vw;
  max-height: 88vh;
  display: flex; flex-direction: column;
}
.availApptPickerModal .apptTypeList {
  flex: 1; min-height: 200px;
}
@media (max-width: 520px) {
  .availApptPickerModal .nxModalCard {
    max-width: 100vw; width: 100vw; height: 100vh; max-height: 100vh;
    border-radius: 0;
  }
}

/* ---- Smart Templates V2 — empty state (no template yet for this appt type) ---- */
.v2EmptyState {
  max-width: 520px;
  margin: 0 auto;
  padding: 28px 20px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.v2EmptyStateKicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94A3B8;
}
.v2EmptyStateTitle {
  font-size: 22px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.25;
  word-break: break-word;
}
.v2EmptyStateHint {
  margin: 4px 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
}
.v2EmptyStateHint b { color: #0F172A; font-weight: 600; }
.v2EmptyStateHint i { color: #9A3412; font-style: normal; font-weight: 600; }
.v2EmptyStateActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}
.v2EmptyStateClone {
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid #E5EAF0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.v2EmptyStateClone[hidden] { display: none; }
.v2EmptyStateCloneLabel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
.v2EmptyStateCloneLabel select {
  width: 100%;
  padding: 7px 9px;
  font-size: 13px;
  background: #fff;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  color: #0F172A;
}
.v2EmptyStateCloneLabel select:focus {
  outline: none;
  border-color: #f97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15);
}
.v2EmptyStateCloneActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.v2EmptyStateStatus {
  min-height: 18px;
  margin-top: 8px;
  font-size: 12px;
  color: #94A3B8;
}
.v2EmptyStateStatus.saving { color: #f97316; }
.v2EmptyStateStatus.saved  { color: #047857; }
.v2EmptyStateStatus.err    { color: #B91C1C; }

/* Muted "No template yet" pill variant */
.v2PillTplMissing {
  background: #fff;
  color: #64748B;
  border-style: dashed;
  border-color: #CBD5E1;
}

@media (max-width: 700px) {
  .v2EmptyState { padding: 22px 14px 18px; }
  .v2EmptyStateTitle { font-size: 19px; }
  .v2EmptyStateActions { flex-direction: column; align-items: stretch; }
  .v2EmptyStateActions .v2Btn { width: 100%; }
}

/* Smart Template Builder — delete affordances + editable preview */

/* Tiny × button on section/block list items (Builder popup) */
.v2SectionListItem, .v2BlockListItem { position: relative; }
.v2ListDelBtn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  opacity: 0; transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.v2SectionListItem:hover .v2ListDelBtn,
.v2BlockListItem:hover .v2ListDelBtn { opacity: 1; }

/* Editable preview textarea — looks like the old <pre> but accepts edits */
textarea.v2PreviewSecText.v2PreviewSecEditable {
  width: 100%; box-sizing: border-box;
  margin: 0; padding: 8px 10px;
  white-space: pre-wrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px; color: #1E293B; line-height: 1.55;
  background: #FFFFFF;
  border: 1px solid #E5EAF0; border-radius: 6px;
  resize: vertical; overflow: hidden; min-height: 32px;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
textarea.v2PreviewSecText.v2PreviewSecEditable:hover { border-color: #CBD5E1; }
textarea.v2PreviewSecText.v2PreviewSecEditable:focus {
  outline: none;
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
  background: #FFFBF5;
}
.v2PreviewSection.is-overridden textarea.v2PreviewSecText { background: #FFF7ED; border-color: #FED7AA; }

.v2PreviewResetBtn {
  margin-left: 6px;
  font-size: 10.5px; padding: 2px 6px; border-radius: 5px;
  background: transparent; color: #9A3412; border: 1px solid #FED7AA;
  cursor: pointer;
}
.v2PreviewResetBtn:hover { background: #FFEDD5; }

/* =============================================================================
 * Smart Templates v2 — Library + Linked Dropdowns + Catalogue editor
 * ============================================================================= */

/* Library button in builder header */
.v2BtnLibrary {
  background: #FFFBF5; color: #9A3412; border: 1px solid #FED7AA;
  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all 120ms ease;
}
.v2BtnLibrary:hover { background: #FFEDD5; border-color: #FDBA74; }

/* Library modal overlay */
.nxTplLibraryModal {
  display: none;
  position: fixed; inset: 0; z-index: 10001;
}
.nxTplLibraryModal .nxModalBackdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.nxTplLibraryModal .libCard {
  position: absolute; inset: 24px 32px; max-width: 1500px; margin: 0 auto;
  background: #fff; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.30);
}

.libHead {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; border-bottom: 1px solid #E5EAF0;
  background: linear-gradient(to bottom, #fefdfb, #fff);
}
.libKicker {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: #94a3b8; font-weight: 600;
}
.libTitle { font-size: 20px; font-weight: 700; color: #0f172a; margin-top: 2px; }
.libEditTitle {
  font-size: 20px; font-weight: 700; color: #0f172a;
  border: none; background: transparent; padding: 2px 4px; outline: none;
  width: 100%; min-width: 240px;
}
.libEditTitle:focus { background: #FFFBF5; border-radius: 6px; }
.libHeadRight { display: flex; gap: 8px; align-items: center; }
.libClose {
  background: transparent; border: none; font-size: 24px; line-height: 1;
  color: #64748b; cursor: pointer; padding: 4px 10px; border-radius: 8px;
}
.libClose:hover { background: #F1F5F9; color: #0f172a; }

.libTabs {
  display: flex; gap: 4px; padding: 8px 22px 0;
  border-bottom: 1px solid #E5EAF0; background: #fafafa;
}
.libTab {
  background: transparent; border: none; padding: 10px 16px;
  font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.libTab:hover { color: #0f172a; }
.libTab.active { color: #f97316; border-bottom-color: #f97316; }

.libBody { flex: 1; overflow: auto; padding: 18px 22px; background: #fafafa; }

.libToolbar {
  display: flex; gap: 10px; align-items: center; margin-bottom: 14px;
}
.libSearch {
  flex: 1; max-width: 320px;
  padding: 7px 11px; border: 1px solid #cbd5e1; border-radius: 8px;
  font-size: 13px;
}
.libSearch:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,0.12); }
.libBtn, .libBtnPrimary, .libBtnSecondary {
  padding: 7px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all 120ms ease;
}
.libBtn { background: #fff; color: #475569; border: 1px solid #cbd5e1; }
.libBtn:hover { background: #f8fafc; border-color: #94a3b8; }
.libBtnPrimary { background: #f97316; color: #fff; border: 1px solid #f97316; }
.libBtnPrimary:hover { background: #ea580c; }
.libBtnSecondary { background: #EEF2FF; color: #4338CA; border: 1px solid #C7D2FE; }
.libBtnSecondary:hover { background: #E0E7FF; }

.libGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 12px;
}
.libItemCard {
  background: #fff; border: 1px solid #E5EAF0; border-radius: 11px;
  padding: 14px; display: flex; flex-direction: column; gap: 9px;
  transition: all 120ms ease;
}
.libItemCard:hover { border-color: #FED7AA; box-shadow: 0 4px 16px rgba(249,115,22,0.08); }
.libItemHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.libItemTitle { font-weight: 700; color: #0f172a; font-size: 14px; }
.libItemMeta { display: flex; gap: 5px; flex-shrink: 0; }
.libScopePill {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px; font-weight: 700;
  letter-spacing: 0.02em;
}
.scopeSystem { background: #EEF2FF; color: #4338CA; }
.scopeMine   { background: #FEF3C7; color: #92400E; }
.libRepeatPill {
  font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
  background: #ECFDF5; color: #047857; font-weight: 600;
}
.libItemFields { display: flex; flex-wrap: wrap; gap: 4px; }
.libFieldChip {
  font-size: 11px; padding: 3px 7px; border-radius: 6px; background: #F8FAFC;
  color: #475569; display: inline-flex; align-items: center; gap: 4px;
}
.libFieldChip.libMore { font-style: italic; color: #94a3b8; background: transparent; }
.libBadge {
  font-size: 10px; padding: 1px 5px; border-radius: 4px; border: 1px solid;
}
.libItemActions { display: flex; gap: 6px; margin-top: 4px; }
.libEmpty {
  text-align: center; color: #64748b; padding: 36px 12px; font-size: 13px;
  background: #fff; border: 1px dashed #cbd5e1; border-radius: 10px;
  grid-column: 1 / -1;
}

/* Three-column item editor */
.libEditBody { padding: 18px 22px; background: #fafafa; flex: 1; overflow: auto; }
.threeCol { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap: 14px; min-height: 100%; }
.threeColPane {
  background: #fff; border: 1px solid #E5EAF0; border-radius: 11px;
  padding: 14px 16px;
}
.threeColPane.paneItem    { border-left: 3px solid #f97316; }
.threeColPane.paneArea    { border-left: 3px solid #7E22CE; }
.threeColPane.panePreview { border-left: 3px solid #0f766e; }
.paneHead { font-size: 13px; font-weight: 700; color: #0f172a; margin: 0 0 4px; }
.paneSub  { font-size: 11.5px; color: #64748b; margin-bottom: 12px; }
.paneDivider { border: none; border-top: 1px solid #E5EAF0; margin: 16px 0 12px; }
.paneAddBtn {
  background: #FFFBF5; color: #9A3412; border: 1px dashed #FED7AA;
  padding: 6px 12px; border-radius: 7px; font-size: 12px; cursor: pointer;
  margin-top: 8px;
}
.paneAddBtn:hover { background: #FFEDD5; }
.paneAddBtn.small { font-size: 11px; padding: 4px 9px; margin-top: 6px; }
.paneEmpty { font-size: 12px; color: #94a3b8; padding: 10px; font-style: italic; }

/* Field-edit rows */
.fieldList { display: flex; flex-direction: column; gap: 6px; }
.fieldEditRow {
  display: grid; grid-template-columns: 1.2fr 0.9fr 1.1fr 1.3fr auto;
  gap: 6px; align-items: center;
}
.fieldEditRow input, .fieldEditRow select {
  padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px;
  font-size: 12px; min-width: 0;
}
.fieldEditRow input:focus, .fieldEditRow select:focus {
  outline: none; border-color: #f97316; box-shadow: 0 0 0 2px rgba(249,115,22,0.12);
}
.fieldKey  { font-family: ui-monospace, monospace; color: #4338CA; background: #F5F3FF; }
.fieldOpts { font-size: 11.5px; }
.fieldLinkedInfo { display: flex; flex-direction: column; gap: 3px; }
.fieldLinkedInfo input { font-size: 11px; }
.fieldRmBtn {
  background: transparent; border: 1px solid transparent; color: #94a3b8;
  font-size: 16px; line-height: 1; padding: 0 7px; border-radius: 6px;
  cursor: pointer;
}
.fieldRmBtn:hover { background: #FEE2E2; color: #B91C1C; border-color: #FECACA; }

/* Sub-item rows */
.subLinkList { display: flex; flex-direction: column; gap: 5px; }
.subLinkRow {
  display: flex; gap: 8px; align-items: center; padding: 6px 9px;
  background: #F8FAFC; border-radius: 7px; font-size: 12.5px;
}
.subLinkArrow { color: #94a3b8; font-weight: 700; }
.subLinkName { flex: 1; font-weight: 600; color: #0f172a; }
.subLinkAuto { font-size: 11px; color: #64748b; display: flex; align-items: center; gap: 4px; }
.subLinkRuleCount { font-size: 10.5px; color: #7E22CE; background: #F3E8FF; padding: 2px 7px; border-radius: 999px; font-weight: 600; }

/* Rules pane */
.ruleGroup {
  background: #FAF5FF; border: 1px solid #E9D5FF; border-radius: 8px;
  padding: 9px 11px; margin-bottom: 10px;
}
.ruleGroupHead { font-size: 12.5px; margin-bottom: 6px; }
.ruleGroupSub { font-size: 11px; color: #7E22CE; margin-left: 6px; font-weight: 500; }
.ruleList { display: flex; flex-direction: column; gap: 5px; }
.ruleRow {
  display: grid; grid-template-columns: 1fr 1fr 2fr auto;
  gap: 5px; align-items: center; background: #fff; padding: 5px 7px;
  border: 1px solid #E5EAF0; border-radius: 6px;
}
.ruleRow input, .ruleRow select {
  padding: 4px 7px; border: 1px solid #E5EAF0; border-radius: 5px;
  font-size: 11.5px; min-width: 0;
}
.ruleFallbackHint { font-size: 11px; color: #7E22CE; font-style: italic; }

/* Preview pane */
.prevCard {
  background: #F0FDFA; border: 1px solid #99F6E4; border-radius: 10px;
  padding: 13px 14px;
}
.prevHead { font-weight: 700; color: #0f766e; margin-bottom: 9px; font-size: 13.5px; }
.prevFields { display: flex; flex-direction: column; gap: 7px; }
.prevField { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #115E59; }
.prevField input, .prevField select, .prevField textarea {
  padding: 5px 8px; border: 1px solid #CCFBF1; border-radius: 6px;
  background: #fff; font-size: 12px;
}
.prevToggle { display: flex; gap: 0; }
.prevToggle button {
  background: #fff; color: #115E59; border: 1px solid #CCFBF1;
  padding: 5px 11px; font-size: 11.5px; cursor: pointer;
}
.prevToggle button:first-child { border-radius: 6px 0 0 6px; }
.prevToggle button:last-child  { border-radius: 0 6px 6px 0; border-left: 0; }
.prevToggle button.active { background: #0f766e; color: #fff; border-color: #0f766e; }

/* Linked dropdown (clinical render) */
.v2LinkedField .nxV2LinkedSelect {
  border-left: 3px solid #0f766e; padding-left: 8px;
}
.v2ToggleField { display: inline-flex; gap: 0; }
.v2ToggleBtn {
  background: #fff; color: #475569; border: 1px solid #cbd5e1;
  padding: 5px 11px; font-size: 12px; cursor: pointer;
}
.v2ToggleBtn:first-child { border-radius: 6px 0 0 6px; }
.v2ToggleBtn:last-child  { border-radius: 0 6px 6px 0; border-left: 0; }
.v2ToggleBtn.active { background: #f97316; color: #fff; border-color: #f97316; }

/* Catalogue editor grid */
.catToolbar {
  display: flex; gap: 10px; align-items: center; margin-bottom: 10px;
  font-size: 12px; color: #64748b;
}
.catHint { flex: 1; }
.catGridWrap {
  background: #fff; border: 1px solid #E5EAF0; border-radius: 10px;
  overflow: auto; max-height: calc(100vh - 280px);
}
.catGrid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.catGrid th {
  position: sticky; top: 0; background: #F8FAFC; border-bottom: 1px solid #E5EAF0;
  padding: 8px 10px; text-align: left; z-index: 1;
}
.catGrid td {
  padding: 5px 6px; border-bottom: 1px solid #F1F5F9; vertical-align: middle;
}
.catGrid td input { width: 100%; padding: 4px 7px; border: 1px solid transparent; border-radius: 5px; font-size: 12.5px; }
.catGrid td input:hover { border-color: #E5EAF0; }
.catGrid td input:focus { outline: none; border-color: #f97316; background: #FFFBF5; box-shadow: 0 0 0 2px rgba(249,115,22,0.10); }
.catColName { width: 100%; padding: 4px 7px; border: 1px solid transparent; border-radius: 5px; font-weight: 700; }
.catColName:focus { outline: none; border-color: #f97316; background: #FFFBF5; }
.catKeyToggle { font-size: 10.5px; color: #94a3b8; display: block; margin-top: 3px; font-weight: 500; }
.catStar {
  background: transparent; border: none; cursor: pointer; color: #cbd5e1;
  font-size: 14px; padding: 0 4px;
}
.catStar.active { color: #f59e0b; }
.catStar:hover { color: #f59e0b; }
.catActionsCol { width: 30px; }

/* Pick child dialog */
.libPickDlg { position: fixed; inset: 0; z-index: 10010; }
.libPickBackdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.45); }
.libPickCard {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #fff; border-radius: 12px; padding: 18px 22px;
  width: 420px; max-height: 70vh; overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.30);
}
.libPickCard h3 { margin: 0 0 10px; font-size: 16px; color: #0f172a; }
.libPickSearch {
  width: 100%; box-sizing: border-box;
  padding: 7px 11px; border: 1px solid #cbd5e1; border-radius: 8px;
  margin-bottom: 10px; font-size: 13px;
}
.libPickList { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow: auto; margin-bottom: 12px; }
.libPickRow {
  text-align: left; background: #F8FAFC; border: 1px solid transparent;
  padding: 7px 11px; border-radius: 7px; cursor: pointer; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center;
}
.libPickRow:hover { background: #FFFBF5; border-color: #FED7AA; }
.libPickScope { font-size: 10.5px; color: #94a3b8; }

/* ---- Smart Template Builder V2 (redesign) ---- */
.tplBldrModal.open { display: block; }
.tplBldrModal .tplBldrBackdrop { position: fixed; inset: 0; background: rgba(15,23,42,.35); }
.tplBldrModal { padding: 24px; overflow: auto; }
.tplBldrShell{
  --orange:#f97316; --orange-50:#fff7ed; --orange-100:#ffedd5; --orange-200:#fed7aa; --orange-300:#fdba74; --orange-700:#c2410c;
  --purple:#7E22CE; --purple-50:#faf5ff; --purple-100:#f3e8ff; --purple-200:#e9d5ff; --purple-300:#d8b4fe; --purple-700:#6b21a8; --purple-900:#581c87;
  --blue:#1D4ED8; --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-700:#1e40af;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-900:#0f172a;
  --green-50:#f0fdf4; --green-100:#dcfce7; --green-700:#15803d; --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-700:#b45309; --rose-50:#fff1f2; --rose-700:#be123c; --indigo-50:#eef2ff; --indigo-100:#e0e7ff; --indigo-200:#c7d2fe; --indigo-700:#3730a3; --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-200:#99f6e4; --teal-300:#5eead4; --teal-700:#0f766e;
  position: relative; z-index: 2; max-width: 1700px; min-height: calc(100vh - 48px); margin: 0 auto; background:#fff; border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 30px rgba(15,23,42,.08); overflow:hidden; color:var(--slate-900); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif; font-size:14px; line-height:1.45;
}
.tplBldrLoading{padding:60px;text-align:center;color:var(--slate-500)} .tplBldrErr{color:#b91c1c}
.tplBldrTopbar{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--slate-200);gap:18px}.tplBldrTitleGrp .tplBldrEyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--orange);text-transform:uppercase}.tplBldrTitleGrp h1{margin:2px 0 0;font-size:20px;font-weight:700}.tplBldrTopActions{display:flex;gap:8px;align-items:center}.tplBldrBtn{height:34px;padding:0 14px;border-radius:8px;border:1px solid var(--slate-300);background:#fff;font-weight:500;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--slate-700)}.tplBldrBtn.primary{background:var(--orange);border-color:var(--orange);color:#fff}.tplBldrBtn.icon{width:34px;padding:0;justify-content:center}.tplBldrSaved{color:var(--orange);font-size:12px;display:flex;align-items:center;gap:6px;margin-right:8px;font-weight:500;min-width:80px}.tplBldrSaved::before{content:"✎"}.tplBldrSaved.saved{color:#16a34a}.tplBldrSaved.err{color:#b91c1c}.tplBldrSaved.saving{color:var(--orange)}
.tplBldrBreadcrumb{padding:10px 24px;border-bottom:1px solid var(--slate-200);background:#fff;font-size:12px;color:var(--slate-500);display:flex;align-items:center;gap:6px}.tplBldrBreadcrumb button{border:0;background:transparent;color:inherit;padding:0;cursor:pointer;font:inherit}.tplBldrBreadcrumb .cur{color:var(--slate-900);font-weight:600}.tplBldrBreadcrumb .sep{color:var(--slate-300)}
.tplBldrBody{padding:18px 24px;background:var(--slate-50);min-height:780px}.tplBldrItemsPage{max-width:1150px;margin:0 auto}.tplBldrItemsHead{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px}.tplBldrItemsHead h2{margin:4px 0;font-size:22px}.tplBldrItemsHead p{margin:0;color:var(--slate-500)}.tplBldrBlockGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.tplBldrBlockCard{background:#fff;border:1px solid var(--slate-200);border-radius:14px;padding:16px;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.04)}.tplBldrBlockCard:hover{border-color:var(--orange-200);box-shadow:0 6px 18px rgba(249,115,22,.10)}.tplBldrBlockCardTop{display:flex;gap:12px;align-items:flex-start}.tplBldrBadge{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:var(--orange-100);color:var(--orange-700);font-size:14px;flex:0 0 auto}.tplBldrBlockCard h3{margin:0;font-size:16px}.tplBldrBlockCard p{margin:3px 0 0;color:var(--slate-500);font-size:12px}.tplBldrBlockCardFoot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--slate-400);font-size:12px}.tplBldrTinyBtn{border:0;background:transparent;color:var(--slate-300);cursor:pointer;border-radius:6px;padding:4px}.tplBldrTinyBtn:hover{background:#fee2e2;color:#b91c1c}.tplBldrEmpty{padding:40px 20px;text-align:center;color:var(--slate-400);background:#fff;border:1px dashed var(--slate-300);border-radius:12px}.tplBldrEmpty.in-card{border:0;border-radius:0}
.tplBldrEditorCard{background:#fff;border:2px solid var(--orange);border-radius:14px;box-shadow:0 6px 24px rgba(249,115,22,.13);overflow:hidden;max-width:1650px;margin:0 auto}.tplBldrEditorHead{padding:16px 22px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#fff8f2,#fff);border-bottom:1px solid var(--slate-200)}.tplBldrEditorHeadL{display:flex;align-items:center;gap:12px}.tplBldrBlockName{font-weight:700;font-size:17px;border:1px solid transparent;background:transparent;border-radius:7px;padding:4px 6px}.tplBldrBlockName:focus{background:#fff;border-color:var(--orange-200);outline:none}.tplBldrPillRep{background:#fff;color:var(--orange-700);font-size:10px;padding:2px 7px;border-radius:99px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--orange-200)}.tplBldrRepToggle{display:inline-flex;align-items:center;gap:6px}.tplBldrXBtn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;cursor:pointer;color:var(--slate-400);font-size:18px;border:0;background:transparent}.tplBldrXBtn:hover{background:var(--slate-100);color:var(--slate-700)}.tplBldrEditorBody{display:grid;grid-template-columns:1fr 480px;gap:0}.tplBldrCol{padding:20px 24px;min-height:600px}.tplBldrCol.left{border-right:1px solid var(--slate-200)}.tplBldrCol.right{background:linear-gradient(180deg,#f5f9ff,#fff)}
.tplBldrSecH{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-500);margin:0 0 12px;display:flex;align-items:center;gap:6px}.tplBldrSecH .ct{font-weight:500;text-transform:none;letter-spacing:0;color:var(--slate-400);font-size:11px;margin-left:auto}.tplBldrSecH.blue{color:var(--blue-700)}.tplBldrSecH .pip{width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:2px}
.tplBldrFieldsStack{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}.tplBldrFieldRow{display:grid;grid-template-columns:18px 1fr 160px 20px;gap:8px;align-items:center;padding:10px 12px;background:#fff;border:1px solid var(--slate-200);border-radius:9px;cursor:pointer}.tplBldrFieldRow.expanded{padding:0;display:block;border-color:var(--teal-700);box-shadow:0 4px 14px rgba(15,118,110,.13);background:#fff;cursor:default}.tplBldrFieldRow.simple{border-color:var(--slate-200);box-shadow:0 4px 14px rgba(15,23,42,.06)}.tplBldrFieldRow .grip{color:var(--slate-300);font-size:12px;cursor:grab;text-align:center}.tplBldrFieldRow .name{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px}.tplBldrFieldRow .desc{font-size:11px;color:var(--slate-500);font-weight:400;margin-left:3px}.tplBldrTypePick{height:26px;padding:0 10px;font-size:11.5px;border-radius:6px;border:1px solid var(--slate-300);background:#fff;color:var(--slate-700);font-weight:500}.tplBldrTypePick.text,.tplBldrTTag.text{border-color:var(--blue-200);background:var(--blue-50);color:var(--blue-700)}.tplBldrTypePick.drop,.tplBldrTTag.drop{border-color:var(--purple-200);background:var(--purple-50);color:var(--purple-700)}.tplBldrTypePick.linked,.tplBldrTTag.linked{border-color:var(--teal-200);background:var(--teal-50);color:var(--teal-700);font-weight:600}.tplBldrTypePick.area,.tplBldrTTag.area{border-color:#86efac;background:#f0fdf4;color:#15803d}.tplBldrTypePick.toggle,.tplBldrTTag.toggle{border-color:#fde68a;background:var(--amber-50);color:var(--amber-700)}.tplBldrFieldRow .del{color:var(--slate-300);font-size:13px;text-align:center;cursor:pointer;border:0;background:transparent}.tplBldrFieldRow .del:hover{color:#ef4444}.tplBldrTypesRow{margin-top:12px;padding:10px 13px;background:#fff;border:1px solid var(--slate-200);border-radius:9px;font-size:11px;color:var(--slate-500)}.tplBldrTypesRow b{color:var(--slate-700)}.tplBldrTTag{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:600;margin:2px 3px 2px 0;border:1px solid}.tplBldrTTag em{font-weight:400;opacity:.7;font-style:normal}
.tplBldrExpHead{padding:13px 16px;background:linear-gradient(180deg,#f0fdfa,#fff);border-bottom:1px solid var(--teal-200);display:flex;align-items:center;gap:10px}.tplBldrExpHead.simple{background:linear-gradient(180deg,#f8fafc,#fff);border-bottom-color:var(--slate-200)}.tplBldrExpHead .icon{width:30px;height:30px;border-radius:8px;background:var(--teal-100);color:var(--teal-700);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}.tplBldrExpHead .name{font-weight:700;font-size:14px}.tplBldrExpHead .sub{font-size:11.5px;color:var(--slate-500)}.tplBldrExpHead .right{margin-left:auto;display:flex;gap:6px;align-items:center}.tplBldrExpHead .badge-linked{background:var(--teal-700);color:#fff;font-size:9.5px;padding:2px 7px;border-radius:99px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.tplBldrExplainer{padding:11px 16px;background:#fff;border-bottom:1px dashed var(--slate-200);font-size:11.5px;color:var(--slate-600);display:flex;gap:7px;align-items:center}.tplBldrExplainer b{color:var(--teal-700);font-weight:600}.tplBldrScheme{padding:12px 16px;background:var(--slate-50);border-bottom:1px solid var(--slate-200);display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tplBldrScheme .l{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate-500)}.tplBldrScheme .hint{margin-left:auto;font-size:11px;color:var(--slate-500)}.tplBldrScheme .arrow{color:var(--slate-300)}.tplBldrColPill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:600;border:1px solid}.tplBldrColPill.key{background:var(--teal-50);color:var(--teal-700);border-color:var(--teal-200)}.tplBldrColPill.key::before{content:"⚑";font-size:11px}.tplBldrColPill.dep{background:var(--purple-50);color:var(--purple-700);border-color:var(--purple-200)}.tplBldrColPill.dep::before{content:"▾";font-size:10px}.tplBldrColPill.add{background:#fff;color:var(--slate-500);border:1px dashed var(--slate-300);cursor:pointer}
.tplBldrLoTableWrap{padding:0 16px 14px;overflow:auto}.tplBldrLoTable{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;background:#fff;border:1px solid var(--slate-200);border-radius:10px;overflow:hidden;margin-top:12px}.tplBldrLoTable thead th{background:var(--slate-50);font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--slate-500);padding:9px 12px;text-align:left;border-bottom:1px solid var(--slate-200);position:relative}.tplBldrLoTable thead th.key{background:#ecfdf5;color:var(--teal-700);border-bottom-color:var(--teal-200)}.tplBldrLoTable thead th.dep{background:#faf5ff;color:var(--purple-700);border-bottom-color:var(--purple-200)}.tplBldrLoTable thead th .colmenu{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--slate-400);font-size:13px}.tplBldrLoTable tbody td{padding:8px 12px;border-bottom:1px solid var(--slate-100);vertical-align:middle}.tplBldrLoTable tbody tr.add td{background:var(--slate-50);color:var(--slate-400);font-style:italic;cursor:pointer}.tplBldrLoTable tbody tr.add td:hover{color:var(--orange);background:var(--orange-50)}.tplBldrCellInput{font-size:12.5px;color:var(--slate-900);font-weight:500;width:100%;border:none;background:transparent;outline:none;font-family:inherit;padding:0}.tplBldrMultiCell{display:flex;flex-wrap:wrap;gap:4px}.tplBldrTagOpt{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:5px;background:var(--purple-100);color:var(--purple-700);border:1px solid var(--purple-200);font-size:11.5px;font-weight:500;cursor:pointer}.tplBldrTagOpt.def{background:var(--purple-700);color:#fff;border-color:var(--purple-700)}.tplBldrTagOpt.def::after{content:" ★";font-size:9px}.tplBldrTagOpt.add{background:#fff;color:var(--slate-400);border:1px dashed var(--slate-300);cursor:pointer}.tplBldrLoTable td.actions{width:46px;text-align:right}.tplBldrLoTable td.actions button{border:0;background:transparent;color:var(--slate-300);cursor:pointer}.tplBldrLoTable td.actions button:hover{color:#ef4444}.tplBldrLoFooter{padding:10px 16px 14px;display:flex;justify-content:space-between;align-items:center;background:var(--slate-50);border-top:1px solid var(--slate-200);font-size:11.5px;color:var(--slate-500)}.tplBldrBtnMini{height:26px;padding:0 9px;font-size:11px;border-radius:6px;border:1px dashed var(--slate-300);background:#fff;color:var(--slate-600);cursor:pointer;display:inline-flex;align-items:center;gap:4px}.tplBldrLoFooter .right{display:flex;gap:6px}
.tplBldrSaveWhere{margin:10px 16px;padding:10px 12px;background:var(--indigo-50);border:1px solid var(--indigo-200);border-radius:9px;display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--indigo-700);flex-wrap:wrap}.tplBldrSaveWhere .pick{display:inline-flex;border:1px solid var(--indigo-200);border-radius:7px;overflow:hidden;background:#fff}.tplBldrSaveWhere .pick .opt{padding:4px 10px;font-size:11.5px;color:var(--slate-600);cursor:pointer;border:0;border-right:1px solid var(--indigo-100);background:#fff}.tplBldrSaveWhere .pick .opt:last-child{border-right:none}.tplBldrSaveWhere .pick .opt.on{background:var(--indigo-700);color:#fff;font-weight:600}.tplBldrSaveWhere .tail{margin-left:auto}
.tplBldrSimpleGrid{padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tplBldrSimpleGrid label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--slate-500);font-weight:600}.tplBldrSimpleGrid label.wide{grid-column:1 / -1}.tplBldrSimpleGrid input,.tplBldrSimpleGrid select{height:34px;border:1px solid var(--slate-300);border-radius:7px;padding:0 10px;font-size:13px;color:var(--slate-900);background:#fff}.tplBldrSimpleGrid input:focus,.tplBldrSimpleGrid select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 2px rgba(249,115,22,.15)}
.tplBldrPreviewCard{background:#fff;border:1px solid var(--slate-200);border-radius:11px;padding:16px;margin-bottom:14px}.tplBldrPreviewCard .pv-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-700);margin-bottom:12px;display:flex;align-items:center;gap:6px}.tplBldrPreviewCard .pv-title::before{content:"▶";font-size:9px}.tplBldrPvField{margin-bottom:13px}.tplBldrPvField label{font-size:11px;font-weight:600;color:var(--slate-600);display:flex;margin-bottom:4px;align-items:center;gap:5px}.tplBldrPvField select,.tplBldrPvField input{height:34px;padding:0 10px;border:1px solid var(--slate-300);border-radius:7px;font-size:13px;background:#fff;font-family:inherit;width:100%;color:var(--slate-900);font-weight:500}.tplBldrPvField select.key{border-color:var(--teal-300);background-color:#f0fdfa}.tplBldrPvField select.dep{border-color:var(--purple-200);background-color:#faf5ff}.tplBldrPvField .filter-note{font-size:10.5px;color:var(--slate-500);margin-top:4px}.tplBldrPvField .filter-note b{color:var(--purple-700);font-family:'SF Mono',monospace}.key-tag{font-size:9px;font-weight:700;padding:1px 5px;border-radius:99px;background:var(--teal-100);color:var(--teal-700);letter-spacing:.04em;text-transform:uppercase}.driven-tag{font-size:9px;font-weight:700;padding:1px 5px;border-radius:99px;background:var(--purple-100);color:var(--purple-700);letter-spacing:.04em;text-transform:uppercase}.tplBldrFlowArrow{display:flex;flex-direction:column;align-items:center;color:var(--teal-700);font-size:13px;margin:-6px 0 -6px 14px;height:14px;font-weight:700}.tplBldrPvResult{background:#f0fdfa;border:1px dashed var(--teal-200);border-radius:9px;padding:11px 13px;font-family:'SF Mono',monospace;font-size:12.5px;color:var(--slate-700);line-height:1.85;margin-top:10px}.tplBldrPvResult .lbl{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-700);margin-bottom:4px;display:block;font-family:inherit}.tplBldrPreviewCard.tips{background:linear-gradient(180deg,#fffbeb,#fff);border-color:#fde68a}.tplBldrPreviewCard .amber{color:var(--amber-700)}.tplBldrPreviewCard ul{margin:0;padding-left:18px;font-size:12px;color:var(--slate-700);line-height:1.7}.tplBldrPreviewCard .tip-note{margin-top:8px;font-size:11px;color:var(--slate-500)}
.tplBldrEditorFoot{padding:14px 22px;background:var(--slate-50);border-top:1px solid var(--slate-200);display:flex;justify-content:space-between;align-items:center}.tplBldrDanger{height:30px;padding:0 12px;font-size:12px;border-radius:7px;background:#fff;border:1px solid #fecaca;color:var(--rose-700);cursor:pointer}.tplBldrFootRight{display:flex;gap:8px}.tplBldrFootRight .tplBldrBtn{height:30px;font-size:12px}
@media (max-width: 1100px){.tplBldrEditorBody{grid-template-columns:1fr}.tplBldrCol.left{border-right:0;border-bottom:1px solid var(--slate-200)}.tplBldrCol.right{min-height:0}.tplBldrTopbar{align-items:flex-start;flex-direction:column}.tplBldrTopActions{flex-wrap:wrap}.tplBldrModal{padding:10px}.tplBldrShell{min-height:calc(100vh - 20px)}}

/* ---- Smart Template Builder V2 Phase 2: sections, binding, logic ---- */
.tplBldrHeadBtns{display:flex;gap:8px;align-items:center}.tplBldrItemsHead.compact{align-items:flex-start}.tplBldrItemsHead code{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;border-radius:5px;padding:1px 4px}
.tplBldrStructure{max-width:1200px;margin:0 auto}.tplBldrStructureGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}.tplBldrStructureCard{background:#fff;border:1px solid var(--slate-200);border-radius:16px;padding:18px;display:flex;align-items:center;gap:14px;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.04)}.tplBldrStructureCard:hover{border-color:var(--orange-200);box-shadow:0 8px 24px rgba(249,115,22,.10)}.tplBldrStructureCard h3{margin:0;font-size:18px}.tplBldrStructureCard p{margin:4px 0 0;color:var(--slate-500);font-size:13px}.tplBldrStructureCard .tplBldrBtn{margin-left:auto}.tplBldrStructureIcon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--blue-50);color:var(--blue-700);font-weight:800}.tplBldrStructureIcon.orange{background:var(--orange-100);color:var(--orange-700)}.tplBldrStructureTwoCol{display:grid;grid-template-columns:1fr 1fr;gap:18px}.tplBldrMiniList{display:flex;flex-direction:column;gap:8px}.tplBldrMiniRow{width:100%;text-align:left;background:#fff;border:1px solid var(--slate-200);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;cursor:pointer;color:var(--slate-900)}.tplBldrMiniRow:hover{border-color:var(--orange-200);background:#fff7ed}.tplBldrMiniRow span{font-size:12px;color:var(--slate-500)}
.tplBldrSectionsPage{display:grid;grid-template-columns:430px 1fr;gap:18px;max-width:1400px;margin:0 auto}.tplBldrSectionsSide,.tplBldrSectionEditor{background:#fff;border:1px solid var(--slate-200);border-radius:14px;padding:18px;box-shadow:0 1px 2px rgba(15,23,42,.04)}.tplBldrSectionList{display:flex;flex-direction:column;gap:9px}.tplBldrSecCard{border:1px solid var(--slate-200);border-radius:12px;padding:12px;display:flex;gap:10px;justify-content:space-between;cursor:pointer}.tplBldrSecCard:hover,.tplBldrSecCard.active{border-color:var(--orange-200);background:#fff7ed}.tplBldrSecCardMain{min-width:0}.tplBldrSecCode{display:inline-flex;font:700 11px/1 'SF Mono',monospace;color:var(--orange-700);background:#ffedd5;border-radius:999px;padding:4px 7px;margin-bottom:6px}.tplBldrSecCard b{display:block;font-size:14px}.tplBldrSecCard p{margin:3px 0;color:var(--slate-500);font-size:12px;line-height:1.45}.tplBldrSecCard small{color:var(--slate-400);font-size:11px}.tplBldrSecCardActions{display:flex;flex-direction:column;gap:4px}.tplBldrSecCardActions .tplBldrTinyBtn:disabled{opacity:.35;cursor:not-allowed}.tplBldrSectionEditor .v2BuilderPaneHead{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px}.tplBldrSectionEditor .v2BuilderInputLabel{font-size:18px;font-weight:700;border:1px solid var(--slate-200);border-radius:8px;padding:8px 10px}.tplBldrSectionEditor .v2BuilderBodyText{width:100%;box-sizing:border-box;border:1px solid var(--slate-300);border-radius:10px;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.tplBldrSectionEditor .v2BuilderHint{color:var(--slate-500);font-size:12px}.tplBldrSectionEditor code{background:#f8fafc;border:1px solid #e2e8f0;border-radius:5px;padding:1px 4px}
.tplBldrBindPicker{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:12px 14px;margin-bottom:16px}.tplBldrBindPicker p{margin:0;color:var(--slate-500);font-size:12px}.tplBldrBindPicker .tplBldrSecH{margin-bottom:3px;color:#c2410c}.tplBldrBindPicker select{min-width:260px;height:36px;border:1px solid #fdba74;border-radius:8px;background:#fff;color:var(--slate-900);padding:0 10px;font-weight:600}
.tplBldrLogicSection{margin-top:16px;background:#fff;border:1px solid var(--slate-200);border-radius:12px;padding:14px}.tplBldrLogicHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.tplBldrLogicHead p{margin:0 0 10px;color:var(--slate-500);font-size:12px}.tplBldrSubItems{display:flex;flex-direction:column;gap:10px}.tplBldrSubItem{border:1px solid var(--slate-200);border-radius:11px;background:#f8fafc;padding:12px}.tplBldrSubItemTop{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:end}.tplBldrSubItemTop label{font-size:11px;font-weight:700;color:var(--slate-500);display:flex;flex-direction:column;gap:4px}.tplBldrSubItemTop select,.tplBldrRule select,.tplBldrRule input{height:32px;border:1px solid var(--slate-300);border-radius:7px;background:#fff;padding:0 9px;font-size:12px}.tplBldrAutoFire{flex-direction:row!important;align-items:center!important;color:var(--orange-700)!important;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:7px 9px}.tplBldrRuleSummary{font-size:11px;color:var(--slate-500);margin:8px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.tplBldrRules{display:flex;flex-direction:column;gap:6px}.tplBldrRule{display:grid;grid-template-columns:1fr 130px 1.4fr 30px;gap:6px;align-items:center}.tplBldrRule input{width:100%;box-sizing:border-box}.tplBldrSubItemFoot{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.tplBldrSubItemFoot .tplBldrBtn{height:30px;font-size:12px}
@media (max-width:1100px){.tplBldrStructureGrid,.tplBldrStructureTwoCol,.tplBldrSectionsPage{grid-template-columns:1fr}.tplBldrBindPicker{align-items:flex-start;flex-direction:column}.tplBldrBindPicker select{width:100%;min-width:0}.tplBldrSubItemTop,.tplBldrRule{grid-template-columns:1fr}}

/* Phase 3 Smart Template Builder — Areas Structure view */
.tplBldrS3Tabs{display:inline-flex;gap:4px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;padding:3px;margin-right:12px}.tplBldrS3Tabs button{border:0;background:transparent;color:#64748b;border-radius:7px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer}.tplBldrS3Tabs button.on{background:#fff;color:#c2410c;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.tplBldrS3Root{max-width:1580px;margin:0 auto}.tplBldrS3Legend{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:12px 16px;margin-bottom:14px;color:#475569;font-size:13px;box-shadow:0 1px 2px rgba(15,23,42,.04)}.tplBldrS3Legend b{color:#ea580c}.tplBldrS3Legend b.purple{color:#7e22ce}.tplBldrS3Legend span{color:#94a3b8;margin:0 10px}.tplBldrS3Cols{display:grid;grid-template-columns:440px minmax(0,1fr);gap:16px}.tplBldrS3Left{display:grid;grid-template-rows:auto 1fr;gap:16px}.tplBldrS3Card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04);padding:16px}.tplBldrS3Card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.tplBldrS3Card>header b{font-size:16px;color:#0f172a}.tplBldrS3Card>header small{display:block;color:#64748b;font-size:12px;margin-top:2px}.tplBldrS3Icon{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;margin-right:8px;font-weight:900}.tplBldrS3Icon.orange{background:#ffedd5;color:#f97316}.tplBldrS3Icon.purple{background:#f3e8ff;color:#7e22ce}.tplBldrS3Stack{display:flex;flex-direction:column;gap:10px;max-height:360px;overflow:auto;padding-right:2px}.tplBldrS3Areas .tplBldrS3Stack{max-height:420px}.tplBldrS3ItemCard,.tplBldrS3AreaCard{border:1px solid #e2e8f0;border-radius:13px;padding:12px;background:#fff;cursor:pointer}.tplBldrS3ItemCard:hover,.tplBldrS3AreaCard:hover,.tplBldrS3AreaCard.pulse{border-color:#f97316;box-shadow:0 7px 18px rgba(249,115,22,.12)}.tplBldrS3ItemCard .top,.tplBldrS3AreaCard .top{display:flex;align-items:center;justify-content:space-between;gap:8px}.tplBldrS3ItemCard b{font-size:14px}.tplBldrS3ItemCard .top span,.tplBldrS3AreaCard .top span:not(.tplBldrS3Chip){font-size:11px;color:#64748b}.tplBldrS3ItemCard p{margin:7px 0;color:#64748b;font-size:12px}.tplBldrS3ItemCard .feeds{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.tplBldrS3ItemCard .feeds small{font-size:9px;font-weight:800;letter-spacing:.08em;color:#94a3b8}.tplBldrS3Chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;border:1px solid #e2e8f0;background:#f8fafc;color:#475569;padding:3px 8px;font-size:11.5px;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.tplBldrS3Chip.area{background:#faf5ff;border-color:#e9d5ff;color:#7e22ce}.tplBldrS3Chip.var{background:#fff7ed;border-color:#fed7aa;color:#c2410c}.tplBldrS3Chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-weight:900;padding:0}.tplBldrS3Muted{color:#94a3b8;font-size:12px}.tplBldrS3AreaCard .mode{margin-top:7px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#7e22ce}.tplBldrS3AreaCard .lines{margin-top:7px;color:#64748b;font-size:12px;line-height:1.55}.tplBldrS3AreaCard .lines b{color:#475569;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.tplBldrS3Canvas{min-height:760px}.tplBldrS3Sections{display:flex;flex-direction:column;gap:12px}.tplBldrS3SectionCard{border:1px solid #e2e8f0;border-radius:14px;padding:14px;background:#fff}.tplBldrS3SectionCard:hover{border-color:#fed7aa}.tplBldrS3SectionCard .head{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-bottom:10px}.tplBldrS3SectionCard .head small{color:#64748b;font-size:12px}.tplBldrS3SectionCard .body{min-height:48px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:11px;padding:11px 12px;line-height:2;color:#334155;white-space:pre-wrap}.tplBldrS3SectionCard .body button{cursor:pointer}.tplBldrS3SectionCard .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}.tplBldrS3Outputs{align-items:flex-start}.tplBldrS3OutChips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.tplBldrS3OutPick{display:flex;gap:8px;align-items:center}.tplBldrS3OutPick select{height:34px;border:1px solid #fdba74;border-radius:8px;padding:0 10px;background:#fff}.tplBldrS3Soon,.tplBldrS3Settings,.tplBldrS3AreaEditor{max-width:980px;margin:0 auto}.tplBldrS3Soon h2,.tplBldrS3Settings h2{margin:0 0 8px}.tplBldrS3Settings label,.tplBldrS3AreaForm label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:#64748b;margin-bottom:12px}.tplBldrS3Settings input,.tplBldrS3AreaForm input,.tplBldrS3AreaForm select{height:36px;border:1px solid #cbd5e1;border-radius:8px;padding:0 10px;color:#0f172a;background:#fff}.tplBldrS3Settings label.row{flex-direction:row;align-items:center}.tplBldrS3AreaForm{display:grid;grid-template-columns:1fr 1fr 180px 180px;gap:12px;margin-bottom:14px}.tplBldrS3Lines{display:flex;flex-direction:column;gap:10px}.tplBldrS3LineRow{border:1px solid #e2e8f0;background:#f8fafc;border-radius:12px;padding:12px;display:grid;grid-template-columns:110px 1fr;gap:10px}.tplBldrS3LineRow input,.tplBldrS3LineRow textarea,.tplBldrS3LineRow select{border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px;background:#fff;color:#0f172a;font-family:inherit}.tplBldrS3LineRow textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.tplBldrS3LineRow .cond{grid-column:1 / -1;display:grid;grid-template-columns:1fr 130px 1fr auto;gap:8px}.tplBldrS3AreaEditor .tplBldrFootRight{margin-top:14px}.tplBldrS3Root code{background:#f8fafc;border:1px solid #e2e8f0;border-radius:5px;padding:1px 4px}
@media(max-width:1100px){.tplBldrS3Cols,.tplBldrS3AreaForm,.tplBldrS3LineRow,.tplBldrS3LineRow .cond{grid-template-columns:1fr}.tplBldrS3Canvas{min-height:0}.tplBldrS3Stack{max-height:none}.tplBldrS3SectionCard .head{grid-template-columns:1fr}.tplBldrS3Legend span{display:none}}

.tplBldrS3InsertMenu{z-index:1000010;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 14px 38px rgba(15,23,42,.18);width:280px;padding:10px;display:flex;flex-direction:column;gap:8px}
.tplBldrS3InsertMenu .hd{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#64748b;padding:0 4px}
.tplBldrS3InsertMenu .flt{height:30px;border:1px solid #cbd5e1;border-radius:8px;padding:0 8px;font-size:13px;outline:none}
.tplBldrS3InsertMenu .flt:focus{border-color:#f97316}
.tplBldrS3InsertMenu .list{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto}
.tplBldrS3InsertMenu .row{border:0;background:transparent;text-align:left;cursor:pointer;border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:1px;font-family:inherit}
.tplBldrS3InsertMenu .row:hover{background:#fff7ed}
.tplBldrS3InsertMenu .row .lab{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:#0f172a;font-weight:700}
.tplBldrS3InsertMenu .row .sub{color:#64748b;font-size:11.5px}
.tplBldrS3InsertMenu .row.action .lab{color:#f97316;font-family:inherit;font-weight:700}
.tplBldrS3InsertMenu .row.empty{color:#94a3b8;font-size:13px;cursor:default}
.tplBldrS3InsertMenu .row.empty:hover{background:transparent}

/* Phase 3.1 Smart Template Builder — modern create sheet (replaces native prompt()) */
.tplBldrSheetScrim{position:fixed;inset:0;z-index:1000050;background:rgba(15,23,42,.42);backdrop-filter:saturate(140%) blur(2px);display:flex;align-items:center;justify-content:center;padding:24px;animation:tplBldrSheetIn .14s ease-out}
@keyframes tplBldrSheetIn{from{opacity:0}to{opacity:1}}
.tplBldrSheet{background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.28),0 2px 6px rgba(15,23,42,.08);width:520px;max-width:100%;max-height:92vh;overflow:auto;border:1px solid rgba(15,23,42,.05);animation:tplBldrSheetPop .18s ease-out}
@keyframes tplBldrSheetPop{from{transform:translateY(6px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.tplBldrSheet header{padding:22px 24px 14px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f1f5f9}
.tplBldrSheetBubble{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#f97316,#fb923c);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;box-shadow:0 6px 16px rgba(249,115,22,.32);flex-shrink:0}
.tplBldrSheetTitles{flex:1;min-width:0}
.tplBldrSheetTitles h3{font-size:17px;font-weight:700;letter-spacing:-.01em;color:#0f172a;margin:0}
.tplBldrSheetTitles .sub{font-size:12.5px;color:#64748b;margin-top:2px}
.tplBldrSheetClose{margin-left:auto;width:30px;height:30px;border-radius:8px;background:#f1f5f9;border:none;color:#64748b;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tplBldrSheetClose:hover{background:#e2e8f0;color:#0f172a}
.tplBldrSheetBody{padding:18px 24px 4px}
.tplBldrSheetBody label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b;display:block;margin-bottom:7px}
.tplBldrSheetInput{width:100%;height:46px;border:1.5px solid #e2e8f0;border-radius:12px;padding:0 14px;font-size:15px;font-weight:500;color:#0f172a;outline:none;transition:border-color .15s,box-shadow .15s;font-family:inherit;box-sizing:border-box;background:#fff}
.tplBldrSheetInput:focus{border-color:#f97316;box-shadow:0 0 0 4px rgba(249,115,22,.14)}
.tplBldrSheetHint{font-size:11.5px;color:#94a3b8;margin-top:8px;min-height:14px}
.tplBldrSheetPresetHd{padding:18px 24px 8px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;display:flex;align-items:center;gap:8px}
.tplBldrSheetPresetHd::before,.tplBldrSheetPresetHd::after{content:"";flex:1;height:1px;background:#f1f5f9}
.tplBldrSheetPresets{padding:0 18px 8px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tplBldrSheetPreset{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;border:1px solid transparent;background:transparent;cursor:pointer;text-align:left;transition:background .12s,border-color .12s;font-family:inherit}
.tplBldrSheetPreset:hover{background:#fff7ed;border-color:#fed7aa}
.tplBldrSheetPreset .pIco{width:28px;height:28px;border-radius:8px;background:#fff7ed;color:#f97316;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border:1px solid #fed7aa;flex-shrink:0}
.tplBldrSheetPreset .pTxt{flex:1;min-width:0}
.tplBldrSheetPreset .pLbl{font-size:13.5px;font-weight:600;color:#0f172a;line-height:1.2}
.tplBldrSheetPreset .pSub{font-size:11px;color:#94a3b8;margin-top:1px}
.tplBldrSheet footer{padding:14px 24px 18px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f1f5f9;background:#fafafa;border-radius:0 0 18px 18px}
.tplBldrSheetBtn{height:38px;padding:0 16px;border-radius:10px;border:none;font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.tplBldrSheetBtn.ghost{background:#fff;border:1px solid #e2e8f0;color:#475569}
.tplBldrSheetBtn.ghost:hover{background:#f8fafc}
.tplBldrSheetBtn.primary{background:#f97316;color:#fff;box-shadow:0 4px 12px rgba(249,115,22,.32)}
.tplBldrSheetBtn.primary:hover{background:#ea6b13}
.tplBldrSheetBtn.primary:disabled{background:#cbd5e1;color:#fff;box-shadow:none;cursor:not-allowed}
.tplBldrSheetBtn kbd{display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:4px;background:rgba(15,23,42,.08);color:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;border:1px solid rgba(15,23,42,.06);border-bottom-width:2px;opacity:.85}
.tplBldrSheetBtn.primary kbd{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.18);color:#fff}
@media(max-width:560px){.tplBldrSheetPresets{grid-template-columns:1fr}}

/* Phase 3.2 — Inline field editor inside Items panel */
.tplBldrS3ItemCard.expanded{cursor:default;background:#fffaf3;border-color:#fdba74;box-shadow:0 10px 30px rgba(249,115,22,.14);padding:0;overflow:hidden}
.tplBldrS3ItemCard.expanded > div:first-child{padding:12px 14px 10px;border-bottom:1px solid #fed7aa}
.tplBldrS3ItemBody{padding:14px;display:flex;flex-direction:column;gap:14px;background:#fff}
.tplBldrS3ItemName{display:flex;flex-direction:column;gap:6px}
.tplBldrS3ItemName label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
.tplBldrS3ItemName input{height:38px;border:1.5px solid #e2e8f0;border-radius:10px;padding:0 12px;font-size:14px;font-weight:600;color:#0f172a;outline:none;font-family:inherit;background:#fff}
.tplBldrS3ItemName input:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.14)}
.tplBldrS3FieldList{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0}
.tplBldrS3FieldChip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid #e2e8f0;background:#fff;color:#0f172a;padding:7px 11px 7px 10px;border-radius:10px;cursor:pointer;font-family:inherit;text-align:left;min-width:0;transition:border-color .12s,box-shadow .12s}
.tplBldrS3FieldChip:hover{border-color:#fdba74}
.tplBldrS3FieldChip.on{border-color:#f97316;background:#fff7ed;box-shadow:0 4px 10px rgba(249,115,22,.16)}
.tplBldrS3FieldChip .ico{font-size:11px;color:#f97316;font-weight:800;margin-bottom:0}
.tplBldrS3FieldChip .lab{font-size:13px;font-weight:700;line-height:1.1}
.tplBldrS3FieldChip .sub{font-size:10.5px;color:#94a3b8;font-weight:500;margin-top:1px}
.tplBldrS3FieldChip.on .sub{color:#c2410c}
.tplBldrS3AddField{border:1.5px dashed #fdba74;background:#fff;color:#f97316;padding:7px 12px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:700;font-family:inherit;align-self:center}
.tplBldrS3AddField:hover{background:#fff7ed;border-style:solid}
.tplBldrS3FieldEditor{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px}
.tplBldrS3FE{display:flex;flex-direction:column;gap:10px}
.tplBldrS3FE label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#64748b}
.tplBldrS3FE label small{text-transform:none;letter-spacing:0;font-weight:400;color:#94a3b8}
.tplBldrS3FE .row.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tplBldrS3FE input.tplBldrInput,.tplBldrS3FE textarea.tplBldrInput,.tplBldrS3FE select.tplBldrInput{height:34px;border:1px solid #cbd5e1;border-radius:8px;padding:0 10px;font-size:13px;color:#0f172a;background:#fff;font-family:inherit;outline:none;transition:border-color .12s,box-shadow .12s;text-transform:none;letter-spacing:0;font-weight:500}
.tplBldrS3FE textarea.tplBldrInput{padding:8px 10px;height:auto;line-height:1.45;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;resize:vertical}
.tplBldrS3FE input.tplBldrInput:focus,.tplBldrS3FE textarea.tplBldrInput:focus,.tplBldrS3FE select.tplBldrInput:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.14)}
.tplBldrS3TypeGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tplBldrS3TypeBtn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 6px;background:#fff;border:1.5px solid #e2e8f0;border-radius:9px;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:600;color:#475569;transition:border-color .12s,background .12s,color .12s}
.tplBldrS3TypeBtn .ico{font-size:18px;line-height:1}
.tplBldrS3TypeBtn:hover{border-color:#fdba74;color:#0f172a}
.tplBldrS3TypeBtn.on{border-color:#f97316;background:#fff7ed;color:#c2410c;box-shadow:0 3px 8px rgba(249,115,22,.18)}
.tplBldrS3Extra{display:flex;flex-direction:column;gap:6px}
.tplBldrS3Extra.two{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.tplBldrS3Extra.info{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:8px;padding:8px 10px;font-size:12px}
.tplBldrS3FEFoot{display:flex;justify-content:space-between;align-items:center;padding-top:6px;border-top:1px dashed #e2e8f0;margin-top:4px}
.tplBldrS3SaveHint{font-size:11.5px;color:#16a34a;font-weight:600}
.tplBldrBtn.danger{color:#b91c1c;border-color:#fecaca;background:#fff}
.tplBldrBtn.danger:hover{background:#fef2f2;border-color:#fca5a5}
.tplBldrS3ItemFoot{display:flex;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px dashed #e2e8f0}
@media(max-width:1100px){.tplBldrS3TypeGrid{grid-template-columns:repeat(2,1fr)}.tplBldrS3Extra.two{grid-template-columns:1fr}.tplBldrS3FE .row.two{grid-template-columns:1fr}}

/* Phase 3.3 — Conditional outputs subsection + unified picker */
.tplBldrS3CondSec{border:1px dashed #c4b5fd;background:#faf5ff;border-radius:12px;overflow:hidden}
.tplBldrS3CondHd{padding:10px 14px;background:linear-gradient(180deg,#f5f0ff,#faf5ff);border-bottom:1px dashed #ddd6fe;display:flex;align-items:baseline;gap:10px}
.tplBldrS3CondHd b{font-size:13px;color:#5b21b6;letter-spacing:.02em}
.tplBldrS3CondHd small{font-size:11.5px;color:#7c6892;font-weight:500}
.tplBldrS3CondHd code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;background:#ede9fe;color:#5b21b6;padding:1px 5px;border-radius:4px}
.tplBldrS3CondList{display:flex;flex-direction:column;gap:10px;padding:10px 12px;background:#fff}
.tplBldrS3CondList:empty{display:none}
.tplBldrS3CondFoot{padding:8px 12px;border-top:1px dashed #ddd6fe;background:#faf5ff;display:flex;justify-content:flex-end}
.tplBldrS3CondRow{border:1px solid #e9d5ff;border-radius:10px;background:#fff;overflow:hidden}
.tplBldrS3CondRow > header{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#faf5ff;border-bottom:1px dashed #ede9fe;flex-wrap:wrap}
.tplBldrS3CondRow > header .tplBldrS3Chip.area{background:#ede9fe;color:#5b21b6;border-color:#c4b5fd;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;border:1px solid #c4b5fd}
.tplBldrInput.slim{height:30px !important;font-size:12.5px !important;padding:0 8px !important;border:1px solid #cbd5e1;border-radius:7px}
.tplBldrInput.slim:focus{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(167,139,250,.18);outline:none}
.tplBldrS3CondMode,.tplBldrS3CondSep{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#7c6892}
.tplBldrS3CondMode select,.tplBldrS3CondSep input{height:28px;border:1px solid #cbd5e1;border-radius:6px;padding:0 8px;font-size:12px;background:#fff;font-family:inherit;text-transform:none;letter-spacing:0;color:#0f172a;font-weight:500}
.tplBldrS3CondBranches{display:flex;flex-direction:column;gap:8px;padding:10px}
.tplBldrS3CondBranch{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:8px;border:1px solid #ede9fe;border-radius:8px;background:#fafaff;align-items:start}
.tplBldrS3CondNum{width:22px;height:22px;border-radius:11px;background:#5b21b6;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.tplBldrS3CondIf,.tplBldrS3CondThen{display:flex;flex-direction:column;gap:6px}
.tplBldrS3CondIf{flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center}
.tplBldrS3CondLabel{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#7c6892;align-self:center}
.tplBldrS3CondIf select,.tplBldrS3CondIf input{height:28px;border:1px solid #cbd5e1;border-radius:6px;padding:0 8px;font-size:12px;background:#fff;font-family:inherit;color:#0f172a;font-weight:500}
.tplBldrS3CondIf input{flex:1;min-width:120px}
.tplBldrS3CondThen textarea{width:100%;border:1px solid #cbd5e1;border-radius:6px;padding:6px 8px;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#0f172a;background:#fff;resize:vertical;outline:none}
.tplBldrS3CondThen textarea:focus{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(167,139,250,.18)}
.tplBldrS3CondIf select:focus,.tplBldrS3CondIf input:focus{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(167,139,250,.18);outline:none}
.tplBldrS3CondActs{display:flex;flex-direction:column;gap:3px}
.tplBldrS3CondRowFoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px 10px;border-top:1px dashed #ede9fe;background:#fafaff}
.tplBldrS3CondRowFoot .tplBldrS3Muted{font-size:11.5px}

/* Unified insert-placeholder menu */
.tplBldrS3InsertMenu .groupHd{font-size:10.5px;letter-spacing:.08em;font-weight:800;text-transform:uppercase;color:#94a3b8;padding:8px 12px 4px;border-top:1px solid #f1f5f9;background:#fafafa}
.tplBldrS3InsertMenu .groupHd:first-child{border-top:0}
@media(max-width:900px){.tplBldrS3CondBranch{grid-template-columns:auto 1fr;grid-template-rows:auto auto}.tplBldrS3CondActs{grid-row:1/3;grid-column:3/4;flex-direction:column}}

/* Phase 3.3.1 — 3 equal columns layout */
.tplBldrS3Cols.tplBldrS3Cols3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px;align-items:stretch}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Card.tplBldrS3Col{display:flex;flex-direction:column;min-height:760px;max-height:calc(100vh - 220px);padding:14px}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Col > header{flex:0 0 auto;margin-bottom:10px;gap:8px;flex-wrap:wrap}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Col > header b{font-size:15px}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3ColBody{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;padding-right:4px}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3ColBody{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3ColBody::-webkit-scrollbar{width:8px}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3ColBody::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
/* Expanded item card: keep cursor default on the body, allow its content to flow */
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3ItemCard.expanded{cursor:default}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3ItemCard.expanded > [data-item-toggle]{cursor:pointer}
/* Slimmer paddings inside narrow columns */
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3FieldEditor{padding:10px 0 0}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3CondHd{padding:8px 10px}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3CondList{padding:8px 8px}
/* Override the old 1100px collapse: only collapse below 980px now */
@media(min-width:1100px) and (max-width:1280px){.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Card.tplBldrS3Col{padding:12px}}
@media(max-width:980px){.tplBldrS3Cols.tplBldrS3Cols3{grid-template-columns:1fr}.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Card.tplBldrS3Col{max-height:none;min-height:0}}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3TypeGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1500px){.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3TypeGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Phase 3.3.2 — Items column overflow fix + inline section editor */

/* Make the 3-column area itself the scroll boundary, so EACH column body scrolls independently */
.tplBldrS3Cols.tplBldrS3Cols3{align-items:start}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Card.tplBldrS3Col{
  min-height:0 !important;
  max-height:calc(100vh - 200px) !important;
  height:calc(100vh - 200px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3ColBody{
  flex:1 1 auto;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
}
/* In case the modal/page constrains height, fall back to a generous absolute max */
@media(min-height:800px){.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Card.tplBldrS3Col{height:680px}}
@media(min-height:1000px){.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Card.tplBldrS3Col{height:840px}}

/* Inline section editor styles (replaces navigate-on-click cards) */
.tplBldrS3SectionCard.editable{display:flex;flex-direction:column;gap:8px;padding:10px 12px;cursor:default}
.tplBldrS3SectionCard.editable .head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:0;padding-bottom:6px;border-bottom:1px dashed #e2e8f0}
.tplBldrSecCodeInput{
  width:70px;border:1.5px solid #f97316;background:#fff7ed;color:#c2410c;
  border-radius:6px;padding:3px 6px;font-size:11px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  outline:none;
}
.tplBldrSecCodeInput:focus{border-color:#ea580c;box-shadow:0 0 0 3px rgba(249,115,22,.18)}
.tplBldrSecLabelInput{
  flex:1 1 140px;min-width:0;
  border:1.5px solid transparent;background:transparent;
  font-size:15px;font-weight:700;color:#0f172a;
  padding:4px 6px;border-radius:6px;outline:none;
  font-family:inherit;
}
.tplBldrSecLabelInput:hover{border-color:#fed7aa;background:#fff7ed}
.tplBldrSecLabelInput:focus{border-color:#f97316;background:#fff;box-shadow:0 0 0 3px rgba(249,115,22,.18)}
.tplBldrS3SectionCard.editable .head small{flex:0 0 auto;color:#64748b;font-size:11px;font-weight:500}
.tplBldrSecActs{display:inline-flex;gap:4px;margin-left:auto}
.tplBldrSecBodyInput{
  width:100%;border:1.5px solid #cbd5e1;border-radius:8px;
  padding:8px 10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;line-height:1.55;color:#0f172a;background:#fff;
  resize:vertical;outline:none;min-height:60px;
}
.tplBldrSecBodyInput:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.18)}
.tplBldrS3SectionCard.editable .body.preview{
  background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px;
  padding:8px 10px;font-size:12px;color:#475569;line-height:1.75;
  min-height:auto;white-space:pre-wrap;
}
.tplBldrS3SectionCard.editable .body.preview:empty{display:none}
.tplBldrS3SectionCard.editable .foot{margin-top:0;padding-top:4px}
.tplBldrS3SectionCard.editable [data-section-save-hint]{font-size:11px;font-weight:600;flex:0 0 auto}

/* Phase 3.3.3 — Force columns to fit viewport so internal scrollbar is reachable */
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Card.tplBldrS3Col{
  min-height: 0 !important;
  max-height: calc(100vh - 160px) !important;
  height: calc(100vh - 160px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: sticky;
  top: 12px;
}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Col > header{
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 2;
  flex: 0 0 auto;
}
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3ColBody{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: scroll !important;   /* always show track so the user can see it */
  overflow-x: hidden !important;
  padding-right: 4px;
}
/* Smaller hard-coded heights when window is short */
@media(max-height: 760px){
  .tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Card.tplBldrS3Col{
    height: calc(100vh - 140px) !important;
  }
}
/* On taller screens, allow more breathing room */
@media(min-height: 1000px){
  .tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Card.tplBldrS3Col{
    height: 820px !important;
  }
}

/* Phase 3.3.4 — column height must fit in viewport BELOW the page header (around y=280) */
.tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Card.tplBldrS3Col{
  height: calc(100vh - 300px) !important;
  max-height: calc(100vh - 300px) !important;
  min-height: 360px !important;
}
@media(min-height: 900px){
  .tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Card.tplBldrS3Col{
    height: calc(100vh - 280px) !important;
    max-height: calc(100vh - 280px) !important;
  }
}
@media(min-height: 1100px){
  .tplBldrS3Cols.tplBldrS3Cols3 .tplBldrS3Card.tplBldrS3Col{
    height: 820px !important;
    max-height: 820px !important;
  }
}

/* Phase 3.3.5 — expanded item card must NOT clip its own body (it was overflow:hidden at 382px) */
.tplBldrS3ItemCard.expanded{
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
.tplBldrS3ItemCard.expanded .tplBldrS3ItemBody{
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* ============================================================
 * Smart Template Builder v2 — extended field types (CC v3)
 * Added 2026-05-19 to support: chips_single, chips_multi,
 * pills_redflag, number, required flag, per-field show_when.
 * ============================================================ */

/* Required asterisk marker */
.v2ReqMark, .prevReqMark { color: #DC2626; margin-left: 4px; font-weight: 600; }

/* Field unit (e.g. "/10") */
.v2FieldUnit, .v2FieldHint { color: #64748B; font-style: normal; font-size: 12px; margin-left: 6px; font-weight: 400; }

/* Chips (single + multi) — runtime */
.v2ChipsField {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 0;
  width: 100%;
}
.v2Chip {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #1E293B;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  line-height: 1.2;
}
.v2Chip:hover { border-color: #f97316; background: #FFF7ED; }
.v2Chip.active {
  background: #f97316;
  border-color: #f97316;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(249, 115, 22, 0.3);
}
.v2Chip.active:hover { background: #EA580C; border-color: #EA580C; }
.v2ChipsEmpty { color: #94A3B8; font-size: 12px; font-style: italic; }

/* Red-flag pills (banner-tier) */
.v2Pills .v2Chip { font-weight: 500; }
.v2ChipFlag {
  border-color: #F59E0B;
  background: #FFFBEB;
  color: #92400E;
}
.v2ChipFlag:hover { border-color: #D97706; background: #FEF3C7; }
.v2ChipFlag.active {
  background: #F59E0B;
  border-color: #D97706;
  color: #FFFFFF;
}
/* Red-flag pills (blocker-tier — modal-confirmed) */
.v2ChipBlocker {
  border-color: #DC2626;
  background: #FEF2F2;
  color: #991B1B;
}
.v2ChipBlocker:hover { border-color: #B91C1C; background: #FEE2E2; }
.v2ChipBlocker.active {
  background: #DC2626;
  border-color: #B91C1C;
  color: #FFFFFF;
  box-shadow: 0 0 0 2px #FEE2E2;
}

/* Red-flag modal */
.v2RedFlagModal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.v2RedFlagBackdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.v2RedFlagCard {
  position: relative;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 28px;
  max-width: 440px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  border-top: 4px solid #DC2626;
}
.v2RedFlagIcon { font-size: 36px; color: #DC2626; text-align: center; margin-bottom: 4px; }
.v2RedFlagCard h3 { color: #991B1B; margin: 4px 0 8px; font-size: 18px; }
.v2RedFlagCard p { color: #475569; font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.v2RedFlagBtns { display: flex; gap: 10px; justify-content: flex-end; }
.v2RedFlagCancel {
  background: #FFFFFF; border: 1px solid #CBD5E1;
  padding: 8px 16px; border-radius: 8px; font-size: 14px; cursor: pointer; color: #475569;
}
.v2RedFlagCancel:hover { background: #F1F5F9; }
.v2RedFlagOk {
  background: #DC2626; border: 1px solid #B91C1C; color: #FFFFFF;
  padding: 8px 16px; border-radius: 8px; font-size: 14px; cursor: pointer; font-weight: 600;
}
.v2RedFlagOk:hover { background: #B91C1C; }

/* Red-flag banner (banner-tier soft toast) */
.v2RedFlagBanner {
  background: #FFFBEB;
  border: 1px solid #F59E0B;
  border-left: 3px solid #D97706;
  color: #92400E;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.v2RedFlagBanner.show { opacity: 1; transform: translateY(0); }

/* Builder editor — Required toggle */
.fieldReqToggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #64748B;
  padding: 2px 6px;
  border-radius: 6px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  cursor: pointer;
}
.fieldReqToggle input { margin: 0; }
.fieldEditRow.fieldRequired .fieldReqToggle {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #991B1B;
  font-weight: 600;
}

/* Builder editor — Show-when conditional row */
.fieldShowWhenAdd {
  font-size: 11px;
  color: #64748B;
  background: transparent;
  border: 1px dashed #CBD5E1;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 4px;
}
.fieldShowWhenAdd:hover { color: #f97316; border-color: #f97316; background: #FFF7ED; }
.fieldShowWhenRow {
  display: flex; align-items: center; gap: 6px;
  flex-basis: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  font-size: 12px;
}
.fieldShowWhenLabel { color: #64748B; font-weight: 500; }
.fieldShowWhenRow select, .fieldShowWhenRow input { font-size: 12px; padding: 2px 6px; height: 26px; }
.fieldShowWhenHint { color: #94A3B8; font-style: italic; }
.fieldShowWhenRm {
  background: transparent; border: none; color: #94A3B8;
  font-size: 14px; cursor: pointer; padding: 0 4px;
}
.fieldShowWhenRm:hover { color: #DC2626; }

/* Builder editor — Number field inline inputs */
.fieldNumInfo { display: flex; gap: 4px; }
.fieldNumIn {
  width: 70px !important;
  font-size: 12px;
}

/* Builder editor — options hint banner */
.fieldOptsHint {
  margin-top: 8px; padding: 8px 12px;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 6px;
  font-size: 12px;
  color: #78350F;
}
.fieldOptsHint code {
  background: #FEF9C3; padding: 1px 4px; border-radius: 3px; font-family: ui-monospace, monospace;
}

/* Builder preview — new types */
.prevFieldWide { grid-column: 1 / -1; }
.prevChips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.prevChip {
  background: #FFFFFF; border: 1px solid #CBD5E1; color: #475569;
  border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: default;
  font-family: inherit;
}
.prevChipFlag { background: #FFFBEB; border-color: #F59E0B; color: #92400E; }
.prevChipBlocker { background: #FEF2F2; border-color: #DC2626; color: #991B1B; }
.prevEmptyOpts { color: #94A3B8; font-size: 11px; font-style: italic; }
.prevCondTag {
  display: inline-block; margin-left: 6px;
  font-size: 10px; padding: 1px 5px; border-radius: 4px;
  background: #DBEAFE; color: #1D4ED8; font-weight: 500;
  font-style: normal;
}

/* ============================================================
 * Smart Template Builder v2 — polished field row layout (CC v3)
 * Override prior grid to give every control its own slot, with
 * Show-when condition pinned as a full-width secondary row.
 * ============================================================ */

.fieldEditRow {
  display: grid !important;
  grid-template-columns: 1.1fr 0.85fr 1fr 1.2fr auto auto;
  grid-template-areas:
    "label key type detail req del"
    "show  show show show show show";
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fieldEditRow:hover {
  border-color: #CBD5E1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.fieldEditRow.fieldRequired {
  border-left: 3px solid #DC2626;
  padding-left: 9px;
}
/* Slot assignments */
.fieldEditRow > input[data-field-prop="label"] { grid-area: label; }
.fieldEditRow > input[data-field-prop="key"]   { grid-area: key; }
.fieldEditRow > select[data-field-prop="type"] { grid-area: type; }
.fieldEditRow > input.fieldOpts,
.fieldEditRow > .fieldLinkedInfo,
.fieldEditRow > .fieldNumInfo                   { grid-area: detail; min-width: 0; }
.fieldEditRow > .fieldReqToggle                 { grid-area: req; justify-self: end; }
.fieldEditRow > .fieldRmBtn                     { grid-area: del; justify-self: end; }
.fieldEditRow > .fieldShowWhenAdd,
.fieldEditRow > .fieldShowWhenRow               { grid-area: show; }

.fieldLinkedInfo, .fieldNumInfo {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.fieldLinkedInfo input, .fieldNumIn {
  padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px;
  font-size: 12px; min-width: 0; flex: 1;
}
.fieldNumIn { max-width: 90px; }

/* + Show when… inline button polish */
.fieldShowWhenAdd {
  justify-self: start;
  margin-left: 0;
}

/* Responsive: stack on narrow screens */
@media (max-width: 800px) {
  .fieldEditRow {
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
      "label label del"
      "key   type  req"
      "detail detail detail"
      "show  show  show";
  }
}

/* ============================================================
 * Runtime chip / pill polish (CC v3) — bigger tap targets,
 * better spacing, count hint for multi.
 * ============================================================ */
.v2ChipsField {
  gap: 8px;
  padding: 6px 0 2px;
}
.v2Chip {
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
  min-height: 36px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
}
.v2Chip:active { transform: scale(0.97); }
.v2Chip:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; }

/* Selected count badge after multi-chip label */
.v2FieldHint { color: #94A3B8; }

/* Touch-friendly on mobile */
@media (max-width: 768px) {
  .v2Chip {
    padding: 9px 14px;
    min-height: 40px;
    font-size: 14px;
  }
  .v2ChipsField { gap: 7px; }
}

/* Number input width — keep compact but readable */
.v2FieldRow input[type="number"] {
  max-width: 140px;
  font-variant-numeric: tabular-nums;
}

/* Conditional field — gentle fade-in when newly shown */
.v2BlockFields > label {
  animation: v2FieldFadeIn 0.18s ease;
}
@keyframes v2FieldFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * Modern type-chip selector — when an item starts with a
 * chips_single field, render it slightly larger as a "primary
 * driver". Driver chips look like top-level navigation tabs.
 * ============================================================ */
.v2ChipsField[data-chip-mode="single"] > .v2Chip {
  font-size: 13.5px;
}
/* Driver style — applied when block uses class v2DriverChips */
.v2DriverChips .v2Chip {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
}
.v2DriverChips .v2Chip.active {
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

/* ============================================================
   System library suggestion strip (renders above Items stack)
   "+ Add Chief Complaint" one-click buttons. Modern, friendly.
   ============================================================ */
.tplBldrSysSugStrip{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 12px;
  padding:10px 12px;
  background:linear-gradient(180deg,#fff7ed 0%,#ffffff 100%);
  border:1px solid #fed7aa;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(249,115,22,.06);
}
.tplBldrSysSugLabel{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:#c2410c;
  padding-right:4px;
}
.tplBldrSysSugDot{
  width:6px; height:6px; border-radius:999px;
  background:#f97316;
  box-shadow:0 0 0 3px rgba(249,115,22,.18);
}
.tplBldrSysSugBtn{
  display:inline-flex; align-items:center; gap:4px;
  height:30px; padding:0 12px;
  background:#fff; color:#9a3412;
  border:1px solid #fed7aa; border-radius:999px;
  font-size:12.5px; font-weight:700;
  cursor:pointer;
  transition:all .15s ease;
}
.tplBldrSysSugBtn:hover:not(:disabled){
  background:#f97316; color:#fff; border-color:#f97316;
  box-shadow:0 4px 10px rgba(249,115,22,.25);
  transform:translateY(-1px);
}
.tplBldrSysSugBtn:active:not(:disabled){ transform:translateY(0); }
.tplBldrSysSugBtn:disabled{ opacity:.6; cursor:wait; }

/* ============================================================================ */
/* Dx Engine v3 — hint card (Phase 7)                                           */
/* ============================================================================ */
.v2DxEngineCard {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: #FFF7ED;
  border: 1px solid #FDBA74;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 1px 3px rgba(249, 115, 22, 0.08);
}
.v2DxEngineCard.v2DxEngineCardNeutral {
  background: #F8FAFC; border-color: #CBD5E1;
}
.v2DxEngineCard.v2DxEngineCardError {
  background: #FEF2F2; border-color: #FCA5A5; color: #991B1B;
}
.v2DxEngineHead {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.v2DxEngineKicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #C2410C;
}
.v2DxEngineCardNeutral .v2DxEngineKicker { color: #475569; }
.v2DxEngineBadge {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: #FED7AA; color: #9A3412;
}
.v2DxEngineBadgeNeutral { background: #E2E8F0; color: #475569; }
.v2DxEngineSourceTag {
  margin-left: auto;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 4px;
  background: #F97316; color: #fff; text-transform: uppercase;
}
.v2DxEngineAbxBadge {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: #FECACA; color: #991B1B;
}
.v2DxEngineSummary {
  font-size: 14px; font-weight: 600; color: #1F2937; line-height: 1.4;
}
.v2DxEngineDxBlock {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; background: #fff; border: 1px solid #FDE68A;
  border-radius: 8px;
}
.v2DxEngineCardNeutral .v2DxEngineDxBlock { border-color: #E2E8F0; }
.v2DxEngineDxRow {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 13px;
}
.v2DxEngineDxLabel {
  flex: 0 0 90px; font-weight: 600; color: #6B7280;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
}
.v2DxEngineDxVal { color: #1F2937; font-weight: 500; }
.v2DxEngineVisits {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.v2DxEngineVisit {
  display: grid; grid-template-columns: 28px 80px 1fr; gap: 10px;
  font-size: 12px; padding: 6px 10px; background: #fff;
  border: 1px solid #FED7AA; border-radius: 6px;
}
.v2DxEngineCardNeutral .v2DxEngineVisit { border-color: #E2E8F0; }
.v2DxEngineVisitN {
  font-weight: 700; color: #C2410C;
  background: #FED7AA; border-radius: 4px; text-align: center;
  padding: 2px 0; font-size: 11px;
}
.v2DxEngineVisitWhen { color: #6B7280; font-size: 11px; font-weight: 600; }
.v2DxEngineVisitText { color: #1F2937; line-height: 1.35; }
.v2DxEngineActions {
  display: flex; gap: 8px; align-items: center;
}
.v2DxEngineAccept {
  background: #F97316; color: #fff; border: none;
  padding: 8px 14px; border-radius: 6px; font-weight: 600; font-size: 13px;
  cursor: pointer; transition: background 120ms;
}
.v2DxEngineAccept:hover { background: #EA580C; }
.v2DxEngineEdit {
  background: #fff; color: #6B7280; border: 1px solid #E2E8F0;
  padding: 8px 14px; border-radius: 6px; font-weight: 500; font-size: 13px;
  cursor: pointer; transition: border-color 120ms;
}
.v2DxEngineEdit:hover { border-color: #94A3B8; color: #1F2937; }
.v2DxEngineCompList {
  list-style: disc inside; margin: 4px 0 0 0; padding: 0;
  font-size: 13px; color: #475569;
}
.v2DxEngineCompList li { padding: 2px 0; }
.v2DxEngineSub { font-size: 13px; color: #475569; margin-top: 4px; }
.v2DxEngineBody { font-size: 13px; color: #475569; line-height: 1.45; }

/* ============================================================
   2026-05-21 — Cancel-choice modal (Leave record vs Delete without record)
   Replaces the bare prompt() for booking cancellations. Modal lives outside
   the booking editor sheet so it can layer on top.
   ============================================================ */
.cxlChoiceScrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9100;
  padding: 16px;
  animation: cxlScrimIn 0.16s ease-out;
}
@keyframes cxlScrimIn { from { opacity: 0; } to { opacity: 1; } }
.cxlChoiceSheet {
  width: min(480px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.30), 0 8px 24px rgba(15, 23, 42, 0.15);
  display: flex;
  flex-direction: column;
  animation: cxlSheetIn 0.18s ease-out;
}
@keyframes cxlSheetIn { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.cxlChoiceHd {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 6px;
  position: relative;
}
.cxlChoiceBubble {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cxlChoiceTitles { flex: 1; min-width: 0; }
.cxlChoiceTitles h3 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}
.cxlChoiceTitles .sub {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}
.cxlChoiceClose {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
}
.cxlChoiceClose:hover { background: #f1f5f9; color: #475569; }
.cxlChoiceBody {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cxlOpt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.cxlOpt:hover { border-color: #cbd5e1; background: #f8fafc; }
.cxlOpt.cxlOptActive {
  border-color: #f97316;
  background: #fff7ed;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}
.cxlOptHard.cxlOptActive {
  border-color: #dc2626;
  background: #fef2f2;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.cxlOptIco {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.cxlOptTxt { flex: 1; min-width: 0; }
.cxlOptLbl {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 2px;
}
.cxlOptSub {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.4;
}
.cxlOptSub b { color: #b91c1c; font-weight: 600; }
.cxlReasonRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.cxlReasonRow[hidden] { display: none; }
.cxlReasonRow > span {
  font-size: 12px;
  color: #475569;
  font-weight: 500;
}
.cxlReasonInp {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  color: #0f172a;
  background: #fff;
}
.cxlReasonInp:focus {
  outline: 0;
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}
.cxlConfirmRow {
  margin-top: 4px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}
.cxlConfirmRow[hidden] { display: none; }
.cxlConfirmWarn {
  font-size: 12.5px;
  color: #991b1b;
  line-height: 1.4;
  margin-bottom: 8px;
}
.cxlConfirmCheck {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #0f172a;
  cursor: pointer;
  font-weight: 500;
}
.cxlConfirmCheck input { width: 16px; height: 16px; accent-color: #dc2626; }
.cxlChoiceFt {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 18px;
  border-top: 1px solid #f1f5f9;
}
.cxlBtn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.cxlBtn.ghost {
  background: #fff;
  color: #475569;
  border-color: #cbd5e1;
}
.cxlBtn.ghost:hover { background: #f8fafc; border-color: #94a3b8; }
.cxlBtn.primary {
  background: #f97316;
  color: #fff;
}
.cxlBtn.primary:hover { background: #ea580c; }
.cxlBtn.primary.danger { background: #dc2626; }
.cxlBtn.primary.danger:hover { background: #b91c1c; }
.cxlBtn.primary[disabled] {
  background: #cbd5e1;
  cursor: not-allowed;
}

/* === Placeholder Patient Convertor (2026-05-21) === */
.phConvScrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9100;
  padding: 16px;
  animation: cxlScrimIn 0.16s ease-out;
}
.phConvSheet {
  width: min(520px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.30), 0 8px 24px rgba(15, 23, 42, 0.15);
  display: flex;
  flex-direction: column;
  animation: cxlSheetIn 0.18s ease-out;
}
.phConvHd {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 6px;
  position: relative;
}
.phConvBubble {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.phConvTitles { flex: 1; min-width: 0; padding-right: 32px; }
.phConvTitles h3 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}
.phConvTitles .sub {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}
.phConvClose {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
}
.phConvClose:hover { background: #f1f5f9; color: #475569; }
.phConvBody {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phConvOpt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  width: 100%;
}
.phConvOpt:hover { border-color: #f97316; background: #fff7ed; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.10); }
.phConvOptIco {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.phConvOptTxt { flex: 1; min-width: 0; }
.phConvOptLbl {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 3px;
}
.phConvOptSub {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.45;
}
.phConvField {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.phConvField label {
  font-size: 12.5px;
  color: #334155;
  font-weight: 600;
}
.phConvField label .req { color: #dc2626; margin-left: 2px; }
.phConvField input[type="text"],
.phConvField input[type="tel"],
.phConvField textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  color: #0f172a;
  background: #fff;
  font-family: inherit;
  box-sizing: border-box;
}
.phConvField textarea { resize: vertical; min-height: 72px; }
.phConvField input:focus,
.phConvField textarea:focus {
  outline: 0;
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}
.phConvField input[readonly] {
  background: #f8fafc;
  color: #475569;
  cursor: text;
}
.phConvHint {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}
.phConvHint b { color: #0f172a; font-weight: 600; }
.phConvErr {
  font-size: 12.5px;
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.4;
}
.phConvErr[hidden] { display: none; }

/* ---- Multi-service treatment picker (2026-05-21) ---- */
/* Mirrors the regular booking editor’s bookingServicesList row so reception
   sees the same shape (badge + select + remove ×) in both places. */
.phConvServicesList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phConvServiceRow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.phConvServiceBadge {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fdba74;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phConvSelect,
.phConvServiceSelect {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  color: #0f172a;
  background: #fff;
  font-family: inherit;
  box-sizing: border-box;
}
.phConvSelect:focus,
.phConvServiceSelect:focus {
  outline: 0;
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}
.phConvServiceRemove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phConvServiceRemove:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}
.phConvServiceRemove[hidden] { display: none; }
.phConvAddServiceBtn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 12px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px dashed #fdba74;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.phConvAddServiceBtn:hover {
  background: #ffedd5;
  border-color: #f97316;
  border-style: solid;
}
.phConvSuccess {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
}
.phConvSuccessIco {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.phConvSuccessTxt { flex: 1; min-width: 0; }
.phConvSuccessLbl {
  font-size: 14px;
  font-weight: 700;
  color: #14532d;
  margin-bottom: 2px;
}
.phConvSuccessSub {
  font-size: 12.5px;
  color: #166534;
  line-height: 1.4;
}
.phConvCopyRow {
  display: flex;
  gap: 8px;
}
.phConvCopyRow input { flex: 1; }
.phConvFt {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 18px;
  border-top: 1px solid #f1f5f9;
}
.phConvBtn {
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.phConvBtn.ghost {
  background: #fff;
  color: #475569;
  border-color: #cbd5e1;
}
.phConvBtn.ghost:hover { background: #f8fafc; border-color: #94a3b8; }
.phConvBtn.primary {
  background: #f97316;
  color: #fff;
}
.phConvBtn.primary:hover { background: #ea580c; }
.phConvBtn.primary[disabled] {
  background: #cbd5e1;
  cursor: not-allowed;
}
.phConvBtn.danger {
  background: #dc2626;
  color: #fff;
}
.phConvBtn.danger:hover { background: #b91c1c; }
.phConvBtn.danger[disabled] {
  background: #cbd5e1;
  cursor: not-allowed;
}
.phConvOptCancel:hover {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
}

/* Toast surfaced when receptionist tries to open the placeholder folder. */
.phToast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  background: #0f172a;
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
  z-index: 9200;
  animation: phToastIn 0.18s ease-out;
  max-width: calc(100vw - 32px);
  text-align: center;
}
@keyframes phToastIn { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

/* 2026-05-21 placeholder convertor v2 additions */
/* Booking remark box surfaced in the patient form so reception can read the
   dentist's note (e.g. "SP PANG SZE MAN 95823829 IRIS") and type it in. */
.phConvNote {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 10px 12px;
}
.phConvNoteLbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9a3412;
  margin-bottom: 4px;
}
.phConvNoteTxt {
  font-size: 13.5px;
  line-height: 1.45;
  color: #1f2937;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Composite phone row reuses .pePhoneRow grid from the patient edit modal.
   Wrap container just needs to render the children unstyled — the inputs
   carry their own .peInput look. */
.phConvPhones { display: block; }
.phConvPhones .pePhoneMain {
  display: grid;
  grid-template-columns: 110px 110px 1fr;
  gap: 8px;
  align-items: center;
}
.phConvPhones .pePhoneError {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #b91c1c;
}

/* Collapsible "Show registration link" disclosure on the success screen. */
.phConvLinkDetails {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0;
  background: #f8fafc;
}
.phConvLinkDetails > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  padding: 10px 12px;
  list-style: none;
}
.phConvLinkDetails > summary::-webkit-details-marker { display: none; }
.phConvLinkDetails > summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: 4px;
  color: #94a3b8;
  transition: transform 0.12s;
}
.phConvLinkDetails[open] > summary::before {
  content: "▾ ";
}
.phConvLinkDetails > .phConvCopyRow {
  padding: 0 12px 8px;
}
.phConvLinkDetails > .phConvHint {
  padding: 0 12px 12px;
}

/* ===========================================================================
   Searchable select (typeahead) — 2026-05-22
   Used for treatment dropdowns in booking modal + placeholder convertor.
   Wrapper appears in place of the original <select>; inherits the host's
   input styling (bookingFieldInput, phConvSelect, etc.).
   =========================================================================== */
.ssWrap { position: relative; min-width: 0; }
.ssInput {
  /* Inherits class names from the underlying <select> so it picks up
     bookingFieldInput / phConvSelect padding, borders, fonts. We just need
     to enforce a few visuals the inherited class assumes <select> for. */
  cursor: text;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-500, #8898a8) 50%),
                    linear-gradient(135deg, var(--ink-500, #8898a8) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 26px !important;
}
.ssList {
  position: absolute;
  top: calc(100% + 4px);
  /* 2026-05-22: Per user request, dropdown is now 2x the width of the
     underlying input so long treatment names (e.g. "Orthodontic
     consultation \u7259\u9f52\u77ef\u6b63\u8a3a\u7642\u8a73\u8a08") fit on a single line. We pin to
     left:0 and use width:200% so the panel grows rightward over the modal.
     A min-width prevents the popup from collapsing on very narrow mobile
     selects; max-width keeps it within the viewport edge. */
  left: 0;
  right: auto;
  width: 200%;
  min-width: 280px;
  max-width: calc(100vw - 24px);
  max-height: 280px;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--ink-300, #cdd5de);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  z-index: 10500; /* above booking modal scrim (~10000) */
  padding: 4px 0;
}
/* On very narrow phones, fall back to matching the input width — a 2x
   expansion would clip against the right edge of the viewport. */
@media (max-width: 480px) {
  .ssList { width: 100%; min-width: 0; }
}
.ssGroup {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-500, #6d7886);
  padding: 8px 12px 4px;
  background: #f7f8fa;
  border-top: 1px solid var(--ink-100, #eaeef3);
}
.ssGroup:first-child { border-top: none; }
.ssItem {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ink-900, #1d2733);
  cursor: pointer;
  line-height: 1.35;
}
.ssItem:hover, .ssItem.ssActive {
  background: rgba(249, 115, 22, .10); /* brand orange tint */
  color: var(--ink-900, #1d2733);
}
.ssEmpty {
  padding: 12px;
  font-size: 13px;
  color: var(--ink-500, #6d7886);
  text-align: center;
}

/* ============================================================
   2026-05-22 — Invoice modal: discount with HKD/% mode toggle
   ============================================================ */
.cxDiscountInputWrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.cxDiscountInputWrap .cxDiscount {
  flex: 1 1 auto;
  min-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}
.cxDiscountModeToggle {
  display: inline-flex;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-right: 0;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  overflow: hidden;
  flex: 0 0 auto;
}
.cxDiscountModeBtn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: #374151;
  border: 0;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-width: 40px;
  line-height: 1;
  transition: background-color 120ms ease, color 120ms ease;
}
.cxDiscountModeBtn + .cxDiscountModeBtn {
  border-left: 1px solid #d1d5db;
}
.cxDiscountModeBtn:hover:not(.cxDiscountModeBtn--active) {
  background: #e5e7eb;
}
.cxDiscountModeBtn--active {
  background: #f97316;
  color: #fff;
}
.cxDiscountModeBtn--active + .cxDiscountModeBtn,
.cxDiscountModeBtn:has(+ .cxDiscountModeBtn--active) {
  border-left-color: #f97316;
}
.cxDiscountPctHint {
  margin-top: 6px;
  font-size: 12px;
  color: #f97316;
  font-weight: 600;
  line-height: 1.3;
}
.cxDiscountPctHint--muted {
  color: #9ca3af;
  font-weight: 500;
}

/* ============================================================================ */
/* PERIODONTAL CHARTING TAB                                                     */
/* ============================================================================ */
.perioTab { padding: 6px 0 24px; }
.perioTopbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.perioTitle { font-size: 16px; font-weight: 700; color: #0f1419; }
.perioNotation { font-size: 11px; font-weight: 500; color: #64748b; margin-left: 8px; }
.perioTopActions { margin-left: auto; display: flex; gap: 8px; }
.perioBtn { font-size: 13px; padding: 6px 14px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; color: #0f1419; cursor: pointer; font-weight: 500; }
.perioBtn:hover { background: #f1f5f9; }
.perioBtnPrimary { background: #f97316; color: #fff; border-color: #c2410c; }
.perioBtnPrimary:hover { background: #ea580c; }
.perioBtnSecondary { background: #fff; color: #334155; }

.perioSummary { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.perioSummary.perioEmpty { color: #64748b; font-style: italic; }
.perioSummaryRow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.perioSummaryDate { font-size: 12.5px; color: #334155; }
.perioSummaryStats { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.perioStat { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 9px; border-radius: 999px; background: #f1f5f9; font-size: 11.5px; }
.perioStat.warn { background: #fef3c7; }
.perioStat.danger { background: #fee2e2; color: #991b1b; }
.perioStatK { font-weight: 500; color: #64748b; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.perioStatV { font-weight: 700; color: #0f1419; }

.perioEmptyBig { padding: 60px 30px; text-align: center; color: #64748b; font-size: 14px; background: #fff; border: 1px dashed #cbd5e1; border-radius: 12px; }

.perioExamsList { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; }
.perioExamsLabel { font-size: 10.5px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.perioExamRow { display: flex; gap: 14px; padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid #e2e8f0; margin-bottom: 6px; width: 100%; text-align: left; cursor: pointer; align-items: center; }
.perioExamRow:hover { background: #f8fafc; }
.perioExamRow.active { background: #fff7ed; border-color: #fed7aa; }
.perioExamDate { font-weight: 600; font-size: 13px; color: #0f1419; min-width: 110px; }
.perioExamMeta { color: #64748b; font-size: 12px; flex: 1; }
.perioExamStats { color: #475569; font-size: 11.5px; }

/* ---- chart wrap ---- */
.perioChartWrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px 16px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.perioBar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.perioBarLeft { display: flex; align-items: center; gap: 8px; }
.perioBarDate { font-weight: 700; font-size: 14px; color: #0f1419; }
.perioBarAuthor { font-size: 12.5px; color: #64748b; }
.perioBarBadge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; text-transform: uppercase; letter-spacing: 0.04em; }
.perioBarBadge.brand { background: #fff7ed; color: #c2410c; }
.perioBarRight { margin-left: auto; }

.perioJaw { padding: 6px 0; }
.perioJaw + .perioJaw { margin-top: 4px; padding-top: 14px; border-top: 1px dashed #e2e8f0; }

.perioRows { display: block; }
.perioRow { display: grid; grid-template-columns: 70px 1fr; gap: 6px; align-items: center; margin: 2px 0; }
.perioRowLabel { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; text-align: right; padding-right: 8px; }
.perioRowCells { display: grid; grid-template-columns: repeat(16, 1fr); gap: 0; }
.perioToothCol { display: grid; grid-template-columns: repeat(3, 1fr); border-right: 1px solid #f1f5f9; }
.perioToothCol:nth-child(8) { border-right: 2px solid #cbd5e1; } /* midline */
.perioSideLabel { font-size: 10.5px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.08em; margin: 4px 0 2px 74px; }

.perioSite { height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; color: #0f1419; cursor: pointer; outline: none; user-select: none; border-radius: 3px; }
.perioSite.readOnly { cursor: default; }
.perioSite[data-row='pd'] { background: #fff; border: 1px solid transparent; min-width: 0; }
.perioSite[data-row='pd']:hover:not(.readOnly) { background: #f8fafc; border-color: #e2e8f0; }
.perioSite[data-row='pd'].focused { background: #fff7ed; border-color: #f97316; box-shadow: 0 0 0 2px rgba(249,115,22,0.15); }
.perioSite[data-row='pd'].pd5 { color: #c2410c; }
.perioSite[data-row='pd'].pd7 { color: #fff; background: #c8222a; }
.perioSite[data-row='bop'] { color: #c8222a; font-size: 14px; }
.perioSite[data-row='bop'].on { background: rgba(200,34,42,0.08); }
.perioSite[data-row='plaque'] { color: #2563eb; font-size: 12px; }
.perioSite[data-row='plaque'].on { background: rgba(37,99,235,0.08); }
.perioSite.missingSite { background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 4px, #fff 4px, #fff 8px); cursor: default; }

.perioFdiRow { display: grid; grid-template-columns: 70px 1fr; gap: 6px; margin: 4px 0 4px; align-items: stretch; }
.perioFdiRow::before { content: ""; }
.perioFdiRow { grid-template-columns: 70px repeat(16, 1fr); }
.perioFdiCell { font-size: 11.5px; font-weight: 700; padding: 4px 0; background: #fff; border: 1px solid #e2e8f0; cursor: pointer; color: #0f1419; border-radius: 4px; }
.perioFdiCell:hover:not(.readOnly):not(:disabled) { background: #fff7ed; border-color: #fed7aa; }
.perioFdiCell.missing { background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }
.perioFdiCell[data-jaw='max'] { grid-row: 1; }
.perioFdiCell[data-fdi='11'], .perioFdiCell[data-fdi='41'] { margin-right: 2px; }
.perioFdiCell[data-fdi='21'], .perioFdiCell[data-fdi='31'] { margin-left: 2px; }

.perioSvgRow { background: #fff; padding: 4px 0; margin: 4px 0; }
.perioJawSvg { width: 100%; max-height: 220px; display: block; }

.perioFooter { margin-top: 14px; padding-top: 10px; border-top: 1px solid #f1f5f9; }
.perioLegend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11.5px; color: #475569; }
.perioLegItem { display: inline-flex; align-items: center; gap: 6px; }
.perioLegSwatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.perioLegSwatch.present { background: #fff; border: 1px solid #cbd5e1; }
.perioLegSwatch.missing { background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 3px, #fff 3px, #fff 6px); border: 1px solid #cbd5e1; }
.perioLegSwatch.bop { background: rgba(200,34,42,0.12); border: 1px solid #c8222a; }
.perioLegSwatch.plaque { background: rgba(37,99,235,0.12); border: 1px solid #2563eb; }

.perioLoading { padding: 30px; text-align: center; color: #64748b; font-size: 13px; }

/* Align SVG row with data rows (70px label gutter). */
.perioSvgRow { padding-left: 76px; }
.perioFdiSpacer { display: block; }

/* =====================================================================
   2026-05-31 — TREATMENT-NOTE REDESIGN (Test toggle, collapsed card, overlay)
   Gated by nxRedesignIsEnabled() which itself is gated on email
   tabletennis007@gmail.com. Other users never see this UI.
   IMPORTANT: deliberately do NOT touch .editorTextarea or .noteCard fonts —
   inherited fonts are preserved so the editing/reading experience is unchanged.
   ===================================================================== */

/* --- Test toggle in patient topbar meta --- */
.nxRedesignTestToggle {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  margin-left: 8px;
  border: 1px solid #e5e7eb; border-radius: 999px;
  background: #fff; color: #6b7280;
  font-size: 12px; font-weight: 600; line-height: 1;
  cursor: pointer; user-select: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.nxRedesignTestToggle:hover { border-color: #d1d5db; color: #374151; }
.nxRedesignTestToggle.on {
  background: #fff7ed; border-color: #fdba74; color: #c2410c;
}
.nxRedesignTestDot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #d1d5db; display: inline-block;
}
.nxRedesignTestToggle.on .nxRedesignTestDot { background: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.18); }
.nxRedesignTestLabel { letter-spacing: .02em; }
.nxRedesignTestState { opacity: .75; font-weight: 500; }

/* --- Step 1: collapsed card --- */
/* Note: .nxRedesignCard piggybacks on .treatmentEditor so it inherits the
   exact background/border/font/spacing of the legacy editor — only the
   inner textarea/template-builder block is dropped. */
.nxRedesignCard {
  cursor: pointer;
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
.nxRedesignCard:hover {
  border-color: #fdba74;
  box-shadow: 0 2px 10px rgba(249,115,22,.10);
}
.nxRedesignCard:focus-visible {
  outline: 2px solid #f97316; outline-offset: 2px;
}
.nxRedesignCard .editorHead { align-items: center; }
.nxRedesignCardCta {
  display: inline-flex; align-items: center; gap: 6px;
  color: #c2410c; font-size: 12px; font-weight: 600;
  letter-spacing: .02em;
}
.nxRedesignCardArrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff7ed; color: #c2410c;
  font-size: 14px; line-height: 1; font-weight: 700;
  transition: background .12s ease, transform .12s ease;
}
.nxRedesignCard:hover .nxRedesignCardArrow { background: #ffedd5; transform: translateX(2px); }
.nxRedesignCardCount {
  margin-left: 6px;
  font-size: 11px; font-weight: 600;
  color: #6b7280;
  padding: 2px 8px; border-radius: 999px;
  background: #f3f4f6;
}
.nxRedesignCardCount.empty { color: #9ca3af; background: #f9fafb; }

/* --- Step 2: full overlay --- */
html.nxRedesignOverlayOpen { overflow: hidden; }
.nxRedesignOverlay {
  position: fixed; inset: 0; z-index: 10600; /* above printSetupBanner (10000) and any modals */
  background: rgba(15, 23, 42, .52);
  display: flex; align-items: stretch; justify-content: center;
  padding: 24px;
  animation: nxOvFade .14s ease-out;
}
/* Hide the print-setup warning banner while overlay is open so it doesn't
   visually leak through the dimmed backdrop. */
html.nxRedesignOverlayOpen #printSetupBanner { display: none !important; }
/* Any modal opened from within the redesign overlay (e.g. reclassify appointment
   type picker) must layer ABOVE the overlay (z-index 10600) — not behind it. */
html.nxRedesignOverlayOpen .nxModal.open { z-index: 10700 !important; }
@keyframes nxOvFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.nxOvSheet {
  position: relative;
  background: #fff;
  width: 100%; max-width: 1480px;
  border-radius: 14px;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .35);
  overflow: hidden;
  animation: nxOvLift .18s ease-out;
}
@keyframes nxOvLift {
  from { transform: translateY(8px); opacity: .85; }
  to   { transform: translateY(0); opacity: 1; }
}
.nxOvHead {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
}
.nxOvTitle {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  grid-column: 1 / -1;
}
.nxOvTag {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #c2410c; background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 6px; text-transform: uppercase;
}
.nxOvName {
  font-size: 18px; font-weight: 700; color: #0f172a; letter-spacing: -.01em;
}
.nxOvRef {
  font-size: 12px; font-weight: 500; color: #6b7280;
}
.nxOvMetaRow {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 12px; color: #475569;
  grid-column: 1 / -1;
}
.nxOvMeta b {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: #94a3b8; text-transform: uppercase;
  margin-right: 4px;
}
.nxOvActions {
  position: absolute; top: 10px; right: 10px;
}
.nxOvClose {
  width: 32px; height: 32px;
  border: 1px solid #e5e7eb; border-radius: 8px;
  background: #fff; color: #475569;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.nxOvClose:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* Switcher pill row (multi-appt same day) */
.nxOvSwitcher {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  padding: 10px 18px;
  background: #fafafa;
  border-bottom: 1px solid #f1f5f9;
}
.nxOvSwitcherLabel {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: #94a3b8; text-transform: uppercase;
  margin-right: 4px;
}
.nxOvSwitchPill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #475569;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.nxOvSwitchPill:hover { border-color: #fdba74; color: #c2410c; }
.nxOvSwitchPill.active {
  background: #fff7ed; border-color: #f97316; color: #c2410c;
  box-shadow: 0 0 0 2px rgba(249,115,22,.12);
}
.nxOvSwitchTail { font-size: 11px; font-weight: 500; opacity: .8; }

/* Body — two panes */
.nxOvBody {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: #fff;
}
.nxOvPane {
  display: flex; flex-direction: column;
  min-height: 0;
}
.nxOvPaneLeft  { border-right: 1px solid #f1f5f9; background: #fff; }
.nxOvPaneRight { background: #fafafa; }
.nxOvPaneHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
  position: sticky; top: 0; z-index: 1;
}
.nxOvPaneRight .nxOvPaneHead { background: #fafafa; }
.nxOvPaneH {
  font-size: 12px; font-weight: 700; color: #0f172a;
  letter-spacing: .01em;
}
.nxOvPaneHTools {
  font-size: 11px; font-weight: 500; color: #94a3b8;
}
.nxOvPaneBody {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 14px 18px 24px;
}
/* The editor mounted inside the overlay should NOT have its own outer border
   (the pane provides the visual frame). Keep fonts/spacing untouched. */
.nxRedesignEditorMount > .treatmentEditor {
  border: none; box-shadow: none; padding: 0; margin: 0;
  background: transparent;
}
.nxOvEmpty {
  padding: 24px 0;
  text-align: center;
  color: #9ca3af; font-size: 13px;
}

/* Mobile / narrow: stack the panes. Editor on top, history below. */
@media (max-width: 880px) {
  .nxRedesignOverlay { padding: 0; }
  .nxOvSheet { border-radius: 0; }
  .nxOvBody {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(40vh, 60vh) auto;
  }
  .nxOvPaneLeft { border-right: 0; border-bottom: 1px solid #f1f5f9; }
}

/* 2026-06-01 \u2014 Read-only entries displayed inside the collapsed card.
   Suppress interactivity of inner buttons (Edit / Delete / history toggle)
   so any click on the card bubbles to the open-overlay handler. */
.nxRedesignCard .visitEntryActions,
.nxRedesignCard .entryHistoryWrap { display: none !important; }
.nxRedesignCard .nxRedesignCardEntriesHead { margin-top: 12px; }
.nxRedesignCard.hasEntries .nxRedesignCardCount.empty { display: none; }
.nxRedesignCard .visitEntry { cursor: pointer; } /* whole card is clickable */

/* ==========================================================================
   Daily Schedule — printable appointment list (ClinicSolution-style layout)
   --------------------------------------------------------------------------
   The #schedPrintArea is rendered fresh on each click of #schedPrintBtn,
   then the browser's window.print() is invoked. On screen we keep it
   off-flow; @media print swaps the page over to it and hides the rest.
   ========================================================================== */
.schedPrintArea {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

@media print {
  @page { size: A4 portrait; margin: 12mm 14mm; }
  /* Strategy: hide the entire app shell, then teleport-show only the
     #schedPrintArea. We can't rely on body > * selectors because the
     SPA wraps views in .appMain. Instead we hide everything via the
     html descendant universal selector and explicitly un-hide our
     ancestor chain leading to #schedPrintArea. */
  html, body { background: #fff !important; }
  body.appShell > .mobileBar,
  body.appShell > .sidebarBackdrop,
  body.appShell > .sidebar,
  body.appShell > #printSetupBanner,
  #printSetupBanner,
  body.appShell > .toast,
  body.appShell > .toastContainer,
  body.appShell > .modal,
  body.appShell > .modalBackdrop,
  body.appShell > .appMain > .view:not(#view-schedule) {
    display: none !important;
    visibility: hidden !important;
  }
  body.appShell > .appMain { display: block !important; padding: 0 !important; margin: 0 !important; }
  #view-schedule { display: block !important; visibility: visible !important; }
  #view-schedule.hidden { display: block !important; }
  #view-schedule > *:not(#schedPrintArea) { display: none !important; }
  #schedPrintArea {
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    font-family: "Times New Roman", Times, "Noto Serif TC", serif;
    color: #000;
    background: #fff;
  }
  .schedPrintPage {
    page-break-after: always;
    break-after: page;
  }
  .schedPrintPage:last-child {
    page-break-after: auto;
    break-after: auto;
  }
  /* Letterhead */
  .spLetterhead {
    text-align: center;
    border-bottom: 2px solid #000;
    padding-bottom: 6px;
    margin-bottom: 10px;
  }
  .spClinicEn { font-size: 14pt; font-weight: 700; }
  .spClinicZh { font-size: 14pt; font-weight: 700; letter-spacing: 2px; }
  .spClinicAddr { font-size: 9pt; line-height: 1.35; margin-top: 2px; }
  .spClinicAddr div { margin: 0; }
  /* Title */
  .spTitle {
    text-align: center;
    font-size: 13pt;
    font-weight: 600;
    margin: 6px 0 4px;
  }
  /* Header grid: Clinic/Doctor (left) | Date/Patients (right) */
  .spHeader {
    display: grid;
    grid-template-columns: 1fr auto;
    font-size: 10pt;
    margin-bottom: 4px;
  }
  .spHeader .lhs div, .spHeader .rhs div { line-height: 1.35; }
  .spHeader .rhs { text-align: right; }
  /* Table */
  .spTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
    margin-top: 2px;
  }
  .spTable thead th {
    text-align: left;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    padding: 3px 4px;
    font-weight: 600;
    font-size: 10pt;
  }
  /* Generous vertical padding gives nurses room to handwrite notes under or
     beside each row. Top padding aligns the printed text to the slot's
     starting time, leaving the empty space below for annotations. */
  .spTable tbody td {
    padding: 14px 4px 16px;
    vertical-align: top;
    border-bottom: 1px solid #ccc;
    font-size: 10pt;
    line-height: 1.35;
  }
  /* Alternating row shading (looks like the ClinicSolution sample) */
  .spTable tbody tr:nth-child(odd) td {
    background: #f0f0f0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Column widths */
  .spTable col.cTime  { width: 10%; }
  .spTable col.cCode  { width: 10%; }
  .spTable col.cName  { width: 32%; }
  .spTable col.cRem   { width: 38%; }
  .spTable col.cDur   { width: 10%; }
  .spTable td.cDur, .spTable th.cDur { text-align: right; }
  .spTable td.cTime { white-space: nowrap; }
  .spTable td.cCode { white-space: nowrap; font-family: "Courier New", monospace; }
  /* Empty-state row */
  .spEmpty td { text-align: center; color: #555; padding: 12px; font-style: italic; }
}

/* ============================================================
   Tier 1 (2026-06-02) — Tooth target picker
   Owner-only + beta toggle gated. Pill sits inline next to each
   booking-service select. Popover = FDI chart + side tokens.
   ============================================================ */
.nxToothPill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #f97316;
  background: #fff;
  color: #c2410c;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, box-shadow 0.12s;
  margin-left: 6px;
}
.nxToothPill:hover {
  background: #fff7ed;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15);
}
.nxToothPillSet {
  background: #ffedd5;
  color: #9a3412;
  border-color: #ea580c;
}
.nxToothPillIcon { font-size: 13px; line-height: 1; }
.nxToothPillLabel { line-height: 1; font-variant-numeric: tabular-nums; }

.nxToothPopover {
  position: fixed;
  /* v3l2: tooth picker must layer above Treatment Items overlay (z 10700) */
  z-index: 10800;
  width: 380px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
  padding: 12px 14px 12px;
  font-size: 13px;
  color: #1f2937;
}
.nxToothPopHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.nxToothTabs {
  display: flex;
  flex: 1;
  gap: 6px;
}
.nxToothTab {
  flex: 1;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}
.nxToothTab.on {
  background: #f97316;
  color: #fff;
  border-color: #ea580c;
}
.nxToothCloseBtn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.nxToothCloseBtn:hover { background: #f3f4f6; color: #1f2937; }

.nxToothChart {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}
.nxToothChartLabel {
  font-size: 10px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-align: center;
}
.nxToothChartRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.nxToothChartHalf {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
/* Q1 / Q4 are shown right-to-left in the chart so they align with the
   patient's mouth from the dentist's viewpoint. */
.nxToothChartRight { direction: rtl; }
.nxToothChartLeft  { direction: ltr; }
/* Upper-right (Q1) shows 18->11 left-to-right; its array is already 18..11 so render LTR. */
.nxToothChartUpperRight { direction: ltr; }
.nxToothFdiBtn {
  width: 100%;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #1f2937;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.nxToothFdiBtn:hover {
  background: #fff7ed;
  border-color: #f97316;
}
.nxToothFdiBtn.on {
  background: #f97316;
  border-color: #ea580c;
  color: #fff;
}

.nxToothQuickRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.nxToothQuickLabel {
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
}

.nxToothSideGroup { margin-bottom: 8px; }
.nxToothSideGroupLabel {
  font-size: 10px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 4px;
}
.nxToothSideRow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.nxToothSideBtn {
  height: 34px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #1f2937;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.nxToothSideBtn:hover {
  background: #fff7ed;
  border-color: #f97316;
}
.nxToothSideBtn.on {
  background: #f97316;
  border-color: #ea580c;
  color: #fff;
}

.nxToothHint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 8px;
  line-height: 1.35;
}

.nxToothPopFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}
.nxToothPreviewWrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.nxToothPreviewLabel {
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
}
.nxToothPreview {
  font-size: 12px;
  color: #1f2937;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nxToothPreviewEmpty {
  color: #9ca3af;
  font-weight: 400;
  font-style: italic;
}
.nxToothPopBtns { display: flex; gap: 6px; flex-shrink: 0; }
.nxToothBtn {
  height: 30px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #d1d5db;
}
.nxToothBtnGhost { background: #fff; color: #475569; }
.nxToothBtnGhost:hover { background: #f3f4f6; }
.nxToothBtnPrimary {
  background: #f97316;
  border-color: #ea580c;
  color: #fff;
}
.nxToothBtnPrimary:hover { background: #ea580c; }

/* Tier 1 (2026-06-02) — Tooth chip inside read-only booking modal's
   multi-service list. Sits between badge and treatment name. */
.bookingViewMultiTooth {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  height: 22px;
  border-radius: 999px;
  background: #ffedd5;
  color: #9a3412;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
  white-space: nowrap;
}

/* ============================================================
   Lunch band — Option C (taupe + left tick)
   Visually distinct from .calOffHours (cool grey hatched) so
   reception immediately reads "clinic lunch break" rather than
   "doctor isn't here today". Z-index sits ABOVE off-hours grey
   (z:2) but BELOW appointment chips (z:5) and unavailability
   blocks (z:6), so red blocks and bookings remain dominant.
   ============================================================ */
.calLunch {
  position: absolute;
  left: 0; right: 0;
  background: #ede7d8;
  border-top: 1px solid #c9b88a;
  border-bottom: 1px solid #c9b88a;
  border-left: 3px solid #c9b88a;
  pointer-events: none;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 0 8px;
  overflow: hidden;
}
.calLunch .calLunchLabel {
  color: #6e5b2b;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 2026-06-11 PHASE-6B — derived lifecycle-state badges on appointment rows. */
.nx-ds { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; margin-right:6px; vertical-align:middle; }
.nx-ds-noshow      { background:#fde8e8; color:#9b1c1c; }
.nx-ds-cancelled   { background:#e5e7eb; color:#374151; }
.nx-ds-rescheduled { background:#fef3c7; color:#92400e; }
.nx-ds-merged      { background:#ede9fe; color:#5b21b6; }
.nx-ds-lwbs        { background:#fee2e2; color:#7f1d1d; }
.nx-ds-done        { background:#d1fae5; color:#065f46; }
.nx-ds-incomplete  { background:#fff7ed; color:#9a3412; border:1px dashed #c2410c; }
.nx-ds-invisit     { background:#dbeafe; color:#1e40af; }
.nx-ds-awaiting    { background:#f3f4f6; color:#4b5563; }

/* ==================================================================
   2026-06-16 — Practitioner-only clinical sections in booking edit modal
   ================================================================== */
.nxClinicalSections {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nxClinicalDivider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 2px 0;
  color: #6b7280;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.nxClinicalDivider::before,
.nxClinicalDivider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #e5e7eb, transparent);
}
.nxClinicalDividerLabel {
  white-space: nowrap;
  padding: 0 4px;
}
.nxClinicalCard {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafbfc;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
.nxClinicalCard[open] {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.nxClinicalSummary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 13px;
}
.nxClinicalSummary::-webkit-details-marker { display: none; }
.nxClinicalSummaryIcon { font-size: 14px; }
.nxClinicalSummaryTitle {
  font-weight: 600;
  color: #111827;
  flex: 0 0 auto;
}
.nxClinicalSummaryCount {
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  flex: 1;
}
.nxClinicalSummaryChevron {
  color: #9ca3af;
  font-size: 12px;
  transition: transform 0.15s ease;
}
.nxClinicalCard[open] .nxClinicalSummaryChevron { transform: rotate(180deg); }
.nxClinicalBody {
  padding: 0 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #f3f4f6;
  padding-top: 10px;
  margin-top: -2px;
}
.nxClinicalAddBtn {
  align-self: flex-start;
  background: #fff;
  border: 1px dashed #d1d5db;
  color: #374151;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nxClinicalAddBtn:hover {
  border-color: #6b7280;
  border-style: solid;
  background: #f9fafb;
}

/* Allergy banner */
.nxAllergyBanner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #78350f;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
}
.nxAllergyIcon { font-size: 14px; flex-shrink: 0; }

/* Rx rows */
.nxRxList { display: flex; flex-direction: column; gap: 8px; }
.nxRxRow {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nxRxGrid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 6px;
  align-items: center;
}
.nxRxInput {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  background: #fff;
}
.nxRxInput:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
.nxRxNotes { font-style: italic; }
.nxRxRemove,
.nxItemRemove {
  background: transparent;
  border: 0;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 4px;
}
.nxRxRemove:hover,
.nxItemRemove:hover { color: #dc2626; background: #fef2f2; }

/* Items rows */
.nxItemsHint {
  font-size: 11px;
  color: #6b7280;
  font-style: italic;
}
.nxItemsList { display: flex; flex-direction: column; gap: 6px; }
.nxItemRow {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 6px;
  align-items: center;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 8px;
}
.nxItemBadge {
  background: #6b7280;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.nxItemDesc {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  background: #fff;
}
.nxItemDesc:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
.nxItemToothCell { display: inline-flex; }
.nxItemPriceCell {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  padding-left: 6px;
}
.nxItemPriceSym { color: #6b7280; font-size: 12px; }
.nxItemPrice {
  border: 0;
  outline: 0;
  padding: 5px 6px;
  font-size: 12px;
  width: 64px;
  text-align: right;
  background: transparent;
}
.nxItemsTotalRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px 0 4px;
  border-top: 1px dashed #e5e7eb;
  margin-top: 4px;
}
.nxItemsTotalLabel { font-size: 12px; color: #6b7280; }
.nxItemsTotalValue { font-size: 14px; font-weight: 700; color: #111827; }

/* Next visit */
.nxNextRow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.nxNextLabel {
  flex: 0 0 70px;
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 6px;
}
.nxNextInterval,
.nxNextDate,
.nxNextNote {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  background: #fff;
}
.nxNextInterval:focus,
.nxNextDate:focus,
.nxNextNote:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
.nxNextInterval { width: 140px; }
.nxNextDate { width: 150px; }
.nxNextNote {
  flex: 1;
  resize: vertical;
  font-family: inherit;
  min-height: 40px;
}

@media (max-width: 720px) {
  .nxRxGrid {
    grid-template-columns: 1fr 1fr auto;
  }
  .nxRxGrid > .nxRxFreq,
  .nxRxGrid > .nxRxDur { grid-column: span 1; }
  .nxItemRow {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "badge desc"
      "tooth tooth"
      "price remove";
    row-gap: 6px;
  }
  .nxItemBadge { grid-area: badge; }
  .nxItemDesc { grid-area: desc; }
  .nxItemToothCell { grid-area: tooth; }
  .nxItemPriceCell { grid-area: price; }
  .nxItemRemove { grid-area: remove; justify-self: end; }
  .nxNextRow { flex-direction: column; gap: 4px; }
  .nxNextLabel { flex: none; padding-top: 0; }
  .nxNextInterval, .nxNextDate { width: 100%; }
}

/* ============================================================
   2026-06-16 clinical redesign — modern cards + sticky save
   ============================================================ */
.nxClinicalSections { padding-bottom: 4px; }
.nxClinCard {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nxClinCardHead {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nxClinCardIcon { font-size: 16px; }
.nxClinCardTitle {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  flex: 1;
}
.nxClinCardCount {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 2px 10px;
}
.nxClinCardBody { display: flex; flex-direction: column; gap: 10px; }
.nxClinNote { margin: 0; font-size: 11px; color: #94a3b8; font-style: italic; }

.nxClinComboBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.nxClinComboLabel { font-size: 12px; color: #64748b; font-weight: 600; }
.nxClinComboBtn {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.nxClinComboBtn:hover { background: #eef2f7; border-color: #94a3b8; }

.nxClinAddBtn {
  align-self: flex-start;
  border: 1px dashed #cbd5e1;
  background: #fff;
  color: #2563eb;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.nxClinAddBtn:hover { border-color: #2563eb; background: #eff6ff; }

/* Rx rows (redesigned) */
.nxRxRowHead { display: flex; align-items: center; gap: 8px; }
.nxRxRowTitle { font-size: 12px; font-weight: 700; color: #334155; flex: 1; }
.nxRxPreset {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  background: #fff;
  max-width: 200px;
}
.nxRxFull { width: 100%; }

/* Clinical item rows (catalog picker + tooth + qty + price) */
.nxClinItemRow {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nxClinItemTop { display: flex; align-items: center; gap: 8px; }
.nxItemPickWrap { position: relative; flex: 1; }
.nxItemPickWrap .nxItemDesc { width: 100%; }
.nxItemSuggest {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
  max-height: 240px;
  overflow-y: auto;
  z-index: 30;
}
.nxItemSuggestRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}
.nxItemSuggestRow:last-child { border-bottom: 0; }
.nxItemSuggestRow:hover { background: #f1f5f9; }
.nxItemSuggestEmpty { cursor: default; color: #94a3b8; font-style: italic; }
.nxItemSuggestPrice { font-weight: 700; color: #0f172a; }
.nxClinItemBottom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-left: 30px; }
.nxItemQtyCell, .nxClinItemBottom .nxItemPriceCell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #64748b;
}
.nxItemQty { width: 56px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 6px; font-size: 12px; background: #fff; }
.nxClinItemBottom .nxItemPrice { width: 80px; }

/* Next visit grid */
.nxNextGrid { display: flex; flex-wrap: wrap; gap: 10px; }
.nxNextField { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.nxNextFieldFull { flex-basis: 100%; }
.nxNextFieldLabel { font-size: 11px; font-weight: 600; color: #64748b; }
.nxNextType, .nxNextTime {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  background: #fff;
}

/* 2026-06-25 — Next visit v2: type textarea + interval + duration chips + note */
.nxNextBlock {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
}
.nxNextBlock .nxNextField { gap: 6px; min-width: 0; }
.nxNextBlock .nxNextFieldLabel { font-size: 12px; color: #334155; }
.nxNextTypeArea,
.nxNextNote {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  resize: vertical;
  min-height: 56px;
  line-height: 1.4;
  color: #0f172a;
}
.nxNextTypeArea:focus,
.nxNextNote:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.nxNextHint {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}
.nxNextIntervalRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nxNextIntervalNum {
  width: 72px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  background: #fff;
  text-align: center;
  -moz-appearance: textfield;
}
.nxNextIntervalNum::-webkit-outer-spin-button,
.nxNextIntervalNum::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nxNextIntervalNum:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.nxNextIntervalUnit {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  min-width: 92px;
}
.nxNextIntervalUnit:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.nxNextIntervalFromNow {
  font-size: 12px;
  color: #64748b;
}
.nxNextDurationChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nxNextDurationChip {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.nxNextDurationChip:hover { background: #f1f5f9; }
.nxNextDurationChipOn {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}
.nxNextDurationChipOn:hover { background: #1e40af; border-color: #1e40af; }
.nxNextDurationChipClear {
  background: #fff;
  color: #64748b;
  border-style: dashed;
}
.nxNextDurationChipClear.nxNextDurationChipOn {
  background: #475569;
  border-color: #475569;
  color: #fff;
  border-style: solid;
}
@media (max-width: 480px) {
  .nxNextIntervalNum { width: 64px; }
  .nxNextIntervalUnit { min-width: 80px; }
  .nxNextDurationChip { padding: 6px 11px; font-size: 11px; }
}

/* Sticky footer save bar */
.nxClinicalStickyFoot {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  z-index: 10;
  margin-top: 4px;
}
.nxClinSaveHint { font-size: 11px; color: #94a3b8; }
/* v3g: match editorBtnSave (the "Save entry" button) visual */
.nxClinicalSaveBtn {
  background: var(--brand, #2563eb);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nxClinicalSaveBtn:hover { background: var(--brand-deep, #1e40af); }
.nxClinicalSaveBtn:disabled { opacity: 0.55; cursor: wait; }

@media (max-width: 720px) {
  .nxClinItemBottom { padding-left: 0; }
  .nxRxPreset { max-width: 140px; }
}

/* ============ 2026-06-17 clinical Rx v2 ============ */
/* Collapsible Prescription card */
.nxClinicalCardCollapsible .nxClinCardHead {
  cursor: pointer;
  user-select: none;
  margin: -16px -16px 0;
  padding: 16px;
  border-radius: 12px;
}
.nxClinicalCardCollapsible .nxClinCardHead:hover { background: #f8fafc; }
.nxClinicalCardCollapsible.nxClinicalCardExpanded .nxClinCardHead {
  border-bottom: 1px solid #e2e8f0;
  border-radius: 12px 12px 0 0;
  margin-bottom: 12px;
}
.nxClinicalCardChevron {
  font-size: 11px;
  color: #94a3b8;
  margin-left: 4px;
}
.nxClinicalCardBody[hidden] { display: none; }

/* ============================================================
   Variant B: 3-column clinical tile row + overlay (2026-06-17)
   ============================================================ */
.nxClinicalRowLayout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 16px;
}
.nxClinicalRowLabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #64748b;
  text-transform: uppercase;
  padding: 0 2px;
}
.nxClinicalTileRow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}
.nxClinicalTile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  text-align: left;
  padding: 12px 14px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
  font: inherit;
  color: inherit;
  min-height: 92px;
}
.nxClinicalTile:hover {
  border-color: #94a3b8;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.nxClinicalTile:active { transform: translateY(1px); }
.nxClinicalTile:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.nxClinicalTileHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.nxClinicalTileLabel {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #64748b;
  text-transform: uppercase;
}
.nxClinicalTilePill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nxClinicalTileEmpty {
  background: #f8fafc;
  border-style: dashed;
  border-color: #cbd5e1;
}
.nxClinicalTileEmpty .nxClinicalTilePill {
  background: #e2e8f0;
  color: #64748b;
}
.nxClinicalTileSet {
  background: #ffffff;
  border-color: #bfdbfe;
}
.nxClinicalTileSet .nxClinicalTilePill {
  background: #dbeafe;
  color: #1d4ed8;
}
.nxClinicalTileValue {
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
  word-break: break-word;
}
.nxClinicalTileEmpty .nxClinicalTileValue { color: #94a3b8; font-weight: 500; }
.nxClinicalTileSub {
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 640px) {
  .nxClinicalTileRow { grid-template-columns: 1fr; }
  .nxClinicalTile { min-height: 72px; }
  .nxClinicalTileValue { font-size: 16px; }
}

/* Overlay */
.nxClinicalOverlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.nxClinicalOverlay[hidden] { display: none; }
.nxClinicalOverlayBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.nxClinicalOverlayPanel {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  width: min(640px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
  overflow: hidden;
}
.nxClinicalOverlayHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.nxClinicalOverlayTitle {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}
.nxClinicalOverlayClose {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
}
.nxClinicalOverlayClose:hover { background: #e2e8f0; color: #0f172a; }

/* 2026-07-01 — Lab handoff pane: teal gradient header + patient chip
   (matches approved mockup qa_labpopup_desktop.png). Scoped via body class. */
body.nxClinOverlayPaneLab .nxClinicalOverlayHead {
  background: linear-gradient(135deg, #0f766e, #0d9488);
  border-bottom: none;
  color: #fff;
  align-items: flex-start;
  padding: 20px 24px;
}
body.nxClinOverlayPaneLab .nxLabHeadMain {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
body.nxClinOverlayPaneLab .nxLabHeadKick {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .92;
  color: #fff;
}
body.nxClinOverlayPaneLab .nxLabHeadKick svg { width: 15px; height: 15px; }
body.nxClinOverlayPaneLab .nxClinicalOverlayTitle {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
}
body.nxClinOverlayPaneLab .nxLabHeadChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: rgba(255, 255, 255, .16);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
body.nxClinOverlayPaneLab .nxLabHeadChip b { font-weight: 800; }
body.nxClinOverlayPaneLab .nxClinicalOverlayClose {
  color: rgba(255, 255, 255, .85);
  flex: 0 0 auto;
}
body.nxClinOverlayPaneLab .nxClinicalOverlayClose:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.nxClinOverlayPane {
  padding: 16px 18px 18px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.nxClinOverlayPane[hidden] { display: none; }

body.nxClinOverlayOpen { overflow: hidden; }

/* Inline Rx drug palette (shown inside the Prescription overlay pane) */
.nxRxPaletteWrap {
  margin-top: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  padding: 10px 10px 12px;
}
.nxRxPaletteHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.nxRxPaletteLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #475569;
  text-transform: uppercase;
}
.nxRxPaletteSearch {
  flex: 1 1 200px;
  max-width: 280px;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
}
.nxRxPaletteSearch:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.nxRxPalette { display: flex; flex-direction: column; gap: 10px; }
.nxRxPaletteEmpty { color: #94a3b8; font-size: 13px; text-align: center; padding: 12px; }
.nxRxPaletteGroup { display: flex; flex-direction: column; gap: 6px; }
.nxRxPaletteGroup[hidden] { display: none; }
.nxRxPaletteGroupHead {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #1d4ed8;
  text-transform: uppercase;
}
.nxRxPaletteGroupCount {
  color: #64748b;
  font-weight: 500;
  margin-left: 4px;
}
.nxRxPaletteGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
}
.nxRxPaletteCard {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  text-align: left;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.1s ease, background 0.1s ease, transform 0.05s ease;
}
.nxRxPaletteCard:hover { border-color: #2563eb; background: #eff6ff; }
.nxRxPaletteCard:active { transform: translateY(1px); }
.nxRxPaletteCard[hidden] { display: none; }
.nxRxPaletteCardName {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
}
.nxRxPaletteCardSub {
  font-size: 11px;
  color: #64748b;
  line-height: 1.3;
}
.nxRxPaletteCardAdded {
  border-color: #16a34a !important;
  background: #dcfce7 !important;
}
.nxRxPaletteFoot {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.nxClinAddBtnGhost {
  background: transparent;
  color: #2563eb;
  border: 1px dashed #93c5fd;
}
.nxClinAddBtnGhost:hover { background: #eff6ff; border-style: solid; }

/* ============================================================
   Rx pane v2 — modern redesign (2026-06-17)
   ============================================================ */
.nxRxPaneV2 { padding-bottom: 80px; /* room for sticky footer */ }

/* Allergy banner v2 — red, urgent */
.nxAllergyBannerV2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 10px;
  color: #991b1b;
  font-size: 13px;
  margin-bottom: 14px;
}
.nxAllergyBannerV2[hidden] { display: none !important; }
.nxAllergyBannerV2 .nxAllergyIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.nxAllergyBannerV2 strong { color: #7f1d1d; font-weight: 700; }

/* Section labels */
.nxRxSectionLabelRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}
.nxRxSectionLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nxRxSectionIcon { color: #eab308; font-size: 13px; }
.nxRxSectionLabelCount {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Drug row v2 — added prescription cards */
.nxRxRowV2 {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #94a3b8;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.nxRxListEmpty {
  font-size: 13px;
  color: #94a3b8;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.nxRxRow_antibiotic    { border-left-color: #2563eb; }
.nxRxRow_analgesic     { border-left-color: #f97316; }
.nxRxRow_antiseptic    { border-left-color: #14b8a6; }
.nxRxRow_antihistamine { border-left-color: #a855f7; }
.nxRxRow_other         { border-left-color: #94a3b8; }
.nxRxRowMain { flex: 1 1 auto; min-width: 0; }
.nxRxRowHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.nxRxRowIndex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #1e293b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.nxRxRowName {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
}
.nxRxRowCatBadge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.nxRxRowCatBadge_antibiotic    { background: #dbeafe; color: #1d4ed8; }
.nxRxRowCatBadge_analgesic     { background: #ffedd5; color: #c2410c; }
.nxRxRowCatBadge_antiseptic    { background: #ccfbf1; color: #0f766e; }
.nxRxRowCatBadge_antihistamine { background: #f3e8ff; color: #7e22ce; }
.nxRxRowCatBadge_other         { background: #f1f5f9; color: #475569; }
.nxRxRowChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.nxRxDoseChip {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 3px 10px;
}
.nxRxRowSub {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}
.nxRxRowSubMuted { color: #94a3b8; font-style: italic; }

.nxRxRowActions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.12s ease;
}
.nxRxRowV2:hover .nxRxRowActions { opacity: 1; }
.nxRxIconBtn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nxRxIconBtn:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
.nxRxIconBtnRemove:hover { color: #dc2626; background: #fef2f2; border-color: #fecaca; }

/* Category filter tabs */
.nxRxCatTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.nxRxCatTab {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.nxRxCatTab:hover { background: #f8fafc; border-color: #cbd5e1; }
.nxRxCatTabActive {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.nxRxCatTabActive:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* Palette search with icon */
.nxRxPaletteSearchWrap {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
}
.nxRxPaletteSearchIcon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
  opacity: 0.6;
}
.nxRxPaletteWrap .nxRxPaletteSearch {
  width: 100%;
  max-width: none;
  padding-left: 32px;
  background: #fff;
}

/* Palette group head with color dot */
.nxRxPaletteGroupHead {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nxRxPaletteGroupDot,
.nxRxPaletteDot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.nxRxPaletteDot_antibiotic    { background: #2563eb; }
.nxRxPaletteDot_analgesic     { background: #f97316; }
.nxRxPaletteDot_antiseptic    { background: #14b8a6; }
.nxRxPaletteDot_antihistamine { background: #a855f7; }
.nxRxPaletteDot_other         { background: #94a3b8; }

/* Palette card v2 — 3-col grid, hover lift, + affordance */
.nxRxPaletteGrid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.nxRxPaletteCard {
  position: relative;
  padding: 10px 12px 10px 14px;
  align-items: flex-start;
  gap: 3px;
}
.nxRxPaletteCard .nxRxPaletteDot {
  position: absolute;
  top: 10px;
  left: 8px;
}
.nxRxPaletteCard .nxRxPaletteCardName,
.nxRxPaletteCard .nxRxPaletteCardSub { padding-left: 10px; }
.nxRxPalettePlus {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.nxRxPaletteCard:hover .nxRxPalettePlus { opacity: 1; }
.nxRxPaletteCard:hover {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

/* Sticky footer with Done button */
.nxRxPaneFooter {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 16px -18px -18px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nxRxCustomLink {
  background: transparent;
  border: none;
  color: #2563eb;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 4px;
}
.nxRxCustomLink:hover { text-decoration: underline; }
.nxRxDoneBtn {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 9px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}
.nxRxDoneBtn:hover { background: #1d4ed8; }
.nxRxDoneBtn:active { transform: translateY(1px); }

/* Combo bar v2 — lavender chips */
.nxRxPaneV2 .nxClinComboBar { padding: 0; background: transparent; border: none; }
.nxRxPaneV2 .nxClinComboBtn {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.nxRxPaneV2 .nxClinComboBtn:hover { background: #ede9fe; border-color: #c4b5fd; }

@media (max-width: 640px) {
  .nxRxPaletteGrid { grid-template-columns: 1fr; }
  .nxRxRowActions { opacity: 1; }
  .nxRxRowName { font-size: 14px; }
}


@media (max-width: 640px) {
  .nxClinicalOverlay { padding: 0; align-items: stretch; }
  .nxClinicalOverlayPanel {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* Drug rows — display mode (read-only) */
.nxDrugRowDisplay {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
}
.nxDrugRowMain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nxDrugRowNameLine { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nxDrugRowName { font-size: 13px; font-weight: 700; color: #0f172a; }
.nxDrugRowDose {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #e2e8f0;
  border-radius: 999px;
  padding: 1px 8px;
}
.nxDrugRowDetail { font-size: 12px; color: #475569; }
.nxDrugRowMuted { color: #94a3b8; font-style: italic; }
.nxDrugRowSched { font-size: 11px; color: #64748b; }
.nxDrugRowActions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nxDrugRowEditBtn, .nxDrugRowDoneBtn {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #2563eb;
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.nxDrugRowEditBtn:hover, .nxDrugRowDoneBtn:hover { border-color: #2563eb; background: #eff6ff; }
.nxDrugRowDoneBtn {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}
.nxDrugRowDoneBtn:hover { background: #1e293b; border-color: #1e293b; }
.nxDrugRowRemoveBtn {
  border: 1px solid transparent;
  background: none;
  color: #94a3b8;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
}
.nxDrugRowRemoveBtn:hover { color: #dc2626; background: #fef2f2; }

/* Drug rows — edit mode */
.nxDrugRowEdit {
  background: #fff;
  border: 1px solid #2563eb;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nxDrugRowEdit .nxRxGrid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 8px;
}
.nxDrugRowEdit .nxRxInput {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.nxDrugRowEdit .nxRxFull { width: 100%; }
.nxDrugRowEdit .nxRxRemove {
  border: none; background: none; color: #94a3b8;
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.nxDrugRowEdit .nxRxRemove:hover { color: #dc2626; }
.nxDrugRowEdit .nxDrugRowActions { justify-content: flex-end; }
.nxRxInputError { border-color: #dc2626 !important; background: #fef2f2 !important; }

/* Drug picker modal */
.nxClinicalDrugPickerOverlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10000;
}
.nxClinicalDrugPickerModal {
  background: #fff;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nxDrugPickerHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
}
.nxDrugPickerTitle { font-size: 15px; font-weight: 700; color: #0f172a; }
.nxDrugPickerClose {
  background: none; border: none; font-size: 22px; line-height: 1;
  color: #94a3b8; cursor: pointer; padding: 0 6px; border-radius: 4px;
}
.nxDrugPickerClose:hover { background: #f1f5f9; color: #334155; }
.nxDrugPickerSearchWrap { padding: 12px 18px; border-bottom: 1px solid #f1f5f9; }
.nxDrugPickerSearch {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
}
.nxDrugPickerBody { padding: 12px 18px; overflow-y: auto; flex: 1; }
.nxClinicalDrugPickerCategory { margin-bottom: 12px; }
.nxClinicalDrugPickerCategory[hidden] { display: none; }
.nxDrugPickerCatHead {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.nxDrugPickerCatHead:hover { background: #f1f5f9; }
.nxDrugPickerCatChevron { font-size: 10px; color: #94a3b8; }
.nxDrugPickerCatName { flex: 1; text-align: left; }
.nxDrugPickerCatCount {
  font-size: 11px; font-weight: 600; color: #64748b;
  background: #e2e8f0; border-radius: 999px; padding: 1px 8px;
}
.nxDrugPickerCatBody { padding: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.nxDrugPickerCatBody[hidden] { display: none; }
.nxClinicalDrugPresetCard {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
}
.nxClinicalDrugPresetCard[hidden] { display: none; }
.nxClinicalDrugPresetCard:hover { border-color: #2563eb; background: #f8faff; }
.nxClinicalDrugPresetCard .nxDrugPresetCheck { margin-top: 2px; }
.nxDrugPresetMeta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nxDrugPresetName { font-size: 13px; font-weight: 600; color: #0f172a; }
.nxDrugPresetSub { font-size: 11px; color: #64748b; }
.nxDrugPickerNoMatch, .nxDrugPickerEmpty { font-size: 12px; color: #94a3b8; font-style: italic; padding: 8px 4px; }
.nxDrugPickerNoMatch[hidden] { display: none; }
.nxDrugPickerFoot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid #e2e8f0;
}
.nxDrugPickerFootSpacer { flex: 1; }
.nxDrugPickerBtn {
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.nxDrugPickerBtnGhost { border: 1px solid #cbd5e1; background: #fff; color: #334155; }
.nxDrugPickerBtnGhost:hover { background: #f1f5f9; }
.nxDrugPickerBtnPrimary { border: 1px solid #2563eb; background: #2563eb; color: #fff; }
.nxDrugPickerBtnPrimary:hover { background: #1d4ed8; }
.nxDrugPickerBtnPrimary:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 560px) {
  .nxDrugRowEdit .nxRxGrid { grid-template-columns: 1fr 1fr; }
  .nxDrugRowDisplay { flex-direction: column; }
  .nxDrugRowActions { width: 100%; justify-content: flex-end; }
}

/* ===================== 2026-06-17 Settings tab ===================== */
.nxSettingsBody { padding: 0; height: 100%; overflow-y: auto; background: #f5f7fa; }
.nxSettingsLoading { padding: 40px; text-align: center; color: #6b7280; font-size: 14px; }
.nxSettingsError { padding: 24px; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; margin: 16px; font-size: 14px; }
.nxSettingsLayout { max-width: 1080px; margin: 0 auto; padding: 18px 22px 80px; }
.nxSettingsSubtabs { display: flex; gap: 6px; border-bottom: 1px solid #e5e7eb; margin-bottom: 18px; }
.nxSettingsSubtab { appearance: none; background: none; border: none; padding: 10px 16px; font-size: 14px; font-weight: 600; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nxSettingsSubtab:hover { color: #111827; }
.nxSettingsSubtab.active { color: #2563eb; border-bottom-color: #2563eb; }
.nxSettingsPanel { }
.nxSettingsPageHeader { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #e5e7eb; }
.nxSettingsPageTitle { margin: 0 0 4px 0; font-size: 22px; font-weight: 700; color: #111827; line-height: 1.2; }
.nxSettingsPageSubtitle { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.5; max-width: 720px; }
.nxSettingsGroupHeader { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 6px 6px 6px; margin-top: 6px; border-bottom: 1px solid #e5e7eb; }
.nxSettingsGroupHeader:first-child { margin-top: 0; padding-top: 4px; }
.nxSettingsGroupName { font-size: 13px; font-weight: 700; color: #2563eb; letter-spacing: .02em; text-transform: uppercase; }
.nxSettingsGroupCount { font-size: 11px; font-weight: 500; color: #9ca3af; letter-spacing: .02em; }
.nxSettingsToolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nxSettingsAddBtn { appearance: none; border: 1px solid #2563eb; background: #2563eb; color: #fff; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 8px; cursor: pointer; }
.nxSettingsAddBtn:hover { background: #1d4ed8; }
.nxSettingsSearch { flex: 1; max-width: 320px; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; font-family: inherit; }
.nxSettingsSearch:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.nxSettingsTable { display: flex; flex-direction: column; gap: 6px; }
.nxSettingsRow { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr 0.9fr auto; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 13px; color: #1f2937; }
.nxSettingsRowInactive { opacity: .6; }
.nxSettingsRowExpanded { display: block; border-color: #2563eb; box-shadow: 0 1px 6px rgba(37,99,235,.12); }
.nxCellCode { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; color: #374151; }
.nxCellName { min-width: 0; }
.nxCellName strong { font-weight: 600; color: #111827; }
.nxNameZh { display: block; font-size: 12px; color: #6b7280; margin-top: 1px; }
.nxColorSwatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: middle; border: 1px solid rgba(0,0,0,.12); }
.nxBadgeOn { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #d1fae5; color: #065f46; }
.nxBadgeOff { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #e5e7eb; color: #6b7280; }
.nxCellActions { text-align: right; }
.nxSettingsEditBtn { appearance: none; border: 1px solid #d1d5db; background: #fff; color: #374151; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 7px; cursor: pointer; }
.nxSettingsEditBtn:hover { background: #f9fafb; border-color: #9ca3af; }
.nxSettingsEmpty { padding: 40px; text-align: center; color: #9ca3af; font-size: 14px; background: #fff; border: 1px dashed #d1d5db; border-radius: 10px; }
.nxSettingsEditGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.nxSettingsEditGrid label { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: #374151; gap: 4px; }
.nxSettingsEditGrid input[type="text"], .nxSettingsEditGrid input[type="number"] { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 13px; font-family: inherit; font-weight: 400; color: #111827; }
.nxSettingsEditGrid input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.nxSettingsEditGrid input:disabled { background: #f3f4f6; color: #6b7280; }
.nxSettingsCheck { flex-direction: row !important; align-items: center; gap: 7px !important; align-self: end; padding-bottom: 8px; }
.nxSettingsCheck input { width: 16px; height: 16px; }
.nxLockHint { font-weight: 400; color: #9ca3af; font-size: 11px; }
.nxSettingsPriceBlock { background: #f9fafb; border: 1px solid #eef0f3; border-radius: 9px; padding: 12px 14px; margin-bottom: 14px; }
.nxSettingsPriceTitle { font-size: 12px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.nxSettingsPriceGrid { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 10px; }
.nxPriceField { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: #374151; gap: 4px; }
.nxPriceField input { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 13px; font-family: inherit; font-weight: 400; color: #111827; }
.nxPriceField input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.nxSettingsEditActions { display: flex; gap: 8px; }
.nxSettingsSaveBtn { appearance: none; border: 1px solid #16a34a; background: #16a34a; color: #fff; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 8px; cursor: pointer; }
.nxSettingsSaveBtn:hover { background: #15803d; }
.nxSettingsSaveBtn:disabled { opacity: .6; cursor: not-allowed; }
.nxSettingsCancelBtn { appearance: none; border: 1px solid #d1d5db; background: #fff; color: #374151; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 8px; cursor: pointer; }
.nxSettingsCancelBtn:hover { background: #f9fafb; }
.nxSettingsDeleteBtn { appearance: none; border: 1px solid #dc2626; background: #fff; color: #dc2626; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 8px; cursor: pointer; margin-left: auto; }
.nxSettingsDeleteBtn:hover { background: #fef2f2; }
.nxSettingsDeleteBtn:disabled { opacity: .6; cursor: not-allowed; }
.nxSettingsToast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: #111827; color: #fff; font-size: 13px; font-weight: 500; padding: 11px 20px; border-radius: 10px; box-shadow: 0 10px 40px -8px rgba(0,0,0,.5); z-index: 10000; animation: nxToastIn .18s ease-out; }
.nxSettingsToastErr { background: #dc2626; }
@keyframes nxToastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 720px) {
  .nxSettingsRow { grid-template-columns: 1fr auto; }
  .nxSettingsRow > div:nth-child(2), .nxSettingsRow > div:nth-child(3), .nxSettingsRow > div:nth-child(4) { display: none; }
  .nxSettingsRowExpanded { grid-template-columns: none; }
  .nxSettingsRowExpanded > div { display: block !important; }
  .nxSettingsPriceGrid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Lab Work settings editor (2026-06-29)
   ============================================================ */
.nxLabSettingsSection { margin-top: 26px; }
.nxLabSettingsSection:first-of-type { margin-top: 8px; }
.nxLabSettingsSectionHead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.nxLabSettingsSectionTitle { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }
.nxLabSettingsSectionHint { font-size: 12px; color: #6b7280; }
/* Lab vendor rows: name | notes | sort | status | actions */
#labVendorTable .nxSettingsRow:not(.nxSettingsRowExpanded) { grid-template-columns: 1.6fr 2fr 0.7fr 0.9fr auto; }
/* Lab work-type rows: code | label | sub-material | sort | status | actions */
#labTypeTable .nxSettingsRow:not(.nxSettingsRowExpanded) { grid-template-columns: 0.6fr 1.4fr 1.8fr 0.7fr 0.9fr auto; }
.nxLabTypeBase { color: #9ca3af; font-style: italic; }
.nxBadgeAttr { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #ede9fe; color: #6d28d9; font-size: 11px; font-weight: 600; vertical-align: middle; }
@media (max-width: 720px) {
  #labVendorTable .nxSettingsRow:not(.nxSettingsRowExpanded),
  #labTypeTable .nxSettingsRow:not(.nxSettingsRowExpanded) { grid-template-columns: 1fr auto; }
}

/* ============================================================
   Practitioner Profile (v45) — card grid, edit + hours drawers
   ============================================================ */
.nxPracList { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.nxPracCard { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.nxPracHead { display: grid; grid-template-columns: 1.6fr 1.4fr auto; align-items: center; gap: 18px; }
.nxPracName { min-width: 0; }
.nxPracNameEn { font-size: 16px; font-weight: 700; color: #111827; line-height: 1.25; }
.nxPracNameZh { font-size: 14px; color: #4b5563; margin-top: 2px; }
.nxPracMeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nxPracQual { font-size: 13px; color: #1f2937; font-family: ui-monospace, Menlo, monospace; word-break: break-word; }
.nxPracRole { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.nxPracActions { display: flex; gap: 8px; flex-shrink: 0; }
.nxPracShiftSummary { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e5e7eb; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: #4b5563; line-height: 1.55; }
.nxPracShiftChip { display: inline-block; }
.nxPracShiftChip b { color: #2563eb; font-weight: 600; margin-right: 4px; }
.nxPracShiftNone { color: #9ca3af; font-style: italic; }
.nxPracDrawer { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e5e7eb; }
.nxLockHint { font-size: 11px; font-weight: 400; color: #9ca3af; margin-top: 2px; font-style: italic; }
.nxPracHoursHead { font-size: 12px; color: #6b7280; margin-bottom: 10px; }
.nxPracHoursGrid { display: flex; flex-direction: column; gap: 4px; background: #f9fafb; border: 1px solid #eef0f3; border-radius: 9px; padding: 10px; }
.nxPracHoursGridHead, .nxPracHoursGridRow { display: grid; grid-template-columns: 60px repeat(3, 1fr); gap: 10px; align-items: center; }
.nxPracHoursGridHead > div { font-size: 11px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: .04em; text-align: center; }
.nxPracHoursGridHead > div:first-child { text-align: left; }
.nxPracHoursDay { font-size: 12px; font-weight: 600; color: #111827; }
.nxPracHoursCell { display: flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px 6px; }
.nxPracHoursCell input[type="time"] { flex: 1; min-width: 0; padding: 4px 6px; border: none; font-size: 12px; font-family: ui-monospace, Menlo, monospace; color: #111827; background: transparent; }
.nxPracHoursCell input[type="time"]:focus { outline: none; background: #eff6ff; }
.nxPracHoursDash { color: #9ca3af; font-size: 12px; }
/* v46: dual AM+PM shift cell */
.nxPracHoursCellDual { flex-direction: column; align-items: stretch; gap: 4px; padding: 6px; }
.nxPracHoursCellDual .nxPracHoursShift { display: flex; align-items: center; gap: 4px; }
.nxPracHoursShiftLbl { font-size: 10px; font-weight: 700; color: #6b7280; letter-spacing: .05em; min-width: 22px; text-align: center; }
@media (max-width: 720px) {
  .nxPracHead { grid-template-columns: 1fr; }
  .nxPracActions { justify-content: flex-start; }
  .nxPracHoursGridHead, .nxPracHoursGridRow { grid-template-columns: 50px repeat(3, 1fr); gap: 6px; }
}

/* ============================================================
   Prescription Settings (v45) — Drugs + ZH Terms sub-panes
   ============================================================ */
.nxRxSettingsToggle { display: inline-flex; padding: 3px; background: #f3f4f6; border-radius: 10px; margin: 6px 0 16px 0; gap: 2px; }
.nxRxSettingsToggleBtn { appearance: none; border: none; background: transparent; padding: 8px 18px; font-size: 13px; font-weight: 600; color: #6b7280; cursor: pointer; border-radius: 8px; }
.nxRxSettingsToggleBtn:hover { color: #111827; }
.nxRxSettingsToggleBtn.active { background: #fff; color: #2563eb; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

#drugTable .nxSettingsRow:not(.nxSettingsRowExpanded) { grid-template-columns: 2fr 0.9fr 1.2fr 0.7fr 0.7fr auto; }
#termTable .nxSettingsRow:not(.nxSettingsRowExpanded) { grid-template-columns: 1.4fr 1.6fr 0.9fr auto; }
@media (max-width: 720px) {
  #drugTable .nxSettingsRow:not(.nxSettingsRowExpanded),
  #termTable .nxSettingsRow:not(.nxSettingsRowExpanded) { grid-template-columns: 1fr auto; }
}

.nxDrugPreviewWrap { margin: 14px 0; padding: 14px; background: #f9fafb; border: 1px solid #eef0f3; border-radius: 9px; }
.nxDrugPreviewTitle { font-size: 11px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.nxDrugPreviewGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nxDrugPreview { background: #fff; border: 1px dashed #d1d5db; border-radius: 8px; padding: 12px 14px; min-height: 100px; font-size: 12px; color: #1f2937; line-height: 1.55; }
.nxDrugPreviewEn { font-family: ui-sans-serif, system-ui, sans-serif; }
.nxDrugPreviewZh { font-family: "PingFang HK", "PingFang SC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif; }
.nxDrugPreviewHead { font-weight: 700; font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #e5e7eb; }
.nxDrugPreviewDrug { font-weight: 700; color: #111827; font-size: 13px; margin-bottom: 4px; }
.nxDrugPreviewLine { color: #374151; }
.nxDrugPreviewExtra { color: #6d28d9; font-weight: 500; margin-top: 3px; }
@media (max-width: 720px) {
  .nxDrugPreviewGrid { grid-template-columns: 1fr; }
}

/* ============================================================
   Rx pane v3 — compact + inline edit (2026-06-17)
   ============================================================ */
.nxRxPaneV3 { padding-bottom: 12px; }

/* Drug row v3 — single-row compact with inline editable inputs */
.nxRxRowV3 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #94a3b8;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
}
.nxRxRowV3 .nxRxRowHead {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-bottom: 0;
}
.nxRxRowV3 .nxRxRowIndex {
  width: 18px;
  height: 18px;
  min-width: 18px;
  font-size: 10px;
  background: #1e293b;
}
.nxRxRowV3 .nxRxRowName {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.nxRxRowV3 .nxRxRowCatBadge {
  font-size: 9px;
  padding: 1px 6px;
  flex-shrink: 0;
}
.nxRxRowV3 .nxRxRowSub {
  font-size: 11.5px;
  color: #94a3b8;
  font-style: italic;
  margin-left: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inline editable input group */
.nxRxInlineFields {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.nxRxInlineGroup {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nxRxInput {
  width: 36px;
  height: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0 4px;
  -moz-appearance: textfield;
}
.nxRxInput::-webkit-outer-spin-button,
.nxRxInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.nxRxInput:focus {
  outline: none;
  border-color: #2563eb;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.nxRxInputSuffix, .nxRxInputPrefix {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

/* Single trash button on the right */
.nxRxRowV3 .nxRxIconBtnRemove {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  font-size: 13px;
}

/* Hide v2-specific UI in v3 pane */
.nxRxPaneV3 .nxRxRowActions { display: none; }
.nxRxPaneV3 .nxRxRowChips { display: none; }

/* Add-drugs section label row — One Set chip on the right */
.nxRxPaneV3 #nxRxComboBtns {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}
.nxRxPaneV3 .nxClinComboChip {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  text-transform: none;
}
.nxRxPaneV3 .nxClinComboChip:hover { background: #ede9fe; border-color: #c4b5fd; }

/* Palette v3 — name-only cards, tighter grid */
.nxRxPaneV3 .nxRxPaletteGroup { margin-bottom: 8px; }
.nxRxPaneV3 .nxRxPaletteGrid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.nxRxPaletteCardV3 {
  padding: 8px 10px 8px 22px;
  min-height: 0;
}
.nxRxPaletteCardV3 .nxRxPaletteDot {
  top: 50%;
  transform: translateY(-50%);
  left: 9px;
}
.nxRxPaletteCardV3 .nxRxPaletteCardName {
  font-size: 12.5px;
  font-weight: 500;
  padding-left: 0;
}
/* Hide all palette v2 extras */
.nxRxPaneV3 .nxRxPaletteCardSub,
.nxRxPaneV3 .nxRxPalettePlus,
.nxRxPaneV3 .nxRxCatTabs,
.nxRxPaneV3 .nxRxPaletteHead,
.nxRxPaneV3 .nxRxPaletteSearch,
.nxRxPaneV3 .nxRxPaletteSearchWrap { display: none; }
.nxRxPaneV3 .nxRxPaletteWrap { padding: 0; border: none; background: transparent; }

/* Make sure panel footer (Done button) stays visible at the bottom */
.nxClinicalOverlayPanel {
  display: flex;
  flex-direction: column;
}
.nxClinicalOverlayPanel .nxClinOverlayPane {
  flex: 1 1 auto;
  overflow-y: auto;
}
.nxClinicalOverlayFoot {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  padding: 12px 18px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.nxClinicalOverlayDoneBtn {
  appearance: none;
  border: none;
  background: #0f172a;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.05s ease;
  font-family: inherit;
  letter-spacing: 0.01em;
}
.nxClinicalOverlayDoneBtn:hover { background: #1e293b; }
.nxClinicalOverlayDoneBtn:active { transform: translateY(1px); }
.nxClinicalOverlayDoneBtn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Cancel button (lab pane) */
.nxClinicalOverlayCancelBtn {
  appearance: none;
  background: #ffffff;
  color: #334155;
  border: 1.5px solid #e2e8f0;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 22px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease;
}
.nxClinicalOverlayCancelBtn:hover { background: #f1f5f9; }
.nxClinicalOverlayCancelBtn[hidden] { display: none; }

/* Lab pane: green "Save lab handoff", full-flex like the mockup */
body.nxClinOverlayPaneLab .nxClinicalOverlayFoot {
  justify-content: stretch;
  background: #fbfcfe;
}
body.nxClinOverlayPaneLab .nxClinicalOverlayDoneBtn {
  background: #0d9488;
  flex: 1;
  box-shadow: 0 4px 12px rgba(13, 148, 136, .28);
}
body.nxClinOverlayPaneLab .nxClinicalOverlayDoneBtn:hover { background: #0f766e; }
body.nxClinOverlayPaneLab .nxClinicalOverlayCancelBtn { flex: 0 0 auto; }

@media (max-width: 720px) {
  .nxRxInlineFields { gap: 4px; }
  .nxRxInput { width: 32px; }
  .nxRxRowV3 .nxRxRowHead { flex-wrap: wrap; }
  .nxRxRowV3 .nxRxInlineFields { margin-left: 26px; margin-top: 4px; }
}

/* ----- v3d: drug dedup + One Set combo card ----- */
.nxRxPaletteCard.nxRxPaletteCardDisabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  position: relative;
}
.nxRxPaletteCard.nxRxPaletteCardDisabled:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  transform: none;
}
.nxRxPaletteCard.nxRxPaletteCardDisabled .nxRxPaletteCardName {
  color: #64748b;
  text-decoration: line-through;
  text-decoration-color: #94a3b8;
  text-decoration-thickness: 1px;
}
.nxRxPaletteCardCheck {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
  line-height: 1;
}
/* One Set combo card — sits in the antihistamine row beside Loratadine.
   Override the column flex from .nxRxPaletteCard so ⚡ and label sit inline. */
.nxRxPaletteCardOneSet {
  border: 1px dashed #2563eb !important;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%) !important;
  color: #1d4ed8;
  font-weight: 600;
  flex-direction: row !important;
  align-items: center !important;
  padding: 8px 10px !important;
  gap: 6px !important;
}
.nxRxPaletteCardOneSet:hover {
  background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 100%) !important;
  border-color: #1d4ed8 !important;
}
.nxRxPaletteCardOneSet.nxRxPaletteCardDisabled {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #64748b;
}
.nxRxPaletteOneSetIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 14px;
  height: auto;
  font-size: 14px;
  line-height: 1;
  color: #2563eb;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 1px rgba(37,99,235,0.3));
}
.nxRxPaletteCardOneSet .nxRxPaletteCardName {
  padding-left: 0 !important;
  color: inherit;
  line-height: 1.25;
}
.nxRxPaletteCardOneSet.nxRxPaletteCardDisabled .nxRxPaletteOneSetIcon {
  color: #94a3b8;
  filter: none;
}

/* v3i: Clinical tile bullet lists (Rx + Items) */
.nxClinicalTileBullets {
  list-style: disc;
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
}
.nxClinicalTileBullets li {
  margin: 0;
  padding: 0;
  font-weight: 500;
  text-transform: none;
  word-break: break-word;
}
.nxClinicalTileSet .nxClinicalTileBullets { color: #1e293b; }
.nxClinicalTileEmptyHint { color: #94a3b8; font-size: 12px; }
/* override the 2-line clamp so all bullets render */
.nxClinicalTileSub { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
.nxClinicalTile { min-height: auto; align-items: stretch; }

/* ============================================================
   Mockup B — tile cell wrapper + footer checkbox panel
   ============================================================ */
.nxClinicalTileCell {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nxClinicalTileFooter {
  background: #f4f5f7;
  border: 1px solid #e1e4e8;
  border-radius: 0 0 10px 10px;
  border-top: 1px dashed #e2e8f0;
  padding: 0;
  margin-top: -1px; /* overlap tile bottom border */
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nxClinicalTileFooterCaption {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 6px 12px 4px;
  border-bottom: 1px solid #e1e4e8;
  line-height: 1.2;
}
.nxClinicalTileFooterRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px dashed #e2e8f0;
  cursor: pointer;
  user-select: none;
}
.nxClinicalTileFooterRow:last-child {
  border-bottom: none;
}
.nxClinicalTileFooterCb {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #2563eb;
  flex-shrink: 0;
  cursor: pointer;
}
.nxClinicalTileFooterLabel {
  font-size: 13px;
  color: #475569;
  line-height: 1.2;
  cursor: pointer;
}
.nxClinicalTileFooterCb:checked + .nxClinicalTileFooterLabel {
  color: #1d4ed8;
  font-weight: 600;
}

/* ============================================================
   v3i — Treatment Items pane redesign
   ============================================================ */
.nxItemsPaneV3 { display: flex; flex-direction: column; gap: 14px; }

.nxItemsSearchWrap { position: relative; }
.nxItemsSearchRow {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 6px 8px 6px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.nxItemsSearchRow:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.nxItemsSearchIcon { font-size: 14px; color: #64748b; }
.nxItemsSearchInput {
  flex: 1; border: none; outline: none; font-size: 14px;
  padding: 6px 4px; background: transparent; color: #0f172a;
}
.nxItemsCustomAddBtn {
  border: none; background: #2563eb; color: #fff;
  padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.nxItemsCustomAddBtn:hover { background: #1d4ed8; }

.nxItemsSuggest {
  margin-top: 6px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  max-height: 280px; overflow-y: auto;
  padding: 4px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
}
.nxItemsSuggest[hidden] { display: none; }
.nxItemsSuggestCard {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 8px 10px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 7px;
  cursor: pointer; text-align: left;
  font-size: 13px; color: #0f172a;
}
.nxItemsSuggestCard:hover { border-color: #3b82f6; background: #eff6ff; }
.nxItemsSuggestName { font-weight: 500; flex: 1; }
.nxItemsSuggestPrice { font-weight: 600; color: #475569; font-size: 12px; white-space: nowrap; }
.nxItemsSuggestEmpty {
  grid-column: 1 / -1;
  padding: 10px 12px; font-size: 13px; color: #64748b; text-align: center;
}

.nxItemsListV3 { display: flex; flex-direction: column; gap: 8px; }
.nxItemsEmptyState {
  padding: 18px; text-align: center; font-size: 13px; color: #94a3b8;
  background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px;
}

.nxItemRowV3 {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.nxItemRowTop {
  display: flex; align-items: center; gap: 8px;
}
.nxItemBadge {
  width: 22px; height: 22px; border-radius: 50%;
  background: #1e40af; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nxItemNameWrap { flex: 1; display: flex; align-items: center; gap: 8px; }
.nxItemNameInput {
  flex: 1; border: 1px solid transparent; outline: none;
  font-size: 14px; font-weight: 500; color: #0f172a;
  padding: 4px 6px; border-radius: 6px; background: transparent;
}
.nxItemNameInput:focus { border-color: #3b82f6; background: #fff; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
.nxItemCodeChip {
  font-size: 10px; color: #475569; background: #f1f5f9;
  padding: 2px 6px; border-radius: 4px; font-weight: 600; letter-spacing: 0.3px;
}
.nxItemRemove {
  border: none; background: transparent; color: #94a3b8; font-size: 18px;
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer; line-height: 1;
}
.nxItemRemove:hover { background: #fee2e2; color: #dc2626; }

.nxItemRowBottom {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-left: 30px;
}
.nxItemToothCell { display: inline-flex; }
.nxItemQtyCell, .nxItemPriceCell {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: #64748b;
}
.nxItemQtyCell input, .nxItemPriceCell input {
  width: 64px; padding: 4px 6px; border: 1px solid #e2e8f0; border-radius: 6px;
  font-size: 13px; color: #0f172a; outline: none; text-align: right;
}
.nxItemQtyCell input:focus, .nxItemPriceCell input:focus { border-color: #3b82f6; }

.nxItemsTotalRow {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; background: #f8fafc;
  border-top: 1px solid #e2e8f0; border-radius: 0 0 8px 8px;
  font-size: 13px;
}
.nxItemsTotalLabel { color: #475569; font-weight: 500; }
.nxItemsTotalValue { color: #0f172a; font-weight: 700; font-size: 15px; }

@media (max-width: 640px) {
  .nxItemsSuggest { grid-template-columns: 1fr; }
}

/* 2026-06-17 v3k — Unpaid carry-forward sidebar (Calvin-only items pane) */
.nxUnpaidSection {
  margin: 10px 0 12px;
  padding: 10px 12px 12px;
  background: rgba(254, 243, 199, 0.55); /* amber-50 low opacity */
  border-left: 4px solid #f59e0b;        /* amber-500 */
  border-radius: 8px;
}
.nxUnpaidHeader {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #92400e;                        /* amber-900 */
  margin-bottom: 8px;
  text-transform: uppercase;
}
.nxUnpaidSaveErr {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  margin-bottom: 8px;
}
.nxUnpaidGroup { margin-bottom: 10px; }
.nxUnpaidGroup:last-child { margin-bottom: 0; }
.nxUnpaidGroupHeader {
  font-size: 11.5px;
  font-weight: 700;
  color: #78350f;
  margin: 4px 0 6px;
}
.nxUnpaidGroupErr {
  color: #b91c1c;
  font-size: 11px;
  font-weight: 600;
  margin: 0 0 6px;
}
.nxUnpaidCard {
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  transition: opacity .15s ease;
}
.nxUnpaidCardStaged { opacity: 1; } /* v3l1: removed fade — green bg comes from .nxUnpaidV4CardStaged */
.nxUnpaidCardMain { display: flex; align-items: flex-start; gap: 8px; }
.nxUnpaidCardInfo { flex: 1 1 auto; min-width: 0; }
.nxUnpaidCardName {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.nxUnpaidCodeChip {
  background: #f1f5f9;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}
.nxUnpaidCardFrom {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}
.nxUnpaidCardMeta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.nxUnpaidToothPill {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
}
.nxUnpaidToothSet { background: #fef3c7; color: #92400e; }
.nxUnpaidToothEmpty { background: #f1f5f9; color: #94a3b8; }
.nxUnpaidCardPrice { font-size: 13px; font-weight: 700; color: #0f172a; }
.nxUnpaidCardActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nxUnpaidAddBtn {
  width: 26px; height: 26px;
  border: none;
  border-radius: 6px;
  background: #fef3c7;
  color: #92400e;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}
.nxUnpaidAddBtn:hover { background: #fcd34d; }
.nxUnpaidStagedBtn {
  width: 26px; height: 26px;
  border: none;
  border-radius: 6px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}
.nxUnpaidStagedChip {
  background: #dcfce7;
  color: #166534;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.nxUnpaidAdjustLink {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.nxUnpaidEditor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid #fbbf24;            /* amber-300 */
  border-radius: 6px;
  flex-wrap: wrap;
}
.nxUnpaidEditorLbl {
  font-size: 11px;
  font-weight: 700;
  color: #78350f;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nxUnpaidApplyInput {
  width: 90px;
  text-align: right;
  padding: 4px 6px;
  border: 1px solid #fbbf24;
  border-radius: 5px;
  font-size: 13px;
}
.nxUnpaidSaveBtn {
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.nxUnpaidSaveBtn:disabled { background: #cbd5e1; cursor: not-allowed; }
.nxUnpaidRemoveBtn {
  background: none;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* v3k — cashier staged chip + cap toast */
.cxVisitStagedChip {
  display: inline-block;
  margin-top: 3px;
  background: #dcfce7;
  color: #166534;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.cxUnpaidCapToast {
  display: none;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #92400e;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  margin: 0 0 12px;
}
.cxUnpaidCapToast.show { display: block; }


/* ===== v3l items pane V4-A two-column ===== */
body.nxClinOverlayPaneItems .nxClinicalOverlayPanel { width: min(1180px, calc(100vw - 32px)); }

.nxItemsPaneV3 .nxItemsV4Grid {
  display: grid;
  grid-template-columns: minmax(360px, 38%) 1fr;
  gap: 18px;
  align-items: start;
}
.nxItemsPaneV3 .nxItemsV4Left { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.nxItemsPaneV3 .nxItemsV4Right { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.nxItemsPaneV3 .nxItemsV4ColTitle,
.nxItemsPaneV3 .nxReceiptTitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #475569;
  margin: 0;
  text-transform: uppercase;
}

/* Search + custom add */
.nxItemsPaneV3 .nxItemsSearchWrap { position: relative; }
.nxItemsPaneV3 .nxItemsSearchRow { display: flex; align-items: center; gap: 8px; }
.nxItemsPaneV3 .nxItemsSearchInput { flex: 1; min-width: 0; }
.nxItemsPaneV3 .nxItemsCustomAddBtn {
  display: block;
  width: 100%;
  padding: 11px 14px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.nxItemsPaneV3 .nxItemsCustomAddBtn:hover { background: #1d4ed8; }

/* Amber unpaid block (V4) */
.nxItemsPaneV3 .nxUnpaidSection {
  background: rgba(254, 243, 199, 0.55);
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 12px;
  max-height: 320px;
  overflow-y: auto;
}
.nxUnpaidV4Header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nxUnpaidV4Title { font-size: 12.5px; font-weight: 700; color: #92400e; letter-spacing: 0.02em; }
.nxUnpaidV4Pill {
  background: #fde68a; color: #78350f; font-weight: 700; font-size: 12.5px;
  padding: 2px 10px; border-radius: 999px; white-space: nowrap;
}
.nxUnpaidV4Sub { font-size: 11.5px; color: #b45309; margin: 4px 0 10px; }
.nxUnpaidV4Body { display: flex; flex-direction: column; gap: 8px; }
.nxUnpaidV4Body .nxUnpaidGroup { display: flex; flex-direction: column; gap: 8px; }
.nxUnpaidV4Card {
  background: #fff;
  border: 1px solid #fcd9a4;
  border-radius: 8px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nxUnpaidV4Card.nxUnpaidV4CardStaged { background: #f0fdf4; border-color: #bbf7d0; }
.nxUnpaidV4CardTop { display: flex; align-items: center; gap: 6px; }
.nxUnpaidV4ItemName { font-size: 13px; font-weight: 600; color: #1e293b; flex: 1; min-width: 0; }
.nxUnpaidV4ItemCode {
  font-size: 10.5px; font-weight: 600; color: #64748b;
  background: #f1f5f9; padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.nxUnpaidV4AddBtn {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px;
  border: none; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1;
  background: #2563eb; color: #fff;
}
.nxUnpaidV4AddBtn:hover { background: #1d4ed8; }
.nxUnpaidV4AddBtn.nxUnpaidV4AddBtnStaged { background: #16a34a; }
.nxUnpaidV4AddBtn.nxUnpaidV4AddBtnStaged:hover { background: #15803d; }
.nxUnpaidV4CardMeta { font-size: 11px; color: #94a3b8; }
.nxUnpaidV4CardBottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nxUnpaidV4Tooth {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: #eef2ff; color: #4338ca;
}
.nxUnpaidV4Tooth.nxUnpaidV4ToothEmpty { background: #f1f5f9; color: #94a3b8; }
.nxUnpaidV4Price { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.nxUnpaidV4StagedBadge {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600;
  color: #15803d; background: #dcfce7; border-radius: 6px; padding: 4px 8px;
}
.nxUnpaidV4Adjust { margin-left: auto; background: none; border: none; color: #2563eb; cursor: pointer; font-size: 11.5px; font-weight: 600; text-decoration: underline; }
.nxUnpaidGroupErr { font-size: 11px; color: #b91c1c; font-weight: 600; margin: 2px 0; }

/* Quick suggestions */
.nxQuickSuggestSection { display: flex; flex-direction: column; gap: 8px; }
.nxQuickSuggestHeader { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #475569; text-transform: uppercase; }
.nxQuickSuggestList { display: flex; flex-direction: column; gap: 6px; }
.nxQuickSuggestRow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 9px 12px; cursor: pointer; text-align: left;
}
.nxQuickSuggestRow:hover { background: #eff6ff; border-color: #bfdbfe; }
.nxQuickSuggestName { flex: 1; min-width: 0; font-size: 13px; color: #1e293b; }
.nxQuickSuggestPrice { font-size: 12.5px; font-weight: 700; color: #0f172a; white-space: nowrap; }
.nxQuickSuggestPlus { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 5px; background: #2563eb; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

/* Receipt header + table (right column) */
.nxItemsPaneV3 .nxReceiptHeader { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nxItemsPaneV3 .nxReceiptMeta { font-size: 11.5px; color: #94a3b8; }
.nxItemsPaneV3 .nxItemsListV3 { display: block; }
.nxReceiptTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.nxReceiptTable thead th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  color: #64748b; text-transform: uppercase; padding: 6px 8px;
  border-bottom: 2px solid #e2e8f0; white-space: nowrap;
}
.nxReceiptTable .nxRcpColNum { width: 36px; }
.nxReceiptTable .nxRcpColTooth { width: 96px; }
.nxReceiptTable .nxRcpColQty { width: 64px; }
.nxReceiptTable .nxRcpColUnit { width: 96px; }
.nxReceiptTable .nxRcpColTotal { width: 104px; text-align: right; }
.nxReceiptTable .nxRcpColRemove { width: 34px; }
.nxReceiptTable tbody td { padding: 8px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.nxRcpRow.nxRcpRowCarried { background: #fefce8; }
.nxRcpNum { font-variant-numeric: tabular-nums; color: #94a3b8; font-weight: 600; }
.nxRcpItemName { width: 100%; border: none; background: transparent; font-size: 13px; font-weight: 600; color: #1e293b; padding: 2px 0; }
.nxRcpItemName:focus { outline: none; border-bottom: 1px solid #cbd5e1; }
.nxRcpItemChips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.nxRcpCarriedBadge { font-size: 10px; font-weight: 700; color: #a16207; background: #fef9c3; padding: 1px 6px; border-radius: 4px; }
.nxRcpQty input, .nxRcpUnit input { width: 100%; box-sizing: border-box; font-size: 13px; padding: 4px 6px; border: 1px solid #e2e8f0; border-radius: 6px; }
.nxRcpTotal { text-align: right; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nxRcpRemove button { width: 24px; height: 24px; border: none; background: #f1f5f9; color: #64748b; border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; }
.nxRcpRemove button:hover { background: #fee2e2; color: #b91c1c; }

/* Empty receipt state */
.nxRcpEmpty { text-align: center; padding: 48px 16px; color: #94a3b8; }
.nxRcpEmptyIcon { font-size: 32px; margin-bottom: 8px; }
.nxRcpEmptyTitle { font-size: 15px; font-weight: 700; color: #475569; }
.nxRcpEmptyHint { font-size: 12.5px; margin-top: 4px; }

/* REMOVED 2026-06-21: .nxItemsV4Footer* rules dropped with the footer markup
   ("N items · M carried unpaid · HK$X total") — handoff-driven flow. */

/* Neutralize legacy single-column rules inside items pane */
.nxItemsPaneV3 .nxItemsTotalRow { display: none; }

/* v3l1 FIX: override legacy .nxItemRowV3 flex when used as <tr> in receipt table */
.nxReceiptTable .nxItemRowV3 {
  display: table-row !important;
  flex-direction: initial !important;
  background: transparent;
  border: none;
  padding: 0;
  gap: 0;
}
.nxReceiptTable .nxItemRowV3.nxRcpRowCarried { background: #fefce8 !important; }
.nxReceiptTable .nxItemRowV3.nxRcpRowCarried td { background: #fefce8; }
.nxReceiptTable .nxItemRowV3 > td { display: table-cell; padding: 8px; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
.nxReceiptTable .nxItemRowV3 .nxItemNameInput { padding: 2px 4px; font-size: 13px; }
.nxReceiptTable .nxRcpItem { min-width: 180px; }
.nxReceiptTable .nxRcpItemChips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center; }
.nxReceiptTable .nxRcpCarriedBadge {
  font-size: 10px; font-weight: 700; color: #a16207;
  background: #fef9c3; padding: 2px 6px; border-radius: 4px;
  border: 1px solid #fde68a; white-space: nowrap;
}
.nxReceiptTable .nxRcpQty input, .nxReceiptTable .nxRcpUnit input {
  width: 60px; text-align: right; padding: 4px 6px;
  border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px;
}
.nxReceiptTable .nxRcpTotal { text-align: right; font-weight: 700; color: #0f172a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nxReceiptTable .nxRcpRemove .nxItemRemove {
  width: 24px; height: 24px; background: #f1f5f9; color: #64748b;
  border-radius: 6px; border: none; cursor: pointer; font-size: 14px; line-height: 1;
  padding: 0;
}
.nxReceiptTable .nxRcpRemove .nxItemRemove:hover { background: #fee2e2; color: #b91c1c; }

/* v3l1 FIX: Make staged badge more visible on green card */
.nxUnpaidV4Card.nxUnpaidV4CardStaged {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  border-left: 3px solid #16a34a;
}
.nxUnpaidV4Card .nxUnpaidV4StagedBadge {
  display: inline-flex !important; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: #15803d;
  background: #dcfce7; border-radius: 6px; padding: 4px 10px;
  margin-top: 4px; align-self: flex-start;
}

/* v3l1 FIX: Reduce left column width to give right column more room (mockup is ~40/60) */
.nxItemsPaneV3 .nxItemsV4Grid { grid-template-columns: minmax(320px, 36%) 1fr; gap: 20px; }
body.nxClinOverlayPaneItems .nxClinicalOverlayPanel { width: min(1240px, calc(100vw - 32px)); }

/* v3l2: single left column [search, +Add, quick suggestions]; right column split
   into upper (unpaid block) + lower (receipt table). */
.nxItemsPaneV3 .nxItemsV4Grid {
  display: grid;
  grid-template-columns: minmax(300px, 40%) 1fr;
  gap: 20px;
  align-items: start;
}
.nxItemsPaneV3 .nxItemsV4Right {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.nxItemsPaneV3 .nxItemsV4RightUpper {
  /* unpaid block sits here */
  max-height: 45vh;
  overflow-y: auto;
}
/* Collapse the upper area to nothing when the unpaid block is hidden (the
   common case after the derived-balance fix) so the receipt fills the column. */
.nxItemsPaneV3 .nxItemsV4RightUpper:empty,
.nxItemsPaneV3 .nxItemsV4RightUpper:has(> #nxUnpaidStages[hidden]) {
  max-height: 0; overflow: hidden;
}
.nxItemsPaneV3 .nxItemsV4RightLower {
  /* receipt table sits here */
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
}

/* Mobile / tablet: collapse to single column below 900px */
@media (max-width: 900px) {
  body.nxClinOverlayPaneItems .nxClinicalOverlayPanel { width: min(640px, 100%); }
  .nxItemsPaneV3 .nxItemsV4Grid { grid-template-columns: 1fr; }
  .nxItemsPaneV3 .nxItemsV4RightUpper { max-height: 40vh; }
  .nxReceiptTable .nxRcpColTooth, .nxReceiptTable .nxRcpColUnit { width: auto; }
}


/* v3l1 FIX 2: belt-and-suspenders for staged/carried visibility */
.nxItemsPaneV3 .nxUnpaidCard.nxUnpaidV4CardStaged,
.nxItemsPaneV3 .nxUnpaidV4Card.nxUnpaidCardStaged {
  background: #f0fdf4 !important;
  border: 1px solid #86efac !important;
  border-left: 3px solid #16a34a !important;
  opacity: 1 !important;
}
.nxItemsPaneV3 .nxUnpaidV4CardStaged .nxUnpaidV4StagedBadge,
.nxItemsPaneV3 .nxUnpaidCardStaged .nxUnpaidV4StagedBadge {
  display: inline-flex !important;
  align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  color: #15803d; background: #dcfce7;
  border-radius: 6px; padding: 4px 10px;
  margin-top: 6px; align-self: flex-start;
  width: fit-content;
}
.nxReceiptTable tbody .nxRcpRowCarried,
.nxReceiptTable tbody .nxRcpRowCarried > td {
  background: #fef9c3 !important;
}
.nxReceiptTable tbody .nxRcpRowCarried .nxItemNameInput { background: transparent; }


/* ============================================================
   WHATSAPP INBOX (owner-only) — Step 1 of the AI Receptionist
   "Classic WhatsApp" look: familiar WhatsApp Web two-pane layout
   with avatars, beige chat wallpaper, and green accents.
   ============================================================ */
:root {
  /* Authentic WhatsApp Web light theme */
  --wa-green: #00A884;        /* accent / send button */
  --wa-green-deep: #01906F;
  --wa-out: #D9FDD3;          /* outbound bubble (light green) */
  --wa-out-ink: #111B21;
  --wa-in: #FFFFFF;           /* inbound bubble (white) */
  --wa-in-ink: #111B21;
  --wa-panel: #F0F2F5;        /* header + composer bars */
  --wa-panel-2: #FFFFFF;      /* list background */
  --wa-wallpaper: #EFEAE2;    /* chat background (cream) */
  --wa-text: #111B21;         /* primary text */
  --wa-text-dim: #667781;     /* secondary text */
  --wa-divider: #E9EDEF;      /* hairline dividers */
  --wa-tick: #53BDEB;         /* read tick blue */
  /* AI tester decision-panel accents (mockup 6) */
  --ai: #7C3AED;
  --ai-soft: #EDE9FE;
  --ok-line: #86EFAC;
}
.waLayout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 380px 1fr;
  overflow: hidden;
}

/* ---- Left: conversation list ---- */
.waList {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--wa-divider);
  background: var(--wa-panel-2);
}
.waSearchBar { padding: 8px 12px; background: var(--wa-panel-2); }
.waSearchInput {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 40px;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: var(--font);
  background: #F0F2F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23667781' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M15 15l-4-4'/%3E%3C/svg%3E") no-repeat 15px center;
  color: var(--wa-text);
}
.waSearchInput::placeholder { color: var(--wa-text-dim); }
.waSearchInput:focus { outline: none; box-shadow: inset 0 0 0 1px var(--wa-green); }
.waConvScroll { flex: 1; overflow-y: auto; min-height: 0; }
.waConvEmpty { padding: 28px 18px; color: var(--wa-text-dim); font-size: 14px; text-align: center; line-height: 1.5; }

.waConvItem {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 14px 10px 16px;
  border-bottom: 1px solid var(--wa-divider);
  cursor: pointer;
  transition: background .12s ease;
}
.waConvItem:hover { background: #F5F6F6; }
.waConvItem.active { background: #F0F2F5; }
.waConvAvatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .5px;
}
.waConvBody { flex: 1; min-width: 0; }
.waConvTop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.waConvName { font-weight: 500; font-size: 15px; color: var(--wa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.waConvTime { font-size: 11.5px; color: var(--wa-text-dim); flex-shrink: 0; }
.waConvTime.unread { color: var(--wa-green); font-weight: 700; }
.waConvBottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 3px; }
.waConvPreview { font-size: 13px; color: var(--wa-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.waUnread {
  background: var(--wa-green); color: #111B21; font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.waLinkedDot { color: var(--brand); font-size: 9px; vertical-align: middle; }

/* ---- Right: thread ---- */
.waThread {
  display: flex; flex-direction: column; min-height: 0;
  background-color: var(--wa-wallpaper);
  /* Authentic WhatsApp doodle wallpaper (subtle, low-opacity pattern on cream) */
  background-image:
    radial-gradient(circle at 15% 22%, rgba(0,0,0,.030) 0 3px, transparent 3px),
    radial-gradient(circle at 55% 12%, rgba(0,0,0,.022) 0 2px, transparent 2px),
    radial-gradient(circle at 82% 40%, rgba(0,0,0,.030) 0 3px, transparent 3px),
    radial-gradient(circle at 35% 62%, rgba(0,0,0,.022) 0 2px, transparent 2px),
    radial-gradient(circle at 72% 82%, rgba(0,0,0,.030) 0 3px, transparent 3px),
    radial-gradient(circle at 10% 88%, rgba(0,0,0,.018) 0 2px, transparent 2px);
  background-size: 260px 260px;
}
.waThreadEmpty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--wa-text-dim); font-size: 15px;
}
.waThreadEmptyIcon { font-size: 48px; opacity: .4; }
.waThreadInner { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* 2026-06-20: these two are mutually exclusive (placeholder OR active thread).
   Both set display:flex, which overrides the UA [hidden]{display:none}, so
   el.hidden=true had no visual effect and BOTH rendered stacked (the "upper
   and lower panel" bug). Force the hidden one to actually hide. */
.waThreadEmpty[hidden], .waThreadInner[hidden] { display: none !important; }

.waThreadHeader {
  display: flex; align-items: center; gap: 13px;
  padding: 9px 18px; background: var(--wa-panel); border-bottom: 1px solid var(--wa-divider);
}
.waThreadAvatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px; background: var(--brand);
}
.waThreadWho { flex: 1; min-width: 0; }
.waThreadName { font-weight: 500; font-size: 15.5px; color: var(--wa-text); }
.waThreadMeta { font-size: 12px; color: var(--wa-text-dim); margin-top: 2px; }
.waThreadActions { flex-shrink: 0; }
.waOpenPatientBtn {
  border: none; color: #fff; background: var(--brand);
  border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.waOpenPatientBtn:hover { background: var(--brand-deep); }

.waMessages {
  flex: 1; overflow-y: auto; min-height: 0; padding: 16px 7%;
  display: flex; flex-direction: column; gap: 3px;
  background: transparent;
}
.waLoading { color: var(--wa-text-dim); text-align: center; padding: 24px; font-size: 14px; }
/* Date separator chip (“TODAY” / “YESTERDAY”) */
.waDateChip {
  align-self: center; margin: 10px 0;
  background: #FFFFFF; color: var(--wa-text-dim);
  font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .3px;
  padding: 6px 14px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.12);
}

.waMsg { display: flex; }
.waMsg.in  { justify-content: flex-start; }
.waMsg.out { justify-content: flex-end; }
/* Group spacing: a little more air when direction changes. */
.waMsg { margin-top: 2px; }
.waMsg.in + .waMsg.out, .waMsg.out + .waMsg.in { margin-top: 10px; }
.waBubble {
  position: relative;
  max-width: 66%; padding: 6px 9px 8px; border-radius: 8px; font-size: 14.2px; line-height: 1.4;
  box-shadow: 0 1px .5px rgba(11,20,26,.13); word-wrap: break-word; overflow-wrap: anywhere;
}
.waBubble.in  { background: var(--wa-in);  color: var(--wa-in-ink);  border-top-left-radius: 0; margin-left: 8px; }
.waBubble.out { background: var(--wa-out); color: var(--wa-out-ink); border-top-right-radius: 0; margin-right: 8px; }
/* Bubble tails (the little notch), drawn with a CSS triangle. */
.waBubble.in::before {
  content: ""; position: absolute; top: 0; left: -8px;
  border-style: solid; border-width: 0 8px 8px 0; border-color: transparent var(--wa-in) transparent transparent;
}
.waBubble.out::before {
  content: ""; position: absolute; top: 0; right: -8px;
  border-style: solid; border-width: 0 0 8px 8px; border-color: transparent transparent transparent var(--wa-out);
}
.waBtnReply { font-weight: 600; }
.waTplMsg { opacity: .92; }
/* v106: real WhatsApp template card rendered inside a chat bubble (confirmation
   / review sends). Header + body-with-variables + footer + quick-reply buttons. */
.waBubble .waTplCard { display: block; margin: -1px 0 2px; }
.waTplCard .waTplHd { font-weight: 800; font-size: 14px; margin-bottom: 5px; color: inherit; }
.waTplCard .waTplBody { font-size: 13.5px; line-height: 1.5; white-space: normal; }
.waTplCard .waTplBody b { font-weight: 700; }
.waTplCard .waTplFooter { margin-top: 8px; font-size: 12px; opacity: .7; }
.waTplCard .waTplBtns { margin-top: 8px; display: flex; flex-direction: column; gap: 5px;
  border-top: 1px solid rgba(11,20,26,.1); padding-top: 7px; }
.waTplCard .waTplBtn { background: rgba(255,255,255,.55); border-radius: 8px; padding: 8px;
  text-align: center; color: #027d78; font-weight: 700; font-size: 13px; }
/* Tester-only: template-card buttons are real tappable buttons. */
.waTplCard button.waTplBtnTap { display: block; width: 100%; border: 1px solid rgba(2,125,120,.25);
  cursor: pointer; font-family: inherit; transition: background .12s ease, transform .05s ease; }
.waTplCard button.waTplBtnTap:hover { background: rgba(255,255,255,.9); }
.waTplCard button.waTplBtnTap:active { transform: scale(.98); }
.waTplCard button.waTplBtnTap:disabled { opacity: .5; cursor: default; }
.waBubble.waTplCardBubble { max-width: 82%; }
/* Interactive booking buttons / list (gate question + slot picker). Rendered
   inside a reply/draft bubble. Tappable in the tester (waIntBtnTap); a static
   preview in the live inbox (waIntBtnPreview). Styled to look like WhatsApp
   quick-reply buttons: full-width, teal label, stacked. */
.waIntBtns { margin-top: 8px; display: flex; flex-direction: column; gap: 5px;
  border-top: 1px solid rgba(11,20,26,.12); padding-top: 7px; }
.waIntBtn { display: block; width: 100%; box-sizing: border-box; background: rgba(255,255,255,.6);
  border-radius: 8px; padding: 8px 10px; text-align: center; color: #027d78; font-weight: 700;
  font-size: 13px; line-height: 1.35; }
.waIntBtn .waIntBtnSub { display: block; font-weight: 500; font-size: 11.5px; opacity: .75;
  margin-top: 2px; }
.waIntList .waIntBtn { text-align: left; }
button.waIntBtnTap { border: 1px solid rgba(2,125,120,.28); cursor: pointer; font-family: inherit;
  transition: background .12s ease, transform .05s ease; }
button.waIntBtnTap:hover { background: rgba(255,255,255,.92); }
button.waIntBtnTap:active { transform: scale(.98); }
button.waIntBtnTap:disabled { opacity: .5; cursor: default; }
.waIntBtnPreview { border: 1px dashed rgba(2,125,120,.35); }
/* Live inbox: "Send with buttons" action under the AI suggestion. */
.waIntSendRow { margin-top: 8px; display: flex; justify-content: flex-end; }
button.waIntSendBtn { background: #027d78; color: #fff; border: none; border-radius: 8px;
  padding: 7px 14px; font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit;
  transition: background .12s ease, transform .05s ease; }
button.waIntSendBtn:hover { background: #026b67; }
button.waIntSendBtn:active { transform: scale(.98); }
button.waIntSendBtn:disabled { opacity: .5; cursor: default; }
/* Tester controls: template-flow launch row. */
.waTesterTplLaunch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.waTesterTplLbl { font-size: 12px; color: rgba(17,27,33,.55); font-weight: 600; }
.waTesterTplBtn { background: #fff; border: 1px solid rgba(2,125,120,.3); border-radius: 16px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 700; color: #027d78; cursor: pointer;
  font-family: inherit; transition: background .12s ease; }
.waTesterTplBtn:hover { background: rgba(2,125,120,.08); }
.waTesterTplBtn:active { transform: scale(.97); }
/* v107: greyed-out picker button when no matching appointment exists. The
   native title attribute shows the "no relevant appointment" tooltip on hover. */
.waTesterTplBtn.waTplPickDisabled,
.waTesterTplBtn:disabled { background: #f0f2f4; border-color: rgba(17,27,33,.14);
  color: rgba(17,27,33,.34); cursor: not-allowed; transform: none; }
.waTesterTplBtn.waTplPickDisabled:hover,
.waTesterTplBtn:disabled:hover { background: #f0f2f4; }
/* Classic WhatsApp: timestamp floats to bottom-right inside the bubble. */
.waMsgFoot {
  display: inline-flex; align-items: center; gap: 4px;
  float: right; margin: 4px 0 -2px 10px; clear: both;
}
.waMsgSender { font-size: 12.5px; color: #00A884; font-weight: 600; display: block; float: none; margin-bottom: 2px; }
.waMsgTime { font-size: 11px; color: rgba(17,27,33,.45); }
.waMsgStatus { font-size: 11px; color: var(--wa-tick); }
/* v125: tighten the double-tick so the two checks read as one “✓✓” mark like
   WhatsApp, instead of two spaced-out ticks. */
.waMsgStatus.dbl { letter-spacing: -3px; }
.waMsgStatus.failed { color: #F15C6D; font-weight: 600; }
/* 2026-07-06 (Issue #2): distinct delivery-state marks. */
.waMsgStatus.sending { color: #9aa4ad; }
.waMsgStatus.sent { color: #9aa4ad; }
.waMsgStatus.delivered { color: #9aa4ad; }
.waMsgStatus.read { color: #34B7F1; }
.waMsgStatus .waMsgStatusTxt { font-size: 10px; margin-left: 2px; }

/* ---- Image / file bubbles ---- */
.waBubble.waMediaBubble { padding: 4px; max-width: 330px; }
.waMediaImg {
  display: block; width: 100%; max-width: 322px; border-radius: 6px; cursor: pointer;
  background: rgba(0,0,0,.2); object-fit: cover;
}
.waMediaCaption { padding: 5px 6px 0; font-size: 14.2px; line-height: 1.4; }
.waMediaBubble .waMsgFoot { margin: 2px 4px -2px 10px; }
/* image bubbles keep footer readable over the picture */
.waMediaBubble.waImgOnly .waMsgFoot {
  position: absolute; right: 10px; bottom: 8px; float: none; margin: 0;
  background: rgba(0,0,0,.35); padding: 2px 7px; border-radius: 10px; backdrop-filter: blur(2px);
}
.waMediaBubble.waImgOnly .waMsgTime { color: #fff; }
.waFileRow {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px 4px;
  min-width: 200px; color: inherit; text-decoration: none;
}
.waFileRow:hover { text-decoration: none; }
.waFileIcon {
  width: 40px; height: 40px; border-radius: 8px; background: rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.waFileMeta { min-width: 0; display: flex; flex-direction: column; }
.waFileName { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.waFileSub { font-size: 11.5px; color: rgba(17,27,33,.55); margin-top: 2px; }

/* ---- Composer ---- */
.waComposer { position: relative; background: var(--wa-panel); border-top: 1px solid var(--wa-divider); padding: 8px 16px; }
.waWindowNote {
  font-size: 12px; color: #8A6D1A; background: rgba(246,196,83,.22);
  padding: 8px 12px; border-radius: 8px; margin-bottom: 8px;
}
.waComposerRow { display: flex; align-items: flex-end; gap: 8px; }
.waInput {
  flex: 1; resize: none; border: none; border-radius: 10px;
  padding: 11px 16px; font-size: 14.5px; font-family: var(--font); line-height: 1.4;
  max-height: 120px; color: var(--wa-text); background: #FFFFFF;
}
.waInput::placeholder { color: var(--wa-text-dim); }
.waInput:focus { outline: none; }
.waInput:disabled { background: #EBEDF0; color: var(--wa-text-dim); cursor: not-allowed; }
.waIconBtn, .waSendBtn {
  border: none; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.waIconBtn {
  width: 42px; height: 42px; border-radius: 50%; background: transparent;
  font-size: 20px; color: var(--wa-text-dim); transition: color .12s, background .12s;
}
.waIconBtn:hover { color: var(--wa-text); background: rgba(0,0,0,.05); }
.waSendBtn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--wa-green); color: #FFFFFF; font-size: 18px; line-height: 1;
}
.waSendBtn:hover { background: var(--wa-green-deep); }
.waSendBtn:disabled { background: #C9CFD3; color: #F0F2F5; cursor: not-allowed; }
.waTemplatePanel {
  margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px; background: rgba(0,0,0,.03); border-radius: 8px;
}
.waTplOption {
  border: 1px solid var(--wa-divider); background: #FFFFFF; color: var(--wa-text);
  border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.waTplOption:hover { border-color: var(--wa-green); background: #D9FDD3; }

/* ---- Attachment popover ---- */
.waAttachMenu {
  position: absolute; left: 58px; bottom: 62px; z-index: 30;
  background: #FFFFFF; border-radius: 12px; padding: 8px; min-width: 168px;
  box-shadow: 0 8px 28px rgba(0,0,0,.20); border: 1px solid rgba(0,0,0,.06);
  display: flex; flex-direction: column; gap: 2px;
}
.waAttachMenu[hidden] { display: none; }
.waAttachOpt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: transparent; border: none; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--wa-text); text-align: left;
}
.waAttachOpt:hover { background: rgba(0,0,0,.05); }
.waAttachIco {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff;
}
.waAttachIcoPhoto { background: #7F66FF; }
.waAttachIcoCam { background: #FF2E74; }
.waAttachIcoDoc { background: #5F66CD; }

/* ---- Image/document preview + caption modal ---- */
.waPreviewModal {
  position: absolute; inset: 0; z-index: 60;
  background: var(--wa-wallpaper);
  display: flex; flex-direction: column;
}
.waPreviewModal[hidden] { display: none; }
.waPreviewCard { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.waPreviewTop {
  display: flex; align-items: center; gap: 16px; padding: 12px 18px;
  background: var(--wa-panel); color: var(--wa-text);
}
.waPreviewClose {
  background: transparent; border: none; color: var(--wa-text); font-size: 20px;
  cursor: pointer; line-height: 1; padding: 4px;
}
.waPreviewTitle { font-size: 15px; font-weight: 500; }
.waPreviewBody {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow: auto;
}
.waPreviewBody img { max-width: 100%; max-height: 100%; border-radius: 6px; object-fit: contain; }
.waPreviewDoc {
  display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--wa-text);
}
.waPreviewDocIcon { font-size: 64px; }
.waPreviewDocName { font-size: 15px; font-weight: 500; }
.waPreviewDocSub { font-size: 12.5px; color: var(--wa-text-dim); }
.waPreviewFoot {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  background: var(--wa-panel);
}
.waPreviewCaption {
  flex: 1; border: none; border-radius: 10px; padding: 12px 16px;
  font-size: 14.5px; font-family: var(--font); background: #FFFFFF; color: var(--wa-text);
}
.waPreviewCaption::placeholder { color: var(--wa-text-dim); }
.waPreviewCaption:focus { outline: none; }
.waPreviewSend:disabled { opacity: .6; cursor: wait; }

/* ---- live dot + nav badge ---- */
.waLiveDot { color: var(--wa-green); font-size: 12px; margin-right: 6px; transition: color .2s; }
.waLiveDot.offline { color: var(--ink-300); }
/* WhatsApp nav badge reuses the existing .navItem .navBadge style; just recolor it green. */
.navItem[data-view="whatsapp"] .navBadge { background: var(--wa-green); }

/* ============================================================
   AI Tester — pinned conversation + decision side panel (mockup 6)
   ============================================================ */
/* Pinned tester list item */
.waConvItem.waConvTester { background: linear-gradient(0deg, var(--ai-soft), #fff); border-bottom: 1px solid var(--ink-200); }
.waConvItem.waConvTester.active { background: var(--ai-soft); }
.waConvAvatar.waConvTesterAv { background: var(--ai-soft); color: var(--ai); font-size: 22px; }
.waTesterBadge {
  display: inline-block; background: var(--ai-soft); color: var(--ai);
  font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 20px; margin-left: 4px;
}
.waThreadTesterBadge {
  display: inline-block; background: var(--ai-soft); color: var(--ai);
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; margin-left: 6px; vertical-align: middle;
}

/* Layout: add the decision panel column only in tester mode */
.waLayout.waTesterMode,
.waLayout.waSuggestMode { grid-template-columns: 340px 1fr 372px; }
.waDecisionPanel {
  min-height: 0; overflow-y: auto; background: var(--bg, #F4F7FB);
  border-left: 1px solid var(--ink-200); padding: 16px;
}

/* Tester controls bar (name / phone / reset) */
.waTesterControls {
  display: block; background: var(--brand-tint, #F3F8FC);
  border-bottom: 1px solid var(--ink-200);
}
.waTesterBody {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  padding: 12px 18px;
}
.waTesterHead {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; color: var(--ink-700);
}
.waTesterHead .waCollapseTitle { font-size: 12px; font-weight: 700; }
.waTesterField { display: flex; flex-direction: column; gap: 4px; }
.waTesterField label { font-size: 11px; font-weight: 600; color: var(--ink-500); }
.waTesterField input {
  border: 1px solid var(--ink-300); border-radius: 8px; padding: 7px 10px;
  font-size: 13px; font-family: var(--font); background: #fff; color: var(--ink-900); min-width: 150px;
}
.waTesterField input:focus { outline: none; box-shadow: 0 0 0 1px var(--brand); }
.waTesterReset {
  margin-left: auto; background: #fff; border: 1px solid var(--ink-300); color: var(--ink-700);
  padding: 8px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.waTesterReset:hover { border-color: var(--bad); color: var(--bad); }

/* Traceable outbound bubble — clickable to inspect */
.waBubble.waTraceable { cursor: pointer; transition: box-shadow .15s, transform .1s; }
.waBubble.waTraceable:hover { box-shadow: 0 0 0 2px var(--ink-200); }
.waBubble.waInspecting { box-shadow: 0 0 0 3px var(--ai-soft), 0 4px 14px rgba(124,58,237,.20); transform: translateY(-1px); }
.waInspectHint { font-size: 10px; color: var(--ink-400); margin-top: 3px; text-align: right; }
.waBubble.waInspecting .waInspectHint { color: var(--ai); font-weight: 600; }

/* Blue AI suggestion bubble for real conversations. Right-aligned like a
   normal reply, but blue + dashed to mark it as an AI-only preview that is
   NEVER sent to the patient. Clickable to open the reasoning panel. */
.waBubble.waSimBubble {
  background: #E3F0FC; color: #0B3B66;
  border: 1.5px dashed #8FC2F0;
  cursor: pointer; transition: box-shadow .15s, transform .1s;
}
.waBubble.waSimBubble::before { display: none; }
.waBubble.waSimBubble .waMsgTime { color: #1E88E5; font-weight: 700; letter-spacing: .3px; }
.waBubble.waSimBubble:hover { box-shadow: 0 0 0 2px #8FC2F0; transform: translateY(-1px); }
.waBubble.waSimBubble.waInspecting {
  box-shadow: 0 0 0 3px #E3F0FC, 0 4px 14px rgba(30,136,229,.25); transform: translateY(-1px);
}
.waBubble.waSimBubble .waInspectHint { color: #1E88E5; }
.waBubble.waSimBubble.waInspecting .waInspectHint { color: #1565C0; font-weight: 700; }
/* "Coalesced from N messages" chip shown when the draft answered a burst. */
.waSimCoalesced {
  font-size: 10px; font-weight: 700; color: #1565C0;
  background: #CFE4FA; border-radius: 6px;
  padding: 2px 7px; margin-bottom: 6px; display: inline-block;
  letter-spacing: .2px;
}
/* Interleaved backfill AI-draft bubble: same blue dashed suggestion look, with
   a clear "AI DRAFT · not sent" tag so it can never be mistaken for a real
   sent reply. Sits directly beneath the patient message it answers. */
.waDraftTag {
  font-size: 10px; font-weight: 800; color: #1565C0;
  background: #CFE4FA; border-radius: 6px;
  padding: 2px 8px; margin-bottom: 6px; display: inline-block;
  letter-spacing: .4px; text-transform: uppercase;
}
/* FIX 3 (V3): tester-only amber pill — "would flag to human" takeover preview. */
.waHandoffChip {
  font-size: 10.5px; font-weight: 800; color: #8A5300;
  background: #FFECB3; border: 1px solid #F0C24B; border-radius: 6px;
  padding: 2px 8px; margin-bottom: 6px; display: inline-block;
  letter-spacing: .2px;
}
/* Honest failure bubble when the sweep could not draft a reply. */
.waBubble.waSimBubble.waSimFailed {
  background: #FBECEC; color: #7A2A2A; border: 1.5px dashed #E0A2A2;
}
.waBubble.waSimBubble.waSimFailed:hover { box-shadow: 0 0 0 2px #E0A2A2; }
.waBubble.waSimBubble.waSimFailed .waMsgTime { color: #C0392B; }
.waSimFailIcon { margin-right: 4px; }

/* ---- panel: empty placeholder ---- */
.waDpEmpty { text-align: center; padding: 48px 22px; color: var(--ink-500); }
.waDpEmptyIcon { font-size: 34px; margin-bottom: 12px; }
.waDpEmptyTitle { font-size: 15px; font-weight: 700; color: var(--ink-700); margin-bottom: 6px; }
.waDpEmptyText { font-size: 12.5px; line-height: 1.5; }

/* ---- panel: card ---- */
.waDecisionPanel .waDpHead {
  color: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 10px;
  border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0;
}
.waDpHead.cycle { background: linear-gradient(135deg, var(--ok) 0%, #34C46A 100%); }
.waDpHead.ai { background: linear-gradient(135deg, var(--ai) 0%, #9F67F0 100%); }
.waDpIc { font-size: 20px; }
.waDpT { font-weight: 700; font-size: 14px; }
.waDpS { font-size: 11px; opacity: .9; margin-top: 1px; }
.waDpBody {
  padding: 16px; background: #fff; border: 1px solid var(--ink-200); border-top: none;
  border-radius: 0 0 var(--radius-lg, 14px) var(--radius-lg, 14px);
}

/* classifier gate */
.waGate { border: 1px solid var(--ink-200); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.waGateCell { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.waGateCell + .waGateCell { border-top: 1px solid var(--ink-200); }
.waGateQ { font-size: 11px; color: var(--ink-500); font-weight: 600; }
.waGateA { font-size: 12.5px; font-weight: 700; color: var(--ink-900); display: flex; align-items: center; gap: 6px; }
.waGateCell.on { background: var(--ok-soft); }
.waGateCell.on .waGateA { color: var(--ok); }
.waGateCell.off { background: var(--ink-50); }
.waGateCell.off .waGateA { color: var(--ink-400); }
.waGateCell.ai-on { background: var(--ai-soft); }
.waGateCell.ai-on .waGateA { color: var(--ai); }
.waGateFlow { display: flex; justify-content: center; color: var(--ink-300); font-size: 14px; padding: 2px 0; background: var(--ink-50); }
.waMiniDot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.waMiniDot.g { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.waMiniDot.grey { background: var(--ink-300); }
.waMiniDot.p { background: var(--ai); box-shadow: 0 0 0 3px var(--ai-soft); }

/* verdict strip */
.waVerdict { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 11px 13px; margin-bottom: 16px; }
.waVerdict.ai { background: var(--ai-soft); }
.waVerdict.cycle { background: var(--ok-soft); }
.waVic { font-size: 22px; }
.waVlabel { font-size: 11px; font-weight: 600; }
.waVerdict.ai .waVlabel { color: var(--ai); }
.waVerdict.cycle .waVlabel { color: var(--ok); }
.waVvalue { font-size: 13.5px; font-weight: 700; color: var(--ink-900); }

/* 8-intent classifier: risk banner + confidence pill */
.waRiskBanner { display: flex; align-items: flex-start; gap: 10px; border-radius: 12px; padding: 11px 13px; margin-bottom: 16px; border: 1px solid transparent; }
.waRiskBanner.urgent { background: #fee2e2; border-color: #fca5a5; }
.waRiskBanner.review { background: #fef3c7; border-color: #fcd34d; }
.waRiskBanner.ambiguous { background: #e0e7ff; border-color: #c7d2fe; }
.waRiskIc { font-size: 20px; line-height: 1.1; }
.waRiskT { font-size: 13px; font-weight: 800; color: var(--ink-900); margin-bottom: 3px; }
.waRiskBanner.urgent .waRiskT { color: #b91c1c; }
.waRiskBanner.review .waRiskT { color: #b45309; }
.waRiskBanner.ambiguous .waRiskT { color: #4338ca; }
.waRiskD { font-size: 12px; line-height: 1.45; color: var(--ink-700, #475569); }
.waConf { display: inline-block; font-size: 12px; font-weight: 800; color: var(--ok, #16a34a); background: var(--ok-soft, #dcfce7); padding: 2px 10px; border-radius: 20px; }
.waConf.low { color: #b45309; background: #fef3c7; }

/* sections */
.waDpSec { margin-bottom: 16px; }
.waDpSec:last-child { margin-bottom: 0; }
.waDpSecLabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-400); margin-bottom: 8px; }

/* cycle map (vertical) */
.waCycleName {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink-900);
  background: var(--ok-soft); border: 1px solid var(--ok-line); padding: 4px 12px; border-radius: 20px; margin-bottom: 14px;
}
.waVflow { position: relative; padding-left: 6px; }
.waVnode { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.waVnode:last-child { padding-bottom: 0; }
.waVnode .waVrail { position: absolute; left: 16px; top: 30px; bottom: -2px; width: 2px; background: var(--ink-200); }
.waVnode.done .waVrail { background: var(--ok-line); }
.waVnode:last-child .waVrail { display: none; }
.waVnode .waVcircle {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 14px; background: var(--ink-100); color: var(--ink-400); border: 2px solid var(--ink-200); z-index: 2;
}
.waVnode.done .waVcircle { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.waVnode.current .waVcircle { background: var(--ok); color: #fff; border-color: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); animation: waPulse 2s infinite; }
@keyframes waPulse { 0% { box-shadow: 0 0 0 4px var(--ok-soft); } 50% { box-shadow: 0 0 0 7px rgba(22,163,74,.12); } 100% { box-shadow: 0 0 0 4px var(--ok-soft); } }
.waVnode .waVlbl { padding-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-600); }
.waVnode.current .waVlbl { color: var(--ok); }
.waNowTag { font-size: 9.5px; font-weight: 700; color: var(--ok); background: var(--ok-soft); padding: 1px 7px; border-radius: 10px; margin-left: 8px; }

/* branches */
.waBranch { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.waBranchOpt { border: 1px solid var(--ink-200); border-radius: 8px; padding: 9px 11px; font-size: 12px; color: var(--ink-500); background: var(--ink-50); }
.waBranchOpt.taken { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ink-900); font-weight: 600; }
.waBhead { font-size: 10.5px; font-weight: 700; color: var(--ink-400); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .03em; }
.waBranchOpt.taken .waBhead { color: var(--ok); }

/* key-value + tags */
.waKv { display: flex; font-size: 12.5px; padding: 5px 0; border-bottom: 1px dashed var(--ink-200); }
.waKv:last-child { border-bottom: none; }
.waKv .waK { width: 92px; flex-shrink: 0; color: var(--ink-500); font-weight: 600; }
.waKv .waV { color: var(--ink-900); }
.waTag { display: inline-block; background: var(--brand-soft); color: var(--brand-deep); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 6px; }
.waTag.trig { background: var(--warn-soft); color: var(--warn, #D97706); }

/* reason / reply / steps / metrics */
.waReason { font-size: 12.5px; color: var(--ink-700); background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: 8px; padding: 11px 12px; line-height: 1.5; }
.waReplyPreview { font-size: 12.5px; color: var(--ink-900); background: var(--brand-tint); border: 1px solid var(--ink-200); border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0; padding: 10px 12px; line-height: 1.5; }
.waSteps { list-style: none; padding: 0; margin: 0; }
.waSteps li { display: flex; gap: 9px; font-size: 12.5px; color: var(--ink-700); padding: 6px 0; line-height: 1.45; }
.waStepN { width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--ai-soft); color: var(--ai); }
.waMetrics { display: flex; gap: 8px; }
.waMetric { flex: 1; background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: 8px; padding: 9px; text-align: center; }
.waMv { font-size: 14px; font-weight: 700; color: var(--ink-900); }
.waMl { font-size: 10px; color: var(--ink-500); margin-top: 2px; }

/* ---- responsive: stack on narrow screens ---- */
@media (max-width: 820px) {
  .waLayout { grid-template-columns: 1fr; }
  .waLayout.waTesterMode,
  .waLayout.waSuggestMode { grid-template-columns: 1fr; }
  .waList { display: none; }
  .waLayout.waShowThread .waList { display: none; }
  .waDecisionPanel { display: none; }
  .waMessages { padding: 18px 16px; }
  .waBubble { max-width: 82%; }
}
@media (max-width: 1200px) and (min-width: 821px) {
  /* narrower panel when space is tight */
  .waLayout.waTesterMode,
  .waLayout.waSuggestMode { grid-template-columns: 300px 1fr 340px; }
}

/* ============================================================
   Booking reasoning: split panel (LEFT booking + RIGHT AI)
   Widen the decision-panel track when a booking is in progress so
   the two cards sit side by side; falls back to single card width.
   ============================================================ */
.waLayout.waTesterMode.waBookingActive,
.waLayout.waSuggestMode.waBookingActive { grid-template-columns: 300px 1fr 760px; }
@media (max-width: 1400px) and (min-width: 1101px) {
  .waLayout.waTesterMode.waBookingActive,
  .waLayout.waSuggestMode.waBookingActive { grid-template-columns: 280px 1fr 680px; }
}
@media (max-width: 1100px) {
  .waLayout.waTesterMode.waBookingActive,
  .waLayout.waSuggestMode.waBookingActive { grid-template-columns: 300px 1fr 372px; }
  .waPanelWrap { grid-template-columns: 1fr !important; }
}
.waPanelWrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.waPanelCol { min-width: 0; }

/* booking head (blue, matches ai/cycle heads) */
.waDpHead.book { background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%); }

/* recorded booking details — storage rows with status dots */
.waStoreGrid { display: flex; flex-direction: column; }
.waSRow { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px dashed var(--ink-200); }
.waSRow:last-child { border-bottom: none; }
.waSDot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.waSDot.set { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.waSDot.wait { background: var(--ink-300); }
.waSDot.na { background: transparent; border: 2px solid var(--ink-300); box-sizing: border-box; }
.waSMeta { min-width: 0; flex: 1; }
.waSLabel { font-size: 11px; font-weight: 600; color: var(--ink-500); }
.waSVal { font-size: 13px; font-weight: 600; color: var(--ink-900); margin-top: 1px; word-break: break-word; }
.waSVal small { font-weight: 500; color: var(--ink-500); }
.waSVal.wait { font-weight: 500; color: var(--ink-400); font-style: italic; }
.waSVal.na { font-weight: 500; color: var(--ink-400); }

/* boolean status flags shown at the TOP of the booking panel (yes/no badges) */
.waFlags { display: flex; flex-direction: column; gap: 0; margin-bottom: 10px;
  border: 1px solid var(--ink-200); border-radius: 10px; overflow: hidden; }
.waFlagRow { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 12px; background: var(--ink-50); }
.waFlagRow + .waFlagRow { border-top: 1px solid var(--ink-200); }
.waFlagLabel { font-size: 12px; font-weight: 600; color: var(--ink-700); }
.waFlagBadge { font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.waFlagBadge.yes { background: var(--ok-soft); color: var(--ok); }
.waFlagBadge.no { background: var(--ink-100); color: var(--ink-500); }
.waFlagBadge.wait { background: var(--ink-100); color: var(--ink-400); font-style: italic; }

/* where we are in the booking — vertical stage boxes */
.waStageList { display: flex; flex-direction: column; }
.waStg { display: flex; gap: 11px; position: relative; padding-bottom: 10px; }
.waStg:last-child { padding-bottom: 0; }
.waStgRail { position: relative; width: 24px; flex-shrink: 0; display: flex; justify-content: center; }
.waStgDot {
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; z-index: 2;
  background: var(--ink-100); color: var(--ink-400); border: 2px solid var(--ink-200);
}
.waStgLine { position: absolute; top: 24px; bottom: -10px; width: 2px; background: var(--ink-200); }
.waStg:last-child .waStgLine { display: none; }
.waStg.done .waStgDot { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.waStg.done .waStgLine { background: var(--ok-line); }
.waStg.now .waStgDot { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.waStgBox { padding-top: 1px; padding-bottom: 4px; min-width: 0; }
.waStgTitle { font-size: 12.5px; font-weight: 700; color: var(--ink-600); }
.waStg.now .waStgTitle { color: var(--brand-deep); }
.waStg.todo .waStgTitle { color: var(--ink-400); font-weight: 600; }
.waStgSub { font-size: 11px; color: var(--ink-500); margin-top: 1px; line-height: 1.4; }
.waStg.todo .waStgSub { color: var(--ink-300); }
.waStgNow { font-size: 9.5px; font-weight: 700; color: var(--brand-deep); background: var(--brand-soft); padding: 1px 7px; border-radius: 10px; margin-left: 8px; vertical-align: middle; }

/* booking footnote */
.waBookFoot { font-size: 11px; color: var(--ink-500); line-height: 1.5; background: var(--brand-tint); border: 1px solid var(--ink-200); border-radius: 8px; padding: 9px 11px; margin-top: 4px; }
.waBookFoot b { color: var(--ink-700); }

/* right panel: stored conversation intent (24h) */
.waStoreIntentNote { font-size: 11.5px; color: var(--ink-500); line-height: 1.45; margin-bottom: 8px; }
.waStoreIntentList { display: flex; flex-direction: column; gap: 7px; }
.waStoreIntentRow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.waStoreIntentMeta { font-size: 11.5px; color: var(--ink-500); }
.waStoreIntentClear { font-size: 11px; font-weight: 600; color: var(--brand-deep); background: var(--brand-soft); border-radius: 8px; padding: 6px 10px; margin-top: 9px; }

/* ---- Treatment items: dentist discount (handoff-only, does not touch invoice) ---- */
.nxItemsDiscountBlock {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-200);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nxItemsDiscountTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
}
.nxItemsDiscountHint {
  font-size: 11px;
  color: var(--ink-500);
  line-height: 1.3;
}
.nxItemsDiscountToggle {
  display: inline-flex;
  gap: 0;
}
.nxItemsDiscountKindBtn {
  border: 1px solid var(--ink-200);
  background: var(--surface);
  color: var(--ink-700);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.nxItemsDiscountKindBtn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.nxItemsDiscountKindBtn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; }
.nxItemsDiscountKindBtn.is-active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
}
.nxItemsDiscountInputRow {
  display: flex;
  gap: 8px;
}
.nxItemsDiscountInputRow input[type="number"] {
  width: 90px;
  flex: 0 0 auto;
}
.nxItemsDiscountInputRow input[type="text"] {
  flex: 1 1 auto;
}
.nxItemsDiscountInputRow input {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  color: var(--ink-700);
  background: var(--surface);
}

/* 2026-06-25 — "Note to receptionist" free-text block below the Discount
   block in the Treatment items modal. Shares the discount block's look. */
.nxItemsHandoffNoteBlock {
  margin-top: 14px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--ink-200, #e2e8f0);
  border-radius: var(--radius-md, 8px);
}
.nxItemsHandoffNoteTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-800, #1f2937);
  margin-bottom: 4px;
}
.nxItemsHandoffNoteHint {
  font-size: 12px;
  color: var(--ink-500, #64748b);
  margin-bottom: 8px;
  line-height: 1.4;
}
.nxItemsHandoffNoteInput {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  resize: vertical;
  border: 1px solid var(--ink-200, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  color: var(--ink-700, #334155);
  background: var(--surface, #ffffff);
}
.nxItemsHandoffNoteInput:focus {
  outline: none;
  border-color: var(--brand-blue-400, #60a5fa);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

/* 2026-06-25 — Receptionist-handoff row style for the Treatment Receipt. */
.nxReceiptTable .nxItemRowV3.nxRcpRowHandoff,
.nxReceiptTable .nxItemRowV3.nxRcpRowHandoff > td {
  background: #fafafa;
}
.nxRcpHandoffBadge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--brand-blue-50, #eff6ff);
  color: var(--brand-blue-700, #1d4ed8);
  border: 1px solid var(--brand-blue-100, #dbeafe);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.nxRcpHandoffCell {
  /* 2026-06-25 — "Handled by receptionist" label spans Tooth+Qty+Unit Price.
     Left-aligned (under the TOOTH column header) so the label sits beneath
     the data columns it represents instead of floating in the middle of the
     row. The text is the same muted blue chip-without-chrome look used in
     the checkout widget for visual consistency. */
  text-align: left;
  vertical-align: middle;
  padding-left: 4px;
}
.nxRcpHandoffText {
  display: inline-block;
  color: var(--brand-blue-700, #1d4ed8);
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.nxRcpHandoffOverrideCell {
  /* The cell that sits under LINE TOTAL when the row is in handoff mode —
     no "—" placeholder, just the Override button right-aligned. */
  text-align: right !important;
  vertical-align: middle;
  padding-right: 4px;
}
.nxRcpHandoffMuted {
  color: var(--ink-400, #9ca3af) !important;
  font-style: italic;
}
.nxRcpOverrideBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--surface, #ffffff);
  color: var(--brand-blue-700, #1d4ed8);
  border: 1px solid var(--brand-blue-200, #bfdbfe);
  border-radius: var(--radius-sm, 6px);
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.nxRcpOverrideBtn:hover {
  background: var(--brand-blue-50, #eff6ff);
  border-color: var(--brand-blue-400, #60a5fa);
}
.nxRcpUndoOverrideBtn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding: 1px 6px;
  background: transparent;
  color: var(--ink-500, #64748b);
  border: 1px dashed var(--ink-300, #cbd5e1);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.nxRcpUndoOverrideBtn:hover {
  color: var(--ink-700, #334155);
  border-color: var(--ink-400, #9ca3af);
  border-style: solid;
}

/* ── Dental Chart v1 (owner-only) ──────────────────────────────────────── */
.ndChart {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #0f172a;
  position: relative;
}
.ndChartDenied {
  padding: 24px; color: #64748b; font-size: 14px;
  font-family: Inter, system-ui, sans-serif;
}
.ndChartHeader {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 10px; flex-wrap: wrap;
}
.ndChartTitleRow { font-size: 16px; }
.ndChartName { font-weight: 700; color: #0f172a; }
.ndChartNameZh { font-weight: 600; color: #334155; margin-left: 4px; }
.ndChartMeta { color: #64748b; font-size: 13px; margin-left: 8px; }
.ndChartStatus {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: #64748b; white-space: nowrap;
}
.ndChartDot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ndChartDotGreen { background: #22c55e; }
.ndChartDotAmber { background: #f59e0b; }
.ndChartDotRed { background: #ef4444; }
.ndChartLegend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px;
  font-size: 12px; color: #475569;
}
.ndChartLegItem { display: inline-flex; align-items: center; gap: 5px; }
.ndChartLegSwatch {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
  border: 1px solid rgba(15,23,42,0.18);
}
.ndChartCanvas {
  width: 100%; max-width: 1100px; margin: 0 auto;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 8px;
}
.ndChartSvg { width: 100%; height: auto; display: block; }
.ndChartHit {
  fill: transparent; cursor: pointer;
  transition: fill 0.08s ease;
}
.ndChartHit:hover { fill: rgba(79,70,229,0.12); }
.ndChartSelRing { pointer-events: none; }

/* Side panel — slides in from the right. */
.ndChartPanel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 520px; max-width: 92vw;
  background: #fff; border-left: 1px solid #e2e8f0;
  box-shadow: -8px 0 28px rgba(15,23,42,0.12);
  transform: translateX(100%); transition: transform 0.18s ease;
  z-index: 4000; overflow-y: auto; padding: 18px 20px 40px;
  font-family: Inter, system-ui, sans-serif; color: #0f172a;
}
.ndChartPanelOpen { transform: translateX(0); }
.ndChartPanelHdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.ndChartPanelTitle { font-size: 18px; font-weight: 700; }
.ndChartPanelSub { font-size: 13px; color: #64748b; margin-top: 2px; }
.ndChartPanelClose {
  border: none; background: none; font-size: 24px; line-height: 1;
  color: #94a3b8; cursor: pointer; padding: 0 4px;
}
.ndChartPanelClose:hover { color: #334155; }

.ndChartExisting {
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px;
  margin-bottom: 16px; background: #f8fafc;
}
.ndChartExEmpty { color: #94a3b8; font-size: 13px; }
.ndChartExistingHdr {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #64748b; margin-bottom: 8px;
}
.ndChartExRow {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; padding: 6px 0; border-top: 1px solid #eef2f6;
}
.ndChartExRow:first-of-type { border-top: none; }
.ndChartExMain { font-size: 13px; }
.ndChartExLabel { font-weight: 600; }
.ndChartSurfChip {
  display: inline-block; background: #e0e7ff; color: #4338ca;
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  margin-right: 6px;
}
.ndChartDetTxt { color: #475569; }
.ndChartExNote { color: #64748b; font-size: 12px; margin-top: 2px; }
.ndChartDel {
  border: none; background: none; color: #cbd5e1; font-size: 18px;
  line-height: 1; cursor: pointer; padding: 0 4px;
}
.ndChartDel:hover { color: #ef4444; }

.ndChartAdd { }
.ndChartAddHdr { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.ndChartFieldLbl {
  font-size: 12px; font-weight: 600; color: #334155;
  margin: 12px 0 6px;
}
.ndChartHint { font-weight: 400; color: #94a3b8; }
.ndChartSurfRow, .ndChartCondRow { display: flex; flex-wrap: wrap; gap: 6px; }
.ndChartSurfBtn {
  min-width: 38px; padding: 6px 0; border: 1px solid #cbd5e1;
  background: #fff; border-radius: 6px; font-weight: 700; font-size: 13px;
  color: #334155; cursor: pointer;
}
.ndChartSurfBtn:hover { border-color: #94a3b8; }
.ndChartSurfOn { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.ndChartCondPill {
  padding: 6px 12px; border: 1px solid #cbd5e1; background: #fff;
  border-radius: 999px; font-size: 13px; color: #334155; cursor: pointer;
}
.ndChartCondPill:hover { border-color: #94a3b8; }
.ndChartCondOn { background: #eef2ff; border-color: #4f46e5; color: #4338ca; font-weight: 600; }
/* v2.1 — grouped condition classifications + multi-select */
.ndChartCondGroups { display: flex; flex-direction: column; gap: 10px; }
.ndChartCondGroup { display: flex; flex-direction: column; gap: 6px; }
.ndChartCondGroupHdr {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #94a3b8;
}
.ndChartDetailWrap:not(:empty) { margin-top: 4px; }
.ndChartDetailSel, .ndChartNotes {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px;
  font-family: inherit; color: #0f172a;
}
.ndChartNotes { resize: vertical; }
.ndChartSaveBtn {
  width: 100%; margin-top: 16px; padding: 10px; border: none;
  background: #4f46e5; color: #fff; font-weight: 700; font-size: 14px;
  border-radius: 8px; cursor: pointer;
}
.ndChartSaveBtn:hover { background: #4338ca; }
.ndChartReadonlyNote {
  margin-top: 16px; padding: 10px 12px; border-radius: 8px;
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
  font-size: 12.5px;
}

/* ── Chart v2 — list view ─────────────────────────────────────────────── */
.ndChartListHead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 6px 0 12px;
}
.ndChartListTitle { font-size: 15px; font-weight: 700; color: #0f172a; }
.ndChartNewBtn {
  padding: 8px 14px; border: none; border-radius: 8px;
  background: #4f46e5; color: #fff; font-weight: 700; font-size: 13px;
  cursor: pointer; transition: background 0.12s ease;
}
.ndChartNewBtn:hover { background: #4338ca; }
.ndChartList { display: flex; flex-direction: column; gap: 8px; }
.ndChartEmpty {
  padding: 28px 18px; text-align: center; color: #64748b; font-size: 14px;
  background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px;
}
.ndChartListRow {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; padding: 14px 16px; cursor: pointer;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.ndChartListRow:hover {
  border-color: #c7d2fe; box-shadow: 0 2px 10px rgba(79,70,229,0.08);
}
.ndChartListMain { flex: 1; min-width: 0; }
.ndChartListDate { font-size: 15px; font-weight: 700; color: #0f172a; }
.ndChartListAppt { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.ndChartListCount {
  flex-shrink: 0; font-size: 12px; font-weight: 600; color: #4338ca;
  background: #eef2ff; padding: 3px 9px; border-radius: 999px;
}
.ndChartListChevron { flex-shrink: 0; color: #cbd5e1; font-size: 22px; line-height: 1; }

/* ── Chart v2 — detail top bar + read-only banner ─────────────────────── */
.ndChartDetailTop {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.ndChartBack {
  border: 1px solid #e2e8f0; background: #fff; border-radius: 8px;
  padding: 7px 12px; font-size: 13px; font-weight: 600; color: #334155;
  cursor: pointer;
}
.ndChartBack:hover { border-color: #94a3b8; }
.ndChartPrintBtns { display: flex; gap: 8px; }
.ndChartPrintBtn {
  border: 1px solid #e2e8f0; background: #fff; border-radius: 8px;
  padding: 7px 12px; font-size: 13px; font-weight: 600; color: #334155;
  cursor: pointer;
}
.ndChartPrintBtn:hover { border-color: #94a3b8; }
.ndChartPrintBtnPrimary { border-color: #4f46e5; background: #4f46e5; color: #fff; }
.ndChartPrintBtnPrimary:hover { background: #4338ca; border-color: #4338ca; }
.ndChartDetailMeta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ndChartDetailDate { font-size: 15px; font-weight: 700; color: #0f172a; }
.ndChartDetailAppt { font-size: 12.5px; color: #64748b; }
.ndChartRoBanner {
  margin-bottom: 12px; padding: 10px 14px; border-radius: 8px;
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
  font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ndChartJumpLatest {
  border: none; background: #9a3412; color: #fff; border-radius: 6px;
  padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.ndChartJumpLatest:hover { background: #7c2d12; }

/* ── Chart v2 — modern legend filter chips ────────────────────────────── */
.ndChartLegendRow {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.ndChartChip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 9px; border-radius: 999px;
  border: 1px solid #e2e8f0; background: #fff; color: #334155;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color 0.12s ease, opacity 0.12s ease, background 0.12s ease;
}
.ndChartChip:hover { border-color: #c7d2fe; background: #f5f7ff; }
.ndChartChipDot {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9) inset;
}
.ndChartChipLbl { line-height: 1; }
.ndChartChipOff { opacity: 0.4; background: #f1f5f9; text-decoration: line-through; }

/* ── Chart v2.2 — dynamic legend empty hint + dentist provenance ──────── */
.ndChartLegendEmpty { min-height: 0; }
.ndChartLegendHint { font-size: 12px; color: #94a3b8; font-style: italic; }
.ndChartListDentist { font-size: 12.5px; font-weight: 600; color: #4338ca; margin-top: 2px; }
.ndChartDetailDentist { font-size: 12.5px; font-weight: 600; color: #4338ca; }
.ndChartRoBannerDentist {
  background: #eef2ff; border-color: #c7d2fe; color: #3730a3;
}

/* ── Chart v2 — new-chart modal ───────────────────────────────────────── */
.ndChartModalOv {
  position: fixed; inset: 0; z-index: 4200; display: none;
  align-items: center; justify-content: center;
  background: rgba(15,23,42,0.45);
}
.ndChartModalOvOn { display: flex; }
.ndChartModal {
  width: 460px; max-width: 92vw; background: #fff; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(15,23,42,0.28); overflow: hidden;
  font-family: Inter, system-ui, sans-serif; color: #0f172a;
}
.ndChartModalHdr {
  padding: 18px 20px; font-size: 16px; font-weight: 700;
  border-bottom: 1px solid #eef2f6;
}
.ndChartModalBody { padding: 18px 20px; }
.ndChartModalLoading, .ndChartModalEmpty { color: #64748b; font-size: 13px; }
.ndChartModalLbl {
  display: block; font-size: 12px; font-weight: 600; color: #334155;
  margin-bottom: 6px;
}
.ndChartModalSel {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px;
  font-family: inherit; color: #0f172a; background: #fff;
}
.ndChartModalToggle {
  margin-top: 8px; padding: 0; border: none; background: none;
  font-size: 12.5px; font-weight: 600; color: #4f46e5; cursor: pointer;
  text-decoration: underline;
}
.ndChartModalToggle:hover { color: #4338ca; }
.ndChartModalFoot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px 18px; border-top: 1px solid #eef2f6;
}
.ndChartModalCancel {
  padding: 9px 16px; border: 1px solid #cbd5e1; background: #fff;
  border-radius: 8px; font-size: 13px; font-weight: 600; color: #334155; cursor: pointer;
}
.ndChartModalCancel:hover { border-color: #94a3b8; }
.ndChartModalCreate {
  padding: 9px 18px; border: none; background: #4f46e5; color: #fff;
  border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ndChartModalCreate:hover { background: #4338ca; }
.ndChartModalCreate:disabled { background: #c7d2fe; cursor: default; }

/* ── Chart v2 — hover tooltip ─────────────────────────────────────────── */
.ndChartTooltip {
  position: fixed; z-index: 4500; pointer-events: none;
  max-width: 240px; background: #fff; color: #0f172a;
  border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.16);
  padding: 10px 12px; font-size: 12px;
  font-family: Inter, system-ui, sans-serif;
  opacity: 0; transition: opacity 0.15s ease; left: 0; top: 0;
}
.ndChartTooltipOn { opacity: 1; }
.ndChartTipHdr { font-weight: 700; font-size: 12.5px; margin-bottom: 6px; color: #0f172a; }
.ndChartTipList { list-style: none; margin: 0; padding: 0; }
.ndChartTipList li {
  padding: 2px 0 2px 12px; position: relative; color: #334155; line-height: 1.4;
}
.ndChartTipList li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: #4f46e5;
}
.ndChartTipNote { color: #94a3b8; }

/* ===================================================================== */
/* 2026-06-28 APPT-REDESIGN — Appointments tab (desktop Mockup A).        */
/* Wide rows: Date · Appointment · Arrival · Actions. "All" view + combinable */
/* filter chips (Upcoming / Past / Cancelled / Change Requested / No-show). */
/* Scoped under .nxAppt to avoid colliding with legacy appt-history styles. */
/* ===================================================================== */
.nxAppt {
  --nxa-green: var(--ok); --nxa-green-soft: var(--ok-soft); --nxa-green-bd: #bbf7d0;
  --nxa-red: var(--bad); --nxa-red-soft: var(--bad-soft); --nxa-red-bd: #fecaca;
  --nxa-amber: var(--warn); --nxa-amber-soft: var(--warn-soft); --nxa-amber-bd: #fde68a;
  --nxa-brand-bd: #bcdcef;
  font-family: var(--font);
}

/* ---- Toolbar: All tab + filter chips ---- */
.nxAppt-toolbar { display: flex; align-items: center; gap: 14px; padding: 14px 18px 12px; flex-wrap: wrap; }
.nxAppt-allTab { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--brand); border: 1px solid var(--brand); padding: 9px 16px; border-radius: 11px; cursor: pointer; box-shadow: 0 1px 2px rgba(91,155,198,.25); transition: all .12s; }
.nxAppt-allTab.inactive { color: var(--ink-600, #475569); background: #fff; border-color: var(--ink-200); box-shadow: none; }
.nxAppt-allTab:hover { filter: brightness(.97); }
.nxAppt-allTab .ac { font-size: 11.5px; font-weight: 800; background: rgba(255,255,255,.28); border-radius: 999px; padding: 1px 8px; }
.nxAppt-allTab.inactive .ac { background: var(--ink-100); color: var(--ink-500); }
.nxAppt-divider { width: 1px; height: 26px; background: var(--ink-200); }
.nxAppt-filterLabel { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); }
.nxAppt-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.nxAppt-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-700); background: #fff; border: 1px solid var(--ink-200); padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: all .12s; }
.nxAppt-chip:hover { border-color: var(--ink-300); background: var(--ink-100); }
.nxAppt-chip.on { color: var(--brand-deep); background: var(--brand-soft); border-color: var(--nxa-brand-bd); }
.nxAppt-chip .cc { font-size: 11px; font-weight: 700; color: var(--ink-400); }
.nxAppt-chip.on .cc { color: var(--brand-deep); }
.nxAppt-chip .cdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-300); }
.nxAppt-chip[data-f="upcoming"] .cdot { background: #3b82f6; }
.nxAppt-chip[data-f="past"] .cdot { background: var(--ok); }
.nxAppt-chip[data-f="cancelled"] .cdot { background: var(--ink-400); }
.nxAppt-chip[data-f="change"] .cdot { background: var(--warn); }
.nxAppt-chip[data-f="noshow"] .cdot { background: var(--bad); }

/* ---- Column header ---- */
/* v64 (2026-07-02) — Task 6 (Yan): promote practitioner + clinic to their own
   column between Detail and Arrival, so front-desk staff can scan Doctor /
   Clinic per row without reading the meta line. Grid gets a 5th column. */
.nxAppt-colHead { display: grid; grid-template-columns: 140px 1fr 200px 230px 230px; gap: 16px; align-items: center; padding: 9px 22px; border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); background: var(--ink-50); }
.nxAppt-colHead span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-400); }
.nxAppt-colHead .right { text-align: right; }

/* ---- Rows ---- */
.nxAppt-list { padding: 4px 12px 14px; }
.nxAppt-row { display: grid; grid-template-columns: 140px 1fr 200px 230px 230px; gap: 16px; align-items: center; padding: 13px 10px; border-radius: 12px; border: 1px solid transparent; transition: background .1s, border-color .1s, box-shadow .1s; }
.nxAppt-row + .nxAppt-row { border-top: 1px solid var(--ink-100); }
.nxAppt-row:hover { background: var(--brand-tint); border-color: var(--ink-200); box-shadow: 0 3px 12px rgba(15,23,42,.05); }
.nxAppt-row:hover + .nxAppt-row { border-top-color: transparent; }
.nxAppt-row.isNoShow { background: repeating-linear-gradient(135deg, #fff, #fff 9px, #fef4f4 9px, #fef4f4 18px); }

/* date column */
.nxAppt-cDate { display: flex; flex-direction: column; gap: 3px; }
.nxAppt-cDate .dDow { font-size: 11px; font-weight: 700; color: var(--ink-400); text-transform: uppercase; letter-spacing: .04em; }
.nxAppt-cDate .dMain { font-size: 14.5px; font-weight: 700; color: var(--ink-900); }
.nxAppt-cDate .dYear { font-size: 11.5px; color: var(--ink-400); }

/* detail column */
.nxAppt-cDetail { min-width: 0; }
.nxAppt-cTitle { font-size: 14.5px; font-weight: 700; color: var(--ink-900); line-height: 1.3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nxAppt-muted { color: var(--ink-400); font-weight: 500; }
.nxAppt-statusPill { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; flex-shrink: 0; }
.nxAppt-statusPill.st-confirmed { background: #eef6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.nxAppt-statusPill.st-multi { background: var(--ink-100); color: var(--ink-600, #475569); border: 1px solid var(--ink-200); }
/* 2026-07-05 — patient review pill on Appointments-tab rows. */
.nxAppt-reviewPill { cursor: default; }
.nxAppt-reviewPill.rvPos { background: #E8F7F0; color: #157a53; border: 1px solid #BFE8D6; }
.nxAppt-reviewPill.rvNeu { background: #FDF4E5; color: #8a5409; border: 1px solid #F2DCAE; }
.nxAppt-reviewPill.rvNeg { background: #FDECEA; color: #a32b1d; border: 1px solid #F5C6C0; }
/* v64 (2026-07-02) — Task 6 (Yan): meta line reverted to "12/2/2026 style"
   — dark bold time + duration (was muted grey). Practitioner + clinic no
   longer appear here; they live in .nxAppt-cWho now. */
.nxAppt-cMeta { font-size: 13px; color: var(--ink-900); font-weight: 700; margin-top: 5px; }
.nxAppt-cMeta b { color: var(--ink-900); font-weight: 700; }
.nxAppt-cMeta .mdot { margin: 0 7px; color: var(--ink-400); font-weight: 400; }
/* v64 — Doctor / Clinic column. Practitioner is emphasised (dark bold,
   same tone as the date's dMain); clinic is a secondary line below. Both
   stay readable at 12-13px for high-density scanning. */
.nxAppt-cWho { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nxAppt-cWho .whoPrac { font-size: 13.5px; font-weight: 700; color: var(--ink-900); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxAppt-cWho .whoBiz  { font-size: 12px; font-weight: 600; color: var(--ink-700); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxAppt-extra { font-size: 11.5px; color: var(--warn); margin-top: 4px; }
.nxAppt-extra b { color: var(--ink-700); }

/* arrival column */
.nxAppt-cArr { display: flex; justify-content: flex-start; }
.nxAppt-arr { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 9px; white-space: nowrap; }
.nxAppt-arr .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.nxAppt-arr.arr-early { background: var(--nxa-green-soft); color: var(--nxa-green); border: 1px solid var(--nxa-green-bd); }
.nxAppt-arr.arr-early .dot { background: var(--nxa-green); }
.nxAppt-arr.arr-ontime { background: var(--ink-100); color: var(--ink-600, #475569); border: 1px solid var(--ink-200); }
.nxAppt-arr.arr-ontime .dot { background: var(--ink-400); }
.nxAppt-arr.arr-late { background: var(--nxa-red-soft); color: var(--nxa-red); border: 1px solid var(--nxa-red-bd); }
.nxAppt-arr.arr-late .dot { background: var(--nxa-red); }
.nxAppt-arr.arr-noshow { background: var(--nxa-red-soft); color: var(--nxa-red); border: 1px solid var(--nxa-red-bd); }
.nxAppt-arr.arr-noshow .dot { background: var(--nxa-red); }
.nxAppt-arr.arr-none { background: #fff; color: var(--ink-400); border: 1px dashed var(--ink-300); }
.nxAppt-arr.arr-none .dot { background: var(--ink-300); }
.nxAppt-arr.arr-upcoming { background: var(--brand-soft); color: var(--brand-deep); border: 1px solid var(--nxa-brand-bd); }
.nxAppt-arr.arr-upcoming .dot { background: var(--brand); }
.nxAppt-arr .clk { font-variant-numeric: tabular-nums; font-weight: 700; }
.nxAppt-arr .sep { opacity: .45; font-weight: 400; }

/* action column */
.nxAppt-cActions { display: flex; gap: 8px; justify-content: flex-end; }
.nxAppt-aBtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 8px 13px; border-radius: 9px; cursor: pointer; border: 1px solid var(--ink-200); background: #fff; color: var(--ink-700); transition: all .12s; white-space: nowrap; }
.nxAppt-aBtn:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-soft); }
.nxAppt-aBtn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.nxAppt-aBtn.primary:hover { background: var(--brand-deep); color: #fff; }
.nxAppt-aBtn svg { width: 14px; height: 14px; flex-shrink: 0; }

.nxAppt-empty { padding: 40px; text-align: center; color: var(--ink-400); font-size: 13px; }
.nxAppt-showOlderRow { padding: 6px 22px 16px; text-align: center; }
.nxAppt-showOlder { font-size: 12.5px; font-weight: 600; color: var(--brand-deep); background: #fff; border: 1px solid var(--ink-200); border-radius: 9px; padding: 8px 16px; cursor: pointer; transition: all .12s; }
.nxAppt-showOlder:hover { border-color: var(--brand); background: var(--brand-soft); }

/* ---- Responsive: stack columns on narrow widths ---- */
@media (max-width: 880px) {
  .nxAppt-colHead { display: none; }
  .nxAppt-row { grid-template-columns: 1fr; gap: 8px; padding: 13px; }
  .nxAppt-cActions { justify-content: flex-start; }
  .nxAppt-cArr { justify-content: flex-start; }
}

/* ===== LAB STATUS BOARD (tabbed) ===== */
/* side gutters + bottom gap so the whole board breathes inside the panel */
.labSB { display: flex; flex-direction: column; gap: 18px; padding: 0 22px 40px; }

/* toolbar: search + new — extra vertical breathing room around the search row */
.labSBToolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 0 6px; }
/* narrower search — no longer stretches across the whole panel */
.labSBSearch { position: relative; flex: 0 1 300px; min-width: 220px; max-width: 340px; }
.labSBSearch input {
  width: 100%; font: inherit; font-size: 13.5px; padding: 11px 14px 11px 38px;
  border: 1px solid var(--ink-200); border-radius: 10px; background: #fff; color: var(--ink-900);
  box-shadow: var(--lab-shadow-sm, 0 1px 2px rgba(16, 24, 40, .05)); transition: .14s;
}
.labSBSearch input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.labSBSearchIc { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-400); font-size: 15px; pointer-events: none; }
.labSBNew {
  font: inherit; font-size: 12.5px; font-weight: 700; padding: 10px 16px; cursor: pointer;
  background: var(--brand); border: 1px solid var(--brand); color: #fff; border-radius: 10px;
  box-shadow: var(--lab-shadow-sm, 0 1px 2px rgba(16, 24, 40, .05)); white-space: nowrap;
  margin-left: auto;
}
.labSBNew:hover { background: var(--brand-deep); border-color: var(--brand-deep); }

/* tab bar: colored top line + title + count */
.labSBTabs { display: flex; gap: 10px; flex-wrap: wrap; }
.labSBTab {
  position: relative; display: flex; align-items: center; gap: 9px; padding: 12px 16px 11px;
  background: #fff; border: 1px solid var(--ink-100); border-radius: 14px; cursor: pointer;
  box-shadow: var(--lab-shadow-sm, 0 1px 2px rgba(16, 24, 40, .05)); transition: .14s;
  font: inherit; flex: 1 1 auto; min-width: 120px; overflow: hidden;
}
.labSBTabLine { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ink-300); }
.labSBTab.prepared .labSBTabLine { background: var(--brand); }
.labSBTab.sent .labSBTabLine { background: #0EA5E9; }
.labSBTab.overdue .labSBTabLine { background: var(--lab-red); }
.labSBTab.returned .labSBTabLine { background: var(--lab-amber); }
.labSBTab.confirmed .labSBTabLine { background: var(--lab-green); }
.labSBTab.delivered .labSBTabLine { background: var(--lab-violet); }
.labSBTabTitle { font-size: 12.5px; font-weight: 800; color: var(--ink-700); letter-spacing: .02em; white-space: nowrap; }
.labSBTabN {
  margin-left: auto; font-size: 12px; font-weight: 800; color: var(--ink-500);
  background: var(--ink-50); border: 1px solid var(--ink-100); border-radius: 20px;
  padding: 2px 9px; min-width: 24px; text-align: center;
}
.labSBTab:hover { border-color: var(--ink-200); }
.labSBTab.active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.labSBTab.active .labSBTabTitle { color: var(--ink-900); }

/* horizontal cards */
.labSBCards { display: flex; flex-direction: column; gap: 12px; }
.labSBCard {
  display: flex; align-items: stretch; gap: 0; background: #fff; border: 1px solid var(--ink-100);
  border-radius: 14px; box-shadow: var(--lab-shadow, 0 1px 2px rgba(15, 23, 42, .06));
}
.labSBSex { width: 5px; flex: none; border-radius: 14px 0 0 14px; background: var(--ink-200); }
.labSBSex.male { background: var(--lab-male); }
.labSBSex.female { background: var(--lab-female); }
/* fixed grid so every card's columns line up in vertical rails */
.labSBMain {
  flex: 1; display: grid; align-items: stretch; min-width: 0;
  grid-template-columns: minmax(200px, 0.825fr) 1px 2.6fr;
}
/* Two clickable zones split by a modern divider: patient (left) + work (right) */
.labSBZone {
  display: grid; align-items: center; min-width: 0; height: 100%;
  position: relative; transition: background .14s ease, box-shadow .14s ease;
}
.labSBWho { grid-template-columns: 1fr; }
.labSBWork {
  grid-template-columns: minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(140px, 1.1fr) minmax(130px, 1.1fr);
}
.labSBZone.clk { cursor: pointer; }
.labSBZone.clk:hover { background: var(--brand-tint, #F3F8FC); }
.labSBZone.clk:active { background: var(--brand-soft, #E8F2FA); }
.labSBZone.clk:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand); border-radius: 8px; }
/* selected-look accent bar that fades in on hover */
.labSBZone.clk::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px;
  background: var(--brand); border-radius: 2px; opacity: 0; transform: scaleX(.4);
  transform-origin: left; transition: opacity .14s ease, transform .14s ease;
}
.labSBZone.clk:hover::after { opacity: 1; transform: scaleX(1); }
.labSBWho:first-child { border-radius: 0; }
/* modern divider between the two zones */
.labSBDivider {
  width: 1px; align-self: stretch; margin: 12px 0;
  background: linear-gradient(180deg, transparent, var(--ink-100) 18%, var(--ink-100) 82%, transparent);
}
.labSBCol {
  padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 5px;
  justify-content: center; border-right: 1px solid var(--ink-50); height: 100%;
}
.labSBWho .labSBCol { border-right: none; }
.labSBWork .labSBCol:last-child { border-right: none; }
.labSBLbl { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); }
.labSBVal { font-size: 13.5px; font-weight: 700; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.labSBVal.dim { font-weight: 600; color: var(--ink-600); }
.labSBVal.over { color: var(--lab-red); white-space: normal; }
.labSBVal.unbooked { color: var(--ink-400); font-style: italic; font-weight: 600; }
.labSBName { font-size: 14.5px; font-weight: 800; color: var(--ink-900); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.labSBRef { color: var(--ink-400); font-size: 11px; font-weight: 700; }
.labSBAudit { font-size: 10.5px; color: var(--ink-400); font-weight: 600; margin-top: 2px; }
.labSBChip {
  display: inline-block; background: var(--brand-tint); color: var(--brand-deep); border: 1px solid var(--brand-soft);
  border-radius: 7px; padding: 4px 9px; font-size: 11.5px; font-weight: 700; width: fit-content; max-width: 100%;
  white-space: normal; line-height: 1.3;
}

/* status pill — shown on ALL cards */
.labSBPill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; border-radius: 6px; padding: 2px 7px; width: fit-content;
  color: var(--ink-600); background: var(--ink-50); border: 1px solid var(--ink-100);
}
.labSBPill.prepared { color: var(--brand-deep); background: var(--brand-tint); border-color: var(--brand-soft); }
.labSBPill.sent { color: #0369A1; background: #F0F9FF; border-color: #BAE6FD; }
.labSBPill.overdue { color: var(--lab-red); background: var(--lab-red-bg); border-color: var(--lab-red-bd); }
.labSBPill.returned { color: var(--lab-amber); background: var(--lab-amber-bg); border-color: var(--lab-amber-bd); }
.labSBPill.confirmed { color: var(--lab-green); background: var(--lab-green-bg); border-color: var(--lab-green-bd); }
.labSBPill.delivered { color: var(--lab-violet); background: var(--lab-violet-bg); border-color: var(--lab-violet-bd); }

/* actions rail — NOT overflow:hidden so the upward ⋯ menu is never clipped */
.labSBActs {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px; flex: none; margin-left: auto;
  border-left: 1px solid var(--ink-50); background: var(--ink-50); border-radius: 0 14px 14px 0;
}
.labSBBtn {
  font: inherit; font-size: 12.5px; font-weight: 700; border-radius: 9px; padding: 8px 13px; cursor: pointer;
  white-space: nowrap; border: 1px solid; line-height: 1; transition: .12s; display: inline-flex; align-items: center; gap: 5px;
}
.labSBBtn:active { transform: translateY(1px); }
.labSBBtn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.labSBBtn.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.labSBBtn.green { background: var(--lab-green); border-color: var(--lab-green); color: #fff; }
.labSBBtn.green:hover { filter: brightness(.95); }
.labSBBtn.ghost { background: #fff; border-color: var(--ink-200); color: var(--ink-600); }
.labSBBtn.ghost:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-tint); }
/* Reverse (misclick recovery) — subtle ghost with a muted tone. */
.labSBBtn.ghost.rev { color: var(--ink-500); font-weight: 600; }
.labSBBtn.ghost.rev:hover { border-color: var(--ink-400); color: var(--ink-700); background: var(--ink-50); }
/* Remove — small square subtle danger control. */
.labSBBtn.danger.rm { padding: 8px 10px; background: #fff; border-color: #fecdca; color: #b42318; font-weight: 800; }
.labSBBtn.danger.rm:hover { background: #fef3f2; border-color: #f97066; }

.labSBMore { position: relative; }
.labSBMoreBtn {
  font: inherit; font-size: 14px; font-weight: 800; color: var(--ink-500); background: #fff;
  border: 1px solid var(--ink-200); border-radius: 9px; padding: 7px 11px; cursor: pointer; line-height: 1;
}
.labSBMoreBtn:hover { border-color: var(--brand); color: var(--brand-deep); }
/* open upward so the menu is never clipped by the card's lower border */
.labSBMenu {
  position: absolute; bottom: calc(100% + 6px); right: 0; background: #fff; border: 1px solid var(--ink-200);
  border-radius: 11px; box-shadow: var(--lab-shadow-md, 0 4px 16px rgba(15, 23, 42, .08));
  padding: 5px; min-width: 180px; z-index: 40; display: none;
}
.labSBMenu.open { display: block; }
.labSBMenuItem {
  display: flex; width: 100%; align-items: center; gap: 8px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink-700); background: none; border: none; border-radius: 8px; padding: 9px 11px; cursor: pointer; text-align: left;
}
.labSBMenuItem:hover { background: var(--ink-50); }
.labSBMenuItem.danger { color: var(--lab-red); }

.labSBEmpty {
  padding: 40px; text-align: center; color: var(--ink-400); font-size: 13.5px;
  background: var(--ink-50); border-radius: 14px; border: 1px dashed var(--ink-200);
}

@media (max-width: 880px) {
  .labSBCard { flex-direction: column; }
  .labSBSex { width: auto; height: 5px; border-radius: 14px 14px 0 0; }
  .labSBMain { grid-template-columns: 1fr; }
  .labSBWork { grid-template-columns: 1fr 1fr; }
  .labSBDivider { width: auto; height: 1px; align-self: auto; margin: 0 12px;
    background: linear-gradient(90deg, transparent, var(--ink-100) 18%, var(--ink-100) 82%, transparent); }
  .labSBZone.clk::after { left: 10px; right: 10px; bottom: 4px; }
  .labSBCol { border-right: none; border-bottom: 1px solid var(--ink-50); }
  .labSBWork .labSBCol:last-child { border-bottom: none; }
  .labSBActs { margin-left: 0; border-left: none; border-top: 1px solid var(--ink-100); border-radius: 0 0 14px 14px; }
}

/* ===== NEW-LAB-WORK PATIENT PICKER (overlay) ===== */
.labPkScrim {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(2px); z-index: 1000; animation: labPkFade .16s ease;
}
@keyframes labPkFade { from { opacity: 0; } to { opacity: 1; } }
.labPkModal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: min(78vh, 720px);
  background: #fff; border-radius: 18px; z-index: 1001; display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .28), 0 2px 8px rgba(15, 23, 42, .12);
  overflow: hidden; animation: labPkPop .18s cubic-bezier(.16, 1, .3, 1);
}
@keyframes labPkPop {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.labPkHead {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--ink-100);
}
.labPkTitle { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-900); }
.labPkSteps { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.labPkStep { font-size: 11.5px; font-weight: 700; color: var(--ink-400); }
.labPkStep.on { color: var(--brand-deep); }
.labPkStep.done { color: var(--lab-green, #2E9E6B); }
.labPkStepSep { color: var(--ink-300); font-size: 11px; }
.labPkClose {
  flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--ink-200);
  background: #fff; color: var(--ink-500); font-size: 15px; cursor: pointer; line-height: 1;
}
.labPkClose:hover { border-color: var(--brand); color: var(--brand-deep); }

.labPkBody { padding: 18px 22px; overflow: auto; flex: 1; min-height: 140px; }

/* search input */
.labPkSearchWrap { position: relative; }
.labPkSearchWrap input {
  width: 100%; font: inherit; font-size: 14px; padding: 12px 14px 12px 40px;
  border: 1px solid var(--ink-200); border-radius: 11px; background: var(--brand-tint, #F3F8FC);
  color: var(--ink-900); transition: .14s;
}
.labPkSearchWrap input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: #fff;
}
.labPkSearchIc {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-400); font-size: 15px; pointer-events: none;
}
.labPkResults { margin-top: 14px; }
.labPkHint { padding: 24px 8px; text-align: center; color: var(--ink-400); font-size: 13px; font-weight: 600; }
.labPkHint.err { color: var(--lab-red); }

/* patient + appointment lists */
.labPkList { display: flex; flex-direction: column; gap: 7px; }
.labPkRow {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 13px; border: 1px solid var(--ink-100); border-radius: 12px; background: #fff;
  cursor: pointer; font: inherit; transition: .12s;
}
.labPkRow:hover { border-color: var(--brand); background: var(--brand-tint, #F3F8FC); }
.labPkAvatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 15px; color: #fff; background: var(--ink-300);
}
.labPkAvatar.male { background: var(--lab-male); }
.labPkAvatar.female { background: var(--lab-female); }
.labPkRowMain { flex: 1; min-width: 0; }
.labPkRowName {
  font-size: 14px; font-weight: 700; color: var(--ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.labPkZh { color: var(--ink-500); font-weight: 600; font-size: 12.5px; }
.labPkRowMeta { font-size: 12px; color: var(--ink-500); font-weight: 600; margin-top: 2px; }
.labPkRowGo { flex: none; color: var(--ink-300); font-size: 20px; font-weight: 700; }
.labPkRow:hover .labPkRowGo { color: var(--brand); }

/* chosen-patient banner (step 2) */
.labPkChosen {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px;
  border: 1px solid var(--brand-soft); border-radius: 13px; background: var(--brand-tint, #F3F8FC);
}
.labPkChange {
  flex: none; font: inherit; font-size: 12px; font-weight: 700; padding: 7px 13px; cursor: pointer;
  background: #fff; border: 1px solid var(--ink-200); color: var(--brand-deep); border-radius: 8px;
}
.labPkChange:hover { border-color: var(--brand); }
.labPkSectionLbl {
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 10px;
}

/* appointment radio rows */
.labPkApptRow {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 13px; border: 1px solid var(--ink-100); border-radius: 12px; background: #fff;
  cursor: pointer; font: inherit; transition: .12s;
}
.labPkApptRow:hover { border-color: var(--brand); }
.labPkApptRow.sel { border-color: var(--brand); background: var(--brand-tint, #F3F8FC); box-shadow: 0 0 0 2px var(--brand-soft); }
.labPkRadio {
  flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-300);
  background: #fff; position: relative; transition: .12s;
}
.labPkApptRow.sel .labPkRadio { border-color: var(--brand); }
.labPkApptRow.sel .labPkRadio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand);
}

/* empty state (no completed appointments) */
.labPkEmpty { padding: 30px 20px; text-align: center; }
.labPkEmptyIc { font-size: 34px; margin-bottom: 10px; }
.labPkEmptyTitle { font-size: 15px; font-weight: 800; color: var(--ink-800); margin-bottom: 6px; }
.labPkEmptyText { font-size: 12.5px; color: var(--ink-500); font-weight: 600; line-height: 1.55; max-width: 380px; margin: 0 auto; }

/* footer */
.labPkFoot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--ink-100); background: var(--ink-50);
}
.labPkFoot .labBtn { flex: none; }
.labPkFoot .labBtn.primary { min-width: 140px; }
.labPkFoot .labBtn.primary[disabled] { opacity: .45; cursor: not-allowed; }

/* drawer header: selected-patient sub-line */
.labSpPatient { font-size: 12px; color: var(--ink-500); font-weight: 600; margin-top: 5px; }
.labSpPatientRef {
  display: inline-block; background: var(--brand-tint, #F3F8FC); color: var(--brand-deep);
  border: 1px solid var(--brand-soft); border-radius: 6px; padding: 1px 7px; font-weight: 800; font-size: 11.5px;
}
/* 2026-07-01 (Req 1) — header row: title/patient block on the left, "Open
   patient folder" button aligned to the right and vertically centred against
   the full height of the name + patient-number block. */
.labSpHeadMain { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.labSpHeadText { min-width: 0; flex: 1 1 auto; }
.labSpPatientBtn {
  flex: 0 0 auto; align-self: center; white-space: nowrap; cursor: pointer;
  border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--brand-soft); background: var(--brand-tint, #F3F8FC); color: var(--brand-deep);
  transition: background .12s ease, border-color .12s ease;
}
.labSpPatientBtn:hover { background: var(--brand-soft); border-color: var(--brand-deep); }
@media (max-width: 560px) {
  .labSpHeadMain { flex-wrap: wrap; }
  .labSpPatientBtn { width: 100%; }
}

@media (max-width: 560px) {
  .labPkModal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; top: 0; left: 0; transform: none; }
  @keyframes labPkPop { from { opacity: 0; } to { opacity: 1; } }
}

/* ===== Lab Phase 1 — clinical handoff lab tile + booking modal lab status ===== */
/* Clinical handoff tile footer ("SHOWS IN CHECKOUT") */
.nxClinicalTileFoot {
  margin-top: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-deep);
  background: var(--brand-soft);
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  align-self: flex-start;
}

/* ============================================================
   2026-07-01 — LAB HANDOFF POPUP v2 (multi-case, teal)
   Ported from lab-handoff-popup-mockup.html. Teal palette is
   scoped to the lab pane so it doesn't affect the app's blue brand.
   ============================================================ */
.nxLabPaneV2 {
  --lab-brand: #0d9488;
  --lab-brand-deep: #0f766e;
  --lab-brand-soft: #ccfbf1;
  --lab-brand-tint: #f0fdfa;
  --lab-line: #e5e9f0;
  --lab-danger: #dc2626;
}

/* Flag toggle row */
.nxLabPaneV2 .nxLabFlagRow {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  padding: 4px 0;
}
.nxLabPaneV2 .nxLabFlagRow input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--lab-brand);
  cursor: pointer;
}
.nxLabFlagText {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
}
.nxLabFields {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nxLabFields[hidden] { display: none; }

/* Lab case card (repeats) */
.nxLabCase {
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 4px 18px 18px;
  margin-bottom: 16px;
  background: #fff;
}
.nxLabCaseBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0 4px;
}
.nxLabCaseTag {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lab-brand-deep);
}
.nxLabRmBtn {
  border: none;
  background: none;
  color: var(--ink-400);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 7px;
}
.nxLabRmBtn:hover { background: #fef2f2; color: var(--lab-danger); }
.nxLabRmBtn svg { width: 13px; height: 13px; }

/* Numbered sections */
.nxLabSec {
  padding: 14px 0;
  border-bottom: 1px solid var(--lab-line);
}
.nxLabSec:last-child { border-bottom: none; padding-bottom: 2px; }
.nxLabSecHead {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
.nxLabSecNum {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--lab-brand-soft);
  color: var(--lab-brand-deep);
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.nxLabSecTitle {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-700);
}

/* Fields */
.nxLabFld { margin-bottom: 0; }
.nxLabFldLabel {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-700);
  margin-bottom: 6px;
}
.nxLabPaneV2 .nxLabInput {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink-900);
  background: #fff;
  border: 1.5px solid var(--ink-200);
  border-radius: 10px;
  padding: 11px 12px;
  transition: border-color .15s, box-shadow .15s;
}
.nxLabPaneV2 .nxLabInput:focus {
  outline: none;
  border-color: var(--lab-brand);
  box-shadow: 0 0 0 3px var(--lab-brand-tint);
}
.nxLabPaneV2 select.nxLabInput {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.nxLabTextarea { resize: vertical; min-height: 64px; }
.nxLabSecRow {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
}

/* Shade: inline label + narrow input under instructions */
.nxLabShadeInline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.nxLabShadeInline .nxLabFldLabel { margin-bottom: 0; white-space: nowrap; }
.nxLabShadeInput { max-width: 120px; }

/* Add another lab case */
.nxLabAddBtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px dashed var(--ink-300);
  background: var(--ink-100);
  color: var(--lab-brand-deep);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 13px;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-bottom: 6px;
}
.nxLabAddBtn:hover { border-color: var(--lab-brand); background: var(--lab-brand-tint); }
.nxLabAddBtn svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
  .nxLabSecRow { grid-template-columns: 1fr; }
}

/* Booking view modal — laboratory work status section */
.bookingLabRow .bookingLabStatusMount {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.bookingLabLoading,
.bookingLabEmpty {
  font-size: 13px;
  color: var(--ink-500);
  font-style: italic;
}
.bookingLabChipRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: #fff;
}
.bookingLabStatusChip {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--ink-700);
  white-space: nowrap;
}
.bookingLabStatusChip.st-flagged { background: var(--warn-soft); color: var(--warn); }
.bookingLabStatusChip.st-prepared,
.bookingLabStatusChip.st-in_production,
.bookingLabStatusChip.st-sent { background: var(--brand-soft); color: var(--brand-deep); }
.bookingLabStatusChip.st-returned,
.bookingLabStatusChip.st-confirmed,
.bookingLabStatusChip.st-fitted { background: var(--ok-soft); color: var(--ok); }
.bookingLabStatusChip.st-overdue,
.bookingLabStatusChip.st-returned_issue,
.bookingLabStatusChip.st-remake { background: #FEE2E2; color: #DC2626; }
.bookingLabStatusChip.st-cancelled { background: var(--ink-100); color: var(--ink-500); text-decoration: line-through; }
.bookingLabCaseText {
  font-size: 13px;
  color: var(--ink-900);
  font-weight: 600;
  min-width: 0;
}
.bookingLabCaseMeta {
  font-weight: 400;
  color: var(--ink-500);
}

/* ===== Variant A lab-status card (appointment modal) ===== */
.labCardA{ border:1px solid var(--ink-200); border-radius:var(--radius-sm); overflow:hidden; background:#fff; }
.labCardA .hd{ display:flex; align-items:center; gap:7px; padding:9px 12px; background:var(--brand-soft); border-bottom:1px solid var(--ink-200); flex-wrap:wrap; }
.labCardA .hd .ttl{ font-size:13px; font-weight:700; color:var(--ink-900); min-width:0; }
.labCardA .hd .case{ font-size:11px; font-weight:600; color:var(--ink-500); font-variant-numeric:tabular-nums; }
/* 2026-07-01 (Req 4) — teeth pills + vendor name folded inline into the header.
   Teeth lead before the title; vendor sits between the title and the case no.
   The edit link is pushed to the far right so the descriptive group stays left. */
.labCardA .hd .labHdTeeth{ display:inline-flex; gap:4px; flex-wrap:wrap; }
.labCardA .hd .labHdVendor{ font-size:12px; font-weight:600; color:var(--ink-600); min-width:0; }
.labCardA .hd .editLink{ margin-left:auto; background:transparent; border:none; color:var(--brand-deep); font-size:11.5px; font-weight:600; cursor:pointer; padding:2px 4px; white-space:nowrap; display:inline-flex; align-items:center; gap:3px; }
.labCardA .bd{ padding:11px 12px; display:flex; flex-direction:column; gap:9px; }
.labCardA .meta{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--ink-600); }
.labCardA .meta b{ color:var(--ink-800); font-weight:600; }
.labCardA .teeth{ display:flex; gap:5px; flex-wrap:wrap; }
.labTimeline{ display:flex; align-items:flex-start; gap:0; margin-top:2px; }
.labTimeline .step{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; position:relative; text-align:center; }
.labTimeline .step:not(:last-child)::after{ content:""; position:absolute; top:6px; left:50%; width:100%; height:2px; background:var(--ink-200); z-index:0; }
.labTimeline .step.done:not(:last-child)::after{ background:var(--brand); }
/* Current step: connector leaving it is HALF blue → grey (in-progress toward next). */
.labTimeline .step.progress:not(:last-child)::after{ background:linear-gradient(to right, var(--brand) 0%, var(--brand) 50%, var(--ink-200) 50%, var(--ink-200) 100%); }
.labTimeline .dot{ width:14px; height:14px; border-radius:50%; background:var(--ink-200); border:2px solid #fff; box-shadow:0 0 0 1px var(--ink-300); z-index:1; }
.labTimeline .step.done .dot{ background:var(--brand-deep); box-shadow:0 0 0 1px var(--brand-deep); }
/* Current step gets a solid GREEN "live" dot with a soft green halo. */
.labTimeline .step.current .dot{ background:var(--ok); border-color:#fff; box-shadow:0 0 0 3px var(--ok-soft),0 0 0 1px var(--ok); width:16px; height:16px; }
.labTimeline .lbl{ font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-400); line-height:1.2; }
.labTimeline .step.done .lbl,.labTimeline .step.current .lbl{ color:var(--ink-700); }
.labTimeline .dt{ font-size:9px; color:var(--ink-400); font-variant-numeric:tabular-nums; }
/* Overdue is a derived error state, not a timeline step — modern inline chip. */
.labOverdueChip { display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.01em; color:#b42318; background:#fef3f2; border:1px solid #fecdca; }

/* Linkage row: this appt's role + link to the paired appt */
.labLink{ display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--ink-50); border:1px solid var(--ink-200); border-radius:var(--radius-sm); font-size:12px; }
.labLink .roleTag{ font-size:9px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; padding:3px 7px; border-radius:5px; white-space:nowrap; flex:0 0 auto; }
.labLink .roleTag.origin{ background:var(--warn-soft); color:var(--warn); }
.labLink .roleTag.fitting{ background:var(--ok-soft); color:var(--ok); }
.labLink .info{ flex:1; min-width:0; color:var(--ink-600); line-height:1.35; }
.labLink .info a{ color:var(--brand-deep); font-weight:600; text-decoration:none; }
.labLink .info .lead{ color:var(--ink-500); }
.labLink .cal{ font-size:14px; flex:0 0 auto; }
.labLink.orphan{ background:#fffbeb; border-color:#fed7aa; }
.labLink.orphan .info{ color:#92400e; }
.labLink .setBtn{ background:#fff; border:1px solid var(--warn); color:var(--warn); font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:6px; cursor:pointer; white-space:nowrap; flex:0 0 auto; font-family:inherit; }

/* Empty state */
.labEmptyCard{ display:flex; align-items:center; gap:11px; padding:12px 13px; border:1px dashed var(--ink-300); border-radius:var(--radius-sm); background:var(--ink-50); }
.labEmptyCard .ic{ width:32px; height:32px; border-radius:8px; background:#fff; border:1px solid var(--ink-200); display:flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 32px; color:var(--ink-400); }
.labEmptyCard .txt{ flex:1; min-width:0; }
.labEmptyCard .t1{ font-size:13px; font-weight:600; color:var(--ink-700); }
.labEmptyCard .t2{ font-size:11.5px; color:var(--ink-500); margin-top:1px; }

/* --- Redesigned Add lab work button: full-width, modern, friendly --- */
.labAddRow{ display:flex; }
.labAddBtn{
  flex:1 1 auto; width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brand-deep); color:#fff;
  border:none; border-radius:10px;
  font-family:inherit; font-size:13px; font-weight:600;
  padding:11px 16px; cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,0.08);
  transition:background .15s, box-shadow .15s, transform .05s;
}
.labAddBtn:hover{ background:var(--brand); box-shadow:0 2px 8px rgba(63,124,166,0.25); }
.labAddBtn .plus{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,0.22); font-size:14px; line-height:1; font-weight:700; }
.labAddBtn.subtle{ background:#fff; color:var(--brand-deep); border:1.5px solid var(--brand-soft); box-shadow:none; padding:10px 16px; }
.labAddBtn.subtle:hover{ background:var(--brand-soft); border-color:var(--brand); box-shadow:none; }
.labAddBtn.subtle .plus{ background:var(--brand-soft); color:var(--brand-deep); }

/* Tooth pill (Variant A meta) */
.toothPill{ display:inline-flex; align-items:center; padding:0 8px; height:20px; border-radius:999px; background:#ffedd5; color:#9a3412; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ===== Inline lab-work editor host (Req 5) =====
   Hosts the lab drawer (.labScrim + .labSidepanel) over the appointment modal
   so editing a lab case never leaves the booking details. The wrapper is a
   fixed, full-viewport stacking context sitting ABOVE .bookingModalRoot
   (z-index 9100) — its fixed-position children (scrim z900 / panel z901 /
   picker z1000) stack relative to this context, so the whole drawer overlays
   the booking modal instead of hiding behind it. */
.labInlineHost { position: fixed; inset: 0; z-index: 9500; }

/* ====================================================================
   2026-07-02: Read-only lab drawer (Patient Folder > Lab Work tab).
   Opened for returned cases so the dentist can review the lab, teeth,
   dates and instructions without touching the workflow. All form
   controls render disabled; the save button is replaced with a note.
   ==================================================================== */
.labSidepanel.labSp-readonly .labSpBody input,
.labSidepanel.labSp-readonly .labSpBody select,
.labSidepanel.labSp-readonly .labSpBody textarea {
  background: var(--ink-50, #f5f5f4);
  color: var(--ink-700, #3f3f3f);
  cursor: default;
  pointer-events: none;
  opacity: 0.92;
}
.labSidepanel.labSp-readonly .labSpBody .labTooth { pointer-events: none; opacity: 0.9; cursor: default; }
.labSidepanel.labSp-readonly .labSpBody .labRetTab { pointer-events: none; opacity: 0.9; cursor: default; }
.labSidepanel.labSp-readonly .labSpKicker {
  background: linear-gradient(180deg, var(--ink-100), var(--ink-50));
  color: var(--ink-700);
  padding: 3px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .06em;
}
.labSpFoot-readonly {
  padding: 14px 22px;
  border-top: 1px solid var(--ink-100);
  background: var(--ink-50, #f5f5f4);
}
.labSpReadonlyNote {
  font-size: 12.5px;
  color: var(--ink-500, #666);
  line-height: 1.5;
}
.labSpReadonlyNote strong { color: var(--ink-800, #222); font-weight: 700; }

/* Patient Folder > Lab Work tab wrapper. Uses the same labSB card CSS as the
   Status Board so spacing / typography stay consistent, but adds a bit of
   breathing room above the first card. */
.patientLabTab .labSBCards { padding-top: 6px; gap: 10px; }
.patientLabTab .labSBEmpty { margin-top: 24px; }

/* ============================================================
   AUTOMATION TAB (WhatsApp > Automation) — 2026-07-03
   Self-contained palette (mockup C) scoped under the pane so it
   doesn't disturb the rest of the board. English UI throughout;
   only patient-facing reply text is written Cantonese.
   ============================================================ */
#waPaneAutomation{
  --a-bg:#FAFAF9; --a-panel:#FFFFFF; --a-ink:#1C1917; --a-sub:#78716C; --a-line:#E7E5E4;
  --a-brand:#0D9488; --a-brand-soft:#CCFBF1; --a-accent:#2563EB; --a-accent-soft:#DBEAFE;
  --a-ok:#16A34A; --a-ok-soft:#DCFCE7; --a-warn:#EA580C; --a-warn-soft:#FFEDD5;
  --a-danger:#DC2626; --a-danger-soft:#FEE2E2; --a-purple:#7C3AED; --a-purple-soft:#EDE9FE;
  --a-radius:18px; --a-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.05);
  background:var(--a-bg); color:var(--a-ink);
}
.tabsSpacer{flex:1}
.waPane{flex:1;min-height:0;display:flex;flex-direction:column}
.waPane[hidden]{display:none}
.waTopTabs{display:inline-flex;gap:2px;background:#F0EFEE;padding:4px;border-radius:13px;margin-left:8px}
.waTopTab{padding:8px 16px;font-size:14px;font-weight:600;color:#78716C;border:none;background:transparent;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-family:inherit}
.waTopTab.active{color:#1C1917;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.waTabDot{width:7px;height:7px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 3px #DCFCE7;display:inline-block}

/* ============================================================
   AI INSTRUCTION + KNOWLEDGE panes. Reuse the automation look
   (design tokens re-declared here since --a-* are scoped to
   #waPaneAutomation). English UI throughout.
   ============================================================ */
#waPaneAi,#waPaneKnowledge{
  --a-bg:#FAFAF9; --a-panel:#FFFFFF; --a-ink:#1C1917; --a-sub:#78716C; --a-line:#E7E5E4;
  --a-brand:#0D9488; --a-ok:#16A34A; --a-ok-soft:#DCFCE7; --a-warn:#EA580C; --a-warn-soft:#FFEDD5;
  --a-danger:#DC2626; --a-danger-soft:#FEE2E2;
  --a-radius:18px; --a-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.05);
  background:var(--a-bg); color:var(--a-ink);
}
#waPaneAi .autoWrap,#waPaneKnowledge .autoWrap{flex:1;min-height:0;overflow-y:auto;max-width:820px;margin:0 auto;width:100%;padding:22px 24px 60px}
.cfgEditor{background:var(--a-panel);border:1px solid var(--a-line);border-radius:var(--a-radius);box-shadow:var(--a-shadow);padding:24px 26px 26px}
.cfgEditor h2.autoSection{margin:0 0 8px}
.cfgHint{font-size:13px;color:var(--a-sub);line-height:1.55;margin:0 0 18px;max-width:680px}
.cfgLabel{display:block;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--a-sub);margin:16px 0 6px}
.cfgArea{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;line-height:1.55;color:var(--a-ink);background:#fff;border:1px solid var(--a-line);border-radius:12px;padding:11px 13px;resize:vertical;transition:box-shadow .12s,border-color .12s}
.cfgArea:focus{outline:none;border-color:var(--a-brand);box-shadow:0 0 0 3px rgba(13,148,136,.14)}
.cfgWarn{font-size:12.5px;font-weight:600;color:#9A3412;background:var(--a-warn-soft);border:1px solid #FED7AA;border-radius:12px;padding:11px 14px;margin:18px 0 4px;line-height:1.5}
.cfgActions{display:flex;align-items:center;gap:14px;margin-top:22px}
.cfgSaveBtn{font-family:inherit;font-size:14px;font-weight:700;color:#fff;background:var(--a-brand);border:none;border-radius:11px;padding:11px 22px;cursor:pointer;transition:filter .12s,opacity .12s}
.cfgSaveBtn:hover{filter:brightness(1.06)}
.cfgSaveBtn:disabled{opacity:.55;cursor:default}
.cfgStatus{font-size:13px;font-weight:600}
.cfgStatus.cfgStatusOk{color:var(--a-ok)}
.cfgStatus.cfgStatusErr{color:var(--a-danger)}

/* ---- Knowledge pane: full-width layout with left section tabs ---- */
.kbFull{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;padding:20px 26px 22px;box-sizing:border-box;overflow:hidden}
.kbFull .kbHead{flex:0 0 auto;margin-bottom:14px}
.kbFull .kbHead h2.autoSection{margin:0 0 8px}
.kbFull .kbHead .cfgHint{margin:0;max-width:900px}
.kbLayout{flex:1;min-height:0;display:flex;gap:20px;align-items:stretch}
.kbSideTabs{flex:0 0 210px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;padding-right:6px;border-right:1px solid var(--a-line)}
.kbSideTab{display:flex;align-items:center;gap:9px;text-align:left;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--a-sub);background:transparent;border:none;border-radius:10px;padding:10px 12px;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap}
.kbSideTab:hover{background:#F5F5F4;color:var(--a-ink)}
.kbSideTab.active{background:var(--a-ok-soft);color:#0F766E;font-weight:800}
.kbBody{flex:1;min-width:0;min-height:0;overflow-y:auto;padding:2px 4px 4px 2px}
.kbSection{display:none}
.kbSection.active{display:block}
.kbSection .cfgLabel:first-child{margin-top:0}
.kbSection .cfgArea{min-height:220px}
.kbActions{flex:0 0 auto;margin-top:14px;padding-top:14px;border-top:1px solid var(--a-line)}
@media (max-width:760px){
  .kbLayout{flex-direction:column}
  .kbSideTabs{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--a-line);padding-bottom:8px}
}

#autoWrap{flex:1;min-height:0;overflow-y:auto;max-width:1200px;margin:0 auto;width:100%;padding:22px 24px 60px}
.autoLoading{color:var(--a-sub);font-size:14px;padding:20px}
.autoSummary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 8px}
.autoSummary .sumCard{background:var(--a-panel);border:1px solid var(--a-line);border-radius:14px;padding:16px 18px;box-shadow:var(--a-shadow)}
.autoSummary .sumCard .n{font-size:26px;font-weight:800;letter-spacing:-.02em}
.autoSummary .sumCard .l{font-size:12px;color:var(--a-sub);font-weight:600;margin-top:2px}
.autoSummary .sumCard .n.g{color:var(--a-ok)} .autoSummary .sumCard .n.b{color:var(--a-accent)} .autoSummary .sumCard .n.r{color:var(--a-danger)}

h2.autoSection{font-size:15px;font-weight:700;margin:24px 0 14px;color:var(--a-ink)}
.autoCardGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
#waPaneAutomation .autoCard{background:var(--a-panel);border:1px solid var(--a-line);border-radius:var(--a-radius);overflow:hidden;box-shadow:var(--a-shadow);cursor:pointer;transition:transform .12s,box-shadow .12s}
#waPaneAutomation .autoCard:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.09)}
#waPaneAutomation .autoCardNew{border-style:dashed;box-shadow:none;display:flex;align-items:center;justify-content:center;min-height:200px;cursor:default}
#waPaneAutomation .autoCardNew:hover{transform:none;box-shadow:none}
.cbody{padding:18px 20px}
.cHead{display:flex;gap:12px;align-items:flex-start}
.cIcon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px;flex:0 0 auto}
.cTitle{font-size:16px;font-weight:700}
.cType{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:6px;display:inline-block;margin-top:6px}
.type-template{background:var(--a-accent-soft);color:var(--a-accent)} .type-reply{background:var(--a-purple-soft);color:var(--a-purple)}
.cType.type-fn{background:#EDE9FE;color:#6D28D9;}

/* ===== Making Appointment flow-chart detail (scoped so it can't bleed into the app) ===== */
.makeApptFlow{
  --brand:#5B9BC6; --brand-deep:#3F7CA6; --brand-soft:#E8F2FA; --brand-tint:#F3F8FC;
  --ink-900:#0F172A; --ink-700:#334155; --ink-500:#64748B; --ink-400:#94A3B8;
  --ink-300:#CBD5E1; --ink-200:#E2E8F0; --ink-100:#F1F5F9; --ink-50:#F8FAFC;
  --ok:#16A34A; --ok-soft:#DCFCE7; --warn:#D97706; --warn-soft:#FEF3C7;
  --bad:#DC2626; --bad-soft:#FEE2E2;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.03);
  --shadow-md:0 1px 2px rgba(15,23,42,.04),0 4px 14px rgba(15,23,42,.06);
  --radius-sm:8px; --radius:12px; --radius-lg:14px;
  color:var(--ink-900);
  max-width:1240px;margin:0 auto;
}
.makeApptFlow *{box-sizing:border-box;}
.makeApptFlow .crumb{font-size:12.5px;color:var(--ink-500);margin-bottom:16px;}
.makeApptFlow .crumb a{color:var(--brand-deep);text-decoration:none;font-weight:600;cursor:pointer;}
.makeApptFlow .crumb b{color:var(--ink-700);font-weight:600;}
.makeApptFlow .dHead{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.makeApptFlow .dIcon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  font-size:24px;background:var(--brand-soft);box-shadow:var(--shadow-sm);}
.makeApptFlow .dTitle{font-size:22px;font-weight:800;letter-spacing:-.01em;}
.makeApptFlow .cType{display:inline-block;margin-top:4px;font-size:11.5px;font-weight:700;
  padding:2px 9px;border-radius:999px;background:var(--brand-soft);color:var(--brand-deep);
  letter-spacing:.02em;text-transform:uppercase;}
.makeApptFlow .type-fn{background:#EDE9FE;color:#6D28D9;}
.makeApptFlow .lede{font-size:14px;color:var(--ink-700);line-height:1.55;background:#fff;
  border:1px solid var(--ink-200);border-radius:var(--radius);padding:14px 16px;
  box-shadow:var(--shadow-sm);margin-bottom:26px;}
.makeApptFlow .lede b{color:var(--ink-900);}

.makeApptFlow .flow{position:relative;background:
    radial-gradient(circle at 1px 1px, rgba(100,116,139,.16) 1px, transparent 0) 0 0/22px 22px,
    #FBFDFF;
  border:1px solid var(--ink-200);border-radius:var(--radius-lg);
  padding:34px 26px 40px;box-shadow:var(--shadow-md);}
.makeApptFlow .col{display:flex;flex-direction:column;align-items:center;}
.makeApptFlow .pipe{width:2.5px;height:26px;background:linear-gradient(var(--ink-300),var(--ink-300));}
.makeApptFlow .pipe.short{height:18px;}
.makeApptFlow .dot-end{width:9px;height:9px;border-radius:50%;background:var(--ink-300);margin-top:-1px;}
.makeApptFlow .node{background:#fff;border:1.5px solid var(--ink-200);border-radius:12px;
  box-shadow:var(--shadow-sm);width:300px;max-width:100%;overflow:hidden;position:relative;}
.makeApptFlow .node .bar{height:4px;width:100%;}
.makeApptFlow .node .in{display:flex;gap:11px;padding:13px 15px;align-items:flex-start;}
.makeApptFlow .node .nIcon{width:34px;height:34px;border-radius:9px;flex:0 0 34px;display:grid;
  place-items:center;font-size:18px;background:var(--ink-100);}
.makeApptFlow .node .nTxt{min-width:0;}
.makeApptFlow .node .nKind{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-400);margin-bottom:2px;}
.makeApptFlow .node .nTitle{font-size:14.5px;font-weight:700;color:var(--ink-900);line-height:1.25;}
.makeApptFlow .node .nSub{font-size:12.5px;color:var(--ink-500);margin-top:4px;line-height:1.45;}
.makeApptFlow .n-trigger .bar{background:#25D366;} .makeApptFlow .n-trigger .nIcon{background:#E7F9EE;}
.makeApptFlow .n-ai .bar{background:#7C3AED;} .makeApptFlow .n-ai .nIcon{background:#EDE9FE;}
.makeApptFlow .n-action .bar{background:var(--brand);} .makeApptFlow .n-action .nIcon{background:var(--brand-soft);}
.makeApptFlow .n-book .bar{background:var(--ok);} .makeApptFlow .n-book .nIcon{background:var(--ok-soft);}
.makeApptFlow .decision{width:210px;min-height:212px;position:relative;display:grid;place-items:center;
  margin:18px 0;}
.makeApptFlow .diamond{position:absolute;inset:0;margin:auto;width:150px;height:150px;
  background:linear-gradient(135deg,#FFF7E6,#FFEFC7);border:1.5px solid #E6B453;
  transform:rotate(45deg);border-radius:16px;box-shadow:var(--shadow-sm);}
.makeApptFlow .decision .dLabel{position:relative;z-index:2;text-align:center;padding:0 4px;
  font-size:12px;font-weight:700;color:#8A5A00;line-height:1.3;max-width:150px;}
.makeApptFlow .decision .dKind{position:relative;z-index:2;font-size:9.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#B0791B;margin-bottom:3px;text-align:center;}
.makeApptFlow .split{display:flex;gap:40px;align-items:flex-start;justify-content:center;
  width:100%;position:relative;margin-top:4px;}
.makeApptFlow .branch{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;min-width:0;}
.makeApptFlow .brTag{font-size:11.5px;font-weight:800;padding:4px 13px;border-radius:999px;
  letter-spacing:.02em;margin-bottom:2px;}
.makeApptFlow .tag-yes{background:var(--bad-soft);color:#B91C1C;}
.makeApptFlow .tag-no{background:var(--ok-soft);color:#15803D;}
.makeApptFlow .brConnector{width:2.5px;height:16px;background:var(--ink-300);}
.makeApptFlow .elbow{width:100%;max-width:760px;height:26px;position:relative;margin:2px auto 0;}
.makeApptFlow .elbow::before{content:"";position:absolute;top:0;left:25%;right:25%;height:2.5px;
  background:var(--ink-300);}
.makeApptFlow .elbow .drop{position:absolute;top:0;width:2.5px;height:26px;background:var(--ink-300);}
.makeApptFlow .elbow .drop.l{left:25%;} .makeApptFlow .elbow .drop.r{right:25%;}
.makeApptFlow .terminal{display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:12px;
  font-weight:700;font-size:14px;box-shadow:var(--shadow-sm);border:1.5px solid;width:300px;max-width:100%;}
.makeApptFlow .term-handoff{background:#FFF4F4;border-color:#F3B0B0;color:#B91C1C;}
.makeApptFlow .term-done{background:var(--ok-soft);border-color:#86C99B;color:#15803D;}
.makeApptFlow .terminal .tIco{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  font-size:16px;flex:0 0 30px;}
.makeApptFlow .term-handoff .tIco{background:#FEE2E2;} .makeApptFlow .term-done .tIco{background:#C7EFD3;}
.makeApptFlow .terminal .tSub{font-weight:500;font-size:12px;color:inherit;opacity:.8;margin-top:2px;}
.makeApptFlow .legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;padding:14px 16px;
  background:#fff;border:1px solid var(--ink-200);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);}
.makeApptFlow .legend .li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-700);}
.makeApptFlow .legend .sw{width:14px;height:14px;border-radius:4px;}
.makeApptFlow .tbd{display:flex;gap:12px;align-items:flex-start;width:300px;max-width:100%;padding:15px 16px;
  border:2px dashed var(--ink-300);border-radius:12px;background:repeating-linear-gradient(
  45deg,#FCFDFE,#FCFDFE 10px,#F5F8FC 10px,#F5F8FC 20px);}
.makeApptFlow .tbd .tbdIco{width:32px;height:32px;border-radius:8px;flex:0 0 32px;display:grid;
  place-items:center;font-size:17px;background:#fff;border:1px solid var(--ink-200);}
.makeApptFlow .tbd .tbdTitle{font-size:14px;font-weight:700;color:var(--ink-700);}
.makeApptFlow .tbd .tbdSub{font-size:12.5px;color:var(--ink-500);margin-top:4px;line-height:1.45;}
.cDesc{font-size:13px;color:var(--a-sub);line-height:1.5;margin:12px 0 12px}
.miniStat{display:flex;gap:14px;font-size:12.5px;color:var(--a-sub)}
.miniStat b{color:var(--a-ink)}
.cFoot{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--a-line)}
#waPaneAutomation .toggle{position:relative;width:42px;height:24px;border-radius:99px;background:var(--a-ok);cursor:pointer;flex:0 0 auto;display:inline-block}
#waPaneAutomation .toggle.off{background:#D6D3D1}
#waPaneAutomation .toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
#waPaneAutomation .toggle:not(.off)::after{left:20px}
.togWrap{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600}
.errPill{font-size:11.5px;font-weight:700;color:var(--a-danger);background:var(--a-danger-soft);padding:3px 9px;border-radius:99px}
.openLink{font-size:13px;font-weight:600;color:var(--a-brand)}

/* detail */
.crumbs{display:flex;gap:8px;font-size:13px;color:var(--a-sub);margin:0 0 16px;align-items:center}
.crumbs a{color:var(--a-brand);text-decoration:none;font-weight:600;cursor:pointer}
.detailHead{background:var(--a-panel);border:1px solid var(--a-line);border-radius:var(--a-radius);padding:22px 24px;display:flex;gap:16px;align-items:flex-start;box-shadow:var(--a-shadow)}
.detailHead .cIcon{width:54px;height:54px;font-size:25px}
.dhTitle{font-size:21px;font-weight:800}
.dhDesc{font-size:13.5px;color:var(--a-sub);line-height:1.55;margin-top:8px;max-width:640px}
.dhToggle{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.statusLive{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--a-ok)}
.statusLive .dot{width:8px;height:8px;border-radius:50%;background:var(--a-ok);box-shadow:0 0 0 3px var(--a-ok-soft)}

.subtabs{display:flex;gap:24px;margin:18px 4px 0;border-bottom:1px solid var(--a-line)}
.subtab{padding:12px 2px;font-size:14px;font-weight:600;color:var(--a-sub);border-bottom:2px solid transparent;cursor:pointer}
.subtab.active{color:var(--a-ink);border-bottom-color:var(--a-ink)}
#waPaneAutomation .pane{display:none;margin-top:20px}
#waPaneAutomation .pane.active{display:block}

.logicWrap{display:grid;grid-template-columns:280px 1fr;gap:26px}
.autoLbl{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--a-sub);margin-bottom:10px}
.waPrev{background:#EFE7DE;border-radius:14px;padding:13px}
#waPaneAutomation .waBubble{background:#fff;border-radius:10px;padding:12px;font-size:12.5px;line-height:1.5}
#waPaneAutomation .waBubble .hd{font-weight:800;margin-bottom:5px}
.waWarn{color:#B91C1C;font-weight:700;margin-top:7px}
.waBtns{margin-top:6px}
#waPaneAutomation .waBtn{background:#fff;border-radius:9px;margin-top:5px;padding:9px;text-align:center;color:#0EA5A5;font-weight:700;font-size:12.5px}
.branches{display:flex;flex-direction:column;gap:12px}
.branch{display:flex;align-items:stretch}
.brFrom{flex:0 0 120px;display:flex;align-items:center}
.brBtn{width:100%;text-align:center;padding:9px;border-radius:10px;font-weight:700;font-size:12.5px;border:1.5px solid}
.brBtn.confirm{border-color:#86EFAC;background:var(--a-ok-soft);color:#15803D}
.brBtn.reschedule{border-color:#FDBA74;background:var(--a-warn-soft);color:#C2410C}
.brBtn.cancel{border-color:#FCA5A5;background:var(--a-danger-soft);color:#B91C1C}
.brArrow{flex:0 0 42px;display:flex;align-items:center;justify-content:center;color:#A8A29E;font-size:19px}
.brTo{flex:1;background:#F5F5F4;border-radius:11px;padding:12px 14px}
.brTo .trg{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--a-sub)}
.brTo .msg{font-size:12.5px;line-height:1.5;margin-top:5px;color:#44403C}
.noReplyNote{margin-top:16px;font-size:12px;color:var(--a-warn);background:var(--a-warn-soft);border:1px solid #FDBA74;border-radius:10px;padding:10px 13px}
/* template selector + editable replies (automation rework) */
.tplChips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.tplChip{font-family:inherit;font-size:12px;font-weight:600;padding:7px 13px;border-radius:99px;border:1px solid var(--a-line);background:#fff;color:var(--a-sub);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.tplChip:hover{border-color:var(--a-ink)}
.tplChip.active{background:var(--a-brand,#0EA5A5);color:#fff;border-color:var(--a-brand,#0EA5A5)}
.tplNote{font-size:12px;color:var(--a-sub);margin-bottom:11px;line-height:1.5}
.tplNote b{color:var(--a-ink,#1C1917)}
/* modern segmented template selector */
.tplSelect{display:flex;flex-direction:column;gap:14px;margin-bottom:12px}
.segGroup{display:flex;flex-direction:column;gap:6px}
.segCap{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--a-sub)}
.segRow{display:flex;gap:4px;background:#F5F5F4;border:1px solid var(--a-line);border-radius:12px;padding:4px}
.segBtn{flex:1 1 0;min-width:0;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:inherit;font-size:13px;font-weight:700;line-height:1.25;color:var(--a-sub);background:transparent;border:1px solid transparent;border-radius:9px;padding:9px 16px;cursor:pointer;transition:background .14s,color .14s,box-shadow .14s;white-space:nowrap}
.segBtn:hover{color:var(--a-ink,#1C1917)}
.segBtn.active{background:#fff;color:var(--a-brand,#0EA5A5);border-color:var(--a-line);box-shadow:0 1px 3px rgba(28,25,23,.08)}
.segMain{font-size:13px;font-weight:700}
.segSub{font-size:11px;font-weight:600;color:var(--a-sub);opacity:.85}
.segBtn.active .segSub{color:var(--a-brand,#0EA5A5);opacity:.75}
#waPaneAutomation .waFooter{margin-top:8px;font-size:12px;color:var(--a-sub)}
.replyHint{font-size:12px;color:var(--a-sub);line-height:1.5;margin-bottom:12px;background:#F5F5F4;border-radius:10px;padding:10px 13px}
.replyHint b{color:var(--a-ink,#1C1917)}
.statusBadge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:4px 10px;border-radius:99px;border:1px solid}
.statusBadge.confirm{background:var(--a-ok-soft);color:#15803D;border-color:#86EFAC}
.statusBadge.reschedule{background:var(--a-warn-soft);color:#C2410C;border-color:#FDBA74}
.statusBadge.cancel{background:var(--a-danger-soft);color:#B91C1C;border-color:#FCA5A5}
.replyEditWrap{margin-top:9px}
.replyLbl{display:block;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--a-sub);margin-bottom:5px}
.replyEdit{width:100%;box-sizing:border-box;font-family:inherit;font-size:12.5px;line-height:1.5;color:#292524;background:#fff;border:1px solid var(--a-line);border-radius:9px;padding:9px 11px;resize:vertical}
.replyEdit:focus{outline:none;border-color:var(--a-brand,#0EA5A5);box-shadow:0 0 0 3px rgba(14,165,165,.12)}
.replyActions{display:flex;align-items:center;gap:14px;margin-top:16px}
.cfgStrip{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.cfg{flex:1;min-width:170px;background:#F5F5F4;border-radius:12px;padding:12px 14px}
.cfg .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--a-sub);font-weight:700}
.cfg .v{font-size:14px;font-weight:700;margin-top:4px}

/* patients pane */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.fchip{font-size:12px;font-weight:600;padding:6px 12px;border-radius:99px;border:1px solid var(--a-line);background:#fff;color:var(--a-sub);cursor:pointer}
.fchip.active{background:var(--a-ink);color:#fff;border-color:var(--a-ink)}
/* filter bar: status chips + dropdown filters */
.filterBar{margin-bottom:16px}
.filterBar .fchipRow{margin-bottom:12px}
.filterDrops{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.fdrop{display:flex;flex-direction:column;gap:5px}
.fdropLbl{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--a-sub)}
.fdropSel{font-family:inherit;font-size:13px;font-weight:600;color:var(--a-ink,#1C1917);background:#fff;border:1px solid var(--a-line);border-radius:9px;padding:8px 30px 8px 12px;cursor:pointer;min-width:150px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2378716C' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.fdropSel:focus{outline:none;border-color:var(--a-brand,#0EA5A5);box-shadow:0 0 0 3px rgba(14,165,165,.12)}
.fclear{font-family:inherit;font-size:12px;font-weight:600;color:var(--a-sub);background:transparent;border:1px solid var(--a-line);border-radius:9px;padding:8px 14px;cursor:pointer;transition:color .12s,border-color .12s}
.fclear:hover{color:var(--a-ink,#1C1917);border-color:var(--a-ink,#1C1917)}
.fclear.hidden{display:none}
/* enriched patient card cell */
.pMeta{font-weight:600;color:var(--a-ink,#1C1917)}
.pTag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--a-brand,#0EA5A5);background:var(--a-brand-soft);border-radius:99px;padding:2px 9px;margin-top:4px}
.listCard{background:var(--a-panel);border:1px solid var(--a-line);border-radius:var(--a-radius);overflow:hidden;box-shadow:var(--a-shadow)}
#waPaneAutomation table{width:100%;border-collapse:collapse}
#waPaneAutomation th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--a-sub);font-weight:700;padding:12px 22px;border-bottom:1px solid var(--a-line);background:#FAFAF9}
#waPaneAutomation td{padding:14px 22px;border-bottom:1px solid #F5F5F4;font-size:13.5px}
#waPaneAutomation tr:last-child td{border-bottom:none}
#waPaneAutomation tr.prow{cursor:pointer} #waPaneAutomation tr.prow:hover td{background:#FAFAF9}
.pName{font-weight:700} .pSub{font-size:12px;color:var(--a-sub);margin-top:1px}
.pNoWa{font-size:12px;font-weight:600;color:#b91c1c}
#waPaneAutomation .badge{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:99px;display:inline-flex;align-items:center;gap:6px}
.b-prepared{background:#F5F5F4;color:#57534E} .b-sent{background:var(--a-accent-soft);color:var(--a-accent)}
.b-confirmed{background:var(--a-ok-soft);color:#15803D} .b-cancelled{background:var(--a-danger-soft);color:#B91C1C}
.b-reschedule{background:var(--a-warn-soft);color:#C2410C} .b-error{background:var(--a-danger-soft);color:#B91C1C;box-shadow:0 0 0 2px #FCA5A5 inset}
.bdot{width:6px;height:6px;border-radius:50%;background:currentColor}
.miniBtn{font-size:12px;font-weight:600;color:var(--a-brand);border:1px solid var(--a-brand-soft);background:var(--a-brand-soft);padding:5px 10px;border-radius:8px;cursor:pointer}
/* 2026-07-06 — Lab case column pills on the Appointment Confirmation list. */
.labPill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:8px;white-space:nowrap}
.labPill.lab-back{background:var(--a-ok-soft);color:#15803D}
.labPill.lab-wait{background:var(--a-warn-soft);color:#C2410C}
.labNone{color:#A8A29E;font-size:12px}
.labSub{font-size:11px;color:var(--a-sub);margin-top:3px}
.b-labhold{background:var(--a-danger-soft);color:#B91C1C}

/* settings pane */
.autoSettingsCard{background:var(--a-panel);border:1px solid var(--a-line);border-radius:var(--a-radius);padding:8px 24px;box-shadow:var(--a-shadow);max-width:720px}
.setRow{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid #F5F5F4}
.setRow:last-of-type{border-bottom:none}
.setLbl{flex:1}
.setName{font-size:14.5px;font-weight:700}
.setHint{font-size:12.5px;color:var(--a-sub);line-height:1.5;margin-top:4px;max-width:460px}
.setInput{font-family:inherit;font-size:14px;font-weight:600;padding:9px 12px;border:1px solid var(--a-line);border-radius:10px;background:#fff;color:var(--a-ink);width:120px}
.setActions{display:flex;align-items:center;gap:14px;padding:20px 0 22px}
.setSave{font-family:inherit;font-size:14px;font-weight:700;color:#fff;background:var(--a-brand);border:none;border-radius:11px;padding:11px 22px;cursor:pointer}
.setSave:disabled{opacity:.6;cursor:default}
.setSaved{font-size:13px;font-weight:700;color:var(--a-ok)}
.setFoot{font-size:12.5px;color:var(--a-sub);padding-bottom:18px;line-height:1.5}

/* patient drawer */
#waPaneAutomation ~ .drawer,.drawer{position:fixed;inset:0;background:rgba(28,25,23,.3);display:none;justify-content:flex-end;z-index:2000}
.drawer.open{display:flex}
.drawerPanel{width:440px;max-width:92vw;background:#FAFAF9;height:100%;overflow-y:auto;box-shadow:-8px 0 40px rgba(0,0,0,.15)}
.dpHead{background:#fff;padding:18px 20px;border-bottom:1px solid #E7E5E4;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0}
.dpClose{font-size:20px;color:#78716C;cursor:pointer}
.dpSec{padding:16px 20px}
.dpSecTtl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#78716C;font-weight:700;margin-bottom:10px}
.kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #F5F5F4;font-size:13.5px}
.kv .k{color:#78716C} .kv .v{font-weight:600;text-align:right}
.outMsg{background:#EFE7DE;border-radius:12px;padding:11px}
small.note{display:block;color:#78716C;font-size:11.5px;margin-top:8px}
/* drawer action buttons (send + open-chat) */
.dpBtnRow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dpChatBtn{font-family:inherit;font-size:14px;font-weight:700;color:#0D9488;background:#fff;border:1.5px solid #0D9488;border-radius:11px;padding:10px 18px;cursor:pointer}
.dpChatBtn:hover{background:#F0FDFA}
/* date filter chip row (above status chips, no leading label) */
.autoDateRow{margin-bottom:12px}

@media(max-width:900px){
  .autoSummary{grid-template-columns:repeat(2,1fr)}
  .logicWrap{grid-template-columns:1fr}
}

/* ===== WhatsApp inbox: AI/Human tabs + human-takeover treatment (C2) ===== */
.waInboxTabs{display:flex;gap:4px;padding:8px 8px 0 8px;border-bottom:1px solid #e5e7eb}
.waInboxTab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 10px;border:none;background:transparent;cursor:pointer;font-size:13px;
  font-weight:600;color:#6b7280;border-bottom:2px solid transparent}
.waInboxTab.active{color:#111827;border-bottom-color:#25D366}
.waInboxTabCount{min-width:18px;padding:0 6px;border-radius:9px;background:#e5e7eb;
  color:#374151;font-size:11px;line-height:18px;text-align:center}
.waInboxTabCountHuman{background:#F59E0B;color:#fff}
.waConvItem.waConvHuman{border-left:3px solid #F59E0B;background:#FFFBEB}
.waConvItem.waConvHuman.active{background:#FEF3C7}
.waTakeoverBadge{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11px;
  font-weight:600;margin-left:6px}
.waTakeoverBadgeUnclaimed{background:#F59E0B;color:#fff}
.waTakeoverBadgeClaimed{background:#E5E7EB;color:#374151}
.waTakeoverBanner{display:block;background:#FFFBEB;border-bottom:1px solid #F59E0B}
.waTakeoverHead{display:flex;align-items:center;gap:10px;padding:8px 14px;color:#92400E}
.waTakeoverBody{padding:0 14px 8px}
.waTakeoverBannerText{font-size:13px;font-weight:600;color:#92400E}
.waTakeoverBannerActions{display:flex;gap:8px}

/* Collapsible WhatsApp panels: clickable header + chevron, persisted via JS. */
.waCollapseHead{cursor:pointer;user-select:none;position:relative}
.waCollapseHead::after{content:"\25BE";margin-left:auto;font-size:12px;line-height:1;
  opacity:.7;transition:transform .15s ease;flex:none}
.waCollapseHead[aria-expanded="false"]::after{transform:rotate(-90deg)}
.waCollapseHead:hover{filter:brightness(0.97)}
.waCollapseHead:focus-visible{outline:2px solid var(--brand,#2563EB);outline-offset:-2px}
.waCollapseBody[hidden]{display:none}
.waTakeoverBtn{padding:5px 12px;border:1px solid #D1D5DB;border-radius:6px;
  background:#fff;cursor:pointer;font-size:12px;font-weight:600;color:#374151}
.waTakeoverBtn:hover{background:#F3F4F6}
.waTakeoverBtnRelease{background:#25D366;border-color:#25D366;color:#fff}
.waTakeoverBtnRelease:hover{background:#1EBE5A}

/* ============================================================================
   Dentist × Treatment Board (read-only reference under Making Appointment).
   Warm Editorial theme reproduced inside the automation pane. All classes are
   scoped under .dtBoard to avoid collisions. Added 2026-07-09.
   ============================================================================ */
.dtBoard{--dtb-bg:#faf7f2;--dtb-card:#fffdf9;--dtb-ink:#2b2620;--dtb-muted:#8a7f70;
  --dtb-line:#ece4d8;--dtb-p:#15803d;--dtb-pbg:#e7f6ec;--dtb-s:#c2560c;--dtb-sbg:#fbe8d6;
  --dtb-sp:#8b5cf6;--dtb-spbg:#efe9fb;--dtb-x:#f2ede4;
  background:var(--dtb-bg);color:var(--dtb-ink);border:1px solid #e3d8c6;border-radius:10px;
  padding:20px 22px 24px;margin-top:4px;
  font-family:"Georgia","Times New Roman",-apple-system,"PingFang HK","Microsoft JhengHei",serif}
.dtBoard-intro{color:var(--dtb-muted);font-size:13.5px;font-style:italic;margin:0 0 14px;line-height:1.5}
.dtBoard-legend{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 16px;font-size:12.5px;color:var(--dtb-muted)}
.dtBoard-lg{display:inline-flex;align-items:center;gap:7px}
.dtBoard-sw{width:14px;height:14px;border-radius:3px;display:inline-block}
.dtBoard-sw.p{background:var(--dtb-p)}.dtBoard-sw.s{background:var(--dtb-s)}
.dtBoard-sw.x{background:#cdbfa8}.dtBoard-sw.sp{background:var(--dtb-sp)}
.dtBoard-tblwrap{background:var(--dtb-card);border:1px solid #e3d8c6;border-radius:8px;
  overflow:auto;box-shadow:0 6px 22px rgba(80,60,30,.08);max-height:72vh}
.dtBoard-table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;
  font-family:-apple-system,"Segoe UI","PingFang HK","Microsoft JhengHei",Arial,sans-serif}
.dtBoard-table thead th{position:sticky;top:0;z-index:20;background:#f3ead9;
  border-bottom:2px solid #d8ccb8;padding:8px}
.dtBoard-corner{position:sticky;left:0;z-index:25;background:#f3ead9;text-align:left;
  min-width:280px;padding-left:16px}
.dtBoard-corner2{position:sticky;left:280px;z-index:25;background:#f3ead9;min-width:90px}
.dtBoard-dh{writing-mode:vertical-rl;transform:rotate(180deg);height:150px;
  vertical-align:bottom;padding-bottom:10px}
.dtBoard-dn{font-weight:700;white-space:nowrap}
.dtBoard-dr{font-weight:400;color:var(--dtb-muted);font-size:10.5px;margin-top:3px;
  white-space:nowrap;display:block}
.dtBoard-tname{position:sticky;left:0;background:var(--dtb-card);z-index:10;
  padding:10px 14px;min-width:280px;border-right:1px solid var(--dtb-line)}
.dtBoard-tn{font-weight:700}
.dtBoard-tsw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:8px;vertical-align:middle;border:1px solid rgba(0,0,0,.12)}
.dtBoard-loading{color:#8a7f70;font-size:13.5px;font-style:italic;padding:26px 4px;font-family:"Georgia","Times New Roman",serif}
.dtBoard-err{color:#c2560c;font-size:13.5px;padding:22px;background:#fbe8d6;border:1px solid #f0d3b6;border-radius:10px;font-family:-apple-system,"Segoe UI","PingFang HK","Microsoft JhengHei",Arial,sans-serif}
.dtBoard-rnote{color:var(--dtb-muted);font-size:11px;margin-top:4px;line-height:1.35}
.dtBoard-tags{position:sticky;left:280px;background:var(--dtb-card);z-index:10;
  min-width:90px;border-right:1px solid var(--dtb-line);text-align:center}
.dtBoard-table td{border-bottom:1px solid var(--dtb-line)}
.dtBoard-catrow .dtBoard-catcell{position:sticky;left:0;background:#f6efe0;color:#7a5a1e;
  font-weight:700;padding:8px 16px;font-size:12.5px;font-family:Georgia,serif}
.dtBoard-cell{width:44px;min-width:44px;height:42px;text-align:center;font-weight:800;
  border-right:1px solid #f2ece0;user-select:none;cursor:pointer}
.dtBoard-cell:hover{filter:brightness(.95)}
.dtBoard-cell.primary{background:var(--dtb-pbg);color:#15803d}
.dtBoard-cell.secondary{background:var(--dtb-sbg);color:#c2560c}
.dtBoard-cell.special{background:var(--dtb-spbg);color:#7c3aed}
.dtBoard-cell.no{background:var(--dtb-x);color:#cdbfa8}
.dtBoard-bk{padding:2px 9px;border-radius:4px;font-size:10.5px;font-weight:700}
.dtBoard-bk-d{background:#e7f6ec;color:#15803d}
.dtBoard-bk-c{background:#fbe8d6;color:#c2560c}
.dtBoard-notes{background:var(--dtb-card);border:1px solid #e3d8c6;border-radius:8px;
  padding:18px 22px;margin-top:20px}
.dtBoard-notes h3{margin:0 0 10px;font-size:16px;color:#7a5a1e;font-family:Georgia,serif}
.dtBoard-notes ul{margin:0;padding-left:20px;color:#3a332a;font-size:13px;line-height:1.75;
  font-family:-apple-system,Arial,sans-serif}
/* Board view spans the full available width of the automation detail pane. When
   the board subtab is active, neutralise the centred max-width caps inherited
   from #autoWrap (1200px) and .makeApptFlow (1240px) so the table goes
   edge-to-edge; the flow pane keeps its capped, centred layout. */
#autoWrap:has(#pMakeBoard.active){max-width:none}
.makeApptFlow:has(#pMakeBoard.active){max-width:none}
.dtBoard,.dtBoard-tblwrap,.dtBoard-table{width:100%;max-width:none}