/* Cliniflow UI draft. Load after the approved Orbit kit.
   Source: Cliniflow/DESIGN.md and trello/style-guide/orbit.css.
   Calendar: set --calendar-columns on .calendar-wrap for the visible columns.
   Events receive top/height from the view; 48px represents 30 minutes. */

:root {
  --cf-font: var(--orbit-font, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --cf-text: var(--orbit-text, #172b4d);
  --cf-heading: var(--orbit-heading, #243650);
  --cf-secondary: var(--orbit-text-secondary, #626f86);
  --cf-muted: var(--orbit-text-muted, #6b778c);
  --cf-primary: var(--orbit-primary, #0c66e4);
  --cf-primary-hover: var(--orbit-primary-hover, #0055c7);
  --cf-bg: var(--orbit-bg, #f7f8fa);
  --cf-surface: var(--orbit-surface, #fff);
  --cf-border: var(--orbit-border, #e7eaf0);
  --cf-selected: var(--orbit-selected, #e9f2ff);
  --cf-header-height: 62px;
  --cf-sidebar-width: 232px;
  font-family: var(--cf-font);
  color: var(--cf-text);
  font-size: 14px;
  font-synthesis: none;
  line-height: 1.6;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--cf-bg); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .52; }
a { color: var(--cf-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { max-width: 100%; }
input, select, textarea { min-width: 0; }
svg { display: inline-block; width: 18px; height: 18px; flex: 0 0 auto; vertical-align: middle; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--orbit-focus, #579dff);
  outline-offset: 3px;
}
[hidden] { display: none !important; }
.muted { color: var(--cf-secondary); }
.sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Application shell */
.app-header {
  height: var(--cf-header-height);
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  background: var(--cf-surface);
  border-bottom: 1px solid var(--cf-border);
}
.brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 184px; color: var(--cf-heading); font-size: 25px; font-weight: 650; letter-spacing: -1px; line-height: 1; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; color: var(--cf-primary); width: 30px; height: 30px; }
.brand-mark svg { width: 29px; height: 29px; stroke-width: 2; }
.header-search { display: flex; align-items: center; gap: 9px; width: 310px; max-width: 34vw; height: 36px; padding: 0 11px; color: var(--cf-secondary); border: 1px solid var(--cf-border); border-radius: 6px; background: var(--cf-bg); }
.header-search input { width: 100%; padding: 0; border: 0; background: transparent; outline: 0; color: var(--cf-text); font-size: 13px; }
.header-search:focus-within { border-color: var(--cf-primary); box-shadow: 0 0 0 2px var(--cf-selected); }
.header-search svg { width: 16px; height: 16px; }
.header-search kbd { font-family: inherit; font-size: 12px; color: var(--cf-secondary); padding: 0 4px; border: 1px solid #dfe5ed; border-radius: 3px; background: white; white-space: nowrap; }
.header-right { display: flex; align-items: center; gap: 15px; margin-left: auto; min-width: 0; }
.header-right > small { color: var(--cf-secondary); font-size: 12px; }
.mobile-menu { display: none !important; }
.app-shell { display: grid; grid-template-columns: var(--cf-sidebar-width) minmax(0, 1fr); min-height: calc(100dvh - var(--cf-header-height)); }
.app-sidebar { display: flex; flex-direction: column; position: fixed; top: var(--cf-header-height); left: 0; bottom: 0; z-index: 40; width: var(--cf-sidebar-width); min-height: 0; padding: 0 12px; border-right: 1px solid var(--cf-border); background: var(--cf-surface); overflow-y: auto; }
.clinic-switch { display: flex; align-items: center; gap: 10px; padding: 24px 8px 25px; min-width: 0; }
.clinic-switch > .avatar { width: 36px; height: 36px; border-radius: 9px; color: var(--cf-primary); font-size: 15px; }
.clinic-switch > div { min-width: 0; }
.clinic-switch strong { display: block; overflow: hidden; color: var(--cf-heading); font-size: 13px; font-weight: 600; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
.clinic-switch small { display: block; color: var(--cf-secondary); font-size: 12px; margin-top: 1px; }
.clinic-switch > svg { width: 14px; height: 14px; margin-left: auto; color: var(--cf-secondary); }
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-link { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 9px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--cf-secondary); font-size: 13px; font-weight: 500; line-height: 1.7; text-align: left; text-decoration: none; }
.nav-link svg { width: 17px; height: 17px; color: var(--cf-secondary); }
.nav-link:hover { color: var(--cf-text); background: #f4f6f9; text-decoration: none; }
.nav-link.active, .nav-link[aria-current="page"] { color: var(--cf-primary); background: var(--cf-selected); }
.nav-link.active svg, .nav-link[aria-current="page"] svg { color: var(--cf-primary); }
.nav-link .badge { margin-left: auto; padding: 0 6px; font-size: 13px; }
.nav-section { padding: 25px 12px 9px; color: var(--cf-secondary); font-size: 12px; font-weight: 500; }
.sidebar-footer { margin-top: auto; padding: 22px 8px 18px; color: var(--cf-secondary); font-size: 12px; }
.sidebar-footer > p { margin: 0; line-height: 1.75; }
.sidebar-footer > div { display: flex; align-items: center; gap: 9px; padding-top: 16px; margin-top: 18px; border-top: 1px solid var(--cf-border); }
.sidebar-footer strong { color: var(--cf-heading); font-size: 12px; font-weight: 500; }
.sidebar-footer small { display: block; color: var(--cf-secondary); font-size: 12px; }
.app-main { grid-column: 2; min-width: 0; padding: 27px 28px 36px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.page-heading h1 { margin: 0; color: var(--cf-heading); font-size: 25px; font-weight: 600; line-height: 1.35; letter-spacing: -.8px; }
.page-subtitle { margin: 6px 0 0; color: var(--cf-secondary); font-size: 12px; line-height: 1.75; }
.heading-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.filters { display: flex; align-items: center; gap: 8px; min-width: 0; }
.filters .input, .filters .select { width: auto; min-width: 145px; min-height: 37px; font-size: 13px; }
.filters .input { max-width: 240px; }
.segmented { display: inline-flex; align-items: center; padding: 3px; border: 1px solid #e2e7ee; border-radius: 7px; background: #eff2f6; }
.segmented button { min-height: 29px; padding: 4px 13px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--cf-secondary); font-size: 13px; font-weight: 500; white-space: nowrap; }
.segmented button.active, .segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] { border-color: #e0e6ee; background: white; color: var(--cf-text); box-shadow: 0 1px 2px #172b4d08; }
.surface { min-width: 0; border: 1px solid var(--cf-border); border-radius: 10px; background: var(--cf-surface); }
.surface > h2, .surface > h3 { margin: 0; padding: 19px 22px; font-size: 14px; font-weight: 600; border-bottom: 1px solid #edf0f4; }

/* Controls and readable data */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 13px; border: 1px solid transparent; border-radius: 6px; background: #edf1f6; color: var(--cf-secondary); font-size: 13px; font-weight: 500; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.button:hover { background: #e3e9f1; text-decoration: none; }
.button svg { width: 15px; height: 15px; }
.button.primary { border-color: var(--cf-primary); background: var(--cf-primary); color: white; }
.button.primary:hover { border-color: var(--cf-primary-hover); background: var(--cf-primary-hover); }
.button.secondary { border-color: #dfe5ed; background: white; color: var(--cf-secondary); }
.button.secondary:hover { border-color: #c5d2e2; background: #f8faff; }
.button.ghost { background: transparent; color: var(--cf-secondary); }
.button.ghost:hover { background: #f1f5fa; color: var(--cf-primary); }
.button.danger { border-color: #f0d9dc; color: #a84249; background: #fff4f5; }
.button.danger:hover { background: #fce6e9; }
.button.small { min-height: 33px; padding: 6px 10px; font-size: 13px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--cf-secondary); }
.icon-button:hover { color: var(--cf-secondary); background: #eff3f8; }
.icon-button svg { width: 17px; height: 17px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #e9eef6; color: var(--cf-secondary); font-size: 12px; font-weight: 600; letter-spacing: -.15px; }
.avatar.blue { background: #e4efff; color: var(--cf-secondary); }
.avatar.purple { background: #eee8f8; color: var(--cf-secondary); }
.avatar.green { background: #e3f1eb; color: var(--cf-secondary); }
.badge { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px; border: 1px solid transparent; border-radius: 4px; background: #eef1f5; color: var(--cf-secondary); font-size: 12px; font-weight: 500; line-height: 1.65; white-space: nowrap; }
.badge.blue { background: #e9f2ff; color: var(--cf-secondary); }
.badge.green { background: #e7f4ed; color: var(--cf-secondary); }
.badge.purple { background: #f0eaf9; color: var(--cf-secondary); }
.badge.orange { background: #fff3de; color: var(--cf-secondary); }
.badge.neutral { background: #f1f3f6; color: var(--cf-secondary); }
.badge.red { background: #ffedee; color: var(--cf-secondary); }
.badge svg { width: 11px; height: 11px; }
.stats-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 21px 0 23px; margin: 0 0 25px; border-top: 1px solid var(--cf-border); border-bottom: 1px solid var(--cf-border); }
.stat { min-width: 0; padding: 0 25px; border-left: 1px solid var(--cf-border); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat:last-child { padding-right: 0; }
.stat-label { display: block; color: var(--cf-secondary); font-size: 12px; }
.stat-value { display: block; margin-top: 5px; color: var(--cf-heading); font-size: 29px; font-weight: 600; letter-spacing: -1px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.stat-detail { display: block; margin-top: 4px; color: var(--cf-secondary); font-size: 12px; line-height: 1.6; }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--cf-border); border-radius: 10px; background: white; scrollbar-width: thin; scrollbar-color: #d5deea transparent; }
.surface > .table-wrap { border: 0; border-radius: 0 0 10px 10px; }
table.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.data-table th { padding: 13px 18px; border-bottom: 1px solid #e8edf3; background: #fafbfd; color: var(--cf-secondary); font-size: 12px; font-weight: 500; white-space: nowrap; }
.data-table td { padding: 15px 18px; border-bottom: 1px solid #edf0f5; color: var(--cf-secondary); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #f8fbff; }
.data-table td:first-child, .data-table th:first-child { padding-left: 22px; }
.data-table td:last-child, .data-table th:last-child { padding-right: 22px; }
.data-table td strong { color: var(--cf-heading); font-size: 14px; font-weight: 500; }
.data-table td small { display: block; color: var(--cf-secondary); font-size: 12px; margin-top: 3px; }
.data-table td .avatar { margin-right: 9px; vertical-align: middle; }
.data-table td .button { white-space: nowrap; }
.data-table .row-person { display: flex; align-items: center; gap: 9px; }
.data-table .row-person .avatar { margin: 0; }
.data-table .numeric { white-space: nowrap; font-variant-numeric: tabular-nums; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 245px; padding: 36px 24px; text-align: center; color: var(--cf-secondary); }
.empty-state > svg { width: 30px; height: 30px; margin-bottom: 4px; color: var(--cf-secondary); stroke-width: 1.4; }
.empty-state h2, .empty-state h3, .empty-state strong { margin: 0; color: var(--cf-heading); font-size: 14px; font-weight: 500; }
.empty-state p { max-width: 360px; margin: 0 0 5px; font-size: 12px; line-height: 1.8; }

/* Forms, feedback and native dialogs */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .field > span:first-child { color: var(--cf-secondary); font-size: 12px; font-weight: 500; }
.field small { color: var(--cf-secondary); font-size: 12px; line-height: 1.7; }
.input, .select, .field textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #dfe5ed; border-radius: 6px; background: white; color: var(--cf-secondary); font-size: 13px; line-height: 1.65; }
.input::placeholder, .field textarea::placeholder { color: var(--cf-secondary); }
.input:hover, .select:hover, .field textarea:hover { border-color: #bacade; }
.input:focus, .select:focus, .field textarea:focus { border-color: var(--cf-primary); outline: 2px solid var(--cf-selected); outline-offset: 1px; }
.input:disabled, .select:disabled, .field textarea:disabled { background: #f5f7fa; color: var(--cf-secondary); }
.input[aria-invalid="true"], .select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #c97780; }
.field textarea { min-height: 102px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 16px; }
.form-grid > .full, .form-grid > .form-error, .form-grid > .inline-note { grid-column: 1 / -1; }
.form-error, .dialog-error { margin: 0; padding: 10px 12px; border: 1px solid #efcfd4; border-radius: 6px; background: #fff5f6; color: #a84249; font-size: 12px; line-height: 1.7; }
.form-error:empty, .dialog-error:empty { display: none; }
.inline-note { display: flex; align-items: flex-start; gap: 8px; padding: 11px 13px; border: 1px solid #e1eaf7; border-radius: 6px; background: #f4f8fe; color: var(--cf-secondary); font-size: 12px; line-height: 1.8; }
.inline-note svg { width: 15px; height: 15px; margin-top: 2px; }
.inline-note p { margin: 0; }
.app-dialog { width: 650px; max-width: calc(100vw - 36px); max-height: 92dvh; padding: 0; border: 1px solid #e4e9f0; border-radius: 12px; background: white; color: var(--cf-text); box-shadow: 0 24px 100px #172b4d38; overflow: hidden; }
.app-dialog > form { display: flex; flex-direction: column; max-height: calc(92dvh - 2px); margin: 0; }
.app-dialog::backdrop { background: #14263a50; backdrop-filter: blur(2px); }
.app-dialog.wide { width: 880px; }
.dialog-header { position: sticky; top: 0; z-index: 3; display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 22px 25px 18px; border-bottom: 1px solid var(--cf-border); background: white; }
.dialog-header h2 { margin: 0; color: var(--cf-heading); font-size: 20px; font-weight: 600; letter-spacing: -.5px; line-height: 1.45; }
.dialog-header p { margin: 5px 0 0; color: var(--cf-secondary); font-size: 12px; }
.dialog-header .icon-button { margin: -3px -5px 0 0; }
.dialog-body { flex: 1; min-height: 0; overflow-y: auto; padding: 23px 25px 25px; }
.dialog-body > .form-error, .dialog-body > .dialog-error { margin-top: 17px; }
.dialog-body > .inline-note { margin-bottom: 20px; }
.dialog-body h3 { color: var(--cf-heading); font-size: 13px; font-weight: 600; margin: 23px 0 13px; }
.dialog-footer { position: sticky; bottom: 0; z-index: 3; display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; padding: 16px 25px; border-top: 1px solid var(--cf-border); background: #fafbfd; }
.dialog-footer > small { margin-right: auto; color: var(--cf-secondary); font-size: 12px; }
.toast { position: fixed; right: 25px; bottom: 24px; z-index: 150; max-width: min(390px, calc(100vw - 32px)); padding: 12px 17px; border: 1px solid #3d526f; border-radius: 8px; background: #263e5b; color: #fff; font-size: 12px; line-height: 1.75; box-shadow: 0 8px 24px #172b4d20; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.toast.visible { opacity: 1; transform: none; }
.storage-warning { position: relative; z-index: 41; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-bottom: 1px solid #efdcb6; background: #fff7e6; color: var(--cf-secondary); font-size: 12px; line-height: 1.7; }
.storage-warning svg { width: 16px; height: 16px; }

/* Setup: open typography, a single working form */
.setup-page { min-height: 100dvh; padding: 36px max(28px, calc((100vw - 1160px) / 2)); background: #f7f9fc; }
.setup-brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.setup-brand .brand { flex-basis: auto; }
.setup-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 1.08fr); align-items: center; gap: 85px; padding: 78px 0 55px; }
.setup-copy { padding: 0 0 12px; }
.setup-copy h1 { max-width: 450px; margin: 0; color: var(--cf-heading); font-size: 43px; font-weight: 500; letter-spacing: -1.7px; line-height: 1.2; }
.setup-copy > p { max-width: 390px; margin: 23px 0 0; color: var(--cf-secondary); font-size: 14px; line-height: 1.9; }
.setup-benefits { display: flex; flex-direction: column; gap: 18px; margin-top: 37px; padding: 28px 0 0; border-top: 1px solid #e1e8f1; }
.setup-benefits > div, .setup-benefits > li { display: flex; align-items: flex-start; gap: 12px; color: var(--cf-secondary); font-size: 12px; line-height: 1.8; list-style: none; }
.setup-benefits svg { width: 18px; height: 18px; margin-top: 1px; color: var(--cf-secondary); }
.setup-benefits strong { display: block; color: var(--cf-heading); font-weight: 500; }
.setup-panel { padding: 31px 32px 28px; border: 1px solid #e0e7f0; border-radius: 12px; background: white; }
.setup-panel h2 { margin: 0; color: var(--cf-heading); font-size: 22px; font-weight: 600; letter-spacing: -.55px; }
.setup-panel > p { margin: 7px 0 24px; color: var(--cf-secondary); font-size: 12px; line-height: 1.8; }
.setup-panel form { display: flex; flex-direction: column; gap: 20px; }
.setup-panel .button.primary { min-height: 43px; width: 100%; margin-top: 4px; font-size: 13px; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.module-option { position: relative; display: flex; align-items: flex-start; flex-direction: column; gap: 9px; padding: 14px 11px 13px; border: 1px solid #e2e8f0; border-radius: 7px; background: #fff; cursor: pointer; }
.module-option:hover { border-color: #b3cbea; }
.module-option:has(input:checked), .module-option.selected { border-color: #8ab3ea; background: #f5f9ff; }
.module-option input { position: absolute; top: 11px; right: 10px; width: 13px; height: 13px; accent-color: var(--cf-primary); }
.module-option strong { display: block; color: var(--cf-heading); font-size: 12px; font-weight: 500; line-height: 1.5; }
.module-option small { display: block; color: var(--cf-secondary); font-size: 12px; line-height: 1.7; }
.module-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; background: #eef4fc; color: var(--cf-secondary); }
.module-icon svg { width: 18px; height: 18px; stroke-width: 1.6; }

/* Agenda: continuous time grid with compact, clinically distinct events */
.agenda-layout { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 22px; align-items: start; }
.calendar-wrap { --calendar-columns: 3; min-width: 0; width: 100%; max-height: 710px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--cf-border); border-radius: 10px; background: white; scrollbar-width: thin; scrollbar-color: #d3ddea transparent; }
.calendar-head, .calendar-body { display: grid; grid-template-columns: 56px repeat(var(--calendar-columns), minmax(180px, 1fr)); min-width: 100%; width: calc(56px + var(--calendar-columns) * 180px); }
.calendar-head { position: sticky; top: 0; z-index: 8; min-height: 68px; border-bottom: 1px solid #e4eaf2; background: #fff; }
.calendar-head > div { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 12px 8px; border-right: 1px solid #edf1f6; color: var(--cf-secondary); font-size: 12px; }
.calendar-head > div:first-child { position: sticky; left: 0; z-index: 9; padding: 0; background: #fafbfd; }
.calendar-head > div:last-child { border-right: 0; }
.calendar-head strong { font-size: 12px; font-weight: 500; }
.calendar-head small { color: var(--cf-secondary); font-size: 12px; }
.calendar-head .avatar { width: 25px; height: 25px; font-size: 12px; }
.calendar-body { align-items: start; }
.time-column { position: sticky; left: 0; z-index: 5; height: 960px; background: #fafbfd; border-right: 1px solid #e7edf5; }
.time-column .time-slot { display: flex; justify-content: center; align-items: flex-start; padding-top: 3px; color: var(--cf-secondary); font-size: 12px; }
.time-slot { height: 48px; border-bottom: 1px solid #edf1f6; }
.time-slot:nth-child(even) { border-bottom-color: #e4eaf2; }
.day-column { position: relative; height: 960px; min-width: 180px; border-right: 1px solid #e7edf5; background: white; }
.day-column:last-child { border-right: 0; }
.day-column .time-slot:hover { background: #fafcff; }
.appointment { position: absolute; left: 7px; right: 7px; z-index: 2; min-height: 22px; overflow: hidden; padding: 5px 8px 4px; border: 1px solid #dce8f7; border-left: 3px solid #86aade; border-radius: 7px; background: #edf4ff; color: var(--cf-secondary); text-align: left; }
button.appointment { width: calc(100% - 14px); }
.appointment:hover { border-color: #8db2e4; border-left-color: #5b8dcc; background: #e5effd; }
.appointment.medical { border-color: #d8e5f7; border-left-color: #87aee1; background: #edf4ff; color: var(--cf-secondary); }
.appointment.dental { border-color: #e5def2; border-left-color: #b299d0; background: #f3eefb; color: var(--cf-secondary); }
.appointment.aesthetic { border-color: #d8ebe3; border-left-color: #8bbba6; background: #edf7f2; color: var(--cf-secondary); }
.appointment.cancelled, .appointment.no_show { opacity: .58; border-left-color: #aeb9c8; background: #f4f6f9; color: var(--cf-secondary); }
.event-time { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.event-time svg { width: 11px; height: 11px; }
.event-name { display: block; overflow: hidden; margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.event-procedure { display: block; overflow: hidden; margin-top: 1px; font-size: 12px; line-height: 1.55; text-overflow: ellipsis; white-space: nowrap; opacity: .88; }
.appointment .badge { padding: 0 4px; font-size: 12px; margin-left: auto; background: #ffffffb3; color: inherit; }
.agenda-aside { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.day-summary { padding: 0 1px; }
.day-summary h2, .agenda-aside h3 { margin: 0 0 15px; color: var(--cf-heading); font-size: 13px; font-weight: 500; }
.day-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e8edf4; color: var(--cf-secondary); font-size: 12px; }
.day-summary strong { color: var(--cf-heading); font-weight: 500; font-variant-numeric: tabular-nums; }
.mini-calendar { padding: 17px 15px; border: 1px solid var(--cf-border); border-radius: 9px; background: white; }
.mini-calendar header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: var(--cf-secondary); font-size: 12px; }
.mini-calendar .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.mini-calendar .calendar-grid > * { display: flex; align-items: center; justify-content: center; width: 24px; height: 25px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--cf-secondary); font-size: 12px; }
.mini-calendar .calendar-grid button:hover { background: #f0f5fc; }
.mini-calendar .calendar-grid .active, .mini-calendar .calendar-grid [aria-selected="true"] { background: var(--cf-primary); color: white; }

/* Patient context and clinical editors */
.patient-header { display: flex; align-items: center; gap: 13px; margin: 0 0 24px; }
.patient-header > .avatar { width: 46px; height: 46px; font-size: 16px; }
.patient-header h1, .patient-header h2 { margin: 0; color: var(--cf-heading); font-size: 23px; font-weight: 600; letter-spacing: -.6px; line-height: 1.4; }
.patient-header p { margin: 3px 0 0; color: var(--cf-secondary); font-size: 12px; }
.patient-header .heading-actions { margin-left: auto; }
.patient-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 25px; align-items: start; }
.patient-profile { min-width: 0; padding: 21px 20px; border: 1px solid var(--cf-border); border-radius: 9px; background: white; }
.patient-profile h3 { margin: 0 0 19px; font-size: 13px; font-weight: 500; color: var(--cf-heading); }
.patient-profile dl { margin: 0; }
.patient-profile dt { color: var(--cf-secondary); font-size: 12px; margin-top: 17px; }
.patient-profile dt:first-child { margin-top: 0; }
.patient-profile dd { margin: 4px 0 0; color: var(--cf-secondary); font-size: 12px; overflow-wrap: anywhere; }
.patient-profile .inline-note { margin-top: 22px; font-size: 12px; }
.patient-content { min-width: 0; }
.tabs { display: flex; align-items: stretch; gap: 24px; max-width: 100%; overflow-x: auto; border-bottom: 1px solid #e3e9f1; margin-bottom: 23px; scrollbar-width: thin; }
.tab { flex: 0 0 auto; padding: 5px 0 13px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--cf-secondary); font-size: 13px; font-weight: 500; text-decoration: none; }
.tab.active, .tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--cf-primary); border-bottom-color: var(--cf-primary); }
.tab:hover { color: var(--cf-primary); text-decoration: none; }
.timeline { display: flex; flex-direction: column; padding-left: 18px; }
.timeline-item { position: relative; padding: 0 0 24px 24px; border-left: 1px solid #dfe7f2; }
.timeline-item::before { content: ''; position: absolute; left: -5px; top: 5px; width: 9px; height: 9px; border: 2px solid #f7f9fc; border-radius: 50%; background: #a3bbdb; }
.timeline-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline-item h3 { margin: 0; color: var(--cf-heading); font-size: 13px; font-weight: 500; }
.timeline-item time, .timeline-item small { color: var(--cf-secondary); font-size: 12px; }
.timeline-item p { margin: 7px 0 0; color: var(--cf-secondary); font-size: 12px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline-item .badge { margin-right: 6px; }
.clinical-editor { padding: 23px; border: 1px solid var(--cf-border); border-radius: 9px; background: white; }
.clinical-editor > h2, .clinical-editor > h3 { margin: 0 0 7px; color: var(--cf-heading); font-size: 16px; font-weight: 500; letter-spacing: -.25px; }
.clinical-editor > p { margin: 0 0 21px; color: var(--cf-secondary); font-size: 12px; line-height: 1.8; }
.clinical-editor > .form-grid { margin-top: 20px; }
.clinical-editor .heading-actions { justify-content: flex-end; margin-top: 22px; padding-top: 17px; border-top: 1px solid #edf1f6; }
.clinical-editor .inline-note { margin: 15px 0 20px; }
.tooth-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 20px 0; padding: 18px 14px; border: 1px solid #e9e3f3; border-radius: 8px; background: #fcfbfe; }
.tooth-button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; min-height: 57px; padding: 7px 3px; border: 1px solid #e7e1ef; border-radius: 6px; background: white; color: var(--cf-secondary); font-size: 13px; }
.tooth-button svg { width: 22px; height: 22px; stroke-width: 1.4; }
.tooth-button:hover { border-color: #b59bd0; color: var(--cf-secondary); }
.tooth-button.active, .tooth-button[aria-pressed="true"] { border-color: #b496d0; background: #eee6f8; color: var(--cf-secondary); }
.tooth-button.recorded { border-bottom: 3px solid #bea6d7; }
.session-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.session-grid > button, .session-grid > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 78px; padding: 12px 8px; border: 1px solid #dfeae5; border-radius: 7px; background: #fafdfb; color: var(--cf-secondary); font-size: 12px; }
.session-grid strong { color: var(--cf-heading); font-size: 13px; font-weight: 500; }
.session-grid .done, .session-grid [aria-pressed="true"] { background: #eaf5ee; border-color: #b7d7c4; }
.session-grid svg { width: 18px; height: 18px; }

/* CRM: shared inbox with an explicit simulation state */
.crm-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr) 235px; min-height: 630px; max-height: 740px; overflow: hidden; border: 1px solid var(--cf-border); border-radius: 10px; background: white; }
.conversation-list { min-width: 0; overflow-y: auto; border-right: 1px solid var(--cf-border); }
.conversation-list > header { padding: 18px 16px; border-bottom: 1px solid #edf1f6; }
.conversation-list h2 { margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--cf-heading); }
.conversation-list .input { min-height: 35px; font-size: 13px; }
.conversation-item { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 17px 16px; border: 0; border-bottom: 1px solid #edf1f6; background: white; text-align: left; }
.conversation-item:hover { background: #f8fbff; }
.conversation-item.active, .conversation-item[aria-selected="true"] { background: #eff5fe; box-shadow: inset 3px 0 #8ab1e4; }
.conversation-item > div { min-width: 0; }
.conversation-item strong { display: block; color: var(--cf-heading); font-size: 12px; font-weight: 500; }
.conversation-item p { overflow: hidden; margin: 4px 0 0; color: var(--cf-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item small, .conversation-item time { color: var(--cf-secondary); font-size: 12px; }
.conversation-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fcfdff; }
.conversation-panel > header { display: flex; align-items: center; gap: 10px; min-height: 74px; padding: 15px 20px; border-bottom: 1px solid #e9eef5; background: white; }
.conversation-panel > header strong { display: block; color: var(--cf-heading); font-size: 13px; font-weight: 500; }
.conversation-panel > header small { color: var(--cf-secondary); font-size: 12px; }
.conversation-panel > .inline-note { margin: 14px 18px 0; font-size: 12px; }
.message-list { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 16px; min-height: 180px; overflow-y: auto; padding: 25px 20px; }
.message { max-width: 85%; padding: 12px 14px 9px; border: 1px solid #e5ebf2; border-radius: 9px; color: var(--cf-secondary); background: white; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.message p { margin: 0; white-space: pre-wrap; }
.message time, .message small { display: block; margin-top: 7px; color: var(--cf-secondary); font-size: 12px; text-align: right; }
.message.incoming { border-bottom-left-radius: 3px; }
.message.outgoing { align-self: flex-end; border-color: #dfeaf9; border-bottom-right-radius: 3px; background: #eff5ff; color: var(--cf-secondary); }
.message.outgoing .badge { margin-top: 7px; background: #e3edfc; color: var(--cf-secondary); font-size: 12px; }
.message-composer { display: flex; align-items: flex-end; gap: 9px; padding: 16px 18px; border-top: 1px solid #e8eef5; background: white; }
.message-composer textarea { flex: 1; width: 100%; min-height: 43px; max-height: 120px; resize: vertical; padding: 10px 11px; border: 1px solid #dfe7f1; border-radius: 6px; color: var(--cf-secondary); font-size: 12px; line-height: 1.7; }
.message-composer .button { min-height: 43px; }
.contact-panel { overflow-y: auto; padding: 21px 18px; border-left: 1px solid var(--cf-border); background: white; }
.contact-panel > .avatar { width: 42px; height: 42px; margin-bottom: 10px; font-size: 14px; }
.contact-panel h2 { margin: 0; color: var(--cf-heading); font-size: 14px; font-weight: 500; }
.contact-panel > p { margin: 4px 0 22px; color: var(--cf-secondary); font-size: 12px; }
.contact-panel .field { margin-bottom: 16px; }
.contact-panel .field > label { font-size: 12px; }
.contact-panel .input, .contact-panel .select { min-height: 37px; font-size: 13px; }
.contact-panel .button { width: 100%; }
.contact-panel .inline-note { margin-top: 21px; padding: 10px; font-size: 12px; }

/* Financial surfaces, integration state and overview */
.quote-total { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; padding: 19px 0 0; border-top: 1px solid var(--cf-border); }
.quote-total > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--cf-secondary); font-size: 12px; }
.quote-total strong { color: var(--cf-heading); font-weight: 500; font-variant-numeric: tabular-nums; }
.quote-total > div:last-child { padding-top: 12px; margin-top: 2px; border-top: 1px solid #edf1f6; color: var(--cf-secondary); }
.quote-total > div:last-child strong { color: var(--cf-heading); font-size: 22px; font-weight: 600; letter-spacing: -.6px; }
.integration-panel { display: flex; align-items: flex-start; gap: 15px; padding: 22px; border: 1px solid var(--cf-border); border-radius: 9px; background: white; }
.integration-logo { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 43px; height: 43px; border: 1px solid #e3eaf3; border-radius: 9px; background: #f2f6fc; color: var(--cf-secondary); }
.integration-logo svg { width: 23px; height: 23px; }
.integration-panel h2, .integration-panel h3 { margin: 0 0 6px; color: var(--cf-heading); font-size: 14px; font-weight: 500; }
.integration-panel p { margin: 0; max-width: 560px; color: var(--cf-secondary); font-size: 12px; line-height: 1.85; }
.integration-panel .badge { margin-top: 12px; }
.integration-panel > .button { margin-left: auto; }
.progress-track { overflow: hidden; width: 100%; height: 5px; border-radius: 5px; background: #eaf0f7; }
.progress-bar { height: 100%; border-radius: inherit; background: #9cb9dc; }
.overview-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 28px; align-items: start; }
.overview-layout > * { min-width: 0; }
.overview-layout h2 { margin: 0 0 17px; color: var(--cf-heading); font-size: 14px; font-weight: 500; }
.appointment-row { display: flex; align-items: center; gap: 13px; padding: 16px 0; border-bottom: 1px solid #e7edf4; }
.appointment-row:first-child { padding-top: 0; }
.appointment-row:last-child { border-bottom: 0; }
.appointment-row > time { min-width: 42px; color: var(--cf-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.appointment-row > div { flex: 1; min-width: 0; }
.appointment-row strong { display: block; color: var(--cf-heading); font-size: 12px; font-weight: 500; }
.appointment-row p, .appointment-row small { display: block; margin: 3px 0 0; color: var(--cf-secondary); font-size: 12px; }
.appointment-row .badge { flex: 0 0 auto; }
.activity-list { margin: 0; padding: 0; list-style: none; }
.activity-list > li, .activity-list > div { display: flex; align-items: flex-start; gap: 10px; padding: 14px 0; border-bottom: 1px solid #e8edf4; color: var(--cf-secondary); font-size: 12px; line-height: 1.8; }
.activity-list > :last-child { border-bottom: 0; }
.activity-list svg { margin-top: 2px; width: 15px; height: 15px; color: var(--cf-secondary); }
.activity-list strong { color: var(--cf-heading); font-weight: 500; }
.activity-list small { display: block; color: var(--cf-secondary); font-size: 12px; margin-top: 3px; }

/* Additional shell, setup and configuration composition */
.header-brand { display: flex; align-items: center; flex: 0 0 184px; min-width: 0; }
.header-brand .brand { flex-basis: auto; }
.brand-dot { color: var(--cf-primary); margin-left: -8px; }
.header-divider { width: 1px; height: 23px; margin: 0 1px; background: #e9edf3; }
.header-user { color: var(--cf-heading); font-size: 12px; font-weight: 500; line-height: 1.65; }
.header-user small { display: block; color: var(--cf-heading); font-size: 12px; font-weight: 400; }
.demo-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid #e3eaf5; border-radius: 5px; color: var(--cf-secondary); background: #f6f9fd; font-size: 12px; line-height: 1.6; white-space: nowrap; }
.demo-pill > span, .badge-dot { width: 5px; height: 5px; border-radius: 50%; background: #a0b8d8; }
.clinic-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 35px; height: 35px; border: 1px solid #dce8f9; border-radius: 8px; background: #eaf2ff; color: var(--cf-secondary); font-size: 13px; font-weight: 500; }
.clinic-switch > span:not(.clinic-avatar) { min-width: 0; }
.clinic-switch:hover { text-decoration: none; }
.nav-separator { height: 1px; background: #edf0f5; margin: 14px 10px; }
.nav-count { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 4px; background: #f0f3f8; color: var(--cf-secondary); font-size: 12px; line-height: 1.7; text-align: center; }
.sidebar-status { display: inline-flex; align-items: center; gap: 6px; color: var(--cf-secondary); font-size: 12px; }
.sidebar-status > span { width: 5px; height: 5px; border-radius: 50%; background: #98bdab; }
.sidebar-footer > p { margin: 8px 0 12px; color: var(--cf-secondary); font-size: 12px; line-height: 1.9; }
.sidebar-footer .button { justify-content: flex-start; gap: 7px; width: 100%; padding-left: 0; font-size: 13px; color: var(--cf-secondary); }
.sidebar-version { display: block; color: var(--cf-secondary); font-size: 12px; margin-top: 16px; padding-top: 15px; border-top: 1px solid #edf0f5; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--cf-secondary); font-size: 12px; line-height: 1.7; }
.breadcrumb svg { width: 11px; height: 11px; color: var(--cf-secondary); }
.breadcrumb > span { color: var(--cf-secondary); }
.nav-backdrop { display: none; }
.field-help { margin: 0; color: var(--cf-secondary); font-size: 12px; font-weight: 400; line-height: 1.8; }
.module-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.module-fieldset legend { padding: 0; margin-bottom: 6px; color: var(--cf-secondary); font-size: 12px; font-weight: 500; }
.module-fieldset .field-help { margin-bottom: 13px; }
.setup-page > .setup-brand { display: inline-flex; justify-content: flex-start; width: auto; gap: 8px; }
.setup-copy > .badge { margin-bottom: 22px; background: #edf3fc; color: var(--cf-secondary); font-size: 12px; font-weight: 400; padding: 4px 9px; }
.setup-copy .setup-disclaimer { display: flex; align-items: flex-start; gap: 7px; color: var(--cf-secondary); font-size: 12px; line-height: 1.9; margin-top: 31px; }
.setup-disclaimer svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 3px; }
.setup-benefits small { display: block; color: var(--cf-secondary); font-size: 12px; }
.setup-step { display: block; color: var(--cf-secondary); font-size: 12px; margin-bottom: 9px; }
.setup-submit { justify-content: space-between; }
.setup-submit svg { width: 16px; height: 16px; }
.setup-footnote { display: block; margin-top: -9px; text-align: center; color: var(--cf-secondary); font-size: 12px; line-height: 1.8; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 23px; align-items: start; }
.settings-form > .muted { margin: 0; padding: 17px 22px 0; font-size: 12px; line-height: 1.85; }
.settings-form > form { display: flex; flex-direction: column; gap: 20px; padding: 21px 22px 23px; }
.settings-form > form > .button { align-self: flex-start; }
.settings-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.settings-side > .integration-panel { display: block; padding: 0; }
.settings-side > .integration-panel > h2 { margin: 0; padding: 19px 21px; border-bottom: 1px solid #edf0f5; color: var(--cf-heading); font-size: 13px; }
.integration-item { display: flex; align-items: center; gap: 10px; padding: 19px 20px; border-bottom: 1px solid #edf1f6; }
.integration-item > div:not(.integration-logo) { flex: 1; min-width: 0; }
.integration-item > .badge { flex: 0 0 auto; }
.integration-item .integration-logo { width: 35px; height: 35px; border-radius: 7px; font-size: 27px; font-weight: 600; line-height: 1; }
.integration-logo.asaas { color: var(--cf-secondary); background: #f1f6ff; border-color: #e1eaf7; }
.integration-logo.whatsapp { color: var(--cf-secondary); background: #f2f8f5; border-color: #e1eee7; }
.integration-item strong { display: block; color: var(--cf-heading); font-size: 12px; font-weight: 500; }
.integration-item small { display: block; color: var(--cf-secondary); font-size: 12px; margin-top: 2px; }
.integration-item .badge { margin: 0; padding: 3px 6px; font-size: 12px; }
.settings-side > .integration-panel > .field-help { margin: 0; padding: 15px 20px 18px; font-size: 12px; }
.settings-side > .integration-panel > .muted { padding: 17px 21px 0; font-size: 12px; }
.settings-side > .integration-panel > .button { width: auto; margin: 18px 21px 21px; }
.help-list { display: flex; flex-direction: column; gap: 11px; margin: 20px 0 24px; padding-left: 20px; color: var(--cf-secondary); font-size: 12px; line-height: 1.9; }
.app-main > .storage-warning { margin-bottom: 22px; border: 1px solid #efdcb6; border-radius: 6px; }

/* Semantic text stays darker than its tinted surface. */
.appointment.medical { color: #264e7e; }
.appointment.dental { color: #654780; }
.appointment.aesthetic { color: #35634f; }
.appointment.cancelled, .appointment.no_show { color: var(--cf-secondary); opacity: 1; }
.appointment .event-name { color: inherit; }
.badge.blue { color: #264e7e; }
.badge.green { color: #35634f; }
.badge.purple { color: #654780; }
.badge.orange { color: #805d26; }
.badge.red { color: #a84249; }
.badge.neutral { color: var(--cf-secondary); }
.module-icon.medical { color: #264e7e; background: #edf4ff; }
.module-icon.dental { color: #654780; background: #f3eefb; }
.module-icon.aesthetic { color: #35634f; background: #edf7f2; }
.storage-warning { color: #805d26; }
.message.outgoing { color: #264e7e; }
.message.outgoing .badge { color: #264e7e; }

/* Responsive layout: page stays within the viewport; dense data scrolls locally. */
@media (min-width: 1600px) {
  .app-main { padding: 31px 36px 40px; }
  .agenda-layout { grid-template-columns: minmax(0, 1fr) 255px; gap: 28px; }
  .calendar-wrap { max-height: 780px; }
}
@media (max-width: 1250px) {
  .app-main { padding: 25px 24px 32px; }
  .agenda-layout { grid-template-columns: minmax(0, 1fr) 205px; gap: 18px; }
  .crm-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .contact-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--cf-border); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; max-height: 220px; }
  .contact-panel > .avatar, .contact-panel > .inline-note { display: none; }
  .contact-panel > p { margin: 0; }
  .contact-panel .field { margin-bottom: 0; }
  .crm-layout { max-height: none; }
  .overview-layout { grid-template-columns: minmax(0, 1.4fr) minmax(230px, 1fr); gap: 24px; }
  .stat { padding: 0 18px; }
  .setup-layout { gap: 50px; }
  .setup-copy h1 { font-size: 39px; }
}
@media (max-width: 1000px) {
  :root { --cf-sidebar-width: 210px; }
  .brand { flex-basis: 162px; font-size: 24px; }
  .app-header { padding: 0 20px; gap: 18px; }
  .header-search { max-width: 30vw; }
  .header-right { gap: 10px; }
  .header-right > small { display: none; }
  .app-main { padding: 23px 22px 30px; }
  .clinic-switch { padding-left: 5px; padding-right: 5px; }
  .nav-link { padding-left: 10px; gap: 9px; }
  .page-heading h1 { font-size: 23px; }
  .agenda-layout { grid-template-columns: minmax(0, 1fr); }
  .agenda-aside { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .calendar-wrap { max-height: 650px; }
  .mini-calendar { display: none; }
  .day-summary { max-width: 360px; }
  .patient-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 18px; }
  .patient-profile { padding: 18px 16px; }
  .clinical-editor { padding: 19px; }
  .overview-layout { grid-template-columns: 1fr; gap: 26px; }
  .overview-layout > :last-child { padding-top: 23px; border-top: 1px solid var(--cf-border); }
  .stat-value { font-size: 26px; }
  .stat-detail { font-size: 12px; }
  .setup-layout { grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 35px; padding-top: 65px; }
  .setup-copy h1 { font-size: 35px; letter-spacing: -1.2px; }
  .setup-panel { padding: 26px 24px; }
  .setup-copy > p { font-size: 13px; }
  .header-brand { flex-basis: 162px; }
  .header-user { display: none; }
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .settings-form .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --cf-header-height: 60px; --cf-sidebar-width: 245px; }
  .app-header { gap: 10px; padding: 0 15px; }
  .header-brand { flex: 0 0 auto; gap: 10px; }
  .mobile-menu { display: inline-flex !important; width: 30px; height: 40px; padding: 5px; margin-left: -4px; }
  .brand { flex: 0 0 auto; gap: 6px; font-size: 23px; }
  .brand-mark, .brand-mark svg { width: 26px; height: 26px; }
  .header-search { display: none; }
  .header-right { gap: 9px; margin-left: auto; }
  .header-right .badge { padding: 2px 6px; font-size: 12px; }
  .header-right .icon-button { display: none; }
  .header-divider, .header-user { display: none; }
  .demo-pill { font-size: 12px; gap: 5px; padding: 3px 6px; }
  .header-right .avatar { width: 28px; height: 28px; font-size: 12px; }
  .app-shell { display: block; }
  .app-sidebar { display: none; z-index: 52; padding-top: 4px; }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: var(--cf-header-height) 0 0; z-index: 50; width: 100%; height: calc(100dvh - var(--cf-header-height)); margin: 0; padding: 0; border: 0; background: #14263a50; }
  body.nav-open .app-sidebar { display: flex; box-shadow: 7px 0 30px #172b4d1f; }
  .nav-link { min-height: 44px; font-size: 13px; }
  .app-main { padding: 22px 17px 30px; }
  .page-heading { gap: 12px; margin-bottom: 21px; align-items: flex-start; }
  .page-heading h1 { font-size: 23px; }
  .page-subtitle { font-size: 12px; line-height: 1.8; }
  .breadcrumb { margin-bottom: 19px; font-size: 12px; }
  .heading-actions { gap: 6px; flex-wrap: wrap; }
  .page-heading > .heading-actions { justify-content: flex-end; max-width: 48%; }
  .button, .button.small { min-height: 44px; padding: 9px 11px; font-size: 13px; }
  .icon-button { min-width: 44px; min-height: 44px; padding: 11px; }
  .toolbar { gap: 12px; margin-bottom: 17px; }
  .filters { width: 100%; gap: 7px; flex-wrap: wrap; }
  .filters .input, .filters .select { min-height: 44px; min-width: 0; flex: 1; max-width: none; font-size: 16px; }
  .filters .input { flex-basis: 100%; }
  .segmented { padding: 2px; }
  .segmented button { min-height: 38px; padding: 7px 13px; }
  .input, .select, .field textarea { min-height: 44px; font-size: 16px; }
  .field > label, .field > span:first-child { font-size: 12px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .form-grid > * { grid-column: 1; }
  .stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 18px; padding: 20px 0; margin-bottom: 23px; }
  .stat { padding: 0 0 0 18px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat-label { font-size: 12px; }
  .stat-value { font-size: 26px; margin-top: 4px; }
  .stat-detail { font-size: 12px; line-height: 1.7; }
  .table-wrap { border-radius: 8px; }
  table.data-table { min-width: 650px; }
  .data-table th { padding: 12px 15px; }
  .data-table td { padding: 14px 15px; }
  .data-table td:first-child, .data-table th:first-child { padding-left: 17px; }
  .data-table .button.small { min-height: 38px; }
  .surface { border-radius: 8px; }
  .surface > h2, .surface > h3 { padding: 17px; }
  .app-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: 92dvh; border-radius: 10px; }
  .dialog-header { padding: 18px 18px 16px; gap: 10px; }
  .dialog-header h2 { font-size: 19px; }
  .dialog-header p { font-size: 12px; }
  .dialog-header .icon-button { margin: -5px -6px 0 0; }
  .dialog-body { padding: 20px 18px; }
  .dialog-footer { padding: 13px 18px; gap: 8px; flex-wrap: wrap; }
  .dialog-footer > small { width: 100%; margin-bottom: 3px; }
  .dialog-footer .button { flex: 1; }
  .toast { right: 16px; bottom: 17px; font-size: 12px; }
  .storage-warning { align-items: flex-start; justify-content: flex-start; padding: 11px 17px; font-size: 12px; }
  .storage-warning svg { margin-top: 2px; }
  .setup-page { padding: 26px 20px 32px; }
  .setup-brand { gap: 8px; }
  .setup-brand .badge { font-size: 12px; padding: 3px 6px; }
  .setup-layout { grid-template-columns: minmax(0, 1fr); gap: 31px; padding: 42px 0 0; }
  .setup-copy { padding: 0; }
  .setup-copy h1 { max-width: 330px; font-size: 33px; line-height: 1.23; letter-spacing: -1.1px; }
  .setup-copy > p { margin-top: 16px; font-size: 13px; line-height: 1.85; }
  .setup-copy > .badge { margin-bottom: 18px; }
  .setup-copy .setup-disclaimer { margin-top: 17px; font-size: 12px; }
  .setup-benefits { display: none; }
  .setup-panel { padding: 24px 19px 22px; border-radius: 10px; }
  .setup-panel h2 { font-size: 21px; }
  .setup-panel > p { margin: 6px 0 22px; font-size: 12px; }
  .setup-panel form { gap: 19px; }
  .module-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .module-option { flex-direction: row; align-items: center; gap: 11px; padding: 13px 35px 13px 12px; min-height: 68px; }
  .module-option input { top: 25px; right: 13px; width: 15px; height: 15px; }
  .module-icon { flex: 0 0 auto; width: 32px; height: 32px; }
  .module-option strong { font-size: 12px; }
  .module-option small { font-size: 12px; }
  .settings-side { display: flex; }
  .settings-form > .muted { padding: 16px 18px 0; font-size: 12px; }
  .settings-form > form { padding: 19px 18px 21px; }
  .settings-form .module-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-form > form > .button { align-self: stretch; }
  .agenda-layout { gap: 23px; }
  .calendar-wrap { max-height: 610px; border-radius: 8px; }
  .calendar-head, .calendar-body { grid-template-columns: 48px repeat(var(--calendar-columns), minmax(174px, 1fr)); width: calc(48px + var(--calendar-columns) * 174px); }
  .calendar-head { min-height: 64px; }
  .calendar-head > div { padding: 10px 7px; }
  .calendar-head strong { font-size: 12px; }
  .calendar-head small { font-size: 12px; }
  .day-column { min-width: 174px; }
  .appointment { left: 6px; right: 6px; padding: 5px 8px 4px; }
  button.appointment { width: calc(100% - 12px); }
  .event-name { font-size: 13px; }
  .time-column .time-slot { font-size: 12px; padding-top: 4px; }
  .agenda-aside { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .day-summary { max-width: none; }
  .day-summary > div { font-size: 12px; }
  .patient-header { gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
  .patient-header > .avatar { width: 40px; height: 40px; font-size: 13px; }
  .patient-header h1, .patient-header h2 { font-size: 21px; }
  .patient-header p { font-size: 12px; }
  .patient-header .heading-actions { margin: 6px 0 0; width: 100%; }
  .patient-header .heading-actions .button { flex: 1; }
  .patient-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .patient-profile { padding: 18px; }
  .patient-profile dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 11px; align-items: baseline; }
  .patient-profile dt, .patient-profile dd { margin: 0; }
  .patient-profile .inline-note { margin-top: 17px; }
  .tabs { gap: 22px; margin-bottom: 20px; }
  .tab { min-height: 44px; padding-top: 8px; padding-bottom: 11px; }
  .clinical-editor { padding: 18px 16px; }
  .clinical-editor > h2, .clinical-editor > h3 { font-size: 15px; }
  .clinical-editor .heading-actions { flex-wrap: wrap; }
  .clinical-editor .heading-actions .button { flex: 1; }
  .tooth-grid { gap: 6px; padding: 12px 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tooth-button { min-height: 62px; }
  .session-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .timeline { padding-left: 7px; }
  .timeline-item { padding-left: 20px; }
  .timeline-item p { font-size: 12px; }
  .crm-layout { display: flex; flex-direction: column; max-height: none; min-height: 0; }
  .conversation-list { max-height: 246px; border-right: 0; border-bottom: 1px solid var(--cf-border); }
  .conversation-list > header { padding: 16px; }
  .conversation-list .input { min-height: 44px; font-size: 16px; }
  .conversation-item { padding: 14px 16px; min-height: 68px; }
  .conversation-panel { min-height: 480px; }
  .conversation-panel > header { min-height: 71px; padding: 14px 16px; }
  .conversation-panel > .inline-note { margin: 12px 14px 0; }
  .message-list { max-height: 450px; min-height: 240px; padding: 21px 15px; gap: 14px; }
  .message { max-width: 91%; padding: 10px 12px; font-size: 12px; }
  .message-composer { gap: 7px; padding: 13px; }
  .message-composer textarea { min-height: 45px; padding: 9px 10px; font-size: 16px; }
  .message-composer .button { min-height: 45px; font-size: 13px; padding: 9px 10px; }
  .contact-panel { display: block; max-height: none; padding: 20px 17px; }
  .contact-panel > p { margin: 5px 0 20px; }
  .contact-panel .field { margin-bottom: 16px; }
  .contact-panel .input, .contact-panel .select { min-height: 44px; font-size: 16px; }
  .contact-panel > .inline-note { display: flex; }
  .quote-total { margin-top: 19px; }
  .quote-total > div:last-child strong { font-size: 21px; }
  .integration-panel { flex-wrap: wrap; gap: 12px; padding: 19px 17px; }
  .integration-panel > div:not(.integration-logo) { flex: 1; min-width: 0; }
  .integration-panel h2, .integration-panel h3 { font-size: 13px; }
  .integration-panel p { font-size: 12px; }
  .integration-panel > .button { margin-left: 0; width: 100%; }
  .overview-layout { gap: 22px; }
  .overview-layout h2 { font-size: 13px; }
  .appointment-row { gap: 9px; padding: 14px 0; }
  .appointment-row > time { min-width: 36px; font-size: 12px; }
  .appointment-row .avatar { width: 26px; height: 26px; font-size: 12px; }
  .appointment-row strong { font-size: 12px; }
  .appointment-row small, .appointment-row p { font-size: 12px; }
  .appointment-row .badge { padding: 3px 5px; font-size: 12px; }
  .activity-list > li, .activity-list > div { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Scheduling controls and contextual appointment details. */
.calendar-controls { display:flex; align-items:center; gap:8px; min-width:0; }
.agenda-date { max-width:150px; min-height:38px; font-size:13px; }
.agenda-status-tabs { display:flex; align-items:center; gap:20px; min-height:42px; margin-bottom:16px; }
.agenda-status-tabs > button { padding:6px 0; border:0; border-bottom:2px solid transparent; background:none; color:var(--cf-secondary); font-size:13px; }
.agenda-status-tabs > button.active { color:var(--cf-primary); border-bottom-color:var(--cf-primary); }
.agenda-status-tabs > button span { margin-left:5px; color:var(--cf-secondary); }
.calendar-legend { display:flex; align-items:center; gap:6px; margin-left:auto; color:var(--cf-secondary); font-size:12px; }
.calendar-legend i { width:7px; height:7px; margin-left:8px; border-radius:50%; background:#87aee1; }
.calendar-legend i.dental { background:#b299d0; }.calendar-legend i.aesthetic { background:#8bbba6; }
.calendar-block { position:absolute; left:5px; right:5px; z-index:1; border:1px dashed #cbd5e1; border-radius:5px; background:#f4f6f8; color:var(--cf-secondary); padding:10px; font-size:12px; }
.week-date { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; }.week-date.today { background:var(--cf-primary); color:white; }
.agenda-next h3 { margin:0 0 12px; font-size:14px; font-weight:600; }
.upcoming-event { display:flex; align-items:center; gap:9px; width:100%; padding:13px 0; border:0; border-bottom:1px solid var(--cf-border); background:transparent; text-align:left; }
.upcoming-event time { align-self:flex-start; color:var(--cf-secondary); font-size:12px; }.upcoming-event > span { flex:1; min-width:0; }.upcoming-event strong,.upcoming-event small { display:block; }.upcoming-event strong { font-size:13px; font-weight:500; }.upcoming-event small { margin-top:3px; color:var(--cf-secondary); font-size:12px; }
.detail-grid { display:grid; grid-template-columns:110px 1fr; gap:12px; margin:22px 0; }.detail-grid dt { color:var(--cf-secondary); }.detail-grid dd { margin:0; }
.appointment-detail h3 { margin:0; }.appointment-detail .patient-header { flex-wrap:wrap; }.appointment-detail .patient-header .badge { margin-left:auto; }
.appointment-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }.section-heading h2,.section-heading h3 { margin:0; font-size:16px; font-weight:600; }.section-heading p { margin:5px 0 0; }
.patient-heading-name { display:flex; align-items:center; gap:12px; min-width:0; }.patient-heading-name > div,.patient-heading-name > span:not(.avatar) { min-width:0; }.patient-heading-name .avatar { flex-shrink:0; }.patient-heading-name h1 { margin:0; }
.patient-name-button { display:flex; align-items:center; gap:10px; padding-left:0; text-align:left; }.patient-modules { display:flex; gap:6px; flex-wrap:wrap; }
.search-field { display:flex; align-items:center; gap:9px; width:min(380px,100%); }.search-field svg { color:var(--cf-secondary); }.search-field .input { flex:1; }
.recent-records { margin-top:24px; }.patient-tab-content { padding-top:4px; }.timeline-content { flex:1; min-width:0; }.timeline-title { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }.timeline-title .button { padding-left:0; }.timeline-item > .module-icon { flex-shrink:0; }
.clinical-record-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:24px; }.clinical-record-header h2 { margin:12px 0 7px; }.clinical-record-header p { margin:0; }.record-state { display:flex; gap:6px; flex-wrap:wrap; }
.clinical-actions { display:flex; gap:9px; margin-top:20px; }.clinical-fields { align-items:start; }.addenda-section,.session-section,.odontogram-section { margin-top:28px; padding-top:24px; border-top:1px solid var(--cf-border); }
.session-summary { display:flex; align-items:center; flex-wrap:wrap; gap:14px; color:var(--cf-secondary); font-size:13px; }.session-summary strong { color:#35634f; }.session-button.performed { background:#e9f5ef; border-color:#c9e3d5; opacity:1; color:#35634f; }.session-number { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#eff4f7; margin-bottom:6px; }.session-button.performed .session-number { background:#d9ede1; }
.tooth-scroll { overflow-x:auto; margin:12px 0 20px; }.tooth-scroll .tooth-grid { min-width:720px; grid-template-columns:repeat(16,minmax(35px,1fr)); gap:6px; padding:10px 0; }.tooth-button.selected { border-color:var(--cf-primary); color:var(--cf-primary); background:var(--cf-selected); }.tooth-button.has-record { box-shadow:inset 0 -3px #b299d0; }.tooth-editor { padding:18px; background:var(--cf-bg); border:1px solid var(--cf-border); border-radius:8px; }.tooth-editor h3 { margin:0 0 14px; }.tooth-editor .button { margin-top:16px; }.tooth-records { margin-top:20px; }
.shared-phone-confirmation { display:flex; align-items:flex-start; gap:8px; margin-top:16px; padding:12px; background:#fff7e7; border-radius:6px; }.shared-phone-confirmation input { margin-top:4px; accent-color:var(--cf-primary); }
.row-person { display:flex; align-items:center; gap:10px; min-width:150px; }.numeric { font-variant-numeric:tabular-nums; white-space:nowrap; }.form-grid > .full { grid-column:1/-1; }
[data-quote-item] { margin:20px 0; padding:16px; border:1px solid var(--cf-border); border-radius:8px; background:var(--cf-bg); }[data-quote-item] .toolbar { margin-bottom:12px; }[data-quote-item] h3 { margin:0; font-size:14px; }[data-quote-item] .input { background:white; }
.integration-panel:has(> .integration-logo) { display:flex; align-items:center; gap:16px; margin-top:24px; }.integration-panel:has(> .integration-logo) > div:last-child { flex:1; }.integration-panel:has(> .integration-logo) h2 { margin:0 0 6px; }.integration-panel:has(> .integration-logo) p { margin:0 0 10px; max-width:80ch; }
@media(max-width:760px) { .calendar-controls { flex-wrap:wrap; }.agenda-date { max-width:145px; }.agenda-status-tabs { flex-wrap:wrap; gap:14px; }.calendar-legend { width:100%; margin:0; }.calendar-head,.calendar-body { width:max(100%,calc(56px + var(--calendar-columns)*180px)); }.appointment-actions > .button { flex:1 1 45%; } }
@media(max-width:760px) { .clinical-record-header { flex-wrap:wrap; }.clinical-actions { flex-wrap:wrap; }.clinical-actions .button { flex:1; }.section-heading { flex-wrap:wrap; }.patient-heading-name h1 { font-size:22px; }.session-summary { gap:10px; }.patient-heading-name { align-items:center; }.patient-layout .surface { padding:18px; } }
/* Append after the existing Cliniflow styles when integrating T11. */
.crm-layout { height: 704px; min-height: 650px; max-height: none; grid-template-columns: 255px minmax(0, 1fr) 248px; }
.crm-layout .conversation-list { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.conversation-list > header { flex: 0 0 auto; }
.crm-list-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.crm-list-heading h2 { margin: 0; color: var(--cf-heading, #243650); font-size: 14px; font-weight: 500; }
.crm-contact-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 23px; padding: 0 5px; border-radius: 4px; background: #f0f4fa; color: var(--cf-secondary, #626f86); font-size: 12px; }
.crm-search { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border: 1px solid #dfe7f1; border-radius: 6px; background: #fafbfd; color: var(--cf-secondary, #626f86); }
.crm-search .input { min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--cf-text, #172b4d); font-size: 13px; outline: 0; box-shadow: none; }
.crm-search:focus-within { outline: 2px solid var(--orbit-focus, #579dff); outline-offset: 2px; }
.conversation-entries { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d5deea transparent; }
.conversation-item > div { flex: 1; min-width: 0; }
.crm-conversation-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.crm-conversation-row strong { min-width: 0; color: var(--cf-heading, #243650); font-size: 13px; }
.crm-conversation-row time { flex: 0 0 auto; color: var(--cf-secondary, #626f86); font-size: 12px; }
.conversation-item p { color: var(--cf-secondary, #626f86); font-size: 12px; }
.crm-list-stage { display: inline-block; padding-top: 7px; color: var(--cf-secondary, #626f86); font-size: 12px; }
.conversation-entries .empty-state { min-height: 230px; padding: 28px 18px; }
.conversation-entries .empty-state h3 { font-size: 13px; }
.conversation-entries .empty-state p { font-size: 12px; }
.crm-conversation-identity { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.crm-conversation-identity h2 { margin: 0; color: var(--cf-heading, #243650); font-size: 14px; font-weight: 500; }
.conversation-panel > header .crm-conversation-identity small { color: var(--cf-secondary, #626f86); font-size: 12px; }
.crm-patient-link { flex: 0 0 auto; }
.crm-offline-note { flex: 0 0 auto; color: var(--cf-secondary, #626f86); }
.crm-offline-note strong { color: var(--cf-heading, #243650); font-size: 12px; font-weight: 500; }
.message-list { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d5deea transparent; }
.message { flex: 0 0 auto; }
.message p { color: inherit; }
.crm-message-date { align-self: center; padding: 2px 10px; color: var(--cf-secondary, #626f86); font-size: 12px; }
.crm-message-meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 7px 14px; margin-top: 7px; }
.crm-message-meta .badge, .message.outgoing .crm-message-meta .badge { margin-top: 0; font-size: 12px; }
.crm-message-meta time { margin-top: 0; color: var(--cf-secondary, #626f86); font-size: 12px; }
.crm-message-source { color: var(--cf-secondary, #626f86); font-size: 12px; }
.message-composer { display: block; flex: 0 0 auto; }
.crm-composer-main { display: flex; align-items: flex-end; gap: 9px; }
.crm-composer-main .field { flex: 1; min-width: 0; }
.crm-composer-main textarea { min-height: 69px; max-height: 150px; font-size: 13px; }
.crm-composer-main .button { flex: 0 0 auto; min-height: 43px; }
.message-composer .form-error { margin-top: 11px; }
.crm-composer-note { display: block; margin-top: 7px; color: var(--cf-secondary, #626f86); font-size: 12px; }
.crm-layout .contact-panel { display: block; min-width: 0; max-height: none; }
.crm-contact-heading { padding-bottom: 20px; }
.crm-contact-heading .avatar { width: 40px; height: 40px; margin-bottom: 10px; font-size: 14px; }
.crm-contact-heading h2 { color: var(--cf-heading, #243650); font-size: 14px; }
.crm-contact-heading p { margin: 4px 0 0; color: var(--cf-secondary, #626f86); font-size: 12px; overflow-wrap: anywhere; }
[data-crm-contact-form] { display: flex; flex-direction: column; gap: 15px; }
[data-crm-contact-form] .field { margin-bottom: 0; }
[data-crm-contact-form] .field > span { color: var(--cf-secondary, #626f86); font-size: 12px; }
[data-crm-contact-form] .input, [data-crm-contact-form] .select { font-size: 13px; }
[data-crm-contact-form] textarea { min-height: 83px; }
.crm-next-step { margin: 20px 0 17px; padding-top: 17px; border-top: 1px solid #e7edf5; }
.crm-next-step > span { display: block; color: var(--cf-secondary, #626f86); font-size: 12px; }
.crm-next-step strong { display: block; margin-top: 5px; color: var(--cf-heading, #243650); font-size: 13px; font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; }
.crm-next-step small { display: block; margin-top: 5px; color: var(--cf-secondary, #626f86); font-size: 12px; }
.crm-layout .contact-panel > .inline-note { margin-top: 19px; font-size: 12px; }
.crm-empty-conversation { justify-content: center; }
.period-caption { display:flex; align-items:center; gap:8px; color:var(--cf-secondary); font-size:13px; }
.overview-side { display:flex; flex-direction:column; gap:22px; min-width:0; }.overview-layout > .surface { min-width:0; }
.overview-layout > .surface,.overview-side > .surface,.team-panel { padding:22px; }
.overview-appointments .appointment-row { width:100%; border:0; border-bottom:1px solid var(--cf-border); background:transparent; text-align:left; }.overview-appointments .appointment-row:last-child { border-bottom:0; }.appointment-row-info { flex:1; min-width:0; }.overview-appointments .appointment-row:hover { background:#f8faff; }.overview-appointments .appointment-row strong { color:var(--cf-text); font-size:14px; font-weight:500; }.overview-appointments .appointment-row small { font-size:12px; color:var(--cf-secondary); }
.next-action-row { display:flex; align-items:flex-start; gap:10px; width:100%; padding:14px 0; border:0; border-bottom:1px solid var(--cf-border); background:none; text-align:left; }.next-action-row:last-child { border-bottom:0; }.next-action-row > span:nth-child(2) { flex:1; min-width:0; }.next-action-row strong,.next-action-row small,.action-meta { display:block; }.next-action-row strong { font-size:13px; font-weight:500; }.next-action-row small,.action-meta { margin-top:4px; font-size:12px; color:var(--cf-secondary); }.action-dot { width:7px; height:7px; border-radius:50%; background:#87aee1; margin-top:7px; flex-shrink:0; }.action-dot.late { background:#ce7b69; }
.return-row { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--cf-border); }.return-row:last-child { border-bottom:0; }.return-row > div { flex:1; min-width:0; }.return-row strong,.return-row small { display:block; font-size:13px; }.return-row small { font-size:12px; color:var(--cf-secondary); margin-top:4px; }
.team-panel { margin-top:24px; }.team-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.team-person { display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap; }.team-person > span:not(.avatar):not(.badge) { flex:1; min-width:0; }.team-person strong,.team-person small { display:block; font-size:13px; }.team-person small { margin-top:3px; font-size:12px; color:var(--cf-secondary); }
.patient-content .stats-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }.patient-profile h2 { margin:0 0 20px; font-size:16px; font-weight:600; }
@media(max-width:1100px) { .team-grid { grid-template-columns:1fr; }.team-person { flex-wrap:nowrap; } }
@media(max-width:760px) { .overview-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.overview-appointments .appointment-row { flex-wrap:wrap; }.overview-appointments .appointment-row .badge { margin-left:auto; }.overview-appointments .appointment-row > svg { display:none; }.patient-content .stats-strip { grid-template-columns:1fr; }.team-person { flex-wrap:wrap; }.stats-strip .stat-value { font-size:24px; }.period-caption { width:100%; } }
@media (max-width: 1250px) {
  .crm-layout { height: auto; grid-template-columns: 230px minmax(0, 1fr); }
  .crm-layout > .conversation-list, .crm-layout > .conversation-panel { height: 660px; }
  .crm-layout > .contact-panel { height: auto; }
  .crm-contact-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding-bottom: 18px; }
  .crm-contact-heading .avatar { width: 30px; height: 30px; margin: 0; font-size: 12px; }
  .crm-contact-heading p { margin: 0 0 0 auto; }
  [data-crm-contact-form] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  [data-crm-contact-form] .form-error { grid-column: 1 / -1; }
  [data-crm-contact-form] .button { align-self: end; }
  .crm-layout .contact-panel > .button { width: auto; }
  .crm-layout .contact-panel > .inline-note { max-width: 600px; }
}
@media (max-width: 760px) {
  .crm-layout { height: auto; min-height: 0; }
  .crm-layout > .conversation-list { height: 246px; max-height: 246px; }
  .crm-layout > .conversation-panel { height: auto; min-height: 540px; }
  .crm-search { min-height: 44px; }
  .crm-search .input { min-height: 42px; font-size: 16px; }
  .conversation-panel > header { flex-wrap: wrap; }
  .crm-patient-link { margin-left: 40px; min-height: 38px; }
  .message-list { max-height: 420px; }
  .crm-composer-main { flex-wrap: wrap; }
  .crm-composer-main .field { flex-basis: 100%; }
  .crm-composer-main textarea { min-height: 70px; font-size: 16px; }
  .crm-composer-main .button { margin-left: auto; min-height: 44px; }
  .crm-composer-note { line-height: 1.8; }
  .crm-contact-heading { display: block; }
  .crm-contact-heading .avatar { width: 38px; height: 38px; margin-bottom: 10px; font-size: 13px; }
  .crm-contact-heading p { margin-top: 4px; }
  [data-crm-contact-form] { display: flex; }
  [data-crm-contact-form] .input, [data-crm-contact-form] .select { min-height: 44px; font-size: 16px; }
  .crm-layout .contact-panel > .button { width: 100%; }
}
.template-settings { margin-top:24px; padding:24px; }
.template-professional { display:flex; align-items:end; gap:24px; margin:20px 0; }
.template-professional .field { flex:1; max-width:440px; }
.template-professional .field-help { flex:1; max-width:380px; }
.template-library { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.template-base { border:1px solid var(--border,#dfe1e6); border-radius:8px; padding:18px; min-width:0; }
.template-base h3 { margin:12px 0 6px; font-size:15px; }
.template-base p { color:var(--text-muted,#6b778c); font-size:13px; }
.template-base-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:16px; }
.template-current { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:24px 0; padding-top:24px; border-top:1px solid #dfe1e6; }
.template-current h3 { margin:5px 0; overflow-wrap:anywhere; }
.template-current > div { min-width:0; }
.template-current > .button { flex-shrink:0; }
.template-fields { margin:20px 0; }
.template-field-row { display:flex; gap:20px; align-items:center; padding:16px 0; border-bottom:1px solid #ebecf0; }
.template-field-label { flex:1; min-width:0; }
.template-field-label small { display:block; margin-top:5px; }
.template-field-flags { display:flex; gap:16px; flex-wrap:wrap; }
.template-field-flags label { display:flex; align-items:center; gap:6px; font-size:13px; }
.template-field-order { display:flex; gap:2px; }
.template-field-order [data-direction="-1"] svg { transform:rotate(180deg); }
.template-add-field { display:flex; gap:14px; align-items:end; padding:18px 0; flex-wrap:wrap; }
.template-add-field .field { flex:1; min-width:150px; }
.template-editor-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
@media(max-width:1000px) { .template-library { grid-template-columns:1fr; }.template-professional { align-items:stretch; flex-direction:column; gap:8px; } }
@media(max-width:760px) { .template-settings { padding:18px; }.template-current { flex-direction:column; align-items:stretch; }.template-field-row { flex-wrap:wrap; gap:12px; }.template-field-label { flex-basis:100%; }.template-field-flags { flex:1; }.template-editor-actions { flex-wrap:wrap; }.template-editor-actions .button { flex:1; } }