/* p-vf-overzicht: Versfabriek-uitbreiding. Alleen var(--token). */

/* ---- smal scherm: de pagina mag nooit breder worden dan het scherm ----
   Oorzaak van de 680 px op 390 breed: .scherm is een grid met een kolom van
   "auto" breedte (fleurenflow.css r.360) en .blok-kop__label staat op nowrap
   (fleurenflow.css r.369). De lange periodetekst boven de kerncijfers dwingt de
   kolom dan 565 px breed. Hier opgelost voor deze pagina: een kolom die mag
   krimpen en een label dat mag omslaan. */
.ov-pagina { grid-template-columns: minmax(0, 1fr); }
.ov-pagina .blok-kop { flex-wrap: wrap; row-gap: var(--sp-1); }
.ov-pagina .blok-kop__label { white-space: normal; }
@media (max-width: 700px) {
  .ov-pagina .blok-kop__lijn { display: none; }
}

/* ---- kop "De details" ---- */
.ov-details-kop {
  margin-top: var(--sp-5); padding: var(--sp-4) 0 0;
  border-top: 2px solid var(--lijn-2);
}
.ov-details-kop h2 { font-size: 22px; letter-spacing: -.015em; margin: 0 0 var(--sp-1); }

/* ---- tabellen in deze pagina ---- */
.ov-tabel { min-width: 560px; }
.ov-tabel--smal { min-width: 440px; }
.ov-tabel thead th { position: static; }
.ov-tabel .sub { max-width: 30ch; white-space: normal; }
.ov-voet { padding: var(--sp-3) 20px var(--sp-4); }
.ov-leeg { padding: var(--sp-5) 20px; font-weight: 600; color: var(--goed-tekst); }
.ov-pos { color: var(--goed-tekst); font-weight: 650; }
.ov-neg { color: var(--slecht-tekst); font-weight: 650; }
.ov-totaalrij td { background: var(--opp-2); font-weight: 650; border-top: 1px solid var(--lijn-2); }
.ov-tabel .ov-nr { width: 36px; color: var(--tekst-3); }

/* een naam waar je op klikt */
.ov-link {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600;
  color: var(--tekst); text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--lijn-sterk);
  text-underline-offset: 3px;
}
.ov-link:hover { color: var(--roest-tekst); text-decoration-color: var(--roest); }

/* ---- actiegroepen ---- */
.ov-groepknop {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  padding: 2px 0; font: inherit; color: var(--tekst); cursor: pointer; text-align: left;
}
.ov-groepknop:hover { color: var(--roest-tekst); }
.ov-groepknop__pijl { display: inline-flex; color: var(--tekst-3); }
.ov-grootste { min-width: 230px; max-width: 34ch; color: var(--tekst-2); }
.ov-tekstcel { color: var(--tekst-2); white-space: nowrap; }
.ov-groep-detail td { background: var(--opp-2); padding: var(--sp-3) var(--sp-4); }
/* de tabel scrolt zijwaarts: de namenlijst blijft links staan en binnen het scherm */
.ov-detailbinnen { position: sticky; left: 0; max-width: min(100%, calc(100vw - 88px)); }
.ov-leden { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); }
.ov-lid { display: inline-flex; align-items: baseline; gap: 6px; }

/* ---- top 10 ---- */
.ov-keuze { display: inline-flex; gap: var(--sp-1); }
.ov-keuze .knop[aria-pressed="true"] {
  background: var(--roest-zacht); border-color: var(--roest-rand); color: var(--roest-tekst); font-weight: 650;
}
.ov-staafje {
  display: inline-block; width: 70px; height: 8px; margin-right: 8px;
  background: var(--opp-3); border-radius: 4px; overflow: hidden; vertical-align: middle;
}
.ov-staafje i { display: block; height: 100%; background: var(--serie-1); border-radius: 4px; }

/* ---- grafieken van deze pagina ---- */
@media (max-width: 520px) {
  .ov-voet { padding-left: 14px; padding-right: 14px; }
  .ov-groep-detail td { padding: var(--sp-3); }
  .ov-details-kop h2 { font-size: 19px; }
}