/* verkoopplanning.css — wat eigen is aan de verkoopkant van het
   planscherm (wireframe v7): de klantscore en statusmerken, de
   belsectie, de adviseur-kiezer, de uur-agenda met dagdeel-dimming,
   de afsprakenlijst en het routekaartje. De gedeelde schil (tweeluik,
   lijst, popup, concept-strook, kaartvak) staat in planning-schil.css.
   Alleen tokens. */

.vp-score { font-family: var(--font-mono); font-size: .62rem; font-weight: 800; color: var(--c-groen-d);
  border: 1.5px solid var(--c-groen); border-radius: 5px; padding: 0 5px; margin-left: 6px; }
.vp-merk--nieuw { background: var(--c-ink); color: #fff; }
.vp-merk--her { border: 1px solid var(--c-groen); color: var(--c-groen-d); }
.vp-merk--stil { border: 1px dashed var(--c-lijn-2); color: var(--c-ink-3); }
.vp-oud { font-size: .64rem; color: var(--c-ink-3); }
.vp-belsectie { border-top: var(--lijndikte) solid var(--c-lijn); padding: 10px 14px 14px; max-height: 170px; overflow-y: auto; }
.vp-belsectie h3 { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); margin: 0 0 6px; }
.vp-beltaak { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: .74rem; padding: 5px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.vp-beltaak:last-child { border-bottom: 0; }
.vp-beltaak small { display: block; font-size: .64rem; color: var(--c-ink-3); }
.vp-nu__tel { font-size: .72rem; color: var(--c-ink-2); }
.vp-nu__acties { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.vp-nu__ladder { font-size: .66rem; color: var(--c-ink-3); }

.vp-advregel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 20px 4px; }
.vp-lbl { font-size: .66rem; font-weight: 800; letter-spacing: .06em; color: var(--c-ink-3); }
.vp-advkies { position: relative; }
.vp-advknop { border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: var(--radius);
  padding: 7px 13px; font-size: .78rem; font-weight: 700; color: var(--c-ink); font-family: inherit;
  min-width: 250px; text-align: left; cursor: pointer; }
.vp-advknop small { color: var(--c-ink-3); font-weight: 400; margin-left: 6px; }
.vp-pijl { float: right; color: var(--c-ink-3); font-size: .7rem; }
.vp-advlijst { position: absolute; top: 40px; left: 0; width: 340px; max-height: 340px; overflow-y: auto;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  box-shadow: var(--schaduw-tegel-hover); z-index: 30; }
.vp-advzoek { width: calc(100% - 20px); margin: 10px; padding: 7px 10px; font-size: .78rem;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); font-family: inherit; }
.vp-advgroep { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-ink-3); padding: 8px 13px 4px; border-top: var(--lijndikte) solid var(--c-lijn); }
.vp-aitem { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: #fff;
  padding: 7px 13px; font-size: .78rem; text-align: left; font-family: inherit; cursor: pointer; }
.vp-aitem:hover { background: var(--c-groen-t); }
.vp-aitem b { flex: 1; font-weight: 600; }
.vp-aitem__m { font-size: .64rem; color: var(--c-ink-3); }
.vp-aitem.is-uit { opacity: .45; cursor: not-allowed; }
.vp-advvoet { border-top: var(--lijndikte) solid var(--c-lijn); padding: 9px 13px; font-size: .64rem; color: var(--c-ink-3); }
.vp-advvoet a { color: var(--c-groen-d); font-weight: 700; }
.vp-snel { display: flex; gap: 4px; }
.vp-legenda { margin-left: auto; display: flex; gap: 12px; font-size: .64rem; color: var(--c-ink-3); }
.vp-legenda i { font-style: normal; display: flex; align-items: center; gap: 5px; }
.vp-vk { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.vp-vk--tip { background: var(--c-groen-t); border: 1.5px solid var(--c-groen); }
.vp-vk--dim { background: var(--c-paneel-2); border: 1px dashed var(--c-lijn-2); }
.vp-uurkop { width: 54px; }
.vp-uur { font-size: .66rem; color: var(--c-ink-3); padding: 3px 6px; border: 0; }
.vp-rooster td.is-dim { cursor: pointer;
  background: repeating-linear-gradient(45deg, #fff, #fff 3px, var(--c-paneel-2) 3px, var(--c-paneel-2) 6px); }

/* ---- lijstweergave ---- */
.vp-lijstvlak { flex: 1; overflow-y: auto; padding: 16px 22px 30px; display: flex; flex-direction: column; gap: 12px; }
.vp-lijstbalk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vp-zoek { flex: 1; max-width: 340px; padding: 7px 11px; font-size: .78rem; font-family: inherit;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); }
.vp-arij { display: grid; grid-template-columns: 150px 1.2fr 1fr 110px 130px 150px; gap: 10px; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; border-top: var(--lijndikte) solid var(--c-lijn);
  padding: 9px 4px; font-size: .76rem; font-family: inherit; cursor: pointer; color: var(--c-ink); }
.vp-arij:hover { background: var(--c-paneel-2); }
.vp-arij--kop { border-top: 0; font-size: .6rem; letter-spacing: .07em; color: var(--c-ink-3);
  text-transform: uppercase; cursor: default; }
.vp-arij--kop:hover { background: none; }
.vp-arij__stil { color: var(--c-ink-2); }
.vp-arij__status { font-size: .68rem; color: var(--c-ink-2); }
.vp-arij__status.is-rood { color: var(--c-rood); }
.vp-arij__status.is-amber { color: var(--c-amber); }

/* VP4 · afsprakenlijst: periode-chips en de notitie-regel in de klantkolom */
.vp-periode { display: flex; gap: 4px; margin-left: auto; }
.vp-arij__notitie { display: block; font-size: .64rem; font-style: normal; color: var(--c-groen-d); }
.vp-arij__status.is-groen { color: var(--c-groen-d); }