/* ============================================================================
 * CRM app styles
 * Evicted from the two JS-injected <style> blocks in crm-app.js (UI-unification
 * Phase 1, Step 2). Token-swept per spec §4: hardcoded hexes/rgba → semantic /
 * categorical / overlay / surface tokens. Loaded via a <link> in index.html.
 * ========================================================================== */

/* ── CRM Stats Cards ── */
.crm-stats { display:flex; gap:var(--space-3); margin:var(--space-2) var(--space-4) var(--space-4); flex-wrap:wrap; }
.crm-stat-card {
  flex:1; min-width:110px; padding:14px 18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  text-align:center; position:relative; overflow:hidden;
}
.crm-stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--stat-color, var(--accent));
}
.crm-stat-value { font-size:24px; font-weight:700; color:var(--text); line-height:1.2; }
.crm-stat-label { font-size:var(--fs-xs); color:var(--text-dim); margin-top:var(--space-1); letter-spacing:.02em; }

/* ── CRM Icon Buttons (borderless, table-cell action links: web/mail/phone/map) ──
 * The OscarUI.iconButton component (.ou-icon-btn) covers DOM-built sub-page
 * actions; this `.crm-icon-btn` family is the string-HTML variant used inside
 * table action cells where a colored anchor (<a>/<span>) is needed. */
.crm-icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:var(--radius); border:none;
  background:transparent; color:var(--text-dim); cursor:pointer;
  transition: background .15s, color .15s;
}
.crm-icon-btn:hover { background:var(--overlay-2); color:var(--text); }
.crm-icon-btn svg { width:15px; height:15px; }
.crm-icon-btn.crm-del:hover { background:var(--danger-tint); color:var(--danger); }
.crm-icon-btn.crm-inactive { color:var(--overlay-3); cursor:default; }
.crm-icon-btn.crm-inactive:hover { background:transparent; color:var(--overlay-3); }
.crm-icon-btn.crm-web { color:var(--info); }
.crm-icon-btn.crm-web:hover { background:var(--info-tint); color:var(--accent-hover); }
.crm-icon-btn.crm-phone { color:var(--success); }
.crm-icon-btn.crm-phone:hover { background:var(--success-tint); color:var(--success); }
.crm-icon-btn.crm-mail { color:var(--warning); }
.crm-icon-btn.crm-mail:hover { background:var(--warning-tint); color:var(--warning); }
.crm-icon-btn.crm-enrich { color:color-mix(in srgb, var(--c4) 70%, transparent); }
.crm-icon-btn.crm-enrich:hover { color:var(--c4); }
.crm-icon-btn.crm-map { color:color-mix(in srgb, var(--c2) 70%, transparent); }
.crm-icon-btn.crm-map:hover { color:var(--c2); }
.crm-copied { color:var(--success) !important; }

/* ── CRM Actions Cell ── */
.crm-actions { display:flex; gap:2px; align-items:center; justify-content:flex-end; }

/* ── CRM Table Responsive ── */
.ou-table-wrap { overflow-x:hidden; }
.crm-org-name { font-weight:500; color:var(--text); }
.crm-org-industry { color:var(--text-dim); font-size:var(--fs-sm); }
.crm-org-row-info { display:flex; flex-direction:column; gap:1px; min-width:0; }
@media (max-width: 900px) {
  .crm-stats { margin:var(--space-2) var(--space-2) var(--space-3); gap:var(--space-2); }
  .crm-stat-card { min-width:70px; padding:10px 8px; }
  .crm-stat-value { font-size:var(--fs-xl); }
  .ou-table { font-size:var(--fs-sm); }
  .ou-table th, .ou-table td { padding:8px 8px; }
  .crm-hide-narrow { display:none !important; }
}
@media (max-width: 480px) {
  .crm-stat-card { min-width:60px; padding:8px 6px; }
  .crm-stat-value { font-size:16px; }
  .crm-stat-label { font-size:10px; }
  .ou-table th { display:none; }
}

/* ── CRM Tabs Responsive ── */
.ou-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; white-space:nowrap; }
.ou-tabs::-webkit-scrollbar { display:none; }

/* ── CRM Tab drag-to-reorder (P12) ── */
.ou-tabs .ou-tab.crm-tab-draggable { cursor:grab; }
.ou-tabs .ou-tab.crm-tab-draggable:active { cursor:grabbing; }
.ou-tabs .ou-tab.crm-tab-dragging { opacity:.45; }
.ou-tabs .ou-tab.crm-tab-dragover { box-shadow:inset 2px 0 0 var(--accent); }
@media (max-width: 480px) {
  .ou-tabs .ou-tab { padding:8px 10px; font-size:var(--fs-sm); }
  .panel-body { padding:0 !important; }
}

/* ── Campaign Table Responsive ── */
@media (max-width: 600px) {
  .ou-table td, .ou-table th { padding:6px 6px; font-size:var(--fs-xs); }
  .ou-badge { font-size:10px; padding:2px 6px; }
  .ou-btn { padding:4px 8px; font-size:var(--fs-xs); }
  .ou-btn-sm { padding:3px 6px; font-size:10px; }
}

/* ── Activities Compact Mobile ── */
@media (max-width: 600px) {
  .crm-stats { margin:6px var(--space-1) var(--space-2); gap:var(--space-1); }
  .crm-stat-card { min-width:50px; padding:6px 4px; border-radius:var(--radius); }
  .crm-stat-value { font-size:var(--fs-lg); }
  .crm-stat-label { font-size:9px; }
}

/* ── CRM Activity Meta ── */
.crm-act-meta {
  display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:3px;
  font-size:var(--fs-xs); color:var(--text-dim); align-items:center;
}
.crm-act-meta-item {
  display:inline-flex; align-items:center; gap:3px; white-space:nowrap;
}
.crm-act-meta-item svg { opacity:.6; flex-shrink:0; }
.crm-act-meta-spacer { flex:1; }

/* ── CRM Enrichment score dot (table) ── */
.crm-score-dot {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:var(--radius-pill); font-size:9px; font-weight:700;
  vertical-align:middle; margin-left:var(--space-1); line-height:1;
}
.crm-score-dot.s5 { background:var(--success-tint); color:var(--success); }
.crm-score-dot.s4 { background:var(--info-tint); color:var(--info); }
.crm-score-dot.s3 { background:var(--warning-tint); color:var(--warning); }
.crm-score-dot.s2 { background:color-mix(in srgb, var(--c3) 20%, transparent); color:var(--c3); }
.crm-score-dot.s1 { background:var(--danger-tint); color:var(--danger); }

/* ── CRM Enrichment ── */
.crm-enrich-panel {
  margin:var(--space-4) 0 var(--space-2); padding:14px 16px; border-radius:var(--radius-lg);
  background:var(--overlay-1); border:1px solid var(--overlay-2);
}
.crm-enrich-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.crm-enrich-header h4 { margin:0; font-size:var(--fs-md); font-weight:600; color:var(--text); letter-spacing:.3px; text-transform:uppercase; }
.crm-enrich-score {
  display:inline-flex; align-items:center; gap:var(--space-1); padding:2px 10px;
  border-radius:12px; font-size:var(--fs-xs); font-weight:700;
}
.crm-enrich-score.s5 { background:var(--success-tint); color:var(--success); }
.crm-enrich-score.s4 { background:var(--info-tint); color:var(--info); }
.crm-enrich-score.s3 { background:var(--warning-tint); color:var(--warning); }
.crm-enrich-score.s2 { background:color-mix(in srgb, var(--c3) 13%, transparent); color:var(--c3); }
.crm-enrich-score.s1 { background:var(--danger-tint); color:var(--danger); }
.crm-enrich-summary { font-size:var(--fs-md); line-height:1.5; color:var(--text-dim); margin-bottom:10px; }
.crm-enrich-section { margin-top:10px; }
.crm-enrich-section-title { font-size:var(--fs-xs); font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.crm-enrich-tags { display:flex; flex-wrap:wrap; gap:var(--space-1); }
.crm-enrich-tag {
  padding:3px 10px; border-radius:12px; font-size:var(--fs-xs);
  background:var(--overlay-1); color:var(--text-dim); border:1px solid var(--overlay-2);
}
.crm-enrich-kv { font-size:var(--fs-sm); color:var(--text-dim); margin:3px 0; }
.crm-enrich-kv strong { color:var(--text); font-weight:500; }
.crm-enrich-raw-toggle {
  display:inline-flex; align-items:center; gap:var(--space-1); margin-top:var(--space-2);
  font-size:var(--fs-xs); color:var(--accent); cursor:pointer; border:none; background:none; padding:0;
}
.crm-enrich-raw-toggle:hover { text-decoration:underline; }
.crm-enrich-raw {
  margin-top:var(--space-2); padding:10px 12px; border-radius:var(--radius);
  background:rgba(0,0,0,.2); border:1px solid var(--overlay-1);
  font-size:var(--fs-xs); line-height:1.5; color:var(--text-dim);
  max-height:300px; overflow-y:auto; white-space:pre-wrap; word-break:break-word;
  display:none;
}
.crm-enrich-locations { font-size:var(--fs-sm); color:var(--text-dim); }
.crm-enrich-locations div { margin:2px 0; }
.crm-enrich-people-list { font-size:var(--fs-sm); color:var(--text-dim); }
.crm-enrich-people-list div { margin:2px 0; }
.crm-enrich-social { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.crm-enrich-social a {
  font-size:var(--fs-xs); color:var(--accent); text-decoration:none; opacity:.8;
}
.crm-enrich-social a:hover { opacity:1; text-decoration:underline; }
.crm-enrich-empty {
  text-align:center; padding:20px; color:var(--text-dim); font-size:var(--fs-sm);
}
.crm-enrich-date { font-size:var(--fs-xs); color:var(--text-dim); opacity:.6; margin-top:var(--space-2); }

/* ── CRM Bulk Actions ──
 * String-HTML bulk bar with per-type action buttons (delete/move/enrich/status).
 * Kept CRM-local rather than forced onto OscarUI.bulkBar to preserve the
 * type-specific action sets (parity). */
.crm-bulk-bar {
  display:flex; align-items:center; gap:10px; padding:8px 16px;
  background:var(--info-tint); border:1px solid color-mix(in srgb, var(--info) 20%, transparent);
  border-radius:var(--radius-lg); margin:var(--space-2) var(--space-4); font-size:var(--fs-md); color:var(--text);
  animation: crm-bulk-in .15s ease;
}
@keyframes crm-bulk-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.crm-bulk-bar .crm-bulk-count { font-weight:600; color:var(--info); white-space:nowrap; }
.crm-bulk-bar .crm-bulk-actions { display:flex; gap:6px; margin-left:auto; }

/* ── CRM checkbox (row-select) ── */
.crm-cb {
  appearance:none; -webkit-appearance:none;
  width:16px; height:16px; border:1.5px solid var(--overlay-3);
  border-radius:var(--radius-sm); background:var(--overlay-1); cursor:pointer;
  flex-shrink:0; position:relative; transition:all .15s; margin:0;
}
.crm-cb:hover { border-color:var(--border-strong); background:var(--overlay-2); }
.crm-cb:checked { background:var(--accent); border-color:var(--accent); }
.crm-cb:checked::after {
  content:""; position:absolute; left:4px; top:1px;
  width:5px; height:9px; border:solid var(--text-on-accent); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.crm-cb-cell { display:flex; align-items:center; justify-content:center; width:32px; }

/* ── CRM Settings Nav ── */
.crm-settings-nav { display:flex; flex-direction:column; gap:2px; }
.crm-settings-nav-item {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-radius:var(--radius-lg); cursor:pointer; transition: background .15s;
  border:1px solid transparent;
}
.crm-settings-nav-item:hover { background:var(--overlay-1); border-color:var(--border); }
.crm-settings-nav-item svg { width:18px; height:18px; color:var(--text-dim); flex-shrink:0; }
.crm-settings-nav-label { flex:1; }
.crm-settings-nav-label span:first-child { display:block; font-size:var(--fs-lg); font-weight:500; color:var(--text); }
.crm-settings-nav-label span:last-child { display:block; font-size:var(--fs-xs); color:var(--text-dim); margin-top:2px; }
.crm-settings-nav-arrow { width:16px; height:16px; color:var(--text-dim); flex-shrink:0; }

/* ── CRM Settings: reset tab order (P12) ── */
.crm-tab-reset-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border);
}
.crm-tab-reset-hint { font-size:var(--fs-xs); color:var(--text-dim); flex:1; min-width:180px; }

/* ── CRM Stats tab (P11) ── */
.crm-stats-tab { padding-top:var(--space-2); }
.crm-stats-tab .ou-section-header { margin:var(--space-3) var(--space-4) 0; }
.crm-settings-biz-badge {
  display:inline-block; padding:3px 10px; border-radius:var(--radius); font-size:var(--fs-xs); font-weight:500;
  background:var(--accent-tint); color:var(--accent); margin-bottom:12px;
}
.crm-tag-list { display:flex; flex-wrap:wrap; gap:6px; margin:var(--space-2) 0; }
.crm-tag {
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  font-size:var(--fs-md); color:var(--text);
}
.crm-tag-del {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:var(--radius-pill); border:none;
  background:transparent; color:var(--text-dim); cursor:pointer; font-size:var(--fs-lg); line-height:1;
}
.crm-tag-del:hover { background:var(--danger-tint); color:var(--danger); }

/* ── Org list-row tag badges (smaller than the detail-pane .crm-tag chips) ── */
.crm-org-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.crm-org-tag {
  display:inline-flex; align-items:center; padding:1px 7px; border-radius:var(--radius-pill);
  background:var(--overlay-1); color:var(--text-dim); font-size:var(--fs-xs); line-height:1.5;
  white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis;
}
.crm-org-tag-more { font-weight:600; }

/* Org-list toolbar tag filter */
.crm-tag-filter { max-width:160px; }

/* ── W11: custom-field value editors on detail views (org/person/project) ── */
.crm-cf-block { margin-top:var(--space-2); }
.crm-cf-row { display:flex; flex-direction:column; gap:4px; padding:6px 0; }
.crm-cf-label { font-size:var(--fs-xs); font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.02em; }
.crm-cf-control { display:flex; flex-direction:column; gap:4px; }
.crm-cf-input { max-width:320px; padding:6px 10px; font-size:var(--fs-md); }
.crm-cf-empty { font-size:var(--fs-sm); color:var(--text-dim); }
.crm-cf-file { display:inline-flex; align-items:center; gap:8px; max-width:100%; }
.crm-cf-file-thumb { width:36px; height:36px; object-fit:cover; border-radius:6px; border:1px solid var(--border); cursor:pointer; }
.crm-cf-file-name {
  font-size:var(--fs-md); color:var(--accent); text-decoration:none;
  max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.crm-cf-file-name:hover { text-decoration:underline; }
.crm-cf-file-meta { font-size:var(--fs-xs); color:var(--text-dim); }
.crm-cf-upload {
  background:var(--accent-tint); color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:6px; padding:4px 10px; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px; width:max-content;
}

/* ── Org detail Files tab (cloned from the tasks attachment UI) ── */
.crm-file-upload-btn {
  background:var(--accent-tint); color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:6px; padding:4px 10px; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
}
.crm-file-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; margin:8px 0; }
.crm-file-grid:empty { display:none; }
.crm-file-thumb {
  position:relative; aspect-ratio:1/1; border-radius:6px; overflow:hidden;
  background:var(--overlay-1); border:1px solid var(--border);
}
.crm-file-thumb img { width:100%; height:100%; object-fit:cover; cursor:pointer; display:block; }
.crm-file-thumb-del {
  position:absolute; top:4px; right:4px; width:20px; height:20px; border:none; cursor:pointer;
  border-radius:var(--radius-pill); background:rgba(0,0,0,.55); color:#fff; font-size:var(--fs-md); line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.crm-file-thumb-del:hover { background:var(--danger); }
.crm-file-list { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.crm-file-none { font-size:var(--fs-sm); color:var(--text-dim); font-style:italic; padding:4px 0; }
.crm-file-row {
  display:flex; align-items:center; gap:10px; padding:6px;
  background:var(--surface); border:1px solid var(--border); border-radius:6px;
}
.crm-file-icon { font-size:22px; opacity:.6; flex-shrink:0; width:32px; text-align:center; }
.crm-file-info { flex:1; min-width:0; }
.crm-file-name { display:block; color:var(--text); font-size:var(--fs-md); font-weight:500; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.crm-file-name:hover { color:var(--accent); text-decoration:underline; }
.crm-file-meta { font-size:var(--fs-xs); color:var(--text-dim); display:flex; align-items:center; gap:6px; min-width:0; }
.crm-file-meta > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* W3/P5 uploader initials chip */
.crm-file-uploader-chip {
  flex-shrink:0; width:18px; height:18px; border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; letter-spacing:.02em;
  background:var(--accent-tint); color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.crm-file-del { background:none; border:none; color:var(--text-dim); cursor:pointer; padding:4px 8px; font-size:var(--fs-lg); flex-shrink:0; }
.crm-file-del:hover { color:var(--danger); }
.crm-file-drop {
  margin-top:6px; padding:12px; border:1px dashed var(--border); border-radius:8px;
  text-align:center; font-size:var(--fs-sm); color:var(--text-dim); transition:all .2s;
}
.crm-file-drop.drag { background:var(--accent-tint); border-color:var(--accent); color:var(--text); }

/* ── W3 Files tab: header + gallery sections ── */
.crm-files-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.crm-files-title { font-size:var(--fs-lg); font-weight:600; color:var(--text); flex-shrink:0; }
.crm-files-search { flex:1; min-width:0; }
.crm-files-search input { width:100%; }
.crm-files-section { margin-bottom:10px; }
.crm-files-section-head {
  font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-dim); margin:4px 0 6px;
}
/* U1 (mnmnx2): Files tab two columns — Documents (left) + Images gallery (right), 50/50.
   Reflows to a single column (documents first) on a narrow panel via container query. */
.crm-files-host { container-type:inline-size; }
.crm-files-grid { display:flex; flex-direction:column; gap:18px; }
@container (min-width: 620px) {
  .crm-files-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
}
.crm-files-col { min-width:0; }
.crm-file-col-empty { padding:14px 4px; color:var(--text-dim); font-size:var(--fs-sm); font-style:italic; }

/* ── W3/P6 in-app file preview modal ── */
.crm-file-preview .ou-modal { width:min(920px, 94vw); max-width:94vw; display:flex; flex-direction:column; }
.crm-file-preview .ou-modal-body { padding:0; display:flex; flex-direction:column; min-height:0; }
.crm-file-preview-body { display:flex; flex-direction:column; min-height:0; }
.crm-file-preview-stage {
  flex:1; min-height:0; max-height:70vh; overflow:auto;
  background:var(--overlay-1); display:flex; align-items:flex-start; justify-content:center;
}
.crm-file-preview-loading { padding:40px; color:var(--text-dim); font-size:var(--fs-md); }
.crm-file-preview-img { max-width:100%; height:auto; display:block; margin:auto; object-fit:contain; }
.crm-file-preview-frame { width:100%; height:70vh; border:0; background:#fff; }
/* rendered docx / spreadsheet content — white page on any theme for readability */
.crm-file-preview-doc, .crm-file-preview-sheet {
  width:100%; box-sizing:border-box; padding:20px 24px; background:#fff; color:#111;
  font-size:var(--fs-md); line-height:1.5;
}
.crm-file-preview-doc img { max-width:100%; height:auto; }
.crm-file-preview-doc table, .crm-file-preview-sheet table { border-collapse:collapse; max-width:100%; }
.crm-file-preview-doc td, .crm-file-preview-doc th,
.crm-file-preview-sheet td, .crm-file-preview-sheet th { border:1px solid #ddd; padding:4px 8px; }
.crm-file-preview-sheet-name { font-weight:700; margin:12px 0 6px; font-size:var(--fs-sm); color:#333; }
.crm-file-preview-table-wrap { overflow-x:auto; max-width:100%; margin-bottom:8px; }
.crm-file-preview-fallback {
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:44px 20px; color:var(--text-dim); margin:auto;
}
.crm-file-preview-fallback-name { color:var(--text); font-weight:600; font-size:var(--fs-lg); word-break:break-word; }
.crm-file-preview-fallback-msg { font-size:var(--fs-sm); }
.crm-file-preview-bar {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; border-top:1px solid var(--border); flex-shrink:0;
}
.crm-file-preview-meta { font-size:var(--fs-sm); color:var(--text-dim); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 640px) {
  .crm-files-header { flex-wrap:wrap; }
  .crm-file-preview-frame, .crm-file-preview-stage { height:auto; max-height:64vh; }
}

.crm-cf-table { width:100%; border-collapse:collapse; }
.crm-cf-table th { text-align:left; padding:8px 12px; font-size:var(--fs-xs); color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); }
.crm-cf-table td { padding:8px 12px; font-size:var(--fs-md); color:var(--text); border-bottom:1px solid var(--overlay-1); }
.crm-cf-type { display:inline-block; padding:2px 8px; border-radius:var(--radius-sm); font-size:var(--fs-xs); background:var(--overlay-1); color:var(--text-dim); }

/* X3 (qf9z2k) custom-fields Settings — "add" form on top + one card per entity below */
.crm-cf-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:12px; }
.crm-cf-card-title { font-size:var(--fs-lg); font-weight:600; color:var(--text); margin-bottom:12px; }
.crm-cf-form-row { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
.crm-cf-fg { display:flex; flex-direction:column; gap:4px; }
.crm-cf-fg-grow { flex:1; min-width:140px; }
.crm-cf-lbl { font-size:var(--fs-xs); color:var(--text-dim); margin:0; }
.crm-cf-ctrl { min-width:120px; }
.crm-cf-form-row .ou-input { padding:6px 10px; font-size:var(--fs-md); }
.crm-cf-card .crm-cf-empty { padding:4px 2px 2px; }

/* X2 (qf9z2k) deal-detail: inline click-to-edit fields + labelled header stage/status pills */
.crm-detail-pills { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; padding:2px 0 12px; }
.crm-pill-group { display:flex; flex-direction:column; gap:3px; }
.crm-pill-label { font-size:var(--fs-xs); font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
.crm-detail-pill { min-width:120px; max-width:240px; }
/* Match the .ou-detail-row kv scale: label = --fs-sm (dim), value = --fs-md (text). */
.crm-inline-row { display:flex; align-items:baseline; gap:12px; padding:7px 0; border-bottom:1px solid var(--overlay-1); }
.crm-inline-label { flex:0 0 104px; font-size:var(--fs-sm); color:var(--text-dim); }
.crm-inline-val { flex:1 1 auto; min-width:0; }
.crm-inline-display { display:inline-block; min-width:60px; padding:2px 6px; margin:-2px -6px; border-radius:6px; font-size:var(--fs-md); color:var(--text); cursor:text; transition:background .12s, box-shadow .12s; word-break:break-word; }
.crm-inline-display:hover { background:var(--overlay-1); box-shadow:inset 0 0 0 1px var(--border); }
.crm-inline-empty { color:var(--text-dim); font-style:italic; }
.crm-inline-input { width:100%; max-width:340px; padding:5px 8px; font-size:var(--fs-md); }
textarea.crm-inline-input { min-height:70px; resize:vertical; }
/* Full-width inline field (Notes, Legal address): label above, value spans the card width. */
.crm-inline-full { flex-direction:column; align-items:stretch; gap:2px; }
.crm-inline-full .crm-inline-label { flex:none; }
.crm-inline-full .crm-inline-val { width:100%; }
.crm-inline-full .crm-inline-display { display:block; white-space:pre-wrap; min-width:0; margin:0; padding:4px 6px; }
.crm-inline-full textarea.crm-inline-input { max-width:none; }

/* Org Summary card — clean grouped sections (polish 2026-07-07): match the right-column
   cards; secondary blocks (Address / Bank details / Signees) collapse. */
.crm-sum-section { }
.crm-sum-head { display:flex; align-items:center; gap:6px; padding:12px 0 3px; }
.crm-sum-section:first-child .crm-sum-head { padding-top:2px; }
.crm-sum-title { font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.crm-sum-head-collapsible { cursor:pointer; user-select:none; border-radius:6px; margin:0 -6px; padding-left:6px; padding-right:6px; }
.crm-sum-head-collapsible:hover { background:var(--overlay-1); }
.crm-sum-head-collapsible:hover .crm-sum-title { color:var(--text); }
.crm-sum-chev { margin-left:auto; color:var(--text-dim); font-size:var(--fs-sm); line-height:1; }
/* Deal Details 2-column (feedback): fields left, Recent-activity timeline right. Reflows
   on the panel's actual width (container query) → stacks to one column when narrow. */
.crm-detail-cols { container-type:inline-size; }
@container (min-width: 620px) {
  .crm-detail-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:28px; align-items:start; }
}
.crm-detail-col-side { min-width:0; }
.crm-detail-col-side .crm-tl-cards { margin-top:2px; }

/* X4 (qf9z2k) dashboard Timeline/Meetings/Files/Emails/People cards reuse the Timeline
   tab's .crm-tl-card component (identical look + feel). Only the "View all" link is local. */
.crm-dash-viewall { margin-top:8px; background:none; border:none; color:var(--accent); font-size:var(--fs-sm); cursor:pointer; padding:2px 0; }
.crm-dash-viewall:hover { text-decoration:underline; }

/* Y1 (3j52nn) org Overview — 2-column: LEFT sidebar (Summary/Deals/People cards),
   RIGHT content cards. Reflows to one column on a narrow panel (container query). */
.crm-overview { container-type:inline-size; }
@container (min-width: 720px) {
  .crm-overview-grid { display:grid; grid-template-columns:minmax(340px,400px) minmax(0,1fr); gap:20px; align-items:start; }
}
.crm-ov-col-left { display:flex; flex-direction:column; gap:16px; min-width:0; }
.crm-ov-col-right { min-width:0; }
/* Align the Summary card top with the right-column cards: the right grid's own top margin
   pushed those cards ~12px lower than the Summary. Zero it inside the Overview. */
.crm-ov-col-right .crm-dash-grid { margin-top:0; }
/* Deals/People card rows + inline "+ add" (Y1 phase 1b) */
.crm-ov-add { display:flex; align-items:center; gap:6px; margin-top:8px; background:none; border:1px dashed var(--border); color:var(--text-dim); border-radius:8px; padding:6px 10px; font-size:var(--fs-sm); cursor:pointer; width:100%; justify-content:center; }
.crm-ov-add:hover { color:var(--accent); border-color:var(--accent); }
.crm-ov-row { display:flex; align-items:center; gap:10px; padding:7px 4px; border-radius:6px; cursor:pointer; }
.crm-ov-row:hover { background:var(--overlay-1); }
.crm-ov-row-main { flex:1 1 auto; min-width:0; }
.crm-ov-row-title { font-size:var(--fs-md); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-ov-row-sub { font-size:var(--fs-xs); color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-ov-row-val { flex:0 0 auto; font-size:var(--fs-sm); color:var(--text-dim); }
.crm-ov-card-chevron { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:var(--fs-md); padding:0 4px; line-height:1; }
.crm-ov-stage-pill { display:inline-block; margin-top:3px; padding:1px 8px; border-radius:10px; font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.3px; background:var(--c, var(--overlay-2)); color:var(--text-on-accent, #fff); }
.crm-ov-add-input { width:100%; margin-top:8px; padding:6px 10px; font-size:var(--fs-sm); }

/* Y2 (3j52nn) Activities card — quick-log row + grouped list (shared org + deal) */
.crm-act-quicklog { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.crm-act-types { display:flex; gap:6px; }
.crm-act-type { width:30px; height:30px; border:1px solid var(--border); border-radius:8px; background:none; color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.crm-act-type svg { width:15px; height:15px; }
.crm-act-type.active { border-color:var(--accent); color:var(--accent); background:rgba(59,125,216,.08); }
.crm-act-inputline { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.crm-act-subj { flex:1 1 120px; min-width:0; padding:6px 10px; font-size:var(--fs-sm); }
.crm-act-due { flex:0 0 auto; width:130px; padding:6px 8px; font-size:var(--fs-sm); }
.crm-act-log { width:auto; flex:0 0 auto; margin-top:0; padding:6px 14px; }
.crm-act-group { font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); margin:8px 0 2px; }
.crm-act-group.crm-act-overdue { color:var(--danger); }
.crm-act-row { display:flex; align-items:flex-start; gap:8px; padding:5px 2px; }
.crm-act-cb { margin-top:3px; cursor:pointer; flex:0 0 auto; }
.crm-act-mid { flex:1 1 auto; min-width:0; }
.crm-act-title { font-size:var(--fs-md); color:var(--text); display:flex; align-items:center; gap:6px; }
.crm-act-ticon { display:inline-flex; color:var(--text-dim); }
.crm-act-ticon svg { width:13px; height:13px; }
.crm-act-meta-lbl { font-size:var(--fs-xs); color:var(--text-dim); margin-top:1px; }
/* U6 (mnmnx2): Activities dedicated tab — type filter chips, collapsible Done group, inline edit */
.crm-act-tab { padding-top:2px; }
.crm-act-filterbar { display:flex; gap:6px; margin:4px 0 10px; overflow-x:auto; }
.crm-act-fchip { flex:0 0 auto; background:none; border:1px solid var(--border); color:var(--text-dim); border-radius:14px; padding:3px 12px; font-size:var(--fs-sm); cursor:pointer; white-space:nowrap; }
.crm-act-fchip:hover { color:var(--text); }
.crm-act-fchip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.crm-act-done-head { cursor:pointer; }
.crm-act-done-head:hover { color:var(--text); }
.crm-act-editable { cursor:text; border-radius:4px; padding:1px 4px; margin:-1px -4px; }
.crm-act-editable:hover { background:var(--overlay-1); box-shadow:inset 0 0 0 1px var(--border); }
.crm-act-editinput { font-size:var(--fs-md); padding:2px 6px; min-width:160px; max-width:100%; }
.crm-act-dueedit { flex:0 0 auto; align-self:center; background:none; border:1px solid var(--border); color:var(--text-dim); border-radius:6px; font-size:var(--fs-xs); padding:2px 4px; }
/* U5 (mnmnx2) Meetings tab — Upcoming rows, next-line, empty-state actions */
.crm-mtg-up-row { display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--overlay-1); }
.crm-mtg-up-main { flex:1 1 auto; min-width:0; }
.crm-mtg-up-title { font-size:var(--fs-md); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-mtg-up-sub { font-size:var(--fs-xs); color:var(--text-dim); }
.crm-mtg-up-join { flex:0 0 auto; font-size:var(--fs-sm); color:var(--accent); text-decoration:none; border:1px solid var(--accent); border-radius:6px; padding:2px 12px; }
.crm-mtg-empty { padding:6px 0; }
.crm-mtg-empty-actions { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.crm-mtg-next { font-size:var(--fs-sm); color:var(--text); padding:5px 8px; margin-bottom:8px; background:var(--overlay-1); border-radius:6px; }
.crm-mtg-next-lbl { color:var(--accent); font-weight:600; }
/* U4 (mnmnx2) deal-filter bar — sits BELOW the tab selector; org = hub, deal = filter */
.crm-dealfilter-host { margin:0 0 12px; }
.crm-dealfilter { display:flex; gap:6px; overflow-x:auto; padding:2px 0; }
.crm-dealchip { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--border); color:var(--text-dim); border-radius:16px; padding:4px 14px; font-size:var(--fs-sm); cursor:pointer; white-space:nowrap; }
.crm-dealchip:hover { color:var(--text); }
.crm-dealchip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.crm-dealchip-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.crm-dealfilter-select { max-width:280px; }
.crm-dealstrip { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px; padding:8px 12px; background:var(--overlay-1); border-radius:8px; font-size:var(--fs-sm); }
.crm-dealstrip-val { font-weight:600; color:var(--text); }
.crm-dealstrip-open { color:var(--accent); text-decoration:none; white-space:nowrap; }
.crm-dealstrip-note { color:var(--text-dim); font-size:var(--fs-xs); margin-left:auto; }
.crm-ov-row-sel { background:var(--accent-tint); box-shadow:inset 2px 0 0 var(--accent); }
/* U7 (mnmnx2): inline "enrich" website prompt in the Summary card (no popup) */
.crm-enrich-urlrow { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.crm-enrich-url { flex:1 1 auto; min-width:0; padding:6px 10px; font-size:var(--fs-sm); }

/* Y3 (3j52nn) card header: title left · [primary action] [View all →] right */
.crm-card-hdr-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.crm-card-action { display:inline-flex; align-items:center; gap:5px; background:none; border:1px solid var(--border); color:var(--text); border-radius:7px; padding:3px 10px; font-size:var(--fs-sm); cursor:pointer; white-space:nowrap; }
.crm-card-action:hover { border-color:var(--accent); color:var(--accent); }
.crm-card-action-dot { width:8px; height:8px; border-radius:50%; background:var(--danger); flex:0 0 auto; }
.crm-card-action-rec:hover { border-color:var(--danger); color:var(--danger); }
.crm-email-link, .crm-phone-link { color:var(--accent); text-decoration:none; cursor:pointer; }
.crm-email-link:hover, .crm-phone-link:hover { text-decoration:underline; }

/* (Y4 Pipeline Board|List toggle reverted 2026-07-07 — standalone Projects tab restored.) */

/* ── CRM Pagination ── */
.crm-pagination {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 4px; font-size:var(--fs-sm); color:var(--text-dim);
}
.crm-pagination select {
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:5px; padding:3px 8px; font-size:var(--fs-xs); cursor:pointer;
}
.crm-page-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--surface);
  color:var(--text); cursor:pointer; font-size:var(--fs-xs);
  transition: background .15s;
}
.crm-page-btn:hover:not(:disabled) { background:var(--overlay-1); }
.crm-page-btn:disabled { opacity:.3; cursor:default; }

/* ============================================================================
 * Email-campaign styles (evicted from the 2nd injected block in crm-app.js)
 * ========================================================================== */
.ec-infra-panel { margin:0 16px 16px; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.ec-infra-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; cursor:pointer; background:var(--surface); font-size:var(--fs-md); font-weight:600; color:var(--text); }
.ec-infra-header:hover { background:var(--overlay-1); }
.ec-infra-body { padding:12px 14px; border-top:1px solid var(--border); }
.ec-infra-section { margin-bottom:14px; }
.ec-infra-section:last-child { margin-bottom:0; }
.ec-infra-section h5 { margin:0 0 8px; font-size:var(--fs-sm); color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
.ec-step-list { display:flex; flex-direction:column; gap:8px; }
.ec-step-card { border:1px solid var(--border); border-radius:var(--radius-lg); padding:12px 14px; background:var(--surface); position:relative; }
.ec-step-card:hover { border-color:var(--overlay-3); }
.ec-step-num { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:var(--radius-pill); background:var(--accent); color:var(--text-on-accent); font-size:var(--fs-xs); font-weight:700; margin-right:8px; }
.ec-step-delay { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; background:var(--overlay-1); color:var(--text-dim); margin-left:8px; }
.ec-step-subject { font-size:var(--fs-md); font-weight:500; color:var(--text); margin:6px 0 4px; }
.ec-step-preview { font-size:var(--fs-sm); color:var(--text-dim); max-height:40px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ec-step-actions { position:absolute; top:10px; right:10px; display:flex; gap:2px; }
.ec-stats-row { display:flex; gap:20px; margin:12px 0; font-size:var(--fs-md); color:var(--text-dim); flex-wrap:wrap; }
.ec-stats-row > div { min-width:80px; }
.ec-stats-row strong { color:var(--text); font-size:var(--fs-xl); display:block; line-height:1.2; }
.ec-detail-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:12px; }
.ec-detail-tab { padding:8px 16px; font-size:var(--fs-md); cursor:pointer; border:none; background:none; color:var(--text-dim); font-weight:400; border-bottom:2px solid transparent; }
.ec-detail-tab.active { color:var(--text); font-weight:600; border-bottom-color:var(--accent); }
.ec-progress-bar { height:6px; border-radius:3px; background:var(--overlay-2); overflow:hidden; margin-top:6px; }
.ec-progress-fill { height:100%; border-radius:3px; transition:width .3s; }
.ec-health-dot { display:inline-block; width:8px; height:8px; border-radius:var(--radius-pill); margin-right:4px; }
.ec-funnel { display:flex; align-items:center; gap:12px; margin:16px 0; flex-wrap:wrap; }
.ec-funnel-step { text-align:center; }
.ec-funnel-step .ec-funnel-val { font-size:22px; font-weight:700; color:var(--text); }
.ec-funnel-step .ec-funnel-label { font-size:var(--fs-xs); color:var(--text-dim); }
.ec-funnel-arrow { font-size:var(--fs-xl); color:var(--text-dim); }
.ec-send-row { border:1px solid var(--border); border-radius:var(--radius-lg); margin-bottom:6px; overflow:hidden; }
.ec-send-header { display:flex; align-items:center; gap:12px; padding:8px 12px; cursor:pointer; background:var(--surface); font-size:var(--fs-sm); }
.ec-send-header:hover { background:var(--overlay-1); }
.ec-send-body { padding:12px 14px; background:var(--bg); border-top:1px solid var(--border); font-size:var(--fs-sm); color:var(--text-dim); }
.ec-merge-ref { margin-top:12px; padding:10px; background:var(--overlay-1); border:1px solid var(--border); border-radius:var(--radius); font-size:var(--fs-xs); }
.ec-merge-ref code { background:var(--overlay-2); padding:1px 4px; border-radius:3px; font-size:10px; }
.ec-day-check { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:var(--radius); font-size:var(--fs-sm); cursor:pointer; border:1px solid var(--border); }
.ec-day-check input { margin:0; }
@media (max-width: 600px) {
  .ec-stats-row { gap:10px; }
  .ec-stats-row strong { font-size:var(--fs-lg); }
  .ec-detail-tab { padding:6px 10px; font-size:var(--fs-sm); }
}

/* ============================================================================
 * Org-detail DASHBOARD tab (W2 cubs3f — Polish Wave #1)
 * container-type drives the card grid off ACTUAL panel width, not viewport, so
 * cards stack to one column when the panel is narrow (the reported bug).
 * ========================================================================== */
.crm-dash { container-type:inline-size; }
.crm-dash-grid { display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px; }
@container (min-width: 560px) {
  .crm-dash-grid { grid-template-columns:1fr 1fr; }
}

/* Recent meetings card — ▶ + duration chip + transcript/notes icon */
.crm-meet-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.crm-meet-rec { font-size:var(--fs-sm); color:var(--accent); white-space:nowrap; }
.crm-meet-tx {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; padding:0; background:none; border:none;
  border-radius:6px; color:var(--text-dim); cursor:pointer;
}
.crm-meet-tx:hover { background:var(--overlay-1); color:var(--text); }
.crm-meet-tx svg { width:15px; height:15px; }

/* Recent emails card (shared with the Emails tab) — subject single-line ellipsis;
 * the deal-link chip wraps to its own line and can never overlap the subject. */
.crm-email-row .ou-list-item-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-email-row .ou-list-item-right { flex-shrink:1; min-width:0; max-width:60%; }
.crm-email-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; row-gap:4px; }
.crm-email-linkchip {
  background:none; border:1px solid var(--accent); color:var(--accent); cursor:pointer;
  font-size:var(--fs-xs); line-height:1; padding:3px 8px; border-radius:12px;
  white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis;
}
.crm-email-acct {
  font-size:10px; color:var(--text-dim); max-width:90px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Recent files + People cards — compact rows */
.crm-dash-prow, .crm-dash-frow {
  display:flex; align-items:center; gap:10px; padding:6px 4px;
  border-radius:6px; cursor:pointer;
}
.crm-dash-prow:hover, .crm-dash-frow:hover { background:var(--overlay-1); }
.crm-dash-avatar {
  width:30px; height:30px; flex-shrink:0; border-radius:50%;
  background:var(--accent-tint); color:var(--accent); font-size:var(--fs-sm); font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.crm-dash-pbody, .crm-dash-fbody { flex:1; min-width:0; }
.crm-dash-pname, .crm-dash-fname { font-size:var(--fs-md); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-dash-prole, .crm-dash-fmeta { font-size:var(--fs-xs); color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-dash-fthumb { width:34px; height:34px; flex-shrink:0; border-radius:6px; object-fit:cover; border:1px solid var(--border); }
.crm-dash-ficon { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:34px; }

/* ── W8: Projects list — filter bar + single-line customer/name columns ── */
/* Horizontal-scroll filter row (never wraps), mirrors .tasks-filter-bar. */
.crm-filter-bar {
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:thin;
}
.crm-filter-bar::-webkit-scrollbar { height:6px; }
.crm-filter-bar::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
/* Each filter control keeps a stable width and stays on one row (scrolls, never shrinks). */
.crm-filter-field { flex:0 0 auto; width:180px; min-width:150px; margin-bottom:0; }
.crm-filter-bar .ou-form-group { margin-bottom:0; }
/* W14: filter-bar selects + searchable-select triggers share the standard
   control height so the secondary filter row lines up with the search/"+ New"
   toolbar above it. */
.crm-filter-bar .ou-select,
.crm-filter-bar .ou-input,
.crm-filter-bar .ou-search-select-trigger {
  height:var(--ou-control-h);
  padding-top:0;
  padding-bottom:0;
  min-height:0;
}

/* Single-line list rows: Customer first, deal name second. */
/* X1 (qf9z2k): deal NAME is primary (bold, full-text colour) as the first column;
   customer is the secondary/dim column second. Reverses W8's emphasis. */
.crm-proj-name { font-weight:600; color:var(--text); }
.crm-proj-customer { font-weight:400; color:var(--text-dim); }
.crm-proj-customer-none { font-weight:400; color:var(--text-dim); font-style:italic; }

/* ── V3 (syfpa5) deal-aging / rotting indicator ──
 * Amber pill while aging (≥50% of threshold), red once rotting (≥threshold).
 * Reuses the shared --warning / --danger tokens so it matches other status chips. */
.crm-rot-badge {
  display:inline-flex; align-items:center; gap:4px;
  margin-left:8px; padding:1px 7px; border-radius:var(--radius-pill);
  font-size:var(--fs-xs); font-weight:600; white-space:nowrap; vertical-align:middle;
}
.crm-rot-badge::before {
  content:''; width:6px; height:6px; border-radius:var(--radius-pill); background:currentColor;
}
.crm-rot-amber { background:var(--warning-tint); color:var(--warning); }
.crm-rot-red   { background:var(--danger-tint);  color:var(--danger); }
/* On a Kanban card the pill sits on its own row under the meta line. */
.crm-rot-cardrow { margin-top:6px; }

/* ============================================================================
 * Deal / project TIMELINE — vertical rail (W7 f82qr6 — Polish Wave #1)
 * The date is the hero: sticky month headers + per-day date tokens on one
 * continuous rail; same-day entries stack beside a single dated anchor; quiet
 * stretches read as dashed gaps. container-type drives the layout off ACTUAL
 * panel width (works narrow + fullscreen; no fixed widths that overflow).
 * ========================================================================== */

/* View toggle (List | Timeline) — segmented control at the top of the tab. */
.crm-tl-toggle {
  display:inline-flex; gap:2px; padding:2px; margin:0 0 14px;
  background:var(--overlay-1); border:1px solid var(--border); border-radius:var(--radius-pill);
}
.crm-tl-seg {
  border:none; background:none; cursor:pointer; color:var(--text-dim);
  font-size:var(--fs-sm); font-weight:500; padding:5px 14px; border-radius:var(--radius-pill);
  transition: background .15s, color .15s;
}
.crm-tl-seg:hover { color:var(--text); }
.crm-tl-seg.active { background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.15); }

.crm-tl-host { container-type:inline-size; }
.crm-tl-rail { position:relative; }

/* Sticky month header — sticks at the top of the scroll body as you scroll a
 * month. Opaque --app-bg (the panel body's bg) so entries scroll cleanly under. */
.crm-tl-month {
  position:sticky; top:0; z-index:5;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim); background:var(--app-bg);
  padding:8px 0 6px 2px; margin-top:2px;
}
.crm-tl-month + .crm-tl-day { padding-top:0; }

/* Day group: date rail (left) + stacked cards (right). */
.crm-tl-day { position:relative; display:flex; gap:14px; padding:2px 0; }
/* The continuous vertical line runs behind the dots down the rail column. */
.crm-tl-day::before {
  content:''; position:absolute; top:0; bottom:-2px; left:19px; width:2px;
  background:var(--border);
}
.crm-tl-railcol {
  position:relative; flex:0 0 auto; width:40px;
  display:flex; flex-direction:column; align-items:center; padding-top:4px;
}
.crm-tl-dot {
  position:relative; z-index:1; width:11px; height:11px; border-radius:50%;
  background:var(--accent); border:2px solid var(--app-bg); margin-bottom:5px;
}
.crm-tl-datetoken { display:flex; flex-direction:column; align-items:center; line-height:1; }
.crm-tl-daynum { font-size:20px; font-weight:700; color:var(--text); }
.crm-tl-dayweek {
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-dim); margin-top:3px;
}

.crm-tl-cards {
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px;
  padding:2px 0 12px;
}
.crm-tl-card {
  display:flex; gap:10px; align-items:flex-start; padding:8px 10px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
}
.crm-tl-clickable { cursor:pointer; transition: border-color .15s, background .15s; }
.crm-tl-clickable:hover { border-color:var(--overlay-3); background:var(--overlay-1); }
.crm-tl-card-icon {
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; color:var(--text-dim); font-size:var(--fs-lg); margin-top:1px;
}
.crm-tl-card-icon svg { width:16px; height:16px; }
.crm-tl-card-body { flex:1; min-width:0; }
.crm-tl-card-title { font-size:var(--fs-md); color:var(--text); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crm-tl-card-sub { font-size:var(--fs-xs); color:var(--text-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Quiet-stretch gap on the rail — dashed segment + muted "N days" tick. */
.crm-tl-gap { position:relative; height:22px; margin-left:19px; }
.crm-tl-gap::before {
  content:''; position:absolute; top:0; bottom:0; left:0; width:2px;
  background:repeating-linear-gradient(var(--border) 0 3px, transparent 3px 7px);
}
.crm-tl-gap-label {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:10px; color:var(--text-dim); opacity:.7; white-space:nowrap;
}

/* Deal-email row — date-as-hero (W7), consistent with the rail's date token. */
.crm-eml-row {
  display:flex; align-items:center; gap:12px; padding:8px 6px;
  border-bottom:1px solid var(--overlay-1); cursor:pointer; border-radius:6px;
}
.crm-eml-row:hover { background:var(--overlay-1); }
.crm-eml-date {
  flex:0 0 auto; width:46px; text-align:center;
  display:flex; flex-direction:column; align-items:center; line-height:1;
}
.crm-eml-date-day { font-size:var(--fs-xl); font-weight:700; color:var(--text); }
.crm-eml-date-mon {
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  color:var(--text-dim); margin-top:3px;
}
.crm-eml-body { flex:1; min-width:0; }
.crm-eml-subject { font-size:var(--fs-md); color:var(--text); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crm-eml-sub { font-size:var(--fs-xs); color:var(--text-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crm-eml-more {
  flex-shrink:0; background:none; border:none; color:var(--text-dim); cursor:pointer;
  font-size:var(--fs-xl); line-height:1; padding:2px 6px; border-radius:6px;
}
.crm-eml-more:hover { background:var(--overlay-2); color:var(--text); }

/* Smart empty-state — org has correspondence but the deal has none linked yet. */
.crm-smart-empty {
  display:flex; gap:12px; align-items:flex-start; margin:8px 0;
  padding:14px 16px; border-radius:var(--radius-lg);
  background:var(--accent-tint); border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.crm-smart-empty-icon { flex-shrink:0; color:var(--accent); display:flex; }
.crm-smart-empty-icon svg { width:20px; height:20px; }
.crm-smart-empty-body { flex:1; min-width:0; }
.crm-smart-empty-title { font-size:var(--fs-md); font-weight:600; color:var(--text); margin-bottom:3px; }
.crm-smart-empty-desc { font-size:var(--fs-sm); color:var(--text-dim); line-height:1.5; }
.crm-smart-empty-desc strong { color:var(--text); font-weight:600; }
.crm-smart-empty-link {
  margin-top:8px; display:inline-flex; align-items:center; gap:4px;
  background:var(--accent); color:var(--text-on-accent); border:none; cursor:pointer;
  font-size:var(--fs-sm); font-weight:600; padding:5px 12px; border-radius:var(--radius);
}
.crm-smart-empty-link:hover { background:var(--accent-hover); }

/* Narrow panel: shrink the date tokens + tighten the rail. */
@container (max-width: 420px) {
  .crm-tl-railcol { width:34px; }
  .crm-tl-day { gap:10px; }
  .crm-tl-day::before, .crm-tl-gap { left:16px; }
  .crm-tl-daynum { font-size:17px; }
}

/* ============================================================================
 * Person DETAIL sub-view (W9 853app) — replaces the old person modal.
 * ========================================================================== */
/* Identity card: avatar + name + role @ org */
.crm-person-idcard {
  display:flex; align-items:center; gap:14px;
  padding:6px 0 12px; margin-bottom:4px;
}
.crm-person-avatar {
  width:52px; height:52px; flex-shrink:0; border-radius:50%;
  background:var(--accent-tint); color:var(--accent);
  font-size:19px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.crm-person-idbody { flex:1; min-width:0; }
.crm-person-idname { font-size:var(--fs-lg, 18px); font-weight:600; color:var(--text); }
.crm-person-idsub { font-size:var(--fs-sm); color:var(--text-dim); margin-top:2px; }
.crm-person-orglink { color:var(--accent); text-decoration:none; cursor:pointer; }
.crm-person-orglink:hover { text-decoration:underline; }
.crm-person-idsub-none { color:var(--text-dim); font-style:italic; }

/* Quick-action button row */
.crm-person-quick {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:0 0 12px; margin-bottom:4px; border-bottom:1px solid var(--border);
}

/* Auto-save editable field (label above input; no Save button) */
.crm-person-field { display:flex; flex-direction:column; gap:4px; margin:8px 0; }
.crm-person-field-label { font-size:var(--fs-sm); color:var(--text-dim); font-weight:500; }
.crm-person-input { width:100%; }

/* Social profile row: icon + input + open-in-new-tab affordance on one line */
.crm-person-social { flex-direction:row; align-items:center; gap:8px; }
.crm-person-social-icon {
  flex-shrink:0; width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:var(--overlay-1); color:var(--text-dim);
}
.crm-person-social .crm-person-input { flex:1; min-width:0; }
.crm-person-social-open {
  flex-shrink:0; width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  cursor:pointer;
}
.crm-person-social-open:hover { color:var(--accent); border-color:var(--accent); }
.crm-person-social-add {
  display:flex; align-items:center; gap:8px; margin-top:8px;
  overflow-x:auto; scrollbar-width:thin;
}

/* Empty-list + "N more" affordances for the detail lists */
.crm-person-none { padding:8px 4px; font-size:var(--fs-sm); color:var(--text-dim); font-style:italic; }
.crm-person-more {
  padding:6px 4px; font-size:var(--fs-sm); color:var(--accent);
  font-weight:500; cursor:default;
}

/* ── Duplicate detection + org merge (V4 jtshxu) ──────────────────────────── */
/* Non-blocking dup warning in the org create form. */
.crm-dupe-notice {
  margin:10px 0 4px; padding:10px 12px; border-radius:8px;
  background:var(--overlay-1); border:1px solid var(--warning, #f59e0b);
  font-size:var(--fs-sm);
}
.crm-dupe-notice-head {
  display:flex; align-items:center; gap:8px; font-weight:600; color:var(--text);
  margin-bottom:6px;
}
.crm-dupe-notice-icon { color:var(--warning, #f59e0b); font-size:var(--fs-lg); line-height:1; }
.crm-dupe-notice-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:5px 0; border-top:1px solid var(--border);
}
.crm-dupe-notice-info { display:flex; flex-direction:column; min-width:0; }
.crm-dupe-notice-name { color:var(--text); font-weight:500; word-break:break-word; }
.crm-dupe-notice-reason { color:var(--text-dim); font-size:var(--fs-xs, 11px); }
.crm-dupe-notice-open {
  flex-shrink:0; padding:4px 12px; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid var(--accent); color:var(--accent);
  font-size:var(--fs-sm); font-weight:500;
}
.crm-dupe-notice-open:hover { background:var(--accent); color:#fff; }
.crm-dupe-notice-hint { margin-top:6px; color:var(--text-dim); font-size:var(--fs-xs, 11px); }

/* Merge — searchable target picker. */
.crm-merge-lead { color:var(--text-dim); font-size:var(--fs-sm); line-height:1.5; margin-bottom:10px; }
.crm-merge-picker-list {
  max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:4px;
}
.crm-merge-picker-item {
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:100%; text-align:left; padding:8px 10px; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid var(--border); color:var(--text);
}
.crm-merge-picker-item:hover { border-color:var(--accent); background:var(--overlay-1); }
.crm-merge-picker-name { font-weight:500; }
.crm-merge-picker-sub { font-size:var(--fs-xs, 11px); color:var(--text-dim); word-break:break-all; }
.crm-merge-picker-empty, .crm-merge-picker .crm-merge-picker-empty {
  padding:12px; text-align:center; color:var(--text-dim); font-size:var(--fs-sm);
}

/* Merge — diff-style confirm screen. */
.crm-merge-loading, .crm-merge-error { padding:8px 4px; color:var(--text-dim); font-size:var(--fs-sm); }
.crm-merge-error { color:var(--danger, #ef4444); }
.crm-merge-summary { font-size:var(--fs-md, 15px); margin-bottom:10px; word-break:break-word; }
.crm-merge-diff {
  display:flex; flex-direction:column; gap:2px; margin:8px 0;
  border:1px solid var(--border); border-radius:8px; padding:6px 10px;
}
.crm-merge-diff-row { display:flex; align-items:baseline; gap:10px; padding:3px 0; }
.crm-merge-diff-count {
  min-width:34px; text-align:right; font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.crm-merge-diff-label { color:var(--text); }
.crm-merge-diff-empty { color:var(--text-dim); font-size:var(--fs-sm); font-style:italic; padding:4px 0; }
.crm-merge-fills {
  margin-top:8px; font-size:var(--fs-sm); color:var(--text-dim); line-height:1.5;
}
.crm-merge-warn {
  margin-top:10px; padding:8px 10px; border-radius:6px;
  background:var(--overlay-1); border:1px solid var(--danger, #ef4444);
  color:var(--text); font-size:var(--fs-sm);
}

/* ============================================================================
 * Team activity stats tab (epic pgth82 · task Z2)
 * container-type drives the charts/layout off ACTUAL panel width (works narrow +
 * fullscreen). Charts are inline SVG reading --accent/--text/--text-dim/--border
 * so they theme cleanly (paper / Neon Noir included).
 * ========================================================================== */
.crm-ts { container-type:inline-size; padding-top:var(--space-2); }
.crm-ts-head { padding:var(--space-2) var(--space-4) 0; }
.crm-ts-title { font-size:var(--fs-lg, 16px); font-weight:600; color:var(--text); }
/* reuse .crm-filter-bar; nudge so it sits directly under the title */
.crm-ts-filter { margin-top:var(--space-2); }
.crm-ts-member-sel { margin-left:auto; }

.crm-ts-body { padding:var(--space-3) var(--space-4) var(--space-4); }
.crm-ts-cards { display:flex; flex-direction:column; gap:var(--space-3); }

/* Tiles inside a card: drop the statsRow's own padding (the card body already
 * pads) and give tiles a subtle contrast against the card surface. */
.crm-ts .ou-card-body .ou-stats-row { padding:0; }
.crm-ts .ou-stat { background:var(--overlay-1); }
.crm-ts-total { font-size:var(--fs-sm); color:var(--text-dim); font-variant-numeric:tabular-nums; }

/* Charts: two-up when wide, stack when the panel is narrow. */
.crm-ts-charts { display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@container (min-width: 560px) {
  .crm-ts-charts { grid-template-columns:1fr 1fr; }
}
.crm-ts-chart { min-width:0; }
.crm-ts-chart-title { font-size:var(--fs-sm); font-weight:600; color:var(--text); margin-bottom:2px; }
.crm-ts-chart-cap { font-size:var(--fs-xs); color:var(--text-dim); margin-bottom:8px; font-variant-numeric:tabular-nums; }
.crm-ts-chart-svg { width:100%; }
.crm-ts-svg { display:block; width:100%; overflow:visible; }
.crm-ts-empty { padding:16px 4px; color:var(--text-dim); font-size:var(--fs-sm); font-style:italic; }

/* Activity log — dim connective text, emphasized (linked) value tokens. */
.crm-ts-log { display:flex; flex-direction:column; }
.crm-ts-log-row { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.crm-ts-log-row:last-child { border-bottom:none; }
.crm-ts-log-icon {
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--overlay-1); color:var(--text-dim);
}
.crm-ts-log-icon svg { width:14px; height:14px; }
.crm-ts-log-icon-agent { color:var(--accent); }
.crm-ts-log-mid { min-width:0; flex:1 1 auto; }
.crm-ts-log-sentence { font-size:var(--fs-sm); color:var(--text); line-height:1.4; word-break:break-word; }
.crm-ts-log-actor { font-weight:600; color:var(--text); }
.crm-ts-log-desc { color:var(--text-dim); }
.crm-ts-log-value { color:var(--text); font-weight:600; }
.crm-ts-log-link { color:var(--accent); text-decoration:none; cursor:pointer; }
.crm-ts-log-link:hover { text-decoration:underline; }
.crm-ts-log-ts { font-size:var(--fs-xs); color:var(--text-dim); margin-top:1px; font-variant-numeric:tabular-nums; }

.crm-ts-pager { margin-top:12px; }
.crm-ts-member { display:inline-flex; align-items:center; gap:6px; }
.crm-ts-agent-tag { display:inline-flex; color:var(--accent); }
.crm-ts-agent-tag svg { width:14px; height:14px; }