/* Lijstpagina's: de werkbalk (zoeken, filters, chips, kolomkeuze) en de statuskolom met iconen. */

/* Een pagina met een brede tabel gebruikt de hele breedte naast de zijbalk (de dashboards houden hun maximumbreedte). */
.inhoud.breed { max-width: none; }

.werkbalk { align-items: flex-end; }
.werkbalk-onder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--r-3); margin: var(--r-3) 0; }
.werkbalk-onder:empty { display: none; }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2); list-style: none; margin: 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: 13px; background: var(--blauw-vlak); color: var(--blauw); font-size: var(--t-klein); font-weight: 560; }
.chip a { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: inherit; }
.chip a:hover { background: rgba(43, 90, 147, .16); }

.kolomkeuze { position: relative; margin-left: auto; }
.kolomkeuze > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--r-2); }
.kolomkeuze > summary::-webkit-details-marker { display: none; }
.kolomkeuze-paneel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 19rem; max-width: calc(100vw - 2 * var(--r-4)); padding: var(--r-4); background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--straal); box-shadow: 0 8px 28px rgba(15, 18, 23, .14); }
.kolomkeuze-kop { margin: 0 0 var(--r-3); font-size: var(--t-klein); color: var(--inkt-2); }
.kolomkeuze-paneel ul { list-style: none; margin: 0 0 var(--r-3); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--r-3); }
.kolomkeuze-paneel li label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
.kolomkeuze-acties { display: flex; gap: var(--r-2); }

.statusicons { display: inline-flex; align-items: center; gap: 6px; }
.statusicoon { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #eef0f2; color: var(--inkt-2); }
.statusicoon .ic { width: 17px; height: 17px; }
.statusicoon.goed { background: var(--groen-vlak); color: var(--groen); }
.statusicoon.let { background: var(--geel-vlak); color: var(--geel); }
.statusicoon.slecht { background: var(--rood-vlak); color: var(--rood); }
.statusicoon.info { background: var(--blauw-vlak); color: var(--blauw); }
.statusicoon.uit { background: transparent; color: var(--lijn-sterk); }
.statusaantal { position: absolute; top: -6px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--inkt); color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; }
.tabel .kol-status { white-space: nowrap; }

@media (max-width: 640px) {
  .kolomkeuze { margin-left: 0; }
  .kolomkeuze-paneel { left: 0; right: auto; }
}