:root {
  --bg: #f3f7f5;
  --bg-2: #eaf1ef;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-strong: #ffffff;
  --ink: #101b18;
  --navy: #101d2d;
  --muted: #657570;
  --faint: #8a9994;
  --line: #dce7e3;
  --line-strong: #c7d7d1;
  --mint: #28d17c;
  --mint-2: #9ff2c3;
  --teal: #0f8f7b;
  --teal-dark: #08675e;
  --lime: #c6f747;
  --gold: #b78a2d;
  --amber: #bb6902;
  --red: #b42318;
  --red-soft: #fff0ef;
  --blue: #2563eb;
  --shadow: 0 24px 70px rgba(15, 31, 27, 0.09);
  --shadow-soft: 0 14px 36px rgba(15, 31, 27, 0.06);
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 28px;
  --ease: 180ms cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background:
    linear-gradient(135deg, rgba(198, 247, 71, 0.16), transparent 28%),
    radial-gradient(circle at 92% 6%, rgba(15, 143, 123, 0.13), transparent 30%),
    linear-gradient(180deg, #f9fbfa 0%, var(--bg) 100%);
}

#shell { min-height: 100vh; }

.boot-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.boot-card { min-height: 310px; }
.boot-line {
  height: 14px;
  margin-top: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf3f0 25%, #f8faf9 50%, #edf3f0 75%);
  background-size: 200% 100%;
  animation: boot-shimmer 1.2s ease-in-out infinite;
}
.boot-title { width: 58%; height: 30px; margin-top: 28px; }
.boot-short { width: 72%; }
@keyframes boot-shimmer { to { background-position: -200% 0; } }

.boot-app { display: none; }

body.shell-boot .boot-anon { display: none; }
body.shell-boot .boot-app {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
}
.boot-app-sidebar {
  padding: 24px 18px;
  background: #0d1210;
  border-right: 1px solid rgba(255,255,255,.06);
}
.boot-app-sidebar .boot-line {
  background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 75%);
  background-size: 200% 100%;
}
.boot-app-brand { width: 60%; height: 20px; margin-top: 0; }
.boot-app-main { display: flex; flex-direction: column; min-width: 0; }
.boot-app-topbar {
  height: 92px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.6);
  flex: none;
}
.boot-app-content { padding: 28px; }

body.business #shell {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
}

body.login,
body.user {
  display: block;
  background:
    radial-gradient(circle at 18% 12%, rgba(40, 209, 124, .16), transparent 28%),
    linear-gradient(135deg, #f8fbfa, #edf4f1);
}

body.login #shell,
body.user #shell { display: block; }

.hidden { display: none !important; }

button,
input,
select,
textarea,
a {
  font: inherit;
}

button,
a {
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--ink);
  padding: 0 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease), color var(--ease);
}

button:hover,
a:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 143, 123, .35);
  box-shadow: 0 10px 24px rgba(15, 31, 27, .08);
}

button.active,
a,
.primary-link {
  background: linear-gradient(135deg, var(--teal), #12a889);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 30px rgba(15, 143, 123, .22);
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.92);
  color: var(--ink);
  padding: 0 13px;
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}

textarea {
  min-height: 92px;
  padding: 12px 13px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(15, 143, 123, .75);
  box-shadow: 0 0 0 4px rgba(40, 209, 124, .16);
  background: #fff;
}

label {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  color: #263632;
  font-size: 13px;
  font-weight: 760;
}

aside {
  position: sticky;
  top: 0;
  min-height: 100vh;
  height: 100vh;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 22px 16px;
  border-right: 1px solid rgba(220, 231, 227, .78);
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(18px);
  box-shadow: 16px 0 44px rgba(15, 31, 27, .05);
}

aside strong,
.brand {
  font-size: 25px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0;
}

.medical-sidebar small {
  color: var(--faint);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: -2px 0 13px;
}

.medical-sidebar button {
  min-height: 44px;
  justify-content: flex-start;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #50625d;
  font-weight: 780;
  padding: 0 12px;
  box-shadow: none;
}

.medical-sidebar button span {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: #edf6f3;
  color: var(--teal-dark);
  font-size: 13px;
}

.medical-sidebar button:hover {
  background: #f1f7f4;
  transform: translateX(2px);
  box-shadow: none;
}

.medical-sidebar button.active {
  color: #0b241d;
  background: linear-gradient(135deg, #dff8e7, #f4ffd7);
  box-shadow: inset 0 0 0 1px rgba(15, 143, 123, .16), 0 12px 30px rgba(40, 209, 124, .16);
}

.medical-sidebar button.active span {
  color: #0e4f42;
  background: rgba(255,255,255,.82);
}

main { min-width: 0; padding: 28px; }

.medical-main {
  display: grid;
  gap: 18px;
  padding: 24px clamp(16px, 2.6vw, 34px);
}

.medical-topbar {
  position: relative;
  top: auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid rgba(220, 231, 227, .78);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
}

.breadcrumb {
  margin: 0 0 5px;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.medical-content {
  display: grid;
  gap: 18px;
  animation: pageIn 260ms var(--ease);
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

h1,
h2,
h3,
p { margin-top: 0; }

h1 {
  margin-bottom: 6px;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.03;
  letter-spacing: 0;
  color: var(--navy);
}

h2 { margin-bottom: 4px; font-size: 21px; color: var(--ink); }
h3 { margin-bottom: 8px; font-size: 16px; color: var(--ink); }
p, span, small, em { color: var(--muted); font-style: normal; }

.modebar,
.mini-actions,
.lead-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.modebar input {
  width: min(320px, 38vw);
  border-radius: 999px;
}

.panel,
article,
.aesthetic-crm .cards article {
  border: 1px solid rgba(220, 231, 227, .86);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.panel {
  padding: 20px;
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-head span { font-size: 13px; }

article {
  padding: 18px;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

article:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 143, 123, .22);
  box-shadow: var(--shadow);
}

article strong {
  display: block;
  margin: 8px 0 5px;
  color: var(--ink);
  font-size: 31px;
  line-height: 1;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.aesthetic-crm .cards,
.aesthetic-crm .lead-metrics {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.quick-actions-panel { margin-bottom: 18px; }

.doctor-command-hero { display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:26px 28px;margin-bottom:18px;border:1px solid #dbe9e5;border-radius:22px;background:linear-gradient(135deg,#f7fcfa 0%,#eef8f5 55%,#e2f2ee 100%);box-shadow:0 14px 40px rgba(17,74,62,.08) }
.doctor-command-hero h2 { margin:4px 0 7px;font-size:clamp(24px,3vw,36px);letter-spacing:-.035em;color:#153e35 }
.doctor-command-hero span { color:#58716b }
.doctor-kpi-strip { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px }
.doctor-kpi-strip article { position:relative;padding:17px 18px;border:1px solid #e2ebe8;border-radius:17px;background:#fff;box-shadow:0 8px 24px rgba(24,63,55,.05) }
.doctor-kpi-strip article::before { content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:#4fa88f }
.doctor-kpi-strip article.needs-attention::before { background:#e59b49 }
.doctor-kpi-strip span,.doctor-kpi-strip small { display:block;color:#6b7d79 }
.doctor-kpi-strip strong { display:block;margin:4px 0;font-size:28px;color:#173f36 }
.doctor-command-grid { display:grid;grid-template-columns:minmax(0,1.75fr) minmax(290px,.75fr);gap:18px;align-items:start }
.doctor-main-column,.doctor-side-column { display:grid;gap:18px }
.doctor-next-card { border-color:#b9ddd2;background:linear-gradient(180deg,#fff,#f8fcfb) }
.live-indicator { padding:6px 9px;border-radius:999px;background:#dff5ec;color:#18785f!important;font-size:11px;font-weight:800;letter-spacing:.08em }
.doctor-queue-list { display:grid;gap:9px }
.doctor-queue-card { display:grid;grid-template-columns:92px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:14px;border:1px solid #e3ece9;border-left:4px solid #8ca8a1;border-radius:14px;background:#fff }
.doctor-queue-card.waiting,.doctor-queue-card.live { border-left-color:#16866a;background:#f8fdfa }
.doctor-queue-card.done { opacity:.72;border-left-color:#7a968f }
.doctor-time strong,.doctor-time span,.doctor-patient strong,.doctor-patient span,.doctor-patient small { display:block }
.doctor-time strong { font-size:17px;color:#173f36 }.doctor-time span { margin-top:3px;font-size:11px;color:#768984 }
.doctor-patient strong { color:#173f36 }.doctor-patient span { margin-top:3px;color:#566d67 }.doctor-clinical-hint { margin-top:6px;color:#8a6250!important }
.doctor-state { padding:6px 9px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap;background:#edf2f1;color:#5e716d }
.doctor-state.waiting,.doctor-state.live { background:#dff5ec;color:#18785f }.doctor-state.done { background:#edf3f1;color:#58716b }
.doctor-alert-panel { border-color:#efd9c7 }.doctor-alert { width:100%;display:block;text-align:left;margin-top:8px;padding:11px 12px;border:1px solid #f0ded0;border-radius:12px;background:#fffaf6;color:#6f4c37 }.doctor-alert strong,.doctor-alert span { display:block }.doctor-alert span { margin-top:4px;font-size:12px }
.doctor-followup-list { display:grid;gap:8px }.doctor-followup-list article { padding:11px;border:1px solid #e5ecea;border-radius:12px }.doctor-followup-list strong,.doctor-followup-list span,.doctor-followup-list small { display:block }.doctor-followup-list span { margin:4px 0;color:#657873 }.doctor-followup-list small { color:#879792 }
.doctor-shortcuts { display:grid;gap:8px }.doctor-shortcuts .panel-head { margin-bottom:2px }.doctor-shortcuts button { width:100%;text-align:left }
.doctor-empty { display:grid;gap:5px;padding:24px;text-align:center;color:#6d807b }.doctor-empty strong { color:#284d44 }
@media (max-width:980px){.doctor-command-grid{grid-template-columns:1fr}.doctor-kpi-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.doctor-command-hero{align-items:flex-start;flex-direction:column;padding:20px}.doctor-kpi-strip{grid-template-columns:1fr 1fr}.doctor-queue-card{grid-template-columns:72px minmax(0,1fr)}.doctor-queue-card .doctor-state,.doctor-queue-card .mini-actions{grid-column:2}.doctor-queue-card .mini-actions{justify-content:flex-start}}

.dashboard-top-cards .card-alert {
  border: 1px solid rgba(217, 119, 6, .35);
  background: linear-gradient(180deg, rgba(253, 230, 138, .3), rgba(255,255,255,.9) 60%);
}

.dashboard-top-cards .card-alert strong {
  color: #b45309;
}

.inline-date-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #53625e;
}

.inline-date-filter input {
  min-height: 32px;
  border-radius: 999px;
  padding: 0 10px;
  border: 1px solid var(--line);
}

.package-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 10px;
}

.package-progress {
  height: 8px;
  border-radius: 999px;
  background: #eef1f6;
  overflow: hidden;
}

.package-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0f8f7b, #28d17c);
  border-radius: 999px;
}

.package-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #53625e;
}

.before-after-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.before-after-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.before-after-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
}

.before-after-preview span {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef1f6;
  color: #9aa39f;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.quick-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-actions-row button {
  flex: 1 1 170px;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease;
}

.quick-actions-row button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(18, 47, 42, .10);
}

.aesthetic-crm .cards article {
  min-height: 128px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.82)),
    radial-gradient(circle at 92% 10%, rgba(198,247,71,.28), transparent 40%);
}

.aesthetic-crm .cards article::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 62px;
  height: 8px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--mint) 0 3px, transparent 3px 7px);
  opacity: .65;
}

.cards.compact article { padding: 15px; }
.cards.compact article strong { font-size: 24px; }

.split,
.lead-layout,
.patient-split {
  display: grid;
  gap: 18px;
}

.split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.billing-workspace { grid-template-columns: minmax(340px, .88fr) minmax(0, 1.12fr); align-items: start; }
.lead-layout { grid-template-columns: 330px minmax(0, 1fr); align-items: start; margin-top: 18px; }
.aesthetic-crm .lead-layout { grid-template-columns: 320px minmax(0, 1fr); }
.patient-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 16px; }

.row,
.timeline div,
.patient-split > div,
.lead-column,
.lead-card,
.table-lite div,
.module-empty {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.72);
}

.row { display: grid; gap: 5px; padding: 13px; margin-bottom: 10px; }

.table-lite {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.table-lite div {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  transition: border-color var(--ease), background var(--ease), transform var(--ease);
}

.table-lite div:hover {
  border-color: rgba(15,143,123,.24);
  background: #fff;
  transform: translateY(-1px);
}

.table-lite strong small {
  display: block;
  margin-top: 4px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 520;
}

.table-lite.users div { grid-template-columns: 1.4fr .8fr .8fr .5fr; }
.invoice-list div {
  grid-template-columns: 1.15fr 1fr 1fr .65fr auto;
  border-radius: 12px;
  transition: box-shadow .12s ease, transform .12s ease;
}
.invoice-list div:hover {
  box-shadow: 0 6px 16px rgba(18, 47, 42, .08);
  transform: translateY(-1px);
}

.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.invoice-preview {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(15,143,123,.16);
  border-radius: 18px;
  background: linear-gradient(135deg, #f7fffb, #fffdf2);
  color: var(--teal-dark);
  font-weight: 900;
}

.invoice-sheet {
  display: grid;
  gap: 18px;
  color: var(--ink);
}

.invoice-sheet header,
.invoice-party,
.invoice-totals {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.invoice-sheet header strong {
  display: block;
  color: var(--navy);
  font-size: 20px;
}

.invoice-sheet b,
.invoice-sheet .invoice-totals b {
  color: var(--ink);
}

.invoice-party > div,
.invoice-totals span {
  display: grid;
  gap: 4px;
}

.invoice-sheet footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.timeline {
  display: grid;
  gap: 10px;
}

.timeline div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-left: 4px solid var(--teal);
}

.timeline.mini { gap: 6px; }
.timeline.mini div { border-left-width: 2px; padding: 8px 10px; font-size: 12px; }

.module-empty {
  min-height: 320px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  background: linear-gradient(135deg, #fff, #f4faf7);
}

.module-empty h2 { color: var(--navy); }

.inset,
.inner-panel { box-shadow: none; }
.inner-panel { margin-top: 16px; }

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1000;
  max-width: min(420px, calc(100vw - 32px));
  padding: 14px 18px;
  border-radius: 18px;
  background: #10211e;
  color: #fff;
  box-shadow: 0 18px 50px rgba(13, 33, 30, .22);
  font-size: 14px;
  animation: pageIn .18s ease-out;
}

.toast.error {
  background: #7f1d1d;
}

.preview-banner {
  position: sticky;
  top: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 18px;
  background: #7c3aed;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  text-align: center;
}

.preview-banner button {
  min-height: 30px;
  padding: 0 14px;
  background: #fff;
  color: #7c3aed;
  border: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 31, 28, .34);
  backdrop-filter: blur(10px);
  animation: modalFadeIn .15s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-panel {
  width: min(680px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 30px 90px rgba(18, 47, 42, .24);
  padding: 22px;
  animation: modalSlideIn .18s ease-out;
}

.stack-form {
  display: grid;
  gap: 14px;
}

.mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.mini-actions button,
.mini-actions a {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
}

.kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(205px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 8px;
}

.compact-kanban { grid-template-columns: repeat(4, minmax(220px, 1fr)); }

.lead-column {
  min-width: 205px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(180deg, #f8fbfa, #eef6f3);
}

.lead-column h3 {
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

.lead-column h3 span {
  color: #0e4f42;
  background: #ddf8e8;
  border-radius: 999px;
  padding: 3px 8px;
}

.lead-card {
  padding: 13px;
  box-shadow: none;
  display: grid;
  gap: 9px;
  border-left: 4px solid #9aa8b5;
  background: #fff;
}

.lead-card.hot { border-left-color: var(--red); }
.lead-card.high { border-left-color: var(--amber); }
.lead-card.overdue { background: #fff8ee; border-color: #fed7aa; border-left-color: #c2410c; }
.lead-card p { margin: 0; font-size: 13px; line-height: 1.42; }

.lead-top,
.lead-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lead-top span,
.status-pill {
  text-transform: uppercase;
  color: #0e4f42;
  background: #e7f8ef;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.lead-card.hot .lead-top span { background: var(--red-soft); color: var(--red); }
.lead-card.high .lead-top span { background: #fff6df; color: #8a610b; }
.lead-meta { font-size: 12px; }
.lead-actions button { min-height: 32px; padding: 0 9px; font-size: 12px; }

.filter-bar {
  display: grid;
  grid-template-columns: 1fr 220px 220px auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.settings-grid code {
  display: block;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f7faf9;
  color: var(--teal-dark);
  word-break: break-all;
}

.inline-form {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.4fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.availability-grid {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.availability-grid-head,
.availability-day-row {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
}

.availability-grid-head {
  font-size: 11px;
  font-weight: 800;
  color: var(--faint);
  text-transform: uppercase;
  padding: 0 2px;
}

.availability-day-row {
  padding: 6px 2px;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 640px) {
  .availability-grid-head { display: none; }
  .availability-day-row {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
}

.patient-split > div {
  padding: 16px;
  background: linear-gradient(180deg, #fbfefd, #f3f8f5);
}

.patient-split h3 { margin: 0 0 10px; }
.patient-split p { margin: 0 0 10px; line-height: 1.48; color: #53625e; }

.login-page,
.setup-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.setup-page { align-items: start; padding-top: 48px; }

.login-wrap,
.login-card,
.setup-card {
  width: min(100%, 460px);
}

.login-card,
.setup-card {
  padding: 32px;
  border: 1px solid rgba(220,231,227,.85);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.login-card h1 { margin-top: 20px; }
.login-card button { width: 100%; margin-top: 4px; }
#tenantSelectList, #forgotTenantList { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.tenant-option { text-align: left; background: rgba(255,255,255,.6); border: 1px solid rgba(220,231,227,.85); border-radius: var(--radius-md, 10px); padding: 10px 14px; cursor: pointer; }
.tenant-option:hover { background: rgba(220,231,227,.4); }
#loginNotice { min-height: 22px; margin: 12px 0 0; color: var(--red); font-weight: 800; }

.step-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 18px 0;
  list-style: none;
}

.step-list li {
  min-height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  padding: 6px;
}

.step-list li.active {
  color: #0e4f42;
  background: #e7f8ef;
  border-color: rgba(15,143,123,.28);
}

.step-list li.complete {
  color: var(--teal-dark);
  border-color: rgba(15,143,123,.18);
}

.step-list li.complete::before {
  content: "✓";
  margin-right: 4px;
}

#setupNotice,
#otpRequestNotice,
#otpVerifyNotice,
#passwordLoginNotice {
  min-height: 22px;
}

.form-grid { display: grid; gap: 12px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.primary-link { width: 100%; }

.check-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  background: rgba(255,255,255,.74);
}
.check-row input { width: 16px; min-height: 16px; }

.user main {
  max-width: 1180px;
  margin: 0 auto;
}

.hero { padding: 42px 0; }
.hero p { max-width: 760px; font-size: 19px; line-height: 1.55; }

body.lead-crm { --teal: #155e75; --bg: #f4f7fb; }
body.aesthetic-crm { --teal: #0f8f7b; --bg: #f5f8f6; }

@media (max-width: 1180px) {
  body.business #shell { grid-template-columns: 236px minmax(0, 1fr); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-kanban { grid-template-columns: repeat(4, 230px); }
}

@media (max-width: 920px) {
  body.business #shell,
  .split,
  .lead-layout,
  .aesthetic-crm .lead-layout,
  .settings-grid,
  .patient-split {
    grid-template-columns: 1fr;
  }

  aside {
    position: static;
    height: auto;
    min-height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px;
  }

  aside strong,
  .medical-sidebar small {
    grid-column: 1 / -1;
  }

  .medical-topbar,
  header {
    position: static;
    display: grid;
  }

  main,
  .medical-main { padding: 18px; }
  .billing-workspace,
  .form-grid.four { grid-template-columns: 1fr; }
  .invoice-list div,
  .invoice-party,
  .invoice-totals { grid-template-columns: 1fr; flex-direction: column; }
  .kanban { grid-template-columns: repeat(5, 230px); }
  .filter-bar,
  .inline-form { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cards,
  .form-grid.two,
  aside {
    grid-template-columns: 1fr;
  }

  .panel,
  article { border-radius: 16px; padding: 16px; }
  .medical-topbar { border-radius: 18px; }
  .table-lite div { grid-template-columns: 1fr; }
  h1 { font-size: 29px; }
  .step-list { grid-template-columns: 1fr; }
}

/* DrDial Aesthetic Simplified Premium UX */
body.aesthetic-crm {
  --bg: #f3f3f0;
  --surface: #ffffff;
  --ink: #000000;
  --muted: #646a66;
  --faint: #919792;
  --line: #d2d2d2;
  --lime: #b9ff66;
  --aqua: #66ffed;
  --red: #f04949;
  font-family: Urbanist, Inter, Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 82% 4%, rgba(102,255,237,.22), transparent 22%),
    linear-gradient(180deg, #fbfbfa 0%, #f3f3f0 100%);
}

body.aesthetic-crm #shell {
  grid-template-columns: 250px minmax(0, 1fr);
  transition: grid-template-columns var(--ease);
}

body.aesthetic-crm:has(.medical-sidebar.collapsed) #shell { grid-template-columns: 88px minmax(0, 1fr); }

.medical-sidebar {
  background: rgba(255,255,255,.88);
  border-right: 1px solid rgba(210,210,210,.72);
  box-shadow: 20px 0 52px rgba(0,0,0,.035);
}

.brand-lockup {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 2px 4px 14px;
}

.sidebar-toggle {
  position: absolute;
  right: 0;
  top: 0;
}

.sidebar-nav {
  display: grid;
  gap: 8px;
}

.nav-group-label {
  margin: 14px 4px 4px;
  padding-top: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8a8f89;
  border-top: 1px solid var(--line, #dce7e3);
}

.nav-group-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.sidebar-nav button {
  transition: background 0.12s ease;
}

.medical-sidebar button {
  min-height: 43px;
  border-radius: 999px;
  color: #383d39;
}

.medical-sidebar button span {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #f2f3ef;
  color: #000;
  font-weight: 950;
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
}

.medical-sidebar button.active .nav-icon {
  background: var(--teal);
}

.medical-sidebar button.active span {
  color: #fff;
}

.medical-sidebar button em {
  color: inherit;
  font-style: normal;
  white-space: nowrap;
}

.medical-sidebar button:hover {
  background: #f5f6f2;
  transform: translateX(3px);
}

.medical-sidebar button.active {
  background: #000;
  color: #fff;
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
}

.medical-sidebar button.active span {
  background: var(--lime);
  color: #000;
}

.medical-sidebar.collapsed {
  padding-inline: 14px;
}

.medical-sidebar.collapsed strong,
.medical-sidebar.collapsed small,
.medical-sidebar.collapsed button em,
.medical-sidebar.collapsed .nav-group-label {
  display: none;
}

.medical-sidebar.collapsed .brand-lockup {
  min-height: 50px;
}

.medical-sidebar.collapsed button {
  justify-content: center;
  padding: 0;
}

.logout-nav {
  margin-top: auto;
}

.medical-topbar {
  border-radius: 30px;
  border-color: rgba(210,210,210,.72);
  background: rgba(255,255,255,.9);
}

.topbar-title h1 {
  color: #000;
  font-size: clamp(28px, 3vw, 40px);
}

.topbar-title p:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.role-chip,
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 9px;
  background: #000;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.link-btn {
  display: inline;
  border: none;
  background: none;
  padding: 0;
  color: #2f5bd0;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.type-pill {
  display: inline-block;
  margin-top: 4px;
  border-radius: 6px;
  padding: 2px 7px;
  background: #eef1f6;
  color: #445;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.topbar-actions input {
  width: min(320px, 26vw);
  border-radius: 999px;
  background: #f6f7f3;
}

.icon-only {
  width: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: 999px;
}

.ghost-pill {
  background: #f4f5f0;
  border-color: transparent;
}

.avatar-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: linear-gradient(135deg, #000, #30342f);
  color: var(--lime);
  font-weight: 950;
}

.profile-menu {
  position: relative;
}

.profile-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 230px;
  display: none;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow);
  z-index: 20;
}

.profile-menu.open .profile-pop {
  display: grid;
}

.topbar-brand {
  font-weight: 950;
  margin-right: 6px;
}

.topbar-clinic {
  color: #6b6f64;
  font-weight: 700;
}

.notification-menu {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e0332b;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 320px;
  max-height: 360px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
  z-index: 20;
}

.notification-pop-head {
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.notification-row {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 10px;
}

.notification-row.unread {
  background: #f6faee;
}

.notification-row strong {
  font-size: 12px;
}

.notification-row span {
  font-size: 12px;
  color: #40453d;
}

.notification-row small {
  color: #8a8f83;
  font-size: 10px;
}

.notification-empty {
  padding: 12px 8px;
  color: #8a8f83;
  font-size: 12px;
}

.content-loading {
  padding: 40px;
  text-align: center;
  color: #8a8f83;
  font-weight: 700;
}

.medical-content.content-refreshing {
  opacity: .5;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.conflict-notice p {
  margin: 0 0 12px;
}

.workspace-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 28px;
  border-radius: 30px;
  background:
    linear-gradient(135deg, #000 0%, #1c211d 62%),
    radial-gradient(circle at 88% 18%, rgba(185,255,102,.55), transparent 25%);
  box-shadow: 0 26px 72px rgba(0,0,0,.13);
}

.workspace-hero h2,
.workspace-hero span,
.workspace-hero .breadcrumb {
  color: #fff;
}

.workspace-hero h2 {
  font-size: clamp(30px, 4vw, 52px);
  margin: 0 0 8px;
}

.workspace-hero .active,
button.active {
  background: var(--lime);
  color: #000;
  box-shadow: 0 14px 30px rgba(185,255,102,.28);
}

.dashboard-workspace,
.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 18px;
}

.dashboard-workspace .schedule-panel {
  grid-column: 1 / 2;
}

.ai-summary {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  background: linear-gradient(180deg, #ffffff, #f7fff0);
}

.task-list,
.lead-list,
.followup-board,
.patient-cards,
.quick-create-grid {
  display: grid;
  gap: 12px;
}

.quick-create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-create-grid button {
  height: auto;
  min-height: 106px;
  display: grid;
  justify-items: start;
  text-align: left;
  border-radius: 24px;
  padding: 18px;
}

.task-card,
.lead-row,
.patient-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.035);
}

.task-card {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.queue-subhead {
  margin: 4px 2px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.task-card strong {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: 17px;
}

.lead-row {
  display: grid;
  grid-template-columns: 1.15fr .9fr .75fr 1fr 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.lead-name {
  height: auto;
  display: grid;
  justify-content: start;
  text-align: left;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.lead-name strong,
.lead-row div strong,
.patient-card strong {
  margin: 0;
  font-size: 16px;
}

.lead-row p,
.lead-row small,
.task-card p,
.patient-card p {
  margin: 0;
}

.lead-row.overdue {
  border-color: rgba(240,73,73,.45);
  background: #fff6f6;
}

.filter-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.lead-status-strip,
.profile-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.lead-status-strip button,
.profile-tabs button {
  min-height: 34px;
  background: #f4f5f0;
  border-color: transparent;
  font-size: 12px;
}

.profile-tabs button.active {
  background: #000;
  color: #fff;
}

.booking-steps {
  display: grid;
  gap: 12px;
}

.booking-steps section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fbfcf8;
}

.booking-steps section > strong {
  color: #000;
  font-size: 15px;
}

.compact-form {
  display: grid;
}

.compact-form .panel-head {
  margin-bottom: 10px;
}

.patient-cards {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.patient-card {
  display: grid;
  gap: 8px;
  cursor: pointer;
}

.followup-board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

.followup-board section {
  display: grid;
  gap: 10px;
}

.followup-board h3 {
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.timeline.clean div {
  border-radius: 18px;
  background: #f7f8f4;
}

.crm-table {
  display: grid;
  gap: 8px;
  overflow-x: auto;
}

.crm-head,
.crm-row {
  display: grid;
  grid-template-columns: var(--crm-cols, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 980px;
}

.lead-crm-table {
  --crm-cols: 34px 1.1fr .8fr .8fr .8fr .9fr 1.15fr .85fr 1.2fr auto;
}

.patient-table {
  --crm-cols: 1.1fr .8fr .8fr 1.4fr auto;
}

.staff-table {
  --crm-cols: 1.2fr .8fr .7fr .75fr .9fr 1fr auto;
}

.doctor-table {
  --crm-cols: 1.2fr 1fr .7fr 1.2fr auto;
}

.appointment-table {
  --crm-cols: 1.1fr .9fr .9fr .8fr .7fr auto;
}

.appointment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
}

.appointment-actions > button { white-space: nowrap; }

.appointment-actions details { position: relative; }

.appointment-actions summary {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  list-style: none;
}

.appointment-actions summary::-webkit-details-marker { display: none; }

.appointment-action-menu {
  position: absolute;
  z-index: 20;
  right: 0;
  top: calc(100% + 6px);
  width: 190px;
  padding: 7px;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(20, 40, 34, .16);
}

.appointment-action-menu button { width: 100%; text-align: left; }

@media (max-width: 760px) {
  .appointment-table .crm-head { display: none; }
  .appointment-table .crm-row { grid-template-columns: 1fr auto; gap: 9px 14px; }
  .appointment-table .crm-row > :nth-child(2),
  .appointment-table .crm-row > :nth-child(3),
  .appointment-table .crm-row > :nth-child(4) { grid-column: 1; }
  .appointment-table .crm-row > :nth-child(5) { grid-column: 2; grid-row: 1; }
  .appointment-table .crm-row > :nth-child(6) { grid-column: 1 / -1; justify-content: flex-start; }
  .appointment-action-menu { left: 0; right: auto; }
}

.crm-head {
  padding: 0 14px 6px;
  color: #6d736e;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-row {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.025);
}

.crm-row input,
.crm-row select {
  min-height: 36px;
  border-radius: 12px;
}

.toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 6px 0 14px;
}

.toggle-row label {
  width: auto;
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.toggle-row input {
  width: auto;
  min-height: auto;
}

label small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.crm-row .compact-input,
.crm-row .compact-select {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 10px;
}

.lead-status-badge {
  border: 1px solid #dce7e3;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}

.lead-status-badge.interested,
.lead-status-badge.converted,
.status-pill.converted { background: #e8fff4; color: #08784e; border-color: #bcebd4; }
.lead-status-badge.in_process,
.lead-status-badge.waiting,
.lead-status-badge.callback_later { background: #fff6df; color: #9a5b00; border-color: #f4d28a; }
.lead-status-badge.pending,
.lead-status-badge.new_lead { background: #edf6ff; color: #155f9e; border-color: #c9e3fb; }
.lead-status-badge.dead_lead,
.lead-status-badge.lost,
.lead-status-badge.deleted,
.status-pill.lost { background: #fff0ef; color: #b42d22; border-color: #fac7c1; }
.lead-status-badge.archived { background: #f3f4f1; color: #646b66; border-color: #d9ded9; }

.status-pill.status-active { background: #e8fff4; color: #08784e; border-color: #bcebd4; }
.status-pill.status-idle { background: #fff6df; color: #9a5b00; border-color: #f4d28a; }
.status-pill.status-offline { background: #f3f4f1; color: #646b66; border-color: #d9ded9; }
.status-pill.status-pending { background: #edf6ff; color: #155f9e; border-color: #c9e3fb; }
.status-pill.status-muted { background: #f3f4f1; color: #646b66; border-color: #d9ded9; }

/* Appointment status pills on the Appointments list/calendar filter row -
   previously every status rendered as the same plain black pill. */
.status-pill.status-booked { background: #edf6ff; color: #155f9e; border-color: #c9e3fb; }
.status-pill.status-confirmed { background: #eafbf3; color: #0f8f7b; border-color: #bfe9dc; }
.status-pill.status-checked_in { background: #fff6df; color: #9a5b00; border-color: #f4d28a; }
.status-pill.status-in_consultation { background: #f2edff; color: #5b3ec9; border-color: #d9ceff; }
.status-pill.status-completed { background: #e8fff4; color: #08784e; border-color: #bcebd4; }
.status-pill.status-no_show { background: #f3f4f1; color: #646b66; border-color: #d9ded9; }
.status-pill.status-cancelled { background: #fff0ef; color: #b42d22; border-color: #fac7c1; }

.appointment-day-summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 0 4px; padding:14px 16px; border-radius:16px; background:linear-gradient(135deg,#e9f8f5,#f5fbf8); border:1px solid #cae9df; }
.appointment-day-summary strong { margin-right:auto; color:#124f47; }
.appointment-day-summary span { padding:7px 10px; border-radius:999px; background:#fff; color:#365e58; font-size:12px; font-weight:700; }
.procedure-workspace { display:grid; gap:18px; }
.procedure-hero { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px 28px; border-radius:24px; color:#fff; background:radial-gradient(circle at 85% 20%,rgba(132,224,197,.3),transparent 32%),linear-gradient(135deg,#113c38,#146f65); box-shadow:0 18px 44px rgba(20,79,71,.18); }
.procedure-hero h2 { margin:5px 0 7px; font-size:30px; }
.procedure-hero p { margin:0; max-width:680px; color:#d8f2eb; }
.procedure-hero .eyebrow { color:#9debd6; font-size:11px; font-weight:800; letter-spacing:.12em; }
.procedure-hero .mini-actions button { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:#fff; }
.procedure-hero .mini-actions button.active { background:#fff; color:#145a52; }
.procedure-kpis article { border-top:3px solid #2da18e; }
.procedure-list { display:grid; gap:10px; }
.procedure-row { display:grid; grid-template-columns:1.5fr 1fr .8fr .8fr auto; align-items:center; gap:18px; padding:16px; border:1px solid #e0ebe7; border-radius:16px; background:#fff; }
.procedure-row > div { min-width:0; display:grid; gap:4px; }
.procedure-row strong { color:#183e39; }
.procedure-row small,.procedure-row span:not(.status-pill):not(.procedure-kicker) { color:#6d7d79; font-size:12px; }
.procedure-row .procedure-kicker { color:#16806f; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.procedure-patient-banner { display:flex; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:14px; background:#edf8f5; color:#164f48; }
@media (max-width: 980px) { .procedure-hero { align-items:flex-start; flex-direction:column; } .procedure-row { grid-template-columns:1fr 1fr; } }
@media (max-width: 620px) { .procedure-row { grid-template-columns:1fr; } }

.procedure-attention{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;border:1px solid #f5c56b;border-radius:14px;background:#fff8e8;color:#714b08}.procedure-room{display:grid;gap:14px;min-width:0}.procedure-sticky{position:sticky;top:0;z-index:8;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:14px 18px;border:1px solid #dce9e5;border-radius:16px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(18,63,55,.08)}.procedure-sticky div{display:grid;gap:3px}.procedure-sticky span,.procedure-sticky small{color:#62736f}.procedure-safety{display:flex;flex-wrap:wrap;gap:10px 20px;padding:12px 16px;border-radius:13px;background:#173f39;color:#fff}.procedure-safety span{font-size:12px;color:#d7ebe6}.procedure-room-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px}.procedure-room-grid>main,.procedure-room-grid>aside{border:1px solid #dfeae7;border-radius:16px;background:#fff}.procedure-room-grid>aside{padding:18px;align-self:start;position:sticky;top:92px}.procedure-room-grid dl{display:grid;grid-template-columns:80px 1fr;gap:10px;font-size:12px}.procedure-room-grid dt{color:#71817d}.procedure-room-grid dd{margin:0;overflow-wrap:anywhere}.procedure-tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid #e4ece9;overflow-x:auto}.procedure-tabs button{white-space:nowrap;border:0;background:transparent}.procedure-tabs button.active{background:#def4ed;color:#086b5c}.procedure-section{display:none;padding:22px;min-height:340px}.procedure-section.active{display:grid;align-content:start;gap:16px}.procedure-section textarea{min-height:120px}.procedure-section .check{display:flex;align-items:center;gap:9px}.procedure-section .check input{width:auto}.safety-evidence{display:flex;flex-wrap:wrap;gap:10px}.safety-evidence span{padding:9px 12px;border-radius:10px;background:#f2f7f5;font-size:12px}.procedure-actions{position:sticky;bottom:10px;z-index:8;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:12px;border:1px solid #dce9e5;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 8px 28px rgba(18,63,55,.12)}.procedure-autosave{margin-top:14px;padding:10px;border-radius:10px;background:#eef7f4;color:#187263;font-size:12px}.procedure-empty{max-width:680px}.status-paused{background:#fff1cc!important;color:#7a5100!important}.status-aborted,.status-void{background:#fde5e5!important;color:#9d2b2b!important}
@media(max-width:900px){.procedure-room-grid{grid-template-columns:1fr}.procedure-room-grid>aside{position:static}.procedure-sticky{grid-template-columns:auto 1fr}.procedure-sticky>div:last-child{grid-column:2}.procedure-actions{overflow-x:auto;justify-content:flex-start}}
@media(max-width:560px){.procedure-sticky{padding:11px}.procedure-safety{display:grid}.procedure-section{padding:16px;min-height:0}.procedure-actions button{white-space:nowrap}.procedure-room .form-grid.four{grid-template-columns:1fr 1fr}}
.consent-centre{display:grid;gap:18px}.consent-filters{display:grid;grid-template-columns:minmax(220px,1fr) 220px 180px;gap:10px}.clinical-media-disabled{max-width:820px;border:1px solid #e5c768!important;background:#fffaf0!important}.clinical-media-disabled strong{color:#76550a}@media(max-width:720px){.consent-filters{grid-template-columns:1fr}.consent-centre .cards.compact{grid-template-columns:1fr 1fr}}
.plans-entitlements{display:grid;gap:18px}.catalogue-tabs{display:flex;gap:6px;overflow-x:auto}.catalogue-tabs button{white-space:nowrap}.catalogue-tabs button.active{background:#143f38;color:#fff}.plan-list,.entitlement-list{display:grid;gap:9px}.plan-list article,.entitlement-list article{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:13px;border:1px solid #dfe9e6;border-radius:12px}.plan-list article div,.entitlement-list article div{display:grid;gap:3px}.plan-list span,.entitlement-list span{color:#71807c;font-size:12px}.sell-plan-form{display:grid;grid-template-columns:2fr 2fr 1fr 1fr auto;align-items:end;gap:10px}@media(max-width:980px){.sell-plan-form{grid-template-columns:1fr 1fr}.entitlement-list article{grid-template-columns:1fr 1fr}}@media(max-width:600px){.plan-catalogue-grid{display:grid}.sell-plan-form,.entitlement-list article,.plan-list article{grid-template-columns:1fr}}
.inventory-workspace{display:grid;gap:18px}.inventory-tabs{display:flex;gap:6px;overflow-x:auto}.inventory-tabs button{white-space:nowrap}.inventory-tabs button.active{background:#153f39;color:#fff}.inventory-alert-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.inventory-alert-grid article{padding:13px;border:1px solid #f1cf8c;border-radius:12px;background:#fff9ed;display:grid;gap:5px}.inventory-table{display:grid;overflow-x:auto}.inventory-head,.inventory-table>div{display:grid;grid-template-columns:minmax(220px,2fr) 1fr 1fr 1fr 1fr;gap:14px;align-items:center;min-width:760px;padding:12px;border-bottom:1px solid #e3ebe8}.inventory-head{font-weight:700;background:#f4f8f7}.inventory-table strong{display:grid}.inventory-table small{color:#75827f}@media(max-width:800px){.inventory-alert-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.inventory-alert-grid{grid-template-columns:1fr}}
.rx-builder { margin:8px 0; padding:16px; border:1px solid #d8e8e3; border-radius:16px; background:#f7fbfa; }
.rx-builder .panel-head { margin-bottom:10px; }
.rx-item { display:grid; grid-template-columns:1.4fr 1fr .7fr .7fr .7fr 1fr auto; gap:8px; margin:8px 0; align-items:center; }
.rx-item input,.rx-item select { min-width:0; width:100%; }
.medicine-master-form { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:10px; margin:14px 0 18px; }
.medicine-master-form button { grid-column:span 1; }
.medicine-grid { display:grid; grid-template-columns:repeat(3,minmax(220px,1fr)); gap:10px; }
.medicine-grid article { display:grid; gap:5px; padding:14px; border:1px solid #e0ebe7; border-radius:14px; background:#fff; }
.medicine-grid article span,.medicine-grid article small { color:#687a75; }
.medicine-grid article em { color:#157764; font-size:12px; font-style:normal; font-weight:800; }
.medicine-grid article em.out { color:#b34037; }
@media (max-width:1100px){.rx-item{grid-template-columns:1fr 1fr 1fr}.medicine-master-form{grid-template-columns:1fr 1fr}.medicine-grid{grid-template-columns:1fr 1fr}}
@media (max-width:650px){.rx-item,.medicine-master-form,.medicine-grid{grid-template-columns:1fr}}

.cell-link {
  min-height: 0;
  justify-content: start;
  display: grid;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.cell-link:hover {
  transform: none;
  box-shadow: none;
}

.wa-btn {
  background: #e9fff4;
  border-color: #b9f7d0;
  color: #067a45;
}

.lead-drawer {
  position: fixed;
  right: 18px;
  top: 18px;
  bottom: 18px;
  z-index: 30;
  width: min(520px, calc(100vw - 36px));
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 30px 90px rgba(0,0,0,.18);
  animation: drawerSlideIn .18s ease-out;
}

@keyframes drawerSlideIn {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(20,20,20,.35);
}

.wizard-drawer {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.wizard-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.wizard-steps span {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  border-radius: 999px;
  background: #f3f5ef;
  color: #9a9a9a;
  font-weight: 800;
  font-size: 13px;
}

.wizard-steps span.done {
  background: #e7f4e9;
  color: #1c7a34;
}

.wizard-steps span.current {
  background: #000;
  color: #fff;
}

.wizard-body {
  flex: 1;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  padding-bottom: 12px;
}

.drawer-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 4px;
  margin-top: auto;
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--line);
}

.field-error {
  color: #b42d22;
  font-size: 13px;
  font-weight: 700;
  margin: -6px 0 0;
}

.review-summary {
  display: grid;
  gap: 8px;
}

.review-summary p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: #f8f9f5;
  border-radius: 12px;
  margin: 0;
}

.review-summary p strong {
  color: #6b6b6b;
  font-weight: 700;
}

@media (max-width: 640px) {
  .wizard-drawer {
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 0;
    width: 100vw;
    max-width: 100vw;
  }
}

.drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.settings-clean {
  display: grid;
  gap: 12px;
}

.settings-page {
  display: grid;
  gap: 16px;
}

.settings-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.settings-card-grid button {
  min-height: 116px;
  align-items: start;
  justify-content: start;
  display: grid;
  gap: 8px;
  text-align: left;
  border-radius: 20px;
  background: #fff;
}

.settings-card-grid button strong {
  font-size: 18px;
}

.settings-stack {
  display: grid;
  gap: 16px;
}

.link-soft,
.danger-soft {
  width: fit-content;
}

.danger-soft {
  color: #b42d22;
  border-color: #fac7c1;
  background: #fff7f6;
}

.settings-accordion {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
}

.settings-accordion summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}

.settings-accordion > :not(summary) {
  margin: 0 18px 18px;
}

.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip-row span {
  padding: 8px 12px;
  border-radius: 999px;
  background: #f3f5ef;
  color: #000;
  font-weight: 800;
}

.chip-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f3f5ef;
  border: 1px solid var(--line);
  font-weight: 700;
  cursor: pointer;
}

.chip-check input {
  margin: 0;
}

.presence-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
  background: #9aa39a;
}

.presence-dot.active { background: #28d17c; }
.presence-dot.idle { background: #e0a300; }
.presence-dot.offline { background: #b42318; }
.presence-dot.pending { background: #155f9e; }
.presence-dot.muted { background: #9a9a9a; }

.invite-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.invite-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.invite-card-avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--teal), #12a889);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
}

.invite-card-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 6px;
}

.invite-card-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 3px 9px;
  background: #eef2ee;
  color: #3a463f;
  font-size: 11px;
  font-weight: 800;
}

.invite-card-actions {
  flex: none;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.invite-card-actions button {
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .invite-card-grid { grid-template-columns: 1fr; }
  .invite-card { flex-wrap: wrap; }
}

.compact-inline {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.patient-grid-mode .crm-head {
  display: none;
}

.patient-grid-mode .crm-row {
  min-width: 0;
  grid-template-columns: 1fr;
}

.patient-grid-mode {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

@media (max-width: 1180px) {
  .lead-row {
    grid-template-columns: 1fr 1fr;
  }

  .followup-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mobile-nav-toggle { display: none; }
.mobile-nav-backdrop {
  display: none;
}

@media (max-width: 920px) {
  body.aesthetic-crm #shell,
  body.aesthetic-crm:has(.medical-sidebar.collapsed) #shell,
  .dashboard-workspace,
  .workspace-grid {
    grid-template-columns: 1fr;
  }

  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 18px;
  }

  /* Below 920px the sidebar becomes an off-canvas drawer (hidden by default,
     slides in over the page) instead of static content pushing the page's
     real content down the screen - a receptionist on a phone previously had
     to scroll past the entire nav list before reaching anything useful. */
  .medical-sidebar,
  .medical-sidebar.collapsed {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: min(280px, 82vw);
    height: 100vh;
    min-height: auto;
    grid-template-columns: 1fr;
    transform: translateX(-100%);
    transition: transform .2s ease;
    overflow-y: auto;
  }

  .medical-sidebar.mobile-open,
  .medical-sidebar.collapsed.mobile-open {
    transform: translateX(0);
  }

  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 18, .45);
    z-index: 55;
  }

  .medical-sidebar.collapsed strong,
  .medical-sidebar.collapsed small,
  .medical-sidebar.collapsed button em {
    display: inline;
  }

  .sidebar-nav {
    grid-template-columns: 1fr;
  }

  .topbar-actions,
  .topbar-actions input {
    width: 100%;
  }

  .ai-summary,
  .dashboard-workspace .schedule-panel {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .lead-row,
  .filter-strip,
  .quick-create-grid,
  .followup-board,
  .toggle-row {
    grid-template-columns: 1fr;
  }

  .toggle-row {
    display: grid;
  }

  .workspace-hero,
  .medical-topbar {
    border-radius: 22px;
  }
}

.calendar-toolbar .mini-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.calendar-toolbar .mini-actions input[type="date"] {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--ink);
}
.calendar-view-switch,.calendar-date-nav { display:inline-flex; align-items:center; gap:4px; padding:3px; border:1px solid var(--line); border-radius:11px; background:var(--bg-2); }
.calendar-view-switch button,.calendar-date-nav button { white-space:nowrap; }

.resource-calendar { margin-top: 18px; min-width: 900px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.calendar-toolbar { overflow-x: auto; }
.resource-calendar-head, .resource-calendar-row { display: grid; grid-template-columns: 175px minmax(720px, 1fr); }
.resource-calendar-head { min-height: 52px; background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 800; color: var(--muted); }
.resource-calendar-head > div:first-child, .resource-name { padding: 12px 14px; border-right: 1px solid var(--line); }
.resource-time-axis { display: flex; align-items: end; justify-content: space-between; padding: 0 8px 9px; }
.resource-calendar-row { min-height: 108px; border-bottom: 1px solid var(--line); }
.resource-calendar-row:last-child { border-bottom: 0; }
.resource-name { display: flex; flex-direction: column; justify-content: center; gap: 4px; background: #fbfdfc; }
.resource-name strong { color: var(--ink); }
.resource-name small { color: var(--muted); }
.resource-timeline { position: relative; display: grid; grid-template-columns: repeat(var(--calendar-columns, 9), 1fr); min-height: 108px; cursor: crosshair; }
.resource-timeline > i { border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(31,135,124,.018), transparent); }
.resource-booking { position: absolute; top: 12px; min-width: 150px; height: 64px; padding: 7px 9px; overflow: hidden; text-align: left; border: 1px solid #dac785; border-radius: 10px; background: #ffedaa; color: #423718; box-shadow: 0 5px 14px rgba(52,44,15,.08); }
.resource-booking strong, .resource-booking span, .resource-booking small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-booking strong,.resource-booking span { white-space:normal; overflow:hidden; line-height:1.15; }
.resource-booking span { margin: 3px 0; font-size: 11px; }
.resource-booking small { font-size: 10px; opacity: .8; }
.resource-booking.status-confirmed { background: #ffd1d1; border-color: #efaaaa; }
.resource-booking.status-checked_in { background: #d8e7ff; border-color: #a9c5f4; }
.resource-booking.status-in_consultation, .resource-booking.status-engaged { background: #ffe0c6; border-color: #f0b983; }
.resource-booking.status-completed { background: #d4f2df; border-color: #9fd5b3; }
.resource-booking.status-cancelled, .resource-booking.status-no_show { background: #e6e8e7; border-color: #c8cdca; opacity: .72; }
.resource-booking.status-conflict, .calendar-appt.calendar-conflict { z-index: 8; border: 2px solid #c43d3d; background: #fff0f0; color: #7d2020; box-shadow: 0 0 0 2px rgba(196,61,61,.12), 0 7px 18px rgba(111,28,28,.12); }
.resource-booking.status-conflict::after { content:"Conflict"; display:block; margin-top:3px; color:#b3261e; font-size:9px; font-weight:900; text-transform:uppercase; }
.calendar-outside-hours { display:flex; align-items:center; gap:9px; margin-top:14px; padding:11px 13px; border:1px solid #e7c476; border-radius:12px; background:#fff9e9; color:#6e5317; }
.calendar-outside-hours span { color:#7c6b43; font-size:11px; }
.calendar-closure { width:max-content; margin-top:5px; padding:4px 7px; border-radius:7px; color:#852b2b; background:#ffe4e4; font-size:10px; font-weight:850; }
.calendar-blocked-band, .calendar-break-band { position:absolute; z-index:1; inset-block:0; display:grid; place-items:center; pointer-events:none; color:#70675a; background:repeating-linear-gradient(135deg,rgba(109,99,83,.1),rgba(109,99,83,.1) 8px,rgba(109,99,83,.04) 8px,rgba(109,99,83,.04) 16px); }
.calendar-blocked-band { inset-inline:0; }
.calendar-break-band span { padding:3px 6px; border-radius:6px; background:rgba(255,255,255,.82); font-size:9px; font-weight:900; }
.calendar-now-line { position:absolute; z-index:12; inset-block:0; width:2px; pointer-events:none; background:#e23c3c; }
.calendar-now-line::before { content:""; position:absolute; top:-1px; left:-4px; width:10px; height:10px; border-radius:50%; background:#e23c3c; }
.calendar-now-line span { position:absolute; top:2px; left:6px; padding:2px 4px; border-radius:4px; color:#fff; background:#e23c3c; font-size:8px; font-weight:850; white-space:nowrap; }
.calendar-month-day.has-conflict { border-color:#d86b6b; background:#fff7f7; }
.calendar-conflict-label { color:#b3261e; font-size:9px; font-weight:900; }
.notification-badge[hidden] { display:none !important; }

.followup-create-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:16px 0 20px; padding:16px; border:1px solid var(--line); border-radius:17px; background:var(--bg-2); }
.followup-form-title { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.followup-form-title strong,.followup-form-title span { display:block; }.followup-form-title span { margin-top:3px; color:var(--muted); font-size:11px; }
.followup-subject-search { position:relative; grid-column:span 2; }.followup-note { grid-column:span 2; }
.followup-subject-results { position:absolute; z-index:20; top:100%; left:0; right:0; display:grid; max-height:230px; overflow:auto; margin-top:5px; padding:6px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 16px 38px rgba(20,44,38,.16); }
.followup-subject-results button { display:flex; justify-content:space-between; gap:8px; width:100%; padding:9px; border:0; background:transparent; text-align:left; }.followup-subject-results button:hover { background:var(--mint-2); }.followup-subject-results button span,.followup-subject-results p { color:var(--muted); font-size:10px; }.followup-subject-results .selected-subject { color:var(--teal-dark); }
.followup-list { display:grid; gap:9px; }.followup-kanban { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; align-items:start; }.followup-kanban>section { display:grid; gap:8px; padding:10px; border-radius:15px; background:var(--bg-2); }.followup-kanban h3 { display:flex; justify-content:space-between; margin:2px 2px 5px; }
.followup-task { display:grid; grid-template-columns:minmax(210px,1.1fr) minmax(360px,1.5fr) auto; gap:14px; align-items:center; padding:14px; border:1px solid var(--line); border-left:4px solid #79a69d; border-radius:15px; background:#fff; }.followup-task.priority-high { border-left-color:#e09835; }.followup-task.priority-urgent,.followup-task.clinical-escalation { border-color:#e0a0a0; border-left-color:#c33d3d; background:#fff8f8; }.followup-task strong,.followup-task p { display:block; margin:0; }.followup-task p { margin-top:4px; color:var(--muted); font-size:11px; }.followup-category { display:block; margin-bottom:4px; color:var(--teal); font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.followup-task dl { display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; margin:0; }.followup-task dt { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }.followup-task dd { margin:2px 0 0; font-size:11px; font-weight:700; }.followup-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; }.followup-actions details { position:relative; }.followup-actions summary { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:10px; cursor:pointer; list-style:none; }.followup-actions details>div { position:absolute; z-index:15; right:0; top:38px; display:grid; min-width:130px; padding:6px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 12px 30px rgba(20,44,38,.15); }.followup-sla { color:#a02828; font-size:10px; font-weight:850; }.followup-empty { display:grid; place-items:center; gap:4px; min-height:180px; border:1px dashed var(--line); border-radius:15px; color:var(--muted); }.followup-empty strong { color:var(--ink); }
.followup-kanban .followup-task { grid-template-columns:1fr; }.followup-kanban .followup-actions { justify-content:flex-start; }.followup-kanban .followup-task dl { grid-template-columns:1fr; }
@media(max-width:1000px){.followup-create-form{grid-template-columns:1fr 1fr}.followup-task{grid-template-columns:1fr}.followup-actions{justify-content:flex-start}}
@media(max-width:620px){.followup-create-form{grid-template-columns:1fr}.followup-subject-search,.followup-note{grid-column:auto}.followup-form-title{align-items:flex-start;flex-direction:column}.followup-form-title button{width:100%}.followup-task dl{grid-template-columns:1fr}.followup-actions{flex-wrap:wrap}}

.patient-record-route { min-width:0; }.patient-record-loading { display:grid; place-items:center; gap:5px; min-height:320px; color:var(--muted); }.patient-record-loading strong { color:var(--ink); font-size:18px; }
.patient-directory-tools { display:grid; grid-template-columns:minmax(260px,1fr) 180px 150px auto; align-items:end; gap:10px; margin:15px 0; }.segmented-control { display:flex; padding:3px; border:1px solid var(--line); border-radius:11px; background:var(--bg-2); }.segmented-control button { border:0; background:transparent; }.segmented-control button.active { color:#fff; background:var(--teal); }.patient-pagination { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:15px; }.patient-directory-empty { grid-column:1/-1; display:grid; place-items:center; gap:4px; padding:35px; color:var(--muted); }.patient-directory-empty strong { color:var(--ink); }
.patient-record-back { margin-bottom:12px; padding-left:0; border:0; background:transparent; color:var(--teal); }.patient-record-header { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding:20px; border:1px solid #cfe4df; border-radius:18px; background:linear-gradient(130deg,#f5fbf9,#eaf7f4); }.patient-record-header h2 { margin:4px 0; font-size:clamp(24px,4vw,36px); }.patient-mrn { color:var(--teal); font-size:10px; font-weight:900; letter-spacing:.1em; }
.patient-safety-banner { position:sticky; z-index:18; top:8px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; margin:12px 0; padding:12px 14px; border:1px solid #d66f6f; border-radius:13px; color:#762323; background:#fff0f0; box-shadow:0 8px 20px rgba(112,31,31,.1); }.patient-safety-banner button { border-color:#b94444; color:#842626; background:#fff; }.timeline-quarantine { display:flex; gap:9px; margin-bottom:10px; padding:11px; border:1px solid #e6c06d; border-radius:11px; color:#755819; background:#fff8e8; }.patient-profile .table-lite>div span small { display:block; margin-top:4px; color:var(--muted); }
@media(max-width:900px){.patient-directory-tools{grid-template-columns:1fr 1fr}.patient-record-header{align-items:flex-start;flex-direction:column}.patient-safety-banner{grid-template-columns:1fr}.patient-table{overflow-x:auto}.patient-table>.crm-head,.patient-table>.crm-row{min-width:780px}}
@media(max-width:580px){.patient-directory-tools{grid-template-columns:1fr}.patient-record-header{padding:15px}.patient-safety-banner{position:static}.profile-tabs{max-width:100%;overflow-x:auto}.patient-profile{min-width:0;overflow:hidden}}

.consultation-workspace { min-width:0; }.consultation-topbar { position:sticky; z-index:17; top:0; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 18px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.96); box-shadow:0 8px 24px rgba(20,44,38,.07); backdrop-filter:blur(12px); }.consultation-topbar h2 { margin:2px 0; }.consultation-kicker { color:var(--teal); font-size:9px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.consultation-patient-bar { display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:12px; align-items:start; margin:12px 0; padding:14px; border:1px solid #cfe4df; border-radius:15px; background:#f3faf8; }.consultation-patient-bar span,.consultation-patient-bar strong,.consultation-patient-bar small { display:block; }.consultation-patient-bar span { color:var(--muted); font-size:9px; font-weight:850; text-transform:uppercase; }.consultation-patient-bar strong { margin:4px 0; }.consultation-patient-bar label { position:relative; }.consultation-patient-results { position:absolute; z-index:20; top:100%; left:0; right:0; display:grid; max-height:220px; overflow:auto; padding:5px; border:1px solid var(--line); border-radius:11px; background:#fff; box-shadow:0 14px 34px rgba(20,44,38,.15); }.consultation-patient-results:empty { display:none; }.consultation-patient-results button { display:flex; justify-content:space-between; gap:8px; padding:9px; border:0; background:transparent; text-align:left; }
.consultation-safety-bar { display:flex; gap:10px; margin-bottom:12px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); }.consultation-safety-bar.has-alert { border-color:#d66f6f; color:#7c2727; background:#fff0f0; }.consultation-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; }.consultation-layout>main,.consultation-context { min-width:0; padding:15px; border:1px solid var(--line); border-radius:16px; background:#fff; }.consultation-context { align-self:start; position:sticky; top:90px; }.consultation-section-tabs { display:flex; gap:5px; overflow-x:auto; margin-bottom:14px; padding:3px; border-radius:11px; background:var(--bg-2); }.consultation-section-tabs button { flex:1; white-space:nowrap; border:0; background:transparent; }.consultation-section-tabs button.active { color:#fff; background:var(--teal); }.consultation-section { display:none; gap:12px; }.consultation-section.active { display:grid; }.consultation-document-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.rx-stock-warning { color:#b3261e; font-size:10px; font-weight:850; }
@media(max-width:980px){.consultation-layout{grid-template-columns:1fr}.consultation-context{position:static;grid-row:1}.consultation-patient-bar{grid-template-columns:1fr 1fr}.consultation-patient-bar>div:last-child{grid-column:1/-1}.consultation-topbar{position:static}}
@media(max-width:620px){.consultation-topbar{align-items:flex-start;flex-direction:column}.consultation-topbar .mini-actions{width:100%;overflow-x:auto}.consultation-patient-bar{grid-template-columns:1fr}.consultation-patient-bar>div:last-child{grid-column:auto}.consultation-section-tabs button{flex:0 0 auto}.consultation-document-actions{grid-template-columns:1fr}}
.calendar-legend { min-width: 900px; display: flex; flex-wrap: wrap; gap: 14px; padding: 13px 4px 0; color: var(--muted); font-size: 12px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calendar-legend i { width: 10px; height: 10px; border-radius: 50%; background: #ffedaa; }
.calendar-legend i.confirmed { background: #efaaaa; }.calendar-legend i.checked-in { background: #a9c5f4; }.calendar-legend i.engaged { background: #f0b983; }.calendar-legend i.completed { background: #9fd5b3; }.calendar-legend i.closed { background: #9da5a0; }

.owner-control-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:28px 30px; border-radius:24px; color:#fff; background:linear-gradient(120deg,#123e39,#1c756b 70%,#2a8f82); box-shadow:0 20px 48px rgba(16,67,60,.18); }
.owner-control-hero h2 { margin:5px 0 7px; font-size:clamp(25px,3vw,38px); letter-spacing:-.035em; }
.owner-control-hero p { margin:0; color:rgba(255,255,255,.78); max-width:680px; }
.owner-control-hero .eyebrow { font-size:11px; font-weight:900; letter-spacing:.16em; color:#a9eadf; }
.owner-hero-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.owner-hero-actions button { color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); white-space:nowrap; }
.owner-hero-actions button.active { background:#fff; color:#145a52; }
.owner-metric-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin:16px 0; }
.owner-metric-grid > button { min-width:0; padding:17px; text-align:left; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(19,48,42,.045); }
.owner-metric-grid span,.owner-metric-grid small { display:block; color:var(--muted); }
.owner-metric-grid strong { display:block; margin:7px 0 4px; font-size:25px; color:var(--ink); letter-spacing:-.03em; }
.owner-operations-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.65fr); gap:16px; }
.patient-flow-strip { display:grid; grid-template-columns:repeat(7,auto); align-items:center; justify-content:space-between; gap:8px; padding:16px; border-radius:17px; background:var(--bg-2); }
.patient-flow-strip div { text-align:center; }.patient-flow-strip strong,.patient-flow-strip span { display:block; }.patient-flow-strip strong { font-size:24px; }.patient-flow-strip span { font-size:11px; color:var(--muted); }.patient-flow-strip i { width:42px; height:2px; background:var(--line-strong); }
.owner-live-queue { display:grid; gap:7px; margin-top:13px; }
.owner-live-queue > button { display:grid; grid-template-columns:62px minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; padding:11px 12px; text-align:left; border:1px solid var(--line); border-radius:14px; background:#fff; }
.owner-live-queue time { font-weight:900; color:var(--teal); }.owner-live-queue span strong,.owner-live-queue span small { display:block; }.owner-live-queue span small { margin-top:3px; color:var(--muted); }
.owner-risk-list { display:grid; gap:8px; }.owner-risk-list button { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; padding:12px; text-align:left; border:1px solid #f2d7c7; border-radius:14px; background:#fff9f4; }.owner-risk-list button>strong { display:grid; place-items:center; width:34px; height:34px; color:#a64c24; background:#ffe1d0; border-radius:11px; }.owner-risk-list span,.owner-risk-list small { display:block; }.owner-risk-list small { margin-top:2px; color:var(--muted); }.owner-risk-list em { font-size:11px; color:var(--teal); font-style:normal; }.owner-all-clear { padding:25px; text-align:center; border-radius:16px; background:var(--mint-2); }.owner-all-clear strong,.owner-all-clear span { display:block; }.owner-all-clear span { margin-top:5px; color:var(--muted); }
.owner-bottom-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:16px; }.owner-stat-list { display:grid; gap:2px; }.owner-stat-list>div { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:11px 2px; border-bottom:1px solid var(--line); }.owner-stat-list>div:last-child { border-bottom:0; }.owner-stat-list span { color:var(--muted); }.owner-stat-list strong { font-size:18px; }.owner-shortcuts { display:grid; align-content:start; }.owner-shortcuts>button { display:flex; justify-content:space-between; width:100%; padding:11px 3px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; text-align:left; }.owner-shortcuts>button:last-child { border-bottom:0; }.owner-shortcuts em { color:var(--teal); font-style:normal; }
@media(max-width:1200px){.owner-metric-grid{grid-template-columns:repeat(3,1fr)}.owner-bottom-grid{grid-template-columns:1fr 1fr}.owner-shortcuts{grid-column:1/-1}}
@media(max-width:820px){.owner-control-hero{align-items:flex-start;flex-direction:column;padding:22px}.owner-hero-actions{justify-content:flex-start}.owner-operations-grid,.owner-bottom-grid{grid-template-columns:1fr}.owner-shortcuts{grid-column:auto}.patient-flow-strip{grid-template-columns:repeat(4,1fr)}.patient-flow-strip i{display:none}}
@media(max-width:560px){.owner-metric-grid{grid-template-columns:1fr 1fr}.owner-live-queue>button{grid-template-columns:54px minmax(0,1fr)}.owner-live-queue em{grid-column:2}.owner-hero-actions button{flex:1}.owner-control-hero{border-radius:18px}.owner-metric-grid>button{padding:14px}.owner-metric-grid strong{font-size:21px}}

.reception-command { padding:24px 26px; border:1px solid #cfe4df; border-radius:24px; background:linear-gradient(130deg,#f4fbf9,#e8f7f3); }
.reception-command-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }.reception-command h2 { margin:4px 0 5px; font-size:clamp(25px,3vw,36px); letter-spacing:-.035em; }.reception-command p { margin:0; color:var(--muted); }.reception-command .eyebrow { color:var(--teal); font-size:11px; font-weight:900; letter-spacing:.14em; }
.reception-head-actions { display:flex; flex-wrap:wrap; gap:8px; }.reception-head-actions button { white-space:nowrap; }.reception-flow-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:20px; }.reception-flow-cards button { display:flex; align-items:center; gap:9px; padding:12px 14px; border:1px solid #d6e5e1; border-radius:15px; background:rgba(255,255,255,.82); text-align:left; }.reception-flow-cards strong { font-size:23px; }.reception-flow-cards span { color:var(--muted); }.reception-flow-cards .attention { border-color:#edb896; background:#fff4ec; }.reception-flow-cards .attention strong { color:#b75424; }
.reception-work-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.55fr); gap:16px; margin-top:16px; }.exception-count { display:grid; place-items:center; min-width:36px; height:36px; padding:0 9px; border-radius:12px; color:#a94820; background:#ffe1d1; }.exception-list { display:grid; gap:8px; }.exception-list>button { display:grid; grid-template-columns:35px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; padding:12px; text-align:left; border:1px solid #f1d4c5; border-radius:14px; background:#fff9f5; }.exception-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:#fff; background:#d76b38; font-weight:900; }.exception-list span strong,.exception-list span small { display:block; }.exception-list span small { margin-top:3px; color:var(--muted); }.exception-list em { color:var(--teal); font-size:11px; font-style:normal; }.reception-quick-panel>button { display:block; width:100%; padding:13px 2px; text-align:left; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }.reception-quick-panel>button:last-child { border-bottom:0; }.reception-quick-panel>button strong,.reception-quick-panel>button span { display:block; }.reception-quick-panel>button span { margin-top:3px; color:var(--muted); font-size:11px; }
.reception-live-queue { margin-top:16px; }.reception-search { display:flex; gap:8px; }.reception-search input { width:min(360px,40vw); }.reception-queue-head,.reception-queue-row { display:grid; grid-template-columns:80px minmax(210px,1.2fr) minmax(150px,.8fr) minmax(140px,.7fr) auto; align-items:center; gap:13px; }.reception-queue-head { padding:8px 13px; color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; }.reception-queue-list { display:grid; gap:8px; }.reception-queue-row { padding:12px 13px; border:1px solid var(--line); border-radius:16px; background:#fff; }.reception-queue-row time strong,.reception-queue-row time small,.queue-patient strong,.queue-patient span,.queue-patient small,.queue-doctor strong,.queue-doctor small,.reception-queue-row>span>small { display:block; }.reception-queue-row time small,.queue-patient span,.queue-patient small,.queue-doctor small,.queue-payment { margin-top:3px; color:var(--muted); font-size:10px; }.queue-patient { padding:0; text-align:left; border:0; background:transparent; }.queue-patient strong { font-size:14px; }.queue-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; }.queue-actions details { position:relative; }.queue-actions summary { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:10px; cursor:pointer; list-style:none; }.queue-actions summary::-webkit-details-marker{display:none}.queue-actions details>div { position:absolute; z-index:20; right:0; top:40px; display:grid; gap:5px; width:150px; padding:7px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 14px 35px rgba(20,44,38,.15); }.queue-actions details button { width:100%; text-align:left; }
@media(max-width:980px){.reception-work-grid{grid-template-columns:1fr}.reception-queue-head{display:none}.reception-queue-row{grid-template-columns:70px minmax(0,1fr) auto}.reception-queue-row .queue-doctor{grid-column:2}.reception-queue-row>span:nth-child(4){grid-column:2}.queue-actions{grid-column:3;grid-row:1/4}.reception-flow-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.reception-command{padding:19px}.reception-command-head{align-items:flex-start;flex-direction:column}.reception-head-actions{width:100%}.reception-head-actions button{flex:1}.reception-flow-cards{grid-template-columns:1fr 1fr}.reception-search{width:100%;flex-direction:column}.reception-search input{width:100%}.reception-live-queue .panel-head{align-items:flex-start;flex-direction:column}.reception-queue-row{grid-template-columns:58px minmax(0,1fr)}.queue-actions{grid-column:1/-1;grid-row:auto;justify-content:flex-start}.exception-list>button{grid-template-columns:34px minmax(0,1fr)}.exception-list em{grid-column:2}}
.reception-work-grid { align-items:start; }
.appointment-exceptions,.reception-quick-panel { min-height:0; }
.reception-quick-panel>button,.reception-quick-panel>button strong,.reception-quick-panel>button span { overflow:visible; white-space:normal; }
.queue-doctor strong { font-size:13px; line-height:1.25; }
.calendar-appt strong,.calendar-appt span { display:block; }

.booking-requirement-summary { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:10px 0; padding:11px; border:1px solid #cfe4df; border-radius:14px; background:#f2faf8; }.booking-requirement-summary>div { min-width:0; }.booking-requirement-summary span,.booking-requirement-summary strong { display:block; }.booking-requirement-summary span { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }.booking-requirement-summary strong { margin-top:2px; font-size:11px; line-height:1.25; }.reschedule-context { padding:12px 14px; border-radius:14px; background:var(--bg-2); }.reschedule-context strong,.reschedule-context span { display:block; }.reschedule-context span { margin-top:4px; color:var(--muted); }.modal-warning { padding:11px 13px; border:1px solid #efc8b4; border-radius:12px; color:#8d3e1b; background:#fff5ef; }
.ranked-slot-list { display:grid; gap:7px; margin:10px 0; }.ranked-slot-card { display:grid; grid-template-columns:82px minmax(0,1fr); gap:2px 8px; width:100%; padding:10px 11px; text-align:left; border:1px solid var(--line); border-radius:13px; background:#fff; }.ranked-slot-card em { grid-row:1/3; align-self:center; padding:5px 6px; border-radius:8px; font-size:8px; font-style:normal; font-weight:900; text-align:center; letter-spacing:.06em; }.ranked-slot-card strong,.ranked-slot-card span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.ranked-slot-card span { color:var(--muted); font-size:10px; }.ranked-slot-card.rank-best { border-color:#70c8b8; background:#effbf8; box-shadow:0 6px 18px rgba(31,135,124,.09); }.ranked-slot-card.rank-best em { color:#fff; background:#158579; }.ranked-slot-card.rank-good em { color:#765910; background:#fff0b8; }.ranked-slot-card.rank-alternative em { color:#53605b; background:#edf1ef; }.ranked-slot-card:hover { transform:translateY(-1px); border-color:var(--teal); }.ranked-slot-empty { padding:14px; border:1px dashed var(--line-strong); border-radius:12px; color:var(--muted); text-align:center; }.ranked-slot-empty strong,.ranked-slot-empty span { display:block; }.ranked-slot-empty span { margin-top:3px; font-size:10px; }
.modal-panel:has(.smart-booking-form) { width:min(760px,100%); overflow:hidden; padding-bottom:14px; }.smart-booking-form { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:min(600px,calc(100vh - 125px)); min-height:500px; }.booking-stepper { display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:10px; padding:4px 6px 14px; border-bottom:1px solid var(--line); }.booking-stepper>i { height:2px; background:var(--line); }.booking-stepper>button { display:flex; align-items:center; gap:7px; padding:4px; border:0; background:transparent; color:var(--muted); }.booking-stepper>button em { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#edf1ef; font-style:normal; font-weight:900; }.booking-stepper>button span { font-size:11px; font-weight:800; }.booking-stepper>button.active { color:var(--teal-dark); }.booking-stepper>button.active em { color:#fff; background:var(--teal); }.booking-step-pages { min-height:0; padding:16px 6px 10px; }.booking-step-page { display:none; max-width:610px; margin:0 auto; }.booking-step-page.active { display:grid; gap:12px; animation:modalSlideIn .14s ease-out; }.booking-step-title { margin-bottom:2px; }.booking-step-title span,.booking-step-title strong,.booking-step-title small { display:block; }.booking-step-title span { color:var(--teal); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }.booking-step-title strong { margin:3px 0; font-size:20px; }.booking-step-title small { color:var(--muted); }.booking-tip { padding:13px 14px; border:1px dashed #bcd9d2; border-radius:13px; background:#f4faf8; }.booking-tip strong,.booking-tip span { display:block; }.booking-tip span { margin-top:3px; color:var(--muted); font-size:11px; }.booking-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 6px 0; border-top:1px solid var(--line); }.booking-footer>div { display:flex; gap:8px; }.booking-key-hint { color:var(--muted); font-size:10px; }
.patient-typeahead { position:relative; z-index:30; }.patient-typeahead:has(.patient-typeahead-results.open) { margin-bottom:250px; }.patient-typeahead-results { display:none; position:absolute; z-index:60; top:calc(100% + 5px); left:0; right:0; max-height:240px; overflow:auto; padding:6px; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:0 18px 45px rgba(23,42,37,.18); }.patient-typeahead-results.open { display:grid; }.patient-typeahead-results button { display:flex; justify-content:space-between; gap:12px; width:100%; padding:9px 10px; border:0; border-radius:9px; background:transparent; text-align:left; }.patient-typeahead-results button:hover,.patient-typeahead-results button:focus { background:var(--mint-2); }.patient-typeahead-results button span,.patient-typeahead-results p { color:var(--muted); font-size:11px; }.patient-typeahead-results p { margin:8px; }.booking-tip small { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.booking-footer>div { column-gap:12px; }.booking-footer .booking-clear { color:#8b3d32; border-color:#ddb8b2; background:#fff; }.booking-footer #bookingNextButton { color:var(--teal-dark); border-color:var(--teal); background:#fff; }.booking-footer #bookingConfirmButton:disabled { opacity:.45; cursor:not-allowed; }
.followup-actions .ghost-pill { color:var(--teal-dark); border:1px solid var(--teal); background:#fff; font-weight:800; }
.reception-work-grid { grid-auto-rows:max-content; }.reception-quick-panel { align-self:start; height:auto; }
.consultation-layout { grid-template-columns:1fr; }.consultation-context { position:static; font-size:13px; }.consultation-context #consultationContextPanel { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; }.consultation-context #consultationContextPanel p { margin:0; padding:11px; border-radius:10px; background:var(--bg-2); }
.booking-optional { border-top:1px solid var(--line); padding-top:7px; }.booking-optional summary { color:var(--teal); cursor:pointer; font-size:11px; font-weight:800; }.booking-optional label { margin-top:8px; }
.booking-step-page[data-booking-step="3"].active { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:8px 16px; align-items:start; }.booking-step-page[data-booking-step="3"] .booking-step-title { grid-column:1/-1; }.booking-step-page[data-booking-step="3"]>.ranked-slot-list { grid-column:2; grid-row:2/7; margin:0; }.booking-step-page[data-booking-step="3"]>.form-grid,.booking-step-page[data-booking-step="3"]>#apptSlotHint,.booking-step-page[data-booking-step="3"]>.booking-optional { grid-column:1; }.booking-step-page[data-booking-step="3"]>.form-grid { grid-template-columns:1fr 1fr; }.booking-step-page[data-booking-step="3"]>#apptSlotHint { margin:0; font-size:10px; line-height:1.25; }.booking-step-page[data-booking-step="3"] .ranked-slot-card { min-height:66px; }
@media(max-height:720px) and (min-width:681px){.smart-booking-form{height:500px;min-height:0}.booking-step-page{gap:8px}.ranked-slot-card{padding:7px 9px}.ranked-slot-list{gap:4px;margin:6px 0}.booking-requirement-summary{margin:6px 0;padding:8px}}
@media(max-width:680px){.modal-panel:has(.smart-booking-form){overflow:auto}.smart-booking-form{height:auto;min-height:0}.booking-stepper>button span{display:none}.booking-step-pages{padding:13px 0}.booking-step-page[data-booking-step="3"].active{grid-template-columns:1fr}.booking-step-page[data-booking-step="3"] .booking-step-title,.booking-step-page[data-booking-step="3"]>.ranked-slot-list,.booking-step-page[data-booking-step="3"]>.form-grid,.booking-step-page[data-booking-step="3"]>#apptSlotHint,.booking-step-page[data-booking-step="3"]>.booking-optional{grid-column:1;grid-row:auto}.booking-footer{position:sticky;bottom:-1px;background:var(--surface);padding-bottom:3px}.booking-key-hint{display:none}.booking-footer>div{width:100%}.booking-footer button{flex:1}}

.calendar-grid {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-strong);
}

.calendar-head-row,
.calendar-row {
  display: grid;
  grid-template-columns: 90px repeat(var(--doctor-cols, 1), minmax(160px, 1fr));
  border-bottom: 1px solid var(--line);
}

.calendar-head-row {
  background: var(--bg-2);
  position: sticky;
  top: 0;
}

.calendar-time-col {
  padding: 10px 8px;
  font-size: 12px;
  color: var(--muted);
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
}

.calendar-doctor-head {
  padding: 12px 10px;
  border-right: 1px solid var(--line);
  font-weight: 600;
}

.calendar-doctor-head small {
  display: block;
  font-weight: 400;
  color: var(--muted);
}

.calendar-cell {
  min-height: 48px;
  border-right: 1px solid var(--line);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calendar-cell.empty {
  cursor: pointer;
  color: var(--faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.calendar-cell.empty:hover {
  background: var(--bg-2);
}

.calendar-appt {
  text-align: left;
  border: none;
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--mint-2);
  color: var(--teal-dark);
  cursor: pointer;
  font-size: 12.5px;
}

.calendar-appt small {
  display: block;
  color: inherit;
  opacity: 0.8;
}

.calendar-appt.status-checked_in,
.calendar-appt.status-in_consultation {
  background: var(--gold);
  color: #fff;
}

.calendar-appt.status-completed {
  background: var(--mint);
  color: #05341f;
}

.calendar-appt.status-cancelled,
.calendar-appt.status-no_show {
  background: var(--red-soft);
  color: var(--red);
}

@media (max-width: 900px) {
  .calendar-grid {
    overflow-x: auto;
  }

  .calendar-head-row,
  .calendar-row {
    min-width: 640px;
  }
}

.calendar-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(140px, 1fr));
  gap: 10px;
  min-width: 1120px;
}
.calendar-week-scroll { width:100%; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-gutter:stable; padding-bottom:8px; }

.calendar-week-day {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  min-width: 0;
}

.calendar-week-day.current {
  border-color: rgba(15, 143, 123, .4);
  box-shadow: 0 0 0 2px rgba(40, 209, 124, .12);
}

.calendar-week-day-head {
  font-weight: 800;
  cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.calendar-week-day .calendar-appt {
  width: 100%;
  text-align: left;
  display: block;
}

.calendar-day-book {
  width: 100%;
  padding: 7px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
}

.appointment-focus-card { display:grid; gap:18px; }
.appointment-focus-card h3 { margin:9px 0 3px; font-size:24px; }
.appointment-focus-card p { margin:0; color:var(--muted); }
.appointment-focus-card dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
.appointment-focus-card dl div { padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); }
.appointment-focus-card dt { color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }
.appointment-focus-card dd { margin:4px 0 0; font-weight:750; }

@media (max-width: 900px) {
  .calendar-week-grid {
    grid-template-columns: repeat(7, minmax(150px, 1fr));
  }
}
.clinician-required { color:#a52c2c!important; font-weight:800; }.clinician-ready { color:var(--teal-dark)!important; font-weight:800; }

.calendar-month-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  font-weight: 800;
  color: #53625e;
  padding: 0 2px 6px;
}

.calendar-month-body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.calendar-month-day {
  display: grid;
  gap: 6px;
  align-content: start;
  justify-items: start;
  min-height: 74px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-align: left;
}

.calendar-month-day.outside {
  background: #fafbf9;
  color: #9aa39f;
}

.calendar-month-day.current {
  border-color: rgba(15, 143, 123, .4);
  box-shadow: 0 0 0 2px rgba(40, 209, 124, .12);
}

.calendar-month-daynum {
  font-weight: 800;
}

.calendar-month-count {
  font-size: 11px;
  font-weight: 700;
  color: #0f8f7b;
  background: rgba(40, 209, 124, .12);
  border-radius: 999px;
  padding: 2px 8px;
}

@media (max-width: 900px) {
  .calendar-month-head { display: none; }
  .calendar-month-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.product-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 8px 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.product-switcher select {
  width: auto;
  min-height: 30px;
  padding: 4px 28px 4px 8px;
  border: 0;
  background-color: transparent;
  color: var(--ink);
  font-weight: 850;
}

/* 2026 clinical workspace — final responsive design layer.
   This intentionally owns shell, navigation and common control geometry so
   older route-specific styles cannot change the product's visual language. */
body.aesthetic-crm {
  --bg: #f4f7fa;
  --bg-2: #edf2f7;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --ink: #17212b;
  --navy: #162a3a;
  --muted: #667683;
  --faint: #84919b;
  --line: #dce4ea;
  --line-strong: #c7d3dc;
  --teal: #087f75;
  --teal-dark: #06665e;
  --lime: #dff4ef;
  --shadow: 0 16px 40px rgba(26, 49, 65, .10);
  --shadow-soft: 0 5px 18px rgba(26, 49, 65, .06);
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius: 12px;
  --radius-lg: 16px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  font-size: 14px;
  line-height: 1.45;
}

body.aesthetic-crm #shell,
body.aesthetic-crm:has(.medical-sidebar.collapsed) #shell {
  grid-template-columns: 240px minmax(0, 1fr);
}

body.aesthetic-crm button,
body.aesthetic-crm a {
  min-height: 38px;
  border-radius: 9px;
  padding-inline: 13px;
  box-shadow: none;
  font-weight: 650;
}

body.aesthetic-crm button:hover,
body.aesthetic-crm a:hover {
  transform: none;
  box-shadow: none;
  border-color: #9bb9b5;
}

body.aesthetic-crm button.active,
body.aesthetic-crm a.active,
body.aesthetic-crm .primary-link {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  box-shadow: none;
}

body.aesthetic-crm input,
body.aesthetic-crm select,
body.aesthetic-crm textarea {
  min-height: 40px;
  border-radius: 8px;
  border-color: var(--line-strong);
  background: #fff;
}

body.aesthetic-crm input:focus,
body.aesthetic-crm select:focus,
body.aesthetic-crm textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(8, 127, 117, .12);
}

body.aesthetic-crm .medical-sidebar,
body.aesthetic-crm .medical-sidebar.collapsed {
  width: auto;
  padding: 18px 14px;
  gap: 8px;
  background: #fff;
  border-right: 1px solid var(--line);
  box-shadow: none;
}

body.aesthetic-crm .brand-lockup {
  min-height: 62px;
  padding: 5px 8px 14px;
  border-bottom: 1px solid var(--line);
}

body.aesthetic-crm .brand-lockup strong { font-size: 22px; color: var(--navy); }
body.aesthetic-crm .brand-lockup small {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .06em;
}

body.aesthetic-crm .sidebar-toggle { display: none; }
body.aesthetic-crm .sidebar-nav { gap: 3px; padding-top: 3px; }
body.aesthetic-crm .nav-group-label {
  margin: 12px 8px 4px;
  padding: 0;
  border: 0;
  color: #8a98a2;
  font-size: 9px;
  letter-spacing: .11em;
}

body.aesthetic-crm .medical-sidebar button,
body.aesthetic-crm .medical-sidebar.collapsed button {
  min-height: 40px;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 0 9px;
  color: #455763;
  font-size: 13px;
}

body.aesthetic-crm .medical-sidebar button span {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: transparent;
  color: #637682;
}

body.aesthetic-crm .medical-sidebar button.active {
  background: #e8f4f2;
  color: #075f58;
  box-shadow: inset 3px 0 0 var(--teal);
}

body.aesthetic-crm .medical-sidebar button.active .nav-icon,
body.aesthetic-crm .medical-sidebar button.active span {
  background: transparent;
  color: var(--teal-dark);
}

body.aesthetic-crm .medical-sidebar.collapsed strong,
body.aesthetic-crm .medical-sidebar.collapsed small,
body.aesthetic-crm .medical-sidebar.collapsed button em,
body.aesthetic-crm .medical-sidebar.collapsed .nav-group-label { display: initial; }

body.aesthetic-crm .medical-main {
  gap: 16px;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 18px clamp(18px, 2.2vw, 34px) 34px;
}

body.aesthetic-crm .medical-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 74px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}

body.aesthetic-crm .topbar-title h1 {
  margin: 1px 0 3px;
  color: var(--navy);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.12;
}

body.aesthetic-crm .breadcrumb { margin-bottom: 2px; font-size: 10px; }
body.aesthetic-crm .role-chip,
body.aesthetic-crm .status-pill {
  min-height: 22px;
  border-radius: 6px;
  background: #e8f4f2;
  color: #075f58;
  font-size: 10px;
}

body.aesthetic-crm .topbar-actions { flex-wrap: nowrap; }
body.aesthetic-crm .topbar-actions input { width: clamp(190px, 24vw, 330px); border-radius: 8px; }
body.aesthetic-crm .icon-only,
body.aesthetic-crm .avatar-btn { border-radius: 8px; }
body.aesthetic-crm .avatar-btn { background: var(--navy); color: #fff; }

body.aesthetic-crm .medical-content { min-width: 0; gap: 16px; }
body.aesthetic-crm .panel,
body.aesthetic-crm article,
body.aesthetic-crm .aesthetic-crm .cards article {
  border-radius: 12px;
  border-color: var(--line);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

body.aesthetic-crm article:hover { transform: none; box-shadow: var(--shadow-soft); }
body.aesthetic-crm .panel { padding: clamp(15px, 1.6vw, 22px); }
body.aesthetic-crm h1 { font-size: clamp(25px, 3vw, 36px); }
body.aesthetic-crm h2 { font-size: clamp(18px, 2vw, 23px); }
body.aesthetic-crm h3 { font-size: 15px; }

body.aesthetic-crm .workspace-hero,
body.aesthetic-crm .owner-control-hero,
body.aesthetic-crm .reception-command,
body.aesthetic-crm .doctor-command-hero {
  border-radius: 14px;
}

body.aesthetic-crm .crm-head,
body.aesthetic-crm .crm-row,
body.aesthetic-crm .inventory-head,
body.aesthetic-crm .inventory-table > div { font-size: 13px; }

body.aesthetic-crm .modal-panel {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  border-radius: 14px;
}

@media (max-width: 1100px) {
  body.aesthetic-crm .topbar-actions input { width: 180px; }
  body.aesthetic-crm .topbar-actions .ghost-pill { display: none; }
}

@media (max-width: 920px) {
  body.aesthetic-crm #shell,
  body.aesthetic-crm:has(.medical-sidebar.collapsed) #shell { grid-template-columns: minmax(0, 1fr); }
  body.aesthetic-crm .medical-main { padding: 12px 14px 24px; }
  body.aesthetic-crm .medical-sidebar,
  body.aesthetic-crm .medical-sidebar.collapsed {
    width: min(286px, 86vw);
    padding: 16px 12px;
    box-shadow: 20px 0 55px rgba(12, 30, 43, .20);
  }
  body.aesthetic-crm .medical-topbar { top: 8px; }
  body.aesthetic-crm .topbar-actions input { display: none; }
  body.aesthetic-crm .mobile-nav-toggle { display: inline-flex; flex: 0 0 40px; margin: 0; }
}

@media (max-width: 640px) {
  body.aesthetic-crm { font-size: 13px; }
  body.aesthetic-crm .medical-main { padding: 8px 10px 20px; gap: 12px; }
  body.aesthetic-crm .medical-topbar {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 64px;
    padding: 9px;
    border-radius: 10px;
  }
  body.aesthetic-crm .topbar-title h1 { font-size: 19px; }
  body.aesthetic-crm .topbar-title p:last-child,
  body.aesthetic-crm .breadcrumb { display: none; }
  body.aesthetic-crm .topbar-actions { width: auto; gap: 6px; }
  body.aesthetic-crm .topbar-actions > .active { min-width: 40px; padding: 0 9px; font-size: 0; }
  body.aesthetic-crm .topbar-actions > .active::after { content: "+"; font-size: 21px; }
  body.aesthetic-crm .topbar-actions > .icon-only[title="AI assistant"] { display: none; }
  body.aesthetic-crm .profile-menu { display: none; }
  body.aesthetic-crm .panel { padding: 14px; }
  body.aesthetic-crm .panel-head { align-items: flex-start; flex-direction: column; margin-bottom: 12px; }
  body.aesthetic-crm .panel-head .mini-actions { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  body.aesthetic-crm .panel-head .mini-actions button { flex: 0 0 auto; white-space: nowrap; }
  body.aesthetic-crm .cards,
  body.aesthetic-crm .owner-metric-grid { grid-template-columns: 1fr 1fr; }
  body.aesthetic-crm .form-grid.two,
  body.aesthetic-crm .form-grid.three,
  body.aesthetic-crm .form-grid.four { grid-template-columns: 1fr; }
  body.aesthetic-crm .modal-panel { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
}

@media (max-width: 420px) {
  body.aesthetic-crm .cards,
  body.aesthetic-crm .owner-metric-grid { grid-template-columns: 1fr; }
  body.aesthetic-crm .notification-menu { display: none; }
}

.release-diagnostics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--muted);
  font-size: 12px;
}
.release-diagnostics strong { width: 100%; color: var(--ink); }
.release-diagnostics code { color: var(--teal-dark); font-weight: 750; }