/*
 * De relatie (referentie Relatie.html). Maten letterlijk uit de tekening.
 */

.relatie-naam {
  font-size: calc(1.5rem * var(--tekstschaal));
  line-height: 1.1;
  letter-spacing: var(--ls-title);
}
.relatie-onder { font-size: var(--fs-support); margin-top: 5px; }
.relatie-tags { margin-top: 7px; flex-wrap: wrap; row-gap: 7px; }

/*
 * K13: een veld dat je kunt aantikken om het te wijzigen, zonder dat het
 * eruit gaat zien als een knop - het BLIJFT de naam, de omschrijving, de
 * zin. De cursor en de title zeggen wat een tik doet.
 */
.veld-klik {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
}
button.relatie-naam { width: 100%; }
span .veld-klik, .relatie-onder .veld-klik { display: inline; }

/*
 * DE STIPPELLIJN (AANVULLING-26 §11): alles wat aanpasbaar is, laat dat zien
 * ZONDER dat je erop hoeft te wijzen - want op een telefoon bestaat wijzen niet.
 * Een stippellijn in de rustige gouden tint, overal hetzelfde, geen kader en
 * geen potlood bij elk woord. Op de computer licht hij bij aanwijzen op en komt
 * er een potlood aan het eind.
 */
.veld-klik,
.relatie-kopgetal[data-soort-bewerk],
.relatie-kopgetal[data-stad-bewerk],
button.relatie-veld,
[data-nummer-bewerk],
[data-nummer-bewerk-overig],
[data-email-bewerk],
[data-website-bewerk],
[data-aanspreken],
[data-eigenaar] {
  border-bottom: 1px dotted var(--gold-a40, rgba(180, 142, 71, 0.5));
  text-decoration: none;
}
button.relatie-veld {
  /* De kv-knop is een hele regel; de stippellijn hoort onder de tekst, niet
     over de volle breedte met de waarde rechts. Alleen een subtiele lijn. */
  border-bottom: 1px dotted var(--gold-a40, rgba(180, 142, 71, 0.45));
}

/* Bestelhistorie (20-10-2026): per bestelling een kop met datum, nummer en totaal, en de regels
   er ingesprongen onder; een geannuleerde bestelling staat gedempt. */
.bestelling { padding: 4px 0 8px; border-bottom: 1px solid var(--line); }
.bestelling:last-child { border-bottom: 0; }
.bestelling-regel { padding-left: 14px; color: var(--muted); font-size: var(--fs-support); }
.bestelling-geannuleerd .bestelling-kop, .bestelling-geannuleerd .bestelling-regel { color: var(--muted); text-decoration: line-through; }
@media (hover: hover) {
  .veld-klik:hover,
  [data-aanspreken]:hover,
  .relatie-kopgetal[data-soort-bewerk]:hover,
  .relatie-kopgetal[data-stad-bewerk]:hover {
    border-bottom-color: var(--gold);
  }
  .veld-klik:not([data-naam-bewerk]):hover::after,
  [data-aanspreken]:hover::after {
    content: " ✎";
    color: var(--gold);
    font-size: 0.85em;
  }
}

/*
 * De uitlegregel, één keer per persoon (§11). Rustig, en met een knop om hem
 * meteen weg te doen; hij komt daarna niet meer terug (onthouden per toestel).
 */
.stippel-uitleg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-support-sm);
  color: var(--muted);
}
.stippel-uitleg b { color: var(--ink); font-weight: 600; }
.stippel-uitleg-weg {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-meta);
}

.relatie-eigenaar { margin-top: 11px; gap: 9px; }
.relatie-eigenaar-tekst { font-size: var(--fs-support-sm); color: var(--muted); }
.relatie-eigenaar-tekst b { color: var(--ink); font-weight: 600; }

/* De initialencirkel. Klein achter de eigenaar, groot bij een contactpersoon. */
.pc {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold-a13);
  border: 1px solid var(--gold-a26);
  color: var(--gold-light);
  font-size: var(--fs-meta);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.pc-klein { width: 26px; height: 26px; font-size: calc(0.625rem * var(--tekstschaal)); }

/* ---- De vier acties ----------------------------------------------------- */

.acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.act {
  height: 52px;
  border-radius: 15px;
  background: var(--surface);
  border: 1px solid var(--white-a06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: var(--fs-tiny);
  color: var(--muted);
  font-family: inherit;
  cursor: pointer;
}
.act:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/*
 * Wat niet mag, verdwijnt niet (afspraak 5 uit §7): grijs, met een slotje, en
 * het zegt waarom. Bewust geen `disabled`: dan is de knop ook niet meer te
 * focussen en kan een schermlezer de reden niet voorlezen. Hij blijft dus
 * aantikbaar en antwoordt met de reden.
 */
.act-uit {
  background: var(--white-a04);
  border-color: var(--white-a06);
  color: var(--ink-dim);
  cursor: default;
}

/*
 * De blokken `.blk` en `.kv` stonden hier. Ze staan nu in `components.css`: het
 * eventscherm gebruikt ze ook, en een gedeelde bouwsteen die in het
 * stylesheet van één scherm woont is een bouwsteen die iemand daar weghaalt.
 */

.per {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 6px 0;
  width: 100%;
  background: none;
  border: 0;
  font-family: inherit;
  line-height: var(--lh-body);
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.per:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.per-naam { display: block; font-size: var(--fs-body-sm); }

.tls { display: block; font-size: var(--fs-meta-sm); color: var(--muted-2); margin-top: 2px; }

/* ---- Tijdlijn: nieuwste bovenaan, die stip in goud ----------------------- */

.tijdlijn { margin-top: 6px; }
.tl { display: flex; gap: var(--gap-row); padding: 5px 0; }
.tld { width: 9px; flex: 0 0 auto; display: flex; justify-content: center; padding-top: 5px; }
.tld i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-a60, rgba(180,142,71,.6)); display: block; }
.tld i.tld-oud { background: var(--white-a18); }
.tlb { flex: 1; min-width: 0; }
.tlt { font-size: var(--fs-support); }

.banner-warn-vet { color: var(--warn-strong); }

.mt-16 { margin-top: 16px; }

/* ---- Stand en volgende stap (AANVULLING-10 §4, §5) ---------------------- */

.relatie-stand {
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
/* De reden van een pauze staat ernaast, niet eronder: het hoort bij het label. */
.relatie-pauze {
  font-size: var(--fs-meta);
  color: var(--muted-2);
}

/*
 * De volgende stap: één regel, met een rand eromheen zodat hij niet meeleest met
 * de gegevens erboven. Het is geen eigenschap van de relatie maar wat er straks
 * gebeurt.
 */
.relatie-stap {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: var(--r-banner);
  background: var(--surface);
  border: 1px solid var(--white-a06);
  font-size: var(--fs-support);
}
/* Geen volgende stap is een mededeling, geen fout: rustig, niet oranje. */
.relatie-stap-leeg { color: var(--muted); }

.relatie-labels { flex-wrap: wrap; margin-top: 6px; }
.chip-toevoegen { color: var(--gold); border-color: var(--gold-a30); cursor: pointer; }

/* Onderaan: archiveren gewoon, verwijderen klein en stil (AANVULLING-14 §4). */
.relatie-onderin { display: flex; align-items: center; gap: 16px; }
.relatie-verwijder { color: var(--muted-2); }

/* ---- Bouwopdracht 7, blok B: het relatiescherm als CRM-scherm ------------ */

/* De eigenaar is een knop geworden (B4); hij ziet eruit als de regel die hij was. */
button.relatie-eigenaar {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
button.relatie-eigenaar:hover .relatie-eigenaar-tekst { color: var(--gold); }

/* De stand-pil als knop, alleen vóór het eerste contact (B7). */
button.relatie-standknop { border: 0; font: inherit; cursor: pointer; }

/* De overige nummers en de website onder de kop (A1, B5). */
.relatie-overig { font-size: var(--fs-micro); }
.relatie-site { color: var(--gold-light); text-decoration: none; }
.relatie-site:hover { text-decoration: underline; }
.relatie-sitevoorstel .lnk { margin-left: 4px; }

/* De uitklappende contactpersoon (B3): het chevron draait mee. */
.per-chev { display: inline-flex; transition: transform 0.15s ease; }
.per-chev-open { transform: rotate(90deg); }
.per-detail { padding: 2px 0 10px 46px; }
.per-detail .kv { padding: 3px 0; }

/* Het kansenblok (B8): naam in gewone kleur, fase als pil, menu rechts. */
.kans-naam { color: inherit; }
.kans-rechts { display: inline-flex; align-items: center; gap: 8px; }

/* Meer velden (B6): elke regel is een knop naar zijn eigen waarde. */
button.relatie-veld {
  background: none;
  border: 0;
  padding: 6px 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
button.relatie-veld:hover span:first-child { color: var(--gold); }

/* De adresregel draagt nu vier knoppen (B5): laat hem netjes omslaan. */
.route-adres { flex-wrap: wrap; row-gap: 6px; }

/* ---- De kop en de tijdlijnfilters (BOUWOPDRACHT-8 par. 3.3) ------------- */

.relatie-vlag { font-size: 0.8em; }
.relatie-kopgetal { color: inherit; }
.relatie-kopgetal:hover { color: var(--gold); }
.relatie-tl-filter { margin-bottom: 8px; }
.relatie-tl-filter .chip { cursor: pointer; }
.relatie-tl-filter .chip[aria-pressed="true"] { background: var(--gold); color: var(--bg); }
/* display:flex zou het hidden-attribuut anders overstemmen. */
.tl[hidden] { display: none; }

/* ---- De kopregels met de temperatuur (AANVULLING-21) -------------------- */
.relatie-kopregel2 { gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.relatie-voorstel .lnk { margin-left: 6px; }
button.relatie-pauze { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* CRM-dossier: gegevens links, activiteiten en opvolging rechts. */
.bureau-kolom:has(.crm-pagina){width:100%;max-width:none}
.crm-pagina{width:100%;max-width:1360px;margin:0 auto;padding:26px;box-sizing:border-box}
.crm-kop{margin-bottom:24px}
.crm-temperatuur{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.crm-temperatuur .temperatuur-rij{margin:0}
.crm-label{display:block;color:var(--muted);font-size:12px;font-weight:500;line-height:1.4;margin-bottom:7px}
.crm-kop h1{margin:0 0 12px}
.crm-kop .relatie-naam{font-family:var(--font-sans);font-size:30px;line-height:1.2;font-weight:600;overflow-wrap:anywhere}
.crm-kop .relatie-naam .i{color:var(--gold);margin-left:8px;vertical-align:middle}
.crm-kopmeta{display:flex;gap:10px 20px;align-items:center;flex-wrap:wrap;font-size:13px}
.crm-eigenaar{font:inherit;color:var(--persoon,var(--ink));background:none;border:1px solid var(--line);padding:6px 10px;border-radius:20px;cursor:pointer}
.crm-omschrijving{margin-top:12px;color:var(--muted);font-size:14px}
.crm-indeling{display:grid;grid-template-columns:minmax(290px,.78fr) minmax(0,1.65fr);gap:24px;align-items:start}
.crm-samenvatting,.crm-werkruimte{min-width:0}
.crm-pagina .blk{border:1px solid var(--line);border-radius:14px;padding:20px;margin:0 0 20px;background:var(--surface);min-width:0}
.crm-pagina .blk-kop{margin-bottom:18px;gap:12px;flex-wrap:wrap}
.crm-pagina .blk-kop .eyebrow,.crm-contactgegevens h2{font:600 16px/1.4 var(--font-sans);text-transform:none;letter-spacing:0;color:var(--ink);margin:0}
.crm-gegeven{margin-top:20px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.crm-gegeven>div{min-width:0}
.crm-adres{margin:0;display:block;font-size:14px;color:var(--ink)}
.crm-adres-acties{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.crm-wijzig{display:block;margin-top:5px;font-size:12px}
.crm-extra-nummer{display:block;margin-top:8px}
.crm-toevoegen{font-size:12px;margin-top:8px}
.crm-pagina .per{padding:12px 0;gap:10px}
.crm-pagina .per .groei{min-width:0;overflow-wrap:anywhere}
.crm-pagina .per-detail{padding:8px 0 12px}
.crm-pagina .per-detail .kv{flex-wrap:wrap;gap:6px;overflow-wrap:anywhere}
.crm-pagina .per-detail .kv>span:last-child{color:var(--ink)}
.crm-pagina .per-detail .aanzet-acties{gap:12px;flex-wrap:wrap}
.crm-beheer{padding:0 6px;font-size:13px;color:var(--muted)}
.crm-beheer summary{cursor:pointer;padding:10px 0}
.crm-beheer .relatie-onderin{padding:12px 0;flex-wrap:wrap}
.crm-werkruimte>.pad{padding:0;margin:0}
.crm-werkruimte .acts{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.crm-werkruimte .act{border:1px solid var(--line);font-size:12px;height:60px;color:var(--ink)}
.crm-werkruimte .relatie-stap{margin:16px 0 20px;justify-content:space-between;line-height:1.5}
.crm-tabs{display:flex;gap:24px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:20px}
.crm-tabs button{font:inherit;font-size:14px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);padding:12px 0;white-space:nowrap;cursor:pointer}
.crm-tabs button[aria-selected="true"]{border-bottom-color:var(--gold);color:var(--gold)}
.crm-pagina [role="tabpanel"][hidden]{display:none}
.crm-pagina .tl-zoek{width:100%;box-sizing:border-box;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:11px 12px;font:inherit;font-size:14px}
.crm-pagina .tl-zoek:focus{outline:2px solid var(--gold);outline-offset:2px}
.crm-pagina .tl-zoek::placeholder{color:var(--muted)}
.crm-pagina .relatie-tl-filter{margin:14px 0;gap:8px;flex-wrap:wrap}
.crm-pagina .tijdlijn{display:grid;gap:14px;margin-top:18px}
.crm-pagina .tl{padding:16px;border:1px solid var(--line);border-radius:10px;display:block;background:var(--bg)}
.crm-pagina .tl[hidden]{display:none}
.crm-pagina .tld{display:none}
.crm-activiteit-soort{font-size:12px;font-weight:600;color:var(--gold);text-transform:capitalize;margin-bottom:9px}
.crm-pagina .tlt{font-size:15px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.crm-pagina .tl .tls{font-size:12px;line-height:2;margin-top:14px;color:var(--muted)}
.crm-pagina .tl .tls button{color:var(--gold-light);min-height:32px}
.crm-auteur{color:var(--persoon,var(--muted))}
.crm-leeg{font-size:14px;color:var(--muted);line-height:1.6}
.crm-pagina button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:800px){
 .crm-pagina{padding:20px 16px}
 .crm-indeling{grid-template-columns:minmax(0,1fr);gap:24px}
 .crm-kop .relatie-naam{font-size:25px}
 .crm-pagina .blk{padding:16px}
 .crm-werkruimte .acts{grid-template-columns:repeat(3,minmax(0,1fr))}
 .crm-tabs{gap:20px}
 .crm-pagina .tl{padding:14px}
}

/* Notities hebben hun eigen vaste plek onderaan het relatiedossier. */
.crm-notities{width:100%;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere;scroll-margin-top:16px}
.crm-notities h2{font:600 16px/1.4 var(--font-sans);margin:0}
.crm-notitie{border-top:1px solid var(--line);padding:16px 0}
.crm-notitie-tekst{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;margin:0 0 12px}
.crm-notitie-meta{font-size:12px;color:var(--muted);margin-bottom:10px}
.crm-notities .row{gap:12px;flex-wrap:wrap}
.crm-notitie-form,.crm-notitie-form label{display:block;min-width:0;max-width:100%}
.crm-notitie-form textarea{display:block;box-sizing:border-box;min-width:0;width:100%;max-width:100%;resize:vertical;margin:8px 0 12px;font-size:16px}
.crm-contact-bel{display:inline-block;max-width:100%;overflow-wrap:anywhere;font-size:14px;padding:0 0 12px 44px;box-sizing:border-box}
.crm-pagina .per-detail .kv{min-width:0;max-width:100%;box-sizing:border-box}

.crm-persoon-notitie { white-space:pre-wrap; overflow-wrap:anywhere; min-width:0; }
/* Volledig bewerkscherm, in dezelfde maat als Contact vastleggen. */
.crm-gegevens-dialoog { position:fixed; inset:0; margin:0; width:100%; max-width:none; height:100dvh; max-height:100dvh; padding:0; border:0; border-radius:0; background:var(--bg); color:var(--ink); overflow:hidden; }
.crm-gegevens-dialoog[open] { display:flex; flex-direction:column; }
.crm-gegevens-dialoog form { display:flex; flex-direction:column; min-height:0; height:100%; width:100%; }
.crm-gegevens-kop,.crm-gegevens-voet { flex-shrink:0; padding:16px max(20px,calc((100vw - 880px)/2)); background:var(--bg); }
.crm-gegevens-kop { padding-top:max(16px,var(--safe-top)); border-bottom:1px solid var(--line); }
.crm-gegevens-dialoog h2 { margin:0; font-size:22px; }
.crm-gegevens-inhoud { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:20px max(20px,calc((100vw - 880px)/2)); }
.crm-gegevens-inhoud section+section { margin-top:28px; border-top:1px solid var(--line); padding-top:20px; }
.crm-gegevens-inhoud h3 { margin:0 0 16px; font-size:16px; }
.crm-gegevens-voet { padding-bottom:max(16px,var(--safe-onder)); border-top:1px solid var(--line); }
.crm-gegevens-voet .row { display:flex; gap:12px; }
.crm-gegevens-voet .btn { flex:1; min-width:0; }
.crm-gegevens-dialoog::backdrop { background:var(--bg); }
.crm-gegevens-velden { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.crm-gegevens-velden label { display:flex; flex-direction:column; gap:6px; min-width:0; }
.crm-gegevens-velden input,.crm-gegevens-velden select,.crm-gegevens-velden textarea { width:100%; min-width:0; padding:10px; min-height:var(--tap-min); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; font:inherit; }
.crm-gegevens-dialoog [role=alert] { margin:0 0 12px; color:var(--gold); }
.crm-gegevens-dialoog [role=alert]:empty { display:none; }
@media(max-width:600px){.crm-gegevens-velden{grid-template-columns:minmax(0,1fr)}}