/* =====================================================================================
   DrDial theme — premium, calm, macOS-inspired clinical SaaS (Batch 10, final layer).
   Loaded LAST. One token set + one component language for every screen. Earlier layers
   (styles.css, ui-kit.css) keep layout; this layer owns colour, type, radius, elevation,
   density and control sizing. Selectors are prefixed with `html body.aesthetic-crm` so they
   win over older `body.aesthetic-crm …` rules without !important storms.
   ===================================================================================== */

:root,
html body.aesthetic-crm,
html body.business {
  /* Design System v2 (Phase 2): every --dd-* value now comes from app/tokens.css (generated from
     app/modules/theme/palettes.js). Accent follows html[data-accent]; dark mode follows html[data-theme]. */
  --dd-canvas: var(--canvas);
  --dd-surface: var(--surface-1);
  --dd-surface-2: var(--surface-2);
  --dd-fill: var(--fill);          /* quiet fills: segmented controls, chips, hovers */
  --dd-fill-strong: var(--fill-strong);
  --dd-line: var(--line);
  --dd-line-strong: var(--line-strong);
  --dd-ink: var(--ink-1);
  --dd-ink-2: var(--ink-2);
  --dd-ink-3: var(--ink-3);
  --dd-ink-4: var(--ink-4);
  --dd-accent: var(--accent);
  --dd-accent-hover: var(--accent-hover);
  --dd-accent-soft: var(--accent-soft);
  --dd-accent-on: var(--accent-on);
  --dd-success: var(--success);   --dd-success-soft: var(--success-soft);
  --dd-warning: var(--warning);   --dd-warning-soft: var(--warning-soft);
  --dd-danger: var(--danger);     --dd-danger-soft: var(--danger-soft);
  --dd-info: var(--info);         --dd-info-soft: var(--info-soft);
  /* Shape, depth, motion */
  --dd-r-xs: var(--r-xs); --dd-r-sm: var(--r-sm); --dd-r: var(--r-md); --dd-r-lg: var(--r-md); --dd-r-xl: var(--r-lg);
  --dd-shadow-1: var(--elev-1);
  --dd-shadow-2: var(--elev-2);
  --dd-shadow-pop: var(--elev-pop);
  --dd-focus: var(--focus-ring);
  --dd-ease: var(--dur-fast) var(--ease-out);
  /* Type */
  /* System UI fonts first (SF on Apple, Segoe UI Variable on Windows, Roboto on Android); the
     self-hosted Plus Jakarta Sans only fills in where none of those exist (e.g. Linux). */
  --dd-font: var(--font-text);
  --dd-font-display: var(--font-display);
  --dd-font-mono: var(--font-mono);
  /* Control sizing */
  --dd-control-h: 32px; --dd-control-h-sm: 28px; --dd-control-h-lg: 38px;

  /* Map every legacy token family onto the new system (styles.css + ui-kit.css) */
  --bg: var(--dd-canvas); --bg-2: var(--dd-fill); --surface: var(--dd-surface); --surface-strong: var(--dd-surface);
  --ink: var(--dd-ink); --navy: var(--dd-ink); --muted: var(--dd-ink-3); --faint: var(--dd-ink-4); --disabled: var(--dd-ink-4);
  --primary: var(--dd-accent); --primary-soft: var(--dd-accent-soft); 
  --shadow: var(--dd-shadow-2); --shadow-soft: var(--dd-shadow-1);
  --radius-xs: var(--dd-r-xs); --radius-sm: var(--dd-r-sm); --radius: var(--dd-r); --radius-lg: var(--dd-r-lg);
  --ease: var(--dd-ease); --font: var(--dd-font);
  --teal: var(--dd-accent); --teal-dark: var(--dd-accent-hover);
  --md-primary: var(--dd-accent); --md-primary-container: var(--dd-accent-soft); --md-text: var(--dd-ink); --md-muted: var(--dd-ink-3);
  --md-border: var(--dd-line); --md-surface: var(--dd-surface); --md-surface-alt: var(--dd-canvas);
  --color-primary: var(--dd-accent); --color-primary-600: var(--dd-accent-hover); --color-primary-50: var(--dd-accent-soft);
  --color-accent: var(--dd-accent); --color-accent-50: var(--dd-accent-soft);
  --gradient-brand: var(--dd-accent); --gradient-soft: var(--dd-surface);
  --color-ink: var(--dd-ink); --color-ink-2: var(--dd-ink-2); --color-ink-3: var(--dd-ink-3); --color-muted: var(--dd-ink-4);
  --color-line: var(--dd-line); --color-canvas: var(--dd-canvas); --color-surface: var(--dd-surface);
  --color-success: var(--dd-success); --color-warning: var(--dd-warning); --color-danger: var(--dd-danger); --color-info: var(--dd-info);
  --radius-md: var(--dd-r-lg); --radius-pill: 999px;
  --shadow-card: var(--dd-shadow-1); --shadow-pop: var(--dd-shadow-pop);
  --fs-display: 26px; --fs-h1: 20px; --fs-h2: 15px; --fs-body: 13.5px; --fs-small: 12px; --fs-kpi: 22px;
  --ease-kit: var(--dd-ease);
  --sidebar-w: 236px; --header-h: 52px;
}
/* Dark values live in app/tokens.css (html[data-theme="dark"] / data-theme="auto"); the --dd-* aliases above follow them. */

/* ---------- Base ---------- */
html body.aesthetic-crm, html body.business, html body.login {
  font-family: var(--dd-font); font-size: 13.5px; line-height: 1.45; color: var(--dd-ink);
  background: var(--dd-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "tnum" 0;
}
html body.aesthetic-crm *, html body.business * { letter-spacing: normal; }
html body.aesthetic-crm h1 { font: 600 20px/1.25 var(--dd-font-display); letter-spacing: -.012em; margin: 0; color: var(--dd-ink); }
html body.aesthetic-crm h2 { font: 600 15px/1.3 var(--dd-font-display); letter-spacing: -.006em; color: var(--dd-ink); }
html body.aesthetic-crm h3 { font: 600 13.5px/1.35 var(--dd-font); color: var(--dd-ink); }
html body.aesthetic-crm h4 { font: 600 12.5px/1.35 var(--dd-font); color: var(--dd-ink-2); }
html body.aesthetic-crm small, html body.aesthetic-crm .muted { color: var(--dd-ink-3); }
html body.aesthetic-crm strong { font-weight: 600; }
html body.aesthetic-crm a { color: var(--dd-accent); }
html body.aesthetic-crm .tabular, html body.aesthetic-crm td.num, html body.aesthetic-crm .ui-stat-value { font-variant-numeric: tabular-nums; }
html body.aesthetic-crm ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
html body.aesthetic-crm :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--dd-focus); }
html body.aesthetic-crm .eyebrow, html body.aesthetic-crm .breadcrumb { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--dd-ink-4); }

/* ---------- Buttons: compact, solid primary, quiet secondary ---------- */
html body.aesthetic-crm button, html body.aesthetic-crm .ui-btn, html body.aesthetic-crm .button-link {
  min-height: var(--dd-control-h); height: auto; padding: 0 12px; border-radius: var(--dd-r-sm);
  border: 1px solid var(--dd-line-strong); background: var(--dd-surface); color: var(--dd-ink);
  font: 500 13px/1 var(--dd-font); box-shadow: 0 1px 0 rgba(0, 0, 0, .03); filter: none; transform: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; cursor: pointer;
  transition: background var(--dd-ease), border-color var(--dd-ease), color var(--dd-ease), box-shadow var(--dd-ease);
}
html body.aesthetic-crm button:hover, html body.aesthetic-crm .ui-btn:hover { background: var(--dd-surface-2); border-color: #C7C7CC; box-shadow: 0 1px 0 rgba(0, 0, 0, .03); transform: none; filter: none; }
html body.aesthetic-crm button:active { background: var(--dd-fill); transform: none; }
html body.aesthetic-crm button:disabled, html body.aesthetic-crm .ui-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
html body.aesthetic-crm button.active, html body.aesthetic-crm .ui-btn.primary, html body.aesthetic-crm .primary-link, html body.aesthetic-crm .button-link.active, html body.aesthetic-crm a.active.button-link {
  background: var(--dd-accent); border-color: var(--dd-accent); color: var(--accent-on); box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
html body.aesthetic-crm button.active:hover, html body.aesthetic-crm .ui-btn.primary:hover { background: var(--dd-accent-hover); border-color: var(--dd-accent-hover); box-shadow: 0 1px 1px rgba(0, 0, 0, .08); filter: none; }
html body.aesthetic-crm .ghost-pill, html body.aesthetic-crm .ui-btn.ghost, html body.aesthetic-crm .link-btn, html body.aesthetic-crm .link-soft {
  background: transparent; border-color: transparent; box-shadow: none; color: var(--dd-accent); padding: 0 8px;
}
html body.aesthetic-crm .ghost-pill:hover, html body.aesthetic-crm .ui-btn.ghost:hover, html body.aesthetic-crm .link-btn:hover { background: var(--dd-accent-soft); border-color: transparent; }
html body.aesthetic-crm .link-btn { min-height: 0; height: auto; padding: 0; font-weight: 500; }
html body.aesthetic-crm .link-btn:hover { background: transparent; text-decoration: underline; }
html body.aesthetic-crm .danger-soft, html body.aesthetic-crm .ui-btn.danger { background: var(--dd-surface); border-color: #F0C9C7; color: var(--dd-danger); }
html body.aesthetic-crm .danger-soft:hover, html body.aesthetic-crm .ui-btn.danger:hover { background: var(--dd-danger-soft); border-color: #E8A9A6; }
html body.aesthetic-crm .ui-btn.sm, html body.aesthetic-crm .mini-actions button, html body.aesthetic-crm .mini-actions a.ui-btn, html body.aesthetic-crm .pay-chips button { min-height: var(--dd-control-h-sm); padding: 0 10px; font-size: 12.5px; }
html body.aesthetic-crm .ui-btn.lg { min-height: var(--dd-control-h-lg); padding: 0 16px; font-size: 14px; }
html body.aesthetic-crm .ui-btn.icon, html body.aesthetic-crm button.icon, html body.aesthetic-crm .icon-only { width: var(--dd-control-h); min-width: var(--dd-control-h); padding: 0; border-radius: var(--dd-r-sm); }
html body.aesthetic-crm .mini-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- Form controls ---------- */
html body.aesthetic-crm input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
html body.aesthetic-crm select, html body.aesthetic-crm textarea {
  min-height: var(--dd-control-h); height: auto; padding: 6px 10px; border: 1px solid var(--dd-line-strong); border-radius: var(--dd-r-sm);
  background: var(--dd-surface); color: var(--dd-ink); font: 400 13.5px/1.35 var(--dd-font); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .02);
  transition: border-color var(--dd-ease), box-shadow var(--dd-ease); width: 100%; max-width: 100%;
}
html body.aesthetic-crm select { padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--dd-ink-3) 50%), linear-gradient(135deg, var(--dd-ink-3) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; -webkit-appearance: none; appearance: none; }
html body.aesthetic-crm textarea { min-height: 72px; line-height: 1.45; resize: vertical; }
html body.aesthetic-crm input::placeholder, html body.aesthetic-crm textarea::placeholder { color: var(--dd-ink-4); }
html body.aesthetic-crm input:hover:not(:disabled):not(:focus), html body.aesthetic-crm select:hover:not(:disabled):not(:focus), html body.aesthetic-crm textarea:hover:not(:disabled):not(:focus) { border-color: #B8B8BF; }
html body.aesthetic-crm input:focus, html body.aesthetic-crm select:focus, html body.aesthetic-crm textarea:focus { outline: none; border-color: var(--dd-accent); box-shadow: var(--dd-focus); }
html body.aesthetic-crm input:disabled, html body.aesthetic-crm select:disabled, html body.aesthetic-crm textarea:disabled { background: var(--dd-fill); color: var(--dd-ink-3); }
html body.aesthetic-crm input[type=checkbox], html body.aesthetic-crm input[type=radio] { width: 15px; height: 15px; margin: 0; accent-color: var(--dd-accent); flex: none; }
html body.aesthetic-crm label { font-size: 12.5px; font-weight: 500; color: var(--dd-ink-2); }
html body.aesthetic-crm label > input, html body.aesthetic-crm label > select, html body.aesthetic-crm label > textarea { margin-top: 4px; }
html body.aesthetic-crm label em { font-style: normal; font-weight: 400; color: var(--dd-ink-4); }
html body.aesthetic-crm .form-grid { gap: 10px 12px; }
html body.aesthetic-crm .stack-form { gap: 12px; }
html body.aesthetic-crm fieldset { border: 1px solid var(--dd-line); border-radius: var(--dd-r); padding: 10px 12px; }
html body.aesthetic-crm legend { font-size: 12px; font-weight: 600; color: var(--dd-ink-3); padding: 0 4px; }
html body.aesthetic-crm .field-error, html body.aesthetic-crm .finder-error { color: var(--dd-danger); font-size: 12px; }
html body.aesthetic-crm input.is-invalid { border-color: var(--dd-danger) !important; background: var(--dd-surface); box-shadow: 0 0 0 3px rgba(201, 48, 44, .12); }
html body.aesthetic-crm details > summary { cursor: pointer; }
html body.aesthetic-crm .cw-more > summary, html body.aesthetic-crm .proc-other > summary { font-size: 12.5px; color: var(--dd-ink-3); font-weight: 500; }

/* ---------- Surfaces: panels, cards, sheets ---------- */
html body.aesthetic-crm .panel, html body.aesthetic-crm .ui-card, html body.aesthetic-crm .proc-card, html body.aesthetic-crm .cw-card, html body.aesthetic-crm .cw-headcard,
html body.aesthetic-crm .patient-record-header, html body.aesthetic-crm .procedure-room .procedure-sticky, html body.aesthetic-crm .plan-card, html body.aesthetic-crm .rx-a4 {
  background: var(--dd-surface); border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); box-shadow: var(--dd-shadow-1);
}
html body.aesthetic-crm .panel, html body.aesthetic-crm .ui-card { padding: 16px 18px; }
html body.aesthetic-crm .panel.inset, html body.aesthetic-crm .panel .panel, html body.aesthetic-crm .panel.inner-panel { box-shadow: none; }
html body.aesthetic-crm .panel.inner-panel { padding: 0; border: 0; background: transparent; }
html body.aesthetic-crm .panel-head, html body.aesthetic-crm .ui-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
html body.aesthetic-crm .panel-head h2, html body.aesthetic-crm .panel-head h3 { margin: 0; }
html body.aesthetic-crm .panel-head span, html body.aesthetic-crm .panel-head > div > span { font-size: 12px; color: var(--dd-ink-3); }
html body.aesthetic-crm .proc-card { padding: 16px; }
html body.aesthetic-crm .cw-card { padding: 14px 16px; }

/* ---------- Status chips / pills: small, quiet, semantic ---------- */
html body.aesthetic-crm .status-pill, html body.aesthetic-crm .ui-chip, html body.aesthetic-crm .cw-chip, html body.aesthetic-crm .chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 20px; height: auto; padding: 1px 7px; border-radius: var(--dd-r-xs);
  border: 1px solid transparent; background: var(--dd-fill); color: var(--dd-ink-2); font: 500 11.5px/1.3 var(--dd-font); white-space: nowrap; box-shadow: none;
}
html body.aesthetic-crm .ui-chip.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
html body.aesthetic-crm .ui-chip.sm { min-height: 18px; padding: 0 6px; font-size: 11px; }
html body.aesthetic-crm :is(.status-pill, .ui-chip):is(.status-done, .status-completed, .status-signed, .status-paid, .status-active, .converted, .status-converted, .status-checked-in, .status-ready, .status-in-progress) { background: var(--dd-success-soft); color: var(--dd-success); }
html body.aesthetic-crm :is(.status-pill, .ui-chip):is(.status-booked, .status-confirmed, .status-sent, .status-info, .new, .status-new, .status-scheduled) { background: var(--dd-info-soft); color: var(--dd-info); }
html body.aesthetic-crm :is(.status-pill, .ui-chip):is(.status-arrived, .status-pending, .status-review, .warning, .status-warning, .status-partial, .status-paused, .status-with-doctor, .status-engaged) { background: var(--dd-warning-soft); color: var(--dd-warning); }
html body.aesthetic-crm :is(.status-pill, .ui-chip):is(.status-no-show, .status-cancelled, .status-declined, .status-revoked, .status-aborted, .status-void, .lost, .status-lost, .status-overdue) { background: var(--dd-danger-soft); color: var(--dd-danger); }
html body.aesthetic-crm :is(.status-pill, .ui-chip):is(.status-draft, .status-planned, .status-muted, .status-closed) { background: var(--dd-fill); color: var(--dd-ink-3); }
html body.aesthetic-crm .ui-chip.filter-chip, html body.aesthetic-crm .filter-chip { min-height: 26px; padding: 0 10px; border: 1px solid var(--dd-line-strong); background: var(--dd-surface); color: var(--dd-ink-2); border-radius: var(--dd-r-sm); font-size: 12.5px; cursor: pointer; }
html body.aesthetic-crm .ui-chip.filter-chip.active, html body.aesthetic-crm .filter-chip.active { background: var(--dd-ink); border-color: var(--dd-ink); color: #fff; }

/* ---------- Segmented controls & tabs (macOS segmented look) ---------- */
html body.aesthetic-crm :is(.ui-tabs, .ui-seg, .segmented-control, .catalogue-tabs, .inventory-tabs, .p360 .profile-tabs, .proc-segment, .as-views, .as-tools, .as-surface, .procedure-tabs, .prescription-workspace-tabs, .consult-mode-toggle) {
  display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 2px; border: 0; border-radius: var(--dd-r); background: var(--dd-fill-strong); box-shadow: none; max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
html body.aesthetic-crm :is(.ui-tabs, .ui-seg, .segmented-control, .catalogue-tabs, .inventory-tabs, .p360 .profile-tabs, .proc-segment, .as-views, .as-tools, .as-surface, .procedure-tabs, .prescription-workspace-tabs, .consult-mode-toggle)::-webkit-scrollbar { display: none; }
html body.aesthetic-crm :is(.ui-tabs, .ui-seg, .segmented-control, .catalogue-tabs, .inventory-tabs, .p360 .profile-tabs, .proc-segment, .as-views, .as-tools, .as-surface, .procedure-tabs, .prescription-workspace-tabs, .consult-mode-toggle) > button {
  min-height: 26px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--dd-ink-2); font-size: 12.5px; font-weight: 500; box-shadow: none; filter: none;
}
html body.aesthetic-crm :is(.ui-tabs, .ui-seg, .segmented-control, .catalogue-tabs, .inventory-tabs, .p360 .profile-tabs, .proc-segment, .as-views, .as-tools, .as-surface, .procedure-tabs, .prescription-workspace-tabs, .consult-mode-toggle) > button:hover { background: rgba(255, 255, 255, .55); color: var(--dd-ink); }
html body.aesthetic-crm :is(.ui-tabs, .ui-seg, .segmented-control, .catalogue-tabs, .inventory-tabs, .p360 .profile-tabs, .proc-segment, .as-views, .as-tools, .as-surface, .procedure-tabs, .prescription-workspace-tabs, .consult-mode-toggle) > button:is(.active, [aria-selected="true"]) {
  background: var(--dd-surface); color: var(--dd-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04);
}
html body.aesthetic-crm .ui-tabs > button small { margin-left: 4px; font-size: 11px; color: var(--dd-ink-4); font-weight: 500; }
html body.aesthetic-crm .as-divider { background: var(--dd-line-strong); }

/* ---------- Tables (ui-table, crm-table, table-lite) ---------- */
html body.aesthetic-crm .ui-table-wrap { border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); background: var(--dd-surface); overflow: auto; }
html body.aesthetic-crm .ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
html body.aesthetic-crm .ui-table thead th { position: sticky; top: 0; z-index: 1; height: 32px; padding: 0 12px; background: var(--dd-surface-2); color: var(--dd-ink-3); font-size: 11.5px; font-weight: 500; text-align: left; border-bottom: 1px solid var(--dd-line); white-space: nowrap; }
html body.aesthetic-crm .ui-table tbody td { height: 40px; padding: 6px 12px; border-bottom: 1px solid var(--dd-line); vertical-align: middle; }
html body.aesthetic-crm .ui-table tbody tr:last-child td { border-bottom: 0; }
html body.aesthetic-crm .ui-table tbody tr:hover td { background: var(--dd-surface-2); }
html body.aesthetic-crm .ui-table .ui-cell-main strong, html body.aesthetic-crm .patient-table .ui-cell-main strong { font-size: 13px; font-weight: 600; }
html body.aesthetic-crm .ui-table .ui-cell-main small { font-size: 11.5px; }
html body.aesthetic-crm .patient-table .ui-table-wrap { border-radius: var(--dd-r-lg); }
html body.aesthetic-crm .ui-avatar { width: 28px; height: 28px; font-size: 11px; font-weight: 600; background: #8E8E93; color: #fff; letter-spacing: .02em; }
html body.aesthetic-crm .ui-avatar.sm { width: 24px; height: 24px; font-size: 10px; }
html body.aesthetic-crm .ui-avatar.lg { width: 44px; height: 44px; font-size: 15px; }
html body.aesthetic-crm .ui-avatar.h0 { background: #5E7FA8; } html body.aesthetic-crm .ui-avatar.h1 { background: #6B8F71; } html body.aesthetic-crm .ui-avatar.h2 { background: #9A7B5B; }
html body.aesthetic-crm .ui-avatar.h3 { background: #7B6FA6; } html body.aesthetic-crm .ui-avatar.h4 { background: #A3686D; } html body.aesthetic-crm .ui-avatar.h5 { background: #5F8E95; }
html body.aesthetic-crm .crm-table, html body.aesthetic-crm .table-lite { border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); background: var(--dd-surface); overflow: hidden; }
html body.aesthetic-crm .crm-table .crm-head { background: var(--dd-surface-2); color: var(--dd-ink-3); font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--dd-line); min-height: 32px; }
html body.aesthetic-crm .crm-table .crm-row { min-height: 44px; padding-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--dd-line); border-radius: 0; box-shadow: none; background: var(--dd-surface); }
html body.aesthetic-crm .crm-table .crm-row:hover { background: var(--dd-surface-2); }
html body.aesthetic-crm .table-lite > div { padding: 10px 14px; border-bottom: 1px solid var(--dd-line); border-radius: 0; background: transparent; box-shadow: none; }
html body.aesthetic-crm .table-lite > div:last-child { border-bottom: 0; }
html body.aesthetic-crm .table-lite > p { margin: 0; padding: 14px; color: var(--dd-ink-3); }
html body.aesthetic-crm .fd-menu summary { width: 28px; height: 28px; border-radius: var(--dd-r-sm); border: 1px solid transparent; background: transparent; color: var(--dd-ink-3); }
html body.aesthetic-crm .fd-menu summary:hover, html body.aesthetic-crm .fd-menu[open] summary { background: var(--dd-fill); }
html body.aesthetic-crm .fd-menu[open] > div, html body.aesthetic-crm .cw-menu[open] > div, html body.aesthetic-crm .notification-panel, html body.aesthetic-crm .profile-pop {
  border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); background: var(--dd-surface); box-shadow: var(--dd-shadow-pop); padding: 4px;
}
html body.aesthetic-crm .fd-menu[open] > div :is(button, a), html body.aesthetic-crm .cw-menu[open] > div button { justify-content: flex-start; width: 100%; min-height: 28px; border: 0; background: transparent; box-shadow: none; border-radius: var(--dd-r-xs); padding: 0 10px; font-weight: 400; color: var(--dd-ink); }
html body.aesthetic-crm .fd-menu[open] > div :is(button, a):hover, html body.aesthetic-crm .cw-menu[open] > div button:hover { background: var(--dd-accent); color: var(--accent-on); }
html body.aesthetic-crm .cw-menu summary { min-height: var(--dd-control-h); padding: 0 12px; border-radius: var(--dd-r-sm); border: 1px solid var(--dd-line-strong); font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; background: var(--dd-surface); }

/* ---------- Stat tiles: compact metrics, not colourful cards ---------- */
html body.aesthetic-crm :is(.cards, .ui-stat-row) { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); background: var(--dd-surface); overflow: hidden; box-shadow: var(--dd-shadow-1); }
html body.aesthetic-crm :is(.cards, .ui-stat-row) > :is(article, .ui-stat) {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label icon" "value value" "meta meta"; align-content: start; gap: 2px 8px;
  padding: 12px 16px; border: 0; border-right: 1px solid var(--dd-line); border-radius: 0; background: transparent; box-shadow: none; min-width: 0;
}
html body.aesthetic-crm :is(.cards, .ui-stat-row) > :is(article, .ui-stat):last-child { border-right: 0; }
html body.aesthetic-crm :is(.cards article > span:first-child, .ui-stat-label) { grid-area: label; font-size: 12px; font-weight: 500; color: var(--dd-ink-3); text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.aesthetic-crm :is(.cards article > strong, .ui-stat-value) { grid-area: value; font: 600 22px/1.15 var(--dd-font-display); letter-spacing: -.015em; color: var(--dd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
html body.aesthetic-crm :is(.cards article > small, .ui-stat-meta) { grid-area: meta; font-size: 11.5px; color: var(--dd-ink-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
html body.aesthetic-crm .ui-stat-icon { grid-area: icon; width: 22px; height: 22px; font-size: 12px; border-radius: 6px; background: var(--dd-fill); color: var(--dd-ink-3); display: grid; place-items: center; }
html body.aesthetic-crm .ui-spark { grid-area: meta; height: 22px; margin-top: 4px; opacity: .9; }
html body.aesthetic-crm .ui-delta { padding: 0 5px; border-radius: 4px; font-size: 11px; font-weight: 600; }
html body.aesthetic-crm .ui-delta.up { background: var(--dd-success-soft); color: var(--dd-success); }
html body.aesthetic-crm .ui-delta.down { background: var(--dd-danger-soft); color: var(--dd-danger); }
html body.aesthetic-crm .ui-delta.flat { background: var(--dd-fill); color: var(--dd-ink-3); }
html body.aesthetic-crm .ui-ring circle.bar { stroke: var(--dd-accent); }
html body.aesthetic-crm .ui-ring circle.track { stroke: var(--dd-fill-strong); }

/* ---------- App shell: sidebar ---------- */
html body.aesthetic-crm .medical-sidebar {
  width: var(--sidebar-w); background: rgba(246, 246, 248, .92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--dd-line); box-shadow: none; padding: 10px 10px 12px;
}
html body.aesthetic-crm .medical-sidebar .brand-lockup { padding: 6px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--dd-line); background: transparent; }
html body.aesthetic-crm .medical-sidebar .brand-lockup strong { font: 650 15px/1.2 var(--dd-font-display); letter-spacing: -.01em; color: var(--dd-ink); background: none; -webkit-text-fill-color: currentColor; }
html body.aesthetic-crm .medical-sidebar .brand-lockup small { font-size: 11.5px; color: var(--dd-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
html body.aesthetic-crm .sidebar-nav { gap: 1px; }
html body.aesthetic-crm .sidebar-nav .nav-group-label { margin: 12px 8px 3px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--dd-ink-4); text-transform: none; }
html body.aesthetic-crm .sidebar-nav button, html body.aesthetic-crm .medical-sidebar .logout-nav {
  min-height: 30px; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; box-shadow: none; color: var(--dd-ink-2);
  font-size: 13px; font-weight: 500; justify-content: flex-start; gap: 8px; width: 100%;
}
html body.aesthetic-crm .sidebar-nav button:hover, html body.aesthetic-crm .medical-sidebar .logout-nav:hover { background: rgba(0, 0, 0, .045); border: 0; box-shadow: none; }
html body.aesthetic-crm .sidebar-nav button.active { background: rgba(0, 0, 0, .065); color: var(--dd-ink); font-weight: 600; box-shadow: none; }
html body.aesthetic-crm .sidebar-nav button.active .nav-icon, html body.aesthetic-crm .sidebar-nav button.active .nav-icon svg { color: var(--dd-accent); }
html body.aesthetic-crm .sidebar-nav button em, html body.aesthetic-crm .medical-sidebar .logout-nav em { font-style: normal; }
html body.aesthetic-crm .sidebar-nav .nav-icon, html body.aesthetic-crm .medical-sidebar .logout-nav .nav-icon { width: 18px; height: 18px; color: var(--dd-ink-3); flex: none; display: grid; place-items: center; }
html body.aesthetic-crm .sidebar-nav .nav-icon svg { width: 16px; height: 16px; }
html body.aesthetic-crm .medical-sidebar .logout-nav { margin-top: 8px; border-top: 1px solid var(--dd-line); border-radius: 0; padding-top: 8px; height: auto; }

/* ---------- App shell: header ---------- */
html body.aesthetic-crm .medical-topbar {
  min-height: var(--header-h); height: auto; padding: 8px 12px; margin: 0; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
  background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: none; position: sticky; top: 0; z-index: 40;
}
html body.aesthetic-crm .medical-topbar h1 { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
html body.aesthetic-crm .medical-topbar .breadcrumb { display: flex; gap: 6px; align-items: center; margin: 0 0 1px; }
html body.aesthetic-crm .medical-topbar .breadcrumb :is(span, button, .ui-chip) { min-height: 18px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; background: var(--dd-fill); color: var(--dd-ink-3); border: 0; box-shadow: none; }
html body.aesthetic-crm .topbar-actions { gap: 6px; align-items: center; }
html body.aesthetic-crm .topbar-search { min-width: 280px; justify-content: flex-start; color: var(--dd-ink-4); background: var(--dd-fill); border-color: transparent; box-shadow: none; font-weight: 400; }
html body.aesthetic-crm .topbar-search:hover { background: var(--dd-fill-strong); border-color: transparent; }
html body.aesthetic-crm .topbar-search kbd, html body.aesthetic-crm .topbar-search .kbd { margin-left: auto; font: 500 11px var(--dd-font); color: var(--dd-ink-4); background: var(--dd-surface); border: 1px solid var(--dd-line); border-radius: 5px; padding: 1px 5px; }
html body.aesthetic-crm .topbar-create { padding: 0 12px; }
html body.aesthetic-crm .profile-menu > button, html body.aesthetic-crm .topbar-actions .profile-trigger { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 50%; background: var(--dd-ink); color: #fff; border: 0; font-weight: 600; font-size: 12px; }
html body.aesthetic-crm .medical-main { background: var(--dd-canvas); }
html body.aesthetic-crm .medical-main { padding: 12px clamp(14px, 2vw, 28px) 28px; gap: 14px; }
html body.aesthetic-crm .medical-content { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0; min-width: 0; }

/* ---------- Page headers & dashboard ---------- */
html body.aesthetic-crm .ui-page-head, html body.aesthetic-crm .procedure-hero, html body.aesthetic-crm .prescription-hero { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
html body.aesthetic-crm .ui-page-head h1 { font-size: 20px; }
html body.aesthetic-crm .ui-page-head p { margin: 2px 0 0; color: var(--dd-ink-3); font-size: 13px; }
html body.aesthetic-crm .cc-greeting, html body.aesthetic-crm .workspace-hero, html body.aesthetic-crm .procedure-hero {
  padding: 4px 2px 6px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--dd-ink);
}
html body.aesthetic-crm .cc-greeting h1, html body.aesthetic-crm .workspace-hero h2 { font-size: 20px; color: var(--dd-ink); }
html body.aesthetic-crm .cc-greeting p, html body.aesthetic-crm .workspace-hero span, html body.aesthetic-crm .workspace-hero .breadcrumb { color: var(--dd-ink-3); }
html body.aesthetic-crm .workspace-hero .active { background: var(--dd-accent); color: var(--accent-on); border-color: var(--dd-accent); }
html body.aesthetic-crm .cc-grid, html body.aesthetic-crm .cc-grid-3 { gap: 14px; }
html body.aesthetic-crm .fd-page { gap: 14px; }
html body.aesthetic-crm .cc-chart svg path { stroke: var(--dd-accent); }

/* ---------- Lists/cards inside workspaces (queue rows, procedure cards, follow-ups) ---------- */
html body.aesthetic-crm :is(.procedure-card, .clinical-queue-row, .reception-queue-row, .visit-charge-row, .package-card, .entitlement-list article, .plan-list article, .experience-card, .inventory-alert-grid article, .timeline-event) {
  border: 1px solid var(--dd-line); border-radius: var(--dd-r); background: var(--dd-surface); box-shadow: none;
}
html body.aesthetic-crm :is(.procedure-card, .clinical-queue-row, .reception-queue-row):hover { border-color: var(--dd-line-strong); background: var(--dd-surface-2); box-shadow: none; }
html body.aesthetic-crm .procedure-card { padding: 10px 14px; }
html body.aesthetic-crm .procedure-card-main strong { font-size: 14px; }
html body.aesthetic-crm .doctor-empty, html body.aesthetic-crm .ui-empty, html body.aesthetic-crm .patient-directory-empty, html body.aesthetic-crm .module-empty {
  padding: 28px 16px; text-align: center; color: var(--dd-ink-3); border: 1px dashed var(--dd-line-strong); border-radius: var(--dd-r-lg); background: var(--dd-surface);
}
html body.aesthetic-crm .ui-empty strong, html body.aesthetic-crm .module-empty h2 { color: var(--dd-ink); font-size: 14px; }
html body.aesthetic-crm .ui-empty-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--dd-fill); color: var(--dd-ink-3); display: inline-grid; place-items: center; font-size: 16px; }

/* ---------- Sheets: modals & drawers ---------- */
html body.aesthetic-crm .modal-backdrop, html body .modal-backdrop { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
html body.aesthetic-crm .modal-panel, html body .modal-panel {
  border: 1px solid var(--dd-line); border-radius: var(--dd-r-xl); background: var(--dd-surface); box-shadow: var(--dd-shadow-pop); padding: 18px 20px; width: min(560px, calc(100vw - 24px));
}
html body.aesthetic-crm .modal-backdrop.drawer .modal-panel { border-radius: var(--dd-r-xl) 0 0 var(--dd-r-xl); width: min(520px, 100vw); padding: 18px 20px; }
html body.aesthetic-crm .modal-backdrop.drawer .modal-panel.wide { width: min(760px, 100vw); }
html body.aesthetic-crm .modal-panel > header, html body.aesthetic-crm .modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--dd-line); }
html body.aesthetic-crm .modal-panel h2, html body.aesthetic-crm .modal-panel > header h2 { font-size: 15px; margin: 0; }
html body.aesthetic-crm .lead-drawer, html body.aesthetic-crm .wizard-drawer { border-left: 1px solid var(--dd-line); border-radius: var(--dd-r-xl) 0 0 var(--dd-r-xl); box-shadow: var(--dd-shadow-pop); background: var(--dd-surface); }
html body.aesthetic-crm .drawer-head { padding-bottom: 10px; border-bottom: 1px solid var(--dd-line); }
html body.aesthetic-crm .drawer-head h2 { font-size: 15px; }
html body.aesthetic-crm .drawer-footer { border-top: 1px solid var(--dd-line); background: var(--dd-surface); }
html body.aesthetic-crm .drawer-backdrop { background: rgba(0, 0, 0, .28); }
html body.aesthetic-crm .wizard-steps span { width: 22px; height: 22px; font-size: 11px; background: var(--dd-fill); color: var(--dd-ink-3); border: 0; }
html body.aesthetic-crm .wizard-steps span.done, html body.aesthetic-crm .wizard-steps span.current { background: var(--dd-accent); color: var(--accent-on); }
html body.aesthetic-crm .clinical-next-step h2 { font-size: 17px; }
html body.aesthetic-crm .clinical-path span { border-radius: var(--dd-r-xs); font-size: 11.5px; }
html body.aesthetic-crm .modal-warning, html body.aesthetic-crm .duplicate-banner, html body.aesthetic-crm .rx-slim-bar, html body.aesthetic-crm .inventory-po-banner, html body.aesthetic-crm .patient-safety-banner {
  border: 1px solid #F2D6A9; background: var(--dd-warning-soft); color: #7A4508; border-radius: var(--dd-r); box-shadow: none;
}

/* ---------- Toasts ---------- */
html body .toast, html body #toastHost > *, html body .notify, html body .ui-toast { border-radius: var(--dd-r-lg) !important; background: rgba(29, 29, 31, .94) !important; color: #fff !important; box-shadow: var(--dd-shadow-pop) !important; font: 500 13px/1.35 var(--dd-font) !important; border: 0 !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

/* ---------- Clinical workspaces: tighten the remaining large elements ---------- */
html body.aesthetic-crm .proc-steps, html body.aesthetic-crm .p360 .profile-tabs { border-radius: var(--dd-r); }
html body.aesthetic-crm .proc-steps { background: var(--dd-fill-strong); border: 0; padding: 2px; }
html body.aesthetic-crm .proc-steps button { min-height: 30px; border-radius: 7px; font-size: 12.5px; }
html body.aesthetic-crm .proc-steps button em { width: 18px; height: 18px; font-size: 10.5px; }
html body.aesthetic-crm .proc-steps button.active { background: var(--dd-surface); color: var(--dd-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
html body.aesthetic-crm .proc-steps button.active em { background: var(--dd-accent); }
html body.aesthetic-crm .procedure-room .procedure-actions, html body.aesthetic-crm .cw-finishbar, html body.aesthetic-crm .prescription-sticky-actions {
  border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}
html body.aesthetic-crm .procedure-room .procedure-safety { background: var(--dd-surface); border: 1px solid var(--dd-line); }
html body.aesthetic-crm .p360 .patient-record-header h2, html body.aesthetic-crm .cw-identity strong { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
html body.aesthetic-crm .patient-mrn { font-size: 11px; font-weight: 600; color: var(--dd-ink-4); letter-spacing: .02em; }
html body.aesthetic-crm .journey-step .journey-step-dot { width: 20px; height: 20px; font-size: 10px; border-width: 1.5px; }
html body.aesthetic-crm .journey-step.complete .journey-step-dot { background: var(--dd-accent); border-color: var(--dd-accent); color: var(--accent-on); }
html body.aesthetic-crm .journey-step.current .journey-step-dot { border-color: var(--dd-accent); color: var(--dd-accent); }
html body.aesthetic-crm .journey-next-action { border-radius: var(--dd-r); background: var(--dd-accent-soft); border: 0; }
html body.aesthetic-crm .intake-chip, html body.aesthetic-crm .clinical-context-chip { border-radius: var(--dd-r-sm); }
html body.aesthetic-crm .cw-chipbtn { border-radius: var(--dd-r-sm) !important; min-height: 26px !important; font-weight: 500 !important; }
html body.aesthetic-crm .cw-chipbtn.selected { background: var(--dd-accent) !important; border-color: var(--dd-accent) !important; color: var(--accent-on) !important; }
html body.aesthetic-crm .cw-chipbtn.selected::before { content: "" !important; margin: 0 !important; }
html body.aesthetic-crm .perm-matrix, html body.aesthetic-crm .as-stage, html body.aesthetic-crm .as-side, html body.aesthetic-crm .unbilled-list { border-radius: var(--dd-r-lg); }
html body.aesthetic-crm .as-stage { background: radial-gradient(circle at 50% 40%, #FFFFFF 0, #F2F2F5 75%); }
html body.aesthetic-crm .as-marker { border-radius: 50% !important; min-height: 22px !important; padding: 0 !important; border: 2px solid #fff !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .25) !important; }
html body.aesthetic-crm .stock-bar i { background: var(--dd-success); } html body.aesthetic-crm .stock-bar.is-mid i { background: #E29A1E; } html body.aesthetic-crm .stock-bar.is-low i { background: var(--dd-danger); }
html body.aesthetic-crm .settings-card-grid { gap: 10px; }
html body.aesthetic-crm .settings-card-grid button { min-height: 64px; height: auto; padding: 12px 14px; display: grid; gap: 2px; justify-items: start; text-align: left; border-radius: var(--dd-r-lg); border: 1px solid var(--dd-line); box-shadow: none; white-space: normal; }
html body.aesthetic-crm .settings-card-grid button strong { font-size: 13.5px; }
html body.aesthetic-crm .settings-card-grid button span { font-size: 12px; color: var(--dd-ink-3); font-weight: 400; }
html body.aesthetic-crm .settings-card-grid button:hover { border-color: var(--dd-line-strong); background: var(--dd-surface-2); }

/* ---------- Mobile: bottom bar + sheets ---------- */
html body.aesthetic-crm .aesthetic-bottom-nav { border: 1px solid var(--dd-line); border-radius: 14px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); padding: 4px; min-height: 56px; }
html body.aesthetic-crm .aesthetic-bottom-nav button { min-height: 46px; height: auto; flex-direction: column; gap: 2px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--dd-ink-3); font-size: 10.5px; font-weight: 500; padding: 4px 2px; }
html body.aesthetic-crm .aesthetic-bottom-nav button em { font-style: normal; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.aesthetic-crm .aesthetic-bottom-nav button.active { color: var(--dd-accent); background: var(--dd-accent-soft); }
@media (max-width: 900px) {
  html body.aesthetic-crm .medical-main { padding: 8px 10px 96px; }
  html body.aesthetic-crm .medical-topbar { padding: 8px 12px; margin-bottom: 12px; }
  html body.aesthetic-crm .topbar-search { min-width: 0; width: 34px; padding: 0; justify-content: center; }
  html body.aesthetic-crm .topbar-search > :not(:first-child) { display: none; }
  html body.aesthetic-crm :is(.cards, .ui-stat-row) { grid-template-columns: 1fr 1fr; }
  html body.aesthetic-crm :is(.cards, .ui-stat-row) > :is(article, .ui-stat) { border-bottom: 1px solid var(--dd-line); }
  html body.aesthetic-crm .modal-backdrop.drawer .modal-panel, html body.aesthetic-crm .lead-drawer, html body.aesthetic-crm .wizard-drawer { width: 100vw; border-radius: var(--dd-r-xl) var(--dd-r-xl) 0 0; }
}
@media (max-width: 600px) {
  html body.aesthetic-crm button, html body.aesthetic-crm .ui-btn { min-height: 36px; }
  html body.aesthetic-crm input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), html body.aesthetic-crm select { min-height: 38px; font-size: 16px; }
  html body.aesthetic-crm textarea { font-size: 16px; }
  html body.aesthetic-crm .panel, html body.aesthetic-crm .ui-card { padding: 12px; border-radius: var(--dd-r-lg); }
  html body.aesthetic-crm .modal-panel { padding: 14px; }
  html body.aesthetic-crm .medical-topbar h1 { font-size: 14px; }
  html body.aesthetic-crm .ui-table thead th, html body.aesthetic-crm .ui-table tbody td { padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) { html body.aesthetic-crm * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ---------- Login + boot shell (same language before the app loads: no old-UI flash) ---------- */
html body .boot-shell, html body.login .login-page, html body .login-wrap { background: var(--dd-canvas); }
html body .login-card, html body .boot-card { border: 1px solid var(--dd-line); border-radius: 16px; background: var(--dd-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 40px rgba(0, 0, 0, .06); padding: 28px 28px 24px; width: min(380px, calc(100vw - 32px)); }
html body .login-card h1 { font: 600 20px/1.25 var(--dd-font-display); letter-spacing: -.012em; margin: 0 0 4px; color: var(--dd-ink); }
html body .login-subtitle, html body .login-tagline { color: var(--dd-ink-3); font-size: 13px; }
html body .login-brand .brand, html body .login-card .brand { font: 650 18px/1.2 var(--dd-font-display); color: var(--dd-ink); background: none; -webkit-text-fill-color: currentColor; }
html body .login-mark { background: var(--dd-ink); color: #fff; border-radius: 10px; }
html body .login-card label { font-size: 12.5px; font-weight: 500; color: var(--dd-ink-2); }
html body .login-card input { min-height: 36px; border: 1px solid var(--dd-line-strong); border-radius: 8px; padding: 6px 10px; font: 400 14px var(--dd-font); background: var(--dd-surface); box-shadow: none; }
html body .login-card input:focus { outline: none; border-color: var(--dd-accent); box-shadow: var(--dd-focus); }
html body .login-card button.active, html body .login-submit { min-height: 36px; border-radius: 8px; background: var(--dd-accent); border: 1px solid var(--dd-accent); color: var(--accent-on); font: 500 14px var(--dd-font); box-shadow: none; width: 100%; }
html body .boot-app-sidebar { background: rgba(246, 246, 248, .92); border-right: 1px solid var(--dd-line); }
html body .boot-app-topbar { background: rgba(255, 255, 255, .82); border-bottom: 1px solid var(--dd-line); border-radius: 0; }
html body .boot-line, html body .skeleton { background: #ECECF0; }

/* ---------- Round 2: shared cells, filters, dashboard lists ---------- */
html body.aesthetic-crm .ui-cell-main { display: grid; gap: 1px; min-width: 0; }
html body.aesthetic-crm .ui-cell-main > strong, html body.aesthetic-crm .ui-cell-main > small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.aesthetic-crm .ui-cell-main > strong { font-size: 13px; font-weight: 600; line-height: 1.3; }
html body.aesthetic-crm .ui-cell-main > small { font-size: 11.5px; line-height: 1.3; }
html body.aesthetic-crm .cc-queue-row { grid-template-columns: 32px 26px minmax(0, 1fr) auto auto auto; padding: 7px 8px; border-radius: var(--dd-r-sm); gap: 10px; }
html body.aesthetic-crm .cc-queue-row:hover { background: var(--dd-surface-2); border-color: var(--dd-line); }
html body.aesthetic-crm .cc-token { color: var(--dd-ink-3); font-weight: 600; font-size: 12px; }
html body.aesthetic-crm .cc-wait { font-size: 11.5px; }
html body.aesthetic-crm .cc-attention-row { grid-template-columns: 24px minmax(0, 1fr) auto auto; padding: 7px 8px; border-radius: var(--dd-r-sm); border: 1px solid var(--dd-line); border-left: 2px solid var(--dd-warning); background: var(--dd-surface); }
html body.aesthetic-crm .cc-attention-row.tone-high, html body.aesthetic-crm .cc-attention-row.tone-critical { border-left-color: var(--dd-danger); }
html body.aesthetic-crm .cc-attention-row.tone-low { border-left-color: var(--dd-success); }
html body.aesthetic-crm .cc-attention-row:hover { background: var(--dd-surface-2); }
html body.aesthetic-crm .topbar-create, html body.aesthetic-crm .topbar-create * { color: #fff !important; -webkit-text-fill-color: #fff; }
html body.aesthetic-crm .topbar-create { min-height: var(--dd-control-h); padding: 0 12px; }
html body.aesthetic-crm .topbar-create span { font-size: 14px; }
html body.aesthetic-crm .fd-toolbar { gap: 8px; }
html body.aesthetic-crm .fd-filters { gap: 6px; }
html body.aesthetic-crm .fd-filters :is(select, input) { width: auto; min-width: 140px; max-width: 220px; flex: 0 1 auto; }
/* Uniform control geometry everywhere (legacy rules made some selects/inputs pill-shaped). */
html body.aesthetic-crm :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea) { border-radius: var(--dd-r-sm) !important; }
html body.aesthetic-crm :is(button, .ui-btn):not(.as-marker):not(.injection-point-marker):not(.chart-note-marker):not(.icon-only):not(.sidebar-toggle) { border-radius: var(--dd-r-sm); }
html body.aesthetic-crm .ui-table td strong { font-weight: 600; }
html body.aesthetic-crm .ui-table td { line-height: 1.35; }
html body.aesthetic-crm .medical-topbar { margin-left: 0; margin-right: 0; }
html body.aesthetic-crm .ui-card { border-radius: var(--dd-r-lg); }
html body.aesthetic-crm .ui-card-head h3 { font-size: 13.5px; }
html body.aesthetic-crm .ui-card-head span { font-size: 12px; color: var(--dd-ink-3); }

html body.aesthetic-crm .settings-card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
html body.aesthetic-crm .settings-card-grid button { justify-content: start; align-content: start; }
html body.aesthetic-crm .settings-clean, html body.aesthetic-crm .settings-page { width: 100%; }
/* Leads table: legacy `.lead-row` (old card list) must not restyle table rows. */
html body.aesthetic-crm .ui-table tr.lead-row { display: table-row; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; grid-template-columns: none; }
html body.aesthetic-crm .ui-table tr.lead-row > td { display: table-cell; }
html body.aesthetic-crm .ui-table tr.lead-row:hover td { background: var(--dd-surface-2); }
html body.aesthetic-crm .fd-actions { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; white-space: nowrap; }
html body.aesthetic-crm .fd-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
html body.aesthetic-crm .lead-table td.actions { width: 1%; }
/* Reception queue cards: denser names */
html body.aesthetic-crm :is(.reception-queue-card, .rq-card) strong, html body.aesthetic-crm .reception-queue-row strong { font-size: 13.5px; }
html body.aesthetic-crm .reception-queue-card, html body.aesthetic-crm .rq-card { border-radius: var(--dd-r); box-shadow: none; }
html body.aesthetic-crm .frontdesk-patient-card { border: 1px solid var(--dd-line); border-radius: var(--dd-r); background: var(--dd-surface); box-shadow: none; padding: 10px 12px; gap: 12px; }
html body.aesthetic-crm .frontdesk-patient-card:hover { border-color: var(--dd-line-strong); }
html body.aesthetic-crm .frontdesk-identity strong, html body.aesthetic-crm .frontdesk-identity h3 { font-size: 14px; font-weight: 600; line-height: 1.3; }
html body.aesthetic-crm .frontdesk-identity small, html body.aesthetic-crm .frontdesk-clinical small { font-size: 11.5px; }
html body.aesthetic-crm .frontdesk-patient-card .queue-number { width: 32px; height: 32px; font-size: 12px; border-radius: var(--dd-r-sm); background: var(--dd-fill); color: var(--dd-ink-2); font-weight: 600; }
html body.aesthetic-crm .frontdesk-actions { gap: 6px; }
html body.aesthetic-crm .fd-chip { border-radius: var(--dd-r-xs); font-size: 11px; padding: 1px 6px; }

/* UX-7 Communication / Branding / settings icons */
.settings-card-grid button { position: relative; }
.settings-card-grid .settings-icon { display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:8px; background: var(--dd-accent-soft, rgba(0,122,255,.1)); color: var(--dd-accent, #007aff); margin-bottom:6px; }
.comm-section { border-top: 1px solid var(--dd-hairline, rgba(0,0,0,.08)); padding: 16px 0; }
.comm-section:first-child { border-top: 0; padding-top: 4px; }
.comm-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.comm-head h3 { margin:0 0 2px; font-size:15px; }
.comm-steps { margin:0 0 10px; padding-left:18px; color: var(--dd-text-2, #555); font-size:13px; line-height:1.55; }
.comm-form { max-width: 820px; }
.comm-events { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:10px; }
.comm-inline { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; margin-top:12px; }
.comm-inline label { min-width: 200px; }
.comm-master { font-weight:600; }
.comm-stats { margin-top:10px; font-size:12px; }
@media (max-width: 640px) { .comm-head { flex-direction:column; } .comm-inline label { min-width: 0; width:100%; } }
/* Shell: never stretch the toolbar on short pages; hide empty banner slots. */
.medical-main { align-content: start; }
.medical-main > div:empty { display: none; }

/* UX-8 public booking / kiosk (D15): mobile-first, no sidebar, same tokens. */
body.public-boot .boot-anon, body.public-boot .boot-app { display: none !important; }
body.public-page { background: var(--dd-bg, #f5f5f7); }
.pub-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 24px 16px 32px; box-sizing: border-box; }
.pub-card { width: 100%; max-width: 560px; background: var(--dd-surface, #fff); border: 1px solid var(--dd-hairline, rgba(0,0,0,.08)); border-radius: 14px; padding: 20px; box-sizing: border-box; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pub-card h1 { font-size: 18px; margin: 0; letter-spacing: -.01em; }
.pub-card h2 { font-size: 17px; margin: 14px 0 4px; letter-spacing: -.01em; }
.pub-head { display: flex; gap: 12px; align-items: center; }
.pub-head p { margin: 2px 0 0; font-size: 13px; }
.pub-mark { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--dd-accent, #0a84ff); color: #fff; font-weight: 700; font-size: 18px; flex: none; }
.pub-welcome { margin: 12px 0 0; font-size: 14px; }
.pub-steps { display: flex; gap: 4px; list-style: none; padding: 0; margin: 16px 0 4px; }
.pub-steps li { flex: 1; font-size: 11px; color: var(--dd-text-3, #86868b); border-top: 3px solid var(--dd-hairline, #e5e5ea); padding-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-steps li.done { border-color: var(--dd-accent, #0a84ff); }
.pub-steps li.current { border-color: var(--dd-accent, #0a84ff); color: var(--dd-text-1, #1d1d1f); font-weight: 600; }
.pub-back { background: none !important; border: 0 !important; color: var(--dd-accent, #0a84ff) !important; padding: 4px 0 !important; min-height: 0 !important; font-size: 13px; margin-top: 6px; }
.pub-list { display: grid; gap: 8px; margin-top: 10px; }
.pub-option { display: grid !important; grid-template-columns: 1fr auto; text-align: left; gap: 2px 12px; padding: 12px 14px !important; min-height: 56px !important; height: auto !important; border-radius: 10px !important; background: var(--dd-surface, #fff) !important; border: 1px solid var(--dd-hairline, rgba(0,0,0,.1)) !important; color: inherit !important; }
.pub-option:hover, .pub-option:focus-visible { border-color: var(--dd-accent, #0a84ff) !important; }
.pub-option strong { font-size: 15px; } .pub-option .muted { grid-column: 1; font-size: 13px; }
.pub-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; font-size: 14px; }
.pub-days { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 6px; scrollbar-width: none; }
.pub-days button { flex: none; width: 56px; display: grid !important; gap: 0; padding: 6px 0 !important; height: auto !important; min-height: 0 !important; border-radius: 10px !important; background: var(--dd-surface, #fff) !important; border: 1px solid var(--dd-hairline, rgba(0,0,0,.1)) !important; color: inherit !important; }
.pub-days button small { font-size: 11px; color: var(--dd-text-3, #86868b); }
.pub-days button strong { font-size: 17px; }
.pub-days button.active { background: var(--dd-accent, #0a84ff) !important; border-color: var(--dd-accent, #0a84ff) !important; color: #fff !important; }
.pub-days button.active small { color: rgba(255,255,255,.85); }
.pub-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
.pub-slot-grid button { height: 40px !important; border-radius: 10px !important; background: var(--dd-surface, #fff) !important; border: 1px solid var(--dd-hairline, rgba(0,0,0,.12)) !important; color: var(--dd-accent, #0a84ff) !important; font-weight: 600; }
.pub-slot-grid button:hover { background: var(--dd-accent-soft, rgba(10,132,255,.08)) !important; }
.pub-form { display: grid; gap: 12px; margin-top: 12px; }
.pub-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 500; }
.pub-form input, .pub-form textarea { height: 44px; font-size: 16px; } .pub-form textarea { height: auto; }
.pub-check { display: flex !important; gap: 8px; align-items: flex-start; font-weight: 400 !important; }
.pub-check input { height: auto !important; margin-top: 2px; }
.pub-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.pub-primary { height: 46px !important; font-size: 16px !important; border-radius: 12px !important; width: 100%; }
.pub-secondary { margin-top: 12px; border-radius: 10px !important; }
.pub-error { color: var(--dd-danger, #d70015); font-size: 13px; margin: 0; }
.pub-center { text-align: center; }
.pub-tick { width: 56px; height: 56px; border-radius: 50%; background: var(--dd-success, #34c759); color: #fff; display: grid; place-items: center; font-size: 28px; margin: 8px auto 4px; }
.pub-when { font-size: 17px; font-weight: 600; }
.pub-none { padding: 12px 0; }
.pub-foot { margin-top: 18px; font-size: 12px; color: var(--dd-text-3, #86868b); }
.pub-kiosk .pub-form input { height: 56px; font-size: 22px; letter-spacing: .04em; }
@media (min-width: 768px) { .pub-wrap { padding-top: 48px; } .pub-card { padding: 28px; } }
/* Settings → Online Booking */
.ob-link { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; align-items: center; }
.ob-link input { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ob-link .button-like { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--dd-hairline, rgba(0,0,0,.12)); text-decoration: none; color: inherit; font-size: 13px; }
.ob-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 12px; }
.pub-head > div { flex: 1; min-width: 0; text-align: left; }
.pub-head h1 { text-align: left; overflow-wrap: anywhere; }
.pub-slot-grid button { font-size: 14px !important; white-space: nowrap; padding: 0 6px !important; }
.comm-form .form-grid.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.comm-form .form-grid.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ob-link a.button-like { border: 1px solid var(--dd-hairline, rgba(0,0,0,.12)) !important; background: var(--dd-surface, #fff); color: var(--dd-text-1, #1d1d1f) !important; font-weight: 500; }
.ui-table .link-soft { padding: 0 !important; min-height: 0 !important; height: auto !important; text-align: left; background: none !important; border: 0 !important; color: var(--dd-accent, #0a84ff) !important; font-weight: 500; }
.dictation-bar { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 4px; float: right; }
.dictation-lang { height: 26px !important; min-height: 0 !important; font-size: 12px !important; padding: 0 6px !important; width: auto !important; }
.dictation-mic { height: 26px !important; min-height: 0 !important; width: 30px; padding: 0 !important; border-radius: 13px !important; font-size: 13px; }
.dictation-mic.listening { background: var(--dd-danger, #ff3b30) !important; color: #fff !important; border-color: transparent !important; animation: dd-pulse 1.2s ease-in-out infinite; }
@keyframes dd-pulse { 50% { box-shadow: 0 0 0 4px rgba(255,59,48,.2); } }
@media (prefers-reduced-motion: reduce) { .dictation-mic.listening { animation: none; } }
/* UX-10: login centred at phone widths (card padding was added outside its width). */
.login-wrap, .login-wrap *, .login-card { box-sizing: border-box; }
.login-wrap { margin-left: auto !important; margin-right: auto !important; width: min(100%, 400px) !important; }
@media (max-width: 480px) { body.login .login-page, .boot-shell { padding-left: 16px !important; padding-right: 16px !important; } .login-card { padding: 24px 20px 20px !important; } }
.login-brand { width: 100% !important; justify-items: center !important; text-align: center !important; align-self: stretch !important; }
.login-brand { grid-template-columns: minmax(0, 1fr) !important; } .login-brand > * { justify-self: center !important; }
@media (max-width: 640px) { .cards article, .cards .ui-stat { min-height: 0 !important; } }
/* Side drawers (Add Staff wizard, lead drawer) must sit above the sticky top bar. */
html body .drawer-backdrop { z-index: 900 !important; }
html body .lead-drawer, html body .wizard-drawer { z-index: 910 !important; }