/* Veldplanning: velddelen (verticaal) × kwartieren (horizontaal).
   Bouwt op het gedeelde raster in portal.css (.raster-*, .rc, .slot-badge) — dezelfde look
   als het trainingrooster. Hier alleen wat de tijdas en de blokken nodig hebben. */
.vp-nav{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.vp-nav .input{ width:auto; }
.vp-today.is-today{ opacity:.45; pointer-events:none; }
/* While another day loads (static/daynav.js). */
[data-vp-day].vp-loading{ opacity:.55; transition:opacity .15s; pointer-events:none; }
.vp-fresh{ font-size:.88rem; opacity:.8; margin:0 0 .8rem; }
.vp-fresh.stale{ opacity:1; color:#b7791f; }

/* Lagere rijen dan het trainingrooster: een dag heeft veel velddelen. */
.vp-grid .rc{ min-height:40px; padding:6px 10px; }
.vp-grid .vp-hourhead{ padding:6px 0; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.02em; justify-content:flex-start; padding-left:4px; overflow:hidden; white-space:nowrap; }
/* Eén achtergrondbaan per velddeel (de rijlijn); urenlijnen liggen erover, blokken daar weer over. */
.vp-grid .vp-lane{ border-right:none; padding:0; }
.vp-hourline{ border-left:1px dashed var(--line); pointer-events:none; z-index:1; }
.vp-block{ position:relative; z-index:2; display:flex; align-items:stretch; padding:3px;
  min-width:0; background:var(--paper); border-bottom:1px solid var(--line); }
.vp-block.vp-end{ border-bottom:none; }
.vp-block .slot-badge{ padding:3px 5px; min-height:0; min-width:0; overflow:hidden; }
.vp-block .sbn{ font-size:11px; }
/* Een blok over meerdere velddelen heeft ruimte: de naam mag dan doorlopen op meer regels. */
.vp-tall .sbn{ white-space:normal; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:4; }
.slot-badge .sbt{ font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:500; opacity:.85;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

/* Soorten: training = blauw (als het trainingrooster), wedstrijd = goud, extra = groen. */
.slot-badge.vp-training, .rl-dot.vp-training{ background:var(--blue); }
.slot-badge.vp-match, .rl-dot.vp-match{ background:var(--gold); }
.slot-badge.vp-match .sbn, .slot-badge.vp-match .sbt{ color:var(--ink); }
.slot-badge.vp-extra, .rl-dot.vp-extra{ background:#2e8b57; }
.slot-badge.vp-conflict, .rl-dot.vp-conflict{ background:#c83232; }
.slot-badge.vp-conflict .sbn, .slot-badge.vp-conflict .sbt{ color:#fff; }
/* Afwijkend van het rooster (uitzondering: verplaatst of extra): cool steel met een diepblauw
   kader. Een box-shadow, zodat de gouden stippellijn van het planbord (outline, .pb-moved) er
   los van blijft. Dubbel geboekt blijft rood (met een donker kader). */
.slot-badge.vp-changed, .rl-dot.vp-changed{ background:var(--cool-steel); box-shadow:0 0 0 2px var(--blue-deep); }
.slot-badge.vp-changed, .slot-badge.vp-changed .sbn{ color:var(--ink); }
.slot-badge.vp-conflict.vp-changed{ background:#c83232; box-shadow:0 0 0 2px var(--ink); }
.slot-badge.vp-conflict.vp-changed .sbn{ color:#fff; }
/* Dubbel geboekte blokken staan naast elkaar in hun (gedeelde) vlak; zie Block.lane. */
.vp-block:has(.vp-conflict){ justify-self:start; background:transparent; }

.legend-card.raster-legend{ margin-top:1rem; }
.vp-conflicts, .vp-unmapped{ margin-top:1rem; }
.vp-conflicts ul{ margin:.3rem 0 0; }
.vp-conflict-note{ color:#c53030; font-weight:600; margin:0; }

/* Planning board (veldbord.js): a moved block gets a dashed gold outline until it is saved. */
.vp-block.pb-moved .slot-badge{ outline:2px dashed var(--gold); outline-offset:1px; }

/* Share (static/vpshare.js): the button needs JavaScript and is gone while editing the board. */
.vp-actions{ display:flex; gap:.4rem; }
html:not(.vp-can-share) .vp-share, .pb-editing .vp-share{ display:none; }
/* The image: html2canvas renders a copy of the day with .vp-shot, at desktop width. Only the
   date, the grid and the legend; no navigation, notices, conflict list or edit bar. */
.vp-shot{ padding:16px; background:var(--white); }
.vp-shot .vp-nav, .vp-shot .flash, .vp-shot .vp-fresh, .vp-shot .vp-conflicts,
.vp-shot .vp-unmapped, .vp-shot .pb-bar, .vp-shot dialog{ display:none !important; }
.vp-shot .raster-wrap{ box-shadow:none; }
.vp-shot .raster-body{ overflow:visible; }
.vp-shot .raster-grid{ overflow:hidden; }
/* html2canvas draws no spread-only box-shadow: the frame of a changed item becomes a border. */
.vp-shot .vp-changed{ box-shadow:none; border:2px solid var(--blue-deep); }
.vp-shot .slot-badge.vp-conflict.vp-changed{ border-color:var(--ink); }
/* html2canvas finds the text baseline with a 1×1 gif next to sample text in the page itself;
   the global img{display:block} (design-system.css) breaks that and shifts all text down. */
.vp-rendering body > div > img[src^="data:image/gif"]{ display:inline; }

/* Phone: line 1 = the selected day, line 2 = the navigation (‹ date › Vandaag). */
@media (max-width:640px){
  .vp-head{ flex-direction:column; align-items:stretch; gap:10px; }
  .vp-head h3{ font-size:19px; }
  .vp-nav{ display:grid; grid-template-columns:auto 1fr auto auto; gap:6px; }
  .vp-nav .vp-date{ min-width:0; }
  .vp-nav .vp-date .input{ width:100%; min-width:0; padding-left:.6rem; padding-right:.4rem; }
  .vp-nav .vp-step{ width:40px; padding-left:0; padding-right:0; justify-content:center; }
  .vp-nav .vp-today{ padding-left:.8rem; padding-right:.8rem; }
  .vp-nav .vp-actions{ grid-column:1 / -1; }
  .vp-actions .btn{ flex:1; justify-content:center; }
  .vp-grid .rc{ min-height:36px; }
}