/* 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; }

/* De werkbalk: een rij van zoekveld, filters en kolomkeuze, ongeveer 36 px hoog. Een filter is een knop met het label en de
   gekozen waarde; hij klapt een eigen keuzelijst uit. Actief = druif met een kruisje. */
.werkbalk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2); }
/* ook als de werkbalk in een houder staat (bv. .geen-print op de tellijst) houdt hij lucht boven en onder */
.paneel > .werkbalk, .paneel > :has(> .werkbalk:only-child) { margin-block: var(--r-3); margin-inline: var(--r-4); }
.wb-zoek { position: relative; flex: 1 1 11rem; max-width: 24rem; min-width: 0; margin: 0; }
.wb-zoek > .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--inkt-3); pointer-events: none; }
.wb-zoek input[type="search"] { width: 100%; height: 36px; padding: 0 30px 0 34px; border: 1px solid var(--lijn); border-radius: var(--straal-klein); background: var(--paneel); color: var(--inkt); font: inherit; font-size: var(--t-ui); }
.wb-zoek input::placeholder { color: var(--inkt-3); }
.wb-zoek input:hover { border-color: var(--lijn-sterk); }
.wb-zoek input:focus-visible { outline-offset: -1px; }
.wb-zoek input::-webkit-search-cancel-button, .wb-lijst-zoek input::-webkit-search-cancel-button { display: none; }
.wb-zoek.actief input[type="search"] { border-color: var(--accent); font-weight: 600; }
.wb-zoek .wb-weg { position: absolute; right: 6px; top: 7px; }
.wb-filter { position: relative; display: inline-flex; align-items: center; height: 36px; max-width: 100%; border: 1px solid var(--lijn); border-radius: var(--straal-klein); background: var(--paneel); color: var(--inkt-2); font-size: var(--t-ui); font-weight: 500; white-space: nowrap; text-decoration: none; }
.wb-filter:hover { border-color: var(--lijn-sterk); color: var(--inkt); }
.wb-filter.actief, .wb-filter:has(> details[open]) { color: var(--inkt); }
.wb-filter.actief { background: var(--accent-vlak); border-color: transparent; }
.wb-filter.actief .wb-label, .wb-filter.actief .wb-waarde, .wb-filter.actief .wb-weg { color: var(--accent-sterk); }
.wb-filter:has(> details[open]) { border-color: var(--accent); }
.wb-uit { margin: 0; border: 0; min-width: 0; }
.wb-uit > summary { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 var(--r-2) 0 var(--r-3); font-size: var(--t-ui); font-weight: 500; list-style: none; cursor: pointer; border-radius: var(--straal-klein); }
.wb-uit > summary::-webkit-details-marker, .wb-uit > summary::before { display: none; }
.wb-label { color: var(--inkt-3); }
.wb-keuze .wb-label:has(+ .wb-waarde)::after { content: ":"; }
.wb-keuze:not(.actief) .wb-label:not(:has(+ .wb-waarde)) { color: var(--inkt-2); }
.wb-waarde { color: var(--inkt); max-width: 13rem; overflow: hidden; text-overflow: ellipsis; }
.wb-keuze.actief .wb-waarde { font-weight: 650; }
.wb-pijl { color: var(--inkt-3); margin-left: 2px; }
.wb-uit[open] .wb-pijl { transform: rotate(180deg); }
.wb-keuze.actief > .wb-uit > summary { padding-right: 4px; }
.wb-keuze > .wb-weg { margin-right: 5px; }
.wb-weg { display: inline-grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; color: var(--inkt-2); }
.wb-weg:hover { background: var(--lijn-zacht); color: var(--inkt); }

/* de keuzelijst onder een filter */
.wb-lijst { position: absolute; left: -1px; top: calc(100% + 6px); z-index: 20; width: max-content; min-width: max(100%, 13rem); max-width: min(24rem, calc(100vw - 2 * var(--r-4))); padding: var(--r-1); background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--straal); box-shadow: var(--schaduw-op); white-space: normal; }
.wb-lijst ul { max-height: 19rem; overflow-y: auto; overscroll-behavior: contain; }
.wb-lijst a { display: flex; align-items: center; gap: var(--r-2); min-height: 32px; padding: 5px var(--r-3) 5px var(--r-2); border-radius: var(--straal-klein); color: var(--inkt); font-size: var(--t-ui); font-weight: 500; line-height: 1.3; text-decoration: none; }
.wb-lijst a:hover, .wb-lijst a:focus-visible { background: var(--paneel-2); }
.wb-lijst a:focus-visible { outline-offset: -2px; }
.wb-lijst a .ic { color: transparent; }
.wb-lijst a[aria-current] { font-weight: 650; }
.wb-lijst a[aria-current] .ic { color: var(--accent); }
.wb-lijst li:first-child:not(:last-child) { padding-bottom: var(--r-1); margin-bottom: var(--r-1); border-bottom: 1px solid var(--lijn-zacht); }
.wb-lijst-zoek { position: relative; margin-bottom: var(--r-1); }
.wb-lijst-zoek .ic { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--inkt-3); pointer-events: none; }
.wb-lijst-zoek input { width: 100%; height: 32px; padding: 0 var(--r-2) 0 30px; border: 0; border-bottom: 1px solid var(--lijn-zacht); border-radius: 0; background: none; color: var(--inkt); font: inherit; font-size: var(--t-ui); }
.wb-lijst-zoek input:focus-visible { outline: 0; border-bottom-color: var(--inkt); }
.wb-lijst-leeg { padding: var(--r-2) var(--r-3); color: var(--inkt-3); font-size: var(--t-ui); }

.wb-vink { gap: var(--r-2); padding: 0 var(--r-3); cursor: pointer; }
.wb-vakje { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--lijn-sterk); border-radius: 3px; background: var(--paneel); color: transparent; }
.wb-vink.actief { font-weight: 650; }
.wb-vink.actief .wb-vakje { background: var(--accent); border-color: var(--accent); color: var(--paneel); }
.wb-wis { padding: 0 var(--r-1); font-size: var(--t-ui); font-weight: 550; color: var(--inkt-2); white-space: nowrap; }
.wb-wis:hover { color: var(--inkt); }

.kolomkeuze { position: relative; flex: 0 0 auto; margin: 0 0 0 auto; border: 0; }
.kolomkeuze > summary.wb-knop { list-style: none; gap: 6px; padding: 0 var(--r-3); font-weight: 550; color: var(--inkt); cursor: pointer; }
.kolomkeuze > summary::-webkit-details-marker, .kolomkeuze > summary::before { display: none; }
.kolomkeuze[open] > summary { border-color: var(--inkt); }
.kolomkeuze .ic { color: var(--inkt-3); }
.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: var(--schaduw-op); }
.kolomkeuze-kop { margin: 0 0 var(--r-3); font-size: var(--t-mini); 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: var(--t-ui); 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: var(--straal-klein); background: var(--lijn-zacht); 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: var(--straal-rond); background: var(--inkt); color: var(--op-kleur); font-size: var(--t-label); font-weight: 700; line-height: 15px; text-align: center; }
.tabel .kol-status { white-space: nowrap; }

@media (max-width: 900px) {
  .wb-zoek { flex: 1 1 100%; max-width: none; }
}
@media (max-width: 640px) {
  .kolomkeuze { margin-left: 0; }
  .kolomkeuze-paneel { left: 0; right: auto; }
  .wb-waarde { max-width: 9rem; }
  /* de keuzelijst hangt op een telefoon aan de hele werkbalk, niet aan de knop, zodat hij nooit buiten beeld valt */
  .werkbalk { position: relative; }
  .wb-keuze { position: static; }
  .wb-lijst { left: 0; right: 0; top: auto; width: auto; max-width: none; margin-top: 6px; }
}