/* vista-design/components.css : flat, composable, token-driven.
   Token names are canonical = --primary* (matches tokens.css). Type scale --fs-*/--lh-* is defined there too.
   Loads after Bootstrap so the flat classes below win on equal specificity. */

/* ---- base ---- */
body { background: var(--bg); color: var(--text); font: 400 var(--fs-base)/var(--lh-body) var(--font-body); }
/* Fluid container: replaces the BS3 9-step !important width ladder at cutover. Lives here so it loads
   after Bootstrap's own .container and wins on equal specificity. */
.container { width:100%; max-width: var(--container-max); margin-inline:auto; padding-inline: var(--space-4); }
:where(a):focus-visible, :where(button, [role=button], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm);
}
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }   /* ledger figures */
h1,.h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); line-height: var(--lh-tight); }
.section-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); }

/* ---- Btn ---- */
.btn { display:inline-flex; gap:var(--space-2); align-items:center; justify-content:center;
  font:500 var(--fs-sm)/1 var(--font-body);
  padding:8px 16px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer;
  transition: background var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); }
.btn:active { transform: translateY(1px) scale(.99); }            /* the press */
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn--primary { background:var(--primary); color:var(--surface); }   /* max ONE per view */
.btn--primary:hover { background:var(--primary-strong); }
.btn--ghost { background:transparent; border-color:var(--border); color:var(--text); }
.btn--ghost:hover { background:var(--surface-2); }
.btn--danger { background:var(--danger); color:var(--surface); }
.btn--sm { padding:6px 12px; font-size:var(--fs-xs); }
.btn--icon { padding:0; width:32px; height:32px; justify-content:center; }

/* ---- FormField ---- */
.field { display:grid; gap:var(--space-1); margin-bottom:var(--space-3); }
.field > label { font-size:var(--fs-sm); color:var(--text); }
.field .req { color:var(--primary); }                                /* required asterisk, from model rules */
.field input, .field select, .field textarea { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:8px 12px; font:var(--fs-base)/1.4 var(--font-body); color:var(--text);
  transition: border-color var(--motion-fast) var(--ease); }
.field input.num, .field .num input { font-family:var(--font-mono); }
.field .help { min-height:1.1em; font-size:var(--fs-xs); color:var(--text-muted); }   /* reserved space: no layout shift */
.field.is-error input, .field.is-error select { border-color:var(--danger); }
.field.is-error .help { color:var(--danger); }

/* ---- CrmGrid: the borderless warm ledger ---- */
.crm-grid { width:100%; }
.crm-grid table { width:100%; border-collapse:collapse; }
.crm-grid thead th { position:sticky; top:0; background:var(--surface-2); text-align:left;
  font:600 var(--fs-xs)/1 var(--font-body); color:var(--text-muted); padding:var(--row-pad-y) var(--row-pad-x);
  border-bottom:1px solid var(--border); }
.crm-grid tbody td { padding:var(--row-pad-y) var(--row-pad-x); font-size:var(--fs-base); border:0; }
.crm-grid tbody tr { background:var(--surface); }
.crm-grid tbody tr:nth-child(even) { background:var(--surface-2); }   /* barely-there warm zebra */
.crm-grid tbody tr:hover { background:var(--surface-2); }  /* FIX: was --surface (a no-op on odd rows) */
.crm-grid tbody tr:focus-within { box-shadow: inset 3px 0 0 var(--primary); }  /* keyboard row marker */
.crm-grid tbody tr[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--primary); }
.crm-grid td.amount { text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
/* visible at rest (hover-only affordances fail keyboard/touch discovery) */
.crm-grid .row-actions { opacity:.5; transition: opacity var(--motion-fast) var(--ease); }
.crm-grid tr:hover .row-actions, .crm-grid tr:focus-within .row-actions { opacity:1; }
@keyframes row-flash { from { background: var(--primary-tint); } to { background: inherit; } }
.row-flash { animation: row-flash var(--motion-slow) var(--ease); }  /* single fade, no repeat */
.crm-grid--compact tbody td { padding:6px 10px; font-size:var(--fs-xs); }

/* ---- StatusPill + CountChip (dot+text, never colour-only) ---- */
.pill { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:var(--radius-pill);
  font:500 var(--fs-xs)/1.3 var(--font-body); white-space:nowrap; }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill--success { color:var(--success-text); background:var(--success-surface); }
.pill--warning { color:var(--warning-text); background:var(--warning-surface); }
.pill--danger  { color:var(--danger-text);  background:var(--danger-surface); }
.pill--info    { color:var(--info-text);    background:var(--info-surface); }
.pill--muted   { color:var(--text-muted); background:var(--surface-2); }
.count-chip { display:inline-flex; gap:6px; align-items:center; padding:2px 8px; border-radius:var(--radius-pill);
  background:var(--surface-2); color:var(--text); font-family:var(--font-mono); font-size:var(--fs-xs); }
.count-chip[data-actionable="true"]::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--primary); }

/* ---- SectionPanel (flat, no nested cards) ---- */
.section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--space-4); margin-bottom:var(--space-5); }
.section--flat { border:0; border-bottom:1px solid var(--border); border-radius:0; padding-block:var(--space-4); }
.section__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-3); }

/* ---- Toast ---- */
.toast-stack { position:fixed; right:var(--space-5); bottom:var(--space-5); display:grid; gap:var(--space-2); z-index:1090; }  /* above bs5 modal (1055) so failure toasts stay visible */
.toast { display:flex; gap:var(--space-2); align-items:flex-start; min-width:240px; max-width:360px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--elev-2);
  padding:var(--space-3); }
.toast__icon { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:var(--radius-pill); flex:0 0 auto; background:var(--info-surface); color:var(--info); }
.toast__icon svg { width:15px; height:15px; }
.toast--success .toast__icon { background:var(--success-surface); color:var(--success); }
.toast--error   .toast__icon { background:var(--danger-surface); color:var(--danger); }
.toast__title { font:600 var(--fs-sm)/1.2 var(--font-display); }
.toast__id { font-family:var(--font-mono); }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.toast { animation: toast-in var(--motion-base) var(--ease); }

/* ---- Modal + ConfirmDialog ---- */
.modal__backdrop { position:fixed; inset:0; background:var(--scrim); z-index:1070;  /* above bs5 modal+backdrop */
  animation: fade-in var(--motion-fast) var(--ease); }
.modal__panel { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1071;
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--elev-3);
  width:min(92vw, 480px); padding:var(--space-5); animation: modal-in var(--motion-base) var(--ease); }
.modal__title { font:600 var(--fs-lg)/1.2 var(--font-display); margin-bottom:var(--space-3); }
.modal__foot { display:flex; gap:var(--space-2); justify-content:flex-end; margin-top:var(--space-5); }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes modal-in { from { opacity:0; transform:translate(-50%,-50%) scale(.98); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }

/* ---- EmptyState ---- */
.empty { text-align:center; padding:var(--space-10) var(--space-5); color:var(--text-muted); }
.empty__title { font-family:var(--font-display); color:var(--text); margin-bottom:var(--space-2); }

/* ---- LoadingSkeleton + top progress bar ---- */
.skeleton { background:linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2));
  background-size:200% 100%; animation: shimmer 1.2s linear infinite; border-radius:var(--radius-sm); height:1em; }
@keyframes shimmer { to { background-position:-200% 0; } }
.progress-bar { position:fixed; top:0; left:0; height:2px; width:100%; background:var(--primary); z-index:1095;  /* above the navbar (1030), or it never shows */
  transform-origin:left; transform:scaleX(var(--progress, 0));
  transition: transform var(--motion-base) var(--ease); }
.htmx-indicator { opacity:0; } .htmx-request .htmx-indicator { opacity:1; }
/* Dim the region being swapped (never a white wipe). Mark the region `.dimmable` and point the
   trigger at it with hx-indicator="#region-id", so htmx adds .htmx-request to the region itself. */
.dimmable.htmx-request { opacity:.6; transition: opacity var(--motion-fast) var(--ease); }

/* ---- PageHeader ---- */
[x-cloak] { display: none !important; }
.page-head { display:flex; align-items:center; gap:var(--space-3); margin:var(--space-4) 0; }
.page-head h1 { margin:0; font-size:var(--fs-xl); }
.page-head__actions { margin-left:auto; display:flex; gap:var(--space-2); }
.page-head__actions .form-select { max-width:260px; }
.page-head .btn svg, .page-head .btn i { width:16px; height:16px; }

/* ---- FilterBar ---- */
.filter-bar { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4); box-shadow:var(--elev-1); }
.filter-bar__row { display:flex; gap:var(--space-2); align-items:flex-start; flex-wrap:wrap; }
.filter-bar__quick { flex:1; min-width:220px; max-width:420px; }
.filter-bar__quick .form-group, .filter-bar__quick .mb-3 { margin:0; }
.filter-bar__row .btn { padding-top:7px; padding-bottom:7px; }
.filter-bar__row .btn svg { width:15px; height:15px; }
.filter-bar__chips { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); }
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--radius-pill);
  background:var(--primary-tint); color:var(--teal-800); font-size:var(--fs-xs); border:1px solid var(--teal-200); }
.chip__label { color:var(--teal-700); font-weight:600; }
.chip a { color:inherit; display:inline-flex; border-radius:50%; }
.chip a:hover { color:var(--danger); }
.chip svg { width:12px; height:12px; }
.filter-bar__panel { margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--border); }
.filter-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-2) var(--space-4); }
@media (max-width: 992px) { .filter-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 700px) { .filter-grid { grid-template-columns:1fr; } }
.filter-grid .form-group, .filter-grid .mb-3 { margin-bottom:var(--space-2); }
.filter-grid label { font-size:var(--fs-xs); font-weight:500; color:var(--text-muted); margin-bottom:2px; }
/* select2 measures its width while the panel is display:none and falls back to a
   ~60px stub; the grid cell is the real constraint, so pin it there */
.filter-grid .select2-container { width:100% !important; }
.filter-bar__quick .select2-container { width:100% !important; }
.customer-index--my-leads .filter-bar__row .btn { min-height:36px; }
.customer-index--my-leads .filter-bar__row .btn-outline-primary {
  color:var(--primary-strong);
  background:var(--primary-tint);
  border-color:var(--teal-200);
  font-weight:600;
}
.customer-index--my-leads .filter-bar__row .btn-outline-primary:hover,
.customer-index--my-leads .filter-bar__row .btn-outline-primary:focus-visible {
  color:var(--primary-strong);
  background:var(--teal-100);
  border-color:var(--primary);
}

/* ---- ledger cell helpers ---- */
.pill--primary { color:var(--primary); background:var(--primary-tint); }
.pill-stack { display:grid; gap:4px; justify-items:start; }
.pill-row { display:flex; align-items:center; gap:6px; }
.pill-key { font:600 10px/1 var(--font-mono); color:var(--text-muted); min-width:24px; letter-spacing:.04em; }
.cell-sub { font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; }
.cell-empty { color:var(--text-muted); }
.cell-nowrap { white-space:nowrap; }
.cell-name { min-width:180px; }
.crm-ledger { font-size:var(--fs-base); }
.kv-grid-container { overflow-x:auto; }  /* wide ledgers scroll here, never the page body */
/* resizableColumns paints absolute drag handles positioned for the unscrolled table;
   with the ledger scrolling inside its container they desync and one strays past the
   viewport, so the leads ledger drops them (its columns are fixed by design) */
.customer-index .rc-handle-container, .customer-index .rc-handle { display:none !important; }
.crm-ledger .fu-cell { white-space:nowrap; }
.lead-name { font-weight:600; }
.icon-link { color:var(--text-muted); display:inline-flex; vertical-align:middle; padding:2px; }
.icon-link:hover { color:var(--primary); }
.icon-link svg { width:16px; height:16px; }
.btn-icon-ghost { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border:0; background:none; border-radius:var(--radius-sm); color:var(--text-muted); cursor:pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
.btn-icon-ghost:hover { background:var(--surface-2); color:var(--text); }
.btn-icon-ghost--primary { color:var(--primary); }
.btn-icon-ghost--primary:hover { background:var(--primary-tint); color:var(--primary-strong); }
.btn-icon-ghost svg { width:16px; height:16px; }
.cell-actions { text-align:center; }
.cell-clip { max-width:200px; }
.cell-clip span, .cell-clip { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
td.cell-clip { display:table-cell; }
.cell-remarks { min-width:220px; max-width:360px; white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-3); }
.modal-title__context { color:var(--text-muted); font-weight:400; font-size:var(--fs-base); }
.carried-banner { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3);
  padding:var(--space-2) var(--space-3); background:var(--primary-tint); border:1px solid var(--teal-200);
  border-radius:var(--radius-sm); font-size:var(--fs-xs); color:var(--teal-800); }
.carried-banner svg { width:14px; height:14px; }
.carried-banner button { margin-left:auto; border:0; background:none; color:var(--teal-700);
  font:600 var(--fs-xs)/1 var(--font-body); cursor:pointer; text-decoration:underline; }
/* Frozen action columns: the row's actions stay reachable while the wide ledger
   scrolls horizontally. Paint through the border box so scrolled text cannot
   peek through a subpixel seam between the two sticky cells. */
.cell-sticky-right { position:sticky; right:0; z-index:2; isolation:isolate; background-color:var(--surface); background-clip:border-box; border-left:1px solid var(--border) !important; }
/* first frozen column carries a soft left shadow so the columns sliding under it
   read as occluded, not missing; the one-pixel right seal closes fractional
   rendering gaps while preserving Bootstrap's striped-row inset. */
.crm-ledger .cell-sticky-right--2 { right:64px; border-left-width:0 !important;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg, transparent), 1px 0 0 var(--border), -10px 0 10px -8px rgba(23,37,42,.18); }
th.cell-sticky-right { background-color:var(--surface-2); z-index:3; }
.cell-history {
  width:64px !important;
  min-width:64px !important;
  max-width:64px !important;
  padding:0 !important;
  box-sizing:border-box;
  text-align:center;
}
.event-history-action { width:112px; min-width:112px; white-space:nowrap; }
.event-history-confirm { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-1); }
.event-history-confirm svg { width:14px; height:14px; }

/* ---- shared ledger action keys ---- */
.crm-ledger .cell-actions,
.crm-ledger td.cell-history {
  vertical-align:middle;
  overflow:visible;
}
/* Treat the frozen controls as one opaque rail. Keeping its body cells on the
   base surface prevents moving ledger text and zebra accents from showing
   through the join while the table scrolls underneath. */
.crm-ledger tbody .cell-sticky-right {
  background-color:var(--surface) !important;
}
.crm-ledger tbody .cell-sticky-right--2 {
  box-shadow:inset 0 0 0 9999px var(--surface), 1px 0 0 var(--border), -10px 0 10px -8px rgba(23,37,42,.18);
}
.crm-ledger tbody td.cell-history {
  box-shadow:inset 0 0 0 9999px var(--surface);
}
/* Kartik dims the entire expand cell while detailUrl loads. The spinner already
   communicates progress; keep the frozen rail opaque so scrolled lead data never
   shows through the History control. */
.crm-ledger tbody td.cell-history.kv-expand-detail-loading {
  opacity:1 !important;
}
.crm-ledger tbody td.lead-timeline-unavailable {
  cursor:default;
}
.crm-ledger th.cell-history {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:clip;
}
.crm-ledger .kv-expand-icon-cell:hover,
.crm-ledger .kv-expand-icon-cell:focus {
  color:inherit;
  background-color:var(--surface) !important;
}
.crm-ledger td.cell-history:focus {
  outline:0;
}
.crm-ledger .cell-actions .btn-icon-ghost,
.crm-ledger .cell-history .kv-expand-icon {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
  padding:0;
  box-sizing:border-box;
  overflow:visible;
  color:var(--text-muted);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 2px 0 var(--surface-3),
    0 5px 10px rgba(23,37,42,.10);
  transform:translateY(0);
  transition:
    transform 80ms var(--ease),
    background var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease);
}
.crm-ledger .cell-actions .btn-icon-ghost:hover,
.crm-ledger .cell-history:hover .kv-expand-icon {
  color:var(--primary);
  background:linear-gradient(180deg,var(--surface),var(--primary-tint));
  border-color:var(--teal-300);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 3px 0 var(--teal-200),
    0 7px 14px rgba(23,37,42,.13);
  text-decoration:none;
  transform:translateY(-1px);
}
.crm-ledger .cell-actions .btn-icon-ghost:focus-visible,
.crm-ledger .cell-history:focus-visible .kv-expand-icon {
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.crm-ledger .cell-actions .btn-icon-ghost:active,
.crm-ledger .cell-history:active .kv-expand-icon {
  color:var(--teal-800);
  background:var(--teal-100);
  border-color:var(--teal-300);
  box-shadow:
    inset 0 2px 3px rgba(23,37,42,.18),
    0 1px 0 var(--teal-300);
  transform:translateY(2px) scale(.98);
}
.crm-ledger .cell-history .kv-expand-icon.kv-state-expanded {
  color:var(--primary);
  background:linear-gradient(180deg,var(--primary-tint),var(--teal-100));
  border-color:var(--teal-300);
}
.crm-ledger .cell-actions .btn-icon-ghost svg,
.crm-ledger .cell-actions .btn-icon-ghost i,
.crm-ledger .cell-history .kv-expand-icon svg,
.crm-ledger .cell-history .kv-expand-icon i {
  display:block;
  width:17px;
  height:17px;
  flex:0 0 auto;
  margin:0;
  overflow:visible;
  line-height:1;
  pointer-events:none;
  stroke-width:2.2;
}
.customer-index--my-leads .crm-ledger .cell-actions {
  min-width:124px;
}
.lead-event-confirmation__trigger {
  color:var(--primary) !important;
  border-color:var(--teal-200) !important;
  background:linear-gradient(180deg,var(--surface),var(--primary-tint)) !important;
}
.lead-event-confirmation__badge {
  position:absolute;
  top:-6px;
  right:-6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border:2px solid var(--surface);
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  font:700 10px/1 var(--font-body);
  box-shadow:0 2px 5px rgba(23,37,42,.18);
}

/* ---- My Leads event confirmation chooser ---- */
.lead-event-confirmation .modal-dialog {
  width:min(620px,calc(100vw - 32px));
  max-width:620px;
}
.lead-event-confirmation .modal-header {
  align-items:flex-start;
}
.lead-event-confirmation__eyebrow {
  margin:0 0 3px;
  color:var(--primary);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.2;
  text-transform:uppercase;
}
.lead-event-confirmation__intro {
  margin:0 0 var(--space-4);
  color:var(--text-muted);
  line-height:1.5;
}
.lead-event-confirmation__list {
  display:grid;
  gap:var(--space-3);
}
.lead-event-confirmation__event {
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  box-shadow:0 4px 14px rgba(23,37,42,.06);
}
.lead-event-confirmation__event-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:var(--radius-sm);
  background:var(--primary-tint);
  color:var(--primary);
}
.lead-event-confirmation__event-icon svg {
  width:19px;
  height:19px;
}
.lead-event-confirmation__event-copy {
  min-width:0;
}
.lead-event-confirmation__event-copy h4 {
  margin:0 0 var(--space-1);
  color:var(--text);
  font:650 var(--fs-base)/1.3 var(--font-body);
}
.lead-event-confirmation__event-copy p {
  display:flex;
  flex-wrap:wrap;
  gap:4px var(--space-3);
  margin:0;
  color:var(--text-muted);
  font-size:var(--fs-xs);
}
.lead-event-confirmation__event-copy p span {
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.lead-event-confirmation__event-copy p svg {
  width:13px;
  height:13px;
  flex:0 0 auto;
}
.lead-event-confirmation__confirm {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-1);
  min-width:104px;
}
.lead-event-confirmation__confirm svg {
  width:15px;
  height:15px;
}
.lead-event-confirmation__pending {
  margin-right:auto;
  color:var(--text-muted);
}
.lead-event-confirmation__success {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-height:48px;
  padding:var(--space-3);
  border:1px solid var(--teal-200);
  border-radius:var(--radius-md);
  background:var(--primary-tint);
  color:var(--teal-800);
  font-weight:600;
}
.lead-event-confirmation__success svg {
  width:18px;
  height:18px;
  flex:0 0 auto;
}
.lead-event-confirmation__success--complete {
  min-height:72px;
  justify-content:center;
}

/* ---- unified lead timeline ---- */
.lead-timeline-panel {
  min-height:132px;
  overflow:hidden;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.lead-timeline-panel.htmx-request {
  opacity:1 !important;
  background:var(--surface) !important;
}
.lead-timeline-panel > .lead-timeline {
  border:0;
}
.lead-timeline-panel__loader {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  min-height:130px;
  margin:0;
  padding:var(--space-5);
  background:var(--surface);
}
.lead-timeline-panel__intro {
  display:grid;
  gap:var(--space-1);
  min-width:0;
  margin-right:auto;
}
.lead-timeline-panel__intro strong {
  color:var(--text);
  font:600 var(--fs-lg)/1.3 var(--font-display);
}
.lead-timeline-panel__intro span,
.lead-timeline-panel__spinner {
  color:var(--text-muted);
  font-size:var(--fs-sm);
}
.lead-timeline-panel__load {
  min-height:36px;
  flex:0 0 auto;
}
.lead-timeline-panel__spinner {
  flex:0 0 auto;
}
.lead-timeline-panel.htmx-request .lead-timeline-panel__load {
  display:none;
}
.lead-timeline-modal__table {
  margin-bottom:0;
  table-layout:fixed;
}
.lead-timeline-modal__table thead {
  display:none;
}
.lead-timeline-modal__table .lead-timeline-modal__cell {
  padding:0 !important;
  border:0 !important;
  text-align:left !important;
  white-space:normal;
}
.lead-timeline-modal__cell .lead-timeline-panel,
.lead-timeline-modal__cell .lead-timeline {
  width:100%;
  max-width:none;
}
.lead-timeline-row {
  --bs-table-bg:var(--surface);
  --bs-table-accent-bg:transparent;
  --bs-table-striped-bg:var(--surface);
  --bs-table-hover-bg:var(--surface);
  background:var(--surface) !important;
}
.lead-timeline-row > td {
  padding:0 !important;
  background:var(--surface) !important;
  box-shadow:none !important;
}
.lead-timeline {
  padding:var(--space-4) var(--space-5) !important;
  color:var(--text);
  background:var(--surface) !important;
  border-block:1px solid var(--border);
}
.lead-timeline__header {
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--border);
}
.lead-timeline__header h2 {
  margin:0;
  color:var(--text);
  font:600 var(--fs-lg)/1.3 var(--font-display);
}
.lead-timeline__header p {
  margin:var(--space-1) 0 0;
  color:var(--text-muted);
  font-size:var(--fs-sm);
}
.lead-timeline__filters {
  margin-top:var(--space-2);
}
.lead-timeline__filter-group {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.lead-timeline__filter {
  min-height:36px;
  padding:var(--space-1) var(--space-3);
  color:var(--text-muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  font:600 var(--fs-xs)/1.2 var(--font-body);
  cursor:pointer;
  transition:background-color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease),
    transform var(--motion-fast) var(--ease);
}
.lead-timeline__filter:hover,
.lead-timeline__filter:focus-visible {
  color:var(--primary);
  border-color:var(--primary);
  background:var(--primary-tint);
}
.lead-timeline__filter:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.lead-timeline__filter:active {
  transform:translateY(1px);
}
.lead-timeline__filter--active {
  color:var(--primary);
  border-color:var(--primary);
  background:var(--primary-tint);
}
.lead-timeline__filter-loading {
  display:inline-block;
  margin-top:var(--space-2);
  color:var(--text-muted);
  font-size:var(--fs-xs);
}
.lead-timeline__status {
  margin-top:var(--space-2);
  color:var(--text-muted);
  font-size:var(--fs-xs);
}
.lead-timeline__alert { margin:var(--space-4) 0 0; }
.lead-timeline__list {
  margin:0;
  padding:0;
  list-style:none;
}
.lead-timeline__date-band {
  display:grid;
  grid-template-columns:96px 24px minmax(0, 1fr);
  min-width:0;
}
.lead-timeline__date-heading {
  grid-column:3;
  margin:var(--space-4) 0 var(--space-1);
  color:var(--text);
  font:600 var(--fs-sm)/1.3 var(--font-body);
}
.lead-timeline__item {
  display:grid;
  grid-template-columns:96px 24px minmax(0, 1fr);
  min-width:0;
}
.lead-timeline__time {
  padding:var(--space-4) var(--space-2) 0 0;
  color:var(--text-muted);
  font:500 var(--fs-xs)/1.4 var(--font-mono);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.lead-timeline__time time,
.lead-timeline__date,
.lead-timeline__clock { display:block; }
.lead-timeline__clock { margin-top:2px; }
.lead-timeline__rail { position:relative; min-height:100%; }
.lead-timeline__rail::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:var(--border);
  transform:translateX(-50%);
}
.lead-timeline__item:first-child .lead-timeline__rail::before { top:22px; }
.lead-timeline__item:last-child .lead-timeline__rail::before { bottom:calc(100% - 22px); }
.lead-timeline__item:only-child .lead-timeline__rail::before { display:none; }
.lead-timeline__marker {
  position:absolute;
  top:18px;
  left:50%;
  z-index:1;
  width:9px;
  height:9px;
  border-radius:var(--radius-pill);
  background:var(--primary);
  box-shadow:0 0 0 4px var(--surface);
  transform:translateX(-50%);
}
.lead-timeline__item--routine .lead-timeline__marker {
  background:var(--surface-3);
  border:1px solid var(--text-muted);
}
.lead-timeline__item--supporting .lead-timeline__marker {
  width:7px;
  height:7px;
  background:var(--surface-3);
  border:1px solid var(--border);
}
.lead-timeline__item--milestone .lead-timeline__marker {
  width:11px;
  height:11px;
  background:var(--primary);
}
.lead-timeline__item--system .lead-timeline__marker {
  background:var(--text-muted);
}
.lead-timeline__item--danger .lead-timeline__marker {
  background:var(--danger);
}
.lead-timeline__body {
  min-width:0;
  padding:var(--space-3) 0 var(--space-4) var(--space-3);
  border-bottom:1px solid var(--border);
}
.lead-timeline__item:last-child .lead-timeline__body { border-bottom:0; }
.lead-timeline__context {
  margin-bottom:var(--space-1);
  color:var(--text-muted);
  font-weight:600;
}
.lead-timeline .lead-timeline__label {
  margin:0;
  color:var(--text);
  font:600 var(--fs-base)/1.35 var(--font-body);
}
.lead-timeline__item--milestone .lead-timeline__label {
  font-weight:700;
}
.lead-timeline__item--supporting .lead-timeline__label,
.lead-timeline__item--system .lead-timeline__label {
  color:var(--text-muted);
}
.lead-timeline__item--danger .lead-timeline__label {
  color:var(--danger-text);
}
.lead-timeline__summary {
  max-width:75ch;
  margin:var(--space-1) 0 0;
  color:var(--text);
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  overflow-wrap:anywhere;
}
.lead-timeline__meta {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-1);
  margin-top:var(--space-2);
  color:var(--text-muted);
  font-size:var(--fs-xs);
}
.lead-timeline__meta-label {
  color:var(--text);
  font-weight:600;
}
.lead-timeline__booth-rollup {
  max-width:760px;
  margin-top:var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-2);
  overflow:hidden;
}
.lead-timeline__booth-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--border);
}
.lead-timeline__booth-header h4 {
  margin:0;
  color:var(--text);
  font:600 var(--fs-sm)/1.35 var(--font-body);
}
.lead-timeline__booth-header span {
  color:var(--text-muted);
  font-size:var(--fs-xs);
  white-space:nowrap;
}
.lead-timeline__booth-list {
  margin:0;
  padding:0;
  list-style:none;
}
.lead-timeline__booth-unavailable {
  margin:0;
  padding:var(--space-3);
  color:var(--text-muted);
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
}
.lead-timeline__booth-item {
  display:grid;
  gap:var(--space-1);
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--border);
}
.lead-timeline__booth-item:last-child { border-bottom:0; }
.lead-timeline__booth-title {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--space-1);
  min-width:0;
  color:var(--text-muted);
  font-size:var(--fs-xs);
}
.lead-timeline__booth-title time {
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.lead-timeline__booth-title strong {
  min-width:0;
  color:var(--text);
  font-weight:600;
  overflow-wrap:anywhere;
}
.lead-timeline__booth-detail {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2);
  min-width:0;
}
.lead-timeline__booth-potential {
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:2px var(--space-2);
  border-radius:var(--radius-pill);
  background:var(--surface-3);
  color:var(--text-muted);
  font-size:var(--fs-xs);
  font-weight:600;
  line-height:1.25;
  white-space:nowrap;
}
.lead-timeline__booth-potential--high-potential {
  color:var(--success-text);
  background:var(--success-surface);
}
.lead-timeline__booth-potential--potential {
  color:var(--primary-strong);
  background:var(--primary-tint);
}
.lead-timeline__booth-potential--future-potential {
  color:var(--info-text);
  background:var(--info-surface);
}
.lead-timeline__booth-potential--not-potential {
  color:var(--danger-text);
  background:var(--danger-surface);
}
.lead-timeline__booth-potential--budget {
  color:var(--warning-text);
  background:var(--warning-surface);
}
.lead-timeline__booth-remark {
  min-width:0;
  color:var(--text);
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  overflow-wrap:anywhere;
}
.lead-timeline__action {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2);
  margin-top:var(--space-3);
}
.lead-timeline__action-hint,
.lead-timeline__end,
.lead-timeline__loading {
  color:var(--text-muted);
  font-size:var(--fs-xs);
}
.lead-timeline__confirm { min-height:36px; }
.lead-timeline__details { margin-top:var(--space-2); }
.lead-timeline__details > summary {
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  min-height:32px;
  color:var(--primary);
  font-size:var(--fs-xs);
  font-weight:600;
  list-style:none;
  cursor:pointer;
}
.lead-timeline__details > summary::-webkit-details-marker { display:none; }
.lead-timeline__details > summary::before {
  content:"";
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(-45deg);
  transition:transform var(--motion-fast) var(--ease);
}
.lead-timeline__details[open] > summary::before { transform:rotate(45deg); }
.lead-timeline__details > summary:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
.lead-timeline__details[open] > summary { margin-bottom:var(--space-2); }
.lead-timeline__details-list {
  max-width:760px;
  margin:0;
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-2);
}
.lead-timeline__detail-row {
  display:grid;
  grid-template-columns:minmax(128px, .35fr) minmax(0, 1fr);
  gap:var(--space-3);
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--border);
  font-size:var(--fs-xs);
}
.lead-timeline__detail-row:last-child { border-bottom:0; }
.lead-timeline__detail-row dt {
  color:var(--text-muted);
  font-weight:500;
}
.lead-timeline__detail-row dd {
  min-width:0;
  margin:0;
  color:var(--text);
  overflow-wrap:anywhere;
}
.lead-timeline__detail-row code {
  display:inline-block;
  padding:2px 6px;
  color:var(--text);
  background:var(--surface-3);
  border-radius:var(--radius-sm);
  font:500 var(--fs-xs)/1.4 var(--font-mono);
}
.lead-timeline__sources {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-1);
}
.lead-timeline__controls {
  margin-top:0 !important;
  padding-top:var(--space-4) !important;
  border-top:1px solid var(--border);
  text-align:center;
}
.lead-timeline__load-form {
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
}
.lead-timeline__load-button { min-height:36px; }
.lead-timeline__loading--drawer { padding:var(--space-5) var(--space-6); }
.lead-timeline__empty {
  display:grid;
  gap:var(--space-1);
  margin:var(--space-4) 0;
  padding:var(--space-4);
  color:var(--text-muted);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:var(--fs-sm);
}
.lead-timeline__empty strong { color:var(--text); }
.lead-timeline__empty-action {
  justify-self:start;
  margin-top:var(--space-2);
}
.lead-timeline__search-state {
  margin:var(--space-3) 0 0 120px;
  padding:var(--space-3);
  color:var(--text-muted);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:var(--fs-xs);
}
body.density-compact .lead-timeline { padding-block:var(--space-4) !important; }
body.density-compact .lead-timeline__body { padding-block:var(--space-3) var(--space-4); }
body.density-compact .lead-timeline__time { padding-top:var(--space-3); }
body.density-compact .lead-timeline__marker { top:14px; }
body.density-compact .lead-timeline__date-heading { margin-top:var(--space-4); }
/* Detail rows inherit the ledger's full scroll width. Pin the timeline to the
   visible grid viewport at every breakpoint so horizontal panning never moves
   its heading, filters, or activity copy off-screen. */
.kv-grid-container .lead-timeline,
.kv-grid-container .lead-timeline__loading--drawer {
  position:sticky;
  left:0;
  box-sizing:border-box;
  width:calc(100vw - var(--space-6));
}
/* the ledger can scroll horizontally: keep the scrollbar visible as the affordance */
.kv-grid-container::-webkit-scrollbar { height:8px; }
.kv-grid-container::-webkit-scrollbar-track { background:var(--surface-2); border-radius:4px; }
.kv-grid-container::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:4px; border:1px solid var(--border); }
.kv-grid-container::-webkit-scrollbar-thumb:hover { background:var(--border); }

/* ---- StatCard (dashboards) ---- */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--space-3); }
.stat-grid--four-up { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--space-4); box-shadow:var(--elev-1); }
.stat-card__label { font:600 var(--fs-xs)/1.2 var(--font-body); color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.04em; }
.stat-card__value { font:600 var(--fs-3xl)/1.15 var(--font-mono); color:var(--text);
  margin-top:var(--space-1); font-variant-numeric:tabular-nums; }
.stat-card__value a { color:var(--text); }
.stat-card__value a:hover { color:var(--primary); text-decoration:none; }
.stat-card__delta { font:500 var(--fs-xs)/1 var(--font-mono); margin-left:var(--space-2);
  padding:2px 6px; border-radius:var(--radius-pill); vertical-align:middle; }
.stat-card__delta--up { color:var(--success-text); background:var(--success-surface); }
.stat-card__delta--down { color:var(--danger-text); background:var(--danger-surface); }
.stat-card__hint { font-size:var(--fs-xs); color:var(--text-muted); margin-top:var(--space-1); }
.stat-card--appointment { box-shadow:inset 3px 0 0 var(--primary), var(--elev-1); }
.stat-card__topline { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.stat-card__eyebrow { display:flex; align-items:center; min-width:0; gap:var(--space-2); }
.stat-card__icon { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  flex:0 0 auto; border-radius:var(--radius); color:var(--primary); background:var(--primary-tint); }
.stat-card__icon svg { width:16px; height:16px; stroke-width:2; }
.stat-card__period { flex:0 0 auto; }

/* ---- Marketing attendee intelligence ---- */
.marketing-performance { margin-bottom:var(--space-4); }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }
.section-head h2 { margin:0; font-size:var(--fs-lg); }
.section-head p { margin:var(--space-1) 0 0; color:var(--text-muted); font-size:var(--fs-sm); }
.event-marketing-stats { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); margin-bottom:var(--space-3); }
.marketing-insight-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3); }
.marketing-insight-panel { min-width:0; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--elev-1); overflow:hidden; }
.marketing-insight-panel__head { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); }
.marketing-insight-panel__head h3 { margin:0; font-size:var(--fs-base); }
.marketing-insight-panel__head p { margin:var(--space-1) 0 0; color:var(--text-muted); font-size:var(--fs-xs); }
.marketing-mini-table { margin:0; font-size:var(--fs-sm); }
.marketing-mini-table th { color:var(--text-muted); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.03em; }
.marketing-mini-table th:not(:first-child), .marketing-mini-table td:not(:first-child) { text-align:right; }
.event-attendee-ledger .attendee-identity { min-width:240px; }
.event-attendee-ledger .attendee-role { margin-top:var(--space-1); }
.attendee-attendance { min-height:32px; margin-top:var(--space-2); display:flex; align-items:center; }
.attendee-attendance__button { min-height:36px; border-color:var(--teal-200); background:var(--primary-tint);
  color:var(--primary-strong); white-space:nowrap; }
.attendee-attendance__button:hover { border-color:var(--primary); background:var(--teal-100); color:var(--primary-strong); }
.attendee-attendance__button svg { width:15px; height:15px; }
.attendee-attendance__button[aria-busy="true"] { cursor:wait; }
.crm-ledger .marketing-attribution-cell { min-width:280px; }

/* ---- Triage bar (the dashboard's stacked alerts collapsed to severity chips) ---- */
.triage-bar { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center;
  padding:var(--space-3) var(--space-4); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:var(--space-4); box-shadow:var(--elev-1); }
.triage-bar__title { font:600 var(--fs-xs)/1 var(--font-display); color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.05em; margin-right:var(--space-2); }
.triage-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:500;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:filter var(--motion-fast) var(--ease); }
button.triage-chip { font-family:inherit; }
a.triage-chip:hover, button.triage-chip:hover { filter:brightness(.96); text-decoration:none; }
.triage-chip .num { font-weight:700; }
.triage-chip--danger  { color:#A31C28; background:var(--danger-surface); }
.triage-chip--warning { color:#8A5E0D; background:var(--warning-surface); }
.triage-chip--info    { color:#1D4E93; background:var(--info-surface); }
.triage-chip:hover { border-color:currentColor; text-decoration:none; }

/* ---- row + amount helpers ---- */
/* rejected/void rows: no full wash — muted row, the status pill carries the signal */
.row-danger > td { color: var(--text-muted); }
.row-danger .pill { opacity: 1; }
.cell-amount { text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- display-preference dropdown (navbar) ---- */
.ui-prefs { position:relative; margin-left:var(--space-2); display:flex; align-items:center; }
.ui-prefs__toggle { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border:0; background:none; border-radius:var(--radius-sm); color:var(--text-muted); cursor:pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
.ui-prefs__toggle:hover { background:var(--surface-2); color:var(--text); }
.ui-prefs__toggle svg { width:18px; height:18px; }
.ui-prefs__menu { position:absolute; right:0; top:calc(100% + 8px); z-index:95; min-width:240px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--elev-2); padding:var(--space-3); }
.ui-prefs__group + .ui-prefs__group { margin-top:var(--space-3); }
.ui-prefs__label { font:600 var(--fs-xs)/1 var(--font-display); color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:var(--space-2); }
.ui-prefs__options { display:flex; gap:4px; }
.ui-prefs__options button { flex:1; padding:5px 10px; font:500 var(--fs-xs)/1 var(--font-body);
  border:1px solid var(--border); background:var(--surface); color:var(--text-muted);
  border-radius:var(--radius-sm); cursor:pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
.ui-prefs__options button:hover { background:var(--surface-2); color:var(--text); }
.ui-prefs__options button.is-active { background:var(--primary-tint); border-color:var(--teal-300);
  color:var(--teal-800); font-weight:600; }

/* ---- login card ---- */
.login-page .card { border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--elev-2); }
.login-page .card-body { padding:var(--space-6); }
.login-title { font:650 var(--fs-xl)/1.2 var(--font-display); margin:0 0 2px; letter-spacing:-.01em; }
.login-box-msg { color:var(--text-muted); font-size:var(--fs-sm); margin:0 0 var(--space-5); }
.login-page label { font:500 var(--fs-sm)/1.3 var(--font-body); color:var(--text); margin-bottom:4px; }
.login-page .form-control { background:var(--surface); }
.login-forgot { text-align:center; margin:var(--space-4) 0 0; font-size:var(--fs-sm); }

/* ---- user menu (navbar avatar; extends .ui-prefs) ---- */
.user-menu__toggle { display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; padding:2px; border-radius:var(--radius-pill); cursor:pointer; }
.user-menu__toggle:hover .user-menu__avatar { background:var(--teal-700); }
.user-menu__toggle:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.user-menu__avatar { display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:var(--radius-pill); background:var(--primary);
  color:#fff; font:600 var(--fs-xs)/1 var(--font-body); letter-spacing:.02em;
  transition:background-color var(--motion-fast) var(--ease); }
.user-menu__avatar--lg { width:38px; height:38px; font-size:var(--fs-sm); }
.user-menu__panel { min-width:264px; }
.user-menu__id { display:flex; align-items:center; gap:var(--space-3); padding:2px 2px 0; }
.user-menu__name { font:600 var(--fs-sm)/1.3 var(--font-body); color:var(--text); }
.user-menu__role { font:400 var(--fs-xs)/1.3 var(--font-body); color:var(--text-muted); }
.user-menu__rule { height:1px; background:var(--border); margin:var(--space-3) 0; }
.user-menu__logout-form { margin:0; }
.user-menu__logout { display:flex; align-items:center; gap:8px; width:100%;
  background:none; border:0; border-radius:var(--radius-sm); padding:8px 10px;
  font:500 var(--fs-sm)/1.3 var(--font-body); color:var(--text); cursor:pointer;   /* red = danger only */
  transition:background-color var(--motion-fast) var(--ease); }
.user-menu__logout:hover { background:var(--surface-2); }
.user-menu__logout svg { width:15px; height:15px; }

/* ---- tactility: every press answers back (<=100ms) ---- */
.btn, .btn-icon-ghost, .icon-link, a.triage-chip, button.triage-chip, .chip, .pill-row a,
.user-menu__toggle, .ripple.btn.btn-link {
  transition: transform 80ms var(--ease), background-color var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease),
              box-shadow var(--motion-fast) var(--ease);
}
.btn:active, .btn-icon-ghost:active, a.triage-chip:active, button.triage-chip:active,
.chip:active, .user-menu__toggle:active { transform: scale(.97); }
.crm-ledger tbody tr { transition: background-color var(--motion-fast) var(--ease); }

/* modals rise from their trigger direction instead of BS5's -50px drop */
.modal.fade .modal-dialog { transform: scale(.97) translateY(10px); transition: transform 180ms var(--ease); }
.modal.show .modal-dialog { transform: none; }

/* htmx swaps crossfade; exits faster than entries */
.htmx-swapping { opacity: 0; transition: opacity 100ms ease-in; }
.htmx-added { opacity: 0; }
.htmx-settling { opacity: 1; transition: opacity 150ms ease-out; }

html[data-motion="off"] .modal.fade .modal-dialog,
html[data-motion="off"] .htmx-swapping,
html[data-motion="off"] .htmx-settling { transition: none; }

/* record page section titles (h2 that used to be h4) */
.record-section-title { font:600 var(--fs-lg)/1.3 var(--font-display); margin:var(--space-5) 0 var(--space-3); }

/* ---- Customer record ---- */
.customer-record-card { border-color: var(--border); box-shadow: var(--elev-1); }
.customer-record-card > .card-body { padding: var(--space-4); }
.customer-record-card .nav-tabs {
  gap: var(--space-2);
  justify-content: center;
  padding: 0;
  border-bottom: 1px solid var(--border);
}
.customer-record-card .nav-tabs .nav-link {
  padding: .75rem .9rem;
  border-radius: var(--radius) var(--radius) 0 0;
}
.customer-record-card .tab-content { padding: var(--space-4) 0 0; }
.customer-record-card #accordionExample > .card {
  overflow: hidden;
  border-color: var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}
.customer-record-card #accordionExample > .card + .card { margin-top: var(--space-2) !important; }
.customer-record-card #accordionExample > .card > .card-header {
  padding: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.customer-record-card #accordionExample > .card > .card-header h2 {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.3;
}
.customer-record-card #accordionExample > .card > .card-header .btn-link {
  width: 100%;
  justify-content: flex-start !important;
  padding: .65rem .8rem !important;
  color: var(--primary);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}
.customer-record-card #accordionExample > .card > .card-header .btn-link:hover {
  background: var(--primary-tint);
  color: var(--primary-strong);
}
.customer-record-card #accordionExample > .card > .collapse > .card,
.customer-record-card #accordionExample > .card > .collapsing > .card {
  border: 0;
  box-shadow: none;
}
.customer-record-card #accordionExample > .card .card-body { padding: var(--space-4); }
.student-progress-panel {
  margin: var(--space-3) 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.student-progress-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--text);
  font: 600 var(--fs-lg)/1.3 var(--font-display);
}
.student-progress-panel__title svg { color: var(--primary); }
.student-progress-panel__form {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--teal-200);
  border-radius: var(--radius);
  background: var(--primary-tint);
}
.student-progress-panel__activity-title {
  display: block;
  margin-top: var(--space-4);
  color: var(--text);
  font-weight: 600;
}
.student-progress-panel .table-container { max-height: 330px; overflow-y: auto; margin-top: var(--space-2); }

/* ---- mobile pass ---- */
@media (max-width: 991.98px) {
  .stat-grid--four-up { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  /* the fixed navbar has no body offset anywhere; sticky self-clears in flow */
  .navbar-crm.fixed-top { position: sticky; top: 0; }
  /* big role menus + an open submenu can outgrow the viewport; scroll inside
     the pinned navbar instead of losing the tail (BS3 had a 340px cap) */
  .navbar-crm .navbar-collapse.show, .navbar-crm .navbar-collapse.collapsing {
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
}
@media (max-width: 767.98px) {
  .page-head { flex-wrap: wrap; row-gap: var(--space-2); }
  .page-head__actions { width: 100%; display: flex; gap: var(--space-2); flex-wrap: wrap; }
  .filter-bar__toolbar { flex-wrap: wrap; row-gap: var(--space-2); }
  /* ledgers scroll sideways instead of crushing columns mid-digit */
  .kv-grid-container table, table.crm-ledger { min-width: 760px; }
  .kv-grid-container, .table-responsive { -webkit-overflow-scrolling: touch; }
  /* resizableColumns stamps desktop px widths onto <col>, blowing the table out
     to ~1600px and pushing status/quality far off-screen; let the 760px floor
     lay the columns out naturally on small screens instead */
  .kv-grid-container col, table.crm-ledger col { width: auto !important; }
  /* the sideways scroll needs an affordance: fade the clipped right edge
     (sits under the sticky action columns' own scroll shadow) */
  .kv-grid-container, .table-responsive { position: relative; }
  .kv-grid-container::after, .table-responsive::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
    pointer-events: none;
    background: linear-gradient(to left, var(--bg), transparent);
  }
  .toast-stack { left: var(--space-3); right: var(--space-3); }
  .toast { max-width: none; }
  /* touch targets (44px floor per the a11y spec) */
  .btn-icon-ghost, .icon-link { min-width: 44px; min-height: 44px; }
  .crm-ledger .cell-actions .btn-icon-ghost,
  .crm-ledger .cell-history .kv-expand-icon {
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
  }
  .customer-index--my-leads .crm-ledger .cell-actions {
    min-width:148px;
  }
  .lead-event-confirmation__event {
    grid-template-columns:36px minmax(0,1fr);
  }
  .lead-event-confirmation__event-icon {
    width:36px;
    height:36px;
  }
  .lead-event-confirmation__event-action {
    grid-column:1 / -1;
  }
  .lead-event-confirmation__confirm {
    width:100%;
    min-height:44px;
  }
  .attendee-attendance__button { min-height:44px; }
  .page-head .btn, .filter-bar__toolbar .btn { min-height: 44px; }
  .marketing-insight-grid { grid-template-columns:1fr; }
  .lead-timeline { padding:var(--space-4) !important; }
  .lead-timeline,
  .lead-timeline__loading--drawer {
    width:calc(100vw - var(--space-6));
  }
  .lead-timeline__item {
    grid-template-columns:20px minmax(0, 1fr);
    grid-template-areas:
      "rail time"
      "rail body";
    column-gap:var(--space-2);
  }
  .lead-timeline__filter {
    min-height:44px;
  }
  .lead-timeline__date-band {
    grid-template-columns:20px minmax(0, 1fr);
    column-gap:var(--space-2);
  }
  .lead-timeline__date-heading {
    grid-column:2;
    margin:var(--space-4) 0 var(--space-1);
  }
  .lead-timeline__time {
    grid-area:time;
    padding:var(--space-3) 0 0 var(--space-1);
    text-align:left;
  }
  .lead-timeline__time time,
  .lead-timeline__date,
  .lead-timeline__clock { display:inline; }
  .lead-timeline__clock { margin:0; }
  .lead-timeline__rail { grid-area:rail; }
  .lead-timeline__body {
    grid-area:body;
    padding:var(--space-1) 0 var(--space-5) var(--space-1);
  }
  .lead-timeline__booth-detail {
    align-items:flex-start;
  }
  .lead-timeline__booth-remark {
    flex-basis:100%;
  }
  .lead-timeline__details > summary,
  .lead-timeline__confirm,
  .lead-timeline__load-button { min-height:44px; }
  .lead-timeline__detail-row {
    grid-template-columns:1fr;
    gap:var(--space-1);
  }
  .lead-timeline__search-state {
    margin-left:0;
  }
  .lead-timeline__load-form { flex-wrap:wrap; justify-content:center; }
}
@media (max-width: 575.98px) {
  .stat-grid--four-up { grid-template-columns:1fr; }
}

/* ---- reduced motion: a first-class path ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .skeleton { animation:none; background:var(--surface-2); }
}
/* the per-user Motion=Off setting collapses everything too, not just the GSAP layer */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation-duration:.001ms !important; transition-duration:.001ms !important;
}
html[data-motion="off"] .skeleton { animation:none; background:var(--surface-2); }

/* ---- glossary: one quiet, always-there "what does this acronym mean" affordance ---- */
/* x-cloak must exist globally: the glossary sits in the layout, on pages that carry no
   other Alpine component to register the rule, so the panel would flash without it. */
[x-cloak] { display:none !important; }
.glossary { position:fixed; right:var(--space-4); bottom:var(--space-4); z-index:1030; }
.glossary__toggle {
  width:40px; height:40px; padding:0; display:grid; place-items:center;
  border-radius:var(--radius-pill); background:var(--surface); color:var(--text-muted);
  border:1px solid var(--border); box-shadow:var(--elev-2); cursor:pointer;
  transition:color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.glossary__toggle:hover, .glossary__toggle:focus-visible { color:var(--primary); border-color:var(--primary); }
.glossary__panel {
  position:absolute; right:0; bottom:calc(100% + 8px); width:320px; max-height:62vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--elev-3); padding:var(--space-3) var(--space-4);
}
.glossary__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-3); }
.glossary__head h2 { margin:0; font:600 var(--fs-md)/1.2 var(--font-display); color:var(--text); }
.glossary__close { padding:2px; line-height:0; background:none; border:none; color:var(--text-muted); cursor:pointer; }
.glossary__close:hover { color:var(--text); }
.glossary__list { margin:0; display:grid; gap:var(--space-3); }
.glossary__list > div { display:grid; grid-template-columns:104px 1fr; gap:var(--space-2); align-items:baseline; }
.glossary__term { font:600 var(--fs-sm)/1.3 var(--font-mono); color:var(--text); }
.glossary__def { margin:0; font:400 var(--fs-sm)/1.4 var(--font-body); color:var(--text-muted); }