/* ─────────────────────────────────────────────────────────────────────────
   Visit-flow workflow (treatment plan, multi-stage stepper, plan hero,
   next-step CTA, est-vs-actual). Calm clinical: hairline borders, teal accent.
   ───────────────────────────────────────────────────────────────────────── */

/* ── New Plan Form (npf) ────────────────────────────────────────────────── */

/* Two-column layout */
.npf-layout {
  display: grid;
  grid-template-columns: 1fr 370px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 960px) {
  .npf-layout { grid-template-columns: 1fr; }
  .npf-right  { order: -1; }
}

/* Section card (used for Plan Details and Tooth Chart panel) */
.npf-section {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  overflow: hidden;
}
.npf-section-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-1);
  border-bottom: 1px solid var(--border-default);
  background: var(--neutral-50);
}
.npf-section-opt {
  margin-left: auto;
  font-weight: 400;
  font-size: 11px;
  color: var(--fg-4);
}
.npf-section-body { padding: 18px; }

/* Badge (item count) */
.npf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--primary-600);
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}

/* ── Phase card ──────────────────────────────────────────────────────────── */
.npf-phase-card {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}

/* Phase card header: [N]  [name input …]  ₱cost  [×] */
.npf-phase-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--border-default);
}
.npf-phase-num {
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-600);
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
.npf-phase-name-input {
  flex: 1;
  font-size: 13px !important;
  padding: 5px 9px !important;
  height: auto !important;
  border: 1.5px dashed var(--border-default) !important;
  background: rgba(255,255,255,.5) !important;
  border-radius: 6px !important;
  color: var(--fg-2) !important;
}
.npf-phase-name-input:hover {
  border-color: var(--fg-4) !important;
  background: #fff !important;
}
.npf-phase-name-input:focus {
  border-color: var(--primary-500) !important;
  border-style: solid !important;
  background: #fff !important;
  color: var(--fg-1) !important;
}
.npf-phase-est {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
  white-space: nowrap;
}

/* Items list inside a phase — card style */
.npf-phase-items {
  border-bottom: 1px solid var(--border-default);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--neutral-50);
}
.npf-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--primary-400);
  border-radius: 8px;
  transition: box-shadow 120ms, border-left-color 120ms;
}
.npf-item-row:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  border-left-color: var(--primary-600);
}

/* Numbered index badge */
.npf-item-idx {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-50);
  border: 1.5px solid var(--primary-200);
  color: var(--primary-700);
  font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}

.npf-item-row__body { flex: 1; min-width: 0; }
.npf-item-row__name { font-size: 13px; font-weight: 600; color: var(--fg-1); line-height: 1.3; }
.npf-item-row__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; align-items: center; }

/* Tooth number badge */
.npf-item-tooth {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  color: var(--primary-700);
  border-radius: 5px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .01em;
}

/* Cost display */
.npf-item-cost {
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

/* Delete button — hidden until row hover */
.npf-item-del { opacity: 0; transition: opacity 140ms; flex-shrink: 0; }
.npf-item-row:hover .npf-item-del { opacity: 1; }

/* Clinical notes line on item row */
.npf-item-notes {
  font-size: 11.5px;
  color: var(--fg-3);
  line-height: 1.45;
  margin-top: 4px;
  font-style: italic;
  white-space: pre-wrap;
  word-break: break-word;
}

/* "✓ Applied from chart" green indicator */
.npf-applied-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
  border-radius: 5px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
  animation: npf-tag-pop 200ms ease;
}
@keyframes npf-tag-pop {
  from { opacity: 0; transform: scale(.9) translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

/* Inline add-procedure mini-form inside each phase card */
.npf-add-row {
  padding: 14px 16px;
  background: #fafbfc;
  border-top: 1px dashed var(--border-default);
}
.npf-mini-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-2);
  margin-bottom: 4px;
}
.npf-proc-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* Cost from template — read-only display */
.npf-from-tmpl-tag {
  font-size: 10px; font-weight: 400;
  color: var(--primary-600);
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
}
.npf-cost-label {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
  padding: 7px 10px;
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  white-space: nowrap;
  width: 110px;
  text-align: right;
}

/* Collapsible Tooth # / ADA code section */
.npf-details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
}
.npf-details-toggle:hover { color: var(--primary-600); }
.npf-details-hint {
  font-weight: 400;
  color: var(--fg-4);
  font-size: 11.5px;
}
.npf-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 560px) { .npf-details-grid { grid-template-columns: 1fr; } }


/* "+ Add Phase N" button */
.npf-add-phase-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: 1px dashed var(--border-default);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-3);
  cursor: pointer;
  transition: border-color 140ms, color 140ms, background 140ms;
  margin-bottom: 14px;
}
.npf-add-phase-btn:hover {
  border-color: var(--primary-400);
  color: var(--primary-600);
  background: var(--primary-50);
}

/* Summary bar (shows after adding items) */
.npf-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--fg-2);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

/* Bottom action bar */
.npf-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── "Dental Chart" button in the procedures header ── */
.npf-chart-open-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 7px;
  font-size: 12px; font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  transition: border-color 130ms, color 130ms, background 130ms;
  white-space: nowrap;
}
.npf-chart-open-btn:hover {
  border-color: var(--primary-400);
  color: var(--primary-700);
  background: var(--primary-50);
}

/* ── "+ Add Procedure" dashed trigger on each phase card ── */
.npf-add-trigger {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-top: 1.5px dashed var(--border-default);
  font-size: 12.5px; font-weight: 600;
  color: var(--fg-4);
  cursor: pointer;
  transition: color 140ms, background 140ms, border-color 140ms;
}
.npf-add-trigger:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

/* ── Add-Procedure Modal ── */

/* Backdrop (full-screen overlay) */
.npf-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.48);
  z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.npf-modal-backdrop--open {
  opacity: 1;
  pointer-events: all;
}

/* Dialog */
.npf-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: min(1260px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.04);
  transform: scale(.97) translateY(10px);
  transition: transform 200ms cubic-bezier(.2,.7,.3,1);
}
.npf-modal-backdrop--open .npf-modal {
  transform: none;
}
/* Chart-only mode: no left panel, right fills full width */
.npf-modal--chart-only {
  max-width: min(900px, 96vw);
}

/* Modal header */
.npf-modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-default);
  background: #fff;
  flex-shrink: 0;
}

/* Modal body: form (left) + chart (right) */
.npf-modal-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.npf-modal--chart-only .npf-modal-body {
  grid-template-columns: 1fr;
}

/* Left panel — procedure form */
.npf-modal-left {
  border-right: 1px solid var(--border-default);
  padding: 16px 18px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 10px;
  background: #fff;
}

/* Right panel — chart */
.npf-modal-right {
  overflow-y: auto;
  padding: 14px 18px;
  background: #f7f8fa;
}

/* ── Odontogram inside the modal: detail panel stacks BELOW the chart ──
   This prevents the chart from being squeezed when a tooth is selected.
   The chart always keeps its full width; the condition editor appears below.  */
.npf-modal-right .odont-shell--open {
  display: flex;
  flex-direction: column;
  grid-template-columns: unset;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.npf-modal-right .odont-chart-area {
  border-bottom: 1px solid var(--border-default);
}
.npf-modal-right .odont-panel {
  border-left: none;
  border-top: none;
  max-height: 320px;
  overflow-y: auto;
  background: #f6f8fa;
}

/* Sticky add+done buttons inside the form panel */
.npf-modal-add-foot {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
}

/* Surface notes editor — appears in the left panel when a chart surface is selected */
.npf-surface-editor {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #f0faf9, #edf8f7);
  border: 1px solid #b2e0db;
  border-radius: 10px;
}
.npf-surface-editor-head {
  display: flex; align-items: flex-start; gap: 8px;
  color: #0e7c8a;
}
/* Apply button inside the surface editor */
.npf-surface-apply-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  background: var(--primary-50);
  border: 1px dashed var(--primary-300);
  border-radius: 8px;
  cursor: pointer; text-align: left;
  color: var(--primary-700);
  font-size: 13px; font-weight: 600;
  transition: background 130ms, border-color 130ms;
}
.npf-surface-apply-btn:hover {
  background: var(--primary-100);
  border-style: solid;
}
.npf-surface-apply-sub {
  font-size: 11px; font-weight: 400;
  color: var(--primary-600);
  margin-top: 1px;
}

/* "Select a surface" nudge hint */
.npf-surface-hint {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--neutral-50);
  border: 1px dashed var(--border-default);
  border-radius: 8px;
  font-size: 12px; color: var(--fg-3);
}

/* Items-already-added mini list in the modal left panel */
.npf-modal-items-preview {
  padding: 10px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 5px;
}
.npf-modal-preview-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px;
}
.npf-modal-preview-name {
  flex: 1; min-width: 0;
  color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Responsive: stack panels on small screens */
@media (max-width: 720px) {
  .npf-modal-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .npf-modal-left {
    border-right: none;
    border-bottom: 1px solid var(--border-default);
    max-height: 52vh;
  }
  .npf-modal-right { max-height: 48vh; }
  .npf-modal { max-height: 96vh; border-radius: 12px; }
}

/* Template selected — compact summary row */
.npf-tmpl-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: 8px;
  margin-bottom: 10px;
}
.npf-tmpl-selected-icon {
  color: var(--primary-600);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Duplicate / add validation error */
.npf-add-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 7px;
  font-size: 12px;
  color: #b91c1c;
}

/* Tooth condition editor panel (below odontogram in new-plan form) */
.npf-tooth-editor {
  margin-top: 14px;
  padding: 14px;
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  border-radius: 10px;
}
.npf-tooth-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* Condition selector — 3-column grid of coloured buttons */
.npf-cond-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.npf-cond-btn {
  padding: 7px 4px;
  border-radius: 7px;
  border: 1.5px solid var(--border-default);
  background: #fff;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms;
  text-align: center;
  color: var(--fg-2);
  white-space: nowrap;
}
.npf-cond-btn:hover { opacity: .85; }
.npf-cond-btn.active { font-weight: 700; }

/* Per-status colours (match odontogram palette) */
.npf-cond-btn--Healthy   { color: #374151; border-color: #d1d5db; }
.npf-cond-btn--Healthy.active   { background: #f9fafb; border-color: #374151; box-shadow: 0 0 0 2px #d1d5db; }
.npf-cond-btn--Cavity    { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }
.npf-cond-btn--Cavity.active    { border-color: #ef4444; box-shadow: 0 0 0 2px #fca5a5; }
.npf-cond-btn--Filled    { color: #3730a3; background: #e0e7ff; border-color: #a5b4fc; }
.npf-cond-btn--Filled.active    { border-color: #6366f1; box-shadow: 0 0 0 2px #a5b4fc; }
.npf-cond-btn--Crown     { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
.npf-cond-btn--Crown.active     { border-color: #f59e0b; box-shadow: 0 0 0 2px #fcd34d; }
.npf-cond-btn--Bridge    { color: #78350f; background: #fde68a; border-color: #fbbf24; }
.npf-cond-btn--Bridge.active    { border-color: #d97706; box-shadow: 0 0 0 2px #fbbf24; }
.npf-cond-btn--RootCanal { color: #9d174d; background: #fce7f3; border-color: #f9a8d4; }
.npf-cond-btn--RootCanal.active { border-color: #ec4899; box-shadow: 0 0 0 2px #f9a8d4; }
.npf-cond-btn--Extracted { color: #4b5563; background: #f3f4f6; border-color: #d1d5db; }
.npf-cond-btn--Extracted.active { border-color: #9ca3af; box-shadow: 0 0 0 2px #d1d5db; }
.npf-cond-btn--Implant   { color: #065f46; background: #d1fae5; border-color: #6ee7b7; }
.npf-cond-btn--Implant.active   { border-color: #10b981; box-shadow: 0 0 0 2px #6ee7b7; }
.npf-cond-btn--Missing   { color: #f9fafb; background: #1f2937; border-color: #374151; }
.npf-cond-btn--Missing.active   { border-color: #111827; box-shadow: 0 0 0 2px #6b7280; }

/* Tooth chart missing state */
.npf-chart-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 20px;
  text-align: center;
}

/* Field hint text */
.field-hint {
  font-size: 11.5px;
  color: var(--fg-4);
  margin-top: 4px;
}

/* 4-step stepper extras (skipped state for walk-in) */
.vf-step--skipped .vf-bubble {
  background: var(--neutral-50);
  border: 1px dashed var(--border-default);
  color: var(--fg-4);
}
.vf-step--skipped .vf-step-title {
  color: var(--fg-4);
  text-decoration: line-through;
  font-weight: 500;
}
.vf-step--skipped .vf-step-sub { color: var(--fg-4); }

.vf-walkin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px dashed var(--border-default);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 500;
  cursor: pointer;
  transition: all 140ms;
  white-space: nowrap;
}
.vf-walkin-toggle:hover { border-color: var(--fg-4); color: var(--fg-1); }
.vf-walkin-toggle.on {
  background: #fdf3e2;
  border-style: solid;
  border-color: #b76e00;
  color: #b76e00;
}

/* Next-step CTA card */
.vf-next-step {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: linear-gradient(180deg, var(--primary-50), #fff);
  border: 1px solid var(--primary-200);
  border-radius: 12px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.vf-next-step::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(800px 80px at 100% 0%, rgba(14,124,138,0.06), transparent);
  pointer-events: none;
}
.vf-next-step--walkin {
  background: linear-gradient(180deg, #fdf3e2, #fff);
  border-color: #f0d8a3;
}
.vf-next-step__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--primary-200);
  display: grid; place-items: center;
  color: var(--primary-600);
}
.vf-next-step--walkin .vf-next-step__icon {
  border-color: #f0d8a3;
  color: #b76e00;
}
.vf-next-step__body { flex: 1; min-width: 0; }
.vf-next-step__eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary-600);
  margin-bottom: 2px;
}
.vf-next-step--walkin .vf-next-step__eyebrow { color: #b76e00; }
.vf-next-step__title { font-size: 15px; font-weight: 600; color: var(--fg-1); margin-bottom: 2px; }
.vf-next-step__sub { font-size: 13px; color: var(--fg-3); }

/* Linked plan summary card on appointment page */
.vf-plan-card { background: #fff; border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; }
.vf-plan-card__head {
  padding: 16px 20px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--border-default);
}
.vf-plan-card__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: #e7eef5; color: #1a3d57;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.vf-plan-card__body { padding: 14px 20px; }
.vf-plan-card__foot {
  padding: 12px 20px;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--neutral-50);
  border-top: 1px solid var(--border-default);
  font-size: 12px; color: var(--fg-3);
}
.vf-plan-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  padding: 4px 0;
}
.vf-plan-row__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-500); flex-shrink: 0; }
.vf-plan-row__name { flex: 1; }
.vf-plan-row__cost { color: var(--fg-3); font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* Plan hero (treatment-plan detail page) */
.vf-plan-hero {
  background: linear-gradient(135deg, #1a3d57 0%, #0c2a3e 100%);
  color: #fff;
  border-radius: 14px;
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}
.vf-plan-hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(121,224,214,0.10), transparent),
    radial-gradient(400px 200px at 0% 100%, rgba(255,255,255,0.04), transparent);
  pointer-events: none;
}
.vf-plan-hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; position: relative; z-index: 1; }
.vf-plan-hero__eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.7;
}
.vf-plan-hero__name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-top: 4px; }
.vf-plan-hero__diag { font-size: 13px; opacity: 0.8; margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vf-plan-hero__rev {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  font-size: 11.5px;
  font-family: ui-monospace, monospace;
}
.vf-plan-hero__cost-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; margin-bottom: 2px; }
.vf-plan-hero__cost { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.vf-plan-hero__billed { font-size: 12px; opacity: 0.75; margin-top: 4px; font-variant-numeric: tabular-nums; }

.vf-plan-hero__progress {
  height: 6px;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 14px;
  display: flex;
  position: relative; z-index: 1;
}
.vf-plan-hero__progress-seg { height: 100%; border-right: 1px solid rgba(15,23,32,0.30); }
.vf-plan-hero__progress-seg:last-child { border-right: none; }
.vf-plan-hero__progress-seg--done       { background: linear-gradient(90deg, #79e0d6, #b9eee8); }
.vf-plan-hero__progress-seg--current    { background: rgba(255,255,255,0.5); }
.vf-plan-hero__progress-seg--deferred   { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25) 4px, transparent 4px, transparent 8px); }
.vf-plan-hero__progress-seg--skipped    { background: rgba(255,255,255,0.08); }

.vf-plan-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  position: relative; z-index: 1;
}
.vf-plan-hero__stat-label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 4px;
}
.vf-plan-hero__stat-value { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.vf-plan-hero__stat-sub { font-size: 13px; opacity: 0.6; margin-left: 4px; font-variant-numeric: tabular-nums; }

/* Plan-item phase grouping */
.vf-phase {
  border: 1px solid var(--border-default);
  border-radius: 12px;
  margin-bottom: 14px;
  background: #fff;
  overflow: hidden;
}
.vf-phase__head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--border-default);
}
.vf-phase__num {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--border-default);
  font-weight: 600;
  color: var(--fg-3);
  font-size: 12.5px;
  flex-shrink: 0;
}
.vf-phase--current .vf-phase__num { background: var(--primary-50); color: var(--primary-700); border-color: var(--primary-200); }
.vf-phase--done    .vf-phase__num { background: #e7f4ee; color: #198754; border-color: #198754; }
.vf-phase__title { font-weight: 600; font-size: 14px; color: var(--fg-1); }
.vf-phase__sub   { font-size: 12px; color: var(--fg-3); margin-top: 1px; }
.vf-phase__amount { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--fg-2); margin-left: auto; }

.vf-pp-row {
  display: grid;
  grid-template-columns: 36px 1fr 110px 110px 120px 140px auto;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-default);
  align-items: center;
}
.vf-pp-row:last-child { border-bottom: none; }
.vf-pp-row__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  display: grid; place-items: center;
  color: var(--fg-3);
  flex-shrink: 0;
}
.vf-pp-row--Completed  .vf-pp-row__icon { background: #e7f4ee; color: #198754; border-color: #c4e3d2; }
.vf-pp-row--InProgress .vf-pp-row__icon { background: var(--primary-50); color: var(--primary-700); border-color: var(--primary-200); }
.vf-pp-row__name { font-size: 14px; font-weight: 500; color: var(--fg-1); }
.vf-pp-row--Cancelled .vf-pp-row__name,
.vf-pp-row--Declined  .vf-pp-row__name { color: var(--fg-3); text-decoration: line-through; }
.vf-pp-row__meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--fg-3); margin-top: 3px; flex-wrap: wrap; }
.vf-pp-row__tooth {
  display: inline-flex; align-items: center;
  padding: 1px 8px;
  background: #e7eef5; color: #1a3d57;
  border-radius: 999px;
  font-family: ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
}
.vf-pp-row__est, .vf-pp-row__act {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--fg-2);
}
.vf-pp-row__act .delta { display: block; font-size: 11px; margin-top: 2px; }
.vf-pp-row__act.over  { color: #b76e00; }
.vf-pp-row__act.under { color: #198754; }
.vf-pp-row__progress { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--fg-3); }
.vf-pp-row__progress-bar { width: 100%; height: 4px; background: var(--neutral-100); border-radius: 999px; overflow: hidden; }
.vf-pp-row__progress-bar > div { height: 100%; background: var(--primary-500); border-radius: 999px; }
.vf-pp-row__status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.01em;
}
.vf-pp-row__status--Pending    { background: var(--neutral-100); color: var(--fg-3); }
.vf-pp-row__status--Approved   { background: var(--primary-50);  color: var(--primary-700); }
.vf-pp-row__status--InProgress { background: #fdf3e2;            color: #b76e00; }
.vf-pp-row__status--Completed  { background: #e7f4ee;            color: #198754; }
.vf-pp-row__status--Declined   { background: #fdecea;            color: #b42318; }
.vf-pp-row__status--Cancelled  { background: var(--neutral-100); color: var(--fg-4); }

.vf-pp-row__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Plan-link badge for procedures/billing */
.vf-plan-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  background: var(--primary-50);
  color: var(--primary-700);
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  font-family: ui-monospace, monospace;
}
.vf-plan-link--walkin {
  background: #fdf3e2;
  color: #b76e00;
  font-family: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────
   Treatment Plan — tab bar, phase column headers, add-form, timeline
   ───────────────────────────────────────────────────────────────────────── */

/* Tab bar */
.tp-tabs {
  display: flex;
  gap: 2px;
  background: var(--neutral-100);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 18px;
  width: fit-content;
}
.tp-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 13px; font-weight: 500;
  color: var(--fg-3);
  border: none; background: transparent; cursor: pointer;
  transition: background 130ms, color 130ms;
}
.tp-tab:hover { background: #fff; color: var(--fg-1); }
.tp-tab--on   { background: #fff; color: var(--fg-1); font-weight: 600;
                box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Empty hint in phases tab */
.tp-empty-hint {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 24px 22px;
  background: var(--neutral-50);
  border: 1px dashed var(--border-default);
  border-radius: 12px;
  color: var(--fg-3);
  margin-bottom: 18px;
}

/* Column header row above plan items */
.vf-pp-header {
  display: grid;
  grid-template-columns: 36px 1fr 110px 110px 120px 140px auto;
  gap: 16px;
  padding: 6px 20px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-4);
  background: var(--neutral-50);
  border-bottom: 1px solid var(--border-default);
}
.vf-pp-header .right { text-align: right; }

/* PlanItemRow tag variants */
.vf-pp-tag {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  font-family: ui-monospace, monospace;
  letter-spacing: .02em;
}
.vf-pp-tag--tooth   { background: #e7eef5; color: #1a3d57; }
.vf-pp-tag--surface { background: var(--neutral-100); color: var(--fg-3); }
.vf-pp-tag--ada     { background: #f0f4ff; color: #4338ca; border: 1px solid #c7d2fe; }

.vf-pp-row__note { font-size: 12px; color: var(--fg-4); }
.vf-pp-col-label { font-size: 10.5px; color: var(--fg-4); margin-bottom: 2px; }

/* Status dot inside status badge */
.vf-pp-status-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 4px;
  flex-shrink: 0;
}

/* Action buttons (inline text-style buttons) */
.vf-pp-action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px; font-weight: 500;
  color: var(--fg-2);
  border: 1px solid var(--border-default);
  background: #fff;
  cursor: pointer;
  transition: all 130ms;
  white-space: nowrap;
}
.vf-pp-action-btn:hover { border-color: var(--primary-400); color: var(--primary-700); }
.vf-pp-action-btn--danger { color: var(--danger-600); }
.vf-pp-action-btn--danger:hover { border-color: var(--danger-400); background: #fef2f2; }
/* Receipt / invoice shortcut */
.vf-pp-action-btn--receipt { color: var(--primary-600); }
.vf-pp-action-btn--receipt:hover { border-color: var(--primary-400); background: #eff6ff; }
/* Bill Now button */
.vf-pp-action-btn--bill { color: #059669; border-color: #a7f3d0; }
.vf-pp-action-btn--bill:hover { border-color: #34d399; background: #ecfdf5; }
/* Procedure detail / clipboard */
.vf-pp-action-btn--info { color: var(--fg-3); }
.vf-pp-action-btn--info:hover { border-color: var(--border-focus); color: var(--fg-1); background: var(--bg-2); }
/* Consumables hint inside Start/Complete buttons */
.vf-pp-consumable-hint {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--primary-50); color: var(--primary-700);
  border-radius: 8px; padding: 0 5px;
  font-size: 10px; font-weight: 700; margin-left: 2px;
}
/* Billing state badge */
.vf-pp-billing-badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 10px;
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.vf-pp-billing-badge--unbilled    { background: #fef9c3; color: #854d0e; }
.vf-pp-billing-badge--partiallybilled { background: #fed7aa; color: #7c2d12; }
.vf-pp-billing-badge--billed      { background: #dcfce7; color: #166534; }

/* ─── Execute / Consumables Modal ─────────────────────────────────────────── */
.exec-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  width: 600px;
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.exec-modal__head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-default);
}
.exec-modal__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--fg-1);
  flex-wrap: wrap;
}
.exec-modal__sub {
  font-size: 12px; color: var(--fg-4); margin-top: 3px;
}
.exec-modal__warnings {
  margin: 12px 20px 0;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
}
.exec-modal__warn-head {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; color: #92400e; margin-bottom: 6px;
}
.exec-modal__warn-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0;
  border-top: 1px solid #fde68a;
}
.exec-modal__warn-name { font-weight: 500; color: #92400e; min-width: 130px; }
.exec-modal__warn-detail { color: #78350f; font-size: 11.5px; }
.exec-modal__table-wrap {
  overflow-y: auto;
  flex: 1;
  padding: 14px 20px;
}
.exec-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.exec-modal__table thead th {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-4);
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--border-default);
  text-align: left;
}
.exec-modal__table thead th.center { text-align: center; }
.exec-modal__table tbody td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
}
.exec-modal__table tbody td.center { text-align: center; }
.exec-modal__table tbody tr:last-child td { border-bottom: none; }
.exec-modal__tr--warn { background: #fffbeb; }
.exec-modal__qty-input {
  width: 80px;
  padding: 4px 8px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  outline: none;
  transition: border-color 130ms;
}
.exec-modal__qty-input:focus { border-color: var(--primary-400); }
.exec-modal__qty-input--warn { border-color: #f59e0b; background: #fffdf5; }
.exec-modal__stock {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 10px;
}
.exec-modal__stock--ok  { background: #dcfce7; color: #166534; }
.exec-modal__stock--low { background: #fef9c3; color: #854d0e; }
.exec-modal__error {
  margin: 0 20px 10px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 12px;
  color: #b91c1c;
  display: flex; align-items: center; gap: 6px;
}
.exec-modal__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-default);
  background: var(--bg-2);
}

/* Add-item form card */
.tp-add-form {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 16px;
}

/* Tooth chart tab wrapper */
.tp-chart-wrap {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 20px 24px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Odontogram — 5-zone SVG tooth chart
   ───────────────────────────────────────────────────────────────────────── */

/* Shell: single column; splits 1fr + detail panel when a tooth is selected */
.odont-shell { width: 100%; }
.odont-shell--open {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  overflow: hidden;
  align-items: stretch;
}
@media (max-width: 800px) { .odont-shell--open { grid-template-columns: 1fr; } }

/* Chart area (left pane) */
.odont-chart-area { padding: 16px 20px 12px; overflow-x: auto; }

/* Arch labels */
.odont-arch-lbl {
  font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #9ca3af; text-align: center;
  margin-bottom: 6px;
}
.odont-arch-lbl--bot { margin-top: 6px; margin-bottom: 0; }

/* Tooth rows — 16-column grid so teeth fill the width proportionally */
.odont-row {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 4px;
}

/* Mid-gap divider between arches */
.odont-midline {
  height: 1px; background: #eaecef;
  margin: 10px 16px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.odont-midline span {
  background: #fff; color: #9ca3af;
  padding: 0 8px; font-size: 11px;
  position: absolute;
}

/* ── Tooth slot ── */
.odont-tooth-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(.2,.7,.3,1);
}
.odont-tooth-wrap:hover { transform: translateY(-2px); }
.odont-row--lower .odont-tooth-wrap { flex-direction: column-reverse; }
.odont-tooth-wrap--sel { transform: translateY(-3px) !important; }

/* Tooth number label */
.odont-tooth-num {
  font-size: 10px; font-weight: 500;
  color: #6b7280; font-variant-numeric: tabular-nums;
  line-height: 1; user-select: none;
  transition: color 120ms;
}
.odont-tooth-num--sel { color: #0e7c8a; font-weight: 600; }

/* SVG container — square, positioned for overlays */
.odont-svg-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.odont-tooth-wrap--sel .odont-svg-wrap {
  outline: 1.5px solid #0e7c8a;
  outline-offset: 2px;
  border-radius: 4px;
  background: rgba(14,124,138,0.05);
}

/* Transparent zone overlays — clip-path matches SVG polygon vertices (40×40 vb) */
.odont-zone {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  background: #0e7c8a;
  transition: opacity 120ms;
}
.odont-zone:hover { opacity: .12; }

/* viewBox 40×40: inner corners at (13.5,13.5) (26.5,13.5) (26.5,26.5) (13.5,26.5) */
.odont-zone--top    { clip-path: polygon(5% 5%, 95% 5%, 66.25% 33.75%, 33.75% 33.75%); }
.odont-zone--right  { clip-path: polygon(95% 5%, 95% 95%, 66.25% 66.25%, 66.25% 33.75%); }
.odont-zone--bottom { clip-path: polygon(95% 95%, 5% 95%, 33.75% 66.25%, 66.25% 66.25%); }
.odont-zone--left   { clip-path: polygon(5% 95%, 5% 5%, 33.75% 33.75%, 33.75% 66.25%); }
.odont-zone--center { clip-path: polygon(33.75% 33.75%, 66.25% 33.75%, 66.25% 66.25%, 33.75% 66.25%); }

/* Plan status dot */
.odont-dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  z-index: 3; pointer-events: none;
}
.odont-dot--pending    { background: #f59e0b; }
.odont-dot--approved   { background: var(--primary-500); }
.odont-dot--inprogress { background: #3b82f6; }
.odont-dot--completed  { background: #10b981; }
.odont-dot--closed     { background: #9ca3af; }

/* ── Legend ── */
.odont-legend {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border-default);
}
.odont-legend-title {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--fg-4); margin-bottom: 7px;
}
.odont-legend-items { display: flex; flex-wrap: wrap; gap: 5px 12px; }
.odont-legend-item  { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fg-2); }
.odont-lswatch {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 3px; border: 1.5px solid #d1d5db;
  background: #fff; flex-shrink: 0;
}

/* ── Detail panel (right column) ── */
.odont-panel {
  border-left: 1px solid var(--border-default);
  background: #f6f8fa;
  display: flex; flex-direction: column;
  overflow-y: auto; max-height: 680px;
}
.odont-panel-head {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px 12px;
  background: #fff;
  border-bottom: 1px solid #eaecef; gap: 8px;
  flex-shrink: 0;
}
.odont-panel-num {
  font-size: 22px; font-weight: 700;
  color: #111827; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.odont-panel-region {
  display: inline-flex; padding: 2px 8px;
  background: #fff; border: 1px solid #eaecef;
  border-radius: 999px; font-size: 11px; color: #4b5563;
}
.odont-panel-type {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  background: rgba(14,124,138,0.08); color: #0e7c8a;
  font-size: 11px; font-weight: 500; border-radius: 999px;
}
.odont-panel-section {
  padding: 12px 16px;
  border-bottom: 1px solid #eaecef;
  flex-shrink: 0;
}
.odont-panel-section:last-child { border-bottom: none; }
.odont-panel-section-lbl {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: #6b7280; margin-bottom: 8px;
}

/* Surface condition rows (clickable) */
.odont-surf-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; width: 100%;
  background: #fff; border: 1px solid #eaecef;
  border-radius: 8px; cursor: pointer;
  text-align: left; transition: all 120ms;
}
.odont-surf-btn:hover { background: #f0faf9; border-color: #0e7c8a30; }
.odont-surf-btn--sel  { background: rgba(14,124,138,0.07); border-color: #0e7c8a; }
.odont-surf-swatch {
  width: 13px; height: 13px; border-radius: 3px;
  border: 1px solid #d1d5db; flex-shrink: 0;
}
.odont-surf-label { font-size: 12px; color: #374151; flex: 1; }
.odont-surf-cond  { font-size: 11px; color: #6b7280; white-space: nowrap; }

/* Condition picker hint */
.odont-cond-hint {
  font-size: 11.5px; color: #9ca3af;
  padding: 8px 10px; background: #f6f8fa;
  border: 1px dashed #eaecef; border-radius: 8px;
  margin-bottom: 8px; line-height: 1.5;
}

/* Condition chip grid (2 columns) */
.odont-cond-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
}
.odont-cond-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  background: #fff; border: 1px solid #eaecef;
  border-radius: 7px; cursor: pointer;
  text-align: left; transition: all 120ms;
  font-size: 11px; color: #374151;
  overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.odont-cond-chip:hover:not(:disabled) { background: #f0faf9; border-color: #0e7c8a40; }
.odont-cond-chip--on { background: rgba(14,124,138,0.07); border-color: #0e7c8a; color: #111827; font-weight: 500; }
.odont-cond-chip:disabled { opacity: .6; cursor: not-allowed; }
.odont-cond-dot {
  width: 11px; height: 11px; border-radius: 3px;
  border: 1px solid #d1d5db; flex-shrink: 0;
}

/* Reset tooth button */
.odont-reset-btn {
  font-size: 10.5px; color: #6b7280;
  background: transparent; border: 1px solid #eaecef;
  border-radius: 6px; padding: 3px 8px;
  cursor: pointer; white-space: nowrap;
}
.odont-reset-btn:hover { border-color: #9ca3af; color: #374151; }

/* Save error */
.odont-save-err {
  display: flex; align-items: center; gap: 5px;
  margin-top: 8px; padding: 6px 9px;
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 7px; font-size: 11.5px; color: #b91c1c;
}

/* Planned procedure rows */
.odont-plan-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid #eaecef;
}
.odont-plan-item:last-child { border-bottom: none; }

/* Per-surface notes textarea in panel */
.odont-notes-textarea {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  resize: vertical;
  min-height: 70px;
}

/* Surface note pip — tiny dot shown on surface button when notes exist */
.odont-surf-note-pip {
  margin-left: auto;
  font-size: 7px;
  color: var(--primary-400);
  line-height: 1;
}

/* Notes dot on tooth grid (small amber pip in top-right of SVG wrap) */
.odont-notes-dot {
  position: absolute;
  top: 0; right: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #f59e0b;
  border: 1px solid #fff;
  pointer-events: none;
}

/* Read-only notes block in panel */
.odont-readonly-notes {
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.5;
  padding: 8px 10px;
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  border-radius: 7px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Combined notes summary — surface label + text pairs */
.odont-note-entry {
  padding: 6px 10px;
  background: var(--neutral-50);
  border-left: 3px solid var(--primary-200);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
}
.odont-note-surface {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--primary-600);
  margin-bottom: 2px;
}
.odont-note-text {
  color: var(--fg-2);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Add procedure footer */
.odont-panel-foot { padding: 12px 16px; margin-top: auto; flex-shrink: 0; }
.odont-add-proc-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; width: 100%; padding: 9px 12px;
  background: var(--primary-50);
  border: 1px dashed var(--primary-300);
  border-radius: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--primary-700); cursor: pointer; transition: all 130ms;
}
.odont-add-proc-btn:hover { background: var(--primary-100); border-style: solid; }

/* ─────────────────────────────────────────────────────────────────────────
   Timeline tab
   ───────────────────────────────────────────────────────────────────────── */

.tp-timeline { padding: 6px 0; }
.tp-tl-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 0;
}
.tp-tl-spine {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 4px;
}
.tp-tl-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--border-default);
  flex-shrink: 0;
  background: var(--neutral-100);
}
.tp-tl-dot--Pending    { background: #f59e0b; box-shadow: 0 0 0 2px #fde68a; }
.tp-tl-dot--Approved   { background: var(--primary-400); box-shadow: 0 0 0 2px var(--primary-100); }
.tp-tl-dot--InProgress { background: #3b82f6; box-shadow: 0 0 0 2px #bfdbfe; }
.tp-tl-dot--Completed  { background: #10b981; box-shadow: 0 0 0 2px #a7f3d0; }
.tp-tl-dot--Declined,
.tp-tl-dot--Cancelled  { background: #d1d5db; }
.tp-tl-line {
  width: 1.5px; flex: 1;
  background: var(--border-default);
  min-height: 28px;
  margin: 4px 0;
}
.tp-tl-content { padding: 2px 0 20px; }
.tp-tl-title { font-size: 14px; font-weight: 500; color: var(--fg-1); margin-bottom: 3px; }
.tp-tl-meta  { font-size: 12px; color: var(--fg-3); }

/* Est-vs-actual delta (for billing) */
.vf-delta { font-size: 11px; font-weight: 500; }
.vf-delta--over  { color: #b76e00; }
.vf-delta--under { color: #198754; }
.vf-delta--match { color: var(--fg-4); }

/* Patient-page treatment-plan section */
.vf-pl-card {
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: #fff;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: border-color 140ms, box-shadow 140ms;
}
.vf-pl-card:hover { border-color: var(--primary-300); box-shadow: 0 1px 4px rgba(14,124,138,0.08); }
.vf-pl-card__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: #e7eef5; color: #1a3d57;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.vf-pl-card__body { flex: 1; min-width: 0; }
.vf-pl-card__title { font-size: 14px; font-weight: 600; color: var(--fg-1); margin-bottom: 2px; }
.vf-pl-card__sub   { font-size: 12px; color: var(--fg-3); }
.vf-pl-card__right { text-align: right; flex-shrink: 0; }
.vf-pl-card__cost  { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vf-pl-card__chip  { font-size: 11px; color: var(--fg-3); margin-top: 2px; }