/* Contactpagina (contact_detail.html, body.contact-page) en het contactformulier. Bouwt op core.css; alleen wat daar niet in staat. */

/* Kop: naam met soort, gegevens als één regel feiten, notities als compacte kaart */
.contact-head { align-items: flex-start; }
.contact-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.contact-head .tint-pill:not([data-tone]) { background: var(--surface-card); border: 1px solid var(--hairline-light); } /* Prospect: zichtbaar op de grijze pagina */
.contact-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 16px 0 0; }
.contact-facts > div { min-width: 0; }
.contact-facts dt { font-size: 13px; font-weight: 600; letter-spacing: .2px; color: var(--mute); }
.contact-facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.contact-notes { max-width: 72ch; margin-top: 16px; padding: 12px 16px; background: var(--surface-card); border: 1px solid var(--hairline-light); border-radius: var(--r-md); }
.contact-notes .eyebrow { margin-bottom: 4px; }
.contact-notes p:last-child { font-size: 15px; color: var(--charcoal); overflow-wrap: anywhere; }

/* Ankers vallen niet onder de balk bovenin (iPhone) */
.contact-detail [id] { scroll-margin-top: 72px; }

/* De zijkolom is hoger dan het scherm: niet vastplakken, anders valt de onderkant weg */
.contact-detail .detail-side { position: static; }

/* Project uit Jira: voortgang in één balk */
.contact-project-line { margin: 0 0 8px; font-size: 15px; color: var(--mute); font-variant-numeric: tabular-nums; }
.contact-project-line strong { margin-right: 4px; font: 500 24px/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.contact-progress { display: flex; height: 8px; border-radius: var(--r-full); background: var(--surface-soft); overflow: hidden; }
.contact-progress span { display: block; height: 100%; }
.contact-progress .done { background: var(--accent-teal); }
.contact-progress .doing { background: var(--primary); }
.contact-issues { margin-top: 12px; }
.contact-issues a { font-weight: 500; }

/* Offertes en facturen als rijen: past ook op de iPhone */
.panel h3.contact-subhead { margin: 16px 0 4px; font-size: 16px; }
.panel .panel-head + h3.contact-subhead { margin-top: 0; }
.contact-docs .row-side { gap: 4px; }
.contact-docs .row-side .num { font-weight: 600; }

/* Omzet en pijplijn */
.contact-big { font: 500 32px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.contact-big + .caption { margin-top: 4px; }
.contact-spark { margin: 16px 0 4px; }
.contact-spark .small { margin-bottom: 4px; }
.contact-money { margin: 12px 0 8px; font-size: 15px; }
.contact-money dd { text-align: right; }

/* Moneybird en partner */
.contact-mb-form { margin-top: 12px; }
.contact-mb-search { flex-wrap: nowrap; margin-top: 12px; }
.contact-mb-search input[type="search"] { flex: 1 1 auto; min-width: 0; }
.contact-mb-list { margin-top: 8px; }
.contact-mb-list li { align-items: center; }
.contact-referrals-head { margin: 16px 0 4px; }

/* Een partner: het partnerpaneel bovenaan de zijkolom. Een gewoon contact: het formulier achter 'Partner maken'. */
.contact-detail .detail-side > .is-partner { order: -1; }
.contact-partner-pill { text-decoration: none; }
.contact-partner-next { display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.contact-partner .stack .btn { justify-self: start; }
.contact-partner-fold > summary { width: max-content; padding-block: 8px; line-height: 24px; font-size: 15px; font-weight: 500; color: var(--mute); }
.contact-partner-fold > summary:hover { color: var(--ink); }
.contact-partner-fold[open] > summary { margin-bottom: 8px; }

/* Smaller dan de laptop: één kolom. De kolommen gaan op in het raster, zodat het partnerpaneel (bij een partner) en
   omzet direct onder de kop staan, net als Deal op de leadpagina; daarna Activiteiten en de rest van de hoofdkolom,
   en onderaan Moneybird, bestanden en de tech-check. */
@media (max-width: 1100px) {
  .contact-detail > .detail-main, .contact-detail > .detail-side { display: contents; }
  .contact-detail .detail-side > .is-partner { order: -2; }
  .contact-detail .detail-side > .contact-revenue-panel { order: -1; }
  .contact-detail .detail-side > :not(.contact-revenue-panel):not(.is-partner) { order: 1; }
}

@media (max-width: 760px) {
  /* Contact bewerken: rechts in de regel van Terug, zoals Bewerken in een iPhone-app; geen eigen rij boven het werk */
  .contact-top { position: relative; }
  .contact-head .head-actions { position: absolute; top: 0; right: 0; }
  .contact-head .head-actions .btn { height: 40px; min-height: 40px; }
  /* Smaller dan de iPhone van 390 past "Contact bewerken" niet naast Terug: dan staat er "Bewerken" */
  @media (max-width: 389px) {
    .contact-head .head-actions .btn-long { display: none; }
    .contact-head .head-actions .btn-short { display: inline; }
  }
  /* Gegevens als korte regels "label waarde" in plaats van blokjes van twee regels; elke regel is een tikvlak van 40px */
  .contact-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 16px; margin-top: 12px; }
  .contact-facts > div { display: contents; }
  .contact-facts dt, .contact-facts dd { display: flex; align-items: center; min-height: 40px; margin: 0; }
  .contact-facts dd { min-width: 0; }
  .contact-facts dd a { display: inline-flex; align-items: center; min-height: 40px; min-width: 0; }
  .contact-notes { margin-top: 12px; }
  .contact.contact-money { grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; }
  .contact.contact-money dd { margin: 0; }

  /* Tikvlakken van minstens 40px. Core regelt velden, knoplinks, paneelkoppen, Bewerken en de terug-link; hier de
     pil Partner (groter tikvlak, zelfde pil) en Wijzigen bij het hoofdcontact. */
  .contact-page a.tint-pill { position: relative; }
  .contact-page a.tint-pill::after { content: ""; position: absolute; inset: -8px -4px; }
  .contact-page .people a.small { display: inline-flex; align-items: center; min-height: 40px; }
}
@media (max-width: 480px) {
  .contact-docs li, .contact-mb-list li { flex-wrap: nowrap; }
  .contact-docs li > span:first-child, .contact-mb-list li > span:first-child { min-width: 0; }
}

/* Contactformulier */
.contact-form-panel .form { margin-top: 0; }