/* Klantprijslijsten: de tabellen, de lijst met aandachtspunten en de kleine aanpassingen op de bestaande componenten.
   Kleur is nooit de enige drager: elke ernst heeft ook een icoon en een tekst. */

.alleen-klein { display: none; }
.oordeel-teller-neutraal { --teller-merk: var(--lijn-sterk); }

.pl-tabel .kol-naam, .pr-tabel .kol-naam { min-width: 15rem; max-width: 26rem; }
.pl-tabel td .badge { margin-bottom: 2px; }
.pl-tabel td .badges, .pr-tabel td .badges { gap: 4px; }
.pl-tabel td .sub .badge, .pr-tabel td .sub .badge { margin-top: 2px; }
.pr-tabel td.r .sub { white-space: nowrap; }
.pr-tabel td .sub .trend { font-size: 12px; }
.pr-tabel .kol-naam .badges { margin-top: 5px; }
.pr-tabel tr.markeer-slecht td.sterk { color: var(--rood); }

/* aandachtspunten van een lijst */
.puntenlijst { display: grid; }
.puntenlijst > li { padding: var(--r-3) var(--r-5); border-bottom: 1px solid var(--lijn-zacht); }
.puntenlijst > li:last-child { border-bottom: 0; }
.puntenlijst .sig-detail { overflow-wrap: anywhere; }
.info-lijst { border-top: 1px solid var(--lijn); background: var(--paneel-2); border-radius: 0 0 var(--straal) var(--straal); }
.info-lijst > li { font-size: 13px; color: var(--inkt-2); display: flex; flex-wrap: wrap; gap: 4px var(--r-2); align-items: center; }
.paneel-kop .badge { margin-left: var(--r-1); }

@media (max-width: 640px) {
  .alleen-klein { display: inline; }
  .puntenlijst > li { padding-inline: var(--r-4); }
}