/* Load.Live 1.7.0 (S01) — de voorstelkaart (mockup M01): links het project en de dagen, rechts de mail.
 * Weg = ROOD (1.7.0-s60, G1-2: beslissing Michiel 30/10, uitzondering op "rood spaarzaam"), erbij = ok, andere uren = accent, ongewijzigd = zacht. */
.vs-sectie { margin: 0 0 20px; }
.vs-lijst { display: flex; flex-direction: column; gap: 16px; }
.vs-kaart { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px 24px; padding: 16px 18px; margin: 0 0 12px;
  border: 1px solid var(--lijn); border-left: 4px solid var(--accent); border-radius: var(--r-kaart, 10px); background: var(--vak); }
.vs-kaart.beslist { border-left-color: var(--lijn-sterk); opacity: .85; }
.vs-kaart h3 { margin: 2px 0 10px; }
.vs-geteld { margin-left: 8px; padding: 1px 8px; border-radius: var(--r-pil, 999px); background: var(--accent-zacht); color: var(--accent-tekst, var(--tekst)); font-size: 12px; text-transform: none; letter-spacing: 0; }
.vs-project { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 12px; margin: 0 0 12px; border: 1px solid var(--lijn); border-radius: var(--r-vak, 8px); }
.vs-blok h4, .vs-mail h4 { margin: 10px 0 6px; font: 400 15px/1.2 var(--display); letter-spacing: .04em; color: var(--zacht); text-transform: uppercase; }
.vs-dagen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vs-dag { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-klein, 6px); border: 1px solid var(--lijn); overflow-wrap: anywhere; }
.vs-dag.vs-weg { border-left: 4px solid var(--tally); }
.vs-dag.vs-weg > span:first-child { text-decoration: line-through; text-decoration-color: var(--tally); }
.vs-dag.vs-bij { border-left: 4px solid var(--ok); }
.vs-dag.vs-anders { border-left: 4px solid var(--accent); }
.vs-dag.vs-blijvend { color: var(--zacht); border-style: dashed; }
.vs-blijft { margin-top: 10px; }
.vs-pil { flex: none; padding: 1px 10px; border-radius: var(--r-pil, 999px); font-size: 12px; border: 1px solid currentColor; }
.vs-dag.vs-weg .vs-pil { color: var(--tally-tekst); }
.vs-dag.vs-bij .vs-pil { color: var(--ok); }
.vs-dag.vs-anders .vs-pil { color: var(--accent); }
.vs-info { margin: 0; white-space: pre-wrap; }
.vs-knoppen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.vs-mail { padding-left: 18px; border-left: 1px solid var(--lijn); min-width: 0; }
.vs-onderwerp { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.vs-tekst { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--accent); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.vs-klein { font-size: 13px; margin: 4px 0; }
.vs-mail-een + .vs-mail-een { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--lijn); }   /* 1.7.0-s60 (G1-1): samengevoegd uit meerdere mails */
.vs-boxen { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.vs-box { padding: 1px 8px; border-radius: var(--r-pil, 999px); border: 1px solid var(--lijn-sterk); font: 13px/1.5 var(--mono); }
.vs-aanpas fieldset { border: 1px solid var(--lijn); border-radius: var(--r-vak, 8px); margin: 0 0 12px; padding: 8px 12px; }
.vs-aanpas .vs-rij { display: grid; grid-template-columns: auto minmax(140px, 1.3fr) minmax(110px, 1fr) minmax(96px, .8fr) minmax(96px, .8fr); align-items: center; gap: 8px; margin: 6px 0; }
.vs-aanpas .vs-rij[data-anders] { grid-template-columns: minmax(120px, 1fr) minmax(96px, .8fr) minmax(96px, .8fr); }
.vs-aanpas .vs-rij input, .vs-aanpas .vs-rij select { width: 100%; min-width: 0; margin: 0; }
.vs-aanpas .vs-rij .vs-vink { margin: 0; }
.vs-vink { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
@media (max-width: 820px) {
  .vs-kaart { grid-template-columns: minmax(0, 1fr); }
  .vs-mail { padding-left: 0; border-left: 0; border-top: 1px solid var(--lijn); padding-top: 8px; }
  .vs-aanpas .vs-rij { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
  .vs-aanpas .vs-rij[data-anders] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}