/* Vandaag (huid, ronde 2): één raster. Bovenaan de cijfers in vier gelijke kolommen (rij 2: kosten, omzet per
   kanaal over twee kolommen, kwaliteitsscore); daaronder Nu en Koppelingen naast elkaar en even hoog; dan Deze
   week over de volle breedte. Geen kolom die eerder ophoudt. Alleen tokens van de bouwdoos. */
.vd { display: grid; gap: var(--a4); margin: var(--a3) 0 var(--a4); }
.vd-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a3); align-items: stretch; }
.vd-raster > .bd-stat { min-width: 0; }
.vd-raster .vd-breed { grid-column: span 2; }
.vd-stat .bd-spark { width: 100%; height: 32px; }
.vd-stat .bd-stat-beeld .bd-ring { width: 56px; height: 56px; }
.vd-klein { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.vd-klein a { color: var(--accent); }

/* De twee kaarten van app.js in het raster: dezelfde vorm als een statkaart, tekst niet onder 12 px. */
.vd-oud { border: 0; margin: 0; }
.vd-oud .card-label { font-size: var(--tekst-tabel) !important; color: var(--tekst-zacht); font-weight: 400; }
.vd-oud :is(.tag-muted, .row-sub, small) { font-size: var(--tekst-klein) !important; }

/* Nu en Koppelingen: even hoog. */
.vd-rij { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--a4); align-items: stretch; }
.vd-rij > .bd-laag { min-width: 0; }
.vd-rij > .bd-kolom { width: auto; display: flex; flex-direction: column; }
.vd-rij > .bd-kolom > .bd-kolom-sectie { flex: 1; align-content: start; }
.vd .bd-laag--nu .bd-vk { box-shadow: var(--schaduw); }
.vd .vd-kaart--urgent { background: linear-gradient(120deg, var(--fout-vlak), var(--vlak)); }
.vd .vd-kaart .bd-vk-knoppen { justify-content: flex-start; }

/* Deze week: het werkblok (takenlijst, winst per artikel, sales per dag) op de volle breedte. */
.vd .bd-laag--week .dash-werk { margin: 0; }
.vd .bd-laag--week .dash-werk .card { background: var(--laag-vlak); border: 0; border-radius: var(--radius-kaart); box-shadow: none; }
.vd .bd-laag--week .dash-werk :is(.tag-muted, .row-sub, em, small, .btn-outline, .chart-value, .chart-label-plain, .taken-reden, .taken-meer) { font-size: var(--tekst-klein) !important; }
.vd .bd-laag--week .dash-werk .card-label { font-size: var(--tekst-tabel) !important; }

/* Rechterkolom: ring met bijschrift, dan de lijst. */
.vd-kolom-ring { display: flex; align-items: center; gap: var(--a3); font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.vd-kolom-ring .bd-ring { width: 56px; height: 56px; }

/* Gisteren: vier statkaarten boven het dagoverzicht, zelfde raster. */
.vd-gisteren .vd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a3); }

@media (max-width: 1100px) {
  .vd-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vd-rij { grid-template-columns: minmax(0, 1fr); }
}
.vd-raster > .vd-oud { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--a2); }
@media (min-width: 1001px) { .vd .bd-laag--week .dash-werk { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.vd-negatief .bd-stat-getal { color: var(--fout-tekst); }