#mblg-crm-app{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Design tokens (UI consistency foundation) */
  --mblg-font-size: 13px;
  --mblg-line: 1.35;

  --mblg-space-1: 6px;
  --mblg-space-2: 10px;
  --mblg-space-3: 14px;
  --mblg-space-4: 18px;

  

  /* Layout rhythm tokens */
  --mblg-page-pad: 18px;
  --mblg-stack-gap: 16px;
  --mblg-card-gap: 14px;
  --mblg-toolbar-gap: 10px;
  --mblg-inline-gap: 10px;
--mblg-radius-sm: 10px;
  --mblg-radius-md: 12px;
  --mblg-radius-lg: 16px;
  --mblg-radius-pill: 999px;

  --mblg-border-subtle: rgba(0,0,0,.08);
  --mblg-border: rgba(0,0,0,.12);
  --mblg-border-strong: rgba(0,0,0,.16);

  --mblg-surface-0: #ffffff;
  --mblg-surface-1: rgba(0,0,0,.02);
  --mblg-surface-2: rgba(0,0,0,.03);

  --mblg-text: #111827;
  --mblg-text-muted: #6b7280;

  /* Primary action color (match the Notes modal CTA) */
  --mblg-primary: #2563eb;
  --mblg-primary-hover: #1d4ed8;
  --mblg-danger: #dc2626;
  /* Pill tokens (non-destructive) */
  --mblg-pill-font-size: 12px;
  --mblg-pill-pad-y: 6px;
  --mblg-pill-pad-x: 10px;
  --mblg-pill-border: rgba(0,0,0,.12);
  --mblg-pill-bg: rgba(0,0,0,.03);
  --mblg-pill-text: rgba(0,0,0,.72);
  --mblg-pill-warn: rgb(217, 119, 6);
  --mblg-pill-warn-border: rgba(217, 119, 6, .32);
  --mblg-pill-warn-bg: rgba(217, 119, 6, .08);
  --mblg-pill-danger: rgb(220, 38, 38);
  --mblg-pill-danger-border: rgba(220, 38, 38, .34);
  --mblg-pill-danger-bg: rgba(220, 38, 38, .08);
  --mblg-warn: #f59e0b;

  --mblg-focus-ring: 0 0 0 3px rgba(37,99,235,.25);
  overflow-x: hidden;
}


/* Dashboard KPI value color helpers (v0.4.2) */
#mblg-crm-app .mblg-crm-kpi-blue{ color:#2563EB; }   /* WP admin blue */
#mblg-crm-app .mblg-crm-kpi-green{ color:#00a32a; }  /* WP green */
#mblg-crm-app .mblg-crm-kpi-red{ color:#d63638; }    /* WP red */

#mblg-crm-app .mblg-crm-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border:1px solid rgba(0,0,0,.08); border-radius:12px;
  background: rgba(0,0,0,.02); margin-bottom:10px;
}
#mblg-crm-app .mblg-crm-title{ font-size:18px; font-weight:700; }
#mblg-crm-app .mblg-crm-user{ font-size:13px; opacity:.75; }

#mblg-crm-app .mblg-crm-tabs{ display:flex; gap:8px; margin-bottom:10px; }
#mblg-crm-app .mblg-crm-tabs button:not(.mblg-crm-btn){
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px;
  border-radius: var(--mblg-radius-pill);
  border:1px solid var(--mblg-border-strong);
  background: var(--mblg-surface-0);
  color: var(--mblg-text);
  font-weight:600; font-size:13px; line-height:1;
  cursor:pointer;
}

#mblg-crm-app .mblg-crm-tabs button.active{ background: rgba(0,0,0,.06); }

#mblg-crm-app .mblg-crm-error{
  border:1px solid rgba(255,0,0,.25); background: rgba(255,0,0,.06);
  color:#7a0000; padding:10px 12px; border-radius:10px; margin-bottom:10px;
}

#mblg-crm-app #mblg-crm-app .mblg-crm-toolbar input[type="search"]{ min-width:260px; padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.12); }
#mblg-crm-app .mblg-crm-toolbar select{ padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.12); }
#mblg-crm-app .mblg-crm-toolbar button:not(.mblg-crm-btn){
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:8px 14px; border-radius: var(--mblg-radius-sm);
  border:1px solid var(--mblg-border-strong);
  background: var(--mblg-surface-0);
  color: var(--mblg-text);
  font-weight:600; font-size:13px; line-height:1;
  cursor:pointer;
}

#mblg-crm-app .mblg-crm-table{
  width:100%; border-collapse:collapse; border:1px solid rgba(0,0,0,.08);
  border-radius:12px; overflow:hidden;
}
#mblg-crm-app .mblg-crm-table th, #mblg-crm-app .mblg-crm-table td{
  padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.06); text-align:left; font-size:13px;
}
#mblg-crm-app .mblg-crm-table th{ background: rgba(0,0,0,.03); font-weight:700; }
#mblg-crm-app .mblg-crm-table tr:last-child td{ border-bottom:none; }

#mblg-crm-app .mblg-crm-form{
  margin-top:14px; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:12px;
}
#mblg-crm-app .mblg-crm-form h3{ margin:0 0 10px 0; font-size:15px; }
#mblg-crm-app .mblg-crm-form .row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
#mblg-crm-app .mblg-crm-form input{
  padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.12);
  min-width:220px; flex:1;
}
#mblg-crm-app .mblg-crm-form button:not(.mblg-crm-btn){
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:8px 14px; border-radius: var(--mblg-radius-sm);
  border:1px solid var(--mblg-border-strong);
  background: var(--mblg-surface-0);
  color: var(--mblg-text);
  font-weight:600; font-size:13px; line-height:1;
  cursor:pointer;
}

/* =========================================================
 * Form layout helpers (used by modals + Tasks & Follow-Ups)
 * Ensures fields can sit side-by-side with consistent spacing.
 * ========================================================= */

/* Some modals are mounted outside #mblg-crm-app; mirror core form styles globally */
.mblg-crm-form{
  margin-top:14px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:12px;
  background:#fff;
}
.mblg-crm-form h3{ margin:0 0 10px 0; font-size:15px; }
.mblg-crm-form .row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.mblg-crm-form input,
.mblg-crm-form select,
.mblg-crm-form textarea{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  min-width:220px;
  flex:1;
}
.mblg-crm-form textarea{ min-height: 90px; resize: vertical; }
.mblg-crm-form button:not(.mblg-crm-btn){
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:8px 14px; border-radius: var(--mblg-radius-sm);
  border:1px solid var(--mblg-border-strong);
  background: var(--mblg-surface-0);
  color: var(--mblg-text);
  font-weight:600; font-size:13px; line-height:1;
  cursor:pointer;
}

/* Grid wrapper used by Tasks form (and sometimes modals) */
#mblg-crm-app .mblg-crm-form-grid,
.mblg-crm-form-grid{
  display: grid;
  gap: 12px;
  align-items: start;
  /* Let fields flow into columns automatically (restores side-by-side layout) */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* When using grid, avoid double vertical spacing (gap already handles it) */
#mblg-crm-app .mblg-crm-form-grid .mblg-crm-form-field,
.mblg-crm-form-grid .mblg-crm-form-field{
  margin: 0;
}
@media (max-width: 860px){
  #mblg-crm-app .mblg-crm-form-grid,
  .mblg-crm-form-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Explicit “row of fields” used in several modals */
#mblg-crm-app .mblg-crm-form-row,
.mblg-crm-form-row{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 14px 0;
}
#mblg-crm-app .mblg-crm-form-row.single,
.mblg-crm-form-row.single{
  flex-direction: column;
}

/* Field wrapper inside form rows */
#mblg-crm-app .mblg-crm-field,
.mblg-crm-field{
  display:flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 240px;
}
#mblg-crm-app .mblg-crm-field label,
.mblg-crm-field label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #374151;
}

/* Single-field blocks used in the Create/Edit modals */
#mblg-crm-app .mblg-crm-form-field,
.mblg-crm-form-field{
  display:flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px 0;
}

/* Ensure inputs fill their cell (prevents weird theme widths) */
#mblg-crm-app .mblg-crm-form-grid .mblg-crm-input,
.mblg-crm-form-grid .mblg-crm-input{
  width: 100%;
  min-width: 0;
}

/* Toast overlay is appended to <body>, so it must NOT be scoped under #mblg-crm-app */
.mblg-crm-toast-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Light-weight toast: no dimming, no blocking */
  background: transparent;
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 999999;
  pointer-events: none;
  visibility: hidden;
}
 .mblg-crm-toast-overlay.show{
  opacity: 1;
  visibility: visible;
  /* keep non-blocking even when shown */
  pointer-events: none;
}
.mblg-crm-toast{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  font-size: 15px;
  font-weight: 700;
  max-width: 360px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.mblg-crm-toast.show{
  opacity: 1;
  transform: translateY(0) scale(1);
}

#mblg-crm-app .mblg-crm-view{ display:block; }

#mblg-crm-app .mblg-crm-layout{
  display:flex;
  gap:14px;
  align-items:stretch;
}
#mblg-crm-app .mblg-crm-sidebar{
  width: 220px;
  min-width: 220px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:10px;
  background: rgba(0,0,0,.02);
  display:flex;
  flex-direction:column;
  gap:8px;
}
#mblg-crm-app .mblg-crm-sidebar button:not(.mblg-crm-btn){
  display:inline-flex; align-items:center; justify-content:flex-start;
  padding:8px 14px;
  border-radius: var(--mblg-radius-sm);
  border:1px solid var(--mblg-border-strong);
  background: var(--mblg-surface-0);
  color: var(--mblg-text);
  font-weight:600; font-size:13px; line-height:1;
  cursor:pointer;
}

#mblg-crm-app .mblg-crm-sidebar button.active{
  background: rgba(0,0,0,.08);
}
#mblg-crm-app .mblg-crm-main{
  flex:1;
  min-width:0;
}

#mblg-crm-app .mblg-crm-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:12px;
  background:#fff;
  margin-bottom:12px;
}
.mblg-crm-card.is-saving{
  opacity:0.65;
  cursor:progress;
  pointer-events:none;
}
#mblg-crm-app .mblg-crm-card-title{
  font-weight:800;
  margin-bottom:10px;
}
#mblg-crm-app .mblg-crm-card-body{
  font-size:13px;
}
#mblg-crm-app .mblg-crm-related{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

#mblg-crm-app select{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  background:#fff;
}
#mblg-crm-app button.secondary:not(.mblg-crm-btn){
  background: var(--mblg-surface-1);
}

#mblg-crm-app textarea{ width:100%; padding:10px 12px; border:1px solid rgba(0,0,0,.15); border-radius:10px; }

/* Detail views (Accounts / Contacts) */
#mblg-crm-app .mblg-crm-tabs{
  display:flex;
  gap:10px;
  margin: 6px 0 14px 0;
}
#mblg-crm-app .mblg-crm-tab{
  border:1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 8px 14px;
  background:#fff;
  cursor:pointer;
  font-weight:600;
}
#mblg-crm-app .mblg-crm-tab.active{
  box-shadow: 0 0 0 2px rgba(0,0,0,.08) inset;
}
#mblg-crm-app .mblg-crm-detail-wrap{
  background: rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 16px;
}
#mblg-crm-app #mblg-crm-app .mblg-crm-detail-card{
  background: var(--mblg-surface-1);
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

#mblg-crm-app .mblg-crm-section-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#mblg-crm-app .mblg-crm-section-header .mblg-crm-muted{
  margin-top: 4px;
}

#mblg-crm-app .mblg-crm-section-actions{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap: wrap;
}

#mblg-crm-app .mblg-crm-section-title{
  position: relative;
  font-weight: 800;
  font-size: 14px;
  color: rgba(0,0,0,.80);
  margin: 0 0 8px 0;
  padding-left: 14px;
  line-height: 1.2;
}

#mblg-crm-app .mblg-crm-section-title::before{
  content:"";
  position:absolute;
  left:0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 4px;
  background: var(--mblg-primary);
}

#mblg-crm-app .mblg-crm-detail-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom: 12px;
}
#mblg-crm-app .mblg-crm-detail-title{
  font-size: 18px;
  font-weight: 800;
}
#mblg-crm-app .mblg-crm-detail-sub{
  color: rgba(0,0,0,.55);
  font-size: 12px;
}
#mblg-crm-app .mblg-crm-detail-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 12px;
}
#mblg-crm-app .mblg-crm-kv{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 16px;
  align-items:start;
}
#mblg-crm-app .mblg-crm-k{
  color: rgba(0,0,0,.55);
  font-weight: 700;
  font-size: 13px;
}
#mblg-crm-app .mblg-crm-v{
  font-weight: 600;
  font-size: 13px;
}
#mblg-crm-app .mblg-crm-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align: middle;
  border:1px solid var(--mblg-pill-border);
  background: var(--mblg-pill-bg);
  padding: var(--mblg-pill-pad-y) var(--mblg-pill-pad-x);
  border-radius: var(--mblg-radius-pill);
  font-weight: 700;
  font-size: var(--mblg-pill-font-size);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

/* Some UI elements (e.g., certain modals) can be mounted outside #mblg-crm-app.
   Keep pill text centered everywhere for consistency. */
.mblg-crm-pill,
.mblg-crm-due{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
}

/* Pill tones (use color sparingly) */
#mblg-crm-app .mblg-crm-pill--info{
  color: var(--mblg-pill-text);
  border-color: var(--mblg-pill-border);
  background: var(--mblg-pill-bg);
}
#mblg-crm-app .mblg-crm-pill--warn{
  color: var(--mblg-pill-warn);
  border-color: var(--mblg-pill-warn-border);
  background: var(--mblg-pill-warn-bg);
}
#mblg-crm-app .mblg-crm-pill--danger{
  color: var(--mblg-pill-danger);
  border-color: var(--mblg-pill-danger-border);
  background: var(--mblg-pill-danger-bg);
}

/* Due pills are slightly stronger for scan-ability */
#mblg-crm-app .mblg-crm-pill--due{ font-weight: 800; }

/* Tasks due-date cues (compat: older markup) */
#mblg-crm-app .mblg-crm-due{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align: middle;
  border:1px solid var(--mblg-pill-border);
  background: var(--mblg-pill-bg);
  padding: var(--mblg-pill-pad-y) var(--mblg-pill-pad-x);
  border-radius: var(--mblg-radius-pill);
  font-weight: 800;
  font-size: var(--mblg-pill-font-size);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}
#mblg-crm-app .mblg-crm-due-overdue{ color: rgb(220, 38, 38); border-color: rgba(220, 38, 38, .34); background: rgba(220, 38, 38, .08); }
#mblg-crm-app .mblg-crm-due-today{ color: rgb(217, 119, 6); border-color: rgba(217, 119, 6, .32); background: rgba(217, 119, 6, .08); }
#mblg-crm-app .mblg-crm-due-soon{ color: rgb(217, 119, 6); border-color: rgba(217, 119, 6, .28); background: rgba(217, 119, 6, .06); }
#mblg-crm-app .mblg-crm-due-future{ color: rgba(0,0,0,.70); border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.03); }

/* Quick actions (Email | Call | Create Deal) */
#mblg-crm-app .mblg-crm-qa{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 6px;
}
#mblg-crm-app .mblg-crm-qa-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:8px 14px;
  border-radius: var(--mblg-radius-sm);
  border:1px solid var(--mblg-border-strong);
  background: var(--mblg-surface-0);
  color: var(--mblg-text) !important;
  font-weight:700;
  font-size: 13px;
  line-height: 1;
  cursor:pointer;
  text-decoration:none;
  transition: background .15s ease, border-color .15s ease, filter .15s ease, box-shadow .15s ease;
}
#mblg-crm-app .mblg-crm-qa-btn:hover{ filter:brightness(.98); }
#mblg-crm-app .mblg-crm-qa-btn:active{ filter:brightness(.97); }
#mblg-crm-app .mblg-crm-qa-btn:focus{ outline:none; }
#mblg-crm-app .mblg-crm-qa-btn:focus-visible{ box-shadow: var(--mblg-focus-ring); }

#mblg-crm-app .mblg-crm-qa-btn-ghost{
  background: transparent;
  border-color: rgba(0,0,0,.10);
}

/* Rich related list rows */
#mblg-crm-app .mblg-crm-list-item-rich{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
#mblg-crm-app .mblg-crm-list-main{ display:flex; flex-direction:column; gap:4px; }
#mblg-crm-app .mblg-crm-list-meta{ font-size:12px; opacity:.85; }

/* ----- Stronger visual hierarchy in list rows (Accounts / Contacts / Tasks) ----- */
#mblg-crm-app .mblg-crm-cell-primary{
  font-size: 15px;
  font-weight: 800;
  color: rgba(0,0,0,.90);
}
#mblg-crm-app .mblg-crm-primary-link{
  font-size: 15px;
  font-weight: 800;
  color: rgba(0,0,0,.90);
  text-decoration: none;
}
#mblg-crm-app .mblg-crm-primary-link:hover{ text-decoration: underline; }

#mblg-crm-app .mblg-crm-cell-secondary,
#mblg-crm-app .mblg-crm-cell-secondary a{
  font-size: 12px;
  color: rgba(0,0,0,.62);
}

#mblg-crm-app .mblg-crm-cell-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
}
#mblg-crm-app .mblg-crm-secondary-text{
  font-size: 12px;
  color: rgba(0,0,0,.62);
  font-weight: 600;
  line-height: 1.25;
}

/* Task rows (detail view) */
#mblg-crm-app .mblg-crm-item-title{
  font-size: 15px;
  font-weight: 800;
  color: rgba(0,0,0,.90);
  line-height: 1.25;
}
#mblg-crm-app .mblg-crm-item-meta{
  margin-top: 6px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
#mblg-crm-app .mblg-crm-item-meta .mblg-crm-pill{
  font-weight: 700;
  font-size: 11.5px;
  padding: 5px 9px;
}

/* Hover card for contacts */
.mblg-crm-hovercard{
  position:absolute;
  width: 270px;
  padding: 12px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
  z-index: 999999;
}
.mblg-crm-hovercard-name{ font-weight: 800; margin-bottom: 4px; }
.mblg-crm-hovercard-row{ font-size: 12px; opacity:.8; margin-bottom: 2px; }
.mblg-crm-hovercard-meta{ display:flex; flex-direction:column; gap:6px; margin: 8px 0; }
.mblg-crm-hovercard-link{ font-size:12px; text-decoration:none; }

/* Inline edit title input */
#mblg-crm-app .mblg-crm-input-title{
  font-size:18px;
  font-weight:800;
  padding:10px 12px;
  border-radius:12px;
}

/* Detail header layout */
#mblg-crm-app .mblg-crm-detail-title-wrap{ display:flex; flex-direction:column; gap:6px; }
#mblg-crm-app .mblg-crm-detail-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
#mblg-crm-app .mblg-crm-link{
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Detail views */
#mblg-crm-app .mblg-crm-tabs{ display:flex; gap:10px; margin:12px 0; }
#mblg-crm-app .mblg-crm-tab{ border:1px solid rgba(0,0,0,.12); background:#fff; padding:8px 12px; border-radius:999px; cursor:pointer; }
#mblg-crm-app .mblg-crm-tab.active{ background: rgba(0,0,0,.06); }
#mblg-crm-app .mblg-crm-detail-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:10px 0 6px; }
#mblg-crm-app .mblg-crm-detail-title{ margin:0; font-size:22px; }
#mblg-crm-app .mblg-crm-detail-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px 20px; padding:14px; border:1px solid rgba(0,0,0,.08); border-radius:14px; background:#fff; }
#mblg-crm-app .mblg-crm-related{ margin-top:14px; padding:14px; border:1px solid rgba(0,0,0,.08); border-radius:14px; background:#fff; }
#mblg-crm-app .mblg-crm-related-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
#mblg-crm-app .mblg-crm-list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
#mblg-crm-app .mblg-crm-badge{ display:inline-block; padding:2px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.12); font-size:12px; background:rgba(0,0,0,.04); }
#mblg-crm-app .mblg-crm-filter-check{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:rgba(15,23,42,.85); user-select:none; }
#mblg-crm-app .mblg-crm-filter-check input{ width:16px; height:16px; }

/* Outcome emphasis: WON/Lost badges (used in deal detail + related lists + tables) */
.mblg-crm-badge.is-won,
.mblg-crm-badge.is-closed_won{
  background:#16a34a; /* green-600 */
  border-color:#15803d; /* green-700 */
  color:#ffffff;
}
.mblg-crm-badge.is-lost,
.mblg-crm-badge.is-closed_lost{
  background:#dc2626; /* red-600 */
  border-color:#b91c1c; /* red-700 */
  color:#ffffff;
}
.mblg-status-pill{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  font-size:11px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  line-height:1.4;
  background:rgba(0,0,0,.04);
  white-space:nowrap;
}
.mblg-status-pill.is-lead{
  background: rgba(59,130,246,0.10);
  border-color: rgba(59,130,246,0.25);
  color: #1e40af;
}
.mblg-status-pill.is-lost{
  background: #dc2626; /* red-600 */
  border-color: #b91c1c; /* red-700 */
  color: #ffffff;
}
.mblg-status-pill.is-won{
  background: #16a34a; /* green-600 */
  border-color: #15803d; /* green-700 */
  color: #ffffff;
}

#mblg-crm-app .mblg-crm-muted{ color: rgba(0,0,0,.55); font-size: 13px; }

/* Expanded detail views */
#mblg-crm-app .mblg-crm-detail-meta{ font-size:12px; color: rgba(0,0,0,.55); }
#mblg-crm-app .mblg-crm-detail-card{ border:1px solid rgba(0,0,0,.08); border-radius:16px; background:#fff; padding:18px; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
#mblg-crm-app .mblg-crm-section-title{ font-weight:700; margin-bottom:12px; color: rgba(0,0,0,.75); }
#mblg-crm-app .mblg-crm-detail-grid{ background: transparent; margin-top: 0; gap: 18px 30px; }
#mblg-crm-app .mblg-crm-kv{ grid-template-columns: 180px 1fr; }
#mblg-crm-app .mblg-crm-kv > div:first-child{ color: rgba(0,0,0,.55); }
#mblg-crm-app .mblg-crm-tabs{ padding: 10px; border-radius: 14px; background: rgba(0,0,0,.03); display:inline-flex; }
#mblg-crm-app .mblg-crm-tab{ background:#fff; }

/* Pipeline (Kanban) */
#mblg-crm-app .mblg-crm-pipeline{ margin-top: 12px; }
#mblg-crm-app .mblg-crm-board{ display:flex; gap:14px; overflow-x:auto; padding-bottom: 10px; }
#mblg-crm-app .mblg-crm-col{ min-width: 220px; flex: 0 0 220px; background: rgba(0,0,0,.02); border:1px solid rgba(0,0,0,.06); border-radius: 14px; }
#mblg-crm-app .mblg-crm-col.drag-over{ border-color: rgba(0,0,0,.18); }
#mblg-crm-app .mblg-crm-col-head{ display:flex; justify-content:space-between; align-items:center; padding:10px 10px 6px; }
#mblg-crm-app .mblg-crm-col-title{ font-weight:700; font-size:13px; }
#mblg-crm-app .mblg-crm-col-count{ font-size:12px; color: rgba(0,0,0,.55); }
#mblg-crm-app .mblg-crm-col-list{ padding: 6px 10px 10px; display:flex; flex-direction:column; gap:10px; min-height: 60px; }
#mblg-crm-app .mblg-crm-card{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius: 12px; padding:10px; box-shadow: 0 1px 0 rgba(0,0,0,.03); cursor: grab; }
#mblg-crm-app .mblg-crm-card:active{ cursor: grabbing; }
#mblg-crm-app .mblg-crm-card-title a{ font-weight:700; text-decoration:none; }
#mblg-crm-app .mblg-crm-card-meta{ margin-top:6px; font-size:12px; color: rgba(0,0,0,.75); display:flex; flex-direction:column; gap:4px; }
#mblg-crm-app .mblg-crm-card-row .lbl{ color: rgba(0,0,0,.5); }
#mblg-crm-app .mblg-crm-btn.active{ outline: 2px solid rgba(0,0,0,.18); }

/* Pipeline enhancements */
#mblg-crm-app .mblg-crm-filters{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background: rgba(0,0,0,.02);
  margin-bottom:12px;
}
#mblg-crm-app .mblg-crm-filters-spacer{ flex:1; }
#mblg-crm-app .mblg-crm-filters-label{ font-size:12px; color: rgba(0,0,0,.55); }
#mblg-crm-app .mblg-crm-pipe-col-meta{ font-size:12px; color: rgba(0,0,0,.55); margin-top:4px; }
#mblg-crm-app .mblg-crm-pipe-card-sub{ font-size:12px; color: rgba(0,0,0,.72); margin-top:6px; }
#mblg-crm-app .mblg-crm-pipe-card-sub a{ color: inherit; text-decoration: underline; }

@media (max-width: 720px){
  }

/* Modal (global, since overlay is appended outside the app container sometimes) */
.mblg-crm-modal-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  z-index: 99999;
}
.mblg-crm-modal{
  width: min(720px, 94vw);
  max-height: 86vh;
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.mblg-crm-modal.mblg-crm-modal--sm{
  /* Confirm / small dialogs shouldn't feel like full-page modals */
  width: min(460px, 94vw);
}
.mblg-crm-modal-hdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.01);
}
.mblg-crm-modal-title{ font-size:18px; font-weight:700; line-height:1.2; }
.mblg-crm-modal-body{ padding:16px; overflow:auto; }

.mblg-crm-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px 16px;
  border-top:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.01);
}

/* Task Notes (multi-note list) */
.mblg-task-notes-wrap{ margin-bottom:14px; }
.mblg-task-notes-list{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.mblg-task-note-item{
  position: relative;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:12px;
  padding:10px 12px 10px 18px; /* room for left accent */
  background: rgba(0,0,0,0.02);
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

/* Make each entry feel like a distinct “card” inside the modal */
.mblg-task-note-item::before{
  content:'';
  position:absolute;
  left:10px;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:4px;
  background: var(--mblg-primary, #2563eb);
  opacity: 0.35;
}
.mblg-task-note-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:14px;
  margin-bottom:6px;
}

.mblg-note-meta-seg{
  font-weight:700;
  color: rgba(0,0,0,0.78);
}
.mblg-note-meta-sep{
  font-weight:600;
  opacity:0.35;
}
.mblg-note-meta-type{
  padding:3px 10px;
  border-radius:999px;
  background: rgba(37,99,235,0.10);
  border:1px solid rgba(37,99,235,0.18);
}
.mblg-task-note-text{ white-space:pre-wrap; word-break:break-word; }
.mblg-task-notes-form .mblg-crm-textarea{ width:100%; }

/* Buttons inside modals (in case overlay is mounted outside #mblg-crm-app) */
.mblg-crm-modal-overlay .mblg-crm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;

  /* Pill style to match CRM UI */
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;

  border: 1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.04);
  color: #111;

  cursor:pointer;
  font: inherit;
  line-height: 1;
  user-select: none;
}

.mblg-crm-modal-overlay .mblg-crm-btn:hover{
  background: rgba(0,0,0,.07);
}

.mblg-crm-modal-overlay .mblg-crm-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Deal outcome buttons (detail header) */
#mblg-crm-app .mblg-crm-btn-won{
  background:#16a34a !important; /* green-600 */
  border-color:#15803d !important; /* green-700 */
  color:#ffffff !important;
}
#mblg-crm-app .mblg-crm-btn-won:hover{
  background:#15803d !important;
  border-color:#166534 !important; /* green-800 */
}
#mblg-crm-app .mblg-crm-btn-lost{
  background:#dc2626 !important; /* red-600 */
  border-color:#b91c1c !important; /* red-700 */
  color:#ffffff !important;
}
#mblg-crm-app .mblg-crm-btn-lost:hover{
  background:#b91c1c !important;
  border-color:#991b1b !important; /* red-800 */
}

/* Primary / Danger need fallbacks because CSS vars may not exist outside #mblg-crm-app */
.mblg-crm-modal-overlay .mblg-crm-btn-primary{
  background: var(--mblg-primary, #2563eb) !important;
  border-color: var(--mblg-primary, #2563eb) !important;
  color: #fff !important;
}

.mblg-crm-modal-overlay .mblg-crm-btn-primary:hover{
  background: var(--mblg-primary-hover, #1d4ed8) !important;
  border-color: var(--mblg-primary-hover, #1d4ed8) !important;
}

.mblg-crm-modal-overlay .mblg-crm-btn-danger{
  background: var(--mblg-danger, #dc2626) !important;
  border-color: var(--mblg-danger, #dc2626) !important;
  color:#fff !important;
}

.mblg-crm-modal-overlay .mblg-crm-btn-danger:hover{
  background: var(--mblg-danger-hover, #b91c1c) !important;
  border-color: var(--mblg-danger-hover, #b91c1c) !important;
}

.mblg-crm-modal-overlay .mblg-crm-btn-ghost{
  background: transparent;
  border-color: rgba(0,0,0,.12);
}

.mblg-crm-modal-overlay .mblg-crm-btn-small{
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

/* Modal sub-header link row */
.mblg-crm-modal-subhdr{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:10px 16px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.01);
}

/* Inline errors inside modals (global banner can be obscured by overlays) */
.mblg-crm-inline-error{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(220, 38, 38, .35);
  background: rgba(220, 38, 38, .06);
  border-radius: 10px;
  font-size: 13px;
}

/* Form controls (work both inside and outside #mblg-crm-app) */
.mblg-crm-input,
.mblg-crm-select,
.mblg-crm-textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.16);
  border-radius:10px;
  background:#fff;
  font: inherit;
  color: inherit;
}
.mblg-crm-select{ appearance:auto; }
.mblg-crm-textarea{ min-height:120px; resize:vertical; }

.mblg-crm-input:focus,
.mblg-crm-select:focus,
.mblg-crm-textarea:focus{
  outline:none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.22);
  border-color: rgba(37,99,235,.55);
}
/* Pipeline enhancements */
.mblg-crm-avatar{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  background: rgba(80,80,120,0.12);
  color: #2b2b3a;
  flex: 0 0 auto;
}
.mblg-crm-card-top,
.mblg-crm-pipe-card-top{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.mblg-crm-card-top .mblg-crm-card-title,
.mblg-crm-pipe-card-top .mblg-crm-pipe-card-title{
  margin:0;
}
.mblg-crm-col[data-stage],
.mblg-crm-pipe-col[data-stage]{
  --accent: #7b61ff;
  border-top: 4px solid var(--accent);
}
.mblg-crm-col[data-stage="lead"], .mblg-crm-pipe-col[data-stage="lead"]{ --accent:#6c63ff; }
.mblg-crm-col[data-stage="contacted"], .mblg-crm-pipe-col[data-stage="contacted"]{ --accent:#2d9cdb; }
.mblg-crm-col[data-stage="qualified"], .mblg-crm-pipe-col[data-stage="qualified"]{ --accent:#27ae60; }
.mblg-crm-col[data-stage="proposal"], .mblg-crm-pipe-col[data-stage="proposal"]{ --accent:#f2c94c; }
.mblg-crm-col[data-stage="won"]{ --accent:#219653; }
.mblg-crm-col[data-stage="lost"]{ --accent:#eb5757; }
.mblg-crm-col[data-stage="fridge"]{ --accent:#bdbdbd; }

.mblg-crm-col-head,
.mblg-crm-pipe-col-header{
  display:flex;
  align-items:center;
  gap:10px;
}
.mblg-crm-col-add{
  margin-left:auto;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  cursor:pointer;
  font-weight:800;
  line-height:1;
}
.mblg-crm-col-add:hover{ transform: translateY(-1px); }

/* Floating create button */
.mblg-crm-fab-wrap{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99999;
}
.mblg-crm-fab{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  font-size: 28px;
  font-weight: 800;
  cursor: pointer;
}
.mblg-crm-fab-menu{
  position:absolute;
  right:0;
  bottom:62px;
  min-width: 240px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.14);
  display:none;
}
.mblg-crm-fab-menu.open{ display:block; }
.mblg-crm-fab-menu-title{
  font-weight: 700;
  margin-bottom: 8px;
}
.mblg-crm-fab-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.mblg-crm-fab-stage{
  min-width: 140px;
}

/* Buttons (force readable labels regardless of theme) */

/* Top navigation (Accounts / Contacts / Leads / Deals) — match CRM button system */
#mblg-crm-app .mblg-crm-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin: 6px 0 12px;
}

#mblg-crm-app .mblg-crm-nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:8px 14px;
  border-radius: var(--mblg-radius-sm);
  border:1px solid var(--mblg-border-strong);
  background: var(--mblg-surface-0);
  color: var(--mblg-text) !important;
  font-weight:700;
  font-size: 13px;
  line-height: 1;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, filter .15s ease, box-shadow .15s ease;
}
#mblg-crm-app .mblg-crm-nav-btn:hover{ filter:brightness(.98); }
#mblg-crm-app .mblg-crm-nav-btn:active{ filter:brightness(.97); }
#mblg-crm-app .mblg-crm-nav-btn:disabled{ opacity:.6; cursor:not-allowed; }
#mblg-crm-app .mblg-crm-nav-btn:focus{ outline:none; }
#mblg-crm-app .mblg-crm-nav-btn:focus-visible{ box-shadow: var(--mblg-focus-ring); }

/* Micro-win: active state reflects whether the section has records */
#mblg-crm-app 
#mblg-crm-app 

/* Button system (single source of truth) */
#mblg-crm-app .mblg-crm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:8px 14px;
  border-radius: var(--mblg-radius-sm);
  border:1px solid var(--mblg-border-strong);
  background: var(--mblg-surface-0);
  color: var(--mblg-text) !important;
  font-weight:700;
  font-size: 13px;
  line-height: 1;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, filter .15s ease, box-shadow .15s ease;
}
.mblg-crm-btn:hover{ filter:brightness(.98); }
.mblg-crm-btn:active{ filter:brightness(.97); }
.mblg-crm-btn:disabled{ opacity:.6; cursor:not-allowed; }

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

#mblg-crm-app .mblg-crm-btn-primary{
  background: var(--mblg-primary) !important;
  color:#fff !important;
  border-color: var(--mblg-primary) !important;
}
#mblg-crm-app .mblg-crm-btn-secondary{
  background: rgba(0,0,0,.06);
}
#mblg-crm-app .mblg-crm-btn-ghost{
  background: transparent;
  border-color: rgba(0,0,0,.10);
}

#mblg-crm-app .mblg-crm-btn-small{
  padding:6px 10px;
  font-size:12px;
}
/* Legacy button aliases (backwards compatibility) */
#mblg-crm-app .mblg-crm-btn.primary,
#mblg-crm-app button.primary{
  background: var(--mblg-primary);
  border-color: var(--mblg-primary);
  color: #fff;
}
#mblg-crm-app .mblg-crm-btn.ghost,
#mblg-crm-app button.ghost{
  background: transparent;
}

/* Callout / disclaimer */
.mblg-crm-callout{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  margin: 8px 0 14px 0;
  font-size: 13px;
  line-height: 1.35;
}
.mblg-crm-callout-warn{
  border-color: #f59e0b;
  background: #fffbeb;
}

/* Inline helper link under selects */
.mblg-crm-inline-help{
  margin-top: 6px;
  font-size: 12px;
}
.mblg-crm-inline-link{
  text-decoration: none;
}
.mblg-crm-inline-link:hover{
  text-decoration: underline;
}

/* Stronger hierarchy for required fields */
.mblg-crm-form-field > label{
  font-weight: 600;
}
.mblg-crm-label-required{
  font-weight: 700;
}
.mblg-crm-req{
  font-weight: 800;
}

/* Modal sub-header link row */
.mblg-crm-modal-subhdr{
  margin-bottom: 10px;
  text-align: right;
}

/* Notes display */
.mblg-crm-notes{white-space:pre-wrap;border:1px solid #e5e7eb;border-radius:12px;padding:12px;min-height:60px;}

/* Timeline (v1) */
.mblg-crm-timeline-note{
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
}
.mblg-crm-timeline-note textarea{
  width: 100%;
  resize: vertical;
  min-height: 80px;
}
.mblg-crm-timeline-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.mblg-crm-tl-item{
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
}
.mblg-crm-tl-header{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.mblg-crm-tl-type{
  font-weight: 700;
  text-transform: capitalize;
}
.mblg-crm-tl-meta{
  color:#6b7280;
  font-size: 12px;
  white-space: nowrap;
}
.mblg-crm-tl-subject{
  font-weight: 600;
  margin-bottom: 6px;
}
.mblg-crm-tl-body.muted{
  color:#6b7280;
  font-size: 13px;
}

/* Actions dropdown in tables */
.mblg-crm-action-select{
  padding: 8px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
}

/* Inbox tabs */
.mblg-crm-tabs{
  display:flex;
  gap:8px;
  align-items:center;
}

#mblg-crm-app .mblg-crm-btn-danger{
  border-color:#dc2626 !important;
  color:#dc2626 !important;
}
.mblg-crm-btn-danger:hover{
  background:#fef2f2;
}

/* Do Not Contact banner */
.mblg-crm-dnc-banner{
  border: 2px solid #b91c1c;
  background: #fee2e2;
  color: #7f1d1d;
  padding: 12px 14px;
  border-radius: 12px;
  margin: 0 0 14px 0;
}
.mblg-crm-dnc-banner-title{
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 4px;
}
.mblg-crm-dnc-banner-body{
  font-size: 13px;
  line-height: 1.35;
}

/* Tasks: completed section toggle */
#mblg-crm-app .mblg-crm-tasks-done-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:14px;
}
#mblg-crm-app .mblg-crm-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  cursor:pointer;
  user-select:none;
}
#mblg-crm-app .mblg-crm-toggle input[type="checkbox"]{
  width:16px;
  height:16px;
}

/* --- Tasks UI: collapsed add row (Clarity & Speed sprint) --- */
#mblg-crm-app .mblg-crm-addtask-collapsed{
  display:flex;
  align-items:center;
  gap:2px;
  padding:10px 12px;
  border:1px dashed #cfd6df;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
  margin-top:10px;
}
#mblg-crm-app .mblg-crm-addtask-collapsed:hover{
  border-style:solid;
}
#mblg-crm-app .mblg-crm-addtask-plus{
  font-weight:800;
}

/* Detail page: grouped fields + footer meta */
#mblg-crm-app .mblg-crm-groups{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
#mblg-crm-app .mblg-crm-group{
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
  border-radius: 14px;
  padding: 12px;
}
#mblg-crm-app .mblg-crm-group-title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  margin-bottom: 10px;
}
#mblg-crm-app .mblg-crm-detail-footer{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

/* Collapsible sections (used for Notes) */
#mblg-crm-app .mblg-crm-collapse{
  margin-top: 12px;
  border: 1px dashed rgba(0,0,0,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.015);
  overflow: hidden;
}
#mblg-crm-app .mblg-crm-collapse-summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
#mblg-crm-app .mblg-crm-collapse-summary::-webkit-details-marker{ display:none; }
#mblg-crm-app .mblg-crm-collapse-title{
  font-weight: 800;
}
#mblg-crm-app .mblg-crm-collapse-hint{
  font-size: 12px;
  color: rgba(0,0,0,.55);
}
#mblg-crm-app .mblg-crm-collapse-body{
  padding: 0 14px 14px 14px;
}

/* Allow pills to be clickable when used as buttons */
#mblg-crm-app button.mblg-crm-pill{ cursor:pointer; }
#mblg-crm-app button.mblg-crm-pill:focus{ outline: none; box-shadow: 0 0 0 2px rgba(0,0,0,.12); }

.mblg-crm-toast-content{display:flex; align-items:center; gap:12px;}
.mblg-crm-toast-icon{width:34px; height:34px; border-radius:999px; background: #22c55e; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900;}
.mblg-crm-toast.error{border-color: rgba(239,68,68,.35);}
.mblg-crm-toast.error .mblg-crm-toast-icon{background:#ef4444;}
.mblg-crm-toast.error .mblg-crm-toast-title{color:#b91c1c;}
.mblg-crm-toast.success{border-color: rgba(34,197,94,.25);}

.mblg-crm-toast-title{font-size:15px; font-weight:800; margin:0;}
.mblg-crm-toast-msg{font-size:13px; opacity:.8; margin:2px 0 0 0;}

/* === Strong Active CRM Nav Button (scoped + obvious) === */
#mblg-crm-app .mblg-crm-nav-btn.active {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); /* subtle selected rail */
}

#mblg-crm-app .mblg-crm-nav-btn.active:hover {
  background: #1d4ed8 !important;
  border-color: #1e40af !important;
}

/* === Back Button (matches CRM buttons) === */
#mblg-crm-app .mblg-crm-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}

#mblg-crm-app .mblg-crm-back-btn:hover {
  background: #f9fafb;
}

#mblg-crm-app .mblg-crm-back-btn .arrow {
  font-size: 16px;
  line-height: 1;
}

/* === Back Button (actual class: .mblg-crm-back) === */
#mblg-crm-app .mblg-crm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}

#mblg-crm-app .mblg-crm-back:hover {
  background: #f9fafb;
  border-color: #c2c8d0;
}

#mblg-crm-app .mblg-crm-back:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* === Accessibility sanity: visible focus states === */
#mblg-crm-app .mblg-crm-nav-btn:focus-visible,
#mblg-crm-app .mblg-crm-back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,.35);
}

/* === CRM container uniform padding (all sides) === */
#mblg-crm-app {
  padding: 24px;
  box-sizing: border-box;
}

/* Slightly tighter on small screens */
@media (max-width: 768px) {
  #mblg-crm-app {
    padding: 16px;
  }
}

/* === Login page styling to match CRM UI === */
#mblg-crm-app .mblg-crm-login-page,
.mblg-crm-login-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

#mblg-crm-app .mblg-crm-login-card,
.mblg-crm-login-card {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
}

#mblg-crm-app .mblg-crm-login-card h2,
.mblg-crm-login-card h2 {
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: 800;
  color: #111827;
}

#mblg-crm-app .mblg-crm-login-card p,
.mblg-crm-login-card p {
  margin: 0 0 18px 0;
  color: #6b7280;
}

/* wp_login_form markup */
#mblg-crm-app .mblg-crm-login-card form p,
.mblg-crm-login-card form p {
  margin: 12px 0;
}

#mblg-crm-app .mblg-crm-login-card label,
.mblg-crm-login-card label {
  display: block;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

#mblg-crm-app .mblg-crm-login-card input[type="text"],
#mblg-crm-app .mblg-crm-login-card input[type="password"],
.mblg-crm-login-card input[type="text"],
.mblg-crm-login-card input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 14px;
  box-sizing: border-box;
}

#mblg-crm-app .mblg-crm-login-card input[type="text"]:focus,
#mblg-crm-app .mblg-crm-login-card input[type="password"]:focus,
.mblg-crm-login-card input[type="text"]:focus,
.mblg-crm-login-card input[type="password"]:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

#mblg-crm-app .mblg-crm-login-card .login-remember,
.mblg-crm-login-card .login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
}

#mblg-crm-app .mblg-crm-login-card input[type="checkbox"],
.mblg-crm-login-card input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

#mblg-crm-app .mblg-crm-login-card input[type="submit"],
.mblg-crm-login-card input[type="submit"] {
  appearance: none;
  border: 1px solid #1d4ed8;
  background: #2563eb;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#mblg-crm-app .mblg-crm-login-card input[type="submit"]:hover,
.mblg-crm-login-card input[type="submit"]:hover {
  background: #1d4ed8;
  border-color: #1e40af;
}

#mblg-crm-app .mblg-crm-login-card a,
.mblg-crm-login-card a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}

#mblg-crm-app .mblg-crm-login-card a:hover,
.mblg-crm-login-card a:hover {
  text-decoration: underline;
}

/* Hide the default WordPress tiny input widths if theme applies */
.mblg-crm-login-card #user_login,
.mblg-crm-login-card #user_pass {
  max-width: 100%;
}

/* Fallback: if login wrapper class differs, still style it */
.mblg-crm-login-required {
  max-width: 520px;
  margin: 24px auto;
}

/* === Final UI polish === */

/* Task toggles inline & consistent */
#mblg-crm-app .mblg-crm-task-filters {
  display: flex;
  align-items: center;
  gap: 16px;
}

#mblg-crm-app .mblg-crm-task-filters label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

/* Section headers stronger */
#mblg-crm-app .mblg-crm-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #111827;
  margin-bottom: 12px;
}

#mblg-crm-app .mblg-crm-section {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  background: #ffffff;
}

#mblg-crm-app .mblg-crm-section + .mblg-crm-section {
  margin-top: 20px;
}

/* === UI polish: task toggles inline + prominent section/group headers === */

/* Task toggles: keep checkbox + label text on ONE line */
#mblg-crm-app label.mblg-crm-toggle,
#mblg-crm-app label.mblg-crm-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap !important;
  line-height: 1.2;
}

/* Prevent theme CSS from stacking label text */
#mblg-crm-app label.mblg-crm-toggle span,
#mblg-crm-app label.mblg-crm-inline span {
  display: inline !important;
  white-space: nowrap !important;
}

/* Give the filter cluster a little breathing room */
#mblg-crm-app label.mblg-crm-toggle { margin-right: 10px; }
#mblg-crm-app label.mblg-crm-inline { margin-right: 10px; }

/* Group title (e.g., Contact Info / Company Info) clearer */
#mblg-crm-app .mblg-crm-group-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #374151 !important;
  margin: 0 0 10px 0 !important;
}

/* Make each group feel like a section inside the card */
#mblg-crm-app .mblg-crm-group {
  padding: 16px !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
}

#mblg-crm-app .mblg-crm-group + .mblg-crm-group {
  margin-top: 14px !important;
}

/* === Stronger section contrast === */

/* Main section card (Contact Information, Tasks & Follow-Ups, etc.) */
#mblg-crm-app .mblg-crm-detail-card {
  background: #f9fafb !important;
  border: 1px solid #d1d5db !important;
}

/* Inner groups (Contact Info, Company Info) */
#mblg-crm-app .mblg-crm-group {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

/* Subtle depth */
#mblg-crm-app .mblg-crm-detail-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* --- Tasks Bulk UX polish --- */
.mblg-crm-tasks-body .mblg-crm-list-item.is-selected{
  background: rgba(59,130,246,0.08);
  border-radius: 10px;
  padding: 8px;
}
.mblg-crm-bulk-actions.mblg-crm-bulk-busy{
  opacity: 0.85;
}
.mblg-crm-bulk-actions.mblg-crm-bulk-busy .mblg-crm-btn{
  cursor: wait;
}

/* Bulk actions row (Tasks) */
.mblg-crm-bulk-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:8px 0;
}
.mblg-crm-bulk-selectall{
  display:flex;
  align-items:center;
  gap:6px;
  user-select:none;
}
.mblg-crm-bulk-selectall input{
  margin:0;
}

/* =========================================================
 * Floating action button (optional)
 * ========================================================= */
.mblg-crm-fab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999990;
}
.mblg-crm-fab-btn{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: none;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  font-size: 28px;
  font-weight: 800;
  cursor: pointer;
}
.mblg-crm-fab-menu{
  position: absolute;
  right: 0;
  bottom: 62px;
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.14);
  display: none;
}
.mblg-crm-fab-menu.open{ display: block; }
.mblg-crm-avatar{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  background: rgba(80,80,120,0.12);
  color: #2b2b3a;
}
.mblg-crm-card-top,
.mblg-crm-pipe-card-top{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

/* Nav buttons: make active state match primary */
#mblg-crm-app .mblg-crm-nav-btn{
  border-radius: var(--mblg-radius-pill);
}
#mblg-crm-app .mblg-crm-nav-btn.active{
  background: var(--mblg-primary);
  border-color: var(--mblg-primary);
  color:#fff;
}

/* === UI Consistency Overrides: unify all buttons to pill-outline style (v0.2.8.37) === */
#mblg-crm-app .mblg-crm-btn,
#mblg-crm-app .mblg-crm-nav-btn,
#mblg-crm-app .mblg-crm-qa-btn,
#mblg-crm-app .mblg-crm-back,
#mblg-crm-app .mblg-crm-bulkbar button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:34px;
  padding:8px 14px;
  border-radius: var(--mblg-radius-pill);
  border:1px solid var(--mblg-border-strong);
  background: var(--mblg-surface-0);
  color: var(--mblg-text);
  font-weight:600;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  transition: background .12s ease, border-color .12s ease, transform .02s ease;
}

#mblg-crm-app .mblg-crm-btn:hover,
#mblg-crm-app .mblg-crm-nav-btn:hover,
#mblg-crm-app .mblg-crm-qa-btn:hover,
#mblg-crm-app .mblg-crm-back:hover,
#mblg-crm-app .mblg-crm-bulkbar button:hover{
  background: var(--mblg-surface-1);
}

#mblg-crm-app .mblg-crm-btn:active,
#mblg-crm-app .mblg-crm-nav-btn:active,
#mblg-crm-app .mblg-crm-qa-btn:active,
#mblg-crm-app .mblg-crm-back:active,
#mblg-crm-app .mblg-crm-bulkbar button:active{
  transform: translateY(1px);
}

#mblg-crm-app .mblg-crm-btn:focus-visible,
#mblg-crm-app .mblg-crm-nav-btn:focus-visible,
#mblg-crm-app .mblg-crm-qa-btn:focus-visible,
#mblg-crm-app .mblg-crm-back:focus-visible,
#mblg-crm-app .mblg-crm-bulkbar button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--mblg-focus);
}

/* Primary (filled blue) */
#mblg-crm-app .mblg-crm-btn-primary,
#mblg-crm-app .mblg-crm-nav-btn.active{
  background: var(--mblg-primary);
  border-color: var(--mblg-primary);
  color: #fff;
}
#mblg-crm-app .mblg-crm-btn-primary:hover,
#mblg-crm-app .mblg-crm-nav-btn.active:hover{
  background: var(--mblg-primary-hover);
  border-color: var(--mblg-primary-hover);
}

/* Danger */
#mblg-crm-app .mblg-crm-btn-danger{
  background: #fff;
  border-color: var(--mblg-danger);
  color: var(--mblg-danger);
}
#mblg-crm-app .mblg-crm-btn-danger:hover{
  background: rgba(220,38,38,.06);
}

/* Small */
#mblg-crm-app .mblg-crm-btn-small{
  height:30px;
  padding:6px 12px;
  font-size:12px;
}

/* Disabled */
#mblg-crm-app .mblg-crm-btn:disabled,
#mblg-crm-app .mblg-crm-nav-btn:disabled,
#mblg-crm-app .mblg-crm-qa-btn:disabled,
#mblg-crm-app .mblg-crm-back:disabled,
#mblg-crm-app .mblg-crm-bulkbar button:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

# mblg section shell
#mblg-crm-app .mblg-crm-section{background: var(--mblg-surface-1);border:1px solid rgba(0,0,0,.14);border-radius:16px;padding:18px;margin-bottom:16px;box-shadow:0 1px 0 rgba(0,0,0,.03);} 

/* Group header row (title left, actions right) */
#mblg-crm-app .mblg-crm-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
#mblg-crm-app .mblg-crm-group-head .mblg-crm-group-title{ margin:0; }

/* =========================
   Layout Rhythm (Sprint #6)
   Non-destructive: standard spacing & alignment
   ========================= */

#mblg-crm-app .mblg-crm-shell{
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: var(--mblg-page-pad);
  display:flex;
  flex-direction:column;
  gap: var(--mblg-stack-gap);
}

#mblg-crm-app .mblg-crm-header{
  margin: 0;
}

#mblg-crm-app .mblg-crm-body{
  display:flex;
  flex-direction:column;
  gap: var(--mblg-stack-gap);
  width: 100%;
}

#mblg-crm-app .mblg-crm-content{
  display:flex;
  flex-direction:column;
  gap: var(--mblg-card-gap);
  min-width: 0;
  /* Ensure main content expands to fill available space in the flex row */
  flex: 1 1 auto;
  width: 100%;
}

#mblg-crm-app .mblg-crm-view{
  display:flex;
  flex-direction:column;
  gap: var(--mblg-card-gap);
  width: 100%;
}

#mblg-crm-app .mblg-crm-toolbar{
  display:flex;
  align-items:center;
  gap: var(--mblg-toolbar-gap);
  margin: 10px 0;
  flex-wrap:wrap;
}

/* Debug: Show IDs toggle */
#mblg-crm-app .mblg-crm-showids{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  background: #fff;
  user-select: none;
}
#mblg-crm-app .mblg-crm-showids input[type="checkbox"]{
  width: 16px;
  height: 16px;
}

/* =========================================================
 * Option A: lightweight totals strip (YTD / date range)
 * ========================================================= */

#mblg-crm-app .mblg-crm-stats-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--mblg-toolbar-gap);
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.02);
}

#mblg-crm-app .mblg-crm-stats-left{ display:flex; flex-direction:column; gap: 2px; }
#mblg-crm-app .mblg-crm-stats-title{ font-weight:700; font-size: 14px; opacity: .85; }
#mblg-crm-app .mblg-crm-stats-value{
  font-size: 36px;
  font-weight: 900;
  line-height: 1.1;
  color: #16a34a;
}
#mblg-crm-app .mblg-crm-stats-meta{ font-size: 12px; opacity: .7; }

#mblg-crm-app .mblg-crm-stats-right{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

#mblg-crm-app .mblg-crm-stats-label{ font-size: 12px; opacity: .7; margin-right: 2px; }
#mblg-crm-app .mblg-crm-stats-preset{ min-width: 110px; }

#mblg-crm-app .mblg-crm-list-item{ display:flex; align-items:center; gap: var(--mblg-inline-gap); }

/* Detail grids */
#mblg-crm-app .mblg-crm-detail-grid{
  gap: var(--mblg-card-gap);
  margin-top: 12px;
}

/* Related grid rhythm */
#mblg-crm-app .mblg-crm-related{
  gap: var(--mblg-card-gap);
}

/* Tasks section wrappers */
#mblg-crm-app .mblg-crm-tasks-body{
  display:flex;
  flex-direction:column;
  gap: var(--mblg-space-3);
}

#mblg-crm-app .mblg-crm-tasks-done-wrap{
  margin-top: var(--mblg-space-3);
}

#mblg-crm-app .mblg-crm-tasks-done-body{
  display:flex;
  flex-direction:column;
  gap: var(--mblg-space-3);
}

/* Notes badge on Notes pill */
.mblg-crm-notes-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(37,99,235,0.12);
  color:rgba(37,99,235,0.95);
  font-size:12px;
  font-weight:700;
  line-height:18px;
}

/* Subtle highlight when notes exist (badge is primary signal; this is secondary polish) */
.mblg-crm-btn.mblg-crm-notes-pill.has-notes{
  background-color: rgba(37,99,235,0.06);
  border-color: rgba(37,99,235,0.25);
}
.mblg-crm-btn.mblg-crm-notes-pill.has-notes:hover{
  background-color: rgba(37,99,235,0.08);
}

/* CRM Totals Strip – Dollar amounts */
.mblg-crm-stats-strip .mblg-crm-stat-value {
    color: #16a34a; /* green */
    font-weight: 700;
}

/* Hide Leads/Deals local Table/Pipeline toggle buttons (moved to top nav) */
#mblg-crm-app .mblg-crm-subview-toggle{
  display:none !important;
}

/* Pipeline nav pill: disabled when not on Leads/Deals */
#mblg-crm-app .mblg-crm-nav-btn.mblg-crm-nav-pipeline.disabled{
  opacity: .55;
}

/* Pipeline view ribbon (Leads/Deals toggle) */
#mblg-crm-app .mblg-crm-pipeline-ribbon{
  display:none;
  margin: 0 0 12px 0;
  display:flex;
  gap:10px;
  align-items:center;
}
#mblg-crm-app .mblg-crm-pipeline-ribbon .mblg-crm-btn{
  border-radius: 999px;
  padding: 10px 16px;
}
#mblg-crm-app .mblg-crm-pipeline-ribbon .mblg-crm-btn.active{
  background: var(--mblg-blue, #2563eb);
  color: #fff;
  border-color: transparent;
}

/* Pipeline ribbon toggle */
#mblg-crm-app .mblg-crm-pill-toggle{
  display:inline-flex;
  gap:8px;
  align-items:center;
}
#mblg-crm-app .mblg-crm-toggle-btn{
  border-radius:999px;
  padding:10px 16px;
}
#mblg-crm-app .mblg-crm-toggle-btn.active{
  background: var(--mblg-blue, #2563eb);
  color:#fff;
  border-color: transparent;
}

.mblg-crm-stats-label{
  font-size: 15px;
  font-weight: 600;
}

.mblg-crm-stats-sub{
  font-size: 14px;
}

/* Prevent double-click duplicate submits */
#mblg-crm-app .mblg-crm-qa-btn.is-busy,
#mblg-crm-app .mblg-crm-btn.is-busy{
  opacity: 0.6;
  pointer-events: none;
}

/* Temperature pill */
.mblg-temp-pill{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  font-size:11px;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  background:rgba(0,0,0,.04);
  white-space:nowrap;
}
.mblg-temp-pill.is-cold{
  background: rgba(59,130,246,0.12);
  border-color: rgba(59,130,246,0.22);
  color: #1e40af;
}
.mblg-temp-pill.is-warm{
  background: rgba(245,158,11,0.14);
  border-color: rgba(245,158,11,0.25);
  color: #92400e;
}
.mblg-temp-pill.is-hot{
  background: rgba(220,38,38,0.14);
  border-color: rgba(220,38,38,0.25);
  color: #7f1d1d;
}
.mblg-temp-pill.is-none{
  background: rgba(107,114,128,0.08);
  border-color: rgba(107,114,128,0.18);
  color: rgba(0,0,0,.55);
}

/* Deal status pills */
.mblg-pill.won {
  background-color: #16a34a;
  color: #fff;
  border-color: #16a34a;
}

.mblg-pill.lost {
  background-color: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

/* FORCE outcome badge colors (avoid theme overrides) */
#mblg-crm-app .mblg-crm-badge.is-won,
#mblg-crm-app .mblg-crm-badge.is-closed_won{
  background:#16a34a !important;
  border-color:#15803d !important;
  color:#ffffff !important;
}
#mblg-crm-app .mblg-crm-badge.is-lost,
#mblg-crm-app .mblg-crm-badge.is-closed_lost{
  background:#dc2626 !important;
  border-color:#b91c1c !important;
  color:#ffffff !important;
}

/* Pipeline stats: three-up totals */
.mblg-crm-stats-left-multi{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
  flex-wrap:nowrap;
}

.mblg-crm-stats-block{
  min-width: 0;
  width: 100%;
}

/* Pipeline totals color coding */
.mblg-crm-stats-strip [data-stat="active-value"] {
  color: #2563eb; /* blue */
}

.mblg-crm-stats-strip [data-stat="won-value"] {
  color: #16a34a; /* green */
}

.mblg-crm-stats-strip [data-stat="lost-value"] {
  color: #dc2626; /* red */
}

/* Pipeline totals color coding (override base green) */
#mblg-crm-app .mblg-crm-stats-value[data-stat="active-value"] {
  color: #2563eb !important; /* blue */
}
#mblg-crm-app .mblg-crm-stats-value[data-stat="won-value"] {
  color: #16a34a !important; /* green */
}
#mblg-crm-app .mblg-crm-stats-value[data-stat="lost-value"] {
  color: #dc2626 !important; /* red */
}

/* Pipeline: center Kanban on wide screens */
#mblg-crm-app .mblg-pipeline-board-wrap{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Pipeline: center Kanban columns within the centered wrap */
#mblg-crm-app .mblg-pipeline-board-wrap .mblg-crm-board{
  justify-content: center;
}

/* Pipeline Velocity + Next Action Visibility */
.mblg-crm-card-chips{
  margin-left:auto;
  display:flex;
  gap:6px;
  align-items:center;
}
.mblg-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  line-height:1.4;
  font-weight:700;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  white-space:nowrap;
}
.mblg-chip.is-overdue{
  border-color: rgba(220, 38, 38, .35);
  background: rgba(220, 38, 38, .08);
}
.mblg-chip.is-stalled{
  border-color: rgba(245, 158, 11, .35);
  background: rgba(245, 158, 11, .10);
}
.mblg-chip.is-nonext{
  border-color: rgba(148, 163, 184, .6);
  background: rgba(148, 163, 184, .18);
}
.mblg-crm-card-row.no-next-action .lbl{
  font-weight:800;
}
.mblg-crm-card-row.no-next-action span:last-child{
  font-weight:800;
}

/* Pipeline: right-rail layout (Needs Attention queue) */
#mblg-crm-app 
/* Pipeline command bar (Option E): compact KPIs + range + filters */
#mblg-crm-app .mblg-pipeline-commandbar{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px 12px 16px;
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}
#mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-strip{
  flex: 1 1 560px;
  margin: 0;
  padding: 12px 12px;
}
#mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-filters{
  flex: 1 1 560px;
  margin: 0;
  padding: 12px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
#mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-left-multi{
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 14px;
  align-items: start;
}
#mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-block{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 4px;
  align-items:flex-start;
}
#mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-title{
  font-size: 12px;
}
#mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-value{
  font-size: 30px;
  line-height: 1.05;
}
#mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-right{
  gap: 8px;
  flex-wrap: wrap;
}
#mblg-crm-app .mblg-pipeline-attn-toggle{
  display: none;
  gap: 6px;
  align-items: center;
}
#mblg-crm-app .mblg-pipeline-attn-toggle .icon{ font-size: 14px; }
#mblg-crm-app .mblg-pipeline-attn-toggle .count{ font-weight: 700; }

/* Drawer mode for Needs Attention (Option B) */
#mblg-crm-app .mblg-pipeline-attn-close{ display: none; }
.mblg-pipeline-attn-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,.35);
z-index: 9990;
}

@media (max-width: 1599px){
  #mblg-crm-app .mblg-pipeline-attn-toggle{ display: inline-flex; }
  #mblg-crm-app .mblg-pipeline-layout{
    display: block;
  }
  #mblg-crm-app .mblg-pipeline-attn{
    position: fixed;
    top: 90px;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    max-height: none;
    z-index: 10050;
    transform: translateX(100%);
    transition: transform .18s ease;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;}
  #mblg-crm-app .mblg-pipeline-attn.is-open{
    transform: translateX(0);
  }
  #mblg-crm-app .mblg-pipeline-attn-close{ display: inline-flex; }
  /* Board should never overflow horizontally */
  #mblg-crm-app .mblg-pipeline-board-wrap{ overflow-x: auto; }
}

.mblg-pipeline-layout-wrap{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}
#mblg-crm-app .mblg-pipeline-layout{
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
#mblg-crm-app .mblg-pipeline-layout .mblg-pipeline-board-wrap{
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
#mblg-crm-app .mblg-pipeline-attn{
  width: 340px;
  flex: 0 0 340px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  position: sticky;
  top: 12px;
}
#mblg-crm-app .mblg-pipeline-attn-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px 10px 12px;
  border-bottom: 1px solid #eef2f7;
}
#mblg-crm-app .mblg-pipeline-attn-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight: 700;
  color:#111827;
}
#mblg-crm-app .mblg-pipeline-attn-title .icon{
  font-size: 15px;
}
#mblg-crm-app .mblg-pipeline-attn-focus{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  color:#374151;
  user-select:none;
}
#mblg-crm-app .mblg-pipeline-attn-body{
  padding: 10px 10px 12px 10px;
  max-height: calc(100vh - 170px);
  overflow:auto;
}
#mblg-crm-app .mblg-pipeline-attn-empty{
  padding: 10px;
  font-size: 13px;
  color:#6b7280;
}
#mblg-crm-app .mblg-pipeline-attn-count{
  font-size: 12px;
  color:#6b7280;
  padding: 0 6px 8px 6px;
}
#mblg-crm-app .mblg-pipeline-attn-item{
  width: 100%;
  text-align: left;
  border: 1px solid #eef2f7;
  background: #fff;
  border-radius: 12px;
  padding: 10px 10px;
  margin: 0 0 10px 0;
  cursor: pointer;
}
#mblg-crm-app .mblg-pipeline-attn-item:hover{
  border-color:#dbeafe;
  box-shadow: 0 1px 2px rgba(37,99,235,.10);
}
#mblg-crm-app .mblg-pipeline-attn-item-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#mblg-crm-app .mblg-pipeline-attn-item-title{
  font-weight: 700;
  font-size: 13px;
  color:#111827;
  line-height: 1.2;
}
#mblg-crm-app .mblg-pipeline-attn-item-sub{
  margin-top: 4px;
  font-size: 12px;
  color:#6b7280;
}
#mblg-crm-app .mblg-pipeline-attn-item-meta{
  margin-top: 6px;
  font-size: 12px;
  color:#374151;
}
#mblg-crm-app .mblg-attn-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
#mblg-crm-app .mblg-attn-badge.is-overdue{
  background:#fee2e2;
  color:#991b1b;
  border-color:#fecaca;
}
#mblg-crm-app .mblg-attn-badge.is-nonext{
  background:#fef3c7;
  color:#92400e;
  border-color:#fde68a;
}
#mblg-crm-app .mblg-attn-badge-spacer{
  width: 1px;
}

/* Responsive: hide right-rail on narrow screens */
@media (max-width: 1100px){
  #mblg-crm-app .mblg-pipeline-layout{ display:block; }
  #mblg-crm-app .mblg-pipeline-attn{ display:none; }
  #mblg-crm-app .mblg-pipeline-board-wrap{ max-width: 1600px; margin: 0 auto; padding: 0 16px; }
}

/* --- Pipeline responsive hotfix (v0.3.7.4) --- */
@media (max-width: 1280px){
  #mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-value{
    font-size: clamp(20px, 2.4vw, 28px);
  }
  #mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-left-multi{
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }
  }

/* KPI responsive: keep stacked labels/values but allow wrapping at laptop widths */
@media (max-width: 1300px){
  #mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-left-multi{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }
  #mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-block{
    flex: 0 1 180px;
  }
  #mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-value{
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.05;
  }
}
/* Ensure drawer-mode overrides win (was being overridden by later sticky rules) */
@media (max-width: 1599px){
  #mblg-crm-app .mblg-pipeline-layout{ display: block; }
  #mblg-crm-app .mblg-pipeline-layout .mblg-pipeline-board-wrap{ width: 100%; }
  #mblg-crm-app .mblg-pipeline-attn{
    position: fixed !important;
    top: 90px;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    max-height: none;
    z-index: 10050;
    transform: translateX(100%);
    transition: transform .18s ease;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  #mblg-crm-app .mblg-pipeline-attn.is-open{ transform: translateX(0); }
  #mblg-crm-app .mblg-pipeline-board-wrap{ overflow-x: auto; }
  #mblg-crm-app .mblg-pipeline-layout-wrap{ overflow: visible; }
}

/* Hotfix: keep KPI blocks tight when stacked */
#mblg-crm-app .mblg-crm-stats-block > *{ margin-top: 0; }

/* =========================================================
 * Pipeline KPI stack (force original compact vertical stack)
 * - Always vertical (no grid / wrap)
 * - Tight spacing like classic CRM summary
 * ========================================================= */
#mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-left-multi{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  gap: 6px !important; /* compact gap between KPIs */
  width: auto;
}

#mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-block{
  display:flex !important;
  flex-direction:column !important;
  row-gap: 1px !important; /* label/value/meta spacing */
  width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

#mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-title{
  font-size: 13px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

#mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-value{
  font-size: 32px !important; /* large but compact */
  line-height: 1.05 !important;
  margin: 0 !important;
}

#mblg-crm-app .mblg-pipeline-commandbar .mblg-crm-stats-meta{
  font-size: 12px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

/* Needs Attention emphasis (amber, no pulse) */
#mblg-crm-app .mblg-pipeline-commandbar .count{
  color:#F59E0B !important;
  font-weight:600;
}
#mblg-crm-app .mblg-pipeline-commandbar .icon,
#mblg-crm-app .mblg-pipeline-commandbar .label{
  color:#F59E0B !important;
  font-weight:600;
}

/* Needs Attention rail header emphasis (match command bar) */
#mblg-crm-app .mblg-pipeline-attn-head,
#mblg-crm-app .mblg-pipeline-attn-title,
#mblg-crm-app .mblg-pipeline-attn-head .icon {
  color: #F59E0B !important;
  font-weight: 600;
}

/* Needs Attention count badge (command bar) */
#mblg-crm-app .mblg-pipeline-commandbar .mblg-pipeline-attn-toggle .mblg-attn-count-badge{
  display:none; /* shown only when has-count */
  align-items:center;
  justify-content:center;
  height:18px;
  min-width:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  margin-left:6px;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
#mblg-crm-app .mblg-pipeline-commandbar .mblg-pipeline-attn-toggle.has-count .mblg-attn-count-badge{
  display:inline-flex;
}

/* Licensing banner */
.mblg-crm-license-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  background:rgba(255,193,7,.12);
  margin-bottom:12px;
  font-size:13px;
}
.mblg-crm-license-banner__text{
  flex:1;
}
.mblg-crm-license-banner__link{
  text-decoration:none;
  font-weight:600;
}



/* Duplicate contact warning */
.mblg-crm-dup-warning {
  color: #b91c1c; /* red-700 */
  font-weight: 600;
  background: #fef2f2; /* subtle red background */
  border: 1px solid #fecaca;
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 8px;
}

.mblg-crm-dup-warning + div a {
  color: #b91c1c;
  font-weight: 600;
  text-decoration: underline;
}







/* Disabled primary button (duplicate prevention) */
.mblg-crm-btn.is-disabled,
button.mblg-crm-btn-primary.is-disabled,
.mblg-crm-btn-primary.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* Account assignment UI */
.mblg-crm-assigned-users{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mblg-crm-assigned-users-hint{
  font-size:12px;
  opacity:.85;
}
.mblg-crm-assigned-users-box{
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  padding:10px;
  max-height:180px;
  overflow:auto;
  background:#fff;
}
.mblg-crm-assigned-user{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 4px;
}
.mblg-crm-assigned-user input[type="checkbox"]{
  margin:0;
}