/* ===========================================================================
   Lead lifecycle chart - /admin/lead-lifecycle
   ---------------------------------------------------------------------------
   Glass Campus surface (tokens on .admin-layout in admin.css) + a Hebrew RTL
   island, because .admin-main pins direction: ltr.

   Colour contract: every node receives --llc-color (vivid identity) and
   --llc-ink (AA-legible label) as runtime custom properties from
   src/lib/leadLifecycle.ts. Both are solved against a contrast floor, never
   hand-picked - scripts/check-lifecycle-contrast.ts is the gate. Nothing here
   may hard-code a status colour.
   =========================================================================== */

/* --- RTL island ---------------------------------------------------------- */
.llc-page {
  direction: rtl;
  text-align: right;
  padding: 1.5rem 1.75rem 2.5rem;
  color: var(--adm-ink);
}

.llc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Header -------------------------------------------------------------- */
.llc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.llc-title {
  font-size: 1.65rem;
  /* Light weight is a brand requirement wherever the gradient rule sits under
     the title - the mark never pairs with 500+. */
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--adm-ink);
  margin: 0 0 0.5rem;
  position: relative;
}

.llc-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 0.6rem;
  border-radius: 2px;
  background: var(--adm-grad-v);
  background-image: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
}

.llc-subtitle {
  margin: 0;
  max-width: 54ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--adm-ink-2);
}

.llc-stats {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  flex-wrap: wrap;
}

.llc-stat {
  min-width: 84px;
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  background: var(--adm-glass);
  -webkit-backdrop-filter: var(--adm-glass-blur);
  backdrop-filter: var(--adm-glass-blur);
  border: 1px solid var(--adm-glass-border);
  box-shadow: var(--adm-glass-shadow);
  text-align: center;
}

.llc-stat dt {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--adm-ink-3);
  margin-bottom: 0.2rem;
}

.llc-stat dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--adm-ink);
}

.llc-stat dd.llc-stat-text {
  font-size: 0.9rem;
  font-weight: 500;
}

/* --- Cards --------------------------------------------------------------- */
.llc-card {
  background: var(--adm-glass);
  -webkit-backdrop-filter: var(--adm-glass-blur);
  backdrop-filter: var(--adm-glass-blur);
  border: 1px solid var(--adm-glass-border);
  border-radius: 18px;
  box-shadow: var(--adm-glass-shadow);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.25rem;
}

/* --- Chart canvas -------------------------------------------------------- */
.llc-canvas {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding-bottom: 2.5rem;
}

/* Anchored to .llc-stages, whose box the edge maths is measured against. Uses
   physical `left`, never `inset-inline-start`: the logical property resolves to
   `right` under RTL and would pin the wrong edge, throwing every path off by the
   difference between the content width and the visible width. */
.llc-edges {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
  /* Above the family cards so connectors are not swallowed by their fill, but
     below the pills so each line terminates cleanly at a node edge. */
  z-index: 1;
}

/* Legible at rest, not just on hover: the resting state is how the flow is read
   when nobody is pointing at anything, and at 0.22 alpha the connectors could
   not be traced from one node to the next. */
.llc-edge {
  fill: none;
  stroke: rgba(25, 26, 35, 0.38);
  stroke-width: 1.6;
  transition: stroke 0.18s ease, opacity 0.18s ease;
}

.llc-edge--back {
  stroke: rgba(25, 26, 35, 0.42);
  stroke-dasharray: 5 4;
}

.llc-edge--hot {
  stroke: var(--adm-accent);
  stroke-width: 2;
}

.llc-edge--cold {
  opacity: 0.25;
}

.llc-arrowhead {
  fill: rgba(25, 26, 35, 0.48);
}

.llc-arrowhead--back {
  fill: rgba(25, 26, 35, 0.52);
}

/* --- Stages -------------------------------------------------------------- */
.llc-stages {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: max-content;
}

.llc-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  /* Sized so all seven stages fit a 1440px laptop without horizontal scroll -
     the whole point of the page is seeing the pipeline end to end. Long labels
     wrap rather than widening the column. */
  min-width: 112px;
  max-width: 130px;
  /* Above the edge layer so connectors terminate behind the pills. */
  z-index: 2;
}

/* --- Family: a head plus its sub-statuses, bracketed so the nesting reads --- */
.llc-family {
  position: relative;
  /* Below the edge layer: connectors should read across the card's tint. */
  z-index: 0;
  padding: 0.6rem 0.55rem;
  border-radius: 14px;
  background: #fff;
  background: color-mix(in srgb, var(--llc-color) 4%, #fff);
  border: 1px solid rgba(25, 26, 35, 0.07);
  border-inline-start: 3px solid var(--llc-color);
  box-shadow: 0 2px 10px rgba(0, 60, 130, 0.05);
}

.llc-family-kids {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding-inline-start: 0.5rem;
  border-inline-start: 2px dashed color-mix(in srgb, var(--llc-color) 40%, transparent);
}

/* --- Node ---------------------------------------------------------------- */
.llc-node {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.79rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: right;
  border-radius: 999px;
  cursor: default;
  color: var(--llc-ink);
  background: #fff;
  background: color-mix(in srgb, var(--llc-color) 10%, #fff);
  border: 1px solid rgba(25, 26, 35, 0.12);
  border-color: color-mix(in srgb, var(--llc-color) 34%, transparent);
  transition: box-shadow 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

.llc-node--selectable {
  cursor: pointer;
}

.llc-node:focus-visible {
  outline: 2px solid var(--adm-accent);
  outline-offset: 2px;
}

.llc-node--child {
  font-size: 0.78rem;
  font-weight: 400;
}

.llc-node-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--llc-color);
}

.llc-node-label {
  min-width: 0;
}

/* Terminal: a written flag plus a doubled edge, so the state is never carried
   by colour alone. */
.llc-node--terminal {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--llc-color) 22%, transparent);
}

.llc-node-flag {
  font-size: 0.66rem;
  opacity: 0.75;
  flex: 0 0 auto;
}

/* Current: a solid ring, a lift off the page and the word - never colour alone.
   The white inner ring is what turns the pill into a selected object rather
   than a slightly brighter neighbour. The fill deliberately stays at the 10%
   tint the contrast gate solves the ink against (see the header note); the
   emphasis is carried entirely by the edge, the ring and the shadow. */
.llc-node--current {
  border-color: var(--llc-color);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--llc-color),
    0 6px 14px color-mix(in srgb, var(--llc-color) 26%, transparent);
  /* offsetTop/offsetLeft ignore transforms, so the edge maths is unaffected. */
  transform: translateY(-1px);
  font-weight: 600;
  z-index: 3;
}

.llc-node-badge {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  background: var(--llc-ink);
  color: #fff;
}

.llc-node--recommended {
  outline: 2px dashed color-mix(in srgb, var(--llc-color) 55%, transparent);
  outline-offset: 2px;
}

/* Visited: a status this lead has already been through. Deliberately uses
   background-image and a glyph only - box-shadow belongs to --current and
   --terminal, outline to --recommended, and a visited node is very often
   also one of those. */
.llc-node--visited {
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--llc-color) 16%, transparent) 0 2px,
    transparent 2px 7px
  );
  border-style: dashed;
}

.llc-node-seen {
  font-size: 0.62rem;
  opacity: 0.7;
  flex: 0 0 auto;
}

.llc-node--dimmed {
  opacity: 0.32;
}

/* --- Registration band: axes 2 and 3, deliberately neutral ---------------- */
.llc-regband {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(99, 107, 125, 0.06);
  border: 1px dashed rgba(99, 107, 125, 0.35);
}

.llc-regband-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.5rem;
}

.llc-regband-title {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--adm-ink-2);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.llc-regband-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}

.llc-regband-label {
  width: 100%;
  font-size: 0.68rem;
  font-weight: 600;
  /* ink-3 measured 4.42 against the band's tinted fill - one step darker. */
  color: var(--adm-ink-2);
}

.llc-regchip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.2rem 0.5rem;
  border-radius: 7px;
  font-size: 0.72rem;
  color: var(--llc-color);
  background: color-mix(in srgb, var(--llc-color) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--llc-color) 28%, transparent);
}

.llc-regchip i {
  font-size: 0.62rem;
}

.llc-regband-note {
  margin: 0.35rem 0 0;
  font-size: 0.68rem;
  line-height: 1.55;
  color: var(--adm-ink-2);
}

/* --- Return-channel key -------------------------------------------------- */
.llc-channel-key {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  font-size: 0.74rem;
  color: var(--adm-ink-3);
}

.llc-channel-swatch {
  width: 34px;
  height: 0;
  flex: 0 0 auto;
  border-top: 2px dashed rgba(25, 26, 35, 0.4);
}

/* --- Hover / focus detail strip ------------------------------------------ */
.llc-detail {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--adm-line);
  min-height: 4.5rem;
}

.llc-detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--llc-ink);
  background: color-mix(in srgb, var(--llc-color) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--llc-color) 34%, transparent);
}

.llc-detail-text {
  margin: 0.5rem 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--adm-ink-2);
}

.llc-detail-next {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--adm-ink-3);
}

.llc-detail-next--terminal {
  color: var(--adm-ink-3);
}

.llc-detail-next-label {
  font-weight: 600;
  color: var(--adm-ink-2);
}

.llc-detail-pill {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--llc-ink);
  background: color-mix(in srgb, var(--llc-color) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--llc-color) 30%, transparent);
}

/* --- Legend -------------------------------------------------------------- */
.llc-legend-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  margin-bottom: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--adm-ink);
}

.llc-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 0.9rem;
}

.llc-legend-family {
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--adm-line);
  margin-bottom: 0.7rem;
}

.llc-legend-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.llc-legend-row--kid {
  margin-top: 0.6rem;
  padding-inline-start: 0.7rem;
  border-inline-start: 2px dashed color-mix(in srgb, var(--llc-color) 38%, transparent);
}

.llc-legend-swatch {
  width: 0.62rem;
  height: 0.62rem;
  margin-top: 0.28rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--llc-color);
}

.llc-legend-copy {
  min-width: 0;
}

.llc-legend-label {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--llc-ink);
}

.llc-legend-row--kid .llc-legend-label {
  font-weight: 500;
}

.llc-legend-flag {
  font-size: 0.62rem;
  opacity: 0.7;
  margin-inline-start: 0.25rem;
}

.llc-legend-desc {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--adm-ink-3);
}

/* --- Compact variant (embedded in the lead detail page) -------------------
   A pane on a long page, not the page itself. The component already drops the
   registration band, the return-line key and the hover detail strip here; what
   is left is squeezing the vertical rhythm and taking the colour off every node
   that is not the lead's current one.

   Column widths are deliberately NOT overridden: narrowing them would only push
   the labels into extra wrapped lines and give the height straight back.
   ------------------------------------------------------------------------- */
.llc-chart--compact .llc-stages {
  gap: 0.8rem;
}

.llc-chart--compact .llc-stage {
  gap: 0.6rem;
}

.llc-chart--compact .llc-family {
  padding: 0.5rem 0.5rem;
}

.llc-chart--compact .llc-family-kids {
  margin-top: 0.4rem;
  gap: 0.3rem;
}

.llc-chart--compact .llc-node {
  padding: 0.3rem 0.55rem;
}

/* Half the colour on everything that is not current, so the current node is the
   only saturated thing on the graph. The tint and the edge are re-mixed at half
   strength rather than filtered, and the filter is confined to the dot - the one
   part painted at full chroma - so the AA-solved label ink is never touched. A
   lighter tint can only raise the label's contrast, never lower it. */
.llc-chart--compact .llc-node:not(.llc-node--current) {
  background: color-mix(in srgb, var(--llc-color) 5%, #fff);
  border-color: color-mix(in srgb, var(--llc-color) 17%, transparent);
}

.llc-chart--compact .llc-node:not(.llc-node--current) .llc-node-dot {
  filter: saturate(0.5);
}

.llc-chart--compact .llc-node--visited:not(.llc-node--current) {
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--llc-color) 8%, transparent) 0 2px,
    transparent 2px 7px
  );
}

.llc-chart--compact .llc-node--terminal:not(.llc-node--current) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--llc-color) 11%, transparent);
}

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 1024px) {
  .llc-page {
    padding: 1.25rem 1rem 2rem;
  }

  .llc-header {
    gap: 1.25rem;
  }

  /* The sidebar collapses to a hamburger here, but the content box still
     narrows to roughly 920px - so these must TIGHTEN the columns, not widen
     them, or the final stage falls off the left edge. */
  .llc-stages {
    gap: 0.6rem;
  }

  .llc-stage {
    min-width: 100px;
    max-width: 116px;
  }

  .llc-family {
    padding: 0.55rem 0.45rem;
  }

  .llc-node {
    font-size: 0.76rem;
    padding: 0.32rem 0.5rem;
  }

  /* The compact pane's gutter is set for a full-width laptop card and would
     WIDEN the columns here, which is exactly what the note above forbids. */
  .llc-chart--compact .llc-stages {
    gap: 0.6rem;
  }
}

/* --- Mobile -------------------------------------------------------------
   The graph stacks into a vertical reading order. Drawn edges are dropped
   rather than squeezed: at this width they would be near-vertical hairlines
   carrying no information, so the per-node "recommended next" list in the
   detail strip becomes the way the flow is read.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .llc-card {
    padding: 1rem 0.9rem;
    border-radius: 14px;
  }

  .llc-canvas {
    overflow-x: visible;
    padding-bottom: 0;
  }

  .llc-edges,
  .llc-channel-key {
    display: none;
  }

  .llc-stages {
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }

  .llc-stage {
    min-width: 0;
    /* max-width must be cleared explicitly: the <=1024px block also matches at
       this width, and its 138px cap would leave the cards stranded in a narrow
       strip instead of using the full column. */
    max-width: none;
    width: 100%;
  }

  .llc-family {
    padding: 0.7rem 0.8rem;
  }

  .llc-node {
    padding: 0.4rem 0.7rem;
  }

  .llc-stage + .llc-stage {
    margin-top: 1.5rem;
  }

  .llc-stage + .llc-stage::before {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', sans-serif;
    font-weight: 900;
    display: block;
    text-align: center;
    font-size: 0.8rem;
    color: var(--adm-ink-3);
    margin: -0.9rem 0 0.6rem;
  }

  .llc-stage-rail {
    display: none;
  }

  .llc-node {
    font-size: 0.86rem;
  }

  /* Compact pane, phone: the stages are a stacked column here, so the flex gap
     must go back to 0 - the spacing between stages is the margin + chevron
     below, and the compact gutter would double it. The node keeps a real touch
     target; tightening the desktop pill must not shrink the thumb area. */
  .llc-chart--compact .llc-stages {
    gap: 0;
  }

  .llc-chart--compact .llc-node {
    padding: 0.42rem 0.7rem;
  }

  .llc-chart--compact .llc-family {
    padding: 0.6rem 0.7rem;
  }

  .llc-legend {
    grid-template-columns: 1fr;
  }

  .llc-stats {
    width: 100%;
  }

  .llc-stat {
    flex: 1 1 auto;
  }
}