/*
 * Contactmoment vastleggen (blok B punt 5).
 *
 * Bijna alles komt uit `components.css` en van het vastlegscherm: `.chip`,
 * `.blk`, `.sec`, `.dock`, `.lockrow`, `.banner`. Hier staat alleen wat dit
 * scherm eigen is - de velden, het tekstvak met de spraakknop, en de samplerij.
 */

.cm-relatie { font-size: var(--fs-support); }
.cm-chips { overflow-x: auto; margin-top: 8px; }

.cm-datum {
  display: block;
  width: 100%;
  margin-top: 10px;
  min-height: var(--tap-min);
  padding: 0 12px;
  border-radius: var(--r-btn);
  border: 1px solid var(--white-a10);
  background: var(--white-a04);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  /* Zonder dit staat er een wit klokje in een donker scherm. */
  color-scheme: dark;
}

/* Label links smal, waarde rechts groot - de veldenlijst van §6.4. */
.cm-veld {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.cm-label {
  width: 76px;
  flex: 0 0 auto;
  font-size: var(--fs-meta);
  color: var(--muted-2);
}
.cm-waarde { flex: 1; min-width: 0; }

.cm-waarde select,
.cm-sample select,
.cm-sample input {
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 10px;
  border-radius: var(--r-btn);
  border: 1px solid var(--white-a10);
  background: var(--white-a04);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body-sm);
  color-scheme: dark;
}

/* Het tekstvak met de spraakknop ernaast, zoals op het vastlegscherm. */
.cm-tekstrij {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 8px;
}
.cm-tekst {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border-radius: var(--r-banner);
  border: 1px solid var(--white-a10);
  background: var(--white-a04);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  resize: vertical;
}
.cm-spraak {
  width: var(--tap-min);
  height: var(--tap-min);
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--gold-a30);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Welk product en hoeveel: twee velden op één regel, het aantal smal. */
.cm-sample {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.cm-sample select { flex: 1; }
.cm-sample input { width: 92px; flex: 0 0 auto; }

.cm-plannen { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }
.cm-plannen label { display:flex; flex-direction:column; gap:6px; min-width:0; font-size:var(--fs-support); }
.cm-plannen label:first-child { grid-column:1/-1; }
.cm-plannen input { width:100%; min-width:0; margin:0; }
.contactmoment-opslaan .dock-knoppen { flex-wrap:wrap; }