/* Nieuwe leads. Zelfde taal als de rest van het dashboard: rustige kaarten,
   koper voor wat aandacht vraagt, geen kleur om de kleur. */

.lead-balk {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
#lead-filters, #b2b-filters { display: flex; gap: 4px; }
#lead-filters button, #b2b-filters button {
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  padding: 7px 14px; border-radius: var(--radius); font-size: 14px;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
#lead-filters button:hover, #b2b-filters button:hover { border-color: var(--copper); color: var(--copper); }
#lead-filters button.actief, #b2b-filters button.actief {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.lead-telling { opacity: .6; font-variant-numeric: tabular-nums; }
#lead-filters button.actief .lead-telling, #b2b-filters button.actief .lead-telling { opacity: .75; }
.lead-balk .rechts { margin-left: auto; }

/* Het getal op het tabblad: alleen als er iets op je wacht. */
.tab-badge {
  display: inline-block; margin-left: 7px; min-width: 18px; padding: 0 5px;
  background: var(--copper); color: #fff; border-radius: 9px;
  font-size: 11px; line-height: 18px; text-align: center; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- invoerblok */
#lead-nieuw-blok {
  background: var(--surface-warm); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 20px; margin-bottom: 28px;
}
#lead-nieuw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#lead-nieuw label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-soft); }
#lead-nieuw input, #lead-nieuw select, #lead-nieuw textarea {
  font: inherit; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
#lead-nieuw input:focus-visible, #lead-nieuw select:focus-visible,
#lead-nieuw textarea:focus-visible {
  outline: 2px solid var(--copper); outline-offset: 0; border-color: var(--copper);
}
#lead-nieuw .breed { grid-column: 1 / -1; }
#lead-nieuw textarea { min-height: 72px; resize: vertical; }
#lead-nieuw .vorm-voet { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
#lead-nieuw-melding { color: var(--copper); font-size: 13px; }

/* ------------------------------------------------------------------ kaarten */
/* minmax(0, 1fr) en niet de kale `grid`: een impliciete kolom is `auto`, en
   die wordt minstens zo breed als het langste onbreekbare stuk op een kaart.
   Eén deellink van Dropbox in een campagnereply, of een Meet-link onder
   Verloop, maakte zo de hele pagina breder dan het scherm -- en Safari op de
   iPhone zoomt dan uit tot alles past. Op 24 september 2026 besloeg de
   kopbalk op B2B daardoor nog een kwart van Laurens scherm, en leek het een
   kopbalk die niet klopte terwijl het een link was. */
#lead-lijst, #b2b-lijst { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* En de tekst zelf mag midden in een woord breken, maar alleen als er geen
   andere plek is: `anywhere` en niet `break-word`, omdat alleen `anywhere`
   ook de minimale breedte verlaagt waar een flex-rij (de regels onder
   Verloop) op rekent. */
.lead-kaart h3, .lead-contact, .lead-feiten, .lead-tekst, .lead-oordeel,
.lead-origineel, .lead-regels li { overflow-wrap: anywhere; }
.lead-kaart {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 20px 22px;
}
/* Wat de classificatie niet zeker wist, vraagt om een blik van Lauren. */
.lead-kaart.twijfel { border-left: 3px solid var(--copper); }

.lead-kop { display: flex; align-items: flex-start; gap: 16px; }
.lead-wie { min-width: 0; flex: 1; }
.lead-kaart h3 { font-size: 17px; font-weight: 600; color: var(--ink); }
.lead-herkomst { display: flex; align-items: center; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.lead-wanneer { font-size: 13px; color: var(--mist); }
.badge.lead-bron { background: #EAEFF6; border-color: #D4DEEC; color: var(--ink-soft); }
.badge.lead-bron.verbouwcheck { background: #FCF3EA; border-color: #EED9C4; color: var(--copper); }
.badge.lead-bron.agenda { background: var(--ink); border-color: var(--ink); color: #fff; }
.badge.lead-bron.campagne { background: #EEF2F0; border-color: #CBD8D1; color: var(--ink); }
.lead-campagne { color: var(--ink-soft); }

.lead-status {
  font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.lead-status:focus-visible { outline: 2px solid var(--copper); outline-offset: 0; }
.lead-status:disabled { opacity: .6; }

.lead-contact { margin-top: 12px; font-size: 14px; color: var(--ink-soft); }
.lead-contact a { color: var(--ink); border-bottom: 1px solid var(--line); }
.lead-contact a:hover { border-bottom-color: var(--copper); color: var(--copper); }
.lead-feiten { margin-top: 6px; font-size: 13px; color: var(--mist); }
.lead-tekst { margin-top: 12px; color: var(--ink-soft); white-space: pre-wrap; }

/* De bijlagen van een leadmail (chat 12). Een foto krijgt een voorbeeld dat
   nooit breder is dan de kaart: op de telefoon rekte één lange regel het grid
   al eens op (chat 20), en een plaatje zonder max-width doet dat ook. */
.lead-bijlagen { margin-top: 12px; }
.lead-bijlagen .lead-regels li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.lead-bijlage-beeld {
  display: block; flex-basis: 100%; max-width: 100%; max-height: 320px;
  margin-top: 6px; border: 1px solid var(--line); border-radius: var(--radius);
  object-fit: contain; background: var(--surface);
}
.lead-let-op { font-size: 13px; color: var(--copper); }

/* De vervolgdatum staat op de kaart zelf en niet onder Meer (fase 2 punt 3).
   Op een telefoon moet je hem met één hand kunnen zetten, dus: velden die over
   de volle breedte staan, een raakvlak van 44 px, en geen knop erachter --
   bewaren gaat op `change`. Boven 520 px staan ze naast elkaar. */
.lead-vervolg {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin-top: 12px; font-size: 13px;
}
.lead-vervolg .eyebrow { display: inline; }
.lead-vervolg input {
  font: inherit; font-size: 14px; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); flex: 1 1 100%; min-width: 0;
}
.lead-vervolg input:focus-visible { outline: 2px solid var(--copper); outline-offset: 0; }
@media (min-width: 520px) {
  .lead-vervolg input[type=date] { flex: 0 0 auto; }
  .lead-vervolg input[type=text] { flex: 1 1 180px; }
}
/* Verstreken, of nooit gezet. Koper en niet rood: dit is werk dat wacht, geen
   storing -- en een kaart die alarmerend oogt terwijl het er dertig zijn, is
   een kaart die je leert wegkijken. */
.lead-achterstallig { color: var(--copper); font-weight: 600; }

/* Waarom de beoordeling twijfelde. Ingesprongen met een streepje ervoor, zodat
   het leest als een kanttekening en niet als iets wat de aanvrager zelf schreef
   -- dat onderscheid moet je in één blik kunnen maken. */
.lead-oordeel {
  margin-top: 10px; padding-left: 11px; border-left: 2px solid var(--line);
  font-size: 14px; color: var(--mist);
}
.lead-oordeel .eyebrow { display: inline; margin-right: 6px; }

.lead-meer { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.lead-meer .eyebrow { margin-top: 14px; }
.lead-meer .eyebrow:first-child { margin-top: 0; }
/* Bewerken, dubbel, bron en verwijderen onder Meer (chat 3). */
.lead-beheer { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.lead-origineel {
  margin-top: 8px; padding: 12px 14px; background: var(--surface-warm);
  border-radius: var(--radius); font: inherit; font-size: 13px;
  color: var(--ink-soft); white-space: pre-wrap; overflow-x: auto;
}
.lead-regels { list-style: none; margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.lead-regels li { padding: 5px 0; display: flex; gap: 10px; }
.lead-regels li + li { border-top: 1px solid var(--line); }
.lead-regels .lead-wanneer { white-space: nowrap; }

.lead-voet { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.lead-voet .notitie-vorm { flex: 1; margin-top: 0; }
.lead-voet .lead-meer-knop { white-space: nowrap; }
/* Op een telefoon brak "Voeg toe" over twee regels, waardoor de knop hoger werd
   dan het invoerveld ernaast en de kaart er half af uitzag. De knop houdt zijn
   woorden bij elkaar; het veld ernaast geeft de ruimte. */
.lead-voet .notitie-vorm button { white-space: nowrap; }
.lead-voet .notitie-vorm input[type=text] { min-width: 0; }

/* ------------------------------------------------------- antwoord en klaar */
.lead-klaar { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.lead-klaar .lead-regels > li { margin-bottom: 12px; }
.lead-klaar-kop { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }

/* .lead-vorm: bewerken en "dubbel van" (chat 3) krijgen dezelfde vorm als het
   antwoordvenster, maar een eigen klasse. Met .lead-antwoord erop pakte de
   antwoordknop het eerste formulier met die klasse, en dat was dan het
   bewerkformulier -- zonder onderwerpveld, dus een TypeError en een lege lijst. */
.lead-antwoord, .lead-vorm {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.lead-antwoord label, .lead-vorm label { display: flex; flex-direction: column; gap: 5px; }
.lead-antwoord input[type=text], .lead-antwoord textarea,
.lead-vorm input, .lead-vorm select {
  font: inherit; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink);
  width: 100%;
}
.lead-antwoord textarea { resize: vertical; line-height: 1.5; }
.lead-antwoord input[type=text]:focus, .lead-antwoord textarea:focus,
.lead-vorm input:focus, .lead-vorm select:focus {
  outline: 2px solid var(--copper); outline-offset: 0; border-color: var(--copper);
}
.lead-naar { font-size: 13px; color: var(--ink-soft); }
.lead-antwoord-knoppen { display: flex; gap: 12px; align-items: center; }

/* "Gesprek loggen" (chat 7). De vier uitkomsten als grote knoppen in twee
   kolommen: op de telefoon met één duim te raken, en de gekozen staat er
   zichtbaar aan -- een keuzelijst verbergt precies wat je net koos. */
#gesprek-nieuw-blok {
  background: var(--surface-warm); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 4px 20px 20px; margin-bottom: 28px;
}
.lead-uitkomsten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lead-uitkomst { min-height: 44px; }
.lead-uitkomst.actief { background: var(--copper); border-color: var(--copper); color: #fff; }

@media (max-width: 760px) {
  #lead-nieuw { grid-template-columns: 1fr 1fr; }
  #lead-nieuw .breed { grid-column: 1 / -1; }
  .lead-uitkomsten { grid-template-columns: 1fr 1fr; }
  .lead-kaart { padding: 16px; }
  .lead-kop { flex-direction: column; gap: 10px; }
  .lead-status { width: 100%; }
  .lead-voet { flex-direction: column; align-items: stretch; }
  .lead-voet .lead-meer-knop { align-self: flex-start; }
}

@media (max-width: 560px) {
  #lead-nieuw { grid-template-columns: 1fr; }
  .lead-balk { gap: 10px; }
  #lead-filters, #b2b-filters { width: 100%; }
  #lead-filters button, #b2b-filters button { flex: 1; padding: 8px 6px; }
}