/* Lugoda Sentinel — customer lifecycle.
   The CRM timeline, the stage filter chips, and the two-up chart layout the
   lifecycle reports use.

   Everything here is written against the design tokens (--panel, --line, --muted,
   --txt, --red …), so the light theme in theme-light.css remaps it for free —
   no html[data-theme="light"] block is needed below. The timeline rows reuse
   .lrow from components.css, so only the connecting spine is new. */

/* ---------------------------------------------------------- CRM timeline */
.lifecycle-tl {
  position: relative;
  padding-left: 2px;
}

/* the vertical spine that turns a list of rows into a journey */
.lifecycle-tl .tl-row {
  position: relative;
}
.lifecycle-tl .tl-row::before {
  content: "";
  position: absolute;
  left: 30px;                 /* centre of the .pill badge in the row */
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
  z-index: 0;
}
.lifecycle-tl .tl-row:first-child::before { top: 50%; }
.lifecycle-tl .tl-row:last-child::before  { bottom: 50%; }
/* a single-event timeline has no journey to draw */
.lifecycle-tl .tl-row:only-child::before  { display: none; }

.lifecycle-tl .tl-row > .pill {
  position: relative;
  z-index: 1;
  min-width: 26px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
}

.lifecycle-tl .tl-row .nm span {
  /* date · reference · amount · actor — long on small screens, so let it wrap */
  white-space: normal;
  word-break: break-word;
}

.lifecycle-tl .tl-row .btn.sm {
  flex: 0 0 auto;
  opacity: .75;
  transition: opacity .15s;
}
.lifecycle-tl .tl-row:hover .btn.sm { opacity: 1; }

/* ------------------------------------------------- stage filter chips (CRM) */
.crm-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.crm-filters .chip {
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--panel2);
  color: var(--muted);
  padding: 4px 10px;
  font-size: 12px;
  transition: .15s;
}
.crm-filters .chip:hover { color: var(--txt); border-color: var(--line); }
.crm-filters .chip b { margin-left: 4px; font-variant-numeric: tabular-nums; }

/* active filter — brand red, the same signal the sidebar uses for the live view */
.crm-filters .chip.on {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.crm-filters .chip.on b { color: #fff; }

/* -------------------------------------------- two-up charts in the reports */
.rp-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) {
  .rp-grid2 { grid-template-columns: 1fr; }
}
/* printing: stack them so neither chart is cut in half by a page break */
@media print {
  .rp-grid2 { grid-template-columns: 1fr; }
  .lifecycle-tl .tl-row::before { background: #ccc; }
}

/* ------------------------------------------- pipeline stepper exit overlay */
/* at_risk / churned / lost sit outside the forward funnel, so they are shown
   as a pill beside the stepper rather than as a sixth node that would imply
   every account passes through them. */
.pipeline + .pill {
  vertical-align: middle;
  align-self: center;
}

/* ------------------------------------------------ quiet stage-change rows */
/* A stage change is audit, not narrative. It keeps its place in the sequence
   (and its reason, which someone typed) but recedes so the substantive
   events — quoted, invoiced, commissioned — carry the story. */
.lifecycle-tl .tl-quiet { padding-top: 6px; padding-bottom: 6px; }
.lifecycle-tl .tl-quiet .nm b {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.lifecycle-tl .tl-quiet .nm span { font-size: 10px; }
.lifecycle-tl .tl-quiet > .pill {
  background: transparent;
  color: var(--muted);
  font-size: 10px;
}

/* ------------------------------------- service-line pickers (prospect form) */
/* .doc-grid label is `display:flex; flex-direction:column`, which stacks a
   checkbox above its own caption. These selectors are scoped under .doc-grid so
   they out-specify that rule rather than fighting it with !important. */
.doc-grid .ld-linefield {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.doc-grid .ld-cap {
  font-size: 12px;
  color: var(--muted);
}
.doc-grid .ld-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 3px 0 1px;
}
.doc-grid .ld-linechk {
  display: inline-flex;
  flex-direction: row;          /* beats .doc-grid label's column */
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--txt);
  cursor: pointer;
  white-space: nowrap;
}
.doc-grid .ld-linechk input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  cursor: pointer;
  accent-color: var(--red);
}
.doc-grid .ld-linechk:hover { color: var(--red); }

/* ----------------------------------------- "pick one, or type your own" ----
   A select plus a text box that appears only when Other… is chosen. Both forms
   place it inside a .doc-grid label, which is `display:flex; flex-direction:
   column; gap:4px` — so the two controls stack naturally and the box simply
   takes the next row when it unhides. */
.lc-pick-other{ margin-top:4px; }
.lc-pick-other[hidden]{ display:none; }

/* ---------------------------------------------------------------- contacts
   The repeating contact rows shared by the prospect form and Admin / Data.
   Grid rather than flex so the four fields line up down the column no matter
   how long a name or an email is. */
.lc-contacts{display:flex;flex-direction:column;gap:6px}
.lc-ctrow{
  display:grid;gap:6px;align-items:center;
  grid-template-columns:1.1fr 1.2fr .9fr 1.3fr auto auto;
}
.lc-ctrow .lc-ctf{
  background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:7px 9px;font:inherit;font-size:13px;min-width:0;
}
.lc-ctrow .lc-ctf:focus{outline:none;border-color:var(--red)}
.lc-ctprim{
  display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);
  white-space:nowrap;text-transform:none;letter-spacing:0;
}
.lc-contacts > .btn{align-self:flex-start;margin-top:2px}
@media (max-width:900px){
  .lc-ctrow{grid-template-columns:1fr 1fr;}
  .lc-ctprim{grid-column:1}
}

/* --------------------------------------------------- contacts in the CRM modal */
.crm-contacts{display:flex;flex-direction:column;gap:8px}
.crm-ctrow{
  display:grid;grid-template-columns:1.2fr 1.2fr auto auto;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line);
}
.crm-ctrow:last-child{border-bottom:none}
.crm-ctadd{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:6px;margin-top:10px}
.crm-ctadd input{
  background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:7px 9px;font:inherit;font-size:13px;min-width:0;
}
.crm-ctadd input:focus{outline:none;border-color:var(--red)}
@media (max-width:760px){
  .crm-ctrow{grid-template-columns:1fr 1fr}
  .crm-ctadd{grid-template-columns:1fr 1fr}
}

/* A reference taken from the assessment is shown, not offered for editing. */
.ca-ref-auto{opacity:.85;cursor:default}

/* Four fields per contact need the full row. Scoped to this block on purpose:
   the `doc-wide` class used all over the forms is not defined anywhere in the
   stylesheets, so defining it now would silently re-lay-out every form in the
   app. That is worth doing, but as its own change. */
.doc-grid .lc-contacts{grid-column:1 / -1}