/* Leadpagina (lead_detail.html) en de gedeelde detailonderdelen (_documents, _tech_check, _timeline_edit, lange lijsten). Bouwt op core.css.
   Alles voor de leadpagina hangt onder .lead-page. De gedeelde onderdelen hebben eigen klassen en gelden ook op de contactpagina;
   ze horen in core.css (zie shell_changes) en staan hier bovenaan, vóór de .lead-page-regels die ze op de leadpagina bijstellen.
   Velden van een campagne komen uit pipeline.css (.campaign-edit), de kans uit core.
   Indeling: laptop = links het werk aan de lead, rechts Nu, Waarde, Scores, Campagne, Documenten en Verwijderen;
   smaller dan 1100 = één kolom in de volgorde Nu, Contact, Berichten, Tijdlijn, Waarde en de rest. */

/* ---------- Kop ---------- */
.lead-page .lead-head { align-items: flex-start; }
.lead-head .lead-facts { align-items: center; gap: 8px 12px; margin-top: 12px; } /* kenmerken en links in één regel; verder .page-links */
.lead-head .chip { background: var(--surface-card); border: 1px solid var(--hairline-light); }
.lead-page [id] { scroll-margin-top: 24px; }

/* ---------- Raster: links het werk, rechts Nu en de rest ---------- */
.lead-detail > .detail-side { position: static; }
.lead-page .lead-prep { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; min-width: 0; }

/* Kaarten: één binnenmaat, inhoud op een vaste tussenruimte (16 links, 12 rechts) */
.lead-page .panel { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
.lead-page .detail-side .panel { gap: 12px; }
.lead-page .panel > * { margin-top: 0; margin-bottom: 0; }
.lead-page .panel > h2:first-child { margin: 0; }
.lead-page .panel-head { margin: 0; }
.lead-page .detail-side .explain { margin-top: 0; }
.lead-label { margin: 0; font: 500 13px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.lead-page .panel .lead-label { margin: 0; }
.lead-label-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.lead-field-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.lead-field-label .help { font-weight: 400; }

/* ---------- Nu: volgende stap, status, antwoord, netwerk of reden ---------- */
.lead-page .panel.lead-now { gap: 0; }
.lead-page .lead-now > h2:first-child { font: 500 20px/1.25 var(--font-display); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.deal-part { display: grid; gap: 12px; padding: 16px 0; border-top: 1px solid var(--hairline-light); min-width: 0; }
.lead-page .lead-now > h2 + .deal-part { padding-top: 12px; border-top: 0; }
.deal-part:last-child { padding-bottom: 0; }
.deal-part > * { margin: 0; }
.next-line { display: grid; gap: 4px; min-width: 0; }
.next-line strong { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: break-word; }
.next-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; color: var(--mute); }
.next-form { display: grid; gap: 12px; margin: 0; }
.next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.next-actions > .btn { order: 1; }
.next-actions > .next-edit { order: 2; }
.next-actions > .next-edit[open] { flex-basis: 100%; }
.next-toggle { display: inline-flex; align-items: center; min-height: 40px; width: max-content; list-style: none; font-size: 15px; font-weight: 500; color: var(--charcoal);
  text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; cursor: pointer; }
.next-edit[open] > summary { margin-bottom: 8px; }
.next-fields { display: grid; gap: 12px; }
.deal-status { display: flex; align-items: center; gap: 8px; margin: 0; }
.deal-status .status-select { flex: 1 1 auto; min-width: 0; }
.deal-status .status-select select { width: 100%; height: 40px; }
.deal-status .btn { flex: none; height: 40px; }
.lead-now .reply-form { display: grid; gap: 8px; margin: 0; padding: 12px; border: 0; border-radius: var(--r-md); background: var(--surface-soft); }
.lead-now .reply-form input { width: 100%; height: 40px; }
.lead-now .reply-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lead-now .reply-row select { flex: 1 1 140px; min-width: 0; height: 40px; border-radius: var(--r-full); font-size: 15px; }
.lead-now .backlog-toggle { font-size: 15px; } /* verder .inline-form */
.lead-now .stack { gap: 12px; }
.lead-now .field { font-size: 14px; font-weight: 600; }

/* ---------- Waarde: ingeklapt met de bedragen als samenvatting ---------- */
.value-fold > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; list-style: none; }
.lead-page .value-fold > summary h2 { grid-column: 1; margin: 0; font: 500 13px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.value-sum { grid-column: 1 / -1; font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.value-fold > summary .next-toggle { grid-column: 2; grid-row: 1; min-height: 24px; }
.value-fold[open] > summary .next-toggle { visibility: hidden; }
.value-fold[open] > summary { margin-bottom: 12px; }
.lead-page .fold-body { display: grid; gap: 12px; }
.lead-page .fold-body > * { margin: 0; }
.lead-value .value-hint { margin: 0; display: grid; gap: 8px; padding: 12px 16px; }
.lead-value .value-hint form { margin: 0; }
.lead-value .stack { gap: 12px; }
.lead-value .value-actions { margin: 0; }

/* ---------- Hoofdkolom ---------- */
.lead-page .notes { margin: 0; }
.lead-page .notes li:first-child { border-top: 0; padding-top: 0; }
.lead-page .templates { margin: 0; }
.lead-page .template-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.lead-page .lead-contact-action { margin: 0; }
.lead-page .lead-link-contact select { flex: 1 1 240px; min-width: 0; }
.lead-page .tracking-part { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hairline-light); }
.lead-page .tracking-part > * { margin: 0; }
.lead-page .feed-url { margin: 0; }
.lead-page .visits li { font-size: 15px; }
.lead-page .detail-main > .lead-post { gap: 8px; }
.lead-page .detail-main > .lead-post > .lead-label, .lead-page .detail-main > .lead-post > .lead-label-row { margin-top: 16px; }
.lead-page .detail-main > .lead-post > .panel-head { margin-bottom: 8px; }
.lead-page .detail-main > .lead-post > .panel-head + .lead-label, .lead-page .detail-main > .lead-post > .panel-head + .lead-label-row { margin-top: 0; }
.lead-page .lead-meta { margin: 0; padding: 12px 0 0; }

/* Haak en Website naast elkaar: dezelfde tekstmaat (16px); alleen "Gecontroleerd op" is klein, net als "Gezien" bij Haak */
.lead-page .tech-panel .tech-facts, .lead-page .tech-panel .findings { font-size: 16px; }
.lead-page .hook-title { font-weight: 600; color: var(--ink); }
.lead-page .fruit-line { max-width: 72ch; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-soft); }
.lead-page .fruit-line .link { margin-left: 4px; }

/* Top 100: inklapbaar als de lead er niet in staat */
.lead-fold > summary { display: flex; align-items: center; gap: 12px; min-height: 40px; list-style: none; }
.lead-fold > summary h2 { margin: 0; }
.lead-fold-note { margin-left: auto; font-size: 14px; color: var(--mute); }
.lead-fold[open] > summary { margin-bottom: 12px; }
.lead-fold > p + form { margin-top: 12px; }
.lead-page .research-form { display: grid; gap: 12px; margin: 0; }
.lead-page .research-form > * { margin: 0; }
.lead-page .research-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lead-page .research-list li { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 8px 16px; align-items: center; }
.lead-page .research-list .plan-check { display: flex; align-items: flex-start; gap: 12px; min-height: 0; padding: 4px 0; font-size: 15px; cursor: pointer; }
.lead-page .research-list .plan-check input { flex: none; width: 20px; height: 20px; margin: 0; }
.lead-page .research-list .plan-check input:checked + span { color: var(--mute); text-decoration: line-through; text-decoration-color: var(--faint); }
.lead-page .research-list input[name^="note-"] { width: 100%; height: 40px; font-size: 15px; }
.lead-page .research-form .obs { width: 100%; height: 40px; }
.lead-page .research-form .btn { justify-self: start; }

/* Offertes: de omschrijving breekt op woorden, niet per letter */
.lead-page .lead-quotes td .meta { overflow-wrap: break-word; }

/* ---------- Zijkolom ---------- */
.lead-page .campaign-edit { grid-template-columns: minmax(0, 1fr); margin: 0; } /* één kolom in de zijkolom; de rest uit pipeline.css */
.lead-page .campaign-edit label { font-weight: 600; color: var(--ink); }
.lead-page .campaign-edit select, .lead-page .campaign-edit input { height: 40px; }
.lead-add > summary { width: max-content; list-style: none; }
.lead-add[open] > summary { margin-bottom: 12px; }

.lead-page .score-bars { display: grid; gap: 8px; }
.lead-page .score-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 32px; gap: 12px; align-items: center; font-size: 14px; }
.lead-page .score-bar .num { text-align: right; font-weight: 600; }
.lead-page .score-bar-track { height: 8px; border-radius: var(--r-full); background: var(--surface-soft); overflow: hidden; }
.lead-page .score-bar-track i { display: block; height: 100%; border-radius: var(--r-full); background: var(--primary); transform-origin: left center; animation: bar-grow .5s var(--ease) both; }
.lead-page .score-hot, .lead-page .score-prop { font-size: 14px; }
.lead-page .score-pill.hot { background: var(--tint-cobalt); color: var(--primary); }
.lead-page .score-prop .eyebrow { display: block; margin-bottom: 4px; }
.lead-page .score-hits { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.lead-page .score-hits .num { display: inline-block; min-width: 32px; font-weight: 600; color: var(--primary); }
.lead-page .score-hits li[data-group="fit"] .num { color: var(--charcoal); }
.lead-page .score-hits li[data-group="engagement"] .num { color: var(--accent-teal); }
.lead-page .signal-list li { padding: 8px 0; font-size: 14px; }
.lead-page .signal-list li:first-child { padding-top: 0; }
.lead-page .signal-add > summary { width: max-content; font-size: 15px; font-weight: 600; }
.lead-page .signal-add[open] > summary { margin-bottom: 12px; }
.lead-page .signal-add form { margin-top: 8px; }

/* Verwijderen: los van de rest, onderaan */
.lead-page .lead-delete { margin-top: 32px; }
.lead-delete-fold > summary { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; font-weight: 500; color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
.lead-delete-fold[open] > summary { margin-bottom: 8px; }
.lead-delete-fold > p { margin-bottom: 12px; }

/* ---------- Smaller: één kolom in de volgorde van het werk ---------- */
@media (max-width: 1100px) {
  .lead-page .detail.lead-detail { display: flex; flex-direction: column; align-items: stretch; }
  .lead-page .lead-detail > .detail-main, .lead-page .lead-detail > .detail-side, .lead-page .lead-prep { display: contents; }
  .lead-page .lead-now { order: 1; }
  .lead-page .lead-contact { order: 2; }
  .lead-page .lead-wants { order: 3; }
  .lead-page .lead-messages { order: 4; }
  .lead-page .lead-timeline { order: 5; }
  .lead-page .lead-value { order: 6; }
  .lead-page .hook-tile { order: 7; }
  .lead-page .tech-panel { order: 8; }
  .lead-page .lead-post { order: 9; }
  .lead-page .score-tile { order: 10; }
  .lead-page .lead-campaign { order: 11; }
  .lead-page .lead-top100 { order: 12; }
  .lead-page .lead-quotes { order: 13; }
  .lead-page .documents-panel { order: 14; }
  .lead-page .lead-delete { order: 15; margin-top: 16px; }
  .lead-page .lead-meta { order: 16; }
}
@media (max-width: 1024px) {
  .lead-page [id] { scroll-margin-top: 80px; }
}
@media (max-width: 760px) {
  .lead-page .research-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lead-page .research-list .plan-check { min-height: 40px; align-items: center; }
  .lead-page .lead-value .value-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lead-page .lead-value .value-grid .wide { grid-column: 1 / -1; }
  .lead-head .lead-facts { row-gap: 0; }
  /* Lead bewerken: rechts in de regel van Terug, zoals Bewerken in een iPhone-app; geen eigen rij boven het werk */
  .lead-page { position: relative; }
  .lead-page .lead-head .head-actions { position: absolute; top: 0; right: 0; }
  .lead-page .lead-head .head-actions .btn { height: 40px; min-height: 40px; }
  /* Smaller dan de iPhone van 390 past "Lead bewerken" niet naast Terug: dan staat er "Bewerken" */
  @media (max-width: 389px) {
    .lead-head .head-actions .btn-long { display: none; }
    .lead-head .head-actions .btn-short { display: inline; }
  }
  .lead-page .back, .lead-head .lead-facts a, .lead-page button.link, .lead-page .panel-head a, .lead-page .contact dd a, .lead-page .next-line a,
  .lead-page .signal-list a, .lead-page .lead-campaign p a, .lead-page .lead-quotes td a { display: inline-flex; align-items: center; min-height: 40px; }
  .lead-page .check-field { min-height: 40px; }
  .lead-page .signal-add > summary, .lead-page .explain > summary { padding-block: 8px; line-height: 24px; }

  /* Offertes als lijst: links nummer en omschrijving, rechts bedrag en status */
  .lead-page .lead-quotes .scroll-x { overflow: visible; }
  .lead-page .lead-quotes table.data, .lead-page .lead-quotes tbody { display: block; }
  .lead-page .lead-quotes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lead-page .lead-quotes tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--hairline-light); }
  .lead-page .lead-quotes tbody tr:first-child { padding-top: 0; border-top: 0; }
  .lead-page .lead-quotes td { display: block; padding: 0; border: 0; text-align: left; }
  .lead-page .lead-quotes tbody tr:hover td { background: none; }
  .lead-page .lead-quotes td:nth-child(1) { grid-area: 1 / 1; }
  .lead-page .lead-quotes td:nth-child(2) { grid-area: 2 / 1; font-size: 14px; color: var(--mute); }
  .lead-page .lead-quotes td:nth-child(3) { grid-area: 2 / 2; justify-self: end; }
  .lead-page .lead-quotes td:nth-child(4) { grid-area: 1 / 2; text-align: right; font-weight: 600; }
}

/* Reageer op de post: verse vraagpost, bovenaan over de volle breedte (vóór Nu, ook op de iPhone) */
.lead-reply-now { display: grid; gap: 12px; margin-bottom: 16px; border: 1px solid var(--primary); }
.lead-reply-now .panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0; }
.lead-reply-now .help { margin: 0; }
.lead-reply-now .reply-suggestion { max-width: 80ch; font-size: 16px; white-space: pre-line; }
.reply-now-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }

/* Onderzoek en concepten (_research.html): onder de reactie in Reageer op de post, of een eigen paneel op dezelfde plek.
   Laptop: mail en LinkedIn-bericht naast elkaar; iPhone: onder elkaar met velden van 16px. Eén zwarte knop: Open in Gmail. */
.lead-research { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hairline-light); }
.lead-research-panel .lead-research { padding-top: 0; border-top: 0; }
.lead-research .research-facts { margin: 0; }
.lead-research .research-findings { max-width: 80ch; margin: 0; font-size: 15px; }
.lead-research .research-sources { margin-top: 0; }
.research-source-list { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 18px; font-size: 14px; overflow-wrap: anywhere; }
.research-drafts { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; align-items: start; }
.research-draft { display: grid; gap: 12px; min-width: 0; }
.research-draft textarea { font-size: 15px; line-height: 1.5; resize: vertical; }
.research-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.research-error { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.research-error .dot { background: var(--accent-danger); }
.lead-research-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
@media (max-width: 760px) {
  .research-drafts { grid-template-columns: 1fr; gap: 16px; }
  .research-draft input, .research-draft textarea { font-size: 16px; } /* iOS zoomt anders in */
  .research-actions .btn { width: 100%; justify-content: center; }
}