/* ============================================================
   Mable — visual system
   ============================================================ */

:root {
  /* Base surface */
  --bg: #f3ede1;          /* cream */
  --bg-soft: #ede5d4;     /* cream darker */
  --paper: #fbf7ee;       /* card */
  --paper-2: #ffffff;     /* elevated white */
  --line: #e3d9c4;        /* hair line */
  --line-soft: #ece4d2;
  --line-strong: #c9bda1;

  /* Ink (text) */
  --ink: #1d1810;
  --ink-2: #423a2b;
  --ink-3: #7a6f5a;
  --ink-4: #a89c83;
  --ink-inv: #fbf7ee;

  /* Brand: clay / terracotta */
  --clay: #b5482a;
  --clay-deep: #8a3318;
  --clay-soft: #ec9f7e;
  --clay-tint: #f4d8c5;
  --clay-wash: #f7e6d8;

  /* Status */
  --sage: #4f6f4a;
  --sage-soft: #b3c7ad;
  --sage-wash: #dde8d7;

  --amber: #a47322;
  --amber-soft: #e0bc6b;
  --amber-wash: #f3e3bd;

  --rose: #a8323c;
  --rose-soft: #d97a82;
  --rose-wash: #f4d4d7;

  --indigo: #3d4e8a;
  --indigo-wash: #d9e0f1;

  /* Sizing */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  --shadow-1: 0 1px 0 rgba(29,24,16,0.04), 0 1px 2px rgba(29,24,16,0.04);
  --shadow-2: 0 4px 12px rgba(29,24,16,0.06), 0 1px 2px rgba(29,24,16,0.04);
  --shadow-pop: 0 14px 40px -8px rgba(29,24,16,0.18), 0 4px 12px rgba(29,24,16,0.08);

  /* Type */
  --font-display: "Instrument Serif", "Newsreader", Georgia, serif;
  --font-sans: "Geist", "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* Layout */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

/* ============ Sidebar ============ */
.sidebar {
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 18px;
}
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--clay);
  display: grid; place-items: center;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.02em;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.12);
}
.brand-name {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.nav-section-label {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  padding: 14px 10px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-2);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 450;
  cursor: pointer;
  position: relative;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
}
.nav-item:hover {
  background: rgba(181,72,42,0.06);
  color: var(--ink);
}
.nav-item.active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-1);
  font-weight: 500;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px;
  background: var(--clay);
  border-radius: 0 3px 3px 0;
}
.nav-item .ico {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  color: var(--ink-3);
  flex-shrink: 0;
}
.nav-item.active .ico { color: var(--clay); }
.nav-item .count {
  margin-left: auto;
  font-size: 11px;
  background: var(--clay-wash);
  color: var(--clay-deep);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.nav-item .count.muted {
  background: transparent;
  color: var(--ink-4);
}

.sidebar-foot {
  margin-top: auto;
  padding: 8px 6px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clay-soft), var(--clay));
  color: var(--bg);
  display: grid; place-items: center;
  font-size: 11.5px;
  font-weight: 600;
  flex-shrink: 0;
}
.sidebar-foot .who {
  display: flex; flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.sidebar-foot .who .name { font-size: 12.5px; color: var(--ink); font-weight: 500; }
.sidebar-foot .who .role { font-size: 11px; color: var(--ink-3); }

/* ============ Main ============ */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 4;
}
.topbar h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.topbar .crumb {
  font-size: 12.5px;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 6px;
}
.topbar .grow { flex: 1; }
.topbar-search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  width: 280px;
  color: var(--ink-3);
  font-size: 12.5px;
}
.topbar-search input {
  border: none; background: transparent; outline: none;
  flex: 1; color: var(--ink); font-size: 12.5px;
}
.topbar-search kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink-3);
}

.content {
  padding: 22px 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ============ Cards & primitives ============ */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}
.card.flat { background: var(--paper-2); }
.card-head {
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.card-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.card-head .sub {
  font-size: 12px;
  color: var(--ink-3);
}
.card-head .grow { flex: 1; }
.card-body { padding: 16px 18px; }
.card-body.tight { padding: 10px 12px; }
.card-body.flush { padding: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  background: var(--paper);
  color: var(--ink-2);
  border-color: var(--line);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.btn:hover { background: var(--paper-2); border-color: var(--line-strong); color: var(--ink); }
.btn.primary {
  background: var(--clay);
  color: var(--bg);
  border-color: var(--clay-deep);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.18);
}
.btn.primary:hover { background: var(--clay-deep); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: rgba(29,24,16,0.05); }
.btn.sm { padding: 4px 9px; font-size: 12px; gap: 5px; }
.btn.icon { padding: 6px; gap: 0; }
.btn.icon svg { width: 14px; height: 14px; }

/* Pills / chips */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 500;
  background: var(--line-soft);
  color: var(--ink-2);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.pill.clay { background: var(--clay-wash); color: var(--clay-deep); }
.pill.sage { background: var(--sage-wash); color: var(--sage); }
.pill.amber { background: var(--amber-wash); color: var(--amber); }
.pill.rose { background: var(--rose-wash); color: var(--rose); }
.pill.indigo { background: var(--indigo-wash); color: var(--indigo); }
.pill.outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-2); }

/* Type helpers */
.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); letter-spacing: -0.01em; font-weight: 400; }
.muted { color: var(--ink-3); }
.dim { color: var(--ink-4); }
.tabular { font-variant-numeric: tabular-nums; }
.num { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }

/* Divider */
.hr { height: 1px; background: var(--line-soft); border: none; margin: 0; }
.vr { width: 1px; align-self: stretch; background: var(--line-soft); }

/* Grids */
.row { display: flex; gap: 12px; }
.row.gap-lg { gap: 22px; }
.row.gap-sm { gap: 6px; }
.row.wrap { flex-wrap: wrap; }
.row.center { align-items: center; }
.col { display: flex; flex-direction: column; gap: 12px; }
.spacer { flex: 1; }

/* ============ Dashboard / Triage hero ============ */
.triage-hero {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  overflow: hidden;
  position: relative;
}
.triage-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 200px at 12% -20%, rgba(181,72,42,0.10), transparent 60%),
    radial-gradient(600px 240px at 95% 110%, rgba(79,111,74,0.08), transparent 60%);
  pointer-events: none;
}
.triage-hero-inner {
  position: relative;
  padding: 22px 26px 18px;
}
.triage-hero-top {
  display: flex; align-items: flex-start; gap: 18px;
}
.triage-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 4px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.triage-eyebrow .pulse {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--clay);
  display: grid; place-items: center;
  position: relative;
}
.triage-eyebrow .pulse::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--clay);
  opacity: 0.25;
  animation: pulseRing 2s ease-out infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(0.7); opacity: 0.5; }
  100% { transform: scale(1.6); opacity: 0; }
}
.triage-eyebrow .pulse svg { width: 10px; height: 10px; color: var(--bg); }
.triage-hero h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--ink);
  max-width: 640px;
  text-wrap: balance;
}
.triage-hero .lede {
  font-size: 14px;
  color: var(--ink-3);
  max-width: 540px;
}
.triage-hero .actions {
  margin-left: auto;
  display: flex; gap: 8px;
  flex-shrink: 0;
}

.triage-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-soft);
  background: var(--paper-2);
  position: relative;
}
.triage-stats .stat {
  padding: 14px 18px 14px;
  border-right: 1px solid var(--line-soft);
}
.triage-stats .stat:last-child { border-right: none; }
.stat .label {
  font-size: 11.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.stat .value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 6px;
}
.stat .value .unit {
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--ink-3);
  letter-spacing: 0;
}
.stat .trend {
  font-size: 11.5px;
  margin-top: 5px;
  display: flex; align-items: center; gap: 4px;
}
.stat .trend.up { color: var(--sage); }
.stat .trend.down { color: var(--rose); }

/* ============ Lost-patient triage list ============ */
.triage-list {
  display: flex;
  flex-direction: column;
}
.triage-row {
  display: grid;
  grid-template-columns: 56px 1.4fr 1fr 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  transition: background 0.1s;
}
.triage-row:first-child { border-top: none; }
.triage-row:hover { background: rgba(181,72,42,0.04); }
.triage-row.expanded { background: var(--bg-soft); }

.urgency {
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 4px;
  border-radius: var(--r-2);
  font-family: var(--font-display);
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.urgency .days {
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.urgency .unit {
  font-size: 9.5px;
  font-family: var(--font-sans);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.urgency.hot { background: var(--rose-wash); border-color: var(--rose-soft); color: var(--rose); }
.urgency.warm { background: var(--amber-wash); border-color: var(--amber-soft); color: var(--amber); }
.urgency.cold { background: var(--clay-wash); border-color: var(--clay-soft); color: var(--clay-deep); }

.patient-cell { display: flex; align-items: center; gap: 12px; }
.patient-cell .pic {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--clay-tint);
  color: var(--clay-deep);
  display: grid; place-items: center;
  font-size: 12.5px;
  font-weight: 500;
  flex-shrink: 0;
}
.patient-cell .info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.patient-cell .name { font-weight: 500; color: var(--ink); font-size: 13.5px; }
.patient-cell .meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

.pending-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pending-cell .label { font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; }
.pending-cell .val { font-size: 13px; color: var(--ink); }
.pending-cell .val.value { font-family: var(--font-display); font-size: 16px; }

.outreach-cell {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
}
.outreach-cell .lasted {
  display: flex; flex-direction: column;
  line-height: 1.2;
}
.outreach-cell .lasted .when { color: var(--ink); font-size: 12.5px; }
.outreach-cell .lasted .by { font-size: 11px; color: var(--ink-3); }

.row-actions {
  display: flex; gap: 4px;
  align-items: center;
}

/* Inline outreach drawer (expanded triage row) */
.outreach-drawer {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: 16px 18px 18px 90px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
}
.drawer-section h3 {
  margin: 0 0 8px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 500;
}

.outreach-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
  background: var(--paper);
  padding: 3px;
  border-radius: var(--r-2);
  width: fit-content;
  border: 1px solid var(--line);
}
.outreach-tabs .tab {
  padding: 4px 11px;
  border-radius: 6px;
  font-size: 12px;
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.outreach-tabs .tab.active {
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

.message-compose {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}
.message-compose .msg-templates {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.template-chip {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 11.5px;
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
}
.template-chip:hover { background: var(--clay-wash); border-color: var(--clay-soft); color: var(--clay-deep); }
.template-chip.active { background: var(--clay); border-color: var(--clay-deep); color: var(--bg); }

.message-compose textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  padding: 12px 14px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
  min-height: 90px;
}
.message-compose-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
}
.message-compose-foot .chars { font-size: 11px; color: var(--ink-3); }
.message-compose-foot .grow { flex: 1; }

/* Quick log entry */
.quick-log {
  display: flex; flex-direction: column;
  gap: 10px;
}
.quick-log .grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.quick-log-btn {
  padding: 8px 6px;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--paper-2);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  line-height: 1.1;
  text-align: center;
}
.quick-log-btn .ico { width: 14px; height: 14px; color: var(--ink-3); }
.quick-log-btn:hover { background: var(--clay-wash); border-color: var(--clay-soft); color: var(--clay-deep); }
.quick-log-btn:hover .ico { color: var(--clay); }
.quick-log-btn.active { background: var(--sage-wash); border-color: var(--sage-soft); color: var(--sage); }
.quick-log-btn.active .ico { color: var(--sage); }

.history-mini {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
}
.history-mini .h-row {
  display: flex; gap: 8px;
  padding: 6px 0;
  border-top: 1px dashed var(--line);
}
.history-mini .h-row:first-child { border-top: none; }
.history-mini .h-when { color: var(--ink-3); white-space: nowrap; min-width: 60px; }
.history-mini .h-ch {
  font-size: 10.5px;
  background: var(--paper);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  color: var(--ink-3);
  height: fit-content;
  border: 1px solid var(--line-soft);
}

/* ============ Today list ============ */
.appt-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  align-items: center;
}
.appt-row:first-child { border-top: none; }
.appt-row:hover { background: rgba(0,0,0,0.02); }
.appt-time {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.appt-time .end { font-size: 11px; font-family: var(--font-sans); color: var(--ink-3); display: block; margin-top: 2px; }
.appt-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.appt-info .name { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.appt-info .meta { font-size: 11.5px; color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; }
.appt-info .meta .dot { width: 7px; height: 7px; border-radius: 50%; }

/* ============ Mable activity panel ============ */
.mable-panel {
  display: flex;
  flex-direction: column;
}
.mable-greet {
  display: flex; gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--clay-wash), var(--paper));
  border-bottom: 1px solid var(--line-soft);
  align-items: flex-start;
}
.mable-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--clay);
  display: grid; place-items: center;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 22px;
  flex-shrink: 0;
  position: relative;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12);
}
.mable-avatar::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  background: var(--sage);
  border: 2px solid var(--paper);
  border-radius: 50%;
  right: -1px; bottom: -1px;
}
.mable-greet .msg {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.35;
  max-width: 100%;
}
.mable-greet .when { font-size: 11px; color: var(--ink-3); margin-top: 3px; }

.activity-row {
  padding: 10px 18px;
  display: flex; gap: 10px;
  border-top: 1px solid var(--line-soft);
  align-items: flex-start;
  font-size: 13px;
}
.activity-row .ico {
  margin-top: 1px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-3);
  flex-shrink: 0;
}
.activity-row .ico svg { width: 13px; height: 13px; }
.activity-row.success .ico { color: var(--sage); background: var(--sage-wash); border-color: var(--sage-soft); }
.activity-row.outreach .ico { color: var(--clay); background: var(--clay-wash); border-color: var(--clay-soft); }
.activity-row.alert .ico { color: var(--rose); background: var(--rose-wash); border-color: var(--rose-soft); }
.activity-row .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.activity-row .body .text { color: var(--ink-2); }
.activity-row .body .text b { color: var(--ink); font-weight: 500; }
.activity-row .body .when { font-size: 11px; color: var(--ink-3); }

/* ============ Agenda ============ */
.agenda-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.agenda-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.agenda-toolbar .nav-arrows { display: flex; gap: 2px; }
.agenda-toolbar h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.dentist-filter { display: flex; gap: 4px; align-items: center; }
.dentist-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: pointer;
}
.dentist-chip .swatch { width: 8px; height: 8px; border-radius: 50%; }
.dentist-chip.off { opacity: 0.5; }

.calendar-grid {
  display: grid;
  grid-template-columns: 56px repeat(6, 1fr);
  background: var(--paper-2);
}
.cal-header-cell {
  padding: 10px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.cal-header-cell:last-child { border-right: none; }
.cal-header-cell .day-num {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: block;
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
.cal-header-cell.today .day-num { color: var(--clay); }
.cal-header-cell.today .day-name { color: var(--clay-deep); }
.cal-header-cell .day-name { display: block; font-weight: 500; }

.cal-time-col {
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
}
.cal-time-label {
  height: 60px;
  padding: 4px 6px 0 0;
  font-size: 10.5px;
  color: var(--ink-4);
  text-align: right;
  font-family: var(--font-mono);
  border-bottom: 1px dashed var(--line-soft);
}
.cal-time-label:last-child { border-bottom: none; }

.cal-day-col {
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  display: flex; flex-direction: column;
}
.cal-day-col:last-child { border-right: none; }
.cal-slot {
  height: 60px;
  border-bottom: 1px dashed var(--line-soft);
  position: relative;
  padding: 2px 3px;
  cursor: pointer;
}
.cal-slot:last-child { border-bottom: none; }
.cal-slot:hover { background: rgba(181,72,42,0.04); }
.cal-slot.now-line::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 30%;
  border-top: 1px solid var(--clay);
  z-index: 2;
}
.cal-slot.now-line::after {
  content: "";
  position: absolute;
  left: -3px; top: calc(30% - 3px);
  width: 6px; height: 6px;
  background: var(--clay);
  border-radius: 50%;
  z-index: 3;
}

.appt-block {
  position: absolute;
  left: 3px; right: 3px;
  padding: 5px 7px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.25;
  overflow: hidden;
  cursor: pointer;
}
.appt-block .nm { font-weight: 500; color: var(--ink); }
.appt-block .info { color: var(--ink-3); font-size: 10.5px; margin-top: 1px; }
.appt-block.confirmed { background: var(--sage-wash); border-color: var(--sage-soft); border-left-color: var(--sage); }
.appt-block.scheduled { background: var(--paper); border-left-color: var(--indigo); }
.appt-block.warning { background: var(--amber-wash); border-color: var(--amber-soft); border-left-color: var(--amber); }
.appt-block.done { background: var(--bg-soft); color: var(--ink-3); border-left-color: var(--ink-4); opacity: 0.85; }

/* ============ Leads kanban ============ */
.kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 12px;
}
.col-board {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  display: flex; flex-direction: column;
  min-height: 360px;
}
.col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.col-head .nm { font-size: 12px; font-weight: 500; color: var(--ink-2); display: flex; align-items: center; gap: 6px;}
.col-head .nm .dot { width: 7px; height: 7px; border-radius: 50%; }
.col-head .ct { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.col-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.lead-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 10px 12px;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
}
.lead-card:hover { box-shadow: var(--shadow-2); }
.lead-card .nm { font-size: 13px; font-weight: 500; color: var(--ink); }
.lead-card .specialty { font-size: 11.5px; color: var(--ink-3); }
.lead-card .foot { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.lead-card .foot .step-pill {
  font-size: 10.5px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  color: var(--ink-3);
}
.lead-card .foot .value {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
}
.lead-card .foot .progress {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  flex: 1;
}
.lead-card .foot .progress .fill {
  height: 100%;
  background: var(--clay);
  border-radius: 2px;
}

/* ============ Mable / Secretaria ============ */
.mable-stage { display: grid; grid-template-columns: 320px 1fr; gap: 16px; }
.sessions-list {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.session-card {
  display: flex; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  background: var(--paper);
}
.session-card:last-child { border-bottom: none; }
.session-card:hover { background: var(--bg-soft); }
.session-card.active { background: var(--bg-soft); }
.session-card .ava {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--clay-tint);
  color: var(--clay-deep);
  font-weight: 500;
  font-size: 11.5px;
  display: grid; place-items: center;
  flex-shrink: 0;
  position: relative;
}
.session-card .ava .badge {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--sage);
  border: 2px solid var(--paper);
  display: grid; place-items: center;
  color: var(--bg);
  font-size: 8px;
}
.session-card .meta { flex: 1; min-width: 0; }
.session-card .nm { font-size: 13px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.session-card .preview { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-card .time { font-size: 10.5px; color: var(--ink-4); margin-top: 3px; }

.chat-stage {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  display: flex; flex-direction: column;
  min-height: 540px;
  overflow: hidden;
}
.chat-head {
  padding: 12px 18px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.chat-head .actions { margin-left: auto; display: flex; gap: 6px; }

.chat-body {
  flex: 1;
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  background:
    radial-gradient(600px 280px at 30% 0%, rgba(181,72,42,0.03), transparent 60%),
    var(--bg-soft);
  overflow-y: auto;
}
.bubble-row { display: flex; gap: 8px; }
.bubble-row.me { justify-content: flex-end; }
.bubble {
  max-width: 60%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  background: var(--paper-2);
  border: 1px solid var(--line);
  position: relative;
}
.bubble .when {
  font-size: 10px; color: var(--ink-4);
  margin-top: 3px;
  display: flex; align-items: center; gap: 4px;
}
.bubble-row.me .bubble {
  background: var(--clay);
  color: var(--paper);
  border-color: var(--clay-deep);
  border-bottom-right-radius: 4px;
}
.bubble-row.me .bubble .when { color: rgba(251,247,238,0.7); justify-content: flex-end; }
.bubble-row.them .bubble { border-bottom-left-radius: 4px; }

.mable-bubble {
  background: var(--paper);
  border: 1px solid var(--line);
  position: relative;
  padding: 10px 14px;
}
.mable-bubble::before {
  content: "Mable";
  position: absolute;
  top: -8px; left: 10px;
  background: var(--paper);
  padding: 0 6px;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--clay);
  border-radius: 4px;
}

.chat-foot {
  border-top: 1px solid var(--line-soft);
  padding: 10px 14px;
  background: var(--paper);
  display: flex; flex-direction: column; gap: 8px;
}
.handoff-note {
  background: var(--amber-wash);
  border: 1px solid var(--amber-soft);
  padding: 8px 12px;
  border-radius: var(--r-2);
  font-size: 12px;
  color: var(--amber);
  display: flex; align-items: center; gap: 8px;
}

/* ============ Misc ============ */
.empty {
  padding: 28px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.empty .display { font-size: 22px; }

/* Switches & radio rows for tweaks density etc. (custom additions) */
.density-compact .triage-row { padding-top: 8px; padding-bottom: 8px; }
.density-compact .triage-row .urgency { padding: 4px 4px; }
.density-compact .triage-row .urgency .days { font-size: 18px; }
.density-compact .appt-row { padding-top: 7px; padding-bottom: 7px; }

/* Print-safe + viewport */
@media (max-width: 1200px) {
  .triage-stats { grid-template-columns: repeat(2, 1fr); }
  .triage-stats .stat:nth-child(2) { border-right: none; }
  .triage-stats .stat:nth-child(1), .triage-stats .stat:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
}