/* p-vf-prijzen: Versfabriek-uitbreiding (Prijslijst en Buiten prijslijst). Alleen var(--token). */

/* ===================== Prijslijst ===================== */
.pt-tabel { min-width: 560px; }
.pt-prijs { white-space: nowrap; }
.pt-geen { color: var(--tekst-3); }

/* Eerste kolom blijft staan als de matrix zijwaarts schuift */
.pt-tabel th:first-child, .pt-tabel td:first-child,
.mg-tabel th:first-child, .mg-tabel td:first-child {
  position: sticky; left: 0; background: var(--opp);
  border-right: 1px solid var(--lijn);
}
.pt-tabel thead th:first-child, .mg-tabel thead th:first-child { z-index: 3; background: var(--opp-3); }
.pt-tabel tbody tr:hover td:first-child, .mg-tabel tbody tr:hover td:first-child { background: var(--opp-2); }

/* Rood = minder marge dan standaard, groen = meer. Het woord staat in de titel en de legenda. */
.pt-tabel td[data-staat="slecht"], .pt-tabel tbody tr:hover td[data-staat="slecht"] {
  background: var(--slecht-zacht); color: var(--slecht-tekst); font-weight: 650;
}
.pt-tabel td[data-staat="goed"], .pt-tabel tbody tr:hover td[data-staat="goed"] {
  background: var(--goed-zacht); color: var(--goed-tekst); font-weight: 650;
}
.pt-noot { display: grid; gap: 8px; border-top: 1px solid var(--lijn); }
.pt-vlag { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--lijn-2); }
.pt-vlag[data-staat="slecht"] { background: var(--slecht-zacht); border-color: var(--slecht); }
.pt-vlag[data-staat="goed"] { background: var(--goed-zacht); border-color: var(--goed); }

/* ===================== Buiten de prijslijst ===================== */
.mg-tabel { min-width: 860px; }
.mg-tabel thead th { white-space: normal; line-height: 1.25; }
.mg-tabel td .iv-getal { min-width: 0; }
.mg-uitleg { min-width: 260px; max-width: 420px; white-space: normal; }
.mg-uitleg .mini { display: block; }
.mg-tabel tfoot td { padding: 9px 12px; font-weight: 650; border-top: 1px solid var(--lijn-sterk); }
.mg-tabel tfoot td:first-child { position: sticky; left: 0; background: var(--opp); }

/* Wie koopt wat: kleurschaal in acht stappen van de merkkleur */
.mg-wie { min-width: 980px; }
.mg-wie th { white-space: normal; }
.mg-vak { white-space: nowrap; }
.mg-vak[data-s="1"] { background: color-mix(in srgb, var(--serie-1) 8%, transparent); }
.mg-vak[data-s="2"] { background: color-mix(in srgb, var(--serie-1) 14%, transparent); }
.mg-vak[data-s="3"] { background: color-mix(in srgb, var(--serie-1) 21%, transparent); }
.mg-vak[data-s="4"] { background: color-mix(in srgb, var(--serie-1) 29%, transparent); }
.mg-vak[data-s="5"] { background: color-mix(in srgb, var(--serie-1) 38%, transparent); }
.mg-vak[data-s="6"] { background: color-mix(in srgb, var(--serie-1) 48%, transparent); }
.mg-vak[data-s="7"] { background: color-mix(in srgb, var(--serie-1) 58%, transparent); }
.mg-vak[data-s="8"] { background: color-mix(in srgb, var(--serie-1) 70%, transparent); }

@media (max-width: 640px) {
  .mg-tabel th:first-child, .mg-tabel td:first-child { max-width: 118px; min-width: 100px; }
  .pt-tabel th:first-child, .pt-tabel td:first-child { min-width: 96px; }
  .pt-noot { padding-left: 15px; padding-right: 15px; }
}