/* planning-schil.css — de gedeelde vormtaal van de twee planmodules
   (UP1, 05-08). Verkoopplanning en Uitvoerplanning zijn zusterschermen: ze
   delen de standen-kop, de wortel en de eenvoudige lijstkaart, zodat een
   planner in beide modules dezelfde taal ziet. Wat eigen is aan een module
   staat in verkoopplanning.css respectievelijk uitvoerplanning.css.

   Eerder stond dit impliciet in de CSS van één module — bij het opruimen
   van UP1 bleek dat broos. Vandaar dit expliciete, gedeelde bestand. */

.vp-schil { display: flex; flex-direction: column; min-height: 100%; }
.vp-kop { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  max-width: 1240px; margin: 0 auto; width: 100%; padding: 26px 32px 0; }
.vp-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.vp-standen { display: flex; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; overflow: hidden; }
.vp-stand { border: 0; background: #fff; padding: 7px 15px; font-size: .74rem; font-weight: 700;
  color: var(--c-ink-2); font-family: inherit; cursor: pointer; text-decoration: none; display: inline-block; }
.vp-stand.is-actief { background: var(--c-groen); color: #fff; }
.vp-wortel { max-width: 1240px; margin: 0 auto; width: 100%; padding: 14px 32px 72px;
  display: flex; flex-direction: column; gap: 14px; }

/* eenvoudige lijstkaart met klikbare rijen (verwijzingen, werkvoorraden) */
.vp-lijst { display: flex; flex-direction: column; padding: 14px 18px; }
.vp-rij { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; border-top: var(--lijndikte) solid var(--c-lijn); padding: 9px 2px;
  font-size: .78rem; font-family: inherit; color: var(--c-ink); text-decoration: none; cursor: pointer; }
.vp-rij:first-of-type { border-top: 0; }
.vp-rij:hover { background: var(--c-paneel-2); }
.vp-rij__nr { font-size: .62rem; color: var(--c-ink-3); width: 18px; }
.vp-rij__wie { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vp-rij__adres { font-size: .68rem; color: var(--c-ink-3); }

/* ---- UP3 (05-08): de vormtaal die béíde planmodules gebruiken staat
   hier — tweeluik, werkvoorraad-kolom, werkstrook, roosterbasis, popup
   met voorstellen, concept-strook, blokmenu-modalen en het kaartvak.
   Verkoop- en uitvoerplanning zijn zusterschermen; wat écht eigen is
   (uur-agenda + adviseur-kiezer, respectievelijk het m²-bord) staat in
   de module-CSS zelf. ---- */

.vp-v7 { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.vp-balk { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 18px 26px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.vp-balk .vp-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.vp-rek { flex: 1; }
.vp-weeknav { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--c-ink-2); }

.vp-vlak { display: grid; grid-template-columns: 310px minmax(0, 1fr); flex: 1; min-height: 0; }

/* ---- links: de planvoorraad ---- */
.vp-kolom { border-right: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column;
  min-height: 0; background: var(--c-creme); }
.vp-kolomkop { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3);
  margin: 0; padding: 14px 16px 2px; font-weight: 700; }
.vp-kolomkop b { color: var(--c-ink); font-size: .9rem; }
.vp-sorteer { font-size: .66rem; color: var(--c-ink-3); font-style: italic; padding: 0 16px 8px; }
.vp-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 8px; }
.vp-items { flex: 1; overflow-y: auto; padding: 0 12px 10px; display: flex; flex-direction: column; gap: 7px; }
.vp-item { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 10px 12px; cursor: pointer; font-family: inherit; transition: background 150ms ease, border-color 150ms ease; }
.vp-item:hover { background: var(--c-paneel-2); }
.vp-item.is-sel { border: 2px solid var(--c-groen); background: var(--c-groen-t); }
.vp-item__r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vp-item__r1 b { font-size: .82rem; color: var(--c-ink); }
.vp-item__sub { font-size: .7rem; color: var(--c-ink-2); }
.vp-item__hint { font-size: .66rem; color: var(--c-ink-3); font-style: italic; }
.vp-merk { font-size: .6rem; font-weight: 800; border-radius: 5px; padding: 1px 7px; white-space: nowrap; }
.vp-leeg { font-size: .74rem; color: var(--c-ink-3); margin: 6px 2px; }

/* ---- rechts: werkstrook + agenda ---- */
.vp-rechts { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; overflow: hidden; }
.vp-nu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .8rem;
  padding: 10px 20px; background: var(--c-paneel-2); border-bottom: var(--lijndikte) solid var(--c-lijn); }
.vp-nu__leeg { font-style: italic; color: var(--c-ink-3); }
.vp-nu__hint { font-size: .72rem; color: var(--c-ink-3); font-style: italic; }

.vp-agenda { flex: 1; overflow: auto; padding: 10px 20px 24px; }
.vp-rooster { border-collapse: collapse; width: 100%; table-layout: fixed; }
.vp-rooster th { font-size: .7rem; color: var(--c-ink-3); font-weight: 600; padding: 6px 4px;
  border-bottom: var(--lijndikte) solid var(--c-lijn-2); text-align: left; }
.vp-rooster td { border: var(--lijndikte) solid var(--c-lijn); height: 42px; vertical-align: top; padding: 0; position: relative; }
.vp-vrij { cursor: pointer; }
.vp-vrij:hover { background: var(--c-groen-t); }
.vp-tip { cursor: pointer; background: var(--c-groen-t); box-shadow: inset 0 0 0 2px var(--c-groen); }
.vp-tipsub { position: absolute; bottom: 2px; left: 6px; font-size: .6rem; color: var(--c-groen-d); font-weight: 700; }
.vp-blok { display: block; width: calc(100% - 4px); margin: 2px; padding: 3px 7px; text-align: left;
  font-size: .68rem; font-weight: 700; background: var(--c-paneel); color: var(--c-ink);
  border: 0; border-left: 3px solid var(--c-lijn-2); border-radius: 4px; font-family: inherit; cursor: pointer; }
.vp-blok small { display: block; font-size: .6rem; font-weight: 400; color: var(--c-ink-2); }
.vp-blok.is-concept, .vp-blok.is-conceptvak { background: var(--c-groen-t); border-left-color: var(--c-groen); color: var(--c-groen-d); }
.vp-blok__notitie { color: var(--c-groen-d); }

/* ---- popup met de drie voorstellen ---- */
.vp-popup { position: absolute; top: 96px; right: 22px; width: 340px; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  box-shadow: var(--schaduw-tegel-hover); z-index: 25; padding-bottom: 8px; }
.vp-popup__kop { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px 2px; }
.vp-popup__kop h3 { margin: 0; font-size: .84rem; }
.vp-sluit { border: 0; background: var(--c-paneel); border-radius: 5px; width: 24px; height: 24px;
  font-size: .7rem; cursor: pointer; color: var(--c-ink-2); font-family: inherit; }
.vp-popup__sub { font-size: .66rem; color: var(--c-ink-3); padding: 0 14px 8px; margin: 0; }
.vp-optie { display: block; width: calc(100% - 24px); margin: 0 12px 7px; text-align: left; cursor: pointer;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 9px 12px; font-family: inherit; }
.vp-optie:hover { background: var(--c-paneel-2); }
.vp-optie.is-best { border: 2px solid var(--c-groen); }
.vp-optie b { display: block; font-size: .8rem; }
.vp-best { float: right; font-size: .6rem; font-weight: 800; color: var(--c-groen-d); }
.vp-optie__wie { font-size: .72rem; color: var(--c-ink-2); }
.vp-optie__why { display: block; font-size: .64rem; color: var(--c-ink-3); font-style: normal; margin: 3px 0; }
.vp-optie__klik { display: block; font-size: .64rem; font-weight: 700; color: var(--c-groen-d); }
.vp-popup__voet { display: flex; gap: 5px; flex-wrap: wrap; padding: 4px 12px 4px; }

/* ---- concept-strook ---- */
.vp-bevestig { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .8rem;
  padding: 11px 20px; border-top: 2px solid var(--c-groen); background: var(--c-groen-t); }
.vp-buiten { font-size: .7rem; color: var(--c-ink-2); font-style: italic; }
.vp-notitielabel { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 260px;
  font-size: .68rem; color: var(--c-ink-2); }
.vp-notitielabel input { flex: 1; padding: 6px 10px; font-size: .74rem; font-family: inherit;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); }
.vp-nietsverstuurd { font-size: .66rem; color: var(--c-ink-2); }

/* ---- modalen ---- */
.vp-blokmenu { display: flex; flex-direction: column; gap: 6px; }
.vp-geschlijst { display: flex; flex-direction: column; gap: 2px; max-height: 380px; overflow-y: auto; }
.vp-gesch { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; font-size: .74rem;
  padding: 5px 0; border-top: var(--lijndikte) solid var(--c-lijn); line-height: 1.5; }
.vp-gesch em { font-style: normal; color: var(--c-ink-3); }

@media (max-width: 1100px) {
  .vp-vlak { grid-template-columns: 1fr; }
  .vp-kolom { border-right: 0; border-bottom: var(--lijndikte) solid var(--c-lijn); max-height: 300px; }
  .vp-popup { position: static; width: auto; margin: 12px 20px; }
}

/* VP5 · kaart: Leaflet-vak (of dezelfde tekening schematisch), filters,
   routekaartje met km + reistijd en de legenda. */
.vp-kaartvlak { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.vp-kaartbalk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 20px 8px; }
.vp-kaartadv { font-size: .68rem; color: var(--c-ink-3); }
.vp-kaartvak { position: relative; flex: 1; min-height: 420px; margin: 0 20px 20px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); overflow: hidden; }
.vp-leaflet { position: absolute; inset: 0; }
.vp-kaartsvg { width: 100%; height: 100%; display: block; }
.vp-kaartlabel { font-size: 12px; font-weight: 700; fill: var(--c-ink); font-family: var(--font-ui); }
.vp-kaartpin { cursor: pointer; }
.vp-klegenda { position: absolute; bottom: 12px; left: 12px; z-index: 500; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 12px;
  font-size: .66rem; display: grid; gap: 4px; box-shadow: var(--schaduw-tegel); }
.vp-klegenda i { font-style: normal; display: flex; align-items: center; gap: 7px; color: var(--c-ink-2); }
.vp-pin { width: 11px; height: 11px; border-radius: 99px; display: inline-block; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--c-lijn-2); }
.vp-pin--plan { background: var(--c-groen); }
.vp-pin--gepland { background: var(--c-ink-3); }
.vp-pin--nieuw { background: transparent; border: 2px dashed var(--c-ink); box-shadow: none; }
.vp-kmerk { position: absolute; bottom: 12px; right: 12px; z-index: 500; background: #fff;
  border-radius: var(--radius); padding: 4px 10px; font-size: .62rem; color: var(--c-ink-3); }

/* UP6: het routekaartje hoort bij béíde planmodules — verkoop toont de
   dagroute van de adviseur, uitvoering die van de ploegen. */
.vp-routekaart { position: absolute; top: 12px; right: 12px; z-index: 500; background: #fff;
  border: 2px solid var(--c-groen); border-radius: var(--radius); padding: 10px 14px;
  font-size: .72rem; line-height: 1.6; box-shadow: var(--schaduw-tegel-hover); display: flex; flex-direction: column; }
.vp-routekaart b { font-size: .76rem; }
.vp-routekaart em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }

/* UP6: de dagkiezer van de kaart — verkoop kiest de dag van de adviseur,
   uitvoering die van de ploegroutes. */
.vp-kaartdag { display: flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--c-ink-2); margin-left: auto; }
.vp-kaartdag input { padding: 5px 8px; font-size: .74rem; font-family: inherit;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); }