/* =========================================================================
   views/leads-sources.css — Leads — source chips, Highlights, channel filter
   Split from the old monolithic styles/views.css. LOAD ORDER MATTERS:
   the <link> order in Magnet CRM.html / Client App.html reproduces the
   original file order, so the cascade is unchanged — add new rules to the
   matching feature file, not the end of the list.
   ========================================================================= */
/* ================= Leads: source chips, Highlights, channel filter =========
   The source-first leads redesign: the Source cell (channel chip + specific
   source), the per-lead Highlights preview, the channel-filter chips above
   the table, and the Sources summary panel. Channel colors are semantic
   (Meta blue / website green / funnel amber / manual gray) — independent of
   the stage palette. */
.src-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.src-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: var(--fw-semibold); line-height: 1;
  border-radius: 999px; padding: 4px 9px; white-space: nowrap;
}
.src-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.src-chip--sm { font-size: 10.5px; padding: 3px 7px; gap: 5px; flex-shrink: 0; }
.src-meta   { background: var(--chan-meta-bg); color: var(--chan-meta-fg); }
.src-web    { background: var(--chan-web-bg); color: var(--chan-web-fg); }
.src-funnel { background: var(--chan-funnel-bg); color: var(--chan-funnel-fg); }
.src-manual { background: var(--chan-manual-bg); color: var(--chan-manual-fg); }
.src-sub {
  font-size: 11px; color: var(--text-soft); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 2px;
}
.kcard .deal-title { display: flex; align-items: center; gap: 8px; }
.kcard .deal-title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Contact cell: name + business/context subtitle */
.contact-id { display: flex; flex-direction: column; min-width: 0; }
.contact-sub { font-size: 11.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Highlights cell: the lead's own answers, one readable line */
.highlights-cell { min-width: 0; }
.hl-text {
  display: block; font-size: var(--text-sm); color: var(--text-soft); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hl-text b { color: var(--text); font-weight: var(--fw-medium); }
.hl-sep { color: var(--gray-300); }
.hl-empty { color: var(--gray-300); }

/* Source dropdown (toolbar) + Sources toggle. The channel filter lives up in
   the toolbar with Status/date/Filter (routeToolbars.channelControl); its menu
   options carry a channel chip + per-channel count. */
.filter-menu .opt-count {
  margin-left: auto; font-size: 11px; color: var(--text-soft);
  font-variant-numeric: tabular-nums; background: var(--gray-50);
  border-radius: 999px; padding: 1px 8px;
}
.filter-menu [data-channel-opt] { gap: 8px; }
.filter-menu [data-channel-opt] > svg { flex-shrink: 0; }
.main-toolbar .btn.is-on { background: var(--primary-50); border-color: var(--primary-200); color: var(--primary-700); }
.main-toolbar .btn.is-on svg { color: var(--primary-700); }

/* Sources summary panel: volume + close rate per source */
.sources-panel {
  background: var(--gray-0); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 16px; margin: 0 0 12px;
}
.sources-loading { font-size: var(--text-sm); color: var(--text-soft); padding: 6px 0; }
/* Smooth expand/collapse: the wrapper clips (overflow) and toggleSourcesPanel
   animates a real pixel height (0 <-> content) so the ease applies the whole
   way. Resting open = height:auto; the JS sets inline px during the transition,
   then clears it. Born .is-open on first render (no animation, height:auto). */
.sources-collapse {
  overflow: hidden; height: 0; opacity: 0; margin-bottom: 0;
  transition: height var(--dur-slow) var(--ease-enter),
              opacity var(--dur) var(--ease-enter),
              margin-bottom var(--dur-slow) var(--ease-enter);
}
.sources-collapse.is-open { height: auto; opacity: 1; margin-bottom: 12px; }
.sources-collapse > .sources-panel { margin: 0; }
@media (prefers-reduced-motion: reduce) { .sources-collapse { transition: none; } }
.sources-head, .sources-row {
  display: grid; grid-template-columns: minmax(150px, 240px) 1fr 58px 72px 92px;
  gap: 12px; align-items: center;
}
.sources-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); font-weight: var(--fw-semibold); padding: 2px 0 8px; }
.sources-head span:nth-child(3), .sources-head span:nth-child(4), .sources-head span:nth-child(5) { text-align: right; }
.sources-row { padding: 5px 0; }
.sources-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sources-label { font-size: 12px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sources-bar { position: relative; height: 18px; background: var(--gray-50); border-radius: 5px; overflow: hidden; display: flex; align-items: center; }
.sources-fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; opacity: .28; }
.sources-fill.src-meta { background: #1877f2; } .sources-fill.src-web { background: #0e9f6e; }
.sources-fill.src-funnel { background: #c2700a; } .sources-fill.src-manual { background: #64748b; }
.sources-n { position: relative; font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--text); padding-left: 8px; font-variant-numeric: tabular-nums; }
.sources-closed, .sources-rate, .sources-resp { font-size: 12px; color: var(--text-soft); text-align: right; font-variant-numeric: tabular-nums; }
.sources-rate { font-weight: var(--fw-semibold); color: var(--text); }
@media (max-width: 640px) {
  .sources-head { display: none; }
  .sources-row { grid-template-columns: minmax(120px, 1fr) 1fr 50px; }
  .sources-closed, .sources-resp { display: none; }
}

/* Lead drawer: the Source row */
.dw-source { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dw-source .src-cell { flex-direction: row; align-items: center; gap: 8px; }
.dw-source-trail { font-size: 12px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Leads Settings: featured-answer picker + sources manager */
.ls-featured-row { display: flex; align-items: center; gap: 8px; }
.ls-featured-row .ls-count { margin-left: auto; font-size: 11px; color: var(--text-soft); font-variant-numeric: tabular-nums; background: var(--gray-50); border-radius: 999px; padding: 1px 8px; }
.ls-featured-row input:disabled + span { opacity: .5; }
.ls-source-row { display: grid; grid-template-columns: 104px 1fr 34px 34px; gap: 6px; align-items: center; margin-bottom: 6px; }
.ls-source-row.is-archived { opacity: .55; }
.ls-source-row .input { min-width: 0; }
.ls-newsource { display: grid; grid-template-columns: 1fr 104px auto; gap: 6px; margin-top: 10px; }

/* Mobile lead cards: surface the source chip + Highlights line (the card
   layout whitelists cells, so the redesign's two new cells opt in here).
   The actions kebab stays hidden on cards by design — tapping the row opens
   the lead. Order: name/date · business · source · highlights · status. */
@media (max-width: 640px) {
  .ctable tbody td.source-cell { display: flex; order: 3; flex: 0 0 100%; padding: 0; }
  .ctable tbody td.source-cell .src-cell { flex-direction: row; align-items: center; gap: 7px; }
  .ctable tbody td.source-cell .src-sub { padding-left: 0; }
  .ctable tbody td.highlights-cell { display: block; order: 4; flex: 0 0 100%; padding: 0; min-width: 0; }
  .ctable tbody td.status-td { order: 5; }
}
@media (max-width: 640px) {
  /* no answers → no Highlights line on the card (the dash is desktop-only) */
  .ctable tbody td.highlights-cell:has(.hl-empty) { display: none; }
}

/* No pinned columns: once the columns don't fit (--lead-min-w above), the
   WHOLE table — Status and the ⋯ actions included — scrolls horizontally
   inside the card (the overflow-x:auto in the min-width block above). */

/* Status cell: when the column is tight (min-width/scrolled state) the
   follow-up due chip wraps neatly UNDER the status pill instead of being
   clipped mid-chip. On wide tables the columns stretch (table-layout:fixed
   distributes the spare width), so the chip stays inline. */
@media (min-width: 641px) {
  .ctable tbody td.status-td { white-space: normal; }
  .ctable tbody .status-cell { flex-wrap: wrap; row-gap: 3px; }
}

/* Highlights: wrap up to TWO lines (rows are 66px — one line wasted half the
   cell), then ellipsis. Applies on desktop cells and mobile cards alike. */
.hl-text {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ctable tbody td.highlights-cell { white-space: normal; }
.ls-auto-note { color: var(--primary-700); }

/* Settings panels: the drawer divider's negative margins (tuned for the lead
   drawer's section padding) collapse the gap here — give it real breathing
   room between the column toggles and Featured answers. */
.ls-panel .dw-divider { margin: 18px calc(-1 * var(--space-5)) 16px; }

/* AI summary: bold tail of the Highlights cell + the drawer line under Source */
.hl-ai { font-weight: var(--fw-medium); }
.dw-ai-summary {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 10px;
  font-size: var(--text-sm); color: var(--text); line-height: 1.5;
}
.dw-ai-summary svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 3px; color: var(--primary-600); }

/* Leads Settings: detected fields (field map) */
.ls-fieldmap-row { display: grid; grid-template-columns: 1fr 110px 20px; gap: 8px; align-items: center; margin-bottom: 6px; }
.ls-fm-key { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-fm-role { min-width: 0; }
.ls-fm-ai svg { width: 13px; height: 13px; color: var(--primary-600); }