/* ============================================================
   Jobit - Analytics product page
   Builds on tokens.css + site.css + product-multiposter.css +
   product-ats.css. Reuses the .mp-* / .ats-* / .ai-need
   scaffold (problem flow, blue "Wat is het" band, voordelen,
   integraties hub, ecosysteem, dark "Voor wie" band, platform
   cards, CTA) so it stays consistent with the AI and Kandidaat
   pages. Only the hero dashboard visual (.an-*) is new.
   ============================================================ */

.an-page { --mp-visual-col: 460px; }

/* ------------------------------------------------------------
   HERO - live recruitment dashboard card
   (reuses the .ats-card shell from product-ats.css)
   ------------------------------------------------------------ */
.an-page-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.an-card {
  max-width: 400px;
  padding: 20px 20px 20px;
}

/* ----- report header ----- */
.an-rep-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.an-rep-titles { flex: 1; min-width: 0; }
.an-card .ats-board-title { font-size: 16px; }
.an-rep-csv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-strong);
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 7px 11px;
  letter-spacing: -0.01em;
}
.an-rep-csv svg { color: var(--fg-subtle); }

/* ----- totaal stat ----- */
.an-rep-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0 4px;
}
.an-rep-total-l {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-subtle);
  letter-spacing: 0.02em;
}
.an-rep-total-v {
  font-weight: 900;
  color: var(--fg-strong);
}

/* ----- line chart ----- */
.an-rep-chart {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.an-rep-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 132px;
  font-size: 9px;
  font-weight: 700;
  color: var(--fg-subtle);
  text-align: right;
  width: 16px;
  flex-shrink: 0;
}
.an-rep-svg {
  flex: 1;
  height: 132px;
  width: 100%;
  overflow: visible;
}
.an-rep-grid {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.an-rep-line {
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: no-preference) {
  .an-rep-line { stroke-dasharray: 1000 2000; stroke-dashoffset: 1000; }
  .an-card.is-revealed .an-rep-line {
    animation: anDraw 1.5s var(--ease-out) forwards;
  }
}
@keyframes anDraw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ----- legend ----- */
.an-rep-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.an-rep-leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
}
.an-rep-leg-mk {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .an-page-hero-visual { justify-self: center; max-width: 440px; width: 100%; margin-bottom: 32px; }
  /* Tighten the dashboard card's shadow when stacked so it doesn't bleed into
     the divider seam below (keeps the hero bottom edge pure --mp-tint). */
  .an-page-hero-visual .ats-card {
    box-shadow: 0 14px 32px -12px rgba(31, 47, 84, 0.16), 0 4px 12px -6px rgba(31, 47, 84, 0.07);
  }
}

/* ------------------------------------------------------------
   WAT IS HET - "Rapport" variation: sources collected + funneled
   into a line-graph report (white card on the blue band)
   ------------------------------------------------------------ */
.an-rep2 { max-width: 640px; margin: 44px auto 0; }
.an-rep2-card { background: #fff; border-radius: var(--r-xl); box-shadow: 0 24px 60px rgba(15,28,60,0.32); padding: 28px 30px 26px; }
.an-rep2-sources { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 8px; }
.an-rep2-src { justify-self: center; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--fg-strong); letter-spacing: -0.01em; background: var(--bg-subtle, #F5F7FA); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 13px 6px 8px; }
.an-rep2-src-ic { width: 24px; height: 24px; border-radius: 7px; background: var(--mp-accent-50); color: var(--mp-accent); display: flex; align-items: center; justify-content: center; }
.an-rep2-src-ic svg { width: 14px; height: 14px; }
.an-rep2-funnel { display: block; width: 100%; height: 46px; margin: 4px 0 2px; overflow: visible; }
.an-rep2-wire { stroke: var(--mp-accent-200, #B9C6E4); stroke-width: 1.5; stroke-dasharray: 2 3.5; fill: none; }
.an-rep2-pkt { fill: var(--mp-accent); filter: drop-shadow(0 0 4px rgba(67,100,173,0.5)); }
.an-rep2-report { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 18px 14px; background: var(--bg-subtle, #F5F7FA); }
.an-rep2-report-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.an-rep2-report-title { font-size: 14px; font-weight: 800; color: var(--fg-strong); letter-spacing: -0.01em; }
.an-rep2-period { font-size: 12px; font-weight: 700; color: var(--mp-accent); background: var(--mp-accent-50); border-radius: var(--r-pill); padding: 4px 10px; }
.an-rep2-chart { display: block; width: 100%; height: 120px; }
.an-rep2-grid { stroke: var(--neutral-200); stroke-width: 1; stroke-dasharray: 3 4; }
.an-rep2-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.an-rep2-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.an-rep2-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--fg-muted); }
.an-rep2-leg i { width: 10px; height: 10px; border-radius: 3px; }

/* ------------------------------------------------------------
   ECOSYSTEEM - 5 steps in a tidy 2-column grid (equal columns,
   no full-width spans). The 5th sits in the left column.
   ------------------------------------------------------------ */
.an-page .ai-eco-manage .ats-eco-item:last-child { grid-column: auto; }
.an-page .ai-eco-manage .ats-eco-item-label { line-height: 1.3; text-wrap: balance; }

/* Voor wie - keep every card the same width (no full-width last card) */
.an-page .mp-who-grid > .mp-who-card:last-child:nth-child(odd) { grid-column: auto; }