/* MB21 c8: Dashboard Summary widget card list (c6 M1 deferral landing).
   Renders Companies / Contacts / Quotes / Activities sub-tabs as a stack
   of RowRenderer-driven card-mode rows instead of dense table rows.
   No "FORMWO" truncation; full labels visible. */
.dash-summary-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}
.dash-summary-cards .dst-card {
  cursor: pointer;
}
.dash-summary-cards .dst-card > .rr-row {
  /* Inherit RowRenderer card styling unmodified — the .dst-card wrapper is
     just the click host with data-row-id; the inner .rr-row is the card. */
  margin-bottom: 0;
}

/* lists.css — MB21 c4 consolidation
 *
 * List-page renderers (Companies, Contacts, Activities tabs), table-to-card
 * conversions, dashboard summary list styling, search/filter rows,
 * .al-*/.ql-*/.da-*/.rr-row/.cl-row/.dst-*/.bh-* surfaces, dormant accounts list.
 *
 * Receives migrated rules per the c4 classification rubric.
 */



/* === migrated from styles-additions-v32.css === */
/* =============================================================
 * 4. Activity list identity (M2b)
 * ============================================================= */
.al-row-contact-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: #171717;
  color: var(--color-accent, #FFD500);
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
}

.al-row-time {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-tertiary, #a3a3a3);
  margin-left: auto;
}

/* === migrated from styles-additions-v25.css === */
/* =============================================================
 * 2. Batch-setup banner in Contacts view (F4)
 * ============================================================= */
.cl-batch-setup-banner {
  /* Shown when entering Contacts via "New batch" tab */
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: rgba(255, 213, 0, 0.10);
  border: 1px solid var(--color-accent, #FFD500);
  border-radius: 6px;
  margin-bottom: var(--space-3, 12px);
  flex-wrap: wrap;
}

.cl-batch-setup-icon {
  font-size: 18px;
  color: var(--text-primary, #171717);
}

.cl-batch-setup-text {
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  color: var(--text-primary, #171717);
}

.cl-batch-setup-text strong {
  font-weight: 600;
}

.cl-batch-setup-cancel {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-strong, #d4d4d4);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-secondary, #525252);
  cursor: pointer;
  font-family: inherit;
}

.cl-batch-setup-cancel:hover { background: var(--surface-subtle, #f8f8f7); }

/* =============================================================
 * 3. Smart-add buttons (F4)
 * ============================================================= */
.cl-smart-add-row {
  display: flex;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
  flex-wrap: wrap;
}

.cl-smart-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 6px 12px;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text-primary, #171717);
  white-space: nowrap;
}

.cl-smart-add-btn:hover {
  background: var(--surface-subtle, #f8f8f7);
  border-color: var(--border-strong, #d4d4d4);
}

.cl-smart-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cl-smart-add-count {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-secondary, #525252);
  margin-left: 2px;
}

/* === migrated from styles-additions-v24.css === */
/* =============================================================
 * 5. Contacts list — checkbox column + multi-select rows
 * ============================================================= */
.cl-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-3, 12px);
  align-items: center;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-bottom: 1px solid var(--border-default, #e5e5e5);
  transition: background-color 120ms ease;
  cursor: pointer;
}

.cl-row:hover { background: var(--surface-subtle, #f8f8f7); }

.cl-row.is-selected { background: rgba(255, 213, 0, 0.06); }

.cl-row.is-selected:hover { background: rgba(255, 213, 0, 0.10); }

.cl-row-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--color-accent, #FFD500);
}

.cl-row-body {
  display: grid;
  grid-template-columns:
    minmax(120px, 1.4fr)   /* name */
    minmax(120px, 1.4fr)   /* company */
    minmax(100px, 1fr)     /* position */
    minmax(140px, 1.4fr)   /* email */
    minmax(100px, 1fr)     /* phone */
    minmax(80px,  0.8fr);  /* last activity */
  gap: var(--space-3, 12px);
  align-items: center;
  min-width: 0;
}

.cl-row-body > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-name {
  font-weight: 500;
  color: var(--text-primary, #171717);
}

.cl-company,
.cl-position,
.cl-email,
.cl-phone {
  color: var(--text-secondary, #525252);
  font-size: 13px;
}

.cl-last-activity {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-tertiary, #a3a3a3);
  text-align: right;
}

.cl-header-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-3, 12px);
  align-items: center;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-bottom: 2px solid var(--border-strong, #d4d4d4);
  background: var(--surface-subtle, #f8f8f7);
}

.cl-header-row .cl-row-body > * {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #a3a3a3);
}

/* Responsive collapse for contacts list */
@media (max-width: 899px) {
  .cl-row-body {
    grid-template-columns:
      minmax(120px, 1.4fr)
      minmax(120px, 1.2fr)
      minmax(100px, 1fr)
      minmax(140px, 1.4fr)
      minmax(80px, 0.8fr);
  }
  .cl-phone { display: none; }
}

@media (max-width: 699px) {
  .cl-row-body {
    grid-template-columns:
      minmax(100px, 1.5fr)
      minmax(120px, 1.5fr)
      minmax(80px, 1fr);
  }
  .cl-position,
  .cl-email,
  .cl-phone { display: none; }
}

/* =============================================================
 * 9. Batch History tab UI
 * ============================================================= */
.bh-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.bh-entry {
  padding: var(--space-3, 12px);
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 6px;
}

.bh-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3, 12px);
  cursor: pointer;
}

.bh-entry-title {
  font-weight: 500;
  color: var(--text-primary, #171717);
}

.bh-entry-meta {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-tertiary, #a3a3a3);
  display: flex;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
}

.bh-entry-reason-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bh-entry-reason-pill.is-completed   { background: rgba(22, 163, 74, 0.10);  color: var(--color-pass, #16a34a); }

.bh-entry-reason-pill.is-ended_early { background: rgba(245, 158, 11, 0.10); color: #b45309; }

.bh-entry-reason-pill.is-expired     { background: rgba(0, 0, 0, 0.06);      color: var(--text-tertiary, #a3a3a3); }

.bh-entry-body {
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px dashed var(--border-default, #e5e5e5);
  display: none;
}

.bh-entry.is-expanded .bh-entry-body {
  display: block;
}

.bh-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
}

.bh-result-stat {
  padding: var(--space-2, 8px);
  background: var(--surface-subtle, #f8f8f7);
  border-radius: 4px;
}

.bh-result-stat-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #a3a3a3);
}

.bh-result-stat-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #171717);
}

.bh-empty {
  padding: var(--space-5, 24px);
  text-align: center;
  color: var(--text-tertiary, #a3a3a3);
  font-style: italic;
}

/* === end migrated from styles-additions-v24.css === */


/* === migrated from styles-additions-v21.css === */
/* styles-additions-v21.css — MB6: Sprint 8 / Cadence groundwork
 *
 * Adds:
 *   - Signal density list on dashboard (high-signal accounts)
 *   - "Respond within 48h" buying-signal callout card
 *   - Sequence builder modal
 *   - Sequence indicator pill on account panel
 *   - Pre-send checker dialog (speed bump)
 *   - "+ Enroll in sequence" action bar button
 *
 * Loaded after v20.css.
 */
/* ============================================================
 * High-signal accounts list (dashboard)
 * ============================================================ */
.hsa-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hot-signal-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hot-signal-list li {
  font-size: 12px;
  color: var(--text-secondary);
}

.hot-signal-list strong {
  color: var(--text-primary);
}

/* === migrated from styles-additions-v19.css === */
.sc-list {
  display: flex;
  flex-direction: column;
}

/* === migrated from styles-additions-v16.css === */
/* ============================================================
   4. DASHBOARD SUMMARY TABLE

   The configurable widget that replaces 4 dashboard widgets.
   Segmented control for entity selection + per-entity sort dropdown
   + table of top-10 with "see all →" link.
   ============================================================ */
.dst-widget {
  background: var(--bg-elev-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.dst-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.dst-segmented {
  display: inline-flex;
  background: var(--bg-elev-2);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 2px;
}

.dst-seg-btn {
  background: transparent;
  border: 0;
  padding: var(--space-1_5) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing-out),
              color var(--motion-fast) var(--easing-out);
}

.dst-seg-btn:hover { color: var(--text-primary); }

.dst-seg-btn.is-active {
  background: var(--bg-elev-1);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

.dst-sort {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
}

.dst-sort-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
}

.dst-table-wrap {
  overflow-x: auto;
}

.dst-see-all {
  display: block;
  text-align: right;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
  text-decoration: none;
}

.dst-see-all:hover { color: var(--text-primary); }

/* === migrated from styles-additions-v14.css === */
/* styles-additions-v14.css
   ============================================================
   Polish patch 3 styles:
   - Stale-activity row tinting (amber → orange → deep red)
   - Stale badges + days-overdue indicator
   - Composer "notes / topics" textarea
   - X close button on email-card-detail overlay
   - Win-probability stale-impact tooltip styling
   ============================================================ */
/* ----- Staleness tier tints (applied to activity rows) ----- */
.rr-row.staleness-late {
  border-left: 4px solid #d69e2e;          /* amber */
  background: rgba(214, 158, 46, 0.04);
}

.rr-row.staleness-critical {
  border-left: 4px solid #dd6b20;          /* orange */
  background: rgba(221, 107, 32, 0.06);
}

.rr-row.staleness-blocked {
  border-left: 4px solid #9b1c1c;          /* deep red */
  background: rgba(155, 28, 28, 0.08);
}

.rr-row.staleness-blocked:hover {
  background: rgba(155, 28, 28, 0.12);
}

/* === migrated from styles-additions-v13.css === */
.eo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* === migrated from styles-additions-v12.css === */
.ob-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px;
}

/* === migrated from components.css === */
/* ---------- List blocks (containers for each enabled list) ---------- */
.ds-list-block { margin-bottom: 24px; }

.ds-list-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.ds-list-title {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.ds-list-count {
  font-size: 11px;
  opacity: 0.5;
}

/* ---------- Activity list ---------- */
.al-empty {
  font-size: 12px;
  opacity: 0.55;
  font-style: italic;
  padding: 16px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  text-align: center;
}

.al-group { margin-bottom: 18px; }

.al-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 8px;
}

.al-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}

.al-group-title {
  font-size: 13px;
  font-weight: 500;
}

.al-group-count {
  font-size: 11px;
  opacity: 0.6;
  margin-left: auto;
}

.al-overdue-badge {
  color: #993C1D;
  font-weight: 500;
}

.al-more {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.al-more:hover {
  color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.03);
}

/* ---------- Quote list ---------- */
.ql-empty {
  font-size: 12px;
  opacity: 0.55;
  font-style: italic;
  padding: 16px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  text-align: center;
}

.ql-group { margin-bottom: 18px; }

.ql-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 8px;
}

.ql-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ql-group-title {
  font-size: 13px;
  font-weight: 500;
}

.ql-group-meta {
  font-size: 11px;
  opacity: 0.6;
  margin-left: auto;
}

/* ---------- Dormant accounts list ---------- */
.da-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.da-header-text {
  font-size: 12px;
  opacity: 0.7;
}

.da-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  opacity: 0.7;
}

.da-threshold-select {
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.da-empty {
  font-size: 12px;
  opacity: 0.55;
  font-style: italic;
  padding: 16px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  text-align: center;
}

/* ============================================================
   SECTION — Universal infographic row renderer (Step 3)
   Originally: styles-additions-v4.css
   ============================================================ */
/* ---------- Universal infographic row ---------- */
.rr-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 12px 14px 12px 12px;
  border-radius: 12px;
  margin-bottom: 6px;
  cursor: pointer;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  transition: transform 0.1s ease;
}

.rr-row:hover { transform: translateY(-1px); }

/* ---------- Override old activity/quote/dormant row styles ---------- */
/* The .al-card, .ql-row, .da-row classes from v3 are no longer used by the
   list renderers (everything goes through .rr-row), but the group header
   styles are still in use. The .da-list grid is also no longer used.
   We leave v3's headers untouched. */
.da-list,
.al-card,
.ql-row,
.da-row {
  /* legacy classes — no longer rendered, but kept defined to avoid
     accidental visual regression if anywhere still references them. */
}

.dash-activity-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-quotes-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ============================================================
 * MB18 N4 — Contacts list adopts the card language.
 * CSS-only + scoped to #contacts-root so all batch-select JS
 * (.cl-row / .cl-row-checkbox / BatchActionBar) is untouched.
 * Id-specificity (1,1,0) wins over v24's .cl-* rules regardless
 * of stylesheet load order.
 * ============================================================ */
/* Hide the column-label header; keep the select-all checkbox. */
#contacts-root .cl-header-row .cl-row-body { display: none; }

#contacts-root .cl-header-row {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px 8px; border: 0; background: transparent;
}

/* Each row → a card; keep the checkbox column for selection. */
#contacts-root .cl-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  background: #FFFFFF;
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-bottom: 0.5px solid rgba(0,0,0,0.08); /* override v24's row divider */
}

#contacts-root .cl-row:hover { background: #FCFCFB; border-color: rgba(0,0,0,0.15); }

#contacts-root .cl-row.is-selected {
  background: rgba(255,213,0,0.10);
  border-color: rgba(255,213,0,0.55);
}

/* Body: stacked/flowing card content instead of the 6-col grid. */
#contacts-root .cl-row-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  grid-template-columns: none;
  min-width: 0;
}

#contacts-root .cl-row-body > * {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Identity treatment. */
#contacts-root .cl-name { order: 1; flex: 0 0 100%; }

#contacts-root .cl-name strong {
  display: inline-block;
  background: #FFD500; color: #171717;
  font-size: 13px; font-weight: 600;
  padding: 4px 11px; border-radius: 5px;
}

#contacts-root .cl-position {
  order: 2;
  display: inline-block;
  background: #171717; color: #FFD500;
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 3px;
}

#contacts-root .cl-company { order: 3; font-size: 12px; }

#contacts-root .cl-company .ctp-account-link { color: #525252; text-decoration: none; }

#contacts-root .cl-company .ctp-account-link:hover { text-decoration: underline; }

#contacts-root .cl-email,
#contacts-root .cl-phone { order: 4; font-size: 11px; color: #777670; }

#contacts-root .cl-last-activity {
  order: 5; margin-left: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; color: #A3A3A3;
}
/* ============================================================
 * MB25 c1 — FIX: card rows were inheriting the TABLE-row grid.
 *
 * Root cause: every card has BOTH classes `rr-row rr-card-row`.
 * lists.css defines `.rr-row { display:grid; grid-template-columns:
 * 30px 1fr; overflow:hidden; ... }` for classic table rows, and it
 * loads AFTER cards.css. Equal specificity + later load = the grid
 * WON over `.rr-card-row { display:block }`, forcing card content
 * into a 30px+1fr grid and overlapping the name pill / temp pill /
 * subtitle. (Symptom: "Cool" pill on top of a vertically-wrapped
 * name; everything squished.)
 *
 * Fix: `.rr-row.rr-card-row` (specificity 0-2-0) beats `.rr-row`
 * (0-1-0), so we restore block layout and neutralize every grid
 * property that leaked. Scoped to card-mode rows ONLY — real table
 * rows (.rr-row without .rr-card-row) keep their grid untouched.
 *
 * Also includes the demo breathing-room pass (padding/margins) so
 * the now-correct cards read cleanly on a projector.
 * ============================================================ */
.rr-row.rr-card-row {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  gap: 0;
  overflow: visible;
  align-items: initial;
  /* demo density: breathing room (was 10px 14px / margin 6px in MB18 P3) */
  padding: 16px 18px;
  margin: 0 0 12px 0;
  border-radius: 8px;
}

/* The inner rows already use their own flex; just give them demo spacing. */
.rr-row.rr-card-row .rr-card-header  { margin-bottom: 10px; gap: 14px; }
.rr-row.rr-card-row .rr-card-subtitle { gap: 8px; margin-bottom: 2px; }
.rr-row.rr-card-row .rr-card-footer  { padding-top: 12px; margin-top: 10px; }
.rr-row.rr-card-row .rr-card-identity { gap: 8px; }
.rr-row.rr-card-row .rr-card-rightcol { gap: 6px; }
.rr-row.rr-card-row .rr-card-name { padding: 5px 13px; font-size: 14px; }
.rr-row.rr-card-row .rr-card-metapills { gap: 6px; }
.rr-row.rr-card-row .rr-card-streamdots { gap: 4px; margin-left: 4px; }