/* ═══════════════════════════════════════════════════════════════
   MOMENTUM INTERFACE v2 — Premium SaaS CRM Polish Pass
   Attio / Linear / Stripe Dashboard quality

   Phase 2 improvements:
   - CSS design token block for all momentum variables
   - Consistent typography scale (standard font-weight values only)
   - Strict 4/8/12/16/24/32px spacing rhythm
   - Hairline border + whisper shadow card system
   - 12px border radius throughout
   - Stat chips with proper height + clean label/value format
   - Primary contact card with icon action buttons + overflow handling
   - Activity timeline with CSS class for bubbles (not inline styles)
   - Inline edit: pointer cursor, edit affordance, visible focus ring
   - Empty states for all missing data scenarios
   - Accessible hit targets (≥40px where feasible)
   - Focus rings on all keyboard-reachable elements

   RULE: Every rule is scoped to body[data-theme="momentum"].
         Classic mode is untouched.
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   § 0. DESIGN TOKENS
   Single source of truth for all momentum values.
   Defined on the body scope so they apply to all children.
───────────────────────────────────────────────────────────── */
/* Phase 6 — When momentum is active, override dark-theme variables AND
   add the requested --m-* shorthand token system for Phase 6. */
body[data-theme="momentum"] {
  --bg:        #f7f9fc !important;
  --surface:   #ffffff !important;
  --surface-1: #ffffff !important;
  --surface-2: #f8fafc !important;
  --card:      #ffffff !important;
  --hover-bg:  #f1f5f9 !important;
  --border:      #e2e8f0 !important;
  --border-light: #e8edf2 !important;
  --text:          #0f172a !important;
  --text-primary:  #0f172a !important;
  --text-secondary: #64748b !important;
  --gray-50:  #f8fafc !important;
  --gray-100: #f1f5f9 !important;
  --gray-200: #e2e8f0 !important;

  /* ── Phase 6 shorthand tokens ─────────────────────────────── */
  /* Card background: very faint blue-white tint (not pure white — feels warmer) */
  --m-bg:       #f7f9fc;
  --m-surface:  #ffffff;
  /* Border: near-invisible; shadow does the depth work */
  --m-border:   rgba(15, 23, 42, 0.07);
  --m-text:     #0f172a;
  --m-muted:    #64748b;
  --m-radius:   12px;
  /* Shadow: soft two-layer for cards; single-layer for chips */
  --m-shadow:   0 1px 3px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(15, 23, 42, 0.05);
  --m-shadow-chip: 0 1px 4px rgba(15, 23, 42, 0.10);
  /* Spacing */
  --m-space-1: 4px;
  --m-space-2: 8px;
  --m-space-3: 12px;
  --m-space-4: 16px;
  --m-space-5: 20px;
  --m-space-6: 24px;
}

body[data-theme="momentum"] {
  /* Spacing — strict 4-unit scale */
  --mm-sp-1: 4px;
  --mm-sp-2: 8px;
  --mm-sp-3: 12px;
  --mm-sp-4: 16px;
  --mm-sp-5: 20px;
  --mm-sp-6: 24px;
  --mm-sp-8: 32px;

  /* Typography */
  --mm-text-xs:   11px;
  --mm-text-sm:   12px;
  --mm-text-base: 13px;
  --mm-text-md:   14px;
  --mm-text-lg:   16px;
  --mm-text-xl:   20px;
  --mm-text-2xl:  24px;
  --mm-lh-tight:  1.2;
  --mm-lh-normal: 1.5;

  /* Font weights — standard CSS values only */
  --mm-fw-normal:   400;
  --mm-fw-medium:   500;
  --mm-fw-semibold: 600;
  --mm-fw-bold:     700;

  /* Colors */
  --mm-bg:              #f7f9fc;
  --mm-surface:         #ffffff;
  --mm-border:          #e4e9ef;
  --mm-border-subtle:   #f0f4f8;
  --mm-text-primary:    #0f172a;
  --mm-text-secondary:  #334155;
  --mm-text-muted:      #64748b;
  --mm-text-faint:      #94a3b8;
  --mm-text-empty:      #b8c6d6;
  --mm-accent:          #6366f1;
  --mm-accent-soft:     #eef2ff;
  --mm-accent-border:   #c7d2fe;
  --mm-focus-ring:      0 0 0 3px rgba(99, 102, 241, 0.18);

  /* Elevation */
  --mm-shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.04);
  --mm-shadow-sm:   0 1px 4px rgba(15, 23, 42, 0.06);
  --mm-shadow-md:   0 2px 8px rgba(15, 23, 42, 0.08);
  --mm-shadow-lift: 0 4px 12px rgba(15, 23, 42, 0.10);

  /* Shape */
  --mm-radius:    12px;
  --mm-radius-sm: 8px;
  --mm-radius-xs: 6px;

  /* Transitions */
  --mm-tr: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────────────────────
   § 1. PANEL CONTAINER
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel {
  background: var(--mm-bg) !important;
  border-radius: 14px !important;
  border: 1px solid #dbe5f0 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}
body[data-theme="momentum"] .app-shell[data-view="contacts"] #detailPanel {
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
  border-top: 1px solid #dbe5f0 !important;
}

/* ─────────────────────────────────────────────────────────────
   § 2. RECORD HEADER
   Company name prominent, semibold (not heavy-black).
   Industry · Type · Employees meta line below.
   Then stat chips. Then quick actions.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .detailHeader {
  padding: var(--mm-sp-6) var(--mm-sp-6) var(--mm-sp-5) !important;
  background: var(--mm-surface) !important;
  border-bottom: 1px solid var(--mm-border) !important;
  box-shadow: var(--mm-shadow-xs) !important;
}

/* Company / person name — prominent hero element */
body[data-theme="momentum"] #detailPanel .contactName {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  color: #0f172a !important;
  line-height: 1.15 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  /* ensure it's always visible regardless of inherited color */
  opacity: 1 !important;
}

/* Star button — subtle, doesn't compete with name */
body[data-theme="momentum"] #detailPanel .star-icon-btn {
  opacity: 0.35 !important;
  transition: opacity var(--mm-tr), transform var(--mm-tr) !important;
  flex-shrink: 0 !important;
  font-size: 16px !important;
  vertical-align: middle !important;
}
body[data-theme="momentum"] #detailPanel .star-icon-btn:hover {
  opacity: 1 !important;
  transform: scale(1.15) !important;
}

/* Identity block — clear vertical stack with room to breathe */
body[data-theme="momentum"] #detailPanel .detailHeaderIdentity {
  gap: 5px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Identity block (Open Deals, Last Active, deal card, primary contact) = 40% of window. Menu row stays full width at bottom. */
body[data-theme="momentum"] #detailPanel .detailHeader .detailHeaderMain.detail-header-stacked .detailHeaderIdentity {
  max-width: 40% !important;
  min-width: 0 !important;
}
body[data-theme="momentum"] #detailPanel .detailHeaderMain .detailHeaderIdentity {
  max-width: 40% !important;
  min-width: 0 !important;
}

/* Stacked header: Back/Edit/Compose etc. on their own line at very bottom. Survives inline-style stripping. */
body[data-theme="momentum"] #detailPanel .detailHeader .detailHeaderMain.detail-header-stacked {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}
body[data-theme="momentum"] #detailPanel .detailHeader .detailHeaderMain.detail-header-stacked .detailHeaderActionsRow,
body[data-theme="momentum"] #detailPanel .detailHeader .detailHeaderMain.detail-header-stacked #detailHeaderActions {
  width: 100% !important;
  flex-shrink: 0 !important;
  padding-top: 8px !important;
  margin-top: 2px !important;
  border-top: 1px solid var(--mm-border, rgba(15, 23, 42, 0.08)) !important;
}

/* Header action buttons row (at bottom of header, below Primary person box) */
body[data-theme="momentum"] #detailPanel #detailHeaderActions {
  gap: var(--mm-sp-2) !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

body[data-theme="momentum"] #detailPanel #detailHeaderActions .btn {
  font-size: var(--mm-text-sm) !important;
  font-weight: var(--mm-fw-semibold) !important;
  padding: 7px var(--mm-sp-3) !important;
  border-radius: var(--mm-radius-sm) !important;
  min-height: 32px !important;
}

/* ─────────────────────────────────────────────────────────────
   § 3. META LINE  (JS-injected)
   "Retail · Customer · 120 emp." — muted, below company name
───────────────────────────────────────────────────────────── */
.mm-meta-line {
  font-size: 13px;
  color: #718096;
  font-weight: 500;
  line-height: 1.5;
  display: block;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   § 4. STAT CHIPS — PHASE 6 PREMIUM STACKED BLOCKS
   Shadow-first (no heavy border), tight label/value hierarchy.
   Semantic color variants for Deals / Pipeline / Task.
───────────────────────────────────────────────────────────── */
.mm-stat-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--m-space-2, 8px);
  margin-top: 12px;
  margin-left: 0;
  width: 100%;  /* match full width of deal block below */
}

/* KPI row: exactly 3 chips (Open Deals, Open Task, Last Active) — same row width, no expand */
.mm-stat-chips--kpi {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  flex-wrap: nowrap !important;
  gap: 8px !important;
  max-width: 100%;
}
.mm-stat-chips--kpi .mm-chip {
  min-width: 0 !important;
  overflow: hidden;
}
.mm-stat-chips--kpi .mm-chip-label,
.mm-stat-chips--kpi .mm-chip-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Base stat block — equal width across all chips */
.mm-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 0;     /* grow equally from zero so all chips are the same width */
  min-width: 80px; /* floor to prevent tiny chips on very narrow screens */
  padding: 10px 16px;
  /* Shadow-first: border near-invisible, shadow gives depth */
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: var(--m-shadow-chip, 0 1px 4px rgba(15,23,42,0.10));
  border-radius: 10px;
  cursor: default;
  transition:
    background 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
  user-select: none;
  white-space: nowrap;
}

.mm-chip:hover {
  background: #f8faff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.13);
  transform: translateY(-1px);
}

/* Label — 10px caps, strongly muted */
.mm-chip-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.2;
  margin-bottom: 4px;
}

/* Value — prominent: 18px bold */
.mm-chip-value {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: -0.4px;
}

/* Legacy dot — no longer rendered */
.mm-chip-dot { display: none; }

/* ── Semantic colour variants ─────────────────────────────── */
.mm-chip-deals {
  background: #f0f7ff;
  border-color: rgba(37, 99, 235, 0.15);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.10);
}
.mm-chip-deals .mm-chip-label { color: #3b82f6; }
.mm-chip-deals .mm-chip-value { color: #1d4ed8; }
.mm-chip-deals:hover { background: #e0f0ff; box-shadow: 0 3px 10px rgba(37,99,235,0.15); }

.mm-chip-pipeline {
  background: #f0fdf6;
  border-color: rgba(22, 163, 74, 0.15);
  box-shadow: 0 1px 4px rgba(22, 163, 74, 0.10);
}
.mm-chip-pipeline .mm-chip-label { color: #22c55e; }
.mm-chip-pipeline .mm-chip-value { color: #15803d; }
.mm-chip-pipeline:hover { background: #dcfce7; box-shadow: 0 3px 10px rgba(22,163,74,0.15); }

.mm-chip-task {
  background: #fffbf0;
  border-color: rgba(234, 88, 12, 0.15);
  box-shadow: 0 1px 4px rgba(234, 88, 12, 0.10);
}
.mm-chip-task .mm-chip-label { color: #f97316; }
.mm-chip-task .mm-chip-value { color: #c2410c; }
.mm-chip-task:hover { background: #fff3e0; box-shadow: 0 3px 10px rgba(234,88,12,0.15); }

/* ── Mobile: single scrollable row ───────────────────────── */
@media (max-width: 639px) {
  .mm-stat-chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    gap: 8px !important;
    /* Match header horizontal margin; slight overscroll so last chip shows */
    padding-right: 12px !important;
  }
  .mm-stat-chips::-webkit-scrollbar { display: none !important; }
  .mm-chip {
    min-width: 76px !important;
    padding: 8px 12px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    align-items: center !important;
    text-align: center !important;
  }
  .mm-chip-label,
  .mm-chip-value {
    text-align: center !important;
  }
  .mm-chip-label { font-size: 9px !important; margin-bottom: 3px !important; }
  .mm-chip-value { font-size: 15px !important; }
}

/* ─────────────────────────────────────────────────────────────
   § 5. QUICK ACTIONS  (+Deal  +Task  +Note)  (JS-injected)
───────────────────────────────────────────────────────────── */
.mm-quick-actions {
  display: flex;
  gap: var(--mm-sp-2);
  margin-top: 6px;
  margin-left: 0;
  flex-wrap: wrap;
}

/* Quick action buttons — always dark regardless of inherited dark-theme colors */
.mm-quick-btn,
body[data-theme="momentum"] .mm-quick-btn,
body[data-theme="momentum"] #detailPanel .mm-quick-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 30px !important;
  padding: 0 12px !important;
  background: #edf1f7 !important;
  border: 1px solid #a8b5c6 !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #2d3748 !important;
  -webkit-text-fill-color: #2d3748 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  transition: background 150ms, border-color 150ms, box-shadow 150ms !important;
  user-select: none !important;
  text-decoration: none !important;
}

body[data-theme="momentum"] .mm-quick-btn:hover,
body[data-theme="momentum"] #detailPanel .mm-quick-btn:hover {
  background: #dce3ee !important;
  border-color: #6b84a0 !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.1) !important;
  color: #1a202c !important;
  -webkit-text-fill-color: #1a202c !important;
}

body[data-theme="momentum"] .mm-quick-btn:focus-visible {
  outline: none !important;
  box-shadow: var(--mm-focus-ring) !important;
}

body[data-theme="momentum"] .mm-quick-btn:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}

/* SVG icons inside quick buttons */
body[data-theme="momentum"] .mm-quick-btn svg {
  color: #2d3748 !important;
  stroke: #2d3748 !important;
  opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────
   § 6. FIELD CARD SYSTEM
   Each .contact-field-group = a clean card.
   Hairline border + whisper shadow. 12px radius.
───────────────────────────────────────────────────────────── */

/* Strip existing card styling from the details section container */
body[data-theme="momentum"] #detailPanel .contact-details-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Section heading (Company Details / Contact Details) */
body[data-theme="momentum"] #detailPanel .contact-details-card h3 {
  font-size: var(--mm-text-xs) !important;
  font-weight: var(--mm-fw-bold) !important;
  color: var(--mm-text-faint) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  margin: 0 0 var(--mm-sp-3) 0 !important;
  padding: 0 !important;
}

/* Field group → Phase 6 premium card (shadow-first, less border noise) */
body[data-theme="momentum"] #detailPanel .contact-field-group {
  background: var(--m-surface, #ffffff) !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  transition: border-color 150ms ease !important;
}
body[data-theme="momentum"] #detailPanel .contact-field-group:hover {
  border-color: rgba(15,23,42,0.1) !important;
}

/* Card title bar — same height as Notes & Activity header for alignment */
body[data-theme="momentum"] #detailPanel .contact-field-group-title {
  display: flex !important;
  align-items: center !important;
  gap: var(--mm-sp-2) !important;
  min-height: 44px !important;
  padding: 12px var(--mm-sp-4) !important;
  box-sizing: border-box !important;
  font-size: var(--mm-text-xs) !important;
  font-weight: var(--mm-fw-bold) !important;
  color: var(--mm-text-faint) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  background: #fafbfc !important;
  border-bottom: 1px solid rgba(15,23,42,0.04) !important;
  line-height: 1 !important;
}

body[data-theme="momentum"] #detailPanel .contact-field-group-title svg {
  opacity: 0.5 !important;
  flex-shrink: 0 !important;
  width: 13px !important;
  height: 13px !important;
}

/* ─────────────────────────────────────────────────────────────
   § 7. FIELD ROWS — info-grid, NOT a form
   Two-column layout: fixed label + flexible value.
   Values look like readable content, not input boxes.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .detailRow {
  display: grid !important;
  grid-template-columns: 110px 1fr !important;
  align-items: baseline !important;
  min-height: 38px !important;
  padding: 9px var(--mm-sp-4) !important;
  gap: 0 12px !important;
  border-bottom: 1px solid rgba(15,23,42,0.04) !important;
  transition: background var(--mm-tr) !important;
  position: relative !important;
}

body[data-theme="momentum"] #detailPanel .detailRow:last-child {
  border-bottom: none !important;
}

body[data-theme="momentum"] #detailPanel .detailRow:hover {
  background: #f8fafb !important;
  border-radius: 0 !important;
}

/* Label — small, muted, aligned to baseline */
body[data-theme="momentum"] #detailPanel .detailRow .label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-top: 1px !important;
}

/* Value — positioning context for edit button; padding so text doesn't sit under icon */
body[data-theme="momentum"] #detailPanel .detailRow .value {
  position: relative !important;
  flex: 1 !important;
  min-width: 0 !important;
  padding-right: 30px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  opacity: 1 !important;
  line-height: 1.5 !important;
}

/* Pencil edit button — inside .value so it aligns with the field */
body[data-theme="momentum"] #detailPanel .detailRow {
  position: relative !important;
}
body[data-theme="momentum"] #detailPanel .detailRow .value .mm-field-edit-btn,
body[data-theme="momentum"] #detailPanel .mm-field-edit-btn {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  opacity: 0 !important;
  transition: opacity 150ms, background 150ms !important;
  border-radius: 4px !important;
  pointer-events: none !important;
  color: #94a3b8 !important;
}
body[data-theme="momentum"] #detailPanel .detailRow:hover .value .mm-field-edit-btn,
body[data-theme="momentum"] #detailPanel .detailRow:hover .mm-field-edit-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
}
body[data-theme="momentum"] #detailPanel .detailRow .value .mm-field-edit-btn:hover,
body[data-theme="momentum"] #detailPanel .detailRow:hover .mm-field-edit-btn:hover {
  background: #e8edf5 !important;
  color: #475569 !important;
}
body[data-theme="momentum"] #detailPanel .detailRow:focus-within .mm-field-edit-btn {
  display: none !important;
}
body[data-theme="momentum"] #detailPanel .detailRow:hover .mm-field-edit-btn {
  opacity: 1;
  pointer-events: auto;
}
body[data-theme="momentum"] #detailPanel .detailRow:hover .mm-field-edit-btn:hover {
  background: #e8edf5;
  color: #475569;
}
body[data-theme="momentum"] #detailPanel .detailRow:focus-within .mm-field-edit-btn {
  display: none; /* hide once editing is active */
}

/* ─────────────────────────────────────────────────────────────
   § 8. INLINE INPUTS — text-first, edit on click
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .inline-input {
  width: 100% !important;
  padding: 4px var(--mm-sp-2) !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1e293b !important;   /* strong, clearly readable */
  line-height: 1.5 !important;
  font-family: inherit !important;
  transition: border-color var(--mm-tr), background var(--mm-tr), box-shadow var(--mm-tr) !important;
  cursor: pointer !important;
}

/* Empty / placeholder */
body[data-theme="momentum"] #detailPanel .inline-input:placeholder-shown {
  color: var(--mm-text-empty) !important;
  font-style: italic !important;
}

/* Hover on readonly — show subtle edit border */
body[data-theme="momentum"] #detailPanel .detailRow:hover .inline-input[readonly] {
  border-color: #d0d8e2 !important;
  background: #f6f8fa !important;
}

/* Active / focused edit state — subtle, not a heavy ring */
body[data-theme="momentum"] #detailPanel .inline-input:not([readonly]):focus,
body[data-theme="momentum"] #detailPanel .inline-input:not([readonly]),
body[data-theme="momentum"] #detailPanel .inline-input:focus {
  border-color: #6366f1 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: text !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  opacity: 1 !important;
  color-scheme: light !important;
}

/* Editing row — lifted, always light */
body[data-theme="momentum"] #detailPanel .detailRow:focus-within {
  background: #f8faff !important;
  z-index: 2 !important;
  color-scheme: light !important;
}
body[data-theme="momentum"] #detailPanel .detailRow:focus-within::after {
  display: none !important;
}

/* Select fields — always light background and dark text (fixes black dropdown when editing) */
body[data-theme="momentum"] #detailPanel .detailRow select {
  width: 100% !important;
  padding: 4px var(--mm-sp-2) !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  font-size: var(--mm-text-md) !important;
  font-weight: var(--mm-fw-normal) !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-family: inherit !important;
  cursor: pointer !important;
  appearance: auto !important;
  transition: border-color var(--mm-tr), background var(--mm-tr) !important;
  color-scheme: light !important;
}
body[data-theme="momentum"] #detailPanel .detailRow:hover select {
  border-color: #d0d8e2 !important;
  background: #f6f8fa !important;
}
body[data-theme="momentum"] #detailPanel .detailRow select:focus {
  border-color: var(--mm-accent) !important;
  background: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  box-shadow: var(--mm-focus-ring) !important;
  outline: none !important;
  color-scheme: light !important;
}

/* ─────────────────────────────────────────────────────────────
   § 9. PRIMARY CONTACT MINI-CARD
   Avatar | Name + Title | [ 📞 ] [ ✉ ]
───────────────────────────────────────────────────────────── */

/* Wrapper from classic (replaced in JS with .mm-contact-card) */
body[data-theme="momentum"] #detailPanel .detailPrimaryContactRow {
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  width: 100% !important;      /* ensure card can stretch full width */
  box-sizing: border-box !important;
}

/* Primary contact section (classic HTML before enhancement): full width, spacing */
body[data-theme="momentum"] #detailPanel .primary-contact-row,
#detailPanel .primary-contact-row {
  width: 100% !important;
  box-sizing: border-box !important;
}
#detailPanel .primary-contact-content {
  width: 100% !important;
  box-sizing: border-box !important;
}
#detailPanel .primary-contact-name-pill:hover {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
}
#detailPanel .primary-contact-details {
  flex: 1 !important;
  min-width: 0 !important;
}

/* The card itself */
.mm-contact-card {
  display: flex;
  align-items: center;
  gap: var(--mm-sp-3);
  padding: var(--mm-sp-3) var(--mm-sp-4);
  background: linear-gradient(135deg, #f0f9ff 0%, #eef2ff 100%);
  border: 1px solid #c7d7f0;
  border-radius: var(--mm-radius);
  cursor: pointer;
  transition: border-color var(--mm-tr), box-shadow var(--mm-tr);
  text-decoration: none;
  outline: none;
  width: 100%;         /* match width of deal/task blocks */
  box-sizing: border-box;
}
.mm-contact-card:hover {
  border-color: #93b8e8;
  box-shadow: var(--mm-shadow-md);
}
.mm-contact-card:focus-visible {
  box-shadow: var(--mm-focus-ring);
}

/* Avatar */
.mm-contact-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--mm-fw-bold);
  letter-spacing: 0.3px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.25);
}

/* Info block */
.mm-contact-info {
  flex: 1;
  min-width: 0;
}

.mm-contact-name {
  font-size: var(--mm-text-md);
  font-weight: var(--mm-fw-semibold);
  color: #1e3a6e;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mm-contact-title {
  font-size: var(--mm-text-sm);
  color: #3b6ead;
  margin-top: 2px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action buttons on the right */
.mm-contact-actions {
  display: flex;
  gap: var(--mm-sp-1);
  flex-shrink: 0;
}

.mm-contact-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--mm-radius-sm);
  border: 1px solid #c7d7f0;
  background: rgba(255, 255, 255, 0.7);
  color: #3b6ead;
  cursor: pointer;
  transition: background var(--mm-tr), border-color var(--mm-tr), color var(--mm-tr);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  text-decoration: none;
  outline: none;
}
.mm-contact-action-btn:hover {
  background: #ffffff;
  border-color: #7baad4;
  color: #1d4ed8;
  box-shadow: var(--mm-shadow-xs);
}
.mm-contact-action-btn:focus-visible {
  box-shadow: var(--mm-focus-ring);
}

/* Ensure the SVG icons inside contact action buttons are exactly 18px */
.mm-contact-action-btn svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  display: block;
}

/* Label under phone/email in the card */
.mm-contact-detail-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.mm-contact-detail-label {
  font-size: 9px;
  color: #5a88bf;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--mm-fw-semibold);
  line-height: 1;
}

/* Empty state when no primary contact */
.mm-no-contact-state {
  display: flex;
  align-items: center;
  padding: var(--mm-sp-2) 0;
}
.mm-add-primary-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  color: #1d4ed8;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.mm-add-primary-contact-btn:hover {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-color: #60a5fa;
}

/* ─────────────────────────────────────────────────────────────
   § 10. MULTI-FIELD ROWS (phones, emails, addresses, socials)
   No row border-bottom — inputs already have borders; avoids double line.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .multi-field-detail-row {
  padding: var(--mm-sp-2) var(--mm-sp-4) !important;
  border-bottom: none !important;
}
body[data-theme="momentum"] #detailPanel .multi-field-detail-row:last-child {
  border-bottom: none !important;
}

/* Phone / email / address: flat wrapper — inner controls only (no outer ring + inner borders) */
body[data-theme="momentum"] #detailPanel .detail-multi-field-entry {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body[data-theme="momentum"] #detailPanel .detail-multi-type-select {
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
body[data-theme="momentum"] #detailPanel .detail-multi-value-input,
body[data-theme="momentum"] #detailPanel .detail-address-input {
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}
body[data-theme="momentum"] #detailPanel .detail-multi-value-input:focus,
body[data-theme="momentum"] #detailPanel .detail-address-input:focus {
  box-shadow: none !important;
  outline: 2px solid rgba(99, 102, 241, 0.28) !important;
  outline-offset: 1px !important;
}

/* Action chips on multi-field rows (call, email, copy) */
body[data-theme="momentum"] #detailPanel .contact-multi-action-btn {
  height: 26px !important;
  padding: 0 var(--mm-sp-2) !important;
  border-radius: var(--mm-radius-xs) !important;
  font-size: var(--mm-text-xs) !important;
  font-weight: var(--mm-fw-semibold) !important;
  background: #f1f5f9 !important;
  border: 1px solid #dde4ec !important;
  color: var(--mm-text-muted) !important;
  cursor: pointer !important;
  transition: all var(--mm-tr) !important;
  display: inline-flex !important;
  align-items: center !important;
  outline: none !important;
}
body[data-theme="momentum"] #detailPanel .contact-multi-action-btn:hover {
  background: var(--mm-accent-soft) !important;
  border-color: var(--mm-accent-border) !important;
  color: var(--mm-accent) !important;
}
body[data-theme="momentum"] #detailPanel .contact-multi-action-btn:focus-visible {
  box-shadow: var(--mm-focus-ring) !important;
  outline: none !important;
}

/* Long values (emails, URLs) — truncate with tooltip */
body[data-theme="momentum"] #detailPanel .inline-input[type="email"],
body[data-theme="momentum"] #detailPanel .inline-input[type="url"] {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ─────────────────────────────────────────────────────────────
   § 11. OVERVIEW LAYOUT — Two-column card system
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .contact-overview-layout {
  gap: var(--mm-sp-5) !important;
}

/* Right column (Notes & Activity) → card. */
body[data-theme="momentum"] #detailPanel .contact-overview-right > .detailSection {
  background: var(--mm-surface) !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Right column section header — same height as Identity header for alignment */
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-header {
  min-height: 44px !important;
  padding: 12px var(--mm-sp-5) 12px var(--mm-sp-3) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  background: #fafbfc !important;
  border-bottom: 1px solid rgba(15,23,42,0.04) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Give the overview-note-composer a small margin so its border
   is never flush against the card edge and can't be clipped. */
body[data-theme="momentum"] #detailPanel .overview-note-composer {
  margin: 0 var(--mm-sp-1) 0 0 !important;
}
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-title {
  font-size: var(--mm-text-xs) !important;
  font-weight: var(--mm-fw-bold) !important;
  color: var(--mm-text-faint) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--mm-sp-2) !important;
}

/* ─────────────────────────────────────────────────────────────
   § 12. COMMUNICATION ACTION BAR
   Call / Email / Note / SMS / Voice — transformed 5-button grid
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .overview-note-composer > div:first-child {
  display: flex !important;
  gap: var(--mm-sp-2) !important;
  padding: var(--mm-sp-4) var(--mm-sp-4) var(--mm-sp-4) 10px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
  flex-wrap: wrap !important;
}

body[data-theme="momentum"] .overview-note-composer [data-ov-type],
body[data-theme="momentum"] .overview-note-composer [data-ov-voice] {
  flex: 1 !important;
  min-width: 60px !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: var(--mm-sp-2) var(--mm-sp-2) !important;
  background: #f8fafc !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: var(--mm-text-sm) !important;
  font-weight: var(--mm-fw-semibold) !important;
  color: var(--mm-text-muted) !important;
  cursor: pointer !important;
  transition: all var(--mm-tr) !important;
  outline: none !important;
}

body[data-theme="momentum"] .overview-note-composer [data-ov-type]:hover {
  background: var(--mm-accent-soft) !important;
  color: var(--mm-accent) !important;
}
body[data-theme="momentum"] .overview-note-composer [data-ov-type="call"]:hover {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #16a34a !important;
}
body[data-theme="momentum"] .overview-note-composer [data-ov-type="email"]:hover {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #2563eb !important;
}
body[data-theme="momentum"] .overview-note-composer [data-ov-type="sms"]:hover {
  background: #fdf4ff !important;
  border-color: #d8b4fe !important;
  color: #7c3aed !important;
}
body[data-theme="momentum"] .overview-note-composer [data-ov-voice]:hover {
  background: #fff1f2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}
body[data-theme="momentum"] .overview-note-composer [data-ov-type]:focus-visible,
body[data-theme="momentum"] .overview-note-composer [data-ov-voice]:focus-visible {
  box-shadow: var(--mm-focus-ring) !important;
}

/* Textarea */
body[data-theme="momentum"] .overview-note-composer textarea {
  margin: 0 var(--mm-sp-4) 0 10px !important;
  width: calc(100% - 26px) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius-sm) !important;
  padding: 10px var(--mm-sp-3) !important;
  font-size: var(--mm-text-base) !important;
  font-family: inherit !important;
  background: #fafbfc !important;
  resize: none !important;
  transition: border-color var(--mm-tr), background var(--mm-tr), box-shadow var(--mm-tr) !important;
  line-height: var(--mm-lh-normal) !important;
  color: var(--mm-text-secondary) !important;
  outline: none !important;
}
body[data-theme="momentum"] .overview-note-composer textarea::placeholder {
  color: var(--mm-text-empty) !important;
}
body[data-theme="momentum"] .overview-note-composer textarea:focus {
  border-color: var(--mm-accent) !important;
  background: var(--mm-surface) !important;
  box-shadow: var(--mm-focus-ring) !important;
}

/* Composer action row */
body[data-theme="momentum"] .overview-note-composer-actions {
  padding: var(--mm-sp-2) var(--mm-sp-4) var(--mm-sp-4) 10px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: var(--mm-sp-2) !important;
}
body[data-theme="momentum"] .overview-note-hint {
  font-size: var(--mm-text-xs) !important;
  color: var(--mm-text-empty) !important;
  flex: 1 !important;
}

/* ─────────────────────────────────────────────────────────────
   § 13. ACTIVITY TIMELINE — vertical spine with icon dots
   True timeline pattern using CSS ::before for the line.
───────────────────────────────────────────────────────────── */

/* Timeline container */
body[data-theme="momentum"] .contact-activity-feed {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  position: relative !important;
  padding: 4px 0 12px !important;
}

/* Vertical spine — runs down the left, fades at top & bottom */
body[data-theme="momentum"] .contact-activity-feed::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom,
    transparent 0%,
    #dde6f0 8%,
    #dde6f0 92%,
    transparent 100%
  );
  border-radius: 1px;
  z-index: 0;
  pointer-events: none;
}

/* Activity row — less left padding so text sits closer to icon/edge */
body[data-theme="momentum"] .activityItem.contact-activity-item {
  position: relative !important;
  padding: 10px 12px 10px 40px !important;
  border-bottom: none !important;
  background: transparent !important;
  transition: background var(--mm-tr) !important;
  border-radius: 8px !important;
  cursor: default !important;
  margin: 1px 0 !important;
}

body[data-theme="momentum"] .activityItem.contact-activity-item:hover {
  background: #f4f8fc !important;
}

/* Remove any classic ::before that conflicts */
body[data-theme="momentum"] .activityItem.contact-activity-item::before {
  content: none !important;
}

/* JS-injected icon bubble — sits on the spine */
.mm-activity-bubble {
  position: absolute;
  left: 6px;
  top: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 2;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1.5px #dde6f0;
  flex-shrink: 0;
  pointer-events: none;
  line-height: 1;
}

/* Activity title — JS adds .mm-timeline-title for strong hierarchy */
body[data-theme="momentum"] .activityItem.contact-activity-item .mm-timeline-title,
body[data-theme="momentum"] .activityItem.contact-activity-item > div:not(.mm-activity-bubble) {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  line-height: 1.4 !important;
}

/* Activity meta — JS adds .mm-timeline-meta for muted subordinate info */
body[data-theme="momentum"] .activityItem.contact-activity-item .mm-timeline-meta,
body[data-theme="momentum"] .activityItem.contact-activity-item time {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  display: block !important;
  margin-top: 3px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em !important;
}

/* Activity empty state */
body[data-theme="momentum"] .mm-activity-empty {
  padding: var(--mm-sp-8) var(--mm-sp-5);
  text-align: center;
}
.mm-activity-empty-icon {
  font-size: 28px;
  opacity: 0.3;
  display: block;
  margin-bottom: var(--mm-sp-2);
}
.mm-activity-empty-text {
  font-size: var(--mm-text-base);
  font-weight: var(--mm-fw-medium);
  color: var(--mm-text-faint);
  display: block;
  margin-bottom: 4px;
}
.mm-activity-empty-hint {
  font-size: var(--mm-text-sm);
  color: var(--mm-text-empty);
  display: block;
}

/* ─────────────────────────────────────────────────────────────
   § 14. TAB BAR
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Phase 6: Segmented-control tab bar ─────────────────────
   Bigger hit targets, clearer active pill, consistent tokens.
─────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-header {
  background: #eceff5 !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.06) !important;
  padding: 4px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  gap: 2px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-header::-webkit-scrollbar {
  display: none !important;
}

/* Inactive tab — readable, not competing with active */
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn {
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 9px !important;
  background: transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  margin-bottom: 0 !important;
  outline: none !important;
  /* >= 40px touch target */
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background 120ms ease, color 120ms ease !important;
}
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn:hover {
  background: rgba(255,255,255,0.65) !important;
  color: #1e293b !important;
}

/* Active tab — clear white pill, stronger shadow for depth */
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.is-active,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.active {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  /* Crisp elevated pill */
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.12),
    0 0 0 0.5px rgba(15,23,42,0.08) !important;
  border-bottom-color: transparent !important;
  border-bottom-width: 0 !important;
}

body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn:focus-visible {
  outline: none !important;
  box-shadow: var(--mm-focus-ring) !important;
}

/* Count badge */
body[data-theme="momentum"] #detailPanel .contact-detail-tab-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  background: rgba(0, 0, 0, 0.08) !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  margin-left: 5px !important;
  color: #475569 !important;
  line-height: 1 !important;
  transition: background 120ms ease, color 120ms ease !important;
}
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.is-active .contact-detail-tab-count,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.active .contact-detail-tab-count {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}

/* Tab body */
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body {
  padding: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   § 15. DEALS / TASKS / RELATED SECTIONS in tabs
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .detailSection {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body[data-theme="momentum"] #detailPanel .related-section-header {
  padding: var(--mm-sp-3) var(--mm-sp-5) !important;
  background: transparent !important;
  border-radius: 0 !important;
}
body[data-theme="momentum"] #detailPanel .related-section-title {
  font-size: var(--mm-text-xs) !important;
  font-weight: var(--mm-fw-bold) !important;
  color: var(--mm-text-faint) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--mm-sp-2) !important;
}
body[data-theme="momentum"] #detailPanel .related-section-count {
  font-size: 10px !important;
  font-weight: var(--mm-fw-bold) !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  color: var(--mm-text-muted) !important;
}

/* ─────────────────────────────────────────────────────────────
   § 16. BUTTON SYSTEM in detail panel
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .btn.primary,
body[data-theme="momentum"] #detailPanel .btn-primary,
body[data-theme="momentum"] #detailPanel button.primary {
  background: var(--mm-accent) !important;
  border-color: var(--mm-accent) !important;
  color: #ffffff !important;
  font-weight: var(--mm-fw-semibold) !important;
  border-radius: var(--mm-radius-sm) !important;
  min-height: 32px !important;
  outline: none !important;
  transition: background var(--mm-tr), box-shadow var(--mm-tr) !important;
}
body[data-theme="momentum"] #detailPanel .btn.primary:hover,
body[data-theme="momentum"] #detailPanel .btn-primary:hover {
  background: #4f46e5 !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28) !important;
}
body[data-theme="momentum"] #detailPanel .btn.primary:focus-visible,
body[data-theme="momentum"] #detailPanel .btn-primary:focus-visible {
  box-shadow: var(--mm-focus-ring) !important;
}

body[data-theme="momentum"] #detailPanel .btn.ghost,
body[data-theme="momentum"] #detailPanel .btn-ghost {
  background: transparent !important;
  border: 1px solid var(--mm-border) !important;
  color: var(--mm-text-muted) !important;
  border-radius: var(--mm-radius-sm) !important;
  min-height: 32px !important;
  outline: none !important;
  transition: background var(--mm-tr) !important;
}
body[data-theme="momentum"] #detailPanel .btn.ghost:hover,
body[data-theme="momentum"] #detailPanel .btn-ghost:hover {
  background: #f1f5f9 !important;
  color: var(--mm-text-secondary) !important;
}
body[data-theme="momentum"] #detailPanel .btn.ghost:focus-visible,
body[data-theme="momentum"] #detailPanel .btn-ghost:focus-visible {
  box-shadow: var(--mm-focus-ring) !important;
}

body[data-theme="momentum"] #detailPanel .btn.small,
body[data-theme="momentum"] #detailPanel .btn-sm {
  font-size: var(--mm-text-sm) !important;
  padding: 5px var(--mm-sp-3) !important;
  min-height: 28px !important;
}

/* ─────────────────────────────────────────────────────────────
   § 17. EMPTY STATES
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .related-section-empty {
  padding: var(--mm-sp-8) var(--mm-sp-5) !important;
  text-align: center !important;
}
body[data-theme="momentum"] #detailPanel .related-section-empty-icon {
  font-size: 24px !important;
  opacity: 0.3 !important;
  display: block !important;
  margin-bottom: var(--mm-sp-2) !important;
}
body[data-theme="momentum"] #detailPanel .related-section-empty-text {
  font-size: var(--mm-text-base) !important;
  font-weight: var(--mm-fw-medium) !important;
  color: var(--mm-text-faint) !important;
  display: block !important;
  margin-bottom: 4px !important;
}
body[data-theme="momentum"] #detailPanel .related-section-empty p {
  font-size: var(--mm-text-sm) !important;
  color: var(--mm-text-empty) !important;
  margin: 4px 0 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   § 18. DEAL WORKSPACE (Panel)
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #dealWorkspaceMount .deal-workspace {
  background: var(--mm-bg) !important;
}
body[data-theme="momentum"] #dealWorkspaceMount .deal-main-content {
  background: var(--mm-bg) !important;
  gap: var(--mm-sp-3) !important;
}
body[data-theme="momentum"] #dealWorkspaceMount .deal-card {
  border-radius: var(--mm-radius) !important;
  box-shadow: var(--mm-shadow-xs) !important;
}
body[data-theme="momentum"] #dealWorkspaceMount .deal-header {
  background: var(--mm-surface) !important;
}

/* ─────────────────────────────────────────────────────────────
   § 19. DEALS LISTED IN DEALS TAB
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .deal-item,
body[data-theme="momentum"] #detailPanel .related-deal-item {
  border-radius: var(--mm-radius-sm) !important;
  border: 1px solid var(--mm-border) !important;
  background: var(--mm-surface) !important;
  transition: box-shadow var(--mm-tr) !important;
}
body[data-theme="momentum"] #detailPanel .deal-item:hover,
body[data-theme="momentum"] #detailPanel .related-deal-item:hover {
  box-shadow: var(--mm-shadow-md) !important;
}

/* ─────────────────────────────────────────────────────────────
   § 20. SCROLLBARS — thin, unobtrusive
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
body[data-theme="momentum"] #detailPanel ::-webkit-scrollbar-track {
  background: transparent;
}
body[data-theme="momentum"] #detailPanel ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
body[data-theme="momentum"] #detailPanel ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ─────────────────────────────────────────────────────────────
   § 21. INLINE EDIT — "saved" feedback flash
   Applied via JS by adding/removing .mm-field-saved
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .detailRow.mm-field-saved {
  background: #f0fdf4 !important;
  transition: background 0.8s ease !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 3 — RESPONSIVE (PHONE + iPAD)

   Breakpoints (Momentum-only — these do not affect Classic mode):
   • Mobile:  ≤ 639px   (portrait phones)
   • Tablet:  640–1023px (iPads portrait + landscape, large phones)
   • Desktop: ≥ 1024px  (unchanged from Phase 1/2)

   Existing app uses 768px + .is-mobile class; we respect that
   while adding Momentum-specific breakpoints on top.
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   § 22. PHASE 3 TOKENS + BASE COMPONENTS (all viewports)
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] {
  --mm-mobile-bar-h: 68px;   /* sticky bottom action bar height */
  --mm-seg-h:        40px;   /* segment control height          */
}

/* ── Segment control (Fields | Activity switcher) ─────────── */
/* Hidden by default; shown on mobile via media query          */
.mm-overview-seg {
  display: none;
  gap: 4px;
  padding: 4px;
  background: #eef0f4;
  border-radius: 10px;
  margin: 0 0 12px;
}

.mm-seg-btn {
  flex: 1;
  height: 32px;
  padding: 0 12px;
  border-radius: 7px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: background var(--mm-tr), color var(--mm-tr), box-shadow var(--mm-tr);
}

.mm-seg-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.mm-seg-btn:focus-visible {
  outline: none;
  box-shadow: var(--mm-focus-ring);
}

/* Show/hide columns based on active segment (applied by JS) */
body[data-theme="momentum"] .mm-seg-fields-active .contact-overview-right {
  display: none !important;
}
body[data-theme="momentum"] .mm-seg-activity-active .contact-overview-left {
  display: none !important;
}

/* ── Sticky mobile bottom action bar ───────────────────────── */
/* Hidden by default; shown on mobile/tablet via media query  */
.mm-mobile-bar {
  display: none;
}

.mm-mobile-bar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  min-height: 44px;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color var(--mm-tr);
  padding: 6px 4px;
  border-radius: 8px;
}

.mm-mobile-bar-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mm-mobile-bar-btn:hover { color: #6366f1; }
.mm-mobile-bar-btn:active { transform: scale(0.93); }
.mm-mobile-bar-btn:focus-visible {
  outline: none;
  box-shadow: var(--mm-focus-ring);
}

/* ── Collapsible section groups ──────────────────────────── */
/* Toggle button replaces the title bar on mobile */
.mm-collapsible-toggle {
  display: none; /* shown on mobile via @media */
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 40px;
  background: #fafbfc;
  border: none;
  border-bottom: 1px solid #f0f4f8;
  padding: 0 16px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: left;
  transition: background var(--mm-tr);
}

.mm-collapsible-toggle:hover { background: #f1f5f9; }
.mm-collapsible-toggle:focus-visible {
  outline: none;
  box-shadow: var(--mm-focus-ring);
}

.mm-collapsible-toggle svg.mm-chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform var(--mm-tr);
  color: #94a3b8;
}

.mm-collapsible-toggle[aria-expanded="false"] svg.mm-chevron {
  transform: rotate(-90deg);
}

/* Collapsible body */
.mm-group-body[data-collapsed="true"] {
  display: none;
}

/* ── Mobile inline edit: Save / Cancel row ──────────────── */
.mm-inline-edit-actions {
  display: none; /* shown on mobile via @media */
  gap: 8px;
  padding: 8px 16px 12px;
  background: white;
  border-top: 1px solid #e8edf2;
  box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.05);
}

.mm-inline-edit-cancel,
.mm-inline-edit-save {
  flex: 1;
  height: 40px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  transition: all var(--mm-tr);
}

.mm-inline-edit-cancel {
  background: #f8fafc;
  color: #64748b;
}
.mm-inline-edit-cancel:hover { background: #f1f5f9; }

.mm-inline-edit-save {
  background: #6366f1;
  border-color: #6366f1;
  color: #ffffff;
}
.mm-inline-edit-save:hover { background: #4f46e5; }
.mm-inline-edit-save:focus-visible,
.mm-inline-edit-cancel:focus-visible {
  outline: none;
  box-shadow: var(--mm-focus-ring);
}

/* ─────────────────────────────────────────────────────────────
   § 23. TABLET — 640–1023px
───────────────────────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {

  body[data-theme="momentum"] #detailPanel .contact-overview-layout {
    grid-template-columns: 62% 38% !important;
    gap: 14px !important;
  }

  body[data-theme="momentum"] #detailPanel .contactName {
    font-size: 22px !important;
  }

  body[data-theme="momentum"] #detailPanel .detailHeader {
    padding: 18px 20px !important;
  }

  /* Chips: allow 2-row wrap on tablet */
  .mm-stat-chips {
    flex-wrap: wrap;
    row-gap: 5px;
  }

  /* Tab bar: compact */
  body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn {
    padding: 11px 12px !important;
    font-size: 12px !important;
  }

  /* Communication bar: slightly compact */
  body[data-theme="momentum"] .overview-note-composer [data-ov-type],
  body[data-theme="momentum"] .overview-note-composer [data-ov-voice] {
    min-height: 40px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }

  /* Tablet: sticky bottom bar is shown */
  .mm-mobile-bar {
    display: flex;
    align-items: stretch;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9050;
    background: white;
    border-top: 1px solid #e4e9ef;
    padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.07);
  }

  /* Push content above the sticky bar */
  body[data-theme="momentum"] #detailPanel #detailContent {
    padding-bottom: calc(var(--mm-mobile-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Tablet: show inline edit actions */
  body[data-theme="momentum"] #detailPanel .mm-inline-edit-actions {
    display: flex !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   § 24. MOBILE — ≤ 639px
───────────────────────────────────────────────────────────── */
@media (max-width: 639px) {

  /* Detail panel and content: full viewport width, no max-width */
  body[data-theme="momentum"] #detailPanel,
  body[data-theme="momentum"] #detailPanel #detailContent {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Header: sticky, compact; 8px gutter so content uses full width ─── */
  body[data-theme="momentum"] #detailPanel .detailHeader {
    padding: 14px 8px 12px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  body[data-theme="momentum"] #detailPanel .detailHeader .detailHeaderMain {
    max-width: 100% !important;
  }
  /* Keep identity at 40% on medium screens unless mobile overrides */
  body[data-theme="momentum"] #detailPanel .detailHeader .detailHeaderMain.detail-header-stacked .detailHeaderIdentity {
    max-width: 40% !important;
  }

  body[data-theme="momentum"] #detailPanel .contactName {
    font-size: 19px !important;
    letter-spacing: -0.3px !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* Header actions: smaller buttons */
  body[data-theme="momentum"] #detailPanel #detailHeaderActions {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    width: 100% !important;
    padding-bottom: 2px !important;
  }
  body[data-theme="momentum"] #detailPanel #detailHeaderActions::-webkit-scrollbar {
    display: none !important;
  }
  body[data-theme="momentum"] #detailPanel #detailHeaderActions .btn {
    font-size: 11px !important;
    padding: 5px 8px !important;
    min-height: 30px !important;
    flex: 0 0 auto !important;
  }

  /* ── Chips: single-row horizontal scroll ── */
  .mm-stat-chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 5px !important;
    padding-bottom: 2px !important;
    padding-left: 0 !important;
    padding-right: 8px !important; /* match content gutter */
  }
  .mm-stat-chips::-webkit-scrollbar { display: none !important; }

  .mm-chip {
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: 56px !important;
    min-width: 102px !important;
    padding: 8px 10px !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }
  .mm-chip-label,
  .mm-chip-value {
    text-align: center !important;
  }
  .mm-chip-label { font-size: 9px !important; margin-bottom: 3px !important; line-height: 1.15 !important; }
  .mm-chip-value { font-size: 15px !important; line-height: 1.1 !important; }

  /* Quick actions: hide on phone; bottom bar icon buttons cover Deal/Task/Note */
  .mm-quick-actions,
  [data-mm-quick-actions] {
    display: none !important;
  }
  .mm-quick-btn {
    height: 30px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
  }

  /* ── Overview: single column + segment control ── */
  body[data-theme="momentum"] #detailPanel .contact-overview-layout {
    display: block !important;
    gap: 0 !important;
  }

  /* Show the segment control */
  .mm-overview-seg {
    display: flex !important;
  }

  /* ── Sticky bottom action bar: 20px wider to match content, 8px internal padding ── */
  .mm-mobile-bar {
    display: flex !important;
    align-items: stretch !important;
    position: fixed !important;
    left: -10px !important;
    right: -10px !important;
    width: calc(100% + 20px) !important;
    bottom: 0 !important;
    z-index: 9050 !important;
    background: white !important;
    border-top: 1px solid #e4e9ef !important;
    padding: 8px 18px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.09) !important;
    box-sizing: border-box !important;
  }
  .mm-mobile-bar .mm-mobile-bar-btn {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Content area 20px wider: negative margin + wider width, 8px internal padding */
  body[data-theme="momentum"] #detailPanel #detailContent {
    width: calc(100% + 20px) !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: calc(var(--mm-mobile-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  /* Header bleeds to edges of the wider content area, 8px internal padding */
  body[data-theme="momentum"] #detailPanel .detailHeader {
    margin-left: -8px !important;
    margin-right: -8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* ── Tab bar: full-width scroll ── */
  body[data-theme="momentum"] #detailPanel .contact-detail-tabs-header {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    padding: 0 4px !important;
    margin: 0 0 0 0 !important;
  }

  body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn {
    padding: 10px 10px !important;
    font-size: 12px !important;
    min-height: 42px !important;
  }

  /* Tab body: no horizontal padding; extra bottom padding so last items clear Alert FAB */
  body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body {
    padding: 0 !important;
    padding-bottom: 120px !important;
  }

  /* ── Tasks tab: full width, title wrap, larger tap targets on phone ── */
  body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .contact-tasks-section,
  body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .detailSection.contact-tasks-section {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body[data-theme="momentum"] #detailPanel .contact-tasks-section .related-section-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body[data-theme="momentum"] #detailPanel .contact-tasks-section .contact-deals-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  /* Task/event title: allow wrap so full text shows (no "Demo with..." truncation) */
  body[data-theme="momentum"] #detailPanel .contact-tasks-section .mm-task-title,
  body[data-theme="momentum"] #detailPanel .contact-tasks-section .task-row > div:nth-child(2) > div:first-child {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    text-overflow: unset !important;
    min-width: 0 !important;
  }
  /* Larger tap targets for Edit / Complete buttons on phone */
  body[data-theme="momentum"] #detailPanel .contact-tasks-section .task-row .btn,
  body[data-theme="momentum"] #detailPanel .contact-tasks-section .mm-task-actions .btn {
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  body[data-theme="momentum"] #detailPanel .contact-tasks-section .task-row .btn[title*="Edit"],
  body[data-theme="momentum"] #detailPanel .contact-tasks-section .mm-task-actions .btn:first-child {
    min-width: 48px !important;
  }
  /* Header + Task / + Event: larger on phone */
  body[data-theme="momentum"] #detailPanel .contact-tasks-section .related-section-btn {
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* ── Deals tab: full width, readable metrics and next action on phone ── */
  body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .contact-deals-section,
  body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .detailSection.contact-deals-section {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body[data-theme="momentum"] #detailPanel .contact-deals-section .contact-deal-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 2x2 grid so Amount/Probability/Weighted/Stage Age don't truncate */
  body[data-theme="momentum"] #detailPanel .contact-deals-section .contact-deal-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body[data-theme="momentum"] #detailPanel .contact-deals-section .contact-deal-metric {
    min-width: 0 !important;
    overflow: visible !important;
  }
  body[data-theme="momentum"] #detailPanel .contact-deals-section .contact-deal-metric .k,
  body[data-theme="momentum"] #detailPanel .contact-deals-section .contact-deal-metric .v {
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  body[data-theme="momentum"] #detailPanel .contact-deals-section .mm-deal-next-row {
    white-space: normal !important;
    word-wrap: break-word !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body[data-theme="momentum"] #detailPanel .contact-deals-section .mm-deal-next-text {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    display: block !important;
  }
  body[data-theme="momentum"] #detailPanel .contact-deals-section .contact-deal-next-action-pill {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* ── Section cards: edge-to-edge on phone ── */
  body[data-theme="momentum"] #detailPanel .contact-field-group {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
  }

  /* Section heading — match 8px content gutter */
  body[data-theme="momentum"] #detailPanel .contact-details-card h3 {
    padding: 14px 8px 4px !important;
    margin-bottom: 4px !important;
  }

  /* ── Field rows: label ABOVE value on phone ── */
  body[data-theme="momentum"] #detailPanel .detailRow {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    min-height: 52px !important;
    padding: 10px 8px !important;
  }

  body[data-theme="momentum"] #detailPanel .detailRow .label {
    min-width: unset !important;
    max-width: unset !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #64748b !important;   /* readable even at small mobile size */
    line-height: 1.2 !important;
  }

  body[data-theme="momentum"] #detailPanel .detailRow .value {
    font-size: 14px !important;
    width: 100% !important;
  }

  body[data-theme="momentum"] #detailPanel .inline-input {
    padding: 4px 0 !important;
    font-size: 14px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* Remove pencil affordance (hover doesn't exist on touch) */
  body[data-theme="momentum"] #detailPanel .detailRow::after {
    display: none !important;
  }
  /* Tap hint: subtle bottom border on readonly */
  body[data-theme="momentum"] #detailPanel .inline-input[readonly] {
    border-bottom: 1px solid transparent !important;
  }
  body[data-theme="momentum"] #detailPanel .detailRow:active .inline-input[readonly] {
    border-bottom-color: #d0d8e2 !important;
  }

  /* ── Collapsible toggle: show on mobile ── */
  .mm-collapsible-toggle {
    display: flex !important;
  }

  /* When group has collapsible toggle, hide the original CSS title bar */
  body[data-theme="momentum"] .mm-has-collapsible .contact-field-group-title {
    display: none !important;
  }

  /* ── Mobile inline edit: Save/Cancel ── */
  body[data-theme="momentum"] #detailPanel .mm-inline-edit-actions {
    display: flex !important;
  }

  /* ── Notes & Activity: slide way left on phone (break out of content padding) ── */
  body[data-theme="momentum"] #detailPanel .contact-overview-right {
    margin-left: -8px !important;
    margin-right: -8px !important;
    width: calc(100% + 16px) !important;
    max-width: none !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    box-sizing: border-box !important;
  }
  body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-header {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* ── Activity panel: edge-to-edge ── */
  body[data-theme="momentum"] #detailPanel .contact-overview-right > .detailSection {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body[data-theme="momentum"] .activityItem.contact-activity-item {
    padding: 10px 4px 10px 44px !important;
  }

  /* Composer on mobile: minimal horizontal padding */
  body[data-theme="momentum"] .overview-note-composer {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body[data-theme="momentum"] .overview-note-composer > div:first-child {
    padding: 10px 4px !important;
    gap: 5px !important;
  }

  body[data-theme="momentum"] .overview-note-composer [data-ov-type],
  body[data-theme="momentum"] .overview-note-composer [data-ov-voice] {
    min-height: 42px !important;
    flex: 1 1 calc(20% - 4px) !important;
    min-width: 52px !important;
    font-size: 10px !important;
    gap: 3px !important;
    flex-direction: column !important;
    padding: 6px 4px !important;
  }

  body[data-theme="momentum"] .overview-note-composer [data-ov-type] svg,
  body[data-theme="momentum"] .overview-note-composer [data-ov-voice] svg {
    width: 16px !important;
    height: 16px !important;
  }

  body[data-theme="momentum"] .overview-note-composer textarea {
    margin: 0 4px !important;
    width: calc(100% - 8px) !important;
    min-height: 72px !important;
    font-size: 14px !important;
  }

  body[data-theme="momentum"] .overview-note-composer-actions {
    padding: 8px 4px 10px !important;
  }

  /* Primary contact card: hide avatar + copy buttons on phone so name is visible */
  .mm-contact-card {
    padding: 10px 8px !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }
  .mm-contact-card .mm-contact-avatar {
    display: none !important;
  }
  .mm-contact-card .mm-contact-info {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .mm-contact-card .mm-contact-name {
    font-size: 13px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .mm-contact-card .mm-contact-action-copy {
    display: none !important;
  }

  /* ── Section card title bar: compact ── */
  body[data-theme="momentum"] #detailPanel .contact-field-group-title {
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   § 25. PHONE LANDSCAPE (< 640px, landscape orientation)
   Reduce vertical padding; keep chips scrollable.
───────────────────────────────────────────────────────────── */
@media (max-width: 639px) and (orientation: landscape) {
  body[data-theme="momentum"] #detailPanel .detailHeader {
    padding: 10px 8px !important;
  }

  body[data-theme="momentum"] #detailPanel .contactName {
    font-size: 17px !important;
  }

  /* Stack chips/actions in landscape before they overflow */
  .mm-stat-chips {
    max-width: 100%;
  }

  body[data-theme="momentum"] #detailPanel .detailRow {
    min-height: 44px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }

  body[data-theme="momentum"] #detailPanel .detailRow .label {
    min-width: 90px !important;
    max-width: 90px !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   § 26. LARGE DESKTOP (> 1280px) — tighter column ratio
───────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  body[data-theme="momentum"] #detailPanel .contact-overview-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr) !important;
    gap: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 4 — ELITE PRODUCT EXPERIENCE
   Micro-interactions · Skeleton · Toasts · Perceived performance
   Edge-case hardening · Design consistency · Keyboard power UX
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   § P4-A. KEYFRAME ANIMATIONS
───────────────────────────────────────────────────────────── */
@keyframes mmSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes mmShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes mmSpin {
  to { transform: rotate(360deg); }
}

@keyframes mmChipPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes mmSaveGlow {
  0%   { background: #f0fdf4; }
  60%  { background: #dcfce7; }
  100% { background: transparent; }
}

@keyframes mmToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes mmToastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* ─────────────────────────────────────────────────────────────
   § P4-B. SKELETON LOADER
   Used during contact-to-contact transitions
───────────────────────────────────────────────────────────── */
.mm-skeleton-wrap {
  padding: 24px;
  animation: mmFadeIn 0.15s ease forwards;
}

.mm-skeleton-line {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, #f0f4f8 25%, #e3eaf2 50%, #f0f4f8 75%);
  background-size: 200% 100%;
  animation: mmShimmer 1.4s ease-in-out infinite;
  margin-bottom: 10px;
}

.mm-skeleton-line.mm-sk-title  { height: 22px; width: 55%; margin-bottom: 12px; }
.mm-skeleton-line.mm-sk-meta   { height: 11px; width: 38%; margin-bottom: 16px; }
.mm-skeleton-line.mm-sk-chip   { height: 22px; width: 22%; display: inline-block; margin-right: 6px; border-radius: 11px; }
.mm-skeleton-line.mm-sk-short  { width: 40%; }
.mm-skeleton-line.mm-sk-medium { width: 65%; }
.mm-skeleton-line.mm-sk-long   { width: 80%; }

.mm-skeleton-card {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 10px;
}

/* ─────────────────────────────────────────────────────────────
   § P4-C. TOAST NOTIFICATION
   Lightweight, non-blocking, auto-dismissing
───────────────────────────────────────────────────────────── */
.mm-toast {
  position: fixed;
  bottom: 88px;  /* clears the mobile bar */
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #1e293b;
  color: #f8fafc;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 9999;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: mmToastIn 0.22s ease forwards;
  max-width: calc(100vw - 40px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.mm-toast-success { background: #166534; }
.mm-toast-error   { background: #991b1b; }

.mm-toast-hiding {
  animation: mmToastOut 0.22s ease forwards;
}

/* ─────────────────────────────────────────────────────────────
   § P4-D. MICRO-INTERACTIONS
───────────────────────────────────────────────────────────── */

/* Activity item slide-in (added by JS to new items) */
.mm-activity-entering {
  animation: mmSlideIn 0.22s ease forwards;
}

/* Chip update pulse (added/removed by JS) */
.mm-chip-updated {
  animation: mmChipPop 0.35s ease forwards;
}

/* Inline edit save flash — smoother than Phase 2 */
body[data-theme="momentum"] #detailPanel .detailRow.mm-field-saved {
  animation: mmSaveGlow 1.0s ease forwards !important;
  transition: none !important;
}

/* Saving spinner — small inline indicator */
.mm-saving-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #c7d2fe;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: mmSpin 0.55s linear infinite;
  vertical-align: middle;
  margin-left: 6px;
}

/* Button press tactile feedback */
body[data-theme="momentum"] .mm-quick-btn:active,
body[data-theme="momentum"] .mm-mobile-bar-btn:active,
body[data-theme="momentum"] .mm-seg-btn:active,
body[data-theme="momentum"] #detailPanel .btn:active {
  transform: translateY(1px) !important;
  transition: transform 60ms !important;
}

/* Contact card hover lift */
body[data-theme="momentum"] .mm-contact-card {
  transition: border-color var(--mm-tr), box-shadow var(--mm-tr), transform var(--mm-tr) !important;
}
body[data-theme="momentum"] .mm-contact-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--mm-shadow-md) !important;
}
body[data-theme="momentum"] .mm-contact-card:active {
  transform: translateY(0) !important;
}

/* ─────────────────────────────────────────────────────────────
   § P4-E. SMOOTH CONTENT TRANSITION
   Fade on contact switch instead of hard cut
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel #detailContent {
  /* Removed mmFadeIn animation — it caused a 3-blink on Firestore re-renders */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Skeleton replaces content during load */
body[data-theme="momentum"] #detailPanel #detailContent.mm-loading {
  pointer-events: none;
  opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────
   § P4-F. KEYBOARD SHORTCUT HINT on note composer
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .overview-note-composer::before {
  content: "Press N to focus";
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--mm-text-empty);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 16px 0;
  text-align: right;
  pointer-events: none;
}

body[data-theme="momentum"] .overview-note-composer:focus-within::before {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
   § P4-G. EDGE CASE HARDENING
───────────────────────────────────────────────────────────── */

/* Long company names: clamp to 3 lines max, never overflow */
body[data-theme="momentum"] #detailPanel .contactName {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Long value in field row: truncate with ellipsis */
body[data-theme="momentum"] #detailPanel .inline-input {
  text-overflow: ellipsis;
}

/* Tag overflow in Tags row: hide overflow */
body[data-theme="momentum"] #detailPanel .detailRow .value {
  overflow: hidden !important;
}

/* Long email / URL: always truncate in display */
body[data-theme="momentum"] #detailPanel .inline-input[type="email"],
body[data-theme="momentum"] #detailPanel .inline-input[type="url"],
body[data-theme="momentum"] #detailPanel .inline-input[data-key="website"],
body[data-theme="momentum"] #detailPanel .inline-input[data-key="email"] {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Chips: no max-width — let content determine width.
   Only revenue chips truncate; handled inline via formatCurrencyShort. */
.mm-chip {
  max-width: none;
}

.mm-chip-value {
  max-width: none;
}

/* Many tags: wrap gracefully */
body[data-theme="momentum"] #detailPanel .detailRow .value > * {
  max-width: 100%;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   § P4-H. POWER USER: COMPOSER FOCUS STATE
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .overview-note-composer:focus-within {
  box-shadow: 0 0 0 2px var(--mm-accent-border);
  border-radius: var(--mm-radius);
}

/* ─────────────────────────────────────────────────────────────
   § P4-I. DESIGN CONSISTENCY PATCHES
   One-off style overrides to ensure a clean, unified look
───────────────────────────────────────────────────────────── */

/* Ensure all cards in detail panel share identical shadows */
body[data-theme="momentum"] #detailPanel .deal-card,
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-card {
  box-shadow: var(--mm-shadow-xs) !important;
}

/* Normalize all section add-buttons */
body[data-theme="momentum"] #detailPanel .btn-add,
body[data-theme="momentum"] #detailPanel .related-section-add-btn,
body[data-theme="momentum"] #detailPanel [class*="add-btn"] {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: var(--mm-text-sm) !important;
  font-weight: var(--mm-fw-semibold) !important;
  border-radius: var(--mm-radius-sm) !important;
}

/* Consistent icon size in all action areas */
body[data-theme="momentum"] #detailPanel svg {
  flex-shrink: 0;
}

/* Remove redundant separator lines between cards */
body[data-theme="momentum"] #detailPanel .contact-details-card > hr,
body[data-theme="momentum"] #detailPanel .detailSection > hr {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   § P4-J. QUICK ACTION BUTTON REFINEMENT
   Visual distinction: icons on quick actions
───────────────────────────────────────────────────────────── */
.mm-quick-btn {
  gap: 5px !important;
  letter-spacing: 0 !important;
}

/* Deal button: green tint */
.mm-quick-btn[data-action="deal"]:hover {
  border-color: #86efac !important;
  background: #f0fdf4 !important;
  color: #15803d !important;
}

/* Task button: amber tint */
.mm-quick-btn[data-action="task"]:hover {
  border-color: #fcd34d !important;
  background: #fffbeb !important;
  color: #b45309 !important;
}

/* Note button: purple tint */
.mm-quick-btn[data-action="note"]:hover {
  border-color: #c4b5fd !important;
  background: #faf5ff !important;
  color: #7c3aed !important;
}

/* ─────────────────────────────────────────────────────────────
   § P4-K. MOMENTUM MOBILE BAR — ACTIVE STATE
───────────────────────────────────────────────────────────── */
.mm-mobile-bar-btn.mm-bar-active {
  color: var(--mm-accent) !important;
  background: var(--mm-accent-soft) !important;
  border-radius: 8px;
}

/* ─────────────────────────────────────────────────────────────
   § P4-L. SCROLL SMOOTHNESS
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel #detailContent {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ─────────────────────────────────────────────────────────────
   § P4-M. INLINE VALUE FORMATTING HINTS
   Revenue values formatted by JS get a subtle style
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .mm-formatted-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ─────────────────────────────────────────────────────────────
   § 27. LIGHT-OVERRIDE SHIELD
   When Momentum is active, force white/light surfaces everywhere
   in the detail panel — beats html[data-theme="dark"] !important
   rules from styles-master.css because this file loads last.
───────────────────────────────────────────────────────────── */

/* The entire detail panel: always light in momentum.
   Covers all classes targeted by html[data-theme="dark"] rules. */
body[data-theme="momentum"] #detailPanel,
body[data-theme="momentum"] #detailContent,
body[data-theme="momentum"] .detailPane,
body[data-theme="momentum"] .detailPane > *,
body[data-theme="momentum"] #detailPanel .row,
body[data-theme="momentum"] #detailPanel .paneHead,
body[data-theme="momentum"] #detailPanel .filters,
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-card,
body[data-theme="momentum"] #detailPanel .deal-card,
body[data-theme="momentum"] #detailPanel .detailSection {
  background: #ffffff !important;
  color: var(--mm-text-primary, #0f172a) !important;
}

/* Page-level bg still uses the soft gray */
body[data-theme="momentum"] #detailPanel,
body[data-theme="momentum"] #detailContent {
  background: #f7f9fc !important;
}

/* Header strip (Back / Edit / Note / Compose / Actions)
   Extra vertical padding + overflow:visible so lifted buttons aren't clipped */
body[data-theme="momentum"] #detailPanel .detailTopStrip,
body[data-theme="momentum"] #detailPanel .paneHead,
body[data-theme="momentum"] #detailPanel .detailHeader,
body[data-theme="momentum"] .paneHead.detailTopStrip {
  background: #ffffff !important;
  color: var(--mm-text-primary, #0f172a) !important;
  border-color: var(--mm-border, #e4e9ef) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  overflow: visible !important;
  min-height: 56px !important;
}

/* All buttons in the header strip */
body[data-theme="momentum"] #detailPanel .detailTopStrip .btn,
body[data-theme="momentum"] #detailPanel .detailTopStrip .detail-action-btn,
body[data-theme="momentum"] .paneHead.detailTopStrip .btn {
  background: #ffffff !important;
  color: #334155 !important;
  border-color: #dde4ec !important;
}
body[data-theme="momentum"] #detailPanel .detailTopStrip .btn:hover,
body[data-theme="momentum"] .paneHead.detailTopStrip .btn:hover {
  background: #f1f5f9 !important;
}

/* Tab bar: keep the tinted gray bg (set in §14); only override the body/nav */
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-header {
  background: #edf0f5 !important;   /* segmented control tint — not white */
  color: var(--mm-text-primary, #0f172a) !important;
  border-color: transparent !important;
}
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-nav,
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body {
  background: #ffffff !important;
  color: var(--mm-text-primary, #0f172a) !important;
}

/* Field group cards */
body[data-theme="momentum"] #detailPanel .contact-field-group,
body[data-theme="momentum"] #detailPanel .detailSection,
body[data-theme="momentum"] #detailPanel .contact-details-card {
  background: #ffffff !important;
  color: var(--mm-text-primary, #0f172a) !important;
  border-color: var(--mm-border, #e4e9ef) !important;
}

/* Field group title bar */
body[data-theme="momentum"] #detailPanel .contact-field-group-title {
  background: #fafbfc !important;
  color: #94a3b8 !important;
  border-color: #f0f4f8 !important;
}

/* Field rows */
body[data-theme="momentum"] #detailPanel .detailRow {
  background: transparent !important;
  color: #334155 !important;
  border-color: #f0f4f8 !important;
}
body[data-theme="momentum"] #detailPanel .detailRow .label {
  color: #64748b !important;
}
body[data-theme="momentum"] #detailPanel .detailRow .value {
  color: #334155 !important;
}

/* Disabled selects (owner dropdown): beat browser's opacity/color grayout */
body[data-theme="momentum"] #detailPanel .detailRow select,
body[data-theme="momentum"] #detailPanel .detailRow select:disabled,
body[data-theme="momentum"] #detailPanel .detailRow .inline-select,
body[data-theme="momentum"] #detailPanel .detailRow .inline-select:disabled {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  opacity: 1 !important;
}

/* Primary contact row: ensure phone/email spans are readable.
   ui.js leaves them unstyled so they can inherit light colors. */
body[data-theme="momentum"] #detailPanel .primary-contact-row,
body[data-theme="momentum"] #detailPanel .contact-field-row {
  color: #334155 !important;
}
body[data-theme="momentum"] #detailPanel .primary-contact-row span,
body[data-theme="momentum"] #detailPanel .contact-field-row span {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}
/* Keep the separator · slightly muted but still visible */
body[data-theme="momentum"] #detailPanel .primary-contact-row span[style*="color:#94a3af"],
body[data-theme="momentum"] #detailPanel .primary-contact-row span[style*="color:#9ca3af"] {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

/* Tags field: dropdown stays on top; wrapper must not clip the menu */
#detailPanel .detail-tags-edit-wrapper,
#detailPanel .compact-tag-picker {
  overflow: visible !important;
}
body[data-theme="momentum"] #detailPanel .detailRow .value > .detail-tags-edit-wrapper {
  overflow: visible !important;
}
#detailPanel .tag-dropdown,
body > .tag-dropdown {
  z-index: 2147483647 !important;
}
/* Portaled tag menu: opaque panel + readable options (inline JS sets position; CSS enforces surface) */
body[data-theme="momentum"] #detailPanel .tag-dropdown,
body[data-theme="momentum"] > .tag-dropdown.tag-dropdown--portal {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  -webkit-overflow-scrolling: touch !important;
}
body[data-theme="momentum"] #detailPanel .tag-dropdown .tag-dropdown-option,
body[data-theme="momentum"] > .tag-dropdown.tag-dropdown--portal .tag-dropdown-option {
  font-size: 13px !important;
  line-height: 1.35 !important;
  border-radius: 8px !important;
  transition: background 120ms ease !important;
}
body[data-theme="momentum"] #detailPanel .tag-dropdown .tag-dropdown-option:hover,
body[data-theme="momentum"] > .tag-dropdown.tag-dropdown--portal .tag-dropdown-option:hover {
  background: #f1f5f9 !important;
}

/* Inline inputs */
body[data-theme="momentum"] #detailPanel .inline-input {
  background: transparent !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;  /* beats browser's disabled grayout */
  opacity: 1 !important;
  border-color: transparent !important;
}
body[data-theme="momentum"] #detailPanel .inline-input:focus {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  color-scheme: light !important;
}

/* Notes & Activity right panel */
body[data-theme="momentum"] #detailPanel .contact-overview-right > .detailSection,
body[data-theme="momentum"] #detailPanel .overview-note-composer,
body[data-theme="momentum"] #detailPanel .contact-activity-feed,
body[data-theme="momentum"] #detailPanel .activityLog {
  background: #ffffff !important;
  color: var(--mm-text-secondary, #334155) !important;
  border-color: var(--mm-border, #e4e9ef) !important;
}

/* Note textarea */
body[data-theme="momentum"] #detailPanel .overview-note-composer textarea,
body[data-theme="momentum"] #detailPanel .overview-note-composer .textarea {
  background: #fafbfc !important;
  color: #1e293b !important;
  border-color: var(--mm-border, #e4e9ef) !important;
}
body[data-theme="momentum"] #detailPanel .overview-note-composer textarea:focus {
  background: #ffffff !important;
}

/* Activity items */
body[data-theme="momentum"] #detailPanel .activityItem,
body[data-theme="momentum"] #detailPanel .activityItem.contact-activity-item {
  background: transparent !important;
  color: #334155 !important;
}
body[data-theme="momentum"] #detailPanel .activityItem > div {
  color: #334155 !important;
}
body[data-theme="momentum"] #detailPanel .activityItem time {
  color: #94a3b8 !important;
}

/* Primary contact section: light blue background so it stands out */
body[data-theme="momentum"] #detailPanel .detailPrimaryContactRow,
body[data-theme="momentum"] #detailPanel .primary-contact-row {
  background: #f5f9ff !important;
  border: 1px solid #e0e7ff !important;
  border-radius: 8px !important;
}
body[data-theme="momentum"] #detailPanel .detailPrimaryContactRow {
  padding: 12px 16px !important;
}

/* Multi-field email/phone chips */
body[data-theme="momentum"] #detailPanel .contact-multi-action-btn {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #dde4ec !important;
}

/* Any inline style white/light overrides still being forced dark */
body[data-theme="momentum"] #detailPanel [style*="background: #0"],
body[data-theme="momentum"] #detailPanel [style*="background:#0"],
body[data-theme="momentum"] #detailPanel [style*="background: #1"] {
  background: #ffffff !important;
}

/* § 23. DARK MODE — token overrides only
───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body[data-theme="momentum"] {
    --mm-bg:            #0f1623;
    --mm-surface:       #161f2e;
    --mm-border:        rgba(255,255,255,0.10);
    --mm-border-subtle: rgba(255,255,255,0.06);
    --mm-text-primary:  #f0f4f8;
    --mm-text-secondary:#c8d3de;
    --mm-text-muted:    #8899aa;
    --mm-text-faint:    #637080;
    --mm-text-empty:    #3d4e5e;
  }

  body[data-theme="momentum"] #detailPanel .contact-field-group-title {
    background: rgba(255,255,255,0.03) !important;
  }
  body[data-theme="momentum"] .mm-chip {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
  }
  body[data-theme="momentum"] .mm-contact-card {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.25);
  }
  body[data-theme="momentum"] .mm-quick-btn {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
    color: var(--mm-text-secondary);
  }

  /* Detail form: keep dropdowns and inputs light so text stays readable */
  body[data-theme="momentum"] #detailPanel .detailRow select,
  body[data-theme="momentum"] #detailPanel .detailRow select:focus,
  body[data-theme="momentum"] #detailPanel .detailRow .inline-input,
  body[data-theme="momentum"] #detailPanel .detailRow .inline-input:focus {
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    color-scheme: light !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 11 — FINAL RECORD PAGE REFINEMENT
   Date groups · Composer expansion · Field-as-information
═══════════════════════════════════════════════════════════ */

/* P11-A. ACTIVITY DATE GROUP SEPARATORS */
body[data-theme="momentum"] .mm-timeline-group {
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 14px 16px 5px 44px;
  position: relative;
  z-index: 1;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
body[data-theme="momentum"] .mm-timeline-group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e8edf2;
}
body[data-theme="momentum"] .mm-timeline-group:first-child {
  padding-top: 6px;
}

/* P11-B. COMPOSER INLINE EXTENSION FIELDS */
body[data-theme="momentum"] .mm-composer-ext {
  margin: 0 var(--mm-sp-4) 6px;
  animation: mmSlideIn 0.18s ease forwards;
}
body[data-theme="momentum"] .mm-ext-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
body[data-theme="momentum"] .mm-ext-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 100px;
}
body[data-theme="momentum"] .mm-ext-field.mm-ext-full {
  flex: 1 1 100%;
}
body[data-theme="momentum"] .mm-ext-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
body[data-theme="momentum"] .mm-ext-input {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  background: #f8fafc;
  color: #1e293b;
  transition: border-color 150ms, background 150ms;
  outline: none;
}
body[data-theme="momentum"] .mm-ext-text {
  width: 100%;
}
body[data-theme="momentum"] .mm-ext-input:focus {
  border-color: var(--mm-accent);
  background: #ffffff;
  box-shadow: var(--mm-focus-ring);
}

/* P11-C. FIELD ROWS AS INFORMATION */
body[data-theme="momentum"] #detailPanel .inline-input[readonly] {
  border-color: transparent !important;
  background: transparent !important;
  cursor: text !important;
  padding-left: 0 !important;
}
body[data-theme="momentum"] #detailPanel .detailRow:hover .inline-input[readonly] {
  background: #f4f7fa !important;
  border-color: #dde4ee !important;
  padding-left: var(--mm-sp-2) !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}
body[data-theme="momentum"] #detailPanel .inline-input[readonly]:placeholder-shown {
  opacity: 0.4 !important;
  font-style: italic !important;
}

/* P11-D. AT-RISK PULSE */
@keyframes mmAttentionPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.18); }
  50%       { box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}
body[data-theme="momentum"] .mm-health-signal[data-mm-health="at_risk"] {
  animation: mmAttentionPulse 2.4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 9 — SMALL TEAM SALES UX
   Health signal · Last touch · Inline task · Solo-friendly
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   § P9-A. ACCOUNT HEALTH SIGNAL
   Tiny coloured badge next to company name.
   Intentionally small — solo users should barely notice it.
───────────────────────────────────────────────────────────── */
/* The badge is injected with inline styles for colour theming;
   this rule just handles shared layout properties. */
body[data-theme="momentum"] .mm-health-signal {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  cursor: default !important;
  user-select: none !important;
  transition: opacity var(--mm-tr) !important;
}
body[data-theme="momentum"] .mm-health-signal:hover {
  opacity: 0.8 !important;
}

/* ─────────────────────────────────────────────────────────────
   § P9-B. LAST TEAM TOUCH LINE
   Subtle muted line. Solo users see just "Last touch · Xd ago".
   Team users see "Last touched by Sarah · Xd ago".
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .mm-last-touch {
  display: block;
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 2px;
  user-select: none;
}
body[data-theme="momentum"] .mm-last-touch strong {
  color: #64748b;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   § P9-C. INLINE NEXT TASK BLOCK
   Compact task card with Complete / Reschedule / Edit actions.
   Sits in the header area so it's always visible.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .mm-next-task-block {
  margin-top: 10px;
  background: #fffbf2;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 10px 14px 8px;  /* 14px right to align edit button with deal row */
  width: 100%;     /* same full width as deal block */
  max-width: none;
}

/* Top row: icon + title/due */
body[data-theme="momentum"] .mm-next-task-top {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

body[data-theme="momentum"] .mm-next-task-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.3;
}

body[data-theme="momentum"] .mm-next-task-info {
  flex: 1;
  min-width: 0;
}

body[data-theme="momentum"] .mm-next-task-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}

body[data-theme="momentum"] .mm-next-task-due {
  font-size: 11px;
  color: #b45309;
  font-weight: 500;
  margin-top: 2px;
}

/* Action button row */
body[data-theme="momentum"] .mm-next-task-actions {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  flex-wrap: wrap;
}

body[data-theme="momentum"] .mm-task-action-btn {
  flex: 1 1 0;          /* equal width regardless of label length */
  justify-content: center;
  height: 30px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  transition: background 140ms, border-color 140ms, color 140ms;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

/* Complete — green */
body[data-theme="momentum"] .mm-task-complete {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}
body[data-theme="momentum"] .mm-task-complete:hover {
  background: #dcfce7;
  border-color: #4ade80;
}

/* Reschedule — amber */
body[data-theme="momentum"] .mm-task-reschedule {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
body[data-theme="momentum"] .mm-task-reschedule:hover {
  background: #fef3c7;
  border-color: #fbbf24;
}

/* Edit — neutral */
body[data-theme="momentum"] .mm-task-edit {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #4f46e5;
}
body[data-theme="momentum"] .mm-task-edit:hover {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.5);
  color: #4338ca;
}

/* Focus rings */
body[data-theme="momentum"] .mm-task-action-btn:focus-visible {
  outline: none;
  box-shadow: var(--mm-focus-ring);
}

/* Mobile: task block full width */
@media (max-width: 639px) {
  body[data-theme="momentum"] .mm-next-task-block {
    max-width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   § P9-D. SOLO USER CLARITY
   If only one stat chip is present, reduce visual density.
───────────────────────────────────────────────────────────── */
/* When the last-touch line is showing, give slightly more breathing room */
body[data-theme="momentum"] .mm-last-touch + [data-mm-deals],
body[data-theme="momentum"] .mm-last-touch + [data-mm-next-task] {
  margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 8 — RELATIONSHIP-CENTRIC UX
   Deal context block · Quick note · Composer type states · Timeline
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   § P8-A. DEAL CONTEXT BLOCK
   Compact open-deals strip injected below stat chips.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .mm-deal-context {
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.07);
  overflow: hidden;
  width: 100%;     /* stretch to full available width */
  max-width: none; /* no cap — matches stat chips and task block */
}

/* Match vertical space between deal box and primary contact to space between open-deals KPI and deal box */
body[data-theme="momentum"] #detailPanel .detailHeaderIdentity .detailPrimaryContactRow {
  margin-top: 10px !important;
}

/* Header row */
body[data-theme="momentum"] .mm-deal-context-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 7px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbfd;
}

body[data-theme="momentum"] .mm-deal-context-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

body[data-theme="momentum"] .mm-deal-context-viewall {
  font-size: 11px;
  font-weight: 600;
  color: #6366f1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 150ms;
}
body[data-theme="momentum"] .mm-deal-context-viewall:hover {
  color: #4f46e5;
}

/* View all → when placed to the right of deal rows (no header) */
body[data-theme="momentum"] .mm-deal-context > .mm-deal-context-viewall {
  flex-shrink: 0;
  align-self: center;
}

/* Individual deal row */
body[data-theme="momentum"] .mm-deal-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #f8fafc;
  cursor: pointer;
  transition: background 140ms;
}

body[data-theme="momentum"] .mm-deal-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.08);
  color: #4f46e5;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
  box-sizing: border-box;
}
body[data-theme="momentum"] .mm-deal-open-btn svg {
  width: 14px !important;
  height: 14px !important;
}
body[data-theme="momentum"] .mm-deal-open-btn:hover {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.5);
  color: #4338ca;
}
body[data-theme="momentum"] .mm-deal-row:last-child {
  border-bottom: none;
}
body[data-theme="momentum"] .mm-deal-row:hover {
  background: #f5f8ff;
}

body[data-theme="momentum"] .mm-deal-row-name {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-theme="momentum"] .mm-deal-row-stage {
  font-size: 11px;
  font-weight: 600;
  color: #6366f1;
  background: #eef2ff;
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

body[data-theme="momentum"] .mm-deal-row-prob {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

body[data-theme="momentum"] .mm-deal-row-value {
  font-size: 12px;
  font-weight: 700;
  color: #15803d;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

body[data-theme="momentum"] .mm-deal-context-empty {
  padding: 12px;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────
   § P8-B. ACTIVITY COMPOSER — IMPROVED LAYOUT & TYPE STATES
───────────────────────────────────────────────────────────── */

/* Type button active state (Phase 8 JS adds .mm-type-active) */
body[data-theme="momentum"] .overview-note-composer [data-ov-type].mm-type-active,
body[data-theme="momentum"] .overview-note-composer [data-ov-voice].mm-type-active {
  background: var(--mm-accent-soft) !important;
  border-color: var(--mm-accent-border) !important;
  color: var(--mm-accent) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.1) !important;
}

/* Call active */
body[data-theme="momentum"] .overview-note-composer [data-ov-type="call"].mm-type-active {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #15803d !important;
  box-shadow: 0 0 0 2px rgba(22,163,74,0.1) !important;
}

/* Email active */
body[data-theme="momentum"] .overview-note-composer [data-ov-type="email"].mm-type-active {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1) !important;
}

/* SMS active */
body[data-theme="momentum"] .overview-note-composer [data-ov-type="sms"].mm-type-active {
  background: #fdf4ff !important;
  border-color: #d8b4fe !important;
  color: #7c3aed !important;
  box-shadow: 0 0 0 2px rgba(124,58,237,0.1) !important;
}

/* Voice active */
body[data-theme="momentum"] .overview-note-composer [data-ov-voice].mm-type-active {
  background: #fff1f2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,0.1) !important;
}

/* Composer: emphasise primary Save Note button */
body[data-theme="momentum"] .overview-note-composer .btn.primary,
body[data-theme="momentum"] .overview-note-composer-actions .btn.primary {
  background: #6366f1 !important;
  color: #fff !important;
  border-color: #6366f1 !important;
  font-weight: 700 !important;
  min-width: 90px !important;
  box-shadow: 0 1px 4px rgba(99,102,241,0.25) !important;
}
body[data-theme="momentum"] .overview-note-composer .btn.primary:hover,
body[data-theme="momentum"] .overview-note-composer-actions .btn.primary:hover {
  background: #4f46e5 !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.35) !important;
}

/* "Cmd/Ctrl+Enter to save" hint + Enter key note */
body[data-theme="momentum"] .overview-note-hint,
body[data-theme="momentum"] .overview-note-composer-actions .overview-note-hint {
  font-size: 10.5px !important;
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

/* ─────────────────────────────────────────────────────────────
   § P8-C. TIMELINE: STRONGER VISUAL HIERARCHY
   Larger bubbles, stronger title, tighter meta.
───────────────────────────────────────────────────────────── */

/* Larger icon bubbles for clearer type scanning */
body[data-theme="momentum"] .mm-activity-bubble {
  width: 28px !important;
  height: 28px !important;
  font-size: 14px !important;
  left: 6px !important;
  top: 11px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 2px #dde6f0 !important;
}

/* Spine: slightly more visible */
body[data-theme="momentum"] .contact-activity-feed::before {
  left: 15px !important;
  width: 2px !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #d1dbe8 6%,
    #d1dbe8 94%,
    transparent 100%
  ) !important;
}

/* Item left padding matches bubble position */
body[data-theme="momentum"] .activityItem.contact-activity-item {
  padding: 10px 12px 10px 40px !important;
  border-radius: 8px !important;
}

/* Title: strong, not just medium weight */
body[data-theme="momentum"] .activityItem.contact-activity-item .mm-timeline-title,
body[data-theme="momentum"] .activityItem.contact-activity-item > div:not(.mm-activity-bubble) {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  line-height: 1.4 !important;
}

/* Meta: clearly subordinate */
body[data-theme="momentum"] .activityItem.contact-activity-item .mm-timeline-meta,
body[data-theme="momentum"] .activityItem.contact-activity-item time {
  font-size: 11px !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
  letter-spacing: 0.01em !important;
}

/* ─────────────────────────────────────────────────────────────
   § P8-D. SALES WORKFLOW: QUICK-ACTION BUTTON IMPROVEMENTS
   Each button has a semantic hover tint for faster scanning.
───────────────────────────────────────────────────────────── */

/* Deal button → green */
body[data-theme="momentum"] #detailPanel .mm-quick-btn[data-action="deal"]:hover,
body[data-theme="momentum"] .mm-quick-btn[data-action="deal"]:hover {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;
}

/* Task button → amber */
body[data-theme="momentum"] #detailPanel .mm-quick-btn[data-action="task"]:hover,
body[data-theme="momentum"] .mm-quick-btn[data-action="task"]:hover {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
  -webkit-text-fill-color: #92400e !important;
}

/* Note button → indigo */
body[data-theme="momentum"] #detailPanel .mm-quick-btn[data-action="note"]:hover,
body[data-theme="momentum"] .mm-quick-btn[data-action="note"]:hover {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
  -webkit-text-fill-color: #4338ca !important;
}

/* Mobile: deal block scrolls with page */
@media (max-width: 639px) {
  body[data-theme="momentum"] .mm-deal-context {
    max-width: 100% !important;
  }
  body[data-theme="momentum"] .mm-deal-row {
    grid-template-columns: 1fr auto auto !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  body[data-theme="momentum"] .mm-deal-row-stage,
  body[data-theme="momentum"] .mm-deal-row-prob {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   § FINAL POLISH PASS
   Targeted fixes for all remaining visual imperfections.
───────────────────────────────────────────────────────────── */

/* 1. Remove the classic UI's section collapse buttons in momentum
      (those small blue dot/arrow toggles on section right edges) */
body[data-theme="momentum"] #detailPanel .contact-field-group-collapse-btn,
body[data-theme="momentum"] #detailPanel [class*="collapse-btn"],
body[data-theme="momentum"] #detailPanel [class*="expand-btn"],
body[data-theme="momentum"] #detailPanel .field-group-toggle {
  display: none !important;
}

/* 2. PRIMARY CONTACT sub-row in Identity card: ensure all text is readable */
body[data-theme="momentum"] #detailPanel .primary-contact-row div,
body[data-theme="momentum"] #detailPanel .contact-field-row > div,
body[data-theme="momentum"] #detailPanel .primary-contact-row {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* 3. Consistent add-field buttons (+Add Phones, +Add Emails, +Add Address) */
body[data-theme="momentum"] #detailPanel .add-field-btn,
body[data-theme="momentum"] #detailPanel [class*="add-field"],
body[data-theme="momentum"] #detailPanel .btn-add-item,
body[data-theme="momentum"] #detailPanel [class*="add-btn"]:not(.deal-add-task-btn) {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #4a6885 !important;
  -webkit-text-fill-color: #4a6885 !important;
  background: #f0f5fb !important;
  border: 1px solid #b8cce0 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  height: 28px !important;
  cursor: pointer !important;
}
body[data-theme="momentum"] #detailPanel [class*="add-btn"]:not(.deal-add-task-btn) {
  padding: 25px 5px !important;
}

/* 4. The "Work" / "Home" type-label badges in multi-field rows */
body[data-theme="momentum"] #detailPanel .multi-field-detail-row .field-type-label,
body[data-theme="momentum"] #detailPanel .contact-field-type-select,
body[data-theme="momentum"] #detailPanel select.field-type-select {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #5a7080 !important;
  -webkit-text-fill-color: #5a7080 !important;
  opacity: 1 !important;
}

/* 5. Notes & Activity: make the section header bolder/clearer */
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #4a5568 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
}
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-count {
  background: #dde5f0 !important;
  color: #3a5070 !important;
  font-weight: 700 !important;
}

/* 6. Multi-field row phone/email values — readable dark text */
body[data-theme="momentum"] #detailPanel .multi-field-detail-row input,
body[data-theme="momentum"] #detailPanel .multi-field-detail-row .field-value {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  opacity: 1 !important;
  font-size: 14px !important;
}

/* 7. Placeholder text — clearly lighter than real values */
body[data-theme="momentum"] #detailPanel input::placeholder,
body[data-theme="momentum"] #detailPanel textarea::placeholder {
  color: #b0bfcc !important;
  -webkit-text-fill-color: initial !important;
  opacity: 0.7 !important;
}

/* 8. Section header action buttons (Back/Edit/Note/PayLink etc.) — crisp */
body[data-theme="momentum"] #detailPanel .detailTopStrip .btn,
body[data-theme="momentum"] #detailPanel .detail-action-btn {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  border-color: #c8d5e0 !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  height: 34px !important;
}
body[data-theme="momentum"] #detailPanel .detailTopStrip .btn:hover,
body[data-theme="momentum"] #detailPanel .detail-action-btn:hover {
  background: #f0f5fa !important;
  border-color: #8fa5bc !important;
}

/* + Add strip (Deal, Task, Event, Relationship, Document) — soft blue, not white */
body[data-theme="momentum"] #detailPanel .detail-quick-add-btns {
  background: #dbeafe !important;
  border: 1px solid #93c5fd !important;
  border-radius: 10px !important;
}
body[data-theme="momentum"] #detailPanel .detail-quick-add-btn,
body[data-theme="momentum"] #detailPanel .detail-action-btn.detail-quick-add-btn {
  background: transparent !important;
}
body[data-theme="momentum"] #detailPanel .detail-quick-add-btn:hover,
body[data-theme="momentum"] #detailPanel .detail-action-btn.detail-quick-add-btn:hover {
  background: rgba(147, 197, 253, 0.4) !important;
  border-color: transparent !important;
}

/* Back To Person button — keep purple bg + white text for visibility */
body[data-theme="momentum"] #detailPanel .back-to-person-btn,
body[data-theme="momentum"] .back-to-person-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  border-color: #5b21b6 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body[data-theme="momentum"] #detailPanel .back-to-person-btn:hover,
body[data-theme="momentum"] .back-to-person-btn:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  border-color: #5b21b6 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 9. Activity feed items: clean, consistent typography */
body[data-theme="momentum"] #detailPanel .activityItem > div:first-child {
  color: #2d3748 !important;
  -webkit-text-fill-color: #2d3748 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
body[data-theme="momentum"] #detailPanel .activityItem time {
  color: #7a8fa8 !important;
  font-size: 11px !important;
}

/* 10. Next Action row value — make task label clearly visible */
body[data-theme="momentum"] #detailPanel .detailRow .next-action-pill,
body[data-theme="momentum"] #detailPanel [class*="next-action"] {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

/* 11. Tags & Actions section — Tags input should look neutral */
body[data-theme="momentum"] #detailPanel .detailRow .value .tags-container,
body[data-theme="momentum"] #detailPanel .detailRow .value [class*="tag"] {
  color: #334155 !important;
}

/* 12. Prevent section header titles from getting too faint */
body[data-theme="momentum"] #detailPanel .contact-field-group-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #7a8fa8 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════
   § PHASE 5 — STEP 5+7: TOKEN AUDIT + FINISHING PASS
   Consistent button sizing, transitions, focus rings, spacing.
═══════════════════════════════════════════════════════════════ */

/* ── Spacing rhythm in the header ─────────────────────────── */
body[data-theme="momentum"] #detailPanel .detailHeaderIdentity {
  gap: 6px !important;
}

/* Space between name and the identity column */
body[data-theme="momentum"] #detailPanel .detailHeader {
  padding: 22px 24px 20px !important;
}

/* ── Consistent transitions on ALL interactive Momentum elements ── */
body[data-theme="momentum"] #detailPanel .btn,
body[data-theme="momentum"] #detailPanel button,
body[data-theme="momentum"] .mm-chip,
body[data-theme="momentum"] .mm-quick-btn,
body[data-theme="momentum"] .mm-contact-action-btn,
body[data-theme="momentum"] .mm-contact-card,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn,
body[data-theme="momentum"] .activityItem.contact-activity-item {
  transition: background 150ms cubic-bezier(0.4,0,0.2,1),
              border-color 150ms cubic-bezier(0.4,0,0.2,1),
              box-shadow 150ms cubic-bezier(0.4,0,0.2,1),
              color 150ms cubic-bezier(0.4,0,0.2,1),
              transform 150ms cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── Universal focus ring for keyboard users ─────────────── */
body[data-theme="momentum"] #detailPanel :focus-visible,
body[data-theme="momentum"] .mm-quick-btn:focus-visible,
body[data-theme="momentum"] .mm-contact-action-btn:focus-visible,
body[data-theme="momentum"] .mm-chip:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22) !important;
  border-radius: 6px !important;
}

/* ── Button height normalization across all Momentum buttons ── */
body[data-theme="momentum"] #detailPanel .btn.small,
body[data-theme="momentum"] #detailPanel .btn-sm {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}
body[data-theme="momentum"] #detailPanel .btn:not(.btn.small):not(.btn-sm) {
  min-height: 32px !important;
  padding: 6px 13px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

/* ── Field card: minimal border, no shadow ─────────────── */
body[data-theme="momentum"] #detailPanel .contact-field-group {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
}

/* Card title bar: clean uppercase label */
body[data-theme="momentum"] #detailPanel .contact-field-group-title {
  background: #fafbfd !important;
  border-bottom: 1px solid rgba(15,23,42,0.04) !important;
  padding: 9px 16px !important;
  min-height: 36px !important;
}

/* ── Missing value consistent placeholder ─────────────────── */
body[data-theme="momentum"] #detailPanel .inline-input[value=""],
body[data-theme="momentum"] #detailPanel .inline-input:not([value]) {
  font-style: italic !important;
  color: #b8c6d6 !important;
  -webkit-text-fill-color: #b8c6d6 !important;
}

/* Ensure "—" placeholder for empty fields matches */
body[data-theme="momentum"] #detailPanel .inline-input[placeholder="—"]:placeholder-shown {
  font-style: normal !important;
  color: #b8c6d6 !important;
  -webkit-text-fill-color: #b8c6d6 !important;
  letter-spacing: 0.05em !important;
}

/* ── Notes composer: ensure buttons are consistent height ─── */
body[data-theme="momentum"] .overview-note-composer-actions .btn {
  height: 34px !important;
  min-height: 34px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ── Activity empty state ─────────────────────────────────── */
body[data-theme="momentum"] .mm-activity-empty {
  padding: 40px 20px !important;
  text-align: center !important;
}
body[data-theme="momentum"] .mm-activity-empty-icon {
  font-size: 32px !important;
  opacity: 0.25 !important;
  display: block !important;
  margin-bottom: 10px !important;
}
body[data-theme="momentum"] .mm-activity-empty-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #4a5568 !important;
  display: block !important;
  margin-bottom: 4px !important;
}
body[data-theme="momentum"] .mm-activity-empty-hint {
  font-size: 12px !important;
  color: #94a3b8 !important;
  display: block !important;
}

/* ── Inline edit focused state: elevated row ─────────────── */
body[data-theme="momentum"] #detailPanel .detailRow:focus-within {
  background: #f5f8ff !important;
  border-radius: 0 !important;
  z-index: 2 !important;
}
body[data-theme="momentum"] #detailPanel .detailRow:focus-within::after {
  display: none !important;
}

/* ── Quick actions: hidden everywhere (bottom bar / icon buttons are the single surface) ─── */
body[data-theme="momentum"] .mm-quick-actions,
body[data-theme="momentum"] [data-mm-quick-actions] {
  display: none !important;
}
body[data-theme="momentum"] .mm-quick-actions {
  gap: 6px !important;
  margin-top: 8px !important;
}

/* ── Inline edit Save/Cancel (mobile) sizing ─────────────── */
body[data-theme="momentum"] #detailPanel .mm-inline-edit-save,
body[data-theme="momentum"] #detailPanel .mm-inline-edit-cancel {
  height: 40px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

/* ── Tab bar counts: match new segmented control style ───── */
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.is-active .contact-detail-tab-count {
  background: #dbeafe !important;
  color: #1e40af !important;
  font-weight: 700 !important;
}

/* ── Notes & activity panel: tighter left so content sits closer to edge ───── */
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-header {
  padding: 12px 16px 12px 8px !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right > .detailSection {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
}

/* ═══════════════════════════════════════════════════════════
   PHASE 12 — DEALS TAB UX REFINEMENT
   Clear hierarchy: name+value → stage → next action → metrics → metadata
═══════════════════════════════════════════════════════════ */

/* ── Card base: clean shadow-first card ────────────────── */
body[data-theme="momentum"] .contact-deal-card {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.07) !important;
  padding: 16px !important;
  gap: 0 !important;
  transition: box-shadow 150ms ease, border-color 150ms ease !important;
  display: flex !important;
  align-items: flex-start !important;
  width: 100% !important;           /* stretch full tab width */
  box-sizing: border-box !important;
}
body[data-theme="momentum"] .contact-deal-card:hover {
  box-shadow: 0 4px 14px rgba(15,23,42,0.11) !important;
  border-color: rgba(15,23,42,0.13) !important;
}

/* Risk level border accent on left edge */
body[data-theme="momentum"] .contact-deal-card.risk-high {
  border-left: 3px solid #fca5a5 !important;
}
body[data-theme="momentum"] .contact-deal-card.risk-medium {
  border-left: 3px solid #fdba74 !important;
}
body[data-theme="momentum"] .contact-deal-card.risk-low {
  border-left: 3px solid #86efac !important;
}

/* ── Deal icon: smaller, less dominant ─────────────────── */
body[data-theme="momentum"] .contact-deal-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  margin-right: 14px !important;
}

/* ── Deal title: clear, scannable ──────────────────────── */
body[data-theme="momentum"] .contact-deal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.2px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* ── Value badge: injected by JS, prominent green ──────── */
body[data-theme="momentum"] .mm-deal-inline-value {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #15803d !important;
  letter-spacing: -0.4px !important;
  font-variant-numeric: tabular-nums !important;
  padding-left: 12px !important;
  flex-shrink: 0 !important;
}

/* ── Stage pill: prominent pipeline badge ──────────────── */
body[data-theme="momentum"] .contact-deal-stage-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #eef2ff !important;
  color: #3730a3 !important;
  border: 1px solid #c7d2fe !important;
}

/* ── Next action row: elevated, amber accent ───────────── */
body[data-theme="momentum"] .mm-deal-next-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: #fff8f1;
  border: 1px solid #fed7aa;
  border-radius: 8px;
}
body[data-theme="momentum"] .mm-deal-next-label {
  font-size: 10px;
  font-weight: 700;
  color: #ea580c;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex-shrink: 0;
}
body[data-theme="momentum"] .mm-deal-next-text {
  font-size: 12px;
  font-weight: 600;
  color: #7c2d12;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Metrics grid: compact, secondary ──────────────────── */
body[data-theme="momentum"] .contact-deal-metrics {
  margin-top: 10px !important;
  gap: 6px !important;
}
body[data-theme="momentum"] .contact-deal-metric {
  border: 1px solid #f1f5f9 !important;
  background: #fafbfd !important;
  border-radius: 7px !important;
  padding: 7px 8px !important;
}
body[data-theme="momentum"] .contact-deal-metric .k {
  font-size: 9px !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
body[data-theme="momentum"] .contact-deal-metric .v {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}
/* Highlight Amount metric */
body[data-theme="momentum"] .contact-deal-metric:first-child .v {
  color: #166534 !important;
}

/* ── Footer pills: muted secondary metadata ────────────── */
body[data-theme="momentum"] .contact-deal-footer {
  margin-top: 8px !important;
  gap: 4px !important;
}
body[data-theme="momentum"] .contact-deal-footer-pill {
  font-size: 10px !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border-color: #e8edf2 !important;
  padding: 2px 7px !important;
  opacity: 1 !important;
}
/* Tasks/events count: slightly more visible */
body[data-theme="momentum"] .contact-deal-task-count-pill {
  color: #64748b !important;
  background: #f8fafc !important;
}

/* ── Health badge: keep subtle ─────────────────────────── */
body[data-theme="momentum"] .contact-deal-health-badge {
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
}

/* ── Edit button: less intrusive ───────────────────────── */
body[data-theme="momentum"] .contact-deal-edit-btn {
  flex-shrink: 0 !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
  height: 26px !important;
  color: #64748b !important;
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
body[data-theme="momentum"] .contact-deal-edit-btn:hover {
  background: #eef2ff !important;
  color: #4338ca !important;
  border-color: #c7d2fe !important;
}

/* ── Deal summary cards above the list ─────────────────── */
body[data-theme="momentum"] .contact-deals-summary-card {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 13 — "BEAT ATTIO" INTERACTION PASS (MOMENTUM ONLY)
   Tokens · Row click-to-edit · Press states · Connected objects ·
   Micro-interactions · prefers-reduced-motion · Consistency
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   P13-A. DESIGN TOKEN COMPLETIONS
   Fill gaps left by Phases 1–12.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] {
  --m-surface-2:  #f8fafc;
  --m-radius-sm:  8px;
  --m-radius-lg:  16px;
  --m-shadow-sm:  0 1px 2px rgba(15,23,42,0.05);
  --m-focus:      0 0 0 3px rgba(99,102,241,0.18);
  --m-transition: 150ms cubic-bezier(0.4,0,0.2,1);
  --m-ease:       cubic-bezier(0.4,0,0.2,1);
}

/* ─────────────────────────────────────────────────────────────
   P13-B. ROW CLICKABLE — "EVERYTHING FEELS EDITABLE"
   The entire detailRow is a click target for editing.
   JS adds [data-mm-clickable] to rows; CSS makes them feel alive.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .detailRow[data-mm-clickable] {
  cursor: pointer !important;
}
body[data-theme="momentum"] #detailPanel .detailRow[data-mm-clickable]:hover {
  background: #f0f6ff !important;
}
/* Keyboard focus ring on the row itself */
body[data-theme="momentum"] #detailPanel .detailRow[data-mm-clickable]:focus {
  outline: none !important;
  background: #f0f6ff !important;
  box-shadow: inset 0 0 0 2px rgba(99,102,241,0.25) !important;
  border-radius: 6px !important;
}
/* Success pulse after save — keyframe defined in Phase 4; reuse */
body[data-theme="momentum"] #detailPanel .detailRow.mm-saved-pulse {
  animation: mmSaveGlow 0.9s ease forwards !important;
}

/* ─────────────────────────────────────────────────────────────
   P13-C. BUTTON PRESS STATES — tactile micro-feedback
   All interactive Momentum buttons get consistent press feedback.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .btn:active,
body[data-theme="momentum"] #detailPanel button.btn:active,
body[data-theme="momentum"] .mm-quick-btn:active,
body[data-theme="momentum"] .mm-contact-action-btn:active,
body[data-theme="momentum"] .mm-task-action-btn:active,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn:active,
body[data-theme="momentum"] #detailPanel .detail-action-btn:active,
body[data-theme="momentum"] .mm-mobile-bar-btn:active {
  transform: translateY(1px) scale(0.97) !important;
  transition: transform 60ms ease !important;
  box-shadow: none !important;
}

/* Disabled state — consistent muted appearance */
body[data-theme="momentum"] #detailPanel .btn:disabled,
body[data-theme="momentum"] .mm-quick-btn:disabled,
body[data-theme="momentum"] .mm-task-action-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ─────────────────────────────────────────────────────────────
   P13-D. CONNECTED OBJECTS — chips behave like objects
   Company · Contact · Deal · Stage chips feel clickable.
───────────────────────────────────────────────────────────── */

/* Clickable pills: pointer + hover background */
body[data-theme="momentum"] .contact-deal-person-pill[data-id],
body[data-theme="momentum"] .contact-deal-company-pill[data-id],
body[data-theme="momentum"] .btn-link-primary-contact-detail,
body[data-theme="momentum"] .btn-link-primary-company-detail {
  cursor: pointer !important;
  transition: background var(--m-transition) !important;
}
body[data-theme="momentum"] .contact-deal-person-pill[data-id]:hover {
  background: #dde8ff !important;
  border-color: #a5b4fc !important;
}
body[data-theme="momentum"] .contact-deal-company-pill[data-id]:hover {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
}

/* Truncate long labels with ellipsis + tooltip already set via title */
body[data-theme="momentum"] .contact-deal-person-pill,
body[data-theme="momentum"] .contact-deal-company-pill {
  max-width: 200px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

/* Long email/phone in multi-field chips */
body[data-theme="momentum"] #detailPanel .multi-field-detail-row .field-value,
body[data-theme="momentum"] #detailPanel .multi-field-detail-row input[readonly] {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────
   P13-E. ACTIVITY ITEM QUICK ACTIONS
   Reveal a "Copy" micro-button on activity item hover.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .activityItem.contact-activity-item {
  display: flex !important;
  align-items: flex-start !important;
}
body[data-theme="momentum"] .mm-activity-copy-btn {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0;
  height: 22px;
  padding: 0 7px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--m-transition), background var(--m-transition);
  white-space: nowrap;
  align-self: center;
}
body[data-theme="momentum"] .activityItem.contact-activity-item:hover .mm-activity-copy-btn {
  opacity: 1;
}
body[data-theme="momentum"] .mm-activity-copy-btn:hover {
  background: #e8f0fe !important;
  color: #4338ca !important;
  border-color: #c7d2fe !important;
}

/* ─────────────────────────────────────────────────────────────
   P13-F. INTERACTIVE CARD HOVER LIFTS
   ONLY interactive cards lift; static info cards stay flat.
───────────────────────────────────────────────────────────── */

/* Deal + task cards: lift on hover */
body[data-theme="momentum"] .contact-deal-card:hover,
body[data-theme="momentum"] .mm-next-task-block:hover,
body[data-theme="momentum"] .mm-deal-context:hover {
  transform: translateY(-1px) !important;
  transition: box-shadow var(--m-transition), transform var(--m-transition) !important;
}
/* Contact card already has lift from Phase 6 */

/* Static info cards (field groups): no lift — they're reference content */
body[data-theme="momentum"] #detailPanel .contact-field-group {
  transition: box-shadow var(--m-transition) !important;
}

/* ─────────────────────────────────────────────────────────────
   P13-G. COMPOSER — cleaner, calmer
───────────────────────────────────────────────────────────── */

/* Stronger hierarchy: note-mode indicator pill */
body[data-theme="momentum"] .overview-note-mode-indicator {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #4338ca !important;
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  border-radius: 6px !important;
  padding: 3px 9px !important;
}

/* Save Note button: always clearly primary */
body[data-theme="momentum"] .overview-note-composer .btn.primary {
  min-width: 96px !important;
}

/* Keyboard hint: barely visible, non-distracting */
body[data-theme="momentum"] .overview-note-hint {
  font-size: 10px !important;
  letter-spacing: 0.02em !important;
}

/* ─────────────────────────────────────────────────────────────
   P13-H. UNIVERSAL FOCUS RING — consistent, using --m-focus
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel :focus-visible,
body[data-theme="momentum"] .mm-chip:focus-visible,
body[data-theme="momentum"] .mm-quick-btn:focus-visible,
body[data-theme="momentum"] .mm-contact-action-btn:focus-visible,
body[data-theme="momentum"] .mm-task-action-btn:focus-visible,
body[data-theme="momentum"] .mm-field-edit-btn:focus-visible,
body[data-theme="momentum"] .mm-deal-row:focus-visible,
body[data-theme="momentum"] .mm-deal-context-viewall:focus-visible {
  outline: none !important;
  box-shadow: var(--m-focus) !important;
  border-radius: var(--m-radius-sm) !important;
}

/* ─────────────────────────────────────────────────────────────
   P13-I. PREFERS-REDUCED-MOTION
   Respect user accessibility settings — no heavy animations.
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-theme="momentum"] *,
  body[data-theme="momentum"] *::before,
  body[data-theme="momentum"] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* Preserve at-risk pulse as a static indicator instead */
  body[data-theme="momentum"] .mm-health-signal[data-mm-health="at_risk"] {
    animation: none !important;
    box-shadow: 0 0 0 2px rgba(220,38,38,0.3) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   P13-J. TYPOGRAPHY CONSISTENCY PASS
   Ensure label/value contrast meets Attio-level readability.
───────────────────────────────────────────────────────────── */

/* Section card title bar: slightly warmer, more distinct */
body[data-theme="momentum"] #detailPanel .contact-field-group-title {
  background: #f7f9fc !important;
  color: #64748b !important;
}

/* Field label: medium weight, not bold (labels should recede) */
body[data-theme="momentum"] #detailPanel .detailRow .label {
  font-weight: 500 !important;
  font-size: 12px !important;
  color: #64748b !important;
}

/* Field value: should be the visual anchor */
body[data-theme="momentum"] #detailPanel .detailRow .value {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}

/* Muted pill metadata in subtext rows */
body[data-theme="momentum"] .contact-deal-meta-pill,
body[data-theme="momentum"] .contact-deal-company-pill {
  color: #64748b !important;
  background: #f8fafc !important;
  border-color: #e8edf2 !important;
}

/* ─────────────────────────────────────────────────────────────
   P13-K. TAB BAR REFINEMENT
   Slightly larger font, tighter gap, cleaner badge sizes.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn {
  letter-spacing: -0.01em !important;
}
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.is-active,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.active {
  letter-spacing: -0.015em !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 14 — DEALS TAB FINAL POLISH
   Value dominance · Next-action elevation · Metadata muting
═══════════════════════════════════════════════════════════════ */

/* ── 1. Deal value: larger, clearly the financial anchor ─── */
body[data-theme="momentum"] .mm-deal-inline-value {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #166534 !important;
  letter-spacing: -0.5px !important;
  font-variant-numeric: tabular-nums !important;
  flex-shrink: 0 !important;
  padding-left: 14px !important;
  line-height: 1.1 !important;
}

/* ── 2. Title row: name + value sit on one strong baseline ── */
body[data-theme="momentum"] .contact-deal-title-wrap {
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
}
body[data-theme="momentum"] .contact-deal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.25px !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* ── 3. Stage pill: prominent, right below title ─────────── */
body[data-theme="momentum"] .contact-deal-stage-pill {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  background: #eef2ff !important;
  color: #3730a3 !important;
  border: 1px solid #c7d2fe !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── 4. Next action: high in card, right below stage row ─── */
body[data-theme="momentum"] .mm-deal-next-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding: 7px 11px !important;
  background: #fff8f1 !important;
  border: 1px solid #fed7aa !important;
  border-radius: 8px !important;
  min-height: 32px !important;
}
body[data-theme="momentum"] .mm-deal-next-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: #ea580c !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  flex-shrink: 0 !important;
}
body[data-theme="momentum"] .mm-deal-next-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #7c2d12 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ── 5. Subtext chips: clearly secondary ─────────────────── */
body[data-theme="momentum"] .contact-deal-subtext {
  margin-top: 6px !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}
/* Company / contact / meta pills: lightened */
body[data-theme="momentum"] .contact-deal-company-pill,
body[data-theme="momentum"] .contact-deal-person-pill,
body[data-theme="momentum"] .contact-deal-meta-pill {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border-color: #e8edf2 !important;
  padding: 2px 7px !important;
}
/* Stage pill stays prominent — only reset the others */
body[data-theme="momentum"] .contact-deal-stage-pill + .contact-deal-company-pill,
body[data-theme="momentum"] .contact-deal-stage-pill ~ .contact-deal-meta-pill {
  color: #94a3b8 !important;
}

/* ── 6. Metrics: hide redundant Amount (shown in title) ──── */
body[data-theme="momentum"] .contact-deal-metrics {
  margin-top: 10px !important;
  gap: 5px !important;
}
/* Dim Amount metric — value already visible in title row */
body[data-theme="momentum"] .contact-deal-metric:first-child {
  opacity: 0.55 !important;
}
body[data-theme="momentum"] .contact-deal-metric {
  border: 1px solid #f1f5f8 !important;
  background: #fafbfd !important;
  border-radius: 7px !important;
  padding: 6px 8px !important;
}
body[data-theme="momentum"] .contact-deal-metric .k {
  font-size: 9px !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
body[data-theme="momentum"] .contact-deal-metric .v {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}

/* ── 7. Health badge: subtle, doesn't compete ────────────── */
body[data-theme="momentum"] .contact-deal-health-badge {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  flex-shrink: 0 !important;
}

/* ── 8. Footer: minimal, barely there ───────────────────── */
body[data-theme="momentum"] .contact-deal-footer {
  margin-top: 8px !important;
  gap: 3px !important;
  flex-wrap: wrap !important;
}
body[data-theme="momentum"] .contact-deal-footer-pill {
  font-size: 10px !important;
  color: #b0bec8 !important;
  background: transparent !important;
  border-color: transparent !important;
  padding: 1px 5px !important;
}
body[data-theme="momentum"] .contact-deal-task-count-pill {
  color: #64748b !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

/* ── 9. Edit button: unobtrusive ─────────────────────────── */
body[data-theme="momentum"] .contact-deal-edit-btn {
  font-size: 11px !important;
  padding: 3px 10px !important;
  height: 24px !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border-color: #e2e8f0 !important;
  border-radius: 6px !important;
  transition: all 150ms !important;
}
body[data-theme="momentum"] .contact-deal-edit-btn:hover {
  background: #eef2ff !important;
  color: #4338ca !important;
  border-color: #c7d2fe !important;
}

/* ── 10. Overview-tab visual rhythm match ────────────────── */
/* Deal list gap matches field card gap */
body[data-theme="momentum"] .contact-deals-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 4px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body[data-theme="momentum"] .contact-deals-section,
body[data-theme="momentum"] .dealsSection {
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Deal icon: match the indigo chip look */
body[data-theme="momentum"] .contact-deal-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 15 — TASKS & EVENTS TAB POLISH (MOMENTUM)
   Task/event distinction · Date hierarchy · Scannability · Consistency
═══════════════════════════════════════════════════════════════ */

/* ── 1. Card base: match Overview/Deals visual language ─── */
body[data-theme="momentum"] .contact-tasks-section .task-row {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.06) !important;
  transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease !important;
  gap: 12px !important;
  padding: 14px 16px !important;
}
body[data-theme="momentum"] .contact-tasks-section .task-row:hover {
  box-shadow: 0 4px 14px rgba(15,23,42,0.10) !important;
  border-color: rgba(15,23,42,0.12) !important;
  transform: translateY(-1px) !important;
}

/* ── 2. Task vs Event distinction ──────────────────────── */
/* Tasks: left accent green */
body[data-theme="momentum"] .contact-tasks-section .task-row[data-mm-kind="task"],
body[data-theme="momentum"] .contact-tasks-section .task-row:has(.task-type-chip--task) {
  border-left: 3px solid #86efac !important;
}
/* Events: left accent blue + very faint blue tint */
body[data-theme="momentum"] .contact-tasks-section .task-row[data-mm-kind="event"],
body[data-theme="momentum"] .contact-tasks-section .task-row:has(.task-type-chip--event) {
  border-left: 3px solid #93c5fd !important;
  background: #f9fbff !important;
}

/* ── 3. Task icon: match card type ─────────────────────── */
body[data-theme="momentum"] .contact-tasks-section .task-row > div:first-child {
  border-radius: 10px !important;
  width: 38px !important;
  height: 38px !important;
  flex-shrink: 0 !important;
}

/* ── 4. Task title: prominent ───────────────────────────── */
body[data-theme="momentum"] .mm-task-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  letter-spacing: -0.15px !important;
}

/* ── 5. Date: clearly visible — the key actionable info ── */
body[data-theme="momentum"] .mm-task-date {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  letter-spacing: -0.1px !important;
}
/* Overdue date: red emphasis */
body[data-theme="momentum"] .task-row[data-mm-kind="task"] .mm-task-date:not(:empty) {
  /* Default: dark slate. Overdue detection via content check not feasible;
     the inline onmouseenter already handles overdue state in ui.js. */
  color: #334155 !important;
}

/* ── 6. Type chips: better visual taxonomy ─────────────── */
body[data-theme="momentum"] .contact-tasks-section .task-type-chip {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
}
/* Task chip: green */
body[data-theme="momentum"] .contact-tasks-section .task-type-chip--task {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
}
/* Event chip: blue */
body[data-theme="momentum"] .contact-tasks-section .task-type-chip--event {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #93c5fd !important;
}
/* Deal chip: light indigo — secondary context */
body[data-theme="momentum"] .contact-tasks-section .task-type-chip--deal {
  background: #f5f3ff !important;
  color: #5b21b6 !important;
  border: 1px solid #ddd6fe !important;
  font-size: 9px !important;
}
/* Contact chip: muted */
body[data-theme="momentum"] .contact-tasks-section .task-type-chip--contact {
  background: #f8fafc !important;
  color: #94a3b8 !important;
  border: 1px solid #e2e8f0 !important;
}

/* ── 7. Task link chip (deal/project name): readable, secondary ── */
body[data-theme="momentum"] .contact-tasks-section .task-link-chip {
  font-size: 11px !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
  font-weight: 600 !important;
  transition: background 150ms, border-color 150ms !important;
}
body[data-theme="momentum"] .contact-tasks-section .task-link-chip:hover {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #3730a3 !important;
}

/* ── 8. Action buttons: clean, consistent height ────────── */
body[data-theme="momentum"] .contact-tasks-section .task-row .btn {
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  height: 28px !important;
  padding: 0 11px !important;
  transition: all 150ms !important;
}
/* Complete button (✓) */
body[data-theme="momentum"] .contact-tasks-section .task-row .btn:has-text("✓"),
body[data-theme="momentum"] .contact-tasks-section .task-row .btn[title*="complete" i],
body[data-theme="momentum"] .contact-tasks-section .task-row .btn[title*="Complete"] {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border-color: #86efac !important;
}
/* Edit button */
body[data-theme="momentum"] .contact-tasks-section .task-row .btn[title*="Edit"] {
  background: #f8fafc !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}
body[data-theme="momentum"] .contact-tasks-section .task-row .btn:hover {
  transform: translateY(-1px) !important;
}

/* ── 9. Completed tasks section: clearly secondary ──────── */
body[data-theme="momentum"] .contact-tasks-section .task-row[style*="opacity: 0.7"],
body[data-theme="momentum"] .contact-tasks-section .task-row[style*="opacity:0.7"] {
  opacity: 0.5 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  border-color: #f1f5f9 !important;
}

/* ── 10. Section padding: match Overview tab padding ────── */
body[data-theme="momentum"] .contact-tasks-section {
  padding: 4px 0 !important;
}
/* Task list gap matches deal list gap */
body[data-theme="momentum"] .contact-tasks-section > div[style*="display:grid"],
body[data-theme="momentum"] .contact-tasks-section > div[style*="display: grid"] {
  gap: 8px !important;
}

/* ── 11. Section summary stats: match deal summary cards ── */
body[data-theme="momentum"] .contact-tasks-section .contact-deals-summary-card {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
}

/* ── 12. Completed header divider ────────────────────────── */
body[data-theme="momentum"] .contact-tasks-section div[style*="border-top:1px dashed"] {
  border-top: 1px solid #f1f5f9 !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 16 — DOCUMENTS TAB UX POLISH (MOMENTUM)
   Hierarchy · Toolbar grouping · Row consistency · Action clarity
═══════════════════════════════════════════════════════════════ */

/* ── 1. Container: match panel background ───────────────── */
body[data-theme="momentum"] .documents-library-container {
  background: var(--mm-bg, #f7f9fc) !important;
}

/* ── 2. Header: clean white surface ────────────────────── */
body[data-theme="momentum"] .documents-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15,23,42,0.08) !important;
  padding: 14px 20px !important;
}

/* ── 3. Header title: toned down to match Overview size ── */
body[data-theme="momentum"] .documents-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 2px !important;
}
body[data-theme="momentum"] .documents-subtitle {
  font-size: 12px !important;
  color: #94a3b8 !important;
}

/* ── 4. Toolbar: group primary vs secondary visually ────── */
body[data-theme="momentum"] .documents-actions {
  gap: 6px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Primary create/import buttons: prominent indigo */
body[data-theme="momentum"] .documents-actions .btn.primary,
body[data-theme="momentum"] .documents-actions .btn-primary {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  height: 34px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 4px rgba(99,102,241,0.25) !important;
  transition: all 150ms !important;
}
body[data-theme="momentum"] .documents-actions .btn.primary:hover {
  background: #4f46e5 !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.35) !important;
}

/* Secondary actions: ghost style */
body[data-theme="momentum"] .documents-actions .btn:not(.primary):not(.btn-primary) {
  background: #ffffff !important;
  border: 1px solid #dde4ec !important;
  color: #475569 !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  height: 34px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  transition: all 150ms !important;
}
body[data-theme="momentum"] .documents-actions .btn:not(.primary):hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

/* ── 5. Document list: card-per-row, separated ──────────── */
body[data-theme="momentum"] .documents-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;           /* card gap instead of 1px divider */
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* ── 6. Document row: card style matching tasks/deals ───── */
body[data-theme="momentum"] .document-row {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.07) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
  padding: 12px 16px !important;
  gap: 12px !important;
  transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease !important;
}
body[data-theme="momentum"] .document-row:hover {
  background: #ffffff !important;
  box-shadow: 0 3px 12px rgba(15,23,42,0.10) !important;
  border-color: rgba(15,23,42,0.12) !important;
  transform: translateY(-1px) !important;
}
body[data-theme="momentum"] .document-row.selected {
  background: #f0f7ff !important;
  border-color: rgba(99,102,241,0.35) !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.12) !important;
}

/* ── 7. File icon: compact, no oversized emoji ───────────── */
body[data-theme="momentum"] .doc-row-icon {
  font-size: 24px !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  border: 1px solid #e8edf2 !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}

/* ── 8. Document name: prominent, clean truncation ──────── */
body[data-theme="momentum"] .doc-row-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 320px !important;
  letter-spacing: -0.1px !important;
}

/* ── 9. Description: clearly secondary ─────────────────── */
body[data-theme="momentum"] .doc-row-description {
  font-size: 11px !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 280px !important;
}

/* ── 10. Metadata row: muted, scannable ─────────────────── */
body[data-theme="momentum"] .doc-row-meta {
  gap: 10px !important;
  align-items: center !important;
}
body[data-theme="momentum"] .doc-row-size,
body[data-theme="momentum"] .doc-row-date {
  font-size: 11px !important;
  color: #b0bec8 !important;
  font-weight: 400 !important;
}
/* Category pill: consistent with stage pill style */
body[data-theme="momentum"] .doc-row-category {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #3730a3 !important;
  background: #eef2ff !important;
  border-radius: 5px !important;
  padding: 2px 8px !important;
  border: 1px solid #c7d2fe !important;
  white-space: nowrap !important;
}

/* ── 11. Row actions: View as primary, others secondary ── */
body[data-theme="momentum"] .doc-row-actions {
  gap: 4px !important;
}
body[data-theme="momentum"] .doc-row-actions .btn,
body[data-theme="momentum"] .doc-row-actions button {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  transition: all 150ms !important;
}
body[data-theme="momentum"] .doc-row-actions .btn:hover,
body[data-theme="momentum"] .doc-row-actions button:hover {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #3730a3 !important;
}
/* "View" button: primary emphasis */
body[data-theme="momentum"] .doc-row-actions .btn[data-action="view"],
body[data-theme="momentum"] .doc-row-actions .btn:first-child,
body[data-theme="momentum"] .doc-row-actions button:first-child {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(99,102,241,0.2) !important;
}
body[data-theme="momentum"] .doc-row-actions .btn:first-child:hover,
body[data-theme="momentum"] .doc-row-actions button:first-child:hover {
  background: #4f46e5 !important;
  box-shadow: 0 2px 6px rgba(99,102,241,0.3) !important;
}

/* ── 12. Bulk bar: consistent with Momentum language ────── */
body[data-theme="momentum"] .documents-library-container .bulkBar {
  background: #f0f7ff !important;
  border-bottom: 1px solid #c7d2fe !important;
  padding: 8px 20px !important;
  gap: 8px !important;
}
body[data-theme="momentum"] .documents-library-container .bulkBar .btn {
  height: 30px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 12px !important;
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #3730a3 !important;
}
body[data-theme="momentum"] .documents-library-container .bulkBar .btn:hover {
  background: #e0e7ff !important;
  border-color: #a5b4fc !important;
  color: #312e81 !important;
}

/* ── 13. Stats bar: match chip height/style ─────────────── */
body[data-theme="momentum"] .documents-stats {
  gap: 20px !important;
  padding: 10px 0 !important;
  border-color: rgba(15,23,42,0.07) !important;
}
body[data-theme="momentum"] .stat-value {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.3px !important;
}
body[data-theme="momentum"] .stat-label {
  font-size: 10px !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
}

/* ── 14. Upload dropzone: consistent with card style ────── */
body[data-theme="momentum"] .upload-dropzone {
  border: 2px dashed #c7d2fe !important;
  border-radius: 12px !important;
  background: #fafbff !important;
}
body[data-theme="momentum"] .upload-dropzone:hover,
body[data-theme="momentum"] .upload-dropzone.dragover {
  border-color: #6366f1 !important;
  background: #f0f2ff !important;
}

/* ── 15. Search input: consistent with field row inputs ──── */
body[data-theme="momentum"] .documents-library-container .search-box input {
  border-radius: 8px !important;
  border-color: #dde4ec !important;
  font-size: 13px !important;
  background: #ffffff !important;
  color: #1e293b !important;
  color-scheme: light !important;
}
body[data-theme="momentum"] .documents-library-container .search-box input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 17 — ACTIVITY TIMELINE POLISH (MOMENTUM)
   Human language · Combined meta · Consistent typography
═══════════════════════════════════════════════════════════════ */

/* ── 1. Activity panel container: consistent padding ────── */
body[data-theme="momentum"] #detailPanel .contact-overview-right > .detailSection,
body[data-theme="momentum"] #detailPanel .activityLog.detailSection {
  padding-bottom: 8px !important;
}

/* ── 2. Timeline title: strong, narrative voice ─────────── */
body[data-theme="momentum"] .activityItem.contact-activity-item .mm-timeline-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  line-height: 1.4 !important;
  letter-spacing: -0.1px !important;
}

/* ── 3. Meta line: "author · date" — compact, one line ──── */
body[data-theme="momentum"] .activityItem.contact-activity-item .mm-timeline-meta,
body[data-theme="momentum"] .activityItem.contact-activity-item time {
  font-size: 11px !important;
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  display: block !important;
  margin-top: 2px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* ── 4. Activity item row: comfortable padding, text closer to left ───────────── */
body[data-theme="momentum"] .activityItem.contact-activity-item {
  padding: 9px 12px 9px 40px !important;
  border-radius: 7px !important;
  transition: background 120ms ease !important;
}
body[data-theme="momentum"] .activityItem.contact-activity-item:hover {
  background: #f4f7fc !important;
}

/* ── 5. Timeline group separator: clean, readable ────────── */
body[data-theme="momentum"] .mm-timeline-group {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  padding: 14px 12px 4px 40px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  user-select: none !important;
}
body[data-theme="momentum"] .mm-timeline-group::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: #edf0f5 !important;
}
body[data-theme="momentum"] .mm-timeline-group:first-child {
  padding-top: 6px !important;
}

/* ── 6. Activity icon bubble: consistent with task icons ─── */
body[data-theme="momentum"] .mm-activity-bubble {
  width: 26px !important;
  height: 26px !important;
  font-size: 13px !important;
  left: 8px !important;
  top: 10px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 1.5px #dde6f0 !important;
  border-radius: 50% !important;
}

/* ── 7. Timeline spine ───────────────────────────────────── */
body[data-theme="momentum"] .contact-activity-feed::before {
  left: 17px !important;
  width: 1.5px !important;
  background: linear-gradient(to bottom,
    transparent 0%,
    #dde6f0 8%,
    #dde6f0 92%,
    transparent 100%
  ) !important;
}

/* ── 8. Activity empty state: human, helpful ────────────── */
body[data-theme="momentum"] .mm-activity-empty {
  padding: 36px 20px !important;
  text-align: center !important;
}
body[data-theme="momentum"] .mm-activity-empty-icon {
  font-size: 28px !important;
  opacity: 0.3 !important;
  margin-bottom: 10px !important;
  display: block !important;
}
body[data-theme="momentum"] .mm-activity-empty-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  display: block !important;
  margin-bottom: 4px !important;
}
body[data-theme="momentum"] .mm-activity-empty-hint {
  font-size: 12px !important;
  color: #94a3b8 !important;
  display: block !important;
  line-height: 1.5 !important;
}

/* ── 9. Copy button on activity hover ───────────────────── */
body[data-theme="momentum"] .mm-activity-copy-btn {
  align-self: flex-start !important;
  margin-top: 2px !important;
}

/* ── Task/Event type chips: globally visible in Momentum ── */
/* The .contact-tasks-section scope misses chips in other contexts
   (task cards shown in overview, next-task block, activity panel, etc.) */
body[data-theme="momentum"] .task-type-chip {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  opacity: 1 !important;
}
body[data-theme="momentum"] .task-type-chip--task {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
  -webkit-text-fill-color: #15803d !important;
}
body[data-theme="momentum"] .task-type-chip--event {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border: 1px solid #93c5fd !important;
  -webkit-text-fill-color: #1d4ed8 !important;
}
body[data-theme="momentum"] .task-type-chip--deal {
  background: #ede9fe !important;
  color: #5b21b6 !important;
  border: 1px solid #c4b5fd !important;
  -webkit-text-fill-color: #5b21b6 !important;
}
body[data-theme="momentum"] .task-type-chip--contact {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  -webkit-text-fill-color: #475569 !important;
}
body[data-theme="momentum"] .task-type-chip--project {
  background: #fdf4ff !important;
  color: #7e22ce !important;
  border: 1px solid #e9d5ff !important;
  -webkit-text-fill-color: #7e22ce !important;
}

/* ── Task/Event date alignment: fixed-width date column ─── */
/* Events show "3/18/2026, 3:00:00 PM" (~155px at 12px font) */
/* Tasks show just "3/12/2026" (~65px). Setting min-width on  */
/* the date span makes the EVENT/TASK chip always align.      */
body[data-theme="momentum"] .mm-task-date {
  min-width: 160px !important;
  display: inline-block !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 19 — DROPDOWN MENU POLISH (MOMENTUM)
   Panel · Tile interactions · Hierarchy · Hint · Consistency
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   P19-A. DROPDOWN PANEL — premium floating card surface
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .nav-more-menu,
body[data-theme="momentum"] .tools-menu,
body[data-theme="momentum"] .actions-menu,
body[data-theme="momentum"] .dropdown-panel,
body[data-theme="momentum"] .header-user-dropdown,
body[data-theme="momentum"] .detail-actions-menu {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 14px !important;
  box-shadow:
    0 4px 6px -1px rgba(15, 23, 42, 0.08),
    0 10px 24px -4px rgba(15, 23, 42, 0.12),
    0 0 0 0.5px rgba(15, 23, 42, 0.05) !important;
  padding: 6px !important;
  overflow: hidden;
}

/* Animate in when opened */
body[data-theme="momentum"] .nav-more-menu {
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms !important;
}
body[data-theme="momentum"] .nav-more-menu.open {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}
body[data-theme="momentum"] .nav-more-menu:not(.open) {
  opacity: 0 !important;
  transform: translateY(-6px) scale(0.98) !important;
}

/* ─────────────────────────────────────────────────────────────
   P19-B. MENU ITEMS — tile-like hover with accent highlight
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .nav-more-item,
body[data-theme="momentum"] .tools-menu-item,
body[data-theme="momentum"] .actions-menu-item,
body[data-theme="momentum"] .user-menu-item {
  border-radius: 9px !important;
  padding: 9px 12px !important;
  gap: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  transition:
    background 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease !important;
}

/* Hover: indigo tint + icon accent */
body[data-theme="momentum"] .nav-more-item:hover,
body[data-theme="momentum"] .tools-menu-item:hover:not(:disabled),
body[data-theme="momentum"] .actions-menu-item:hover,
body[data-theme="momentum"] .user-menu-item:hover {
  background: #eef2ff !important;
  color: #3730a3 !important;
  -webkit-text-fill-color: #3730a3 !important;
  box-shadow: none !important;
}

/* Icon: same accent on hover */
body[data-theme="momentum"] .nav-more-item:hover .nav-more-icon,
body[data-theme="momentum"] .nav-more-item:hover svg,
body[data-theme="momentum"] .tools-menu-item:hover:not(:disabled) svg {
  color: #4338ca !important;
}

/* Active/selected state */
body[data-theme="momentum"] .nav-more-item.active {
  background: #e0e7ff !important;
  color: #3730a3 !important;
  -webkit-text-fill-color: #3730a3 !important;
  font-weight: 600 !important;
}

/* Disabled state */
body[data-theme="momentum"] .tools-menu-item:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Focus ring */
body[data-theme="momentum"] .nav-more-item:focus-visible,
body[data-theme="momentum"] .tools-menu-item:focus-visible,
body[data-theme="momentum"] .actions-menu-item:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3) !important;
}

/* ─────────────────────────────────────────────────────────────
   P19-C. ICON HIERARCHY — consistent sizing + visual weight
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .nav-more-icon {
  width: 22px !important;
  height: 22px !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #64748b !important;
}

body[data-theme="momentum"] .tools-menu-item svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: #64748b !important;
  transition: color 140ms ease !important;
}

/* ─────────────────────────────────────────────────────────────
   P19-D. SEPARATORS — hairline, less visually heavy
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .nav-more-divider,
body[data-theme="momentum"] .tools-menu-sep,
body[data-theme="momentum"] .actions-menu-divider {
  height: 1px !important;
  background: rgba(15, 23, 42, 0.07) !important;
  margin: 5px 8px !important;
  border: none !important;
}

/* ─────────────────────────────────────────────────────────────
   P19-E. KEYBOARD DISCOVERY HINT — "⌘K to search"
   Added via CSS ::after on the panel.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .tools-menu::after,
body[data-theme="momentum"] .nav-more-menu.open::after {
  content: "⌘K  Search & navigate";
  display: block;
  margin: 6px 4px 2px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0.01em;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  text-align: center;
  pointer-events: none;
  user-select: none;
}

/* ─────────────────────────────────────────────────────────────
   P19-F. NAV DROPDOWN TRIGGER BUTTONS — header menuBtns
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .menuToggle.headerToggle .menuBtn.menuBtn-dropdown {
  gap: 5px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 0 11px !important;
}

body[data-theme="momentum"] .menuToggle.headerToggle .menuBtn.is-open {
  background: #eef2ff !important;
  color: #3730a3 !important;
  font-weight: 600 !important;
}

body[data-theme="momentum"] .menuBtn.menuBtn-dropdown .dropdown-chevron {
  opacity: 0.5 !important;
  transition: transform 160ms ease, opacity 160ms ease !important;
}

body[data-theme="momentum"] .menuBtn.menuBtn-dropdown:hover .dropdown-chevron,
body[data-theme="momentum"] .menuBtn.menuBtn-dropdown.is-open .dropdown-chevron {
  opacity: 0.85 !important;
}

/* ─────────────────────────────────────────────────────────────
   P19-G. DETAIL ACTIONS MENU — inline record action dropdown
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .detail-actions-menu .actions-menu-item {
  font-size: 13px !important;
  padding: 8px 11px !important;
  border-radius: 8px !important;
  gap: 9px !important;
}

body[data-theme="momentum"] .detail-actions-menu .actions-menu-item.danger,
body[data-theme="momentum"] .detail-actions-menu .actions-menu-item[data-danger="true"] {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}
body[data-theme="momentum"] .detail-actions-menu .actions-menu-item.danger:hover {
  background: #fff1f2 !important;
}

/* ─────────────────────────────────────────────────────────────
   P19-H. USER MENU DROPDOWN
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .header-user-dropdown {
  min-width: 200px !important;
}

body[data-theme="momentum"] .user-menu-item {
  font-size: 13px !important;
  padding: 8px 12px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 20 — FINAL 10/10 POLISH PASS
   Section structure · Action hierarchy · System noise · Numbers ·
   Notes composer · Value readability · Deal block premium
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   P20-A. FIELD GROUP TITLE BARS — left-accent makes sections
   instantly scannable. Moves from "barely visible label" to
   a proper card header that guides the eye.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .contact-field-group-title {
  padding: 10px 14px !important;
  background: #f7f9fc !important;
  border-bottom: 1px solid #edf1f7 !important;
  border-left: 3px solid #c7d2fe !important;
  color: #475569 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1 !important;
}

/* SVG icon inside the title bar */
body[data-theme="momentum"] #detailPanel .contact-field-group-title svg {
  color: #a5b4fc !important;
  opacity: 1 !important;
  width: 12px !important;
  height: 12px !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-B. TOP ACTION BAR HIERARCHY
   Edit becomes the visual anchor (indigo, slightly elevated).
   Back / Move / Actions are ghosts — important but secondary.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .detailTopStrip .btn[data-action="edit"],
body[data-theme="momentum"] #detailPanel .btn.detail-edit-btn,
body[data-theme="momentum"] #detailPanel .detailTopStrip .btn[title="Edit"],
body[data-theme="momentum"] #detailPanel .detailTopStrip [data-action="edit"] {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(99,102,241,0.3) !important;
}
body[data-theme="momentum"] #detailPanel .detailTopStrip .btn[data-action="edit"]:hover,
body[data-theme="momentum"] #detailPanel .detailTopStrip [data-action="edit"]:hover {
  background: #4f46e5 !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.4) !important;
}

/* Back: frequent navigation action, slightly emphasized but secondary to Edit */
body[data-theme="momentum"] #detailPanel .detailTopStrip .btn[title="Back to contacts list"],
body[data-theme="momentum"] #detailPanel .detailTopStrip .btn[title^="Back to "] {
  background: #f4f6ff !important;
  border-color: #cdd6fe !important;
  color: #3730a3 !important;
  -webkit-text-fill-color: #3730a3 !important;
  font-weight: 600 !important;
}
body[data-theme="momentum"] #detailPanel .detailTopStrip .btn[title="Back to contacts list"]:hover,
body[data-theme="momentum"] #detailPanel .detailTopStrip .btn[title^="Back to "]:hover {
  background: #eef2ff !important;
  border-color: #a5b4fc !important;
}

/* Pay Link / Compose: slightly more prominent than ghost */
body[data-theme="momentum"] #detailPanel .detailTopStrip .btn[data-action="pay"],
body[data-theme="momentum"] #detailPanel .detailTopStrip .btn[data-action="compose"] {
  color: #4338ca !important;
  -webkit-text-fill-color: #4338ca !important;
  border-color: #c7d2fe !important;
  background: #f5f3ff !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-C. SYSTEM ACTIVITY ITEMS — visual de-emphasis
   Auto-generated "Contact updated" / "Record edited" events
   recede behind meaningful entries (calls, notes, emails).
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-system="true"] {
  opacity: 0.48 !important;
}
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-system="true"]:hover {
  opacity: 0.75 !important;
  background: #f8fafc !important;
}
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-system="true"] .mm-timeline-title,
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-system="true"] > div:not(.mm-activity-bubble) {
  font-weight: 400 !important;
  font-size: 12px !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-system="true"] .mm-activity-bubble {
  opacity: 0.5 !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-D. NOTES COMPOSER — expand on focus, feel inviting
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .overview-note-composer textarea {
  min-height: 70px !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  transition:
    min-height 0.22s cubic-bezier(0.4,0,0.2,1),
    border-color 0.15s ease,
    box-shadow 0.15s ease !important;
}
body[data-theme="momentum"] .overview-note-composer textarea:focus {
  min-height: 108px !important;
  border-color: #6366f1 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-E. FORMATTED VALUE DISPLAY — clearly intentional data
   Numbers formatted by JS (mm-formatted-value) look purposeful.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .mm-formatted-value {
  font-style: normal !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  opacity: 1 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-F. INLINE INPUT READONLY — prevent italic on filled fields.
   The empty-field italic rule was triggering on fields that had
   a value but the [value=""] attribute check wasn't matching.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .inline-input[readonly]:not(:placeholder-shown) {
  font-style: normal !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  opacity: 1 !important;
}
/* The [value=""] rule was correct — only apply italic to truly empty */
body[data-theme="momentum"] #detailPanel .inline-input[value=""],
body[data-theme="momentum"] #detailPanel .inline-input:placeholder-shown {
  font-style: italic !important;
  color: #b8c6d6 !important;
  -webkit-text-fill-color: #b8c6d6 !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-G. DEAL CONTEXT HEADER BLOCK — more premium feeling
   Indigo accent tint makes it clearly "deal territory"
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .mm-deal-context {
  border-radius: 12px !important;
  border: 1px solid rgba(99,102,241,0.14) !important;
  box-shadow: 0 1px 5px rgba(99,102,241,0.07) !important;
}
body[data-theme="momentum"] .mm-deal-context-header {
  background: linear-gradient(to right, #f5f3ff, #f8f9ff) !important;
  border-bottom: 1px solid rgba(99,102,241,0.10) !important;
  padding: 9px 14px !important;
}
body[data-theme="momentum"] .mm-deal-context-label {
  color: #4338ca !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
body[data-theme="momentum"] .mm-deal-context-viewall {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6366f1 !important;
  opacity: 0.8;
  transition: opacity 150ms !important;
}
body[data-theme="momentum"] .mm-deal-context-viewall:hover {
  opacity: 1 !important;
  color: #4f46e5 !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-H. FIELD ROW VALUE — stronger contrast, clearly data
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .detailRow .value,
body[data-theme="momentum"] #detailPanel .detailRow .inline-input[readonly] {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-I. NOTES & ACTIVITY PANEL — stronger header presence
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-header {
  padding: 13px 16px 13px 10px !important;
  border-bottom: 1px solid #edf1f7 !important;
  background: #fafbfc !important;
  border-radius: 12px 12px 0 0 !important;
}
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-count {
  background: #e8edf5 !important;
  color: #475569 !important;
  font-weight: 700 !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-J. META LINE — more readable, less washed-out
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .mm-meta-line {
  font-size: 12.5px !important;
  color: #64748b !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  margin-top: 2px !important;
  line-height: 1.5 !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-K. NEXT TASK BLOCK — elevated with cleaner icon layout
   Replace the emoji icon with a styled div so alignment is
   consistent with the deal block above it.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .mm-next-task-block {
  border-radius: 12px !important;
  border: 1px solid rgba(251,191,36,0.25) !important;
  box-shadow: 0 1px 4px rgba(245,158,11,0.10) !important;
  padding: 11px 14px 10px !important;
}
body[data-theme="momentum"] .mm-next-task-icon {
  font-size: 15px !important;
  line-height: 1 !important;
  margin-top: 1px !important;
}
body[data-theme="momentum"] .mm-next-task-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}
body[data-theme="momentum"] .mm-next-task-due {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #b45309 !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-L. QUICK ACTIONS ROW — slightly more breathing room
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .mm-quick-actions {
  margin-top: 10px !important;
  gap: 6px !important;
}
body[data-theme="momentum"] .mm-quick-btn {
  height: 31px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
  padding: 0 13px !important;
  letter-spacing: -0.01em !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-M. ACTIVITY TIMELINE — improved bubble/spine alignment
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .contact-activity-feed {
  padding: 6px 0 16px !important;
}
/* Slight extra padding below last item so it doesn't feel cramped */
body[data-theme="momentum"] .activityItem.contact-activity-item:last-child {
  margin-bottom: 4px !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-N. STAT CHIP ROW — refinement for 10/10
───────────────────────────────────────────────────────────── */
.mm-chip-label {
  font-size: 9.5px !important;
  letter-spacing: 0.09em !important;
  font-weight: 700 !important;
}
.mm-chip-value {
  font-size: 17px !important;
  letter-spacing: -0.5px !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-O. HEALTH BADGE — remove animation noise for healthy
   (The pulse is meaningful for at_risk; healthy badge is static)
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .mm-health-signal[data-mm-health="healthy"] {
  animation: none !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-P. CONTACT CARD (primary contact in company view) —
   Slightly more prominent gradient, clearer name color.
───────────────────────────────────────────────────────────── */
.mm-contact-card {
  background: linear-gradient(135deg, #eff6ff 0%, #f0f2ff 100%) !important;
  border: 1px solid #c4d9f8 !important;
}
.mm-contact-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e3a6e !important;
  -webkit-text-fill-color: #1e3a6e !important;
}
.mm-contact-avatar {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-Q. LAST TOUCH LINE — more readable, not so washed out
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .mm-last-touch {
  font-size: 12px !important;
  color: #7c8fa5 !important;
  margin-top: 3px !important;
}
body[data-theme="momentum"] .mm-last-touch strong {
  color: #475569 !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 20 — DOCUMENT LIBRARY UX POLISH (MOMENTUM)
   Light surface · Card hierarchy · Hover actions · Selection
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   P20-1. BACKGROUND — light neutral, matches rest of CRM
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .documents-library-container {
  background: #f7f9fc !important;
}
body[data-theme="momentum"] .documents-main {
  background: #f7f9fc !important;
  padding: 16px 20px !important;
}
body[data-theme="momentum"] .documents-content {
  background: #f7f9fc !important;
}
/* Header and categories: white surface */
body[data-theme="momentum"] .documents-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15,23,42,0.08) !important;
}
body[data-theme="momentum"] .documents-categories {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15,23,42,0.07) !important;
  padding: 10px 20px !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-2. GRID SPACING — balanced, aligned
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .documents-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 14px !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-3. DOCUMENT CARD — premium surface, consistent system
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .document-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
  transition:
    box-shadow 160ms ease,
    border-color 160ms ease,
    transform 160ms ease !important;
  cursor: pointer !important;
}

/* Hover: lift + deeper shadow */
body[data-theme="momentum"] .document-card:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.10),
    0 1px 3px rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-4. DOCUMENT PREVIEW AREA — lighter, warmer
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .document-preview {
  background: linear-gradient(135deg, #f0f4fb 0%, #e8eef7 100%) !important;
  aspect-ratio: 16/10 !important; /* slightly less tall = more name visible */
}

/* File type icon: clearer, not washed out */
body[data-theme="momentum"] .preview-icon {
  font-size: 52px !important;
  opacity: 0.75 !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-5. HOVER OVERLAY — premium semi-transparent, not black
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .document-overlay {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  gap: 6px !important;
}

/* Overlay action buttons: consistent with rest of UI */
body[data-theme="momentum"] .doc-action-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #1e293b !important;
  border: none !important;
  transition: background 130ms, transform 130ms !important;
}
body[data-theme="momentum"] .doc-action-btn:hover {
  background: #ffffff !important;
  transform: scale(1.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
body[data-theme="momentum"] .doc-action-btn svg {
  width: 16px !important;
  height: 16px !important;
  color: #334155 !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-6. DOCUMENT INFO AREA — clear hierarchy
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .document-info {
  padding: 12px 14px !important;
}

/* File name: bold, clearly primary */
body[data-theme="momentum"] .document-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.1px !important;
}

/* Metadata line: size · date */
body[data-theme="momentum"] .document-meta {
  font-size: 11px !important;
  color: #94a3b8 !important;
  gap: 4px !important;
  margin-bottom: 8px !important;
}
body[data-theme="momentum"] .document-meta .meta-separator {
  opacity: 0.4 !important;
}

/* Description: muted supporting text */
body[data-theme="momentum"] .document-description {
  font-size: 11.5px !important;
  color: #64748b !important;
  line-height: 1.45 !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-7. CONTEXTUAL TAGS / CHIPS — subtle, branded
   (doc-row-category, document category chips)
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .document-card .doc-row-category,
body[data-theme="momentum"] .document-info .category-badge,
body[data-theme="momentum"] .document-info [class*="tag"],
body[data-theme="momentum"] .document-info [class*="badge"] {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  background: #eef2ff !important;
  color: #3730a3 !important;
  border: 1px solid #c7d2fe !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 4px !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-8. SELECTION STATE — clear, consistent with other tabs
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .document-card.selected {
  background: #f0f6ff !important;
  border: 2px solid #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}
body[data-theme="momentum"] .document-card.selected .document-preview {
  background: linear-gradient(135deg, #e8eeff 0%, #dde8ff 100%) !important;
}

/* Checkbox: more visible */
body[data-theme="momentum"] .item-checkbox {
  width: 16px !important;
  height: 16px !important;
  accent-color: #6366f1 !important;
  cursor: pointer !important;
}

/* Selection checkbox wrapper: better positioned */
body[data-theme="momentum"] .selection-checkbox {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 10 !important;
  background: rgba(255,255,255,0.85) !important;
  border-radius: 5px !important;
  padding: 2px !important;
  backdrop-filter: blur(4px) !important;
  opacity: 0 !important;
  transition: opacity 150ms !important;
}
body[data-theme="momentum"] .document-card:hover .selection-checkbox,
body[data-theme="momentum"] .document-card.selected .selection-checkbox {
  opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-9. CATEGORY FILTER CHIPS — match CRM chip language
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .category-chip {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(15,23,42,0.09) !important;
  color: #475569 !important;
  gap: 5px !important;
  transition: all 140ms !important;
}
body[data-theme="momentum"] .category-chip:hover {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #3730a3 !important;
}
body[data-theme="momentum"] .category-chip.active {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(99,102,241,0.3) !important;
}
body[data-theme="momentum"] .category-chip.active .category-count {
  background: rgba(255,255,255,0.2) !important;
}
body[data-theme="momentum"] .category-count {
  font-size: 10px !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  background: rgba(15,23,42,0.07) !important;
}

/* ─────────────────────────────────────────────────────────────
   P20-10. EMPTY STATE — consistent with other empty states
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .documents-main .empty-state {
  padding: 60px 24px !important;
}
body[data-theme="momentum"] .documents-main .empty-icon {
  font-size: 56px !important;
  margin-bottom: 16px !important;
  opacity: 0.35 !important;
}
body[data-theme="momentum"] .documents-main .empty-state h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin-bottom: 8px !important;
}
body[data-theme="momentum"] .documents-main .empty-state p {
  font-size: 14px !important;
  color: #94a3b8 !important;
  max-width: 400px !important;
  margin-bottom: 24px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 21 — CONTACT OVERVIEW 10/10 HARDENING
   Edit hierarchy · Select/value correctness · Inline-style cleanup ·
   Next task redesign · Composer button normalization
═══════════════════════════════════════════════════════════════ */

/* P21-1. Edit button is always the primary action */
body[data-theme="momentum"] #detailPanel .edit-btn,
body[data-theme="momentum"] #detailPanel .btn.edit-btn,
body[data-theme="momentum"] #detailHeaderActions .edit-btn {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(99,102,241,0.28) !important;
}
body[data-theme="momentum"] #detailPanel .edit-btn:hover,
body[data-theme="momentum"] #detailHeaderActions .edit-btn:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

/* Back to [Contact] button — same prominence as Edit */
body[data-theme="momentum"] #detailPanel .detail-back-btn {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body[data-theme="momentum"] #detailPanel .detail-back-btn:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* P21-2. Select fields should render as real values, not muted placeholders */
body[data-theme="momentum"] #detailPanel .detailRow select,
body[data-theme="momentum"] #detailPanel .detailRow select.inline-input {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-style: normal !important;
  font-size: 13.5px !important;
  opacity: 1 !important;
}

/* P21-3. Empty-state styling should rely on dynamic classes / placeholder state */
body[data-theme="momentum"] #detailPanel .inline-input:placeholder-shown,
body[data-theme="momentum"] #detailPanel .inline-input.mm-no-value {
  font-style: italic !important;
  color: #b8c6d6 !important;
  -webkit-text-fill-color: #b8c6d6 !important;
}
body[data-theme="momentum"] #detailPanel .inline-input:not(:placeholder-shown),
body[data-theme="momentum"] #detailPanel .inline-input.mm-has-value {
  font-style: normal !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* P21-4. Activity rows — momentum CSS owns the surface entirely */
body[data-theme="momentum"] .activityItem.contact-activity-item {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* P21-5. Next task block redesign (single-row compact card) */
body[data-theme="momentum"] .mm-next-task-block {
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-left: 3px solid #f59e0b;
  border-radius: 12px;
  padding: 10px 12px;
  width: 100%;
  max-width: none;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.10);
}
body[data-theme="momentum"] .mm-next-task-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
body[data-theme="momentum"] .mm-task-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  flex-shrink: 0;
}
body[data-theme="momentum"] .mm-next-task-icon {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body[data-theme="momentum"] .mm-next-task-icon svg {
  width: 14px;
  height: 14px;
}
body[data-theme="momentum"] .mm-next-task-info {
  flex: 1;
  min-width: 0;
}
body[data-theme="momentum"] .mm-next-task-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-theme="momentum"] .mm-next-task-due {
  font-size: 11px;
  font-weight: 500;
  color: #a16207;
  margin-top: 1px;
}
body[data-theme="momentum"] .mm-next-task-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  flex: 0 0 auto;
}
body[data-theme="momentum"] .mm-task-icon-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  border-radius: 8px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
body[data-theme="momentum"] .mm-task-icon-btn svg {
  width: 14px !important;
  height: 14px !important;
}
body[data-theme="momentum"] .mm-task-icon-btn.mm-task-complete {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #15803d;
}
body[data-theme="momentum"] .mm-task-icon-btn.mm-task-complete:hover {
  background: #dcfce7;
  border-color: #4ade80;
}

/* Complete and New: check + plus, same green as complete */
body[data-theme="momentum"] .mm-task-icon-btn.mm-task-complete-new {
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  color: #047857;
}
body[data-theme="momentum"] .mm-task-icon-btn.mm-task-complete-new:hover {
  background: #d1fae5;
  border-color: #34d399;
}
body[data-theme="momentum"] .mm-task-icon-btn.mm-task-edit {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #4f46e5;
}
body[data-theme="momentum"] .mm-task-icon-btn.mm-task-edit:hover {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.5);
  color: #4338ca;
}

/* P21-6. Composer type button normalization (beats inline styles) */
body[data-theme="momentum"] .overview-note-composer > div > [data-ov-type],
body[data-theme="momentum"] .overview-note-composer > div > [data-ov-voice] {
  gap: 6px !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  min-height: 44px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 22 — FINAL VISUAL EXCELLENCE PASS
═══════════════════════════════════════════════════════════════ */

/* P22-1. Account Type + select controls must look like real values */
body[data-theme="momentum"] #detailPanel .detailRow select[data-key="accountType"],
body[data-theme="momentum"] #detailPanel .detailRow select[data-key="owner"],
body[data-theme="momentum"] #detailPanel .detailRow select.inline-input {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-style: normal !important;
  font-weight: 500 !important;
  background: #ffffff !important;
  border: 1px solid #d7e0ea !important;
  border-radius: 7px !important;
  padding-left: 10px !important;
  min-height: 30px !important;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03) !important;
}
body[data-theme="momentum"] #detailPanel .detailRow select[data-key="accountType"]:focus,
body[data-theme="momentum"] #detailPanel .detailRow select[data-key="owner"]:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
}

/* P22-2. Field rows — stronger information hierarchy */
body[data-theme="momentum"] #detailPanel .detailRow {
  min-height: 40px !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid #edf2f7 !important;
}
body[data-theme="momentum"] #detailPanel .detailRow .label {
  color: #6b7f95 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
body[data-theme="momentum"] #detailPanel .detailRow .value,
body[data-theme="momentum"] #detailPanel .detailRow .inline-input[readonly] {
  color: #0b1320 !important;
  -webkit-text-fill-color: #0b1320 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

/* P22-3. Revenue + numeric values should look intentional */
body[data-theme="momentum"] #detailPanel .inline-input[data-key="annualRevenue"],
body[data-theme="momentum"] #detailPanel .inline-input[data-key="employeeCount"] {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}

/* P22-4. Notes panel gets premium contrast and structure */
body[data-theme="momentum"] #detailPanel .contact-overview-right > .detailSection {
  border: 1px solid #dde5ef !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06) !important;
}
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-header {
  background: linear-gradient(to right, #f8fafd, #fbfcff) !important;
  border-bottom: 1px solid #e7edf5 !important;
}
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-title {
  color: #3f5167 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-count {
  background: #e8eef8 !important;
  color: #41556f !important;
}

/* P22-5. Composer controls feel less washed out */
body[data-theme="momentum"] .overview-note-composer textarea {
  border: 1px solid #d7e0ea !important;
  background: #fbfcfe !important;
  color: #1e293b !important;
}
body[data-theme="momentum"] .overview-note-composer textarea:focus {
  background: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.14) !important;
}
body[data-theme="momentum"] .overview-note-composer [data-ov-type],
body[data-theme="momentum"] .overview-note-composer [data-ov-voice] {
  background: #ffffff !important;
  border-color: #dce4ed !important;
  color: #465a71 !important;
}
body[data-theme="momentum"] .overview-note-composer [data-ov-type]:hover,
body[data-theme="momentum"] .overview-note-composer [data-ov-voice]:hover {
  background: #f3f7fc !important;
}

/* P22-6. System activity entries should recede further */
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-system="true"] {
  opacity: 0.34 !important;
}
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-system="true"] .mm-timeline-title,
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-system="true"] > div:not(.mm-activity-bubble) {
  font-weight: 400 !important;
  color: #7e8ea1 !important;
  -webkit-text-fill-color: #7e8ea1 !important;
}
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-system="true"] .mm-activity-bubble {
  opacity: 0.35 !important;
}
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-system="true"]:hover {
  opacity: 0.62 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 23 — MICRO-POLISH "PERFECTION" PASS
   Signal hierarchy · rhythm · typography · panel density
═══════════════════════════════════════════════════════════════ */

/* P23-1. Overview columns: cleaner rhythm and stronger split */
body[data-theme="momentum"] #detailPanel .contact-overview-layout {
  gap: 18px !important;
}
body[data-theme="momentum"] #detailPanel .contact-overview-left,
body[data-theme="momentum"] #detailPanel .contact-overview-right {
  min-width: 0 !important;
}

/* P23-2. Left cards: single light border, no shadow */
body[data-theme="momentum"] #detailPanel .contact-field-group {
  border: 1px solid rgba(15,23,42,0.06) !important;
  box-shadow: none !important;
}
body[data-theme="momentum"] #detailPanel .detailRow {
  border-bottom: 1px solid rgba(15,23,42,0.04) !important;
}
body[data-theme="momentum"] #detailPanel .detailRow:hover {
  background: #f7fafe !important;
}

/* P23-3. Fields should read as data first, input second */
body[data-theme="momentum"] #detailPanel .inline-input[readonly] {
  border-color: transparent !important;
  background: transparent !important;
  padding-left: 0 !important;
  font-weight: 500 !important;
  color: #0b1320 !important;
  -webkit-text-fill-color: #0b1320 !important;
}
body[data-theme="momentum"] #detailPanel .detailRow:hover .inline-input[readonly] {
  border-color: #dbe4ee !important;
  background: #f5f8fc !important;
  padding-left: 8px !important;
}

/* P23-4. Right panel: light border, no shadow */
body[data-theme="momentum"] #detailPanel .contact-overview-right > .detailSection {
  border: 1px solid rgba(15,23,42,0.06) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-header {
  padding: 14px 16px !important;
}
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-title {
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  color: #33465d !important;
}

/* P23-5. Composer controls: more premium and less washed out */
body[data-theme="momentum"] .overview-note-composer {
  margin: 0 10px !important;
}
body[data-theme="momentum"] .overview-note-composer > div:first-child {
  padding: 12px 14px !important;
  gap: 8px !important;
}
body[data-theme="momentum"] .overview-note-composer textarea {
  min-height: 80px !important;
  line-height: 1.6 !important;
}
body[data-theme="momentum"] .overview-note-composer-actions {
  padding: 10px 16px 14px 10px !important;
}

/* P23-6. Activity signal hierarchy */
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-primary="true"] {
  background: #f5f9ff !important;
  border-left: 2px solid #93c5fd !important;
  border-radius: 8px !important;
}
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-primary="true"] .mm-timeline-title {
  font-weight: 700 !important;
  color: #102238 !important;
  -webkit-text-fill-color: #102238 !important;
}

/* Collapse duplicate low-signal system events generated by automations */
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-collapsed="true"] {
  display: none !important;
}

/* Keep one system row visible but clearly secondary */
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-system="true"] {
  opacity: 0.26 !important;
}
body[data-theme="momentum"] .activityItem.contact-activity-item[data-mm-system="true"]:hover {
  opacity: 0.46 !important;
}

/* P23-7. Tabs and header precision tuning */
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-header {
  margin-bottom: 14px !important;
}
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn {
  font-size: 12.5px !important;
}
body[data-theme="momentum"] #detailPanel .detailHeader {
  padding-bottom: 18px !important;
}

/* P23-8. Right panel content density + system summary */
body[data-theme="momentum"] #detailPanel .contact-overview-right .contact-activity-feed,
body[data-theme="momentum"] #detailPanel .contact-overview-right .activityLog,
body[data-theme="momentum"] #detailPanel .contact-overview-right > .detailSection > div[style*="max-height:500px"] {
  max-height: 360px !important;
  overflow-y: auto !important;
  margin-top: 6px !important;
  padding-right: 2px !important;
}

body[data-theme="momentum"] .mm-activity-summary-row {
  margin: 6px 12px 2px 40px;
  font-size: 10.5px;
  color: #94a3b8;
  letter-spacing: 0.01em;
  user-select: none;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer textarea {
  min-height: 64px !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer textarea:focus {
  min-height: 88px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 24 — CROSS-TAB PERFECTION PASS
   Deals · Tasks · Relationships · Activity · Documents
═══════════════════════════════════════════════════════════════ */

/* P24-1. Shared tab panel rhythm */
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .detailSection {
  margin-top: 0 !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  padding: 14px !important;
}

/* P24-2. Deals tab: stronger hierarchy + cleaner action density */
body[data-theme="momentum"] #detailPanel .contact-deals-section .contact-deal-card {
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section .contact-deal-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(59, 130, 246, 0.28) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1) !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section .contact-deal-title {
  font-size: 14px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
}

/* P24-3. Tasks tab: make rows feel crisp and scannable */
body[data-theme="momentum"] #detailPanel .contact-tasks-section .task-row {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
}
body[data-theme="momentum"] #detailPanel .contact-tasks-section .task-row .mm-task-title {
  margin-bottom: 3px !important;
}
body[data-theme="momentum"] #detailPanel .contact-tasks-section .task-row .btn {
  min-width: 70px !important;
}

/* P24-4. Relationships tab: premium card language */
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .contact-related-list {
  gap: 10px !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-card {
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.11) !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-icon {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px 6px rgba(15, 23, 42, 0.12) !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-view-btn,
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-remove-btn {
  border-radius: 8px !important;
  min-height: 30px !important;
  min-width: 78px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection .primary-badge {
  border: 1px solid #fde68a !important;
  background: #fef9c3 !important;
  color: #854d0e !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
}

/* P24-5. Activity tab: momentum style — soft stats, aligned timeline, clean rows */
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .contact-deals-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 2px 0 14px !important;
}
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .contact-deals-summary-card {
  border: none !important;
  border-radius: 10px !important;
  background: #f1f5f9 !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
  min-height: 0 !important;
}
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .contact-deals-summary-k {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #64748b !important;
  text-transform: uppercase !important;
}
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .contact-deals-summary-v {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  letter-spacing: -0.02em !important;
}
/* Single spine aligned with bubble (same as overview) */
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .contact-activity-feed {
  gap: 0 !important;
  padding: 6px 0 16px !important;
}
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .contact-activity-feed::before {
  left: 15px !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 2px !important;
  background: linear-gradient(to bottom, transparent 0%, #dde6f0 8%, #dde6f0 92%, transparent 100%) !important;
}
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .activityItem.contact-activity-item {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding: 10px 12px 10px 40px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 1px 0 !important;
}
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .activityItem.contact-activity-item:hover {
  background: #f4f8fc !important;
}
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .activityItem.contact-activity-item > div:nth-child(3) {
  flex: 1 !important;
  min-width: 0 !important;
}
/* Hide duplicate title in body (title lives in marker); keep time + labels */
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .activityItem.contact-activity-item > div:nth-child(3) > div:first-child > div:first-child {
  display: none !important;
}

/* P24-6. Documents tab: tighten utility toolbar and rows */
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .documents-header {
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  padding: 12px 14px !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .documents-actions .btn {
  min-height: 32px !important;
  border-radius: 8px !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .document-row {
  min-height: 52px !important;
  border-radius: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 25 — TASKS TAB FINAL EXCELLENCE PASS
═══════════════════════════════════════════════════════════════ */

/* P25-1. Task tab shell and header spacing */
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 2px 0 !important;
}
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .related-section-header {
  padding: 10px 0 14px !important;
}

/* P25-2. Summary cards read as one cohesive strip */
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .contact-deals-summary {
  margin: 0 0 12px !important;
  gap: 8px !important;
}
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .contact-deals-summary-card {
  min-height: 68px !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

/* P25-3. Task cards: full-width, cleaner vertical rhythm */
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .mm-task-row {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
}
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .mm-task-main {
  min-width: 0 !important;
  gap: 4px !important;
}
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .mm-task-meta {
  gap: 6px !important;
}

/* P25-4. Priority hierarchy: title/date first, chips second */
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .mm-task-title {
  font-size: 14px !important;
  font-weight: 760 !important;
  line-height: 1.3 !important;
}
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .mm-task-date {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  min-width: 150px !important;
}

/* P25-5. Action rail: tighter controls and better alignment */
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .mm-task-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 140px !important;
}
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .mm-task-actions .btn {
  min-width: 34px !important;
  height: 30px !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 26 — RELATIONSHIPS TAB FINAL EXCELLENCE PASS
═══════════════════════════════════════════════════════════════ */

/* P26-1. Section rhythm and header polish */
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 2px 0 !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .related-section-header {
  padding: 10px 0 14px !important;
  margin-bottom: 2px !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .related-section-title {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
}

/* P26-2. List + card: premium full-width row language */
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .contact-related-list {
  display: grid !important;
  gap: 10px !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-card {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  box-sizing: border-box !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-card:hover {
  border-color: rgba(79, 70, 229, 0.35) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.11) !important;
  transform: translateY(-1px) !important;
}

/* P26-3. Icon + info hierarchy */
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 2px 6px rgba(15, 23, 42, 0.14) !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-info {
  min-width: 0 !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-info > div:first-child {
  font-size: 14px !important;
  font-weight: 760 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-info > div:nth-child(2) {
  margin-top: 4px !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-info > div:nth-child(2) span {
  padding: 3px 9px !important;
  border-radius: 999px !important;
  border: 1px solid #dbe2ea !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

/* P26-4. Primary badge: clearer but still subtle */
body[data-theme="momentum"] #detailPanel .relationshipsSection .primary-badge {
  padding: 2px 8px !important;
  border-radius: 999px !important;
  border: 1px solid #fcd34d !important;
  background: #fffbeb !important;
  color: #92400e !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
}

/* P26-5. Action rail: cleaner and less cramped */
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 150px !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-view-btn,
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-remove-btn {
  min-width: 70px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-view-btn {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  color: #ffffff !important;
  border: 1px solid #4338ca !important;
}
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-remove-btn {
  background: #ffffff !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 27 — DOCUMENTS TAB FINAL EXCELLENCE PASS
═══════════════════════════════════════════════════════════════ */

/* P27-1. Tab shell and helper hint */
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 2px 0 !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] #docSelectionHint {
  background: #eef2ff !important;
  border: 1px solid #c7d2fe !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  color: #4338ca !important;
  display: inline-flex !important;
}

/* P27-2. Toolbar hierarchy and button language */
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] #docSelectionActions {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
  padding: 7px 10px !important;
  gap: 6px !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] #docSelectionCount {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .deal-btn {
  height: 32px !important;
  border-radius: 8px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .mm-doc-btn-icon {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  opacity: 0.95 !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] #btnCreateDocDocs {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  border-color: #4338ca !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] #btnViewPortal {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
}

/* P27-3. Table surface + typography precision */
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .pipe-list-table {
  min-width: 980px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .pipe-list-table thead tr {
  background: #f8fafc !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .pipe-list-table th {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .pipe-list-table td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-bottom-color: #eef2f7 !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .pipe-list-table tbody tr:hover {
  background: #fcfdff !important;
}

/* P27-4. File name + badges + action rail */
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .pipe-list-table .badge {
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .pipe-list-table td:last-child .deal-btn {
  height: 30px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 0 10px !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .doc-action-pill {
  border-radius: 8px !important;
  min-height: 32px !important;
  box-shadow: none !important;
  transform: none !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .doc-action-pill:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1) !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .doc-action-pill-view {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .doc-action-pill-share {
  background: #ecfdf5 !important;
  border-color: #86efac !important;
  color: #047857 !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .doc-actions-trigger {
  min-height: 32px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-color: #dbe5f0 !important;
  background: #ffffff !important;
  color: #334155 !important;
}
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .doc-actions-menu {
  border-color: #dbe5f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14) !important;
}
body[data-theme="momentum"] #detailPanel #btnAddFromLibraryEmpty .mm-doc-btn-icon,
body[data-theme="momentum"] #detailPanel #btnImportFilesEmpty .mm-doc-btn-icon,
body[data-theme="momentum"] #detailPanel #btnCreateDocEmpty .mm-doc-btn-icon {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 28 — DEALS TAB FINAL EXCELLENCE PASS
═══════════════════════════════════════════════════════════════ */

/* P28-1. Section shell and header rhythm */
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 2px 0 !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .related-section-header {
  padding: 10px 0 14px !important;
}

/* P28-2. Summary cards: stronger scanability */
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deals-summary {
  margin: 0 0 12px !important;
  gap: 8px !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deals-summary-card {
  min-height: 68px !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deals-summary-v {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
}

/* P28-3. Deal cards: cleaner composition and density */
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-card {
  padding: 13px 14px !important;
  border-radius: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-main-top {
  align-items: flex-start !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-title {
  font-size: 16px !important;
  font-weight: 760 !important;
  line-height: 1.28 !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .mm-deal-inline-value {
  font-size: 28px !important;
  font-weight: 780 !important;
  color: #166534 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin-left: 12px !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-health-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
}

/* P28-4. Pills and next-action strip */
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-subtext {
  margin-top: 7px !important;
  gap: 5px !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-subtext > span {
  padding: 2px 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .mm-deal-next-row {
  margin-top: 8px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .mm-deal-next-text {
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* P28-5. Metrics + footer readability */
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-metrics {
  margin-top: 9px !important;
  gap: 7px !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-metric {
  border-radius: 8px !important;
  padding: 8px 9px !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-metric .k {
  font-size: 8.5px !important;
  letter-spacing: 0.08em !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-metric .v {
  font-size: 13px !important;
  font-weight: 760 !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-footer {
  margin-top: 8px !important;
  gap: 5px !important;
}
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-footer-pill {
  font-size: 10px !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}

/* P28-6. Edit button: cleaner secondary action */
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-edit-btn {
  height: 28px !important;
  min-width: 54px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 29 — CONTACT LIST / SEARCH FINAL EXCELLENCE PASS
═══════════════════════════════════════════════════════════════ */

/* P29-1. Search and filter bar */
body[data-theme="momentum"] .app-shell.contacts-v2-view .filters-modern {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .filter-bar-main {
  gap: 8px !important;
  align-items: center !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .filter-search-wrap {
  min-width: 260px !important;
  max-width: 460px !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .filter-search-input {
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid #dbe2ea !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding-right: 92px !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .filter-search-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14) !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .actions-dropdown-btn,
body[data-theme="momentum"] .app-shell.contacts-v2-view .filter-sort-select,
body[data-theme="momentum"] .app-shell.contacts-v2-view .filterBtn,
body[data-theme="momentum"] .app-shell.contacts-v2-view #addContactBtn {
  height: 34px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view #addContactBtn {
  background: linear-gradient(135deg, #111827 0%, #0f172a 100%) !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.2) !important;
}

/* P29-2. Contacts tabs */
body[data-theme="momentum"] .app-shell.contacts-v2-view .gmail-tabs {
  border-radius: 12px 12px 0 0 !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .gmail-tab {
  font-size: 13px !important;
  font-weight: 650 !important;
  color: #475569 !important;
  background: #f8fafc !important;
  min-height: 42px !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .gmail-tab.active {
  color: #0f172a !important;
  background: #ffffff !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .gmail-tab.active::after {
  background: #2563eb !important;
  height: 2.5px !important;
}

/* P29-3. List table surface */
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-list-table-wrap {
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  background: #ffffff !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-list-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-list-table thead tr {
  background: #f8fafc !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-list-th,
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-list-head-check {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #64748b !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

/* Prevent column header overlap: reserve space for NEXT ACTION and COMPANY */
body[data-theme="momentum"] .contact-list-table thead th:nth-child(3) {
  min-width: 90px !important; /* "NEXT ACTION" */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body[data-theme="momentum"] .contact-list-table thead th:nth-child(4) {
  min-width: 72px !important; /* "COMPANY" */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-list-table td {
  border-bottom: 1px solid #eef2f7 !important;
}

/* P29-4. Row hierarchy and interaction */
body[data-theme="momentum"] .app-shell.contacts-v2-view .pipe-list-row.contact-row {
  background: #ffffff !important;
  transition: background 130ms ease !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .pipe-list-row.contact-row:hover {
  background: #f8fbff !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-name-cell {
  font-size: 14px !important;
  font-weight: 720 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-timeline-cell,
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-updated-cell,
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-created-cell {
  color: #64748b !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* P29-5. Pills and badges */
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-next-task-pill,
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-company-pill,
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-deal-pill,
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-status-pill {
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-company-pill {
  background: #e0e7ff !important;
  color: #3730a3 !important;
  border: 1px solid #c7d2fe !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-deal-pill {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
}
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-status-pill {
  padding: 4px 10px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

/* P29-6. Checkbox precision */
body[data-theme="momentum"] .app-shell.contacts-v2-view .contact-list-check-td input.row-check,
body[data-theme="momentum"] .app-shell.contacts-v2-view #contactTableSelectAll {
  width: 17px !important;
  height: 17px !important;
  border-radius: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 30 — TOP-LEVEL DEALS PAGES FINAL EXCELLENCE PASS
   Kanban · List · Grouped · Graph
═══════════════════════════════════════════════════════════════ */

/* P30-1. Pipeline shell + sticky header */
body[data-theme="momentum"] #pipelinePanel {
  background: #f7f9fc !important;
}
body[data-theme="momentum"] #pipelinePanel > div:first-child {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 1px 8px rgba(15, 23, 42, 0.04) !important;
  padding: 10px 12px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-summary .pill {
  border-radius: 999px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-header-right #pipeRefreshBtn {
  height: 34px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 1px solid #dbe2ea !important;
  color: #334155 !important;
  background: #ffffff !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-view-toggle {
  border: 1px solid #dbe2ea !important;
  background: #f8fafc !important;
  border-radius: 10px !important;
  padding: 3px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-view-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-view-btn.active {
  background: #ffffff !important;
  color: #1e40af !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1) !important;
}

/* P30-2. Kanban view */
body[data-theme="momentum"] #pipelinePanel .pipe-board-kanban {
  padding: 8px 4px 10px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-kanban-wrap {
  gap: 14px !important;
  grid-auto-columns: minmax(300px, 360px) !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-kanban-col {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-kanban-head {
  padding: 12px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-stage-name {
  font-size: 14px !important;
  font-weight: 760 !important;
  color: #0f172a !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-kanban-head-total {
  font-size: 11px !important;
  color: #64748b !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-kanban-empty {
  border: 1px dashed #cbd5e1 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  color: #94a3b8 !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-deal-card {
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  padding: 11px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-deal-card:hover {
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12) !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-card-name {
  font-size: 14px !important;
  font-weight: 760 !important;
  color: #0f172a !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-card-value {
  font-size: 13px !important;
  font-weight: 760 !important;
  color: #166534 !important;
}

/* P30-3. List view */
body[data-theme="momentum"] #pipelinePanel .pipe-board-list {
  gap: 12px !important;
  padding: 12px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-list-filters {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.04) !important;
  padding: 10px 12px !important;
  gap: 8px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-list-search,
body[data-theme="momentum"] #pipelinePanel .pipe-list-stage-filter {
  height: 34px !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  font-size: 12.5px !important;
  color: #334155 !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-list-search:focus,
body[data-theme="momentum"] #pipelinePanel .pipe-list-stage-filter:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14) !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-list-stale-toggle {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
}
body[data-theme="momentum"] #pipelinePanel .contact-deals-summary-card {
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}
body[data-theme="momentum"] #pipelinePanel .contact-deals-list .contact-deal-card {
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

/* P30-4. Grouped view */
body[data-theme="momentum"] #pipelinePanel .pipe-board-grouped {
  padding: 12px !important;
  gap: 12px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-grouped-controls {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-grouped-select {
  height: 34px !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  font-size: 12.5px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-group-section {
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-group-header {
  background: #f8fafc !important;
  border-left-width: 3px !important;
  padding: 12px 14px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-group-title {
  font-size: 14px !important;
  font-weight: 760 !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-group-deal:hover {
  background: #f8fbff !important;
}

/* P30-5. Graph/analytics view */
body[data-theme="momentum"] #pipelinePanel .pipe-board-graph {
  padding: 12px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-graph-grid {
  gap: 14px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-graph-card {
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  background: #ffffff !important;
  padding: 16px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-graph-card h3 {
  font-size: 24px !important;
  font-weight: 760 !important;
  color: #0f172a !important;
  margin-bottom: 10px !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-summary-stat {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-summary-value {
  font-size: 40px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-summary-label {
  font-size: 11px !important;
  color: #64748b !important;
  letter-spacing: 0.07em !important;
}
body[data-theme="momentum"] #pipelinePanel .pipe-funnel-bar-wrap {
  background: #eaf0f7 !important;
  border-radius: 7px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 31 — HOME / COMMAND CENTER FINAL EXCELLENCE PASS
═══════════════════════════════════════════════════════════════ */

/* P31-1. Global shell and top rhythm */
body[data-theme="momentum"] .commandCenter {
  padding: 16px 18px 64px !important;
  background: #f7f9fc !important;
}
body[data-theme="momentum"] .commandCenter .cc-header {
  margin-bottom: 16px !important;
  align-items: flex-start !important;
}
body[data-theme="momentum"] .commandCenter .cc-title {
  font-size: 30px !important;
  font-weight: 820 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
}
body[data-theme="momentum"] .commandCenter .cc-subtitle {
  font-size: 13px !important;
  color: #64748b !important;
}

/* P31-2. Filter bar */
body[data-theme="momentum"] .commandCenter .cc-filter-bar {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  padding: 10px 12px !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
body[data-theme="momentum"] .commandCenter .cc-filter-search input {
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid #dbe2ea !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
body[data-theme="momentum"] .commandCenter .cc-filter-search input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14) !important;
}
body[data-theme="momentum"] .commandCenter .cc-filter-dropdown-btn,
body[data-theme="momentum"] .commandCenter .cc-create-new-btn,
body[data-theme="momentum"] .commandCenter .cc-btn {
  height: 34px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] .commandCenter .cc-create-new-btn {
  background: linear-gradient(135deg, #111827 0%, #0f172a 100%) !important;
  border: 1px solid #0f172a !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.22) !important;
}
body[data-theme="momentum"] .commandCenter .cc-create-new-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.25) !important;
}

/* P31-3. KPI strip */
body[data-theme="momentum"] .commandCenter .cc-kpi-strip {
  gap: 10px !important;
  margin-bottom: 14px !important;
}
body[data-theme="momentum"] .commandCenter .cc-kpi {
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  padding: 12px 13px !important;
}
body[data-theme="momentum"] .commandCenter .cc-kpi-label {
  font-size: 10.5px !important;
  color: #64748b !important;
  letter-spacing: 0.07em !important;
}
body[data-theme="momentum"] .commandCenter .cc-kpi-value {
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  color: #0f172a !important;
}
body[data-theme="momentum"] .commandCenter .cc-kpi-sub {
  font-size: 11px !important;
  color: #94a3b8 !important;
}

/* P31-4. Widget rows/cards */
body[data-theme="momentum"] .commandCenter .cc-widget-row {
  gap: 12px !important;
  margin-bottom: 12px !important;
}
body[data-theme="momentum"] .commandCenter .cc-widget-card {
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}
body[data-theme="momentum"] .commandCenter .cc-widget-header {
  padding: 12px 14px !important;
  border-bottom: 1px solid #eef2f7 !important;
}
body[data-theme="momentum"] .commandCenter .cc-widget-title {
  font-size: 14px !important;
  font-weight: 760 !important;
  color: #0f172a !important;
}
body[data-theme="momentum"] .commandCenter .cc-widget-body {
  padding: 12px 14px !important;
  min-height: 150px !important;
}
body[data-theme="momentum"] .commandCenter .cc-widget-action {
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #3730a3 !important;
}
body[data-theme="momentum"] .commandCenter .cc-widget-action:hover {
  background: #eef2ff !important;
}

/* P31-5. Dense content readability in cards */
body[data-theme="momentum"] .commandCenter .cc-activity-text,
body[data-theme="momentum"] .commandCenter .cc-tip-text,
body[data-theme="momentum"] .commandCenter .cc-recent-contact-name {
  color: #334155 !important;
}
body[data-theme="momentum"] .commandCenter .cc-activity-time,
body[data-theme="momentum"] .commandCenter .cc-recent-contact-email,
body[data-theme="momentum"] .commandCenter .cc-empty-sub {
  color: #94a3b8 !important;
}
body[data-theme="momentum"] .commandCenter .cc-calendar-event,
body[data-theme="momentum"] .commandCenter .cc-create-item {
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
}
body[data-theme="momentum"] .commandCenter .cc-create-item:hover {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 32 — DEAL POPUP / FULLSCREEN FINAL EXCELLENCE PASS
═══════════════════════════════════════════════════════════════ */

/* P32-1. Modal shell */
body[data-theme="momentum"] .backdrop.show .deal-modal {
  width: min(1320px, 96vw) !important;
  max-height: 94vh !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  background: #f8fbff !important;
  box-shadow: 0 24px 70px rgba(2, 8, 23, 0.28) !important;
  overflow: hidden !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal.modal-fullscreen {
  width: calc(100vw - 20px) !important;
  height: calc(100vh - 20px) !important;
  max-height: none !important;
  max-width: none !important;
  margin: 10px !important;
  border-radius: 14px !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .modalHead {
  position: sticky !important;
  top: 0 !important;
  z-index: 11 !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .modalTitle {
  font-size: 24px !important;
  font-weight: 820 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-modal-summary {
  font-size: 12px !important;
  color: #64748b !important;
  margin-top: 4px !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .modalBody {
  padding: 14px 18px 18px !important;
  background: #f8fbff !important;
}

/* P32-2. Live utility rail */
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-utility-rail {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-utility-card {
  background: #ffffff !important;
  border: 1px solid #dce6f1 !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  min-height: 58px !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-utility-label {
  font-size: 10px !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-utility-value {
  margin-top: 4px !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 790 !important;
  color: #0f172a !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-utility-hint {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px dashed #cbd5e1 !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #f8fafc !important;
}

/* P32-3. Section cards + controls */
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-field-group {
  background: #ffffff !important;
  border: 1px solid #dce6f1 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin-top: 10px !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .label-row {
  margin-bottom: 10px !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .label-text {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .input,
body[data-theme="momentum"] .backdrop.show .deal-modal .select,
body[data-theme="momentum"] .backdrop.show .deal-modal .textarea {
  border-radius: 10px !important;
  border: 1px solid #d6dee8 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 520 !important;
  min-height: 38px !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .input:focus,
body[data-theme="momentum"] .backdrop.show .deal-modal .select:focus,
body[data-theme="momentum"] .backdrop.show .deal-modal .textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14) !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-pipeline-grid {
  gap: 10px !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal #dealStageProgress {
  margin: 10px 2px 14px !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .stageStepLabel {
  font-size: 10px !important;
  max-width: 74px !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .searchable-dropdown-list {
  border-radius: 10px !important;
  border: 1px solid #d8e1ec !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16) !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .searchable-dropdown-item:hover {
  background: #eef2ff !important;
}

/* P32-4. Related/content panels */
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-collapsible {
  border-radius: 10px !important;
  border: 1px solid #d8e1ec !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-collapsible-header {
  font-size: 12px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #334155 !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-collapsible-content {
  background: #ffffff !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-contact-info-bar {
  border-radius: 10px !important;
  border: 1px solid #bae6fd !important;
  background: linear-gradient(135deg, #f0f9ff 0%, #ecfeff 100%) !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-contact-info-item {
  border-radius: 999px !important;
}

/* P32-5. Sticky action footer */
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-modal-foot {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 12 !important;
  padding: 12px 16px !important;
  gap: 10px !important;
  border-top: 1px solid #dbe5f0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal .deal-modal-foot .btn {
  min-height: 34px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal #__deal_save {
  min-width: 136px !important;
  background: linear-gradient(135deg, #111827 0%, #0f172a 100%) !important;
  border: 1px solid #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.24) !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal #__deal_save:hover {
  filter: brightness(1.02) !important;
  transform: translateY(-1px) !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal #__deal_cancel {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}
body[data-theme="momentum"] .backdrop.show .deal-modal #__deal_compose {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #3730a3 !important;
}

@media (max-width: 980px) {
  body[data-theme="momentum"] .backdrop.show .deal-modal .deal-utility-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body[data-theme="momentum"] .backdrop.show .deal-modal .deal-utility-hint {
    min-height: 36px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 33 — PROJECTS + INVOICES FINAL EXCELLENCE PASS
═══════════════════════════════════════════════════════════════ */

/* P33-1. Projects list shell and controls */
body[data-theme="momentum"] #projectsWrap .pipe-board-list {
  background: #f7f9fc !important;
}
body[data-theme="momentum"] #projectsWrap .filters-modern {
  border-bottom: 1px solid #dbe5f0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  margin: 12px 0 8px !important;
  padding: 12px 16px !important;
}
body[data-theme="momentum"] #projectsWrap .filter-bar-main {
  gap: 8px !important;
  padding: 0 !important;
}
body[data-theme="momentum"] #projectsWrap .filter-search-wrap {
  max-width: 300px !important;
}
body[data-theme="momentum"] #projectsWrap .filter-search-input {
  height: 38px !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 10px !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75) !important;
}
body[data-theme="momentum"] #projectsWrap .filter-search-input::placeholder {
  color: #94a3b8 !important;
}
body[data-theme="momentum"] #projectsWrap .filter-search-input:hover {
  background: #eef2f7 !important;
  border-color: #cfd9e5 !important;
}
body[data-theme="momentum"] #projectsWrap .filter-search-input:focus {
  background: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14) !important;
}
body[data-theme="momentum"] #projectsWrap .td-kpi-strip,
body[data-theme="momentum"] .invoice-board-list .td-kpi-strip {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 6px 12px 12px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #f4f7fc 100%) !important;
  border-bottom: 1px solid #dbe5f0 !important;
}
body[data-theme="momentum"] #projectsWrap .td-kpi-card,
body[data-theme="momentum"] .invoice-board-list .td-kpi-card {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
  padding: 14px 12px !important;
  min-height: 92px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
body[data-theme="momentum"] #projectsWrap .td-kpi-value,
body[data-theme="momentum"] .invoice-board-list .td-kpi-value {
  font-size: clamp(24px, 2.4vw, 36px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  line-height: 1.05 !important;
}
body[data-theme="momentum"] #projectsWrap .td-kpi-label,
body[data-theme="momentum"] .invoice-board-list .td-kpi-label {
  margin-top: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}
body[data-theme="momentum"] #projectsWrap .td-kpi-card--money .td-kpi-value,
body[data-theme="momentum"] .invoice-board-list .td-kpi-card--money .td-kpi-value {
  color: #1d4ed8 !important;
}
body[data-theme="momentum"] #projectsWrap .td-kpi-card--warning .td-kpi-value,
body[data-theme="momentum"] .invoice-board-list .td-kpi-card--warning .td-kpi-value {
  color: #b45309 !important;
}
body[data-theme="momentum"] #projectsWrap .td-kpi-card--risk,
body[data-theme="momentum"] .invoice-board-list .td-kpi-card--risk {
  border-color: #fecaca !important;
  background: #fef2f2 !important;
}
body[data-theme="momentum"] #projectsWrap .td-kpi-card--risk .td-kpi-value,
body[data-theme="momentum"] .invoice-board-list .td-kpi-card--risk .td-kpi-value {
  color: #b91c1c !important;
}
body[data-theme="momentum"] #projectsWrap #btnNewProject,
body[data-theme="momentum"] #projectsWrap .filter-clear-btn,
body[data-theme="momentum"] #projectsWrap .actions-dropdown-btn {
  min-height: 36px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] #projectsWrap .actions-dropdown-btn,
body[data-theme="momentum"] #projectsWrap .filter-clear-btn {
  border: 1px solid #dbe5f0 !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
body[data-theme="momentum"] #projectsWrap .actions-dropdown-btn:hover,
body[data-theme="momentum"] #projectsWrap .filter-clear-btn:hover {
  background: #f8fbff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
body[data-theme="momentum"] #projectsWrap .actions-dropdown-btn:focus-visible,
body[data-theme="momentum"] #projectsWrap .filter-clear-btn:focus-visible,
body[data-theme="momentum"] #projectsWrap #btnNewProject:focus-visible {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14) !important;
  outline: none !important;
}
body[data-theme="momentum"] #projectsWrap #btnNewProject {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}
body[data-theme="momentum"] #projectsWrap #btnNewProject:hover {
  transform: translateY(-1px) !important;
}
body[data-theme="momentum"] #projectsWrap .actions-menu {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
  padding: 6px !important;
}
body[data-theme="momentum"] #projectsWrap .actions-menu-item {
  border-radius: 8px !important;
  color: #334155 !important;
}
body[data-theme="momentum"] #projectsWrap .actions-menu-item:hover {
  background: #eef2ff !important;
  color: #3730a3 !important;
}
body[data-theme="momentum"] #projectsWrap .saved-filters-dropdown {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
}
body[data-theme="momentum"] #projectsWrap .saved-filter-item {
  border-radius: 8px !important;
}
body[data-theme="momentum"] #projectsWrap .saved-filter-item:hover {
  background: #f8fbff !important;
}
body[data-theme="momentum"] #projectsWrap .saved-filter-item.selected {
  background: #eef2ff !important;
}
body[data-theme="momentum"] #projectsWrap .saved-filters-action {
  color: #334155 !important;
}
body[data-theme="momentum"] #projectsWrap .saved-filters-action:hover {
  background: #f8fbff !important;
  color: #0f172a !important;
}
body[data-theme="momentum"] #projectsWrap #projectBulkBar {
  border-bottom: 1px solid #c7d2fe !important;
  background: #eef2ff !important;
}
body[data-theme="momentum"] #projectsWrap .pipe-list-table-wrap {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  overflow: hidden !important;
}
body[data-theme="momentum"] #projectsWrap .pipe-list-table thead tr {
  background: #f8fafc !important;
}
body[data-theme="momentum"] #projectsWrap .pipe-list-table th {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}
body[data-theme="momentum"] #projectsWrap .pipe-list-row.project-row {
  transition: background-color .15s ease, box-shadow .15s ease !important;
}
body[data-theme="momentum"] #projectsWrap .pipe-list-row.project-row:hover {
  background: #f8fbff !important;
}
body[data-theme="momentum"] #projectsWrap .pipe-list-row.project-row:has(.project-row-select:checked),
body[data-theme="momentum"] #projectsWrap .pipe-list-row.selected {
  background: #eef2ff !important;
  box-shadow: inset 3px 0 0 #6366f1 !important;
}

/* P33-2. Projects detail workspace */
body[data-theme="momentum"] #projectsWrap .deal-workspace,
body[data-theme="momentum"] #projectsWrap .project-detail-workspace {
  background: #f7f9fc !important;
}
body[data-theme="momentum"] #projectsWrap .deal-header,
body[data-theme="momentum"] #projectsWrap .project-detail-header {
  border: 1px solid #dbe5f0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05) !important;
  margin-bottom: 10px !important;
}
/* Project detail header: 23px all sides; no margin-top/margin-left: 0 */
body[data-theme="momentum"] #projectsWrap > div > header.project-detail-header-new,
body[data-theme="momentum"] #projectsWrap .project-detail-header-new {
  border: 1px solid #dbe5f0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
  padding: 0 !important;
  margin: 23px !important;
  overflow: hidden !important;
}
/* +5px vertical space between each header line (name, status/stage, meta, KPI row) */
body[data-theme="momentum"] #projectsWrap .project-detail-header-new .detailHeaderIdentity {
  gap: 13px !important;
}
body[data-theme="momentum"] #projectsWrap .project-detail-header-new .mm-stat-chips {
  margin-top: 11px !important;
}
body[data-theme="momentum"] #projectsWrap .deal-title {
  letter-spacing: -0.02em !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary {
  display: grid !important;
  gap: 14px !important;
  margin: 0 0 16px 0 !important;
  padding: 18px 20px !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05) !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-hero {
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  align-items: flex-start !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  margin-bottom: 8px !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-title-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-title {
  margin: 0 !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: #0f172a !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-pill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-stage-pill {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-progress {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: #eef2ff !important;
  color: #3730a3 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  flex: 0 0 500px !important;
  min-width: 500px !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-kpi {
  border: 1px solid #e4ebf3 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  padding: 14px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-kpi-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  margin-bottom: 6px !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-kpi-value {
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-kpi--money .project-record-summary-kpi-value {
  font-size: clamp(16px, 1.5vw, 18px) !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-summary-kpi--timeline .project-record-summary-kpi-value {
  font-size: 16px !important;
  line-height: 1.2 !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-action-bars {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-action-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-action-btn,
body[data-theme="momentum"] #projectsWrap .project-record-icon-btn {
  border: 1px solid #dbe5f0 !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: transform var(--mm-tr), box-shadow var(--mm-tr), background var(--mm-tr) !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-action-btn {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-icon-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  cursor: pointer !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-action-btn--primary {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16) !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-action-btn--primary:hover {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-action-btn:hover,
body[data-theme="momentum"] #projectsWrap .project-record-icon-btn:hover {
  background: #f8fbff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
}
body[data-theme="momentum"] #projectsWrap .project-record-action-btn:focus-visible,
body[data-theme="momentum"] #projectsWrap .project-record-icon-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14) !important;
  outline: none !important;
}
body[data-theme="momentum"] #projectsWrap .deal-card {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}
body[data-theme="momentum"] #projectsWrap .project-detail-tabs-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body[data-theme="momentum"] #projectsWrap .deal-workspace-body {
  padding-top: 0 !important;
}
body[data-theme="momentum"] #projectsWrap .deal-main-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body[data-theme="momentum"] #projectsWrap .contact-detail-tabs-card.project-detail-tabs-card {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body[data-theme="momentum"] #detailPanel .project-detail-tabs-card {
  background: #ffffff !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body[data-theme="momentum"] #projectsWrap .project-detail-tabs-header,
body[data-theme="momentum"] #detailPanel .project-detail-tabs-header {
  background: #eceff5 !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.06) !important;
  padding: 4px !important;
  margin: 16px 16px 0 16px !important;
  display: flex !important;
  gap: 2px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
body[data-theme="momentum"] #projectsWrap .project-detail-tabs-header::-webkit-scrollbar,
body[data-theme="momentum"] #detailPanel .project-detail-tabs-header::-webkit-scrollbar {
  display: none !important;
}
body[data-theme="momentum"] #projectsWrap .project-detail-tabs-nav,
body[data-theme="momentum"] #detailPanel .project-detail-tabs-nav {
  display: flex !important;
  gap: 2px !important;
  min-width: 0 !important;
  width: 100% !important;
}
body[data-theme="momentum"] #projectsWrap .project-tab.contact-detail-tab-btn,
body[data-theme="momentum"] #projectsWrap .project-tab,
body[data-theme="momentum"] #detailPanel .project-tab {
  padding: 7px 14px !important;
  min-height: 40px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  border: none !important;
  border-radius: 9px !important;
  background: transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background 120ms ease, color 120ms ease !important;
}
body[data-theme="momentum"] #projectsWrap .project-tab.contact-detail-tab-btn:hover,
body[data-theme="momentum"] #projectsWrap .project-tab:hover,
body[data-theme="momentum"] #detailPanel .project-tab:hover {
  background: rgba(255,255,255,0.65) !important;
  color: #1e293b !important;
}
body[data-theme="momentum"] #projectsWrap .project-tab.contact-detail-tab-btn.is-active,
body[data-theme="momentum"] #projectsWrap .project-tab.contact-detail-tab-btn.active,
body[data-theme="momentum"] #projectsWrap .project-tab.is-active,
body[data-theme="momentum"] #projectsWrap .project-tab.active,
body[data-theme="momentum"] #detailPanel .project-tab.is-active,
body[data-theme="momentum"] #detailPanel .project-tab.active {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.12),
    0 0 0 0.5px rgba(15,23,42,0.08) !important;
}
body[data-theme="momentum"] #projectsWrap .project-tab.contact-detail-tab-btn .contact-detail-tab-count,
body[data-theme="momentum"] #projectsWrap .project-tab .contact-detail-tab-count,
body[data-theme="momentum"] #detailPanel .project-tab .contact-detail-tab-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  margin-left: 5px !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  background: rgba(0,0,0,0.08) !important;
  color: #475569 !important;
}
body[data-theme="momentum"] #projectsWrap .project-tab.contact-detail-tab-btn.is-active .contact-detail-tab-count,
body[data-theme="momentum"] #projectsWrap .project-tab.contact-detail-tab-btn.active .contact-detail-tab-count,
body[data-theme="momentum"] #projectsWrap .project-tab.is-active .contact-detail-tab-count,
body[data-theme="momentum"] #projectsWrap .project-tab.active .contact-detail-tab-count,
body[data-theme="momentum"] #detailPanel .project-tab.is-active .contact-detail-tab-count,
body[data-theme="momentum"] #detailPanel .project-tab.active .contact-detail-tab-count {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}
body[data-theme="momentum"] #projectsWrap .project-tab-content.contact-detail-tabs-body,
body[data-theme="momentum"] #projectsWrap .project-tab-content {
  padding: 0 !important;
  background: transparent !important;
}
body[data-theme="momentum"] #detailPanel .project-tab-content {
  padding: 16px !important;
  background: #ffffff !important;
}
body[data-theme="momentum"] #projectsWrap .project-main-content-docs {
  max-width: 100% !important;
}
body[data-theme="momentum"] #projectsWrap .deal-sidebar-card {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}
body[data-theme="momentum"] #projectsWrap .project-detail-sidebar.is-hidden {
  display: none !important;
}
body[data-theme="momentum"] #projectsWrap .project-header-back-centered {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 1 !important;
}
body[data-theme="momentum"] #projectsWrap .project-back-btn-centered {
  white-space: nowrap !important;
}
body[data-theme="momentum"] #projectsWrap .project-back-btn-label {
  margin-left: 6px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-card {
  background: #ffffff !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-pane {
  display: grid !important;
  gap: 20px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-hero-card {
  padding: 24px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-hero-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 20px !important;
  align-items: flex-start !important;
  margin-bottom: 20px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-hero-copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  margin-bottom: 8px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-hero-title-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-hero-title {
  margin: 0 !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-hero-pill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-meta-line {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-hero-description {
  margin: 12px 0 0 !important;
  max-width: 860px !important;
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-kickoff-inline {
  flex: 0 0 260px !important;
  padding: 16px !important;
  border-radius: 12px !important;
  border: 1px solid #c7d2fe !important;
  background: #eef2ff !important;
  display: grid !important;
  gap: 8px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-kickoff-inline--quiet {
  border-color: #dbe5f0 !important;
  background: #ffffff !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-kickoff-inline-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #3730a3 !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-kickoff-inline--quiet .project-overview-kickoff-inline-title {
  color: #0f172a !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-kickoff-inline-meta,
body[data-theme="momentum"] #projectsWrap .project-overview-kickoff-inline-foot {
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-summary-grid,
body[data-theme="momentum"] #projectsWrap .project-overview-context-grid,
body[data-theme="momentum"] #projectsWrap .project-overview-module-grid,
body[data-theme="momentum"] #projectsWrap .project-overview-bottom-grid {
  display: grid !important;
  gap: 16px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-summary-grid,
body[data-theme="momentum"] #projectsWrap .project-overview-context-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-module-grid,
body[data-theme="momentum"] #projectsWrap .project-overview-bottom-grid {
  grid-template-columns: 1fr 1fr !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-summary-card,
body[data-theme="momentum"] #projectsWrap .project-overview-context-card {
  border: 1px solid #e4ebf3 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-summary-card {
  padding: 16px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-context-card {
  padding: 16px !important;
  display: grid !important;
  gap: 6px !important;
  align-content: start !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-context-card--action {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-summary-label,
body[data-theme="momentum"] #projectsWrap .project-overview-context-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-summary-value,
body[data-theme="momentum"] #projectsWrap .project-overview-context-value {
  color: #0f172a !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-summary-value {
  font-size: 24px !important;
  line-height: 1.1 !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-context-value {
  font-size: 16px !important;
  line-height: 1.3 !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-summary-meta,
body[data-theme="momentum"] #projectsWrap .project-overview-context-meta,
body[data-theme="momentum"] #projectsWrap .project-overview-section-subtitle,
body[data-theme="momentum"] #projectsWrap .project-overview-section-hint {
  font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-inline-action {
  margin-top: 6px !important;
  justify-self: start !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-inline-action,
body[data-theme="momentum"] #projectsWrap .project-overview-step-btn {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  border: 1px solid #d4dce8 !important;
  background: #ffffff !important;
  color: #1e293b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  transition: background var(--mm-tr), border-color var(--mm-tr), box-shadow var(--mm-tr), transform var(--mm-tr) !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-inline-action:hover,
body[data-theme="momentum"] #projectsWrap .project-overview-step-btn:hover {
  background: #f8fbff !important;
  border-color: #bfcbe0 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-inline-action:active,
body[data-theme="momentum"] #projectsWrap .project-overview-step-btn:active {
  transform: translateY(1px) !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-inline-action:focus-visible,
body[data-theme="momentum"] #projectsWrap .project-overview-step-btn:focus-visible {
  outline: none !important;
  box-shadow: var(--mm-focus-ring) !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-section-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 4px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-nextsteps-card,
body[data-theme="momentum"] #projectsWrap .project-overview-snapshot-card,
body[data-theme="momentum"] #projectsWrap .project-overview-notes-card,
body[data-theme="momentum"] #projectsWrap .project-overview-activity-card {
  padding: 20px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-step-list,
body[data-theme="momentum"] #projectsWrap .project-overview-activity-list {
  display: grid !important;
  gap: 12px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-step-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 10px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-step-main {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-step-index {
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-step-title,
body[data-theme="momentum"] #projectsWrap .project-overview-activity-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-step-meta,
body[data-theme="momentum"] #projectsWrap .project-overview-activity-meta {
  font-size: 11px !important;
  color: #64748b !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-step-btn,
body[data-theme="momentum"] #projectsWrap .project-overview-step-complete {
  flex-shrink: 0 !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-step-complete {
  color: #059669 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-snapshot-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 12px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-progress-block {
  margin-top: 14px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-progress-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
  gap: 12px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-progress-label,
body[data-theme="momentum"] #projectsWrap .project-overview-progress-meta {
  font-size: 12px !important;
  color: #64748b !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-progress-track {
  height: 10px !important;
  border-radius: 999px !important;
  background: #dbe5f0 !important;
  overflow: hidden !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-progress-fill {
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-activity-item {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-activity-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: #eef2ff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-empty-state {
  padding: 20px !important;
  text-align: center !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-kickoff-card {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-edit-form .deal-modal-field label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-edit-form .deal-modal-input,
body[data-theme="momentum"] #projectsWrap .project-overview-edit-form .deal-modal-select,
body[data-theme="momentum"] #projectsWrap .project-overview-edit-form .deal-modal-textarea {
  border: 1px solid #dbe5f0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-edit-form .deal-modal-input:focus,
body[data-theme="momentum"] #projectsWrap .project-overview-edit-form .deal-modal-select:focus,
body[data-theme="momentum"] #projectsWrap .project-overview-edit-form .deal-modal-textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.16) !important;
  outline: none !important;
}
body[data-theme="momentum"] #projectsWrap .project-snap-chip {
  min-height: 34px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] #projectsWrap .project-tab-pane {
  color: #0f172a !important;
}
body[data-theme="momentum"] #projectsWrap .project-pane-empty {
  background: #ffffff !important;
  border: 1px dashed #dbe5f0 !important;
  border-radius: 12px !important;
}
body[data-theme="momentum"] #projectsWrap .project-status-dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1) !important;
}
body[data-theme="momentum"] #projectsWrap .project-status-dropdown-menu .status-option {
  border-radius: 8px !important;
  margin: 4px !important;
  transition: background-color .12s ease !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-bottom-grid {
  align-items: start !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-notes-input {
  border: 1px solid #dbe5f0 !important;
  background: #ffffff !important;
  border-radius: 10px !important;
}
body[data-theme="momentum"] #projectsWrap .project-overview-notes-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.16) !important;
}
body[data-theme="momentum"] #projectsWrap .project-events-list-wrap,
body[data-theme="momentum"] #projectsWrap .project-tasks-pane {
  max-width: 100% !important;
}
body[data-theme="momentum"] #projectsWrap .project-event-row {
  border: 1px solid #dbe5f0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: #ffffff !important;
}
body[data-theme="momentum"] #projectsWrap .project-event-row:hover {
  background: #f8fbff !important;
}
body[data-theme="momentum"] #projectsWrap .project-docs-toolbar {
  padding: 0 2px !important;
}
body[data-theme="momentum"] #projectsWrap .project-docs-selection-bar {
  background: #f8fafc !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 10px !important;
}
body[data-theme="momentum"] #projectsWrap .project-docs-primary-actions .deal-btn {
  border-radius: 9px !important;
}
body[data-theme="momentum"] #projectsWrap .project-table-wrap {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}
body[data-theme="momentum"] #projectsWrap .project-data-table {
  min-width: 100% !important;
}
body[data-theme="momentum"] #projectsWrap .project-data-table thead tr {
  background: #f8fafc !important;
}
body[data-theme="momentum"] #projectsWrap .project-data-table th {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}
body[data-theme="momentum"] #projectsWrap .project-doc-row:hover,
body[data-theme="momentum"] #projectsWrap .project-invoice-row:hover,
body[data-theme="momentum"] #projectsWrap .project-intake-row:hover {
  background: #f8fbff !important;
}
body[data-theme="momentum"] #projectsWrap .project-docs-table .doc-actions-trigger {
  border-color: #dbe5f0 !important;
  border-radius: 9px !important;
  background: #ffffff !important;
}
body[data-theme="momentum"] #projectsWrap .project-docs-table .doc-actions-menu {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12) !important;
}
body[data-theme="momentum"] #projectsWrap .project-docs-summary-grid .deal-sidebar-card {
  box-shadow: none !important;
}
body[data-theme="momentum"] #projectsWrap .project-intake-toolbar {
  padding: 0 2px !important;
}
body[data-theme="momentum"] #projectsWrap .project-invoices-empty,
body[data-theme="momentum"] #projectsWrap .project-intake-empty,
body[data-theme="momentum"] #projectsWrap .project-events-empty,
body[data-theme="momentum"] #projectsWrap .project-docs-empty {
  max-width: 980px !important;
  margin: 0 auto !important;
}

/* P33-3. Invoices/quotes list shell */
body[data-theme="momentum"] .invoice-board-list {
  background: #f7f9fc !important;
}
body[data-theme="momentum"] .invoice-board-list .invoice-quote-tabs {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px 12px 0 0 !important;
  background: #ffffff !important;
}
body[data-theme="momentum"] .invoice-board-list .invoice-quote-tab {
  min-height: 44px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #64748b !important;
}
body[data-theme="momentum"] .invoice-board-list .invoice-quote-tab.active,
body[data-theme="momentum"] .invoice-board-list .invoice-quote-tab[data-tab="invoices"].active,
body[data-theme="momentum"] .invoice-board-list .invoice-quote-tab[data-tab="quotes"].active {
  color: #3730a3 !important;
  border-bottom-color: #6366f1 !important;
}
body[data-theme="momentum"] .invoice-board-list .filters-modern {
  border-bottom: 1px solid #dbe5f0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  margin: 12px 0 4px !important;
  padding: 12px 16px !important;
}
body[data-theme="momentum"] .invoice-board-list .filter-bar-main {
  gap: 8px !important;
  padding: 0 !important;
}
body[data-theme="momentum"] .invoice-board-list .filter-search-wrap {
  max-width: 320px !important;
}
body[data-theme="momentum"] .invoice-board-list .filter-search-input {
  height: 38px !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 10px !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75) !important;
}
body[data-theme="momentum"] .invoice-board-list .filter-search-input::placeholder {
  color: #94a3b8 !important;
}
body[data-theme="momentum"] .invoice-board-list .filter-search-input:hover {
  background: #eef2f7 !important;
  border-color: #cfd9e5 !important;
}
body[data-theme="momentum"] .invoice-board-list .filter-search-input:focus {
  background: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14) !important;
}
body[data-theme="momentum"] .invoice-board-list .actions-dropdown-btn,
body[data-theme="momentum"] .invoice-board-list .filter-clear-btn {
  min-height: 36px !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
body[data-theme="momentum"] .invoice-board-list .actions-dropdown-btn:hover,
body[data-theme="momentum"] .invoice-board-list .filter-clear-btn:hover {
  background: #f8fbff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
body[data-theme="momentum"] .invoice-board-list .actions-dropdown-btn:focus-visible,
body[data-theme="momentum"] .invoice-board-list .filter-clear-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14) !important;
  outline: none !important;
}
body[data-theme="momentum"] .invoice-board-list .actions-menu {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
  padding: 6px !important;
}
body[data-theme="momentum"] .invoice-board-list .actions-menu-item {
  border-radius: 8px !important;
  color: #334155 !important;
}
body[data-theme="momentum"] .invoice-board-list .actions-menu-item:hover {
  background: #eef2ff !important;
  color: #3730a3 !important;
}
body[data-theme="momentum"] .invoice-board-list .invoice-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}
body[data-theme="momentum"] .invoice-board-list .invoice-header-actions .filter-add-btn {
  margin-left: 0 !important;
}
body[data-theme="momentum"] .invoice-board-list #btnNewInvoice,
body[data-theme="momentum"] .invoice-board-list #btnNewPayLink,
body[data-theme="momentum"] .invoice-board-list #btnNewQuote {
  min-height: 36px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}
body[data-theme="momentum"] .invoice-board-list #btnNewInvoice {
  background: #dbeafe !important;
  border: 1px solid #93c5fd !important;
  color: #1e40af !important;
}
body[data-theme="momentum"] .invoice-board-list #btnNewInvoice:hover {
  background: #bfdbfe !important;
  border-color: #60a5fa !important;
  transform: translateY(-1px) !important;
}
body[data-theme="momentum"] .invoice-board-list #btnNewPayLink:hover,
body[data-theme="momentum"] .invoice-board-list #btnNewQuote:hover {
  transform: translateY(-1px) !important;
}
body[data-theme="momentum"] .invoice-board-list #btnNewPayLink {
  background: #ffffff !important;
  border: 1px solid #dbe5f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}
body[data-theme="momentum"] .invoice-board-list #btnNewPayLink:hover {
  background: #f8fbff !important;
  border-color: #cbd5e1 !important;
}
body[data-theme="momentum"] .invoice-board-list #invoiceBulkBar,
body[data-theme="momentum"] .invoice-board-list #quoteBulkBar {
  border-bottom: 1px solid #c7d2fe !important;
  background: #eef2ff !important;
}
/* Multi-select action bars: normalize button treatment across modules */
body[data-theme="momentum"] #projectsWrap #projectBulkBar .btn,
body[data-theme="momentum"] .invoice-board-list #invoiceBulkBar .btn,
body[data-theme="momentum"] .invoice-board-list #quoteBulkBar .btn,
body[data-theme="momentum"] .project-bulk-bar .btn,
body[data-theme="momentum"] .documents-library-container .bulkBar .btn,
body[data-theme="momentum"] #bulkBarMount .bulkBar .btn,
body[data-theme="momentum"] .bulkMount .bulkBar .btn {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid #c7d2fe !important;
  background: #eef2ff !important;
  color: #3730a3 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
body[data-theme="momentum"] #projectsWrap #projectBulkBar .btn:hover,
body[data-theme="momentum"] .invoice-board-list #invoiceBulkBar .btn:hover,
body[data-theme="momentum"] .invoice-board-list #quoteBulkBar .btn:hover,
body[data-theme="momentum"] .project-bulk-bar .btn:hover,
body[data-theme="momentum"] .documents-library-container .bulkBar .btn:hover,
body[data-theme="momentum"] #bulkBarMount .bulkBar .btn:hover,
body[data-theme="momentum"] .bulkMount .bulkBar .btn:hover {
  background: #e0e7ff !important;
  border-color: #a5b4fc !important;
  color: #312e81 !important;
}
body[data-theme="momentum"] #projectsWrap #projectBulkBar .btn.primary,
body[data-theme="momentum"] .invoice-board-list #invoiceBulkBar .btn.primary,
body[data-theme="momentum"] .invoice-board-list #quoteBulkBar .btn.primary,
body[data-theme="momentum"] .project-bulk-bar .btn.primary,
body[data-theme="momentum"] .documents-library-container .bulkBar .btn.primary,
body[data-theme="momentum"] #bulkBarMount .bulkBar .btn.primary,
body[data-theme="momentum"] .bulkMount .bulkBar .btn.primary {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.24) !important;
}
body[data-theme="momentum"] #projectsWrap #projectBulkBar .btn.primary:hover,
body[data-theme="momentum"] .invoice-board-list #invoiceBulkBar .btn.primary:hover,
body[data-theme="momentum"] .invoice-board-list #quoteBulkBar .btn.primary:hover,
body[data-theme="momentum"] .project-bulk-bar .btn.primary:hover,
body[data-theme="momentum"] .documents-library-container .bulkBar .btn.primary:hover,
body[data-theme="momentum"] #bulkBarMount .bulkBar .btn.primary:hover,
body[data-theme="momentum"] .bulkMount .bulkBar .btn.primary:hover {
  background: #4338ca !important;
  border-color: #4338ca !important;
}
body[data-theme="momentum"] .invoice-list-table-wrap,
body[data-theme="momentum"] .invoice-board-list .pipe-list-table-wrap {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  overflow: hidden !important;
  padding-right: 18px !important;
  box-sizing: border-box !important;
}
body[data-theme="momentum"] .invoice-list-table thead tr,
body[data-theme="momentum"] .invoice-board-list .pipe-list-table thead tr {
  background: #f8fafc !important;
}
body[data-theme="momentum"] .invoice-list-table th,
body[data-theme="momentum"] .invoice-board-list .pipe-list-table th {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}
body[data-theme="momentum"] .pipe-list-row.invoice-row:hover,
body[data-theme="momentum"] .pipe-list-row.quote-row:hover {
  background: #f8fbff !important;
}
body[data-theme="momentum"] .pipe-list-row.invoice-row,
body[data-theme="momentum"] .pipe-list-row.quote-row {
  transition: background-color var(--mm-tr), box-shadow var(--mm-tr) !important;
}
body[data-theme="momentum"] .invoice-board-list .pipe-list-row.invoice-row:has(.invoice-row-select:checked),
body[data-theme="momentum"] .invoice-board-list .pipe-list-row.quote-row:has(.quote-row-select:checked),
body[data-theme="momentum"] .invoice-board-list .pipe-list-row.selected {
  background: #eef2ff !important;
  box-shadow: inset 3px 0 0 #6366f1 !important;
}
body[data-theme="momentum"] .invoice-board-list .invoice-list-actions-col {
  position: sticky !important;
  right: 10px !important;
  min-width: 132px !important;
  width: 132px !important;
  background: #ffffff !important;
  box-shadow: -8px 0 16px rgba(15, 23, 42, 0.04) !important;
}
body[data-theme="momentum"] .invoice-board-list .invoice-row-actions-cell {
  padding-right: 12px !important;
}
body[data-theme="momentum"] .invoice-board-list .pipe-list-row:hover .invoice-list-actions-col {
  background: #f8fbff !important;
}
body[data-theme="momentum"] .invoice-board-list .pipe-list-row.invoice-row:has(.invoice-row-select:checked) .invoice-list-actions-col,
body[data-theme="momentum"] .invoice-board-list .pipe-list-row.quote-row:has(.quote-row-select:checked) .invoice-list-actions-col,
body[data-theme="momentum"] .invoice-board-list .pipe-list-row.selected .invoice-list-actions-col {
  background: #eef2ff !important;
}
body[data-theme="momentum"] .invoice-row-actions-btn {
  border-radius: 8px !important;
  font-weight: 700 !important;
  background: #f8fafc !important;
  border: 1px solid #dbe5f0 !important;
  color: #334155 !important;
  margin-right: 0 !important;
}
body[data-theme="momentum"] .invoice-row-actions-btn:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

@media (max-width: 1100px) {
  body[data-theme="momentum"] #projectsWrap .td-kpi-strip,
  body[data-theme="momentum"] .invoice-board-list .td-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body[data-theme="momentum"] #projectsWrap .td-kpi-strip,
  body[data-theme="momentum"] .invoice-board-list .td-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  body[data-theme="momentum"] #projectsWrap .td-kpi-card,
  body[data-theme="momentum"] .invoice-board-list .td-kpi-card {
    min-height: 82px !important;
    padding: 10px 8px !important;
  }
  body[data-theme="momentum"] #projectsWrap .td-kpi-value,
  body[data-theme="momentum"] .invoice-board-list .td-kpi-value {
    font-size: clamp(20px, 7vw, 30px) !important;
  }
}

/* P33-4. Invoice and quote detail pages */
body[data-theme="momentum"] #invoicesWrap .detailTopStrip {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}
body[data-theme="momentum"] #invoicesWrap .detailTopStrip h1 {
  letter-spacing: -0.02em !important;
}
body[data-theme="momentum"] #invoicesWrap .contact-detail-tabs-card {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}
body[data-theme="momentum"] #invoicesWrap .contact-detail-tab-btn.invoice-tab,
body[data-theme="momentum"] #invoicesWrap .contact-detail-tab-btn.quote-tab {
  min-height: 42px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] #invoicesWrap .contact-detail-tab-btn.invoice-tab.is-active,
body[data-theme="momentum"] #invoicesWrap .contact-detail-tab-btn.quote-tab.is-active {
  color: #3730a3 !important;
}
body[data-theme="momentum"] #invoicesWrap .contact-detail-tabs-body {
  background: #f8fbff !important;
}
body[data-theme="momentum"] #invoicesWrap .detailSection.contact-details-card {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
/* Invoice detail (overview tab): restore card rhythm and spacing */
body[data-theme="momentum"] #invoicesWrap #detailPanel .contact-overview-layout {
  gap: 22px !important;
}
body[data-theme="momentum"] #invoicesWrap #detailPanel .contact-overview-left,
body[data-theme="momentum"] #invoicesWrap #detailPanel .contact-overview-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
body[data-theme="momentum"] #invoicesWrap #detailPanel .detailSection.contact-details-card,
body[data-theme="momentum"] #invoicesWrap #detailPanel .contact-details-card {
  background: #ffffff !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
body[data-theme="momentum"] #invoicesWrap #detailPanel .detailSection.contact-details-card > h3,
body[data-theme="momentum"] #invoicesWrap #detailPanel .contact-details-card > h3 {
  display: block !important;
  margin: 0 !important;
  padding: 14px 16px 12px !important;
  border-bottom: 1px solid #edf2f7 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}
body[data-theme="momentum"] #invoicesWrap #detailPanel .contact-field-group {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
body[data-theme="momentum"] #invoicesWrap #detailPanel .contact-field-group + .contact-field-group {
  border-top: 1px solid #edf2f7 !important;
}
body[data-theme="momentum"] #invoicesWrap #detailPanel .contact-details-card .detailRow {
  padding: 13px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
}
body[data-theme="momentum"] #invoicesWrap #detailPanel .contact-details-card .detailRow:last-child {
  border-bottom: 0 !important;
}
body[data-theme="momentum"] #invoicesWrap #detailPanel .contact-details-card .detailRow .label {
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
}
body[data-theme="momentum"] #invoicesWrap #detailPanel .contact-details-card .detailRow .value {
  font-size: 15px !important;
}
body[data-theme="momentum"] #invoicesWrap .invoice-tab-sticky-header {
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
}
body[data-theme="momentum"] #invoicesWrap .invoice-tab-sticky-header .btn {
  min-height: 34px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body[data-theme="momentum"] #invoicesWrap .invoice-print-preview-content {
  border: 1px solid #dbe5f0 !important;
  background: #f8fafc !important;
}
body[data-theme="momentum"] #invoicesWrap .searchable-dropdown-list {
  border: 1px solid #d8e1ec !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14) !important;
}
body[data-theme="momentum"] #invoicesWrap .searchable-dropdown-item:hover {
  background: #eef2ff !important;
}

/* P33-5. Invoice builders (line items + payment schedule) */
body[data-theme="momentum"] #invoicesWrap .inv-pane-root,
body[data-theme="momentum"] #invoicesWrap .payment-schedule-builder {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}
body[data-theme="momentum"] #invoicesWrap .inv-pane-toolbar,
body[data-theme="momentum"] #invoicesWrap .inv-pane-totals {
  border-top: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}
body[data-theme="momentum"] #invoicesWrap .inv-row.item,
body[data-theme="momentum"] #invoicesWrap .inv-row.section,
body[data-theme="momentum"] #invoicesWrap .payment-row {
  border: 1px solid #dce6f1 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}
body[data-theme="momentum"] #invoicesWrap .inv-row.section {
  background: #f8fafc !important;
}
body[data-theme="momentum"] #invoicesWrap .inv-input {
  border-radius: 8px !important;
  border: 1px solid #d6dee8 !important;
}
body[data-theme="momentum"] #invoicesWrap .inv-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14) !important;
}
body[data-theme="momentum"] #invoicesWrap .inv-total-row.main {
  border-top: 1px dashed #cbd5e1 !important;
  color: #0f172a !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 34 — IPHONE 14 MOBILE HARDENING (SAFE, MOBILE-ONLY)
   Scope: all recent premium passes without changing desktop UI
═══════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  /* Global page breathing room on phone */
  body[data-theme="momentum"] #pipelinePanel,
  body[data-theme="momentum"] #projectsWrap,
  body[data-theme="momentum"] #invoicesWrap,
  body[data-theme="momentum"] .commandCenter {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ===== PHASE 30: Deals top-level pages ===== */
  body[data-theme="momentum"] #pipelinePanel > div:first-child {
    padding: 8px 8px !important;
  }
  body[data-theme="momentum"] #pipelinePanel .pipe-summary {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
  }
  body[data-theme="momentum"] #pipelinePanel .pipe-summary::-webkit-scrollbar {
    display: none !important;
  }
  body[data-theme="momentum"] #pipelinePanel .pipe-board-list,
  body[data-theme="momentum"] #pipelinePanel .pipe-board-grouped,
  body[data-theme="momentum"] #pipelinePanel .pipe-board-graph {
    padding: 8px !important;
    gap: 8px !important;
  }
  body[data-theme="momentum"] #pipelinePanel .pipe-list-filters,
  body[data-theme="momentum"] #pipelinePanel .pipe-grouped-controls {
    padding: 8px !important;
    border-radius: 10px !important;
  }
  body[data-theme="momentum"] #pipelinePanel .pipe-list-search,
  body[data-theme="momentum"] #pipelinePanel .pipe-list-stage-filter,
  body[data-theme="momentum"] #pipelinePanel .pipe-grouped-select {
    min-width: 0 !important;
    width: 100% !important;
  }
  body[data-theme="momentum"] #pipelinePanel .pipe-kanban-wrap {
    grid-auto-columns: minmax(85vw, 92vw) !important;
    gap: 10px !important;
  }
  body[data-theme="momentum"] #pipelinePanel .pipe-graph-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body[data-theme="momentum"] #pipelinePanel .pipe-graph-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }
  body[data-theme="momentum"] #pipelinePanel .pipe-graph-card h3 {
    font-size: 20px !important;
  }
  body[data-theme="momentum"] #pipelinePanel .pipe-summary-value {
    font-size: 30px !important;
    line-height: 1.05 !important;
  }

  /* ===== PHASE 31: Home / Command Center ===== */
  body[data-theme="momentum"] .commandCenter {
    padding-top: 10px !important;
    padding-bottom: 84px !important;
  }
  body[data-theme="momentum"] .commandCenter .cc-title {
    font-size: 23px !important;
    line-height: 1.15 !important;
  }
  body[data-theme="momentum"] .commandCenter .cc-subtitle {
    font-size: 12px !important;
  }
  body[data-theme="momentum"] .commandCenter .cc-filter-bar {
    padding: 8px !important;
    gap: 6px !important;
    border-radius: 12px !important;
  }
  body[data-theme="momentum"] .commandCenter .cc-filter-search {
    min-width: 0 !important;
    width: 100% !important;
  }
  body[data-theme="momentum"] .commandCenter .cc-filter-search input {
    height: 34px !important;
    font-size: 12.5px !important;
  }
  body[data-theme="momentum"] .commandCenter .cc-filter-dropdown-btn,
  body[data-theme="momentum"] .commandCenter .cc-create-new-btn,
  body[data-theme="momentum"] .commandCenter .cc-btn {
    min-height: 34px !important;
    font-size: 11.5px !important;
    padding: 0 10px !important;
  }
  body[data-theme="momentum"] .commandCenter .cc-kpi-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body[data-theme="momentum"] .commandCenter .cc-kpi {
    padding: 10px 12px !important;
  }
  body[data-theme="momentum"] .commandCenter .cc-kpi-value {
    font-size: 22px !important;
  }
  body[data-theme="momentum"] .commandCenter .cc-widget-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  body[data-theme="momentum"] .commandCenter .cc-widget-card {
    border-radius: 12px !important;
  }
  body[data-theme="momentum"] .commandCenter .cc-widget-header {
    padding: 10px 12px !important;
  }
  body[data-theme="momentum"] .commandCenter .cc-widget-body {
    padding: 10px 12px !important;
    min-height: 0 !important;
  }

  /* ===== PHASE 32: Deal modal ===== */
  body[data-theme="momentum"] .backdrop.show .deal-modal,
  body[data-theme="momentum"] .backdrop.show .deal-modal.modal-fullscreen {
    width: calc(100vw - 8px) !important;
    height: calc(100vh - 8px) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 4px !important;
    border-radius: 12px !important;
  }
  body[data-theme="momentum"] .backdrop.show .deal-modal .modalHead {
    padding: 10px 12px !important;
  }
  body[data-theme="momentum"] .backdrop.show .deal-modal .modalTitle {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
  body[data-theme="momentum"] .backdrop.show .deal-modal .modalBody {
    padding: 10px 10px 12px !important;
  }
  body[data-theme="momentum"] .backdrop.show .deal-modal .deal-utility-rail {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  body[data-theme="momentum"] .backdrop.show .deal-modal .deal-utility-hint {
    grid-column: 1 / -1 !important;
    min-height: 32px !important;
    font-size: 10.5px !important;
  }
  body[data-theme="momentum"] .backdrop.show .deal-modal .deal-utility-card {
    min-height: 52px !important;
    padding: 7px 8px !important;
  }
  body[data-theme="momentum"] .backdrop.show .deal-modal .deal-utility-value {
    font-size: 15px !important;
  }
  body[data-theme="momentum"] .backdrop.show .deal-modal .deal-field-group {
    border-radius: 10px !important;
    padding: 10px !important;
    margin-top: 8px !important;
  }
  body[data-theme="momentum"] .backdrop.show .deal-modal .deal-modal-foot {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  body[data-theme="momentum"] .backdrop.show .deal-modal .deal-modal-foot .btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
  }
  body[data-theme="momentum"] .backdrop.show .deal-modal #__deal_save {
    min-width: 0 !important;
    order: -1 !important;
    flex: 1 1 100% !important;
  }

  /* ===== PHASE 33: Projects + Invoices ===== */
  body[data-theme="momentum"] #projectsWrap .filters-modern,
  body[data-theme="momentum"] .invoice-board-list .filters-modern {
    border-radius: 12px !important;
  }
  body[data-theme="momentum"] #projectsWrap .filter-bar-main,
  body[data-theme="momentum"] .invoice-board-list .filter-bar-main {
    gap: 6px !important;
    padding: 8px !important;
  }
  body[data-theme="momentum"] #projectsWrap #btnNewProject,
  body[data-theme="momentum"] #projectsWrap .filter-clear-btn,
  body[data-theme="momentum"] #projectsWrap .actions-dropdown-btn,
  body[data-theme="momentum"] .invoice-board-list #btnNewInvoice,
  body[data-theme="momentum"] .invoice-board-list #btnNewPayLink,
  body[data-theme="momentum"] .invoice-board-list #btnNewQuote {
    min-height: 34px !important;
    font-size: 11.5px !important;
    padding: 0 10px !important;
  }
  body[data-theme="momentum"] #projectsWrap .pipe-list-table-wrap,
  body[data-theme="momentum"] .invoice-list-table-wrap,
  body[data-theme="momentum"] .invoice-board-list .pipe-list-table-wrap {
    border-radius: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body[data-theme="momentum"] #projectsWrap .pipe-list-table,
  body[data-theme="momentum"] .invoice-list-table,
  body[data-theme="momentum"] .invoice-board-list .pipe-list-table {
    min-width: 720px !important;
  }
  body[data-theme="momentum"] #projectsWrap .deal-header,
  body[data-theme="momentum"] #projectsWrap .deal-card,
  body[data-theme="momentum"] #projectsWrap .deal-sidebar-card,
  body[data-theme="momentum"] #invoicesWrap .contact-detail-tabs-card,
  body[data-theme="momentum"] #invoicesWrap .detailSection.contact-details-card,
  body[data-theme="momentum"] #invoicesWrap .inv-pane-root,
  body[data-theme="momentum"] #invoicesWrap .payment-schedule-builder {
    border-radius: 10px !important;
  }
  body[data-theme="momentum"] #projectsWrap .project-tab,
  body[data-theme="momentum"] #invoicesWrap .contact-detail-tab-btn.invoice-tab,
  body[data-theme="momentum"] #invoicesWrap .contact-detail-tab-btn.quote-tab,
  body[data-theme="momentum"] .invoice-board-list .invoice-quote-tab {
    min-height: 40px !important;
    font-size: 11.5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body[data-theme="momentum"] #invoicesWrap .invoice-tab-sticky-header .btn {
    min-height: 32px !important;
    font-size: 11px !important;
    padding: 0 8px !important;
  }
  body[data-theme="momentum"] #invoicesWrap .inv-row.item,
  body[data-theme="momentum"] #invoicesWrap .inv-row.section,
  body[data-theme="momentum"] #invoicesWrap .payment-row {
    border-radius: 8px !important;
  }
}

/* iPhone 14 width refinement */
@media (max-width: 430px) {
  body[data-theme="momentum"] .commandCenter .cc-kpi-label {
    font-size: 9.5px !important;
  }
  body[data-theme="momentum"] .commandCenter .cc-kpi-value {
    font-size: 20px !important;
  }
  body[data-theme="momentum"] #pipelinePanel .pipe-view-btn {
    width: 32px !important;
    height: 32px !important;
  }
  body[data-theme="momentum"] .backdrop.show .deal-modal .stageStepLabel {
    max-width: 56px !important;
    font-size: 9px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 35 — DEAL DOCTOR MOMENTUM PASS (DESKTOP + PHONE)
   Fully scoped to Deal Doctor surface
═══════════════════════════════════════════════════════════════ */
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-container {
  background: #f7f9fc !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-hero {
  padding: 20px 18px 16px !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 52%, #8b5cf6 100%) !important;
  box-shadow: 0 8px 22px rgba(79, 70, 229, 0.28) !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-hero .hero-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-hero .hero-subtitle {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content {
  padding: 12px 14px 20px !important;
}

body[data-theme="momentum"] #dealDoctorWrap .doctor-stats-grid {
  gap: 10px !important;
  margin-bottom: 12px !important;
}
body[data-theme="momentum"] #dealDoctorWrap .stat-card,
body[data-theme="momentum"] #dealDoctorWrap .doctor-stats-grid .stat-card-small {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}
body[data-theme="momentum"] #dealDoctorWrap .stat-card {
  padding: 12px 13px !important;
}
body[data-theme="momentum"] #dealDoctorWrap .stat-card .stat-value {
  font-size: 29px !important;
  line-height: 1.03 !important;
  letter-spacing: -0.02em !important;
}
body[data-theme="momentum"] #dealDoctorWrap .stat-card .stat-label,
body[data-theme="momentum"] #dealDoctorWrap .stat-label-small {
  color: #64748b !important;
  letter-spacing: 0.06em !important;
}
body[data-theme="momentum"] #dealDoctorWrap .stat-card .stat-sublabel {
  color: #94a3b8 !important;
}

body[data-theme="momentum"] #dealDoctorWrap .todays-priorities {
  border: 1px solid #dbe5f0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
}
body[data-theme="momentum"] #dealDoctorWrap .priorities-header {
  margin-bottom: 10px !important;
}
body[data-theme="momentum"] #dealDoctorWrap .priorities-title {
  font-size: 15px !important;
  font-weight: 760 !important;
}
body[data-theme="momentum"] #dealDoctorWrap .priorities-subtitle {
  font-size: 11px !important;
  color: #94a3b8 !important;
}
body[data-theme="momentum"] #dealDoctorWrap .priorities-grid {
  gap: 10px !important;
}
body[data-theme="momentum"] #dealDoctorWrap .priority-card {
  border-radius: 12px !important;
  border: 1px solid #dbe5f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
body[data-theme="momentum"] #dealDoctorWrap .priority-card:hover {
  background: #f8fbff !important;
  border-color: #c7d2fe !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;
}
body[data-theme="momentum"] #dealDoctorWrap .priority-action-btn {
  min-height: 30px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

body[data-theme="momentum"] #dealDoctorWrap .doctor-filters {
  gap: 6px !important;
  margin-bottom: 10px !important;
}
body[data-theme="momentum"] #dealDoctorWrap .doctor-filter {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  border-color: #dbe5f0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}
body[data-theme="momentum"] #dealDoctorWrap .doctor-filter.active {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  border-color: #4338ca !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.24) !important;
}

body[data-theme="momentum"] #dealDoctorWrap .doctor-deals {
  gap: 10px !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .deal-card {
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .deal-card:hover {
  border-color: #c7d2fe !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1) !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .deal-card-header {
  padding: 12px !important;
  gap: 12px !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .deal-card-title h3 {
  font-size: 16px !important;
  font-weight: 760 !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .deal-card-meta {
  color: #64748b !important;
  gap: 6px 10px !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .deal-card-value {
  background: #f8fafc !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .value-amount {
  color: #166534 !important;
  font-size: 15px !important;
  font-weight: 780 !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .value-probability {
  font-size: 11.5px !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .deal-card-quick-actions {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
  padding: 7px 10px !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .quick-action-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .quick-action-icon:hover {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .deal-card-actions {
  background: #f8fafc !important;
  border-top-color: #e2e8f0 !important;
  padding: 10px 12px !important;
  gap: 6px !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .deal-action-btn {
  min-height: 32px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 0 11px !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .deal-contact-quick {
  background: #ffffff !important;
  border-top-color: #e2e8f0 !important;
  padding: 9px 12px !important;
}
body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .contact-quick-btn {
  min-height: 30px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  border-color: #dbe5f0 !important;
  background: #f8fafc !important;
}

@media (max-width: 980px) {
  body[data-theme="momentum"] #dealDoctorWrap .doctor-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .priorities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 639px) {
  body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-hero {
    padding: 14px 12px 12px !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-hero .hero-title {
    font-size: 22px !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-hero .hero-subtitle {
    font-size: 12px !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content {
    padding: 10px 8px 84px !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .doctor-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .stat-card .stat-value {
    font-size: 24px !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .doctor-stats-grid .stat-card-small {
    padding: 8px 10px !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .priorities-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .doctor-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .doctor-filters::-webkit-scrollbar {
    display: none !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .doctor-filter {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    font-size: 11.5px !important;
    padding: 0 10px !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .deal-card-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .deal-card-score {
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .health-score {
    width: 46px !important;
    height: 46px !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .health-score .score-value {
    font-size: 15px !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .deal-card-actions {
    gap: 6px !important;
  }
  body[data-theme="momentum"] #dealDoctorWrap .deal-doctor-content .deal-action-btn {
    flex: 1 1 calc(50% - 6px) !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DEAL DOCTOR CONTACT POPUP MODAL — Momentum styling
   Modal opened from contact header (Better Way Inc, etc.)
═══════════════════════════════════════════════════════════════ */

/* Base layout (required after removing inline styles) */
.deal-doctor-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.35) !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow: auto !important;
}
.deal-doctor-modal-panel {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18) !important;
  max-width: 520px !important;
  width: 100% !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Momentum polish — modal chrome */
body[data-theme="momentum"] .mm-deal-doctor-modal {
  background: rgba(15, 23, 42, 0.4) !important;
  padding: var(--mm-sp-6, 24px) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel {
  background: var(--mm-surface, #fff) !important;
  border-radius: var(--mm-radius, 12px) !important;
  border: 1px solid var(--mm-border, #e2e8f0) !important;
  box-shadow: var(--mm-shadow-md, 0 2px 8px rgba(15, 23, 42, 0.08)), 0 12px 40px rgba(15, 23, 42, 0.12) !important;
  overflow: auto !important;
}

/* Header */
body[data-theme="momentum"] .mm-deal-doctor-panel .deal-doctor-modal-header {
  padding: var(--mm-sp-5, 20px) var(--mm-sp-6, 24px) !important;
  border-bottom: 1px solid var(--mm-border, #e2e8f0) !important;
  flex-shrink: 0 !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .deal-doctor-modal-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-modal-header-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-modal-title {
  margin: 0 !important;
  flex: 1 !important;
  min-width: 0 !important;
  font-size: var(--mm-text-lg, 16px) !important;
  font-weight: 700 !important;
  color: var(--mm-text-primary, #0f172a) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-modal-subtitle {
  margin: 0 !important;
  font-size: var(--mm-text-sm, 12px) !important;
  color: var(--mm-text-muted, #64748b) !important;
  font-weight: 400 !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-modal-close {
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  border-radius: var(--mm-radius-sm, 8px) !important;
  cursor: pointer !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: var(--mm-text-muted, #64748b) !important;
  transition: background var(--mm-tr, 150ms ease), color var(--mm-tr, 150ms ease) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-modal-close:hover {
  background: var(--mm-bg, #f7f9fc) !important;
  color: var(--mm-text-primary, #0f172a) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-modal-body-empty {
  padding: var(--mm-sp-6, 24px) !important;
  text-align: center !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-modal-empty-text {
  margin: 0 !important;
  font-size: var(--mm-text-base, 13px) !important;
  color: var(--mm-text-muted, #64748b) !important;
  line-height: 1.5 !important;
}

/* Cards container */
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-modal-cards {
  padding: var(--mm-sp-6, 24px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  overflow: auto !important;
}

/* ── Deal card (inside modal) ───────────────────────────────── */
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-deal-card {
  background: var(--mm-surface, #fff) !important;
  border: 1px solid var(--mm-border, #e2e8f0) !important;
  border-radius: var(--mm-radius, 12px) !important;
  box-shadow: var(--mm-shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04)) !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color var(--mm-tr, 150ms ease), box-shadow var(--mm-tr, 150ms ease) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-deal-card:hover {
  border-color: var(--mm-accent-border, #c7d2fe) !important;
  box-shadow: var(--mm-shadow-sm, 0 1px 4px rgba(15, 23, 42, 0.06)) !important;
}

/* Quick action icons row */
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-quick-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: var(--mm-sp-2, 8px) var(--mm-sp-4, 16px) !important;
  background: var(--gray-50, #f8fafc) !important;
  border-bottom: 1px solid var(--mm-border, #e2e8f0) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-quick-actions .quick-action-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: var(--mm-surface, #fff) !important;
  border: 1px solid var(--mm-border, #e2e8f0) !important;
  border-radius: var(--mm-radius-sm, 8px) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background var(--mm-tr, 150ms ease), border-color var(--mm-tr, 150ms ease) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-quick-actions .quick-action-icon:hover {
  background: var(--mm-accent-soft, #eef2ff) !important;
  border-color: var(--mm-accent-border, #c7d2fe) !important;
}

/* Card header: title + trend + health pill */
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-header {
  padding: var(--mm-sp-4, 16px) var(--mm-sp-4, 16px) var(--mm-sp-3, 12px) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--mm-sp-4, 16px) !important;
  cursor: pointer !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-title-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 12px !important;
  margin-bottom: 6px !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-title h3 {
  margin: 0 !important;
  font-size: var(--mm-text-lg, 16px) !important;
  font-weight: 700 !important;
  color: var(--mm-text-primary, #0f172a) !important;
  line-height: 1.3 !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .trend-badge {
  font-size: var(--mm-text-sm, 12px) !important;
  font-weight: 600 !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-score {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .health-score {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--mm-radius-sm, 8px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .health-score .score-value {
  font-size: 18px !important;
  line-height: 1.1 !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .health-score .score-label {
  font-size: 10px !important;
  opacity: 0.95 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .status-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  color: #fff !important;
}

/* Meta line (contact, stage, timing) */
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 14px !important;
  font-size: var(--mm-text-sm, 12px) !important;
  color: var(--mm-text-muted, #64748b) !important;
  line-height: 1.45 !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-meta .deal-contact {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-meta .contact-email {
  margin-left: 4px !important;
  color: var(--mm-accent, #6366f1) !important;
  text-decoration: none !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-meta .contact-email:hover {
  text-decoration: underline !important;
}

/* Value row */
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-value {
  padding: var(--mm-sp-2, 8px) var(--mm-sp-4, 16px) !important;
  background: var(--gray-50, #f8fafc) !important;
  border-top: 1px solid var(--mm-border-subtle, #f0f4f8) !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  font-size: var(--mm-text-base, 13px) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-value .value-amount {
  font-weight: 700 !important;
  color: var(--mm-text-primary, #0f172a) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-value .value-probability {
  color: var(--mm-text-muted, #64748b) !important;
}

/* Action Plan (recommendations) */
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-recommendations {
  padding: var(--mm-sp-4, 16px) !important;
  border-top: 1px solid var(--mm-border-subtle, #f0f4f8) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-recommendations-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: var(--mm-sp-3, 12px) !important;
  font-size: var(--mm-text-md, 14px) !important;
  font-weight: 600 !important;
  color: var(--mm-text-primary, #0f172a) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-recommendation {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--mm-border-subtle, #f0f4f8) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-recommendation:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-recommendation .rec-icon {
  flex-shrink: 0 !important;
  font-size: 14px !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-recommendation .rec-content {
  flex: 1 !important;
  min-width: 0 !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-recommendation .rec-title {
  font-size: var(--mm-text-sm, 12px) !important;
  font-weight: 600 !important;
  color: var(--mm-text-primary, #0f172a) !important;
  margin-bottom: 2px !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-recommendation .rec-action {
  font-size: var(--mm-text-sm, 12px) !important;
  color: var(--mm-text-muted, #64748b) !important;
  line-height: 1.4 !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .recommendations-more {
  font-size: var(--mm-text-xs, 11px) !important;
  color: var(--mm-text-muted, #64748b) !important;
  margin-top: 6px !important;
  padding-top: 8px !important;
  border-top: 1px dashed var(--mm-border-subtle, #f0f4f8) !important;
}

/* Risk factors */
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-risks {
  padding: var(--mm-sp-4, 16px) !important;
  border-top: 1px solid var(--mm-border-subtle, #f0f4f8) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-risks-header {
  font-size: var(--mm-text-md, 14px) !important;
  font-weight: 600 !important;
  color: var(--mm-text-primary, #0f172a) !important;
  margin-bottom: var(--mm-sp-2, 8px) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-risks-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-risks-list .risk-tag {
  display: inline-block !important;
  padding: 4px 10px !important;
  font-size: var(--mm-text-xs, 11px) !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  background: rgba(245, 158, 11, 0.12) !important;
  color: #b45309 !important;
}

/* Action buttons */
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: var(--mm-sp-4, 16px) !important;
  background: var(--gray-50, #f8fafc) !important;
  border-top: 1px solid var(--mm-border, #e2e8f0) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-actions .deal-action-btn {
  min-height: 36px !important;
  padding: 0 14px !important;
  font-size: var(--mm-text-sm, 12px) !important;
  font-weight: 600 !important;
  border-radius: var(--mm-radius-sm, 8px) !important;
  border: 1px solid var(--mm-border, #e2e8f0) !important;
  background: var(--mm-surface, #fff) !important;
  color: var(--mm-text-primary, #0f172a) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: background var(--mm-tr, 150ms ease), border-color var(--mm-tr, 150ms ease), color var(--mm-tr, 150ms ease) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-actions .deal-action-btn:hover {
  background: var(--mm-bg, #f7f9fc) !important;
  border-color: var(--mm-text-faint, #94a3b8) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-actions .deal-action-btn.primary {
  background: var(--mm-accent, #6366f1) !important;
  border-color: var(--mm-accent, #6366f1) !important;
  color: #fff !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-actions .deal-action-btn.primary:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-actions .deal-action-btn.success {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #fff !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-actions .deal-action-btn.success:hover {
  background: #047857 !important;
  border-color: #047857 !important;
  color: #fff !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-actions .deal-action-btn.warning,
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-actions .deal-action-btn.urgent {
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #fff !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-actions .deal-action-btn.warning:hover,
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-card-actions .deal-action-btn.urgent:hover {
  background: #b45309 !important;
  border-color: #b45309 !important;
  color: #fff !important;
}

/* Contact quick (phone / email links) */
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-contact-quick {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: var(--mm-sp-3, 12px) var(--mm-sp-4, 16px) !important;
  border-top: 1px solid var(--mm-border-subtle, #f0f4f8) !important;
  background: var(--mm-surface, #fff) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-contact-quick-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  font-size: var(--mm-text-sm, 12px) !important;
  color: var(--mm-accent, #6366f1) !important;
  text-decoration: none !important;
  border-radius: var(--mm-radius-sm, 8px) !important;
  border: 1px solid var(--mm-accent-border, #c7d2fe) !important;
  background: var(--mm-accent-soft, #eef2ff) !important;
  transition: background var(--mm-tr, 150ms ease), border-color var(--mm-tr, 150ms ease) !important;
}
body[data-theme="momentum"] .mm-deal-doctor-panel .mm-contact-quick-btn:hover {
  background: #e0e7ff !important;
  border-color: #a5b4fc !important;
  color: #4f46e5 !important;
}

/* ============================================================
   PHASE 36 - CONTACT OVERVIEW SIGNATURE POLISH
   High-confidence final pass for hierarchy, contrast, rhythm.
============================================================ */

body[data-theme="momentum"] #detailPanel .contact-overview-layout {
  gap: 16px !important;
}

/* Right column shell — light border, flat */
body[data-theme="momentum"] #detailPanel .contact-overview-right > .detailSection {
  border: 1px solid rgba(15,23,42,0.06) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-header {
  padding: 14px 16px !important;
  background: #fafbfc !important;
  border-bottom: 1px solid rgba(15,23,42,0.04) !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-title {
  color: #24364b !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-count {
  background: #e6eefb !important;
  color: #2f4c73 !important;
}

/* Composer polish */
body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer {
  margin: 0 12px !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer > div:first-child {
  padding: 12px 0 10px !important;
  gap: 8px !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer [data-ov-type],
body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer [data-ov-voice] {
  min-height: 42px !important;
  border-radius: 10px !important;
  border: 1px solid #d7e2ee !important;
  color: #324860 !important;
  background: #ffffff !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer [data-ov-type]:hover,
body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer [data-ov-voice]:hover {
  background: #f4f8fd !important;
  border-color: #c2d3e8 !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer textarea {
  margin: 0 !important;
  width: 100% !important;
  min-height: 78px !important;
  padding: 11px 12px !important;
  border: 1px solid #d4dfec !important;
  border-radius: 10px !important;
  background: #fbfdff !important;
  color: #0f172a !important;
  line-height: 1.55 !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer textarea::placeholder {
  color: #8ca0b7 !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer textarea:focus {
  border-color: #6366f1 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14) !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer-actions {
  padding: 10px 0 14px !important;
  gap: 10px !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer-actions .overview-note-hint {
  color: #6b8097 !important;
  font-size: 11px !important;
}

/* Stronger CTA hierarchy for Save */
body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer .btn.primary,
body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer-actions .btn.primary {
  min-width: 108px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  border-color: #4f46e5 !important;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.25) !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer .btn.primary:hover,
body[data-theme="momentum"] #detailPanel .contact-overview-right .overview-note-composer-actions .btn.primary:hover {
  border-color: #4338ca !important;
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
}

/* Timeline readability */
body[data-theme="momentum"] #detailPanel .contact-overview-right .contact-activity-feed {
  padding: 6px 8px 12px 4px !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .contact-activity-feed::before {
  left: 24px !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #cfdae8 6%,
    #cfdae8 94%,
    transparent 100%
  ) !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .activityItem.contact-activity-item {
  margin: 2px 0 !important;
  padding: 12px 12px 12px 40px !important;
  border-radius: 10px !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .activityItem.contact-activity-item:hover {
  background: #f3f8fe !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .activityItem.contact-activity-item .mm-timeline-title,
body[data-theme="momentum"] #detailPanel .contact-overview-right .activityItem.contact-activity-item > div:not(.mm-activity-bubble) {
  color: #102238 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.42 !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .activityItem.contact-activity-item .mm-timeline-meta,
body[data-theme="momentum"] #detailPanel .contact-overview-right .activityItem.contact-activity-item time {
  color: #667b93 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  margin-top: 4px !important;
}

/* Keep system rows visible enough to scan quickly */
body[data-theme="momentum"] #detailPanel .contact-overview-right .activityItem.contact-activity-item[data-mm-system="true"] {
  opacity: 0.56 !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .activityItem.contact-activity-item[data-mm-system="true"]:hover {
  opacity: 0.76 !important;
}

/* ============================================================
   PHASE 37 - CROSS-TAB CONSISTENCY SYSTEM
   Pass 1: shared foundation across all tab panels.
   Pass 2: tab-specific refinement for Deals/Tasks/Relationships/
           Activity/Documents so the system feels cohesive.
============================================================ */

/* ----------------------------- */
/* PASS 1: Shared tab foundation */
/* ----------------------------- */
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .detailSection {
  border: 1px solid rgba(15,23,42,0.06) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  padding: 14px !important;
}

body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body .contact-tab-section-header {
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: flex-start !important;
}
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body .contact-tab-section-header .btn {
  margin-top: -7px !important;
}
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .detailSection .related-section-header {
  padding: 10px 0 12px !important;
  margin-bottom: 2px !important;
}

body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .detailSection .related-section-title {
  color: #324860 !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.06em !important;
}

body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .detailSection .related-section-count {
  border: 1px solid #d8e3ef !important;
  background: #eef4fb !important;
  color: #3b536e !important;
}

/* Shared button language inside tab panels */
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .detailSection .btn,
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .detailSection button:not(.contact-detail-tab-btn) {
  border-radius: 9px !important;
  min-height: 32px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .detailSection .btn.primary,
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .detailSection .btn.btn-primary {
  border-color: #4338ca !important;
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.24) !important;
}

body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .detailSection .btn.primary:hover,
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-body > .detailSection .btn.btn-primary:hover {
  border-color: #3730a3 !important;
  background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%) !important;
}

/* Create Invoice / Create Project — match Add Relationship (soft blue) */
body[data-theme="momentum"] #detailPanel #contactScopedCreateInvoice,
body[data-theme="momentum"] #detailPanel #contactScopedCreateProject {
  background: #dbeafe !important;
  border: 1px solid #93c5fd !important;
  color: #1e40af !important;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.15) !important;
}
body[data-theme="momentum"] #detailPanel #contactScopedCreateInvoice:hover,
body[data-theme="momentum"] #detailPanel #contactScopedCreateProject:hover {
  background: #bfdbfe !important;
  border-color: #60a5fa !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25) !important;
}

/* --------------------------------------------- */
/* PASS 2: Deals tab refinement and consistency  */
/* --------------------------------------------- */
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deals-summary-card {
  border: 1px solid #d6e1ec !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 2px 9px rgba(15, 23, 42, 0.05) !important;
}

body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-card {
  border: 1px solid #d6e1ec !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-card:hover {
  border-color: #bdd1e8 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1) !important;
  transform: translateY(-1px) !important;
}

body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-title {
  color: #0f1f34 !important;
}

body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .mm-deal-inline-value {
  color: #166534 !important;
}

/* --------------------------------------------- */
/* PASS 2: Tasks tab refinement and consistency  */
/* --------------------------------------------- */
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .contact-deals-summary-card {
  border: 1px solid #d6e1ec !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .mm-task-row,
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .task-row {
  border: 1px solid #dbe5f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.04) !important;
}

body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .mm-task-row:hover,
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .task-row:hover {
  border-color: #c5d5e8 !important;
  background: #f8fbff !important;
}

body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .mm-task-title {
  color: #0f1f34 !important;
}

body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .mm-task-date {
  color: #4b6078 !important;
}

/* ----------------------------------------------------- */
/* PASS 2: Relationships tab refinement and consistency  */
/* ----------------------------------------------------- */
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-card {
  border: 1px solid #d6e1ec !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: 0 2px 9px rgba(15, 23, 42, 0.05) !important;
}

body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-card:hover {
  border-color: #bfceed !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.11) !important;
}

body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-info > div:first-child {
  color: #0f1f34 !important;
}

body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-view-btn {
  border-color: #4338ca !important;
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
}

/* PASS 2: Activity tab — title/meta colors only (layout in P24-5) */
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .activityItem.contact-activity-item .mm-timeline-title,
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .activityItem.contact-activity-item > div:not(.mm-activity-bubble) {
  color: #1e293b !important;
}
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .activityItem.contact-activity-item .mm-timeline-meta,
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .activityItem.contact-activity-item time {
  color: #64748b !important;
}

/* ------------------------------------------------- */
/* PASS 2: Documents tab refinement and consistency  */
/* ------------------------------------------------- */
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .documents-header {
  border: 1px solid #d6e1ec !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 2px 9px rgba(15, 23, 42, 0.05) !important;
}

body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] #docSelectionActions {
  border: 1px solid #d8e3ef !important;
  border-radius: 10px !important;
}

body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .pipe-list-table thead tr {
  background: #f7faff !important;
}

body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .pipe-list-table th {
  color: #50657d !important;
  border-bottom: 1px solid #dce6f1 !important;
}

body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .pipe-list-table tbody tr {
  border-bottom: 1px solid #ecf2f8 !important;
}

body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .pipe-list-table tbody tr:hover {
  background: #f6faff !important;
}

/* ============================================================
   PHASE 38 - CROSS-TAB INTENSITY CALIBRATION
   Final equalization of hover/border/shadow strength.
============================================================ */

body[data-theme="momentum"] {
  --mm-tab-base-border: #d8e3ef;
  --mm-tab-hover-border: #c4d5e9;
  --mm-tab-row-hover-bg: #f6faff;
  --mm-tab-base-shadow: 0 2px 9px rgba(15, 23, 42, 0.05);
  --mm-tab-hover-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

/* Unified shell intensity */
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-card,
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .mm-task-row,
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .task-row,
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-card,
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .activityItem.contact-activity-item,
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .documents-header,
body[data-theme="momentum"] #detailPanel .contact-overview-right > .detailSection {
  border-color: var(--mm-tab-base-border) !important;
  box-shadow: var(--mm-tab-base-shadow) !important;
}

/* Unified interactive hover intensity */
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-card:hover,
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .mm-task-row:hover,
body[data-theme="momentum"] #detailPanel .contact-tasks-section[data-mm-task-tab="true"] .task-row:hover,
body[data-theme="momentum"] #detailPanel .relationshipsSection[data-mm-rel-tab="true"] .mm-rel-card:hover,
body[data-theme="momentum"] #detailPanel .activityLog[data-mm-activity-tab="true"] .activityItem.contact-activity-item:hover {
  border-color: var(--mm-tab-hover-border) !important;
  background: var(--mm-tab-row-hover-bg) !important;
  box-shadow: var(--mm-tab-hover-shadow) !important;
}

/* Keep tab table rows consistent with card hover, without heavy lift */
body[data-theme="momentum"] #detailPanel .attachmentsSection[data-mm-docs-tab="true"] .pipe-list-table tbody tr:hover {
  background: var(--mm-tab-row-hover-bg) !important;
}

/* ============================================================
   PHASE 39 - MICRO PASS (FINAL 5%)
   1) Left column density
   2) Tab row contrast + active scan speed
   3) Activity meta readability
============================================================ */

/* 1) Left column: slightly tighter vertical rhythm */
body[data-theme="momentum"] #detailPanel .contact-overview-left .detailRow {
  min-height: 36px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-left .contact-field-group {
  border-radius: 12px !important;
}

/* 2) Tabs: stronger contrast and clearer active state */
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-header {
  background: #e6ebf3 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.1) !important;
}

body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn {
  color: #3f536b !important;
  font-weight: 600 !important;
}

body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn:hover {
  background: rgba(255, 255, 255, 0.72) !important;
  color: #1c3048 !important;
}

body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.is-active,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.active {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.14),
    0 0 0 0.5px rgba(15, 23, 42, 0.1) !important;
}

/* 3) Activity meta: bump legibility without competing with title */
body[data-theme="momentum"] #detailPanel .activityItem.contact-activity-item .mm-timeline-meta,
body[data-theme="momentum"] #detailPanel .activityItem.contact-activity-item time {
  color: #5f748d !important;
  -webkit-text-fill-color: #5f748d !important;
  font-weight: 500 !important;
}

/* ============================================================
   PHASE 40 - HEADER ACTION ROW CLIP FIX
   Give #detailHeaderActions extra vertical buffer so hover/focus
   lift effects do not clip at the top edge.
============================================================ */
body[data-theme="momentum"] #detailPanel #detailHeaderActions {
  min-height: 40px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  box-sizing: border-box !important;
}

/* Keep horizontal scroll behavior on compact layouts, but retain
   the same vertical breathing room for button highlight states. */
@media (max-width: 1024px) {
  body[data-theme="momentum"] #detailPanel #detailHeaderActions {
    min-height: 40px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }
}

/* ============================================================
   PHASE 41 - DEALS TAB PHONE VISIBILITY FIX
   Do not truncate contact/company pills in deal cards so full
   phone numbers remain readable.
============================================================ */
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-person-pill,
body[data-theme="momentum"] #detailPanel .contact-deals-section[data-mm-deals-tab="true"] .contact-deal-company-pill {
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 50 — 10/10 CONTACT DETAIL PAGE POLISH
   Premium-tier refinements for a world-class CRM experience.
   Inspired by Attio, Linear, Notion, and Stripe Dashboard.
═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   § 50-A. HEADER HERO SECTION — Commanding Presence
   Make the company name the undisputed focal point.
───────────────────────────────────────────────────────────────────────── */

body[data-theme="momentum"] #detailPanel .detailHeader {
  padding: 28px 28px 24px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.8),
    0 4px 20px rgba(15, 23, 42, 0.04) !important;
  position: relative !important;
}

body[data-theme="momentum"] #detailPanel .contactName {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px !important;
  color: #0c1527 !important;
  line-height: 1.1 !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 2px !important;
}

body[data-theme="momentum"] #detailPanel .detailHeaderIdentity {
  gap: 6px !important;
}

/* Contact header top-right: Predict / Coaching (Deal Doctor) buttons */
body[data-theme="momentum"] #detailTopRightButtons .mm-header-ai-btn:hover {
  background: var(--mm-surface-hover, #f1f5f9) !important;
  border-color: var(--mm-border, rgba(15, 23, 42, 0.12)) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 50-B. HEALTH/STATUS BADGE — Premium Pill Design
   Refined, glowing badges that convey status at a glance.
───────────────────────────────────────────────────────────────────────── */

body[data-theme="momentum"] .mm-health-signal {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 20px !important;
  text-transform: capitalize !important;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

body[data-theme="momentum"] .mm-health-signal:hover {
  filter: brightness(0.96) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

body[data-theme="momentum"] .mm-health-signal::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 60%) !important;
  transition: opacity 200ms !important;
}

body[data-theme="momentum"] .mm-health-signal:hover::before {
  opacity: 1 !important;
}

body[data-theme="momentum"] .mm-health-signal[data-mm-health="healthy"] {
  background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%) !important;
  color: #14532d !important;
  border: 1px solid rgba(22, 163, 74, 0.25) !important;
  box-shadow: 
    0 1px 3px rgba(22, 163, 74, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

body[data-theme="momentum"] .mm-health-signal[data-mm-health="at_risk"] {
  background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%) !important;
  color: #78350f !important;
  border: 1px solid rgba(234, 88, 12, 0.25) !important;
  box-shadow: 
    0 1px 3px rgba(234, 88, 12, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

body[data-theme="momentum"] .mm-health-signal[data-mm-health="critical"] {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
  color: #7f1d1d !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
  box-shadow: 
    0 1px 3px rgba(220, 38, 38, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 50-C. STAT CHIPS — Elevated Dashboard Metrics
   Premium stacked cards with depth and polish.
───────────────────────────────────────────────────────────────────────── */

.mm-stat-chips {
  gap: 10px !important;
  margin-top: 16px !important;
}

/* KPI row (Open Deals, Open Task, Last Active): 3 equal columns, same width, no expand */
body[data-theme="momentum"] .mm-stat-chips--kpi .mm-chip {
  padding: 10px 12px !important;
}
body[data-theme="momentum"] .mm-stat-chips--kpi .mm-chip-value {
  font-size: 18px !important;
}

.mm-chip {
  padding: 12px 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: 
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition: 
    transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms !important;
  position: relative !important;
  overflow: hidden !important;
}

.mm-chip::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.1) 50%, transparent 100%) !important;
  opacity: 0 !important;
  transition: opacity 250ms !important;
}

.mm-chip:hover {
  transform: translateY(-2px) !important;
  box-shadow: 
    0 4px 12px rgba(15, 23, 42, 0.08),
    0 8px 24px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(99, 102, 241, 0.15) !important;
}

.mm-chip:hover::before {
  opacity: 1 !important;
}

.mm-chip-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 6px !important;
}

.mm-chip-value {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}

/* Semantic chip variants with premium gradients */
.mm-chip-deals {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%) !important;
  border-color: rgba(37, 99, 235, 0.12) !important;
}
.mm-chip-deals::before { background: linear-gradient(90deg, transparent, rgba(37,99,235,0.3), transparent) !important; }
.mm-chip-deals .mm-chip-label { color: #3b82f6 !important; }
.mm-chip-deals .mm-chip-value { color: #1e40af !important; }
.mm-chip-deals:hover { 
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12), 0 8px 24px rgba(37, 99, 235, 0.08) !important; 
}

.mm-chip-pipeline {
  background: linear-gradient(135deg, #f0fdf4 0%, #e8fcf1 100%) !important;
  border-color: rgba(22, 163, 74, 0.12) !important;
}
.mm-chip-pipeline::before { background: linear-gradient(90deg, transparent, rgba(22,163,74,0.3), transparent) !important; }
.mm-chip-pipeline .mm-chip-label { color: #16a34a !important; }
.mm-chip-pipeline .mm-chip-value { color: #15803d !important; }
.mm-chip-pipeline:hover { 
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.12), 0 8px 24px rgba(22, 163, 74, 0.08) !important; 
}

.mm-chip-task {
  background: linear-gradient(135deg, #fffbf0 0%, #fef7e8 100%) !important;
  border-color: rgba(234, 88, 12, 0.12) !important;
}
.mm-chip-task::before { background: linear-gradient(90deg, transparent, rgba(234,88,12,0.3), transparent) !important; }
.mm-chip-task .mm-chip-label { color: #ea580c !important; }
.mm-chip-task .mm-chip-value { color: #c2410c !important; }
.mm-chip-task:hover { 
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.12), 0 8px 24px rgba(234, 88, 12, 0.08) !important; 
}

/* ─────────────────────────────────────────────────────────────────────────
   § 50-D. DEAL CONTEXT CARD — Premium Open Deal Display
   Elevated card with clear visual hierarchy.
───────────────────────────────────────────────────────────────────────── */

body[data-theme="momentum"] .mm-deal-context {
  margin-top: 14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 14px !important;
  box-shadow: 
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  overflow: hidden !important;
  transition: box-shadow 250ms, transform 250ms !important;
}

body[data-theme="momentum"] .mm-deal-context:hover {
  box-shadow: 
    0 4px 16px rgba(15, 23, 42, 0.08),
    0 8px 24px rgba(15, 23, 42, 0.05) !important;
}

body[data-theme="momentum"] .mm-deal-context-header {
  padding: 12px 16px 10px !important;
  background: linear-gradient(180deg, #fafbfd 0%, #f8fafc 100%) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
}

body[data-theme="momentum"] .mm-deal-context-label {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  letter-spacing: 0.1em !important;
}

body[data-theme="momentum"] .mm-deal-context-viewall {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6366f1 !important;
  padding: 4px 10px !important;
  background: rgba(99, 102, 241, 0.08) !important;
  border-radius: 6px !important;
  transition: all 180ms !important;
}

body[data-theme="momentum"] .mm-deal-context-viewall:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #4f46e5 !important;
}

body[data-theme="momentum"] .mm-deal-row {
  padding: 12px 14px 12px 16px !important;  /* 14px right to align edit with task block */
  border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
  transition: background 180ms !important;
}

body[data-theme="momentum"] .mm-deal-row:hover {
  background: linear-gradient(90deg, #f8faff 0%, #fafbfd 100%) !important;
}

body[data-theme="momentum"] .mm-deal-row-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

body[data-theme="momentum"] .mm-deal-row-stage {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #6366f1 !important;
  background: linear-gradient(135deg, #eef2ff 0%, #e8edff 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  text-transform: capitalize !important;
}

body[data-theme="momentum"] .mm-deal-row-value {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #059669 !important;
  font-variant-numeric: tabular-nums !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 50-E. QUICK ACTIONS BAR — Premium Button Group
   Refined buttons with semantic colors and micro-interactions.
───────────────────────────────────────────────────────────────────────── */

.mm-quick-actions {
  gap: 8px !important;
  margin-top: 12px !important;
}

body[data-theme="momentum"] .mm-quick-btn,
body[data-theme="momentum"] #detailPanel .mm-quick-btn {
  height: 34px !important;
  padding: 0 14px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 
    0 1px 2px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

body[data-theme="momentum"] .mm-quick-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  transition: opacity 200ms !important;
}

body[data-theme="momentum"] .mm-quick-btn:hover::before {
  opacity: 1 !important;
}

body[data-theme="momentum"] .mm-quick-btn[data-action="deal"]::before {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.1) 0%, rgba(22, 163, 74, 0.05) 100%) !important;
}
body[data-theme="momentum"] .mm-quick-btn[data-action="deal"]:hover {
  border-color: rgba(22, 163, 74, 0.3) !important;
  color: #15803d !important;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15) !important;
}

body[data-theme="momentum"] .mm-quick-btn[data-action="task"]::before {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.1) 0%, rgba(234, 88, 12, 0.05) 100%) !important;
}
body[data-theme="momentum"] .mm-quick-btn[data-action="task"]:hover {
  border-color: rgba(234, 88, 12, 0.3) !important;
  color: #c2410c !important;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.15) !important;
}

body[data-theme="momentum"] .mm-quick-btn[data-action="note"]::before {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%) !important;
}
body[data-theme="momentum"] .mm-quick-btn[data-action="note"]:hover {
  border-color: rgba(124, 58, 237, 0.3) !important;
  color: #7c3aed !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15) !important;
}

body[data-theme="momentum"] .mm-quick-btn:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 50-F. CONTACT DETAILS CARDS — Clean Field Groups
   Organized sections with subtle separation.
───────────────────────────────────────────────────────────────────────── */

body[data-theme="momentum"] #detailPanel .contact-field-group {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body[data-theme="momentum"] #detailPanel .contact-field-group h3,
body[data-theme="momentum"] #detailPanel .field-group-header {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 14px 18px 10px !important;
  background: #fafbfd !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
  margin: 0 !important;
}

body[data-theme="momentum"] #detailPanel .detailRow {
  padding: 10px 18px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
  transition: background 180ms !important;
}

body[data-theme="momentum"] #detailPanel .detailRow:last-child {
  border-bottom: none !important;
}

body[data-theme="momentum"] #detailPanel .detailRow:hover {
  background: rgba(99, 102, 241, 0.02) !important;
}

body[data-theme="momentum"] #detailPanel .detailRow .label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  min-width: 90px !important;
}

body[data-theme="momentum"] #detailPanel .detailRow .value,
body[data-theme="momentum"] #detailPanel .detailRow .inline-input {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
}

/* + Add buttons — Ghost style that doesn't compete */
body[data-theme="momentum"] #detailPanel .btn-add-field,
body[data-theme="momentum"] #detailPanel [class*="add-btn"],
body[data-theme="momentum"] #detailPanel .add-field-btn {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6366f1 !important;
  background: transparent !important;
  border: 1px dashed rgba(99, 102, 241, 0.3) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  margin: 8px 16px 12px !important;
  transition: all 180ms !important;
}

body[data-theme="momentum"] #detailPanel .btn-add-field:hover,
body[data-theme="momentum"] #detailPanel [class*="add-btn"]:hover {
  background: rgba(99, 102, 241, 0.06) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 50-G. PRIMARY CONTACT CARD — Premium Mini-Card
   Elevated design with rich interaction states.
───────────────────────────────────────────────────────────────────────── */

.mm-contact-card {
  padding: 14px 18px !important;
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 50%, #f0f5ff 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  border-radius: 14px !important;
  box-shadow: 
    0 1px 3px rgba(59, 130, 246, 0.08),
    0 4px 12px rgba(59, 130, 246, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mm-contact-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  box-shadow: 
    0 4px 16px rgba(59, 130, 246, 0.12),
    0 8px 24px rgba(59, 130, 246, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.mm-contact-avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: 
    0 2px 8px rgba(59, 130, 246, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.mm-contact-name {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.mm-contact-title {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #3b82f6 !important;
  opacity: 1 !important;
}

.mm-contact-action-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  color: #3b82f6 !important;
  transition: all 200ms !important;
}

.mm-contact-action-btn:hover {
  background: #ffffff !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #2563eb !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 50-H. TAB NAVIGATION — Premium Segmented Control
   Clear, accessible tab bar with strong active state.
───────────────────────────────────────────────────────────────────────── */

body[data-theme="momentum"] #detailPanel .contact-detail-tabs-header {
  background: linear-gradient(180deg, #e8edf5 0%, #e2e8f2 100%) !important;
  border-radius: 14px !important;
  padding: 5px !important;
  margin-bottom: 20px !important;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn {
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  border-radius: 10px !important;
  min-height: 42px !important;
  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn:hover {
  background: rgba(255, 255, 255, 0.6) !important;
  color: #1e293b !important;
}

body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.is-active,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.active {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  box-shadow: 
    0 2px 8px rgba(15, 23, 42, 0.1),
    0 4px 16px rgba(15, 23, 42, 0.05),
    0 0 0 1px rgba(15, 23, 42, 0.05) !important;
}

body[data-theme="momentum"] #detailPanel .contact-detail-tab-count {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.08) !important;
}

body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.is-active .contact-detail-tab-count,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.active .contact-detail-tab-count {
  background: linear-gradient(135deg, #dbeafe 0%, #c7d2fe 100%) !important;
  color: #3730a3 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 50-I. STICKY NOTE — Enhanced with Charm
   Polished paper texture, better shadows, refined typography.
───────────────────────────────────────────────────────────────────────── */

body[data-theme="momentum"] .pinned-sticky-note {
  background: linear-gradient(145deg, #fef9c3 0%, #fef08a 100%) !important;
  border: none !important;
  border-radius: 2px 2px 16px 2px !important;
  box-shadow: 
    3px 4px 16px rgba(202, 138, 4, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 8px rgba(234, 179, 8, 0.1) !important;
  padding: 32px 16px 16px !important;
  position: relative !important;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms !important;
}

body[data-theme="momentum"] .pinned-sticky-note::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 23px,
      rgba(234, 179, 8, 0.08) 23px,
      rgba(234, 179, 8, 0.08) 24px
    ) !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

body[data-theme="momentum"] .pinned-sticky-note:hover {
  box-shadow: 
    6px 8px 28px rgba(202, 138, 4, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Tape strip refinement */
body[data-theme="momentum"] .pinned-sticky-note > div:first-child {
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.5) 0%, rgba(234, 179, 8, 0.4) 100%) !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 50-J. ACTIVITY FEED — Premium Timeline
   Stronger visual hierarchy, better icons, refined spacing.
───────────────────────────────────────────────────────────────────────── */

body[data-theme="momentum"] .contact-activity-feed {
  padding: 8px 0 16px !important;
}

body[data-theme="momentum"] .contact-activity-feed::before {
  left: 25px !important;
  width: 2px !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #cbd5e1 4%,
    #e2e8f0 50%,
    #cbd5e1 96%,
    transparent 100%
  ) !important;
}

body[data-theme="momentum"] .activityItem.contact-activity-item {
  padding: 12px 18px 12px 60px !important;
  margin: 4px 8px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid transparent !important;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body[data-theme="momentum"] .activityItem.contact-activity-item:hover {
  background: #fafbfd !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

body[data-theme="momentum"] .mm-activity-bubble {
  width: 32px !important;
  height: 32px !important;
  left: 10px !important;
  top: 10px !important;
  font-size: 15px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 
    0 0 0 3px #e8edf4,
    0 2px 6px rgba(15, 23, 42, 0.1) !important;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  transition: transform 200ms, box-shadow 200ms !important;
}

body[data-theme="momentum"] .activityItem.contact-activity-item:hover .mm-activity-bubble {
  transform: scale(1.08) !important;
  box-shadow: 
    0 0 0 3px #dbeafe,
    0 4px 12px rgba(59, 130, 246, 0.15) !important;
}

/* Activity type-specific bubble colors */
body[data-theme="momentum"] .mm-activity-bubble[data-type="call"] {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
}
body[data-theme="momentum"] .mm-activity-bubble[data-type="email"] {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
}
body[data-theme="momentum"] .mm-activity-bubble[data-type="note"] {
  background: linear-gradient(135deg, #f5f5f4 0%, #e7e5e4 100%) !important;
  color: #57534e !important;
}
body[data-theme="momentum"] .mm-activity-bubble[data-type="meeting"] {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%) !important;
}

body[data-theme="momentum"] .activityItem.contact-activity-item .mm-timeline-title,
body[data-theme="momentum"] .activityItem.contact-activity-item > div:not(.mm-activity-bubble) {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  line-height: 1.45 !important;
}

body[data-theme="momentum"] .activityItem.contact-activity-item .mm-timeline-meta,
body[data-theme="momentum"] .activityItem.contact-activity-item time {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  margin-top: 3px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 50-K. NOTE COMPOSER — Polished Input Area
   Clean, focused design for quick note taking.
───────────────────────────────────────────────────────────────────────── */

body[data-theme="momentum"] #detailPanel .contact-overview-right > .detailSection {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.05) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 1px 3px rgba(15, 23, 42, 0.03),
    0 4px 12px rgba(15, 23, 42, 0.02) !important;
  overflow: visible !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-header {
  padding: 14px 20px 12px !important;
  background: linear-gradient(180deg, #fafbfd 0%, #f8fafc 100%) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
  border-radius: 16px 16px 0 0 !important;
}

/* Align Identity and Notes & Activity header heights at top of form */
body[data-theme="momentum"] #detailPanel .contact-field-group-title,
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-header {
  min-height: 44px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}
body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-header {
  padding-left: 16px !important;
  padding-right: 20px !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-right .related-section-title {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  letter-spacing: 0.1em !important;
}

body[data-theme="momentum"] .overview-note-composer > div:first-child {
  padding: 16px 18px 14px !important;
  gap: 8px !important;
}

body[data-theme="momentum"] .overview-note-composer [data-ov-type],
body[data-theme="momentum"] .overview-note-composer [data-ov-voice] {
  min-height: 44px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body[data-theme="momentum"] .overview-note-composer textarea {
  margin: 0 18px !important;
  width: calc(100% - 36px) !important;
  min-height: 80px !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: #fafbfc !important;
  transition: all 200ms !important;
}

body[data-theme="momentum"] .overview-note-composer textarea:focus {
  border-color: #6366f1 !important;
  background: #ffffff !important;
  box-shadow: 
    0 0 0 3px rgba(99, 102, 241, 0.12),
    0 2px 8px rgba(99, 102, 241, 0.08) !important;
}

body[data-theme="momentum"] .overview-note-composer-actions {
  padding: 12px 18px 16px 10px !important;
}

body[data-theme="momentum"] .overview-note-composer .btn.primary,
body[data-theme="momentum"] .overview-note-composer-actions .btn.primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border: none !important;
  padding: 10px 20px !important;
  min-width: 100px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  box-shadow: 
    0 2px 6px rgba(99, 102, 241, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: all 200ms !important;
}

body[data-theme="momentum"] .overview-note-composer .btn.primary:hover,
body[data-theme="momentum"] .overview-note-composer-actions .btn.primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  box-shadow: 
    0 4px 12px rgba(99, 102, 241, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 50-L. GLOBAL POLISH — Finishing Touches
   Consistent animations, focus states, and micro-details.
───────────────────────────────────────────────────────────────────────── */

/* Smoother global transitions */
body[data-theme="momentum"] * {
  scroll-behavior: smooth !important;
}

/* Better focus rings */
body[data-theme="momentum"] :focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

/* Premium scrollbar */
body[data-theme="momentum"] #detailPanel ::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

body[data-theme="momentum"] #detailPanel ::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 3px !important;
}

body[data-theme="momentum"] #detailPanel ::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 3px !important;
  transition: background 200ms !important;
}

body[data-theme="momentum"] #detailPanel ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* Section titles consistency */
body[data-theme="momentum"] #detailPanel .related-section-title,
body[data-theme="momentum"] #detailPanel .section-header-title {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

/* Improved empty states */
body[data-theme="momentum"] #detailPanel .related-section-empty {
  padding: 40px 24px !important;
  text-align: center !important;
}

body[data-theme="momentum"] #detailPanel .related-section-empty-icon {
  font-size: 32px !important;
  opacity: 0.25 !important;
  margin-bottom: 12px !important;
}

body[data-theme="momentum"] #detailPanel .related-section-empty-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
}

/* Card hover glow effect */
@keyframes mm-subtle-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.08); }
}

/* Add new item animation */
@keyframes mm-slide-in-premium {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body[data-theme="momentum"] .mm-activity-entering {
  animation: mm-slide-in-premium 280ms cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 50-M. RESPONSIVE REFINEMENTS
   Ensure polish carries through to mobile views.
───────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  body[data-theme="momentum"] #detailPanel .detailHeader {
    padding: 20px 16px 18px !important;
  }
  
  body[data-theme="momentum"] #detailPanel .contactName {
    font-size: 24px !important;
  }
  
  .mm-stat-chips {
    gap: 8px !important;
  }
  
  .mm-chip {
    padding: 10px 14px !important;
  }
  
  .mm-chip-value {
    font-size: 17px !important;
  }
  
  body[data-theme="momentum"] .mm-quick-btn {
    height: 38px !important;
    padding: 0 12px !important;
  }
  
  body[data-theme="momentum"] .pinned-sticky-note {
    padding: 28px 14px 14px !important;
  }
  
  body[data-theme="momentum"] .activityItem.contact-activity-item {
    padding: 10px 14px 10px 52px !important;
  }
  
  body[data-theme="momentum"] .mm-activity-bubble {
    width: 28px !important;
    height: 28px !important;
    left: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 51 — CRITICAL SPECIFICITY FIXES
   High-specificity overrides to ensure polish actually renders.
   These rules use maximum specificity to override inline styles.
═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   § 51-A. COMPANY NAME — Force Gradient Text Effect
   The gradient wasn't showing due to -webkit-text-fill-color conflicts.
───────────────────────────────────────────────────────────────────────── */

body[data-theme="momentum"] #detailPanel .detailHeader .contactName,
body[data-theme="momentum"] #detailPanel .detailHeader .detailHeaderIdentity .contactName,
body[data-theme="momentum"] #detailPanel .contactName,
body[data-theme="momentum"] .contactName {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.8px !important;
  line-height: 1.05 !important;
  color: transparent !important;
  background: linear-gradient(135deg, #0c1220 0%, #1e3a5f 50%, #2563eb 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  margin-bottom: 4px !important;
  display: inline-block !important;
}

/* Fallback for browsers that don't support gradient text */
@supports not (background-clip: text) {
  body[data-theme="momentum"] #detailPanel .contactName {
    color: #0c1527 !important;
    -webkit-text-fill-color: #0c1527 !important;
    background: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   § 51-B. CONTACT DETAILS SECTIONS — Proper Card Grouping
   Target the actual detailSection and contact-details-card classes.
───────────────────────────────────────────────────────────────────────── */

/* No outer border around the whole form — keep only the "Contact Details" header */
body[data-theme="momentum"] #detailPanel .contact-details-card,
body[data-theme="momentum"] #detailPanel .detailSection.contact-details-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Contact Details header removed per user request */
body[data-theme="momentum"] #detailPanel .contact-details-card > h3,
body[data-theme="momentum"] #detailPanel .contact-details-card h3:first-child {
  display: none !important;
}

/* Detail rows within sections */
body[data-theme="momentum"] #detailPanel .contact-details-card .detailRow,
body[data-theme="momentum"] #detailPanel .detailSection .detailRow {
  padding: 12px 20px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
  margin: 0 !important;
  background: #ffffff !important;
  transition: background 180ms ease !important;
}

body[data-theme="momentum"] #detailPanel .contact-details-card .detailRow:last-child,
body[data-theme="momentum"] #detailPanel .detailSection .detailRow:last-child {
  border-bottom: none !important;
}

body[data-theme="momentum"] #detailPanel .detailRow:hover {
  background: rgba(99, 102, 241, 0.03) !important;
}

/* Field labels */
body[data-theme="momentum"] #detailPanel .detailRow .label,
body[data-theme="momentum"] #detailPanel .detailRow label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  min-width: 100px !important;
}

/* Field values */
body[data-theme="momentum"] #detailPanel .detailRow .value,
body[data-theme="momentum"] #detailPanel .detailRow .inline-input {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
}

/* Multi-field sections (phones, emails, addresses) */
body[data-theme="momentum"] #detailPanel .multi-field-section,
body[data-theme="momentum"] #detailPanel [class*="multi-field"] {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 16px !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.03),
    0 4px 12px rgba(15, 23, 42, 0.02) !important;
}

/* + Add buttons — Refined ghost style */
body[data-theme="momentum"] #detailPanel button[class*="add"],
body[data-theme="momentum"] #detailPanel .btn-add,
body[data-theme="momentum"] #detailPanel [class*="add-btn"] {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6366f1 !important;
  background: rgba(99, 102, 241, 0.04) !important;
  border: 1.5px dashed rgba(99, 102, 241, 0.35) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  margin: 14px 2px 16px !important;
  cursor: pointer !important;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body[data-theme="momentum"] #detailPanel button[class*="add"]:hover,
body[data-theme="momentum"] #detailPanel .btn-add:hover,
body[data-theme="momentum"] #detailPanel [class*="add-btn"]:hover {
  background: rgba(99, 102, 241, 0.1) !important;
  border-color: rgba(99, 102, 241, 0.6) !important;
  border-style: solid !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 51-C. DEAL CARD — Premium Elevated Design
   Override inline styles with maximum specificity.
───────────────────────────────────────────────────────────────────────── */

body[data-theme="momentum"] #detailPanel .contact-deal-card,
body[data-theme="momentum"] #detailPanel .contact-deals-section .contact-deal-card,
body[data-theme="momentum"] .contact-deal-card {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 20px !important;
  margin-bottom: 12px !important;
  background: linear-gradient(135deg, #ffffff 0%, #fafbfe 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 4px 16px rgba(15, 23, 42, 0.04),
    0 8px 32px rgba(15, 23, 42, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

body[data-theme="momentum"] #detailPanel .contact-deal-card::before,
body[data-theme="momentum"] .contact-deal-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%) !important;
  opacity: 0 !important;
  transition: opacity 280ms !important;
}

body[data-theme="momentum"] #detailPanel .contact-deal-card:hover,
body[data-theme="momentum"] .contact-deal-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
  box-shadow: 
    0 4px 12px rgba(15, 23, 42, 0.08),
    0 12px 40px rgba(99, 102, 241, 0.12),
    0 20px 60px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body[data-theme="momentum"] #detailPanel .contact-deal-card:hover::before,
body[data-theme="momentum"] .contact-deal-card:hover::before {
  opacity: 1 !important;
}

/* Deal icon */
body[data-theme="momentum"] #detailPanel .contact-deal-icon,
body[data-theme="momentum"] .contact-deal-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #dbeafe 0%, #c7d2fe 50%, #e0e7ff 100%) !important;
  color: #3730a3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 
    0 2px 8px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

body[data-theme="momentum"] #detailPanel .contact-deal-icon svg,
body[data-theme="momentum"] .contact-deal-icon svg {
  width: 22px !important;
  height: 22px !important;
}

/* Deal title */
body[data-theme="momentum"] #detailPanel .contact-deal-title,
body[data-theme="momentum"] .contact-deal-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.3px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Health badge on deal */
body[data-theme="momentum"] #detailPanel .contact-deal-health-badge,
body[data-theme="momentum"] .contact-deal-health-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  text-transform: capitalize !important;
}

body[data-theme="momentum"] #detailPanel .contact-deal-health-badge.level-low,
body[data-theme="momentum"] .contact-deal-health-badge.level-low {
  background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%) !important;
  color: #14532d !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
}

body[data-theme="momentum"] #detailPanel .contact-deal-health-badge.level-medium,
body[data-theme="momentum"] .contact-deal-health-badge.level-medium {
  background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%) !important;
  color: #78350f !important;
  border-color: rgba(234, 88, 12, 0.3) !important;
}

body[data-theme="momentum"] #detailPanel .contact-deal-health-badge.level-high,
body[data-theme="momentum"] .contact-deal-health-badge.level-high {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
  color: #7f1d1d !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
}

/* Stage pill */
body[data-theme="momentum"] #detailPanel .contact-deal-stage-pill,
body[data-theme="momentum"] .contact-deal-stage-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  color: #4338ca !important;
  text-transform: capitalize !important;
}

/* Deal metrics grid */
body[data-theme="momentum"] #detailPanel .contact-deal-metrics,
body[data-theme="momentum"] .contact-deal-metrics {
  margin-top: 14px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body[data-theme="momentum"] #detailPanel .contact-deal-metric,
body[data-theme="momentum"] .contact-deal-metric {
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  transition: all 200ms !important;
}

body[data-theme="momentum"] #detailPanel .contact-deal-metric:hover,
body[data-theme="momentum"] .contact-deal-metric:hover {
  border-color: rgba(99, 102, 241, 0.15) !important;
  background: linear-gradient(180deg, #fafbff 0%, #f5f7ff 100%) !important;
}

body[data-theme="momentum"] #detailPanel .contact-deal-metric .k,
body[data-theme="momentum"] .contact-deal-metric .k {
  font-size: 9px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #64748b !important;
  font-weight: 800 !important;
}

body[data-theme="momentum"] #detailPanel .contact-deal-metric .v,
body[data-theme="momentum"] .contact-deal-metric .v {
  font-size: 15px !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Deal subtext row */
body[data-theme="momentum"] #detailPanel .contact-deal-subtext,
body[data-theme="momentum"] .contact-deal-subtext {
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Footer pills */
body[data-theme="momentum"] #detailPanel .contact-deal-footer,
body[data-theme="momentum"] .contact-deal-footer {
  margin-top: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

body[data-theme="momentum"] #detailPanel .contact-deal-footer-pill,
body[data-theme="momentum"] .contact-deal-footer-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.04) !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  transition: background 180ms !important;
}

body[data-theme="momentum"] #detailPanel .contact-deal-footer-pill:hover,
body[data-theme="momentum"] .contact-deal-footer-pill:hover {
  background: rgba(99, 102, 241, 0.08) !important;
}

/* Edit button */
body[data-theme="momentum"] #detailPanel .contact-deal-edit-btn,
body[data-theme="momentum"] .contact-deal-edit-btn {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 200ms !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

body[data-theme="momentum"] #detailPanel .contact-deal-edit-btn:hover,
body[data-theme="momentum"] .contact-deal-edit-btn:hover {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  color: #6366f1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 51-D. OPEN DEALS HEADER SECTION — Enhanced "1 OPEN DEAL" area
───────────────────────────────────────────────────────────────────────── */

body[data-theme="momentum"] #detailPanel .mm-deal-context,
body[data-theme="momentum"] .mm-deal-context {
  margin-top: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 4px 16px rgba(15, 23, 42, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  overflow: hidden !important;
  transition: all 280ms !important;
}

body[data-theme="momentum"] #detailPanel .mm-deal-context:hover,
body[data-theme="momentum"] .mm-deal-context:hover {
  box-shadow: 
    0 4px 16px rgba(15, 23, 42, 0.08),
    0 8px 32px rgba(15, 23, 42, 0.05) !important;
}

body[data-theme="momentum"] .mm-deal-context-header {
  padding: 14px 18px 12px !important;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
}

body[data-theme="momentum"] .mm-deal-row {
  padding: 14px 14px 14px 18px !important;  /* 14px right to align edit with task block */
  gap: 12px !important;
}

body[data-theme="momentum"] .mm-deal-row:hover {
  background: linear-gradient(90deg, #f8faff 0%, #fafbfd 100%) !important;
}

body[data-theme="momentum"] .mm-deal-row-name {
  font-size: 14px !important;
  font-weight: 700 !important;
}

body[data-theme="momentum"] .mm-deal-row-stage {
  font-size: 11px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
}

body[data-theme="momentum"] .mm-deal-row-value {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #059669 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 51-E. HEADER META LINE & BADGES — Refined
───────────────────────────────────────────────────────────────────────── */

body[data-theme="momentum"] #detailPanel .mm-meta-line,
body[data-theme="momentum"] .mm-meta-line {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  margin-top: 2px !important;
  letter-spacing: 0.01em !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 51-F. OVERALL PANEL POLISH
───────────────────────────────────────────────────────────────────────── */

body[data-theme="momentum"] #detailPanel .detailHeader {
  padding: 28px 28px 22px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important;
  border-bottom: none !important;
  box-shadow: 
    0 1px 0 rgba(15, 23, 42, 0.04),
    0 4px 20px rgba(15, 23, 42, 0.03) !important;
}

body[data-theme="momentum"] #detailPanel #detailContent {
  padding: 20px 24px !important;
  background: #f7f9fc !important;
}

/* Content wrapper for two-column layout */
body[data-theme="momentum"] #detailPanel .contact-overview-layout {
  gap: 24px !important;
}

body[data-theme="momentum"] #detailPanel .contact-overview-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   § 51-G. FINAL SHINE — Micro-polish touches
───────────────────────────────────────────────────────────────────────── */

/* Ensure all text is crisp */
body[data-theme="momentum"] #detailPanel {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Ensure proper z-index layering */
body[data-theme="momentum"] #detailPanel .detailHeader {
  position: relative !important;
  z-index: 10 !important;
}

/* Subtle animation on section load */
body[data-theme="momentum"] #detailPanel .detailSection,
body[data-theme="momentum"] #detailPanel .contact-details-card,
body[data-theme="momentum"] #detailPanel .contact-deal-card {
  animation: mm-section-appear 350ms cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes mm-section-appear {
  from {
    opacity: 0.6;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 52 — MOBILE POLISH (iPhone 12/13/14)
   Specific fixes for small screens without affecting desktop.
   iPhone 12 viewport: 390×844 (portrait), iPhone 14 Pro Max: 430×932
═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   § 52-A. CONTACT LIST — Readable names, proper spacing
───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Contact list wrapper: enable horizontal scroll */
  .is-mobile .contact-list-table-wrap,
  .is-mobile .pipe-list-table-wrap,
  body.is-mobile .contact-list-table-wrap,
  body.is-mobile .pipe-list-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Contact list table: keep min-width for scrolling */
  .is-mobile .contact-list-table,
  .is-mobile .pipe-list-table,
  body.is-mobile .contact-list-table,
  body.is-mobile .pipe-list-table,
  .is-mobile table.contact-list-table,
  .is-mobile table.pipe-list-table {
    table-layout: fixed !important;
    min-width: 600px !important;
    width: 100% !important;
  }
  
  /* Name column = 50% of visible width so full names usually fit */
  .is-mobile .contact-list-table th:nth-child(2),
  .is-mobile .contact-list-table td:nth-child(2),
  body.is-mobile .contact-list-table th:nth-child(2),
  body.is-mobile .contact-list-table td:nth-child(2),
  .is-mobile table[data-contact-table] th:nth-child(2),
  .is-mobile table[data-contact-table] td:nth-child(2) {
    width: 50vw !important;
    min-width: 50vw !important;
    max-width: 50vw !important;
  }
  
  /* Name cell text: single line, ellipsis if still too long */
  .is-mobile .contact-name-cell,
  body.is-mobile .contact-name-cell,
  .is-mobile td.contact-name-cell,
  .is-mobile table[data-contact-table] .contact-name-cell {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    max-width: 100% !important;
    line-height: 1.3 !important;
  }
  
  /* All other cells: compact padding, no wrap */
  .is-mobile .contact-list-table td,
  .is-mobile .contact-list-table th,
  body.is-mobile .contact-list-table td,
  body.is-mobile .contact-list-table th {
    white-space: nowrap !important;
    padding: 10px 8px !important;
  }
  
  /* Checkbox column — compact */
  .is-mobile .contact-list-head-check,
  .is-mobile .contact-list-check-td,
  .is-mobile .contact-table-check-col,
  body.is-mobile .contact-list-head-check,
  body.is-mobile .contact-list-check-td {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 10px 6px !important;
  }
  
  /* Table header — prevent overlap: min-widths + ellipsis */
  .is-mobile .contact-list-table thead th,
  body.is-mobile .contact-list-table thead th {
    font-size: 10px !important;
    padding: 10px 8px !important;
    letter-spacing: 0.05em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  
  /* NEXT ACTION column — enough width so it doesn’t overlap COMPANY */
  .is-mobile .contact-list-table thead th:nth-child(3),
  body.is-mobile .contact-list-table thead th:nth-child(3),
  .is-mobile .contact-list-table td:nth-child(3),
  body.is-mobile .contact-list-table td:nth-child(3) {
    min-width: 72px !important;
  }
  
  /* COMPANY column */
  .is-mobile .contact-list-table thead th:nth-child(4),
  body.is-mobile .contact-list-table thead th:nth-child(4),
  .is-mobile .contact-list-table td:nth-child(4),
  body.is-mobile .contact-list-table td:nth-child(4) {
    min-width: 64px !important;
  }
  
  /* STATUS, DEAL, TIMELINE — small but non-zero so headers don’t collide */
  .is-mobile .contact-list-table thead th:nth-child(5),
  .is-mobile .contact-list-table thead th:nth-child(6),
  .is-mobile .contact-list-table thead th:nth-child(7),
  body.is-mobile .contact-list-table thead th:nth-child(5),
  body.is-mobile .contact-list-table thead th:nth-child(6),
  body.is-mobile .contact-list-table thead th:nth-child(7) {
    min-width: 48px !important;
  }
  
  .is-mobile .contact-list-th,
  body.is-mobile .contact-list-th {
    font-size: 10px !important;
    padding: 10px 8px !important;
    letter-spacing: 0.05em !important;
  }
  
  /* Row height */
  .is-mobile .pipe-list-row,
  .is-mobile .contact-row,
  body.is-mobile .pipe-list-row,
  body.is-mobile .contact-row,
  .is-mobile table[data-contact-table] tr {
    min-height: 48px !important;
  }
  
  /* Pills and badges — compact */
  .is-mobile .contact-next-task-pill,
  .is-mobile .contact-company-pill,
  .is-mobile .contact-deal-pill,
  .is-mobile .contact-status-pill,
  body.is-mobile .contact-status-pill {
    font-size: 10px !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   § 52-B. CONTACT DETAIL PANEL — Breathable layout
───────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  /* Header: more compact */
  body[data-theme="momentum"] .is-mobile #detailPanel .detailHeader,
  .is-mobile body[data-theme="momentum"] #detailPanel .detailHeader {
    padding: 16px 14px 14px !important;
  }
  
  /* Company name: smaller but still prominent */
  body[data-theme="momentum"] .is-mobile #detailPanel .contactName,
  body[data-theme="momentum"] .is-mobile .contactName,
  .is-mobile body[data-theme="momentum"] #detailPanel .contactName {
    font-size: 22px !important;
    letter-spacing: -0.4px !important;
    line-height: 1.15 !important;
  }
  
  /* Health badge: compact */
  body[data-theme="momentum"] .is-mobile .mm-health-signal,
  .is-mobile body[data-theme="momentum"] .mm-health-signal {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  
  /* Meta line: smaller */
  body[data-theme="momentum"] .is-mobile .mm-meta-line,
  .is-mobile body[data-theme="momentum"] .mm-meta-line {
    font-size: 11px !important;
    margin-top: 1px !important;
  }
  
  /* Stat chips: 2-column grid instead of row */
  /* Header stat chips: 3 equal columns so DEALS, LAST ACTIVE, NEXT all fit */
  body[data-theme="momentum"] .is-mobile .mm-stat-chips,
  .is-mobile body[data-theme="momentum"] .mm-stat-chips,
  body.is-mobile .mm-stat-chips {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin-top: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-theme="momentum"] .is-mobile .mm-chip,
  .is-mobile body[data-theme="momentum"] .mm-chip,
  body.is-mobile .mm-chip {
    padding: 8px 6px !important;
    min-width: 0 !important;
    flex: none !important;
    overflow: hidden !important;
  }

  body[data-theme="momentum"] .is-mobile .mm-chip-label,
  .is-mobile body[data-theme="momentum"] .mm-chip-label,
  body.is-mobile .mm-chip-label {
    font-size: 8px !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-theme="momentum"] .is-mobile .mm-chip-value,
  .is-mobile body[data-theme="momentum"] .mm-chip-value,
  body.is-mobile .mm-chip-value {
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Header identity: align name + badge row on phone */
  body[data-theme="momentum"] .is-mobile #detailPanel .detailHeaderIdentity,
  .is-mobile body[data-theme="momentum"] #detailPanel .detailHeaderIdentity,
  body.is-mobile #detailPanel .detailHeaderIdentity {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Quick actions row removed globally; bottom bar is the single surface */
  
  body[data-theme="momentum"] .is-mobile .mm-quick-btn,
  .is-mobile body[data-theme="momentum"] .mm-quick-btn,
  body.is-mobile .mm-quick-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 12px !important;
    justify-content: center !important;
    border-radius: 12px !important;
    gap: 6px !important;
  }
  
  /* Bottom action bar (Back, Edit, Note, Pay Link, etc.): scrollable row */
  body[data-theme="momentum"] .is-mobile #detailHeaderActions,
  .is-mobile body[data-theme="momentum"] #detailHeaderActions,
  body.is-mobile #detailHeaderActions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 20px 10px 0 !important; /* right padding so last button visible when scrolled */
    margin-top: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  body[data-theme="momentum"] .is-mobile #detailHeaderActions::-webkit-scrollbar,
  .is-mobile body[data-theme="momentum"] #detailHeaderActions::-webkit-scrollbar {
    display: none !important;
  }
  
  body[data-theme="momentum"] .is-mobile #detailHeaderActions > button,
  body[data-theme="momentum"] .is-mobile #detailHeaderActions > .btn,
  body[data-theme="momentum"] .is-mobile #detailHeaderActions .detail-action-btn,
  .is-mobile body[data-theme="momentum"] #detailHeaderActions > button,
  body.is-mobile #detailHeaderActions > button,
  body.is-mobile #detailHeaderActions > .btn,
  body.is-mobile .detail-action-btn {
    flex: 0 0 auto !important;
    min-width: auto !important;
    max-width: none !important;
    height: 40px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 0 14px !important;
    justify-content: center !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }
  
  /* Edit button gets primary styling */
  body[data-theme="momentum"] .is-mobile #detailHeaderActions > .edit-btn,
  body.is-mobile #detailHeaderActions > .edit-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #fff !important;
    border: none !important;
  }
  
  /* Content area: tighter padding, extra bottom so Alerts FAB doesn’t cover content */
  body[data-theme="momentum"] .is-mobile #detailPanel #detailContent,
  .is-mobile body[data-theme="momentum"] #detailPanel #detailContent,
  body.is-mobile #detailPanel #detailContent {
    padding: 12px !important;
    padding-bottom: 100px !important; /* clear Alerts FAB */
  }
  
  /* Tabs: fixed height, horizontal scroll only, NO vertical scroll */
  body[data-theme="momentum"] .is-mobile #detailPanel .contact-detail-tabs-header,
  .is-mobile body[data-theme="momentum"] #detailPanel .contact-detail-tabs-header,
  body.is-mobile #detailPanel .contact-detail-tabs-header {
    padding: 4px 6px 4px 6px !important;
    padding-right: 20px !important; /* so last tab (e.g. Relationship) is fully visible when scrolled */
    margin-bottom: 12px !important;
    border-radius: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 44px !important;
    max-height: 44px !important;
    height: 44px !important;
    align-items: center !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  body[data-theme="momentum"] .is-mobile #detailPanel .contact-detail-tabs-header::-webkit-scrollbar,
  .is-mobile body[data-theme="momentum"] #detailPanel .contact-detail-tabs-header::-webkit-scrollbar {
    display: none !important;
  }

  body[data-theme="momentum"] .is-mobile #detailPanel .contact-detail-tabs-nav,
  .is-mobile body[data-theme="momentum"] #detailPanel .contact-detail-tabs-nav,
  body.is-mobile #detailPanel .contact-detail-tabs-nav {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    flex-shrink: 0 !important;
  }

  body[data-theme="momentum"] .is-mobile #detailPanel .contact-detail-tab-btn,
  .is-mobile body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn,
  body.is-mobile #detailPanel .contact-detail-tab-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  
  body[data-theme="momentum"] .is-mobile #detailPanel .contact-detail-tab-count,
  .is-mobile body[data-theme="momentum"] #detailPanel .contact-detail-tab-count,
  body.is-mobile #detailPanel .contact-detail-tab-count {
    min-width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
    margin-left: 4px !important;
    padding: 0 4px !important;
  }
  
  /* Field sections: full width cards */
  body[data-theme="momentum"] .is-mobile #detailPanel .contact-details-card,
  body[data-theme="momentum"] .is-mobile #detailPanel .detailSection,
  .is-mobile body[data-theme="momentum"] #detailPanel .contact-details-card {
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }
  
  body[data-theme="momentum"] .is-mobile #detailPanel .contact-details-card > h3,
  body[data-theme="momentum"] .is-mobile #detailPanel .detailSection > h3,
  .is-mobile body[data-theme="momentum"] #detailPanel .detailSection > h3 {
    font-size: 9px !important;
    padding: 10px 12px 8px !important;
    border-radius: 12px 12px 0 0 !important;
  }
  
  body[data-theme="momentum"] .is-mobile #detailPanel .detailRow,
  .is-mobile body[data-theme="momentum"] #detailPanel .detailRow {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  
  body[data-theme="momentum"] .is-mobile #detailPanel .detailRow .label,
  .is-mobile body[data-theme="momentum"] #detailPanel .detailRow .label,
  body.is-mobile #detailPanel .detailRow .label {
    font-size: 10px !important;
    min-width: 96px !important;
    flex: 0 0 96px !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
  }

  body[data-theme="momentum"] .is-mobile #detailPanel .detailRow .value,
  body[data-theme="momentum"] .is-mobile #detailPanel .detailRow .inline-input,
  .is-mobile body[data-theme="momentum"] #detailPanel .detailRow .value,
  body.is-mobile #detailPanel .detailRow .value {
    font-size: 13px !important;
    flex: 1 1 calc(100% - 100px) !important;
    min-width: 0 !important;
    overflow: visible !important;
    word-break: break-word !important; /* full email/owner shows, wraps if needed */
  }
  body[data-theme="momentum"] .is-mobile #detailPanel .detailRow .value > *,
  .is-mobile body[data-theme="momentum"] #detailPanel .detailRow .value > *,
  body.is-mobile #detailPanel .detailRow .value > * {
    overflow: visible !important;
    word-break: break-word !important;
  }
  
  /* Add buttons: compact */
  body[data-theme="momentum"] .is-mobile #detailPanel button[class*="add"],
  body[data-theme="momentum"] .is-mobile #detailPanel .btn-add,
  .is-mobile body[data-theme="momentum"] #detailPanel .btn-add {
    font-size: 10px !important;
    padding: 6px 10px !important;
    margin: 8px 10px 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   § 52-C. DEAL CARD ON MOBILE — Stacked layout
───────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  body[data-theme="momentum"] .is-mobile #detailPanel .contact-deal-card,
  body[data-theme="momentum"] .is-mobile .contact-deal-card,
  .is-mobile body[data-theme="momentum"] .contact-deal-card {
    flex-direction: column !important;
    padding: 14px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .contact-deal-icon,
  .is-mobile body[data-theme="momentum"] .contact-deal-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .contact-deal-main,
  .is-mobile body[data-theme="momentum"] .contact-deal-main {
    width: 100% !important;
  }
  
  body[data-theme="momentum"] .is-mobile .contact-deal-title,
  .is-mobile body[data-theme="momentum"] .contact-deal-title {
    font-size: 15px !important;
    padding-right: 50px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .contact-deal-health-badge,
  .is-mobile body[data-theme="momentum"] .contact-deal-health-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .contact-deal-subtext,
  .is-mobile body[data-theme="momentum"] .contact-deal-subtext {
    margin-top: 8px !important;
    gap: 6px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .contact-deal-stage-pill,
  .is-mobile body[data-theme="momentum"] .contact-deal-stage-pill {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
  
  /* Metrics: 2x2 grid */
  body[data-theme="momentum"] .is-mobile .contact-deal-metrics,
  .is-mobile body[data-theme="momentum"] .contact-deal-metrics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .contact-deal-metric,
  .is-mobile body[data-theme="momentum"] .contact-deal-metric {
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .contact-deal-metric .k,
  .is-mobile body[data-theme="momentum"] .contact-deal-metric .k {
    font-size: 8px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .contact-deal-metric .v,
  .is-mobile body[data-theme="momentum"] .contact-deal-metric .v {
    font-size: 13px !important;
  }
  
  /* Footer pills: wrap */
  body[data-theme="momentum"] .is-mobile .contact-deal-footer,
  .is-mobile body[data-theme="momentum"] .contact-deal-footer {
    margin-top: 10px !important;
    gap: 4px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .contact-deal-footer-pill,
  .is-mobile body[data-theme="momentum"] .contact-deal-footer-pill {
    font-size: 9px !important;
    padding: 3px 6px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .contact-deal-edit-btn,
  .is-mobile body[data-theme="momentum"] .contact-deal-edit-btn {
    font-size: 10px !important;
    padding: 5px 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   § 52-D. NOTES & ACTIVITY ON MOBILE — Compact composer
───────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  /* Activity section card */
  body[data-theme="momentum"] .is-mobile #detailPanel .contact-overview-right > .detailSection,
  .is-mobile body[data-theme="momentum"] #detailPanel .contact-overview-right > .detailSection {
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }
  
  /* Action buttons: smaller grid */
  body[data-theme="momentum"] .is-mobile .overview-note-composer > div:first-child,
  .is-mobile body[data-theme="momentum"] .overview-note-composer > div:first-child {
    padding: 10px !important;
    gap: 6px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .overview-note-composer [data-ov-type],
  body[data-theme="momentum"] .is-mobile .overview-note-composer [data-ov-voice],
  .is-mobile body[data-theme="momentum"] .overview-note-composer [data-ov-type] {
    min-height: 36px !important;
    font-size: 11px !important;
    padding: 6px !important;
    border-radius: 8px !important;
  }
  
  /* Hide labels on action buttons, show only icons */
  body[data-theme="momentum"] .is-mobile .overview-note-composer [data-ov-type] span:not(:has(svg)),
  body[data-theme="momentum"] .is-mobile .overview-note-composer [data-ov-voice] span:not(:has(svg)),
  .is-mobile body[data-theme="momentum"] .overview-note-composer [data-ov-type] span:not(:has(svg)) {
    display: none !important;
  }
  
  /* Textarea: compact */
  body[data-theme="momentum"] .is-mobile .overview-note-composer textarea,
  .is-mobile body[data-theme="momentum"] .overview-note-composer textarea {
    margin: 0 10px !important;
    width: calc(100% - 20px) !important;
    min-height: 60px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
  
  /* Action row: compact */
  body[data-theme="momentum"] .is-mobile .overview-note-composer-actions,
  .is-mobile body[data-theme="momentum"] .overview-note-composer-actions {
    padding: 8px 10px 12px !important;
    gap: 8px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .overview-note-composer .btn.primary,
  .is-mobile body[data-theme="momentum"] .overview-note-composer .btn.primary {
    padding: 8px 14px !important;
    min-width: 80px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
  
  /* Activity feed: compact */
  body[data-theme="momentum"] .is-mobile .contact-activity-feed,
  .is-mobile body[data-theme="momentum"] .contact-activity-feed {
    padding: 6px 0 10px !important;
  }
  
  /* Activity items: proper alignment, full width */
  body[data-theme="momentum"] .is-mobile .activityItem.contact-activity-item,
  .is-mobile body[data-theme="momentum"] .activityItem.contact-activity-item,
  body.is-mobile .activityItem.contact-activity-item {
    padding: 12px 12px 12px 48px !important;
    margin: 4px 0 !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  
  /* Activity bubble: left aligned */
  body[data-theme="momentum"] .is-mobile .mm-activity-bubble,
  .is-mobile body[data-theme="momentum"] .mm-activity-bubble,
  body.is-mobile .mm-activity-bubble {
    width: 28px !important;
    height: 28px !important;
    left: 10px !important;
    top: 10px !important;
    font-size: 13px !important;
  }
  
  /* Activity text: left aligned, full width */
  body[data-theme="momentum"] .is-mobile .activityItem.contact-activity-item .mm-timeline-title,
  body[data-theme="momentum"] .is-mobile .activityItem.contact-activity-item > div:not(.mm-activity-bubble),
  .is-mobile body[data-theme="momentum"] .activityItem.contact-activity-item .mm-timeline-title,
  body.is-mobile .activityItem.contact-activity-item .mm-timeline-title {
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    width: 100% !important;
  }
  
  /* Activity meta (date/user): left aligned */
  body[data-theme="momentum"] .is-mobile .activityItem.contact-activity-item .mm-timeline-meta,
  body[data-theme="momentum"] .is-mobile .activityItem.contact-activity-item time,
  .is-mobile body[data-theme="momentum"] .activityItem.contact-activity-item time,
  body.is-mobile .activityItem.contact-activity-item time,
  body.is-mobile .activityItem.contact-activity-item .mm-timeline-meta {
    font-size: 11px !important;
    margin-top: 4px !important;
    text-align: left !important;
    display: block !important;
  }
  
  /* Activity feed container: no extra padding pushing content right */
  body[data-theme="momentum"] .is-mobile .contact-activity-feed,
  .is-mobile body[data-theme="momentum"] .contact-activity-feed,
  body.is-mobile .contact-activity-feed {
    padding: 8px 0 !important;
    margin: 0 !important;
  }
  
  /* Timeline spine: adjust position */
  body[data-theme="momentum"] .is-mobile .contact-activity-feed::before,
  .is-mobile body[data-theme="momentum"] .contact-activity-feed::before {
    left: 18px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   § 52-E. PRIMARY CONTACT CARD ON MOBILE
───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  body[data-theme="momentum"] .is-mobile .mm-contact-card,
  .is-mobile body[data-theme="momentum"] .mm-contact-card,
  body.is-mobile .mm-contact-card {
    padding: 14px !important;
    border-radius: 14px !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* On phone: hide avatar to free space for contact name */
  body[data-theme="momentum"] .is-mobile .mm-contact-avatar,
  .is-mobile body[data-theme="momentum"] .mm-contact-avatar,
  body.is-mobile .mm-contact-avatar {
    display: none !important;
  }
  
  /* Give name block all freed space so contact name is visible */
  body[data-theme="momentum"] .is-mobile .mm-contact-card .mm-contact-info,
  .is-mobile body[data-theme="momentum"] .mm-contact-card .mm-contact-info,
  body.is-mobile .mm-contact-card .mm-contact-info {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  body[data-theme="momentum"] .is-mobile .mm-contact-name,
  .is-mobile body[data-theme="momentum"] .mm-contact-name,
  body.is-mobile .mm-contact-name {
    font-size: 14px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  body[data-theme="momentum"] .is-mobile .mm-contact-title,
  .is-mobile body[data-theme="momentum"] .mm-contact-title {
    font-size: 11px !important;
  }
  
  /* On phone: hide copy-phone and copy-email so only Call + Email stay; more room for name */
  body[data-theme="momentum"] .is-mobile .mm-contact-action-copy,
  .is-mobile body[data-theme="momentum"] .mm-contact-action-copy,
  body.is-mobile .mm-contact-action-copy {
    display: none !important;
  }
  
  body[data-theme="momentum"] .is-mobile .mm-contact-action-btn:not(.mm-contact-action-copy),
  .is-mobile body[data-theme="momentum"] .mm-contact-action-btn:not(.mm-contact-action-copy) {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .mm-contact-action-btn svg,
  .is-mobile body[data-theme="momentum"] .mm-contact-action-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   § 52-F. DEAL CONTEXT BLOCK ON MOBILE
───────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  body[data-theme="momentum"] .is-mobile .mm-deal-context,
  .is-mobile body[data-theme="momentum"] .mm-deal-context {
    margin-top: 10px !important;
    border-radius: 12px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .mm-deal-context-header,
  .is-mobile body[data-theme="momentum"] .mm-deal-context-header {
    padding: 10px 12px 8px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .mm-deal-context-label,
  .is-mobile body[data-theme="momentum"] .mm-deal-context-label {
    font-size: 9px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .mm-deal-context-viewall,
  .is-mobile body[data-theme="momentum"] .mm-deal-context-viewall {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .mm-deal-row,
  .is-mobile body[data-theme="momentum"] .mm-deal-row {
    padding: 8px 12px !important;
    grid-template-columns: 1fr auto auto !important;
    gap: 8px !important;
  }
  body[data-theme="momentum"] .is-mobile .mm-deal-row-stage,
  body[data-theme="momentum"] .is-mobile .mm-deal-row-prob,
  .is-mobile body[data-theme="momentum"] .mm-deal-row-stage,
  .is-mobile body[data-theme="momentum"] .mm-deal-row-prob {
    display: none !important;
  }
  
  body[data-theme="momentum"] .is-mobile .mm-deal-row-name,
  .is-mobile body[data-theme="momentum"] .mm-deal-row-name {
    font-size: 12px !important;
  }
  
  body[data-theme="momentum"] .is-mobile .mm-deal-row-stage,
  .is-mobile body[data-theme="momentum"] .mm-deal-row-stage {
    font-size: 9px !important;
    padding: 2px 6px !important;
    display: none !important;
  }
  
  body[data-theme="momentum"] .is-mobile .mm-deal-row-value,
  .is-mobile body[data-theme="momentum"] .mm-deal-row-value {
    font-size: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   § 52-G. HEADER ACTION BUTTONS ON MOBILE — all visible, scroll if needed
───────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  body[data-theme="momentum"] .is-mobile #detailPanel #detailHeaderActions,
  .is-mobile body[data-theme="momentum"] #detailPanel #detailHeaderActions,
  body.is-mobile #detailPanel #detailHeaderActions {
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-right: 20px !important; /* so last button (e.g. email) is fully visible when scrolled */
    scrollbar-width: none !important;
  }
  body[data-theme="momentum"] .is-mobile #detailPanel #detailHeaderActions::-webkit-scrollbar,
  .is-mobile body[data-theme="momentum"] #detailPanel #detailHeaderActions::-webkit-scrollbar {
    display: none !important;
  }
  
  body[data-theme="momentum"] .is-mobile #detailPanel #detailHeaderActions .btn,
  .is-mobile body[data-theme="momentum"] #detailPanel #detailHeaderActions .btn,
  body.is-mobile #detailPanel #detailHeaderActions .btn,
  body[data-theme="momentum"] .is-mobile #detailPanel #detailHeaderActions .detail-action-btn,
  body.is-mobile #detailPanel #detailHeaderActions .detail-action-btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
    min-height: 36px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   § 52-H. ALERTS FAB — sit above bottom nav (no overlap)
───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  body[data-theme="momentum"] .is-mobile .bottom-right-fab-container,
  body[data-theme="momentum"] .is-mobile #bottomRightFabContainer,
  .is-mobile body[data-theme="momentum"] .bottom-right-fab-container,
  .is-mobile body[data-theme="momentum"] #bottomRightFabContainer,
  body.is-mobile .bottom-right-fab-container,
  body.is-mobile #bottomRightFabContainer {
    bottom: 88px !important; /* above 60px bottom nav with clear gap */
  }
  body[data-theme="momentum"] .is-mobile #dealDoctorNotifBell,
  .is-mobile body[data-theme="momentum"] #dealDoctorNotifBell,
  body.is-mobile #dealDoctorNotifBell {
    bottom: auto !important;
  }
}

/* ==========================================================================
   Unified segmented tabs for detail views only (Contacts + Projects)
========================================================================== */
body[data-theme="momentum"] .contact-detail-tabs-header,
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-header,
body[data-theme="momentum"] #projectsWrap .project-detail-tabs-header {
  background: #eceff5 !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  padding: 4px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  gap: 2px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
body[data-theme="momentum"] .contact-detail-tabs-header::-webkit-scrollbar,
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-header::-webkit-scrollbar,
body[data-theme="momentum"] #projectsWrap .project-detail-tabs-header::-webkit-scrollbar {
  display: none !important;
}
body[data-theme="momentum"] .contact-detail-tabs-nav,
body[data-theme="momentum"] #detailPanel .contact-detail-tabs-nav,
body[data-theme="momentum"] #projectsWrap .project-detail-tabs-nav {
  display: flex !important;
  gap: 2px !important;
  min-width: 0 !important;
  width: 100% !important;
}
body[data-theme="momentum"] .contact-detail-tab-btn,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn,
body[data-theme="momentum"] #projectsWrap .project-tab.contact-detail-tab-btn {
  padding: 7px 14px !important;
  min-height: 40px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  border: none !important;
  border-radius: 9px !important;
  background: transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 2px !important;
  transition: background 120ms ease, color 120ms ease !important;
}
body[data-theme="momentum"] .contact-detail-tabs-nav > .contact-detail-tab-btn:last-child,
body[data-theme="momentum"] .contact-detail-tabs-header > .contact-detail-tab-btn:last-child {
  margin-right: 0 !important;
}
body[data-theme="momentum"] .contact-detail-tab-btn:hover,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn:hover,
body[data-theme="momentum"] #projectsWrap .project-tab.contact-detail-tab-btn:hover {
  background: rgba(255, 255, 255, 0.65) !important;
  color: #1e293b !important;
}
body[data-theme="momentum"] .contact-detail-tab-btn.is-active,
body[data-theme="momentum"] .contact-detail-tab-btn.active,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.is-active,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.active,
body[data-theme="momentum"] #projectsWrap .project-tab.contact-detail-tab-btn.is-active,
body[data-theme="momentum"] #projectsWrap .project-tab.contact-detail-tab-btn.active {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.12),
    0 0 0 0.5px rgba(15, 23, 42, 0.08) !important;
}
body[data-theme="momentum"] .contact-detail-tab-count,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-count,
body[data-theme="momentum"] #projectsWrap .project-tab.contact-detail-tab-btn .contact-detail-tab-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  margin-left: 5px !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  background: rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
}
body[data-theme="momentum"] .contact-detail-tab-btn.is-active .contact-detail-tab-count,
body[data-theme="momentum"] .contact-detail-tab-btn.active .contact-detail-tab-count,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.is-active .contact-detail-tab-count,
body[data-theme="momentum"] #detailPanel .contact-detail-tab-btn.active .contact-detail-tab-count,
body[data-theme="momentum"] #projectsWrap .project-tab.contact-detail-tab-btn.is-active .contact-detail-tab-count,
body[data-theme="momentum"] #projectsWrap .project-tab.contact-detail-tab-btn.active .contact-detail-tab-count {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}

/* Keep legacy list-view gmail tabs hidden in Contacts list mode. */
body[data-theme="momentum"] .app-shell.contacts-v2-view .gmail-tab[data-tab="deals"],
body[data-theme="momentum"] .app-shell.contacts-v2-view .gmail-tab[data-tab="tasks"],
body[data-theme="momentum"] .app-shell.contacts-v2-view .gmail-tab[data-tab="calendar"] {
  display: none !important;
}

/* Failsafe for contact detail tabs when theme attrs are delayed/missing. */
#detailPanel .contact-detail-tabs-header {
  background: #eceff5 !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  padding: 4px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  gap: 2px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
#detailPanel .contact-detail-tabs-header::-webkit-scrollbar {
  display: none !important;
}
#detailPanel .contact-detail-tabs-nav {
  display: flex !important;
  gap: 2px !important;
  min-width: 0 !important;
  width: 100% !important;
}
#detailPanel .contact-detail-tab-btn {
  padding: 7px 14px !important;
  min-height: 40px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  border: none !important;
  border-radius: 9px !important;
  background: transparent !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 2px !important;
}
#detailPanel .contact-detail-tabs-nav > .contact-detail-tab-btn:last-child {
  margin-right: 0 !important;
}
#detailPanel .contact-detail-tab-btn:hover {
  background: rgba(255, 255, 255, 0.65) !important;
  color: #1e293b !important;
}
#detailPanel .contact-detail-tab-btn.is-active,
#detailPanel .contact-detail-tab-btn.active {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.12),
    0 0 0 0.5px rgba(15, 23, 42, 0.08) !important;
}

/* Authoritative: contact detail tabs use project segmented style exactly. */
#detailPanel .contact-detail-tabs-header.project-detail-tabs-header {
  background: #eceff5 !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  padding: 4px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  gap: 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
#detailPanel .contact-detail-tabs-nav.project-detail-tabs-nav {
  display: flex !important;
  gap: 2px !important;
  min-width: 0 !important;
  width: 100% !important;
}
#detailPanel .contact-detail-tab-btn.project-tab {
  padding: 7px 14px !important;
  min-height: 40px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  border: none !important;
  border-radius: 9px !important;
  background: transparent !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-right: 2px !important;
}
#detailPanel .contact-detail-tabs-nav.project-detail-tabs-nav > .contact-detail-tab-btn.project-tab:last-child {
  margin-right: 0 !important;
}
#detailPanel .contact-detail-tab-btn.project-tab:hover {
  background: rgba(255, 255, 255, 0.65) !important;
  color: #1e293b !important;
}
#detailPanel .contact-detail-tab-btn.project-tab.is-active,
#detailPanel .contact-detail-tab-btn.project-tab.active {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.12),
    0 0 0 0.5px rgba(15, 23, 42, 0.08) !important;
}

/* Final lock: contact detail tabs mirror Projects exactly. */
body[data-theme="momentum"] #detailPanel .project-detail-tabs-header {
  background: #eceff5 !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  padding: 4px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  gap: 2px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
body[data-theme="momentum"] #detailPanel .project-detail-tabs-header::-webkit-scrollbar {
  display: none !important;
}
body[data-theme="momentum"] #detailPanel .project-detail-tabs-nav {
  display: flex !important;
  gap: 2px !important;
  min-width: 0 !important;
  width: 100% !important;
}
body[data-theme="momentum"] #detailPanel .project-tab.contact-detail-tab-btn {
  padding: 7px 14px !important;
  min-height: 40px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  border: none !important;
  border-radius: 9px !important;
  background: transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 0 !important;
}
body[data-theme="momentum"] #detailPanel .project-detail-tabs-nav .project-tab.contact-detail-tab-btn + .project-tab.contact-detail-tab-btn {
  margin-left: 2px !important;
}
body[data-theme="momentum"] #detailPanel .project-tab.contact-detail-tab-btn:hover {
  background: rgba(255, 255, 255, 0.65) !important;
  color: #1e293b !important;
}
body[data-theme="momentum"] #detailPanel .project-tab.contact-detail-tab-btn.is-active,
body[data-theme="momentum"] #detailPanel .project-tab.contact-detail-tab-btn.active {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.12),
    0 0 0 0.5px rgba(15, 23, 42, 0.08) !important;
}

/* Project stages (Momentum) */
body[data-theme="momentum"] .project-stage-pill-inline,
body[data-theme="momentum"] .project-stage-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--stage-color, #64748b) 45%, transparent);
  background: color-mix(in srgb, var(--stage-color, #64748b) 14%, #ffffff);
  color: color-mix(in srgb, var(--stage-color, #64748b) 70%, #111827);
}

body[data-theme="momentum"] .project-stage-board {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 18px;
}
body[data-theme="momentum"] .project-stage-board-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 14px;
  align-items: start;
}
body[data-theme="momentum"] .project-stage-column {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
body[data-theme="momentum"] .project-stage-column.is-drop-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
body[data-theme="momentum"] .project-stage-column-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
body[data-theme="momentum"] .project-stage-column-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
body[data-theme="momentum"] .project-stage-column-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
body[data-theme="momentum"] .project-stage-column-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
}
body[data-theme="momentum"] .project-stage-column-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  min-height: 140px;
}
body[data-theme="momentum"] .project-stage-card {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface-1);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  transition: box-shadow 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
body[data-theme="momentum"] .project-stage-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
body[data-theme="momentum"] .project-stage-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
body[data-theme="momentum"] .project-stage-card-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
body[data-theme="momentum"] .project-stage-card-foot {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body[data-theme="momentum"] .project-stage-progress {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
body[data-theme="momentum"] .project-stage-empty {
  border: 1px dashed var(--border);
  color: var(--text-tertiary);
  border-radius: 8px;
  font-size: 12px;
  padding: 12px;
  text-align: center;
}

/* ── No double bottom border on Emails, Phones, Addresses, Social ── */
body[data-theme="momentum"] #detailPanel .contact-field-group .detailRow.multi-field-detail-row,
body[data-theme="momentum"] #detailPanel .contact-field-group .multi-field-detail-row {
  border-bottom: none !important;
}
body[data-theme="momentum"] #detailPanel .contact-field-group > .detailRow:last-child,
body[data-theme="momentum"] #detailPanel .contact-field-group > .contact-field-row:last-child,
body[data-theme="momentum"] #detailPanel .contact-field-group .multi-field-detail-row:last-child,
body[data-theme="momentum"] #detailPanel .contact-field-group .detailRow:last-child {
  border-bottom: none !important;
}
/* Last email/phone/address/social entry in the list: no bottom border so card border is the only line */
body[data-theme="momentum"] #detailPanel .contact-field-group .detail-multi-field-list .detail-multi-field-entry:last-child,
body[data-theme="momentum"] #detailPanel .contact-field-group .detail-multi-field-entry:last-child {
  border-bottom: none !important;
}

/* ─────────────────────────────────────────────────────────────
   TAGS & NEXT ACTION — Momentum style (clean, modern)
───────────────────────────────────────────────────────────── */

/* Tag picker container */
body[data-theme="momentum"] #detailPanel .detailRow .tagPicker {
  padding: 0 !important;
  min-width: 0 !important;
}

body[data-theme="momentum"] #detailPanel .detailRow .tag-input-area {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 10px 14px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

body[data-theme="momentum"] #detailPanel .detailRow .tag-input-area:hover {
  background: #f1f5f9 !important;
  border-color: rgba(99,102,241,0.2) !important;
  box-shadow: 0 0 0 1px rgba(99,102,241,0.08) !important;
}

/* Selected tag chips — soft indigo pill */
body[data-theme="momentum"] #detailPanel .detailRow .tag-chip-selected {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: #4338ca !important;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
  border: 1px solid rgba(99,102,241,0.25) !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(99,102,241,0.06) !important;
  transition: background 140ms ease, border-color 140ms ease, transform 100ms ease !important;
}

body[data-theme="momentum"] #detailPanel .detailRow .tag-chip-selected:hover {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%) !important;
  border-color: rgba(99,102,241,0.4) !important;
}

/* Remove (X) button inside tag chip */
body[data-theme="momentum"] #detailPanel .detailRow .tag-chip-selected button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  margin-left: 2px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: rgba(255,255,255,0.7) !important;
  color: #6366f1 !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: background 120ms ease, color 120ms ease !important;
}

body[data-theme="momentum"] #detailPanel .detailRow .tag-chip-selected button:hover {
  background: #ffffff !important;
  color: #4338ca !important;
}

/* "+" / "Select tags..." add indicator */
body[data-theme="momentum"] #detailPanel .detailRow .tag-input-area > span:last-of-type {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #6366f1 !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  transition: background 120ms ease, color 120ms ease !important;
}

body[data-theme="momentum"] #detailPanel .detailRow .tag-input-area > span:last-of-type:hover {
  background: rgba(99,102,241,0.08) !important;
  color: #4338ca !important;
}

/* Next Action pill — momentum accent pill */
body[data-theme="momentum"] #detailPanel .contact-next-action-detail-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: #4338ca !important;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
  border: 1px solid rgba(99,102,241,0.25) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  max-width: 100% !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 3px rgba(99,102,241,0.08) !important;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 100ms ease !important;
}

body[data-theme="momentum"] #detailPanel .contact-next-action-detail-pill:hover {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%) !important;
  border-color: rgba(99,102,241,0.4) !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.15) !important;
  transform: translateY(-1px) !important;
}

body[data-theme="momentum"] #detailPanel .contact-next-action-detail-pill:active {
  transform: translateY(0) !important;
}

/* Force rounded corners on contact detail: pane and header (win over any other rule) */
body[data-theme="momentum"] .app-shell[data-view="contacts"] #detailPanel.detailPane {
  border-radius: 14px !important;
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  overflow: hidden !important;
}
body[data-theme="momentum"] #detailPanel .detailHeader {
  border-radius: 14px !important;
}

/* ─────────────────────────────────────────────────────────────
   § 53. DOCUMENT COMPOSER (MOMENTUM)
   Keep composer controls visually aligned with momentum tokens.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .composer-modal {
  background: var(--mm-surface) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  box-shadow: var(--mm-shadow-md) !important;
}

body[data-theme="momentum"] .composer-modal .modalHead {
  background: var(--mm-surface) !important;
  border-bottom: 1px solid var(--mm-border) !important;
}

body[data-theme="momentum"] .composer-modal .modalTitle {
  color: var(--mm-text-primary) !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar {
  background: var(--mm-bg) !important;
  border-bottom: 1px solid var(--mm-border) !important;
  padding: var(--mm-sp-3) var(--mm-sp-4) !important;
  gap: var(--mm-sp-2) !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar .btn {
  background: var(--mm-surface) !important;
  border: 1px solid var(--mm-border) !important;
  color: var(--mm-text-primary) !important;
  border-radius: var(--mm-radius-sm) !important;
  transition: transform var(--mm-tr), box-shadow var(--mm-tr), background var(--mm-tr) !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar .btn:not(.primary):hover {
  background: #e5e7eb !important;
  color: #1e293b !important;
  transform: translateY(-1px) !important;
}
body[data-theme="momentum"] .composer-modal .composer-toolbar .btn:not(.primary):hover svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar .btn:not(.primary):focus-visible {
  background: #e5e7eb !important;
  color: #1e293b !important;
  box-shadow: var(--mm-focus-ring) !important;
  outline: none !important;
}
body[data-theme="momentum"] .composer-modal .composer-toolbar .btn.primary:focus-visible {
  box-shadow: var(--mm-focus-ring) !important;
  outline: none !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar .btn.primary {
  background: var(--mm-accent) !important;
  color: #ffffff !important;
  border-color: var(--mm-accent) !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar .btn.primary:hover {
  background: #5558e3 !important;
}

/* Save As button: match Save button (white background) */
body[data-theme="momentum"] .composer-modal #saveAsMenuBtn {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
}
body[data-theme="momentum"] .composer-modal #saveAsMenuBtn:hover:not(:disabled),
body[data-theme="momentum"] .composer-modal #saveAsMenuBtn:focus-visible:not(:disabled) {
  background: #e5e7eb !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar-dropdown.open .composer-toolbar-trigger {
  background: #e5e7eb !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
body[data-theme="momentum"] .composer-modal .composer-toolbar-dropdown.open .composer-toolbar-trigger svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar-dropdown-panel {
  background: var(--mm-surface) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  box-shadow: var(--mm-shadow-md) !important;
}

body[data-theme="momentum"] .composer-modal #saveAsMenuBtn + .composer-toolbar-dropdown-panel {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18) !important;
}

body[data-theme="momentum"] .composer-modal #saveAsDocumentBtn,
body[data-theme="momentum"] .composer-modal #saveAsEmailBtn {
  background: transparent !important;
  color: #0f172a !important;
}

body[data-theme="momentum"] .composer-modal #saveAsDocumentBtn:hover,
body[data-theme="momentum"] .composer-modal #saveAsEmailBtn:hover,
body[data-theme="momentum"] .composer-modal #saveAsDocumentBtn:focus-visible,
body[data-theme="momentum"] .composer-modal #saveAsEmailBtn:focus-visible {
  background: #eff6ff !important;
  color: #0f172a !important;
  outline: none !important;
}

body[data-theme="momentum"] .composer-modal #saveAsDocumentBtn span:last-child,
body[data-theme="momentum"] .composer-modal #saveAsEmailBtn span:last-child {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body[data-theme="momentum"] .composer-modal .composer-dropdown-heading {
  color: var(--mm-text-muted) !important;
  border-bottom-color: var(--mm-border-subtle) !important;
}

body[data-theme="momentum"] .composer-modal .composer-action-item {
  border-radius: var(--mm-radius-sm) !important;
}

body[data-theme="momentum"] .composer-modal .composer-action-item:hover {
  background: var(--hover-bg) !important;
  transform: translateY(-2px) !important;
}

body[data-theme="momentum"] .composer-modal .composer-action-item:focus-visible {
  box-shadow: var(--mm-focus-ring) !important;
  outline: none !important;
}

body[data-theme="momentum"] .composer-modal .composer-action-item:hover .composer-action-item-icon {
  transform: scale(1.08) !important;
}

body[data-theme="momentum"] .composer-modal .composer-action-item-label {
  color: var(--mm-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

body[data-theme="momentum"] .composer-modal .composer-action-item-icon {
  transition: transform var(--mm-tr) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* ─────────────────────────────────────────────────────────────
   § 54. CAMPAIGN MANAGER TABS (MOMENTUM)
   Ensure all campaign tab groups share one visual system.
───────────────────────────────────────────────────────────── */
body[data-theme="momentum"] .campaign-manager-modal {
  border: 1px solid var(--mm-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--mm-shadow-md) !important;
  background: var(--mm-surface) !important;
}

body[data-theme="momentum"] .campaign-manager-modal .modalHead {
  background: var(--mm-surface) !important;
  border-bottom: 1px solid var(--mm-border) !important;
}

body[data-theme="momentum"] .campaign-manager-modal .campaign-tabs {
  background: #eef2f7 !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 999px !important;
  padding: 3px !important;
  gap: 3px !important;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04) !important;
}

/* Header tab rail gets slightly stronger treatment for primary nav hierarchy. */
body[data-theme="momentum"] .campaign-manager-modal .modalHead-actions .campaign-tabs {
  background: #e8eef8 !important;
  border-color: rgba(99, 102, 241, 0.20) !important;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

body[data-theme="momentum"] .campaign-manager-modal .campaign-tab {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  color: var(--mm-text-muted) !important;
  font-weight: var(--mm-fw-semibold) !important;
  letter-spacing: 0.01em !important;
  transition: background var(--mm-tr), color var(--mm-tr), box-shadow var(--mm-tr), border-color var(--mm-tr), transform var(--mm-tr) !important;
}

body[data-theme="momentum"] .campaign-manager-modal .campaign-tab:hover {
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--mm-text-secondary) !important;
}

body[data-theme="momentum"] .campaign-manager-modal .campaign-tab:active {
  transform: translateY(1px) !important;
}

body[data-theme="momentum"] .campaign-manager-modal .campaign-tab:focus-visible {
  outline: none !important;
  box-shadow: var(--mm-focus-ring) !important;
}

body[data-theme="momentum"] .campaign-manager-modal .campaign-tab.active {
  background: var(--mm-surface) !important;
  color: var(--mm-accent) !important;
  border-color: rgba(99, 102, 241, 0.26) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(99, 102, 241, 0.10) !important;
}

/* Primary tabs (Send/Drip/Lists/Calendar/History/Help) */
body[data-theme="momentum"] .campaign-manager-modal .campaign-tab[data-tab] {
  height: 34px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

body[data-theme="momentum"] .campaign-manager-modal .campaign-tab[data-tab].active {
  background: linear-gradient(180deg, #ffffff 0%, #f4f6ff 100%) !important;
  border-color: rgba(99, 102, 241, 0.38) !important;
  color: #4338ca !important;
  font-weight: var(--mm-fw-bold) !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.22), 0 0 0 1px rgba(99, 102, 241, 0.14) !important;
}

/* Secondary tab sets (compose mode, send mode, calendar day/week/month) */
body[data-theme="momentum"] .campaign-manager-modal .campaign-tab[data-composemode],
body[data-theme="momentum"] .campaign-manager-modal .campaign-tab[data-sendmode],
body[data-theme="momentum"] .campaign-manager-modal .campaign-tab[data-cal-view] {
  height: 30px !important;
  font-size: 12px !important;
  padding: 0 11px !important;
}