/* Lijsten en tijdlijnen: de tabel, de filterbalk, paginering, de tijdlijn en de
   zoekresultaten in de bovenbalk. */

/* ── Tabel ──────────────────────────────────────────────────────────────── */

/* Relatief: een verborgen label in een cel (voor een schermlezer) blijft zo binnen het vak,
   en maakt de pagina niet breder dan het scherm. */
.tabel-vak {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-groot);
  background: var(--kleur-vlak);
}

.tabel {
  width: 100%;
  border-collapse: collapse;
}

.tabel th,
.tabel td {
  padding: var(--ruimte-3) var(--ruimte-4);
  border-bottom: 1px solid var(--kleur-rand-zacht);
  text-align: left;
  vertical-align: top;
}

/* In een tabel met knoppen breekt een lange naam zonder spatie af als hij echt niet past,
   in plaats van de tabel breder te maken dan zijn vak en de knoppen weg te duwen. Alleen
   daar: in een tabel zonder knoppen (de planning, met zijn uitleg) zou een nummer of een
   maand anders midden in het woord afbreken. Die tabel schuift liever opzij. */
.tabel-vak:has(td.acties) td {
  overflow-wrap: anywhere;
}

.tabel thead th {
  color: var(--kleur-tekst-gedempt);
  font-size: var(--tekst-klein);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--kleur-vlak-zacht);
}

/* Op een laptop: minder lucht in de cellen, en een kop van twee woorden mag over twee
   regels. Zo past een tabel met knoppen naast de velden van een detailpagina. */
@media (width <= 1440px) {
  .tabel th,
  .tabel td {
    padding-inline: var(--ruimte-3);
  }

  .tabel thead th {
    white-space: normal;
  }
}

.tabel tbody tr:last-child td,
.tabel tbody tr:last-child th {
  border-bottom: 0;
}

.tabel tbody tr:hover {
  background: var(--kleur-vlak-zacht);
}

.tabel .getal {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Een tweede regel in een cel: waar een getal vandaan komt, of een omschrijving. Onder de
   waarde in plaats van ernaast, zodat de knoppen aan het eind van de rij in beeld blijven. */
.tabel .onder {
  display: block;
  color: var(--kleur-tekst-gedempt);
  font-size: var(--tekst-klein);
  white-space: normal;
}

/* Een getal invullen in een tabel, zoals bij een telling. */
.tabel input {
  width: 120px;
  min-height: var(--klikdoel);
  padding: 0 var(--ruimte-3);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  background: var(--kleur-vlak);
  text-align: right;
}

.tabel input:focus {
  border-color: var(--kleur-focus);
  outline: 0;
}

/* Een formulier dat in een rij opengaat (een regel wijzigen, afsluiten): daar zijn het
   gewone velden, over de volle breedte, en geen smal getalvak. */
.tabel .veld > input:not([type="checkbox"]) {
  width: 100%;
}

/* Wat onder een tabel staat (een formulier, een knop), plakt er niet tegenaan. */
.tabel-vak + * {
  margin-top: var(--ruimte-4);
}

/* Een naam breekt anders op elk streepje zodra een tabel veel getallen en knoppen heeft. */
.tabel .naam {
  min-width: 12rem;
}

.tabel-link {
  font-weight: 600;
  text-decoration: none;
}

.tabel-link:hover {
  text-decoration: underline;
}

.sorteerknop {
  display: inline-flex;
  gap: var(--ruimte-1);
  align-items: center;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  cursor: pointer;
}

.sorteerpijl {
  min-width: 10px;
}

/* Sorteren met een keuzelijst: alleen op een klein scherm, waar de kop er niet staat
   (klein-scherm.css). */
.tabel-sorteer {
  display: none;
  gap: var(--ruimte-2);
  align-items: center;
  margin-bottom: var(--ruimte-3);
  color: var(--kleur-tekst-gedempt);
}

.tabel-sorteer select {
  flex: 1;
  min-height: var(--klikdoel);
  padding: 0 var(--ruimte-3);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  color: var(--kleur-tekst);
  background: var(--kleur-vlak);
}

/* ── Filterbalk ─────────────────────────────────────────────────────────── */

.filterbalk {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  align-items: center;
  margin-bottom: var(--ruimte-4);
}

/* Het zoekvak groeit mee, maar niet over de hele breedte van een ultrawide scherm. */
.filter-zoek {
  display: flex;
  flex: 1 1 260px;
  max-width: 520px;
  gap: var(--ruimte-2);
  align-items: center;
  min-height: var(--klikdoel);
  padding: 0 var(--ruimte-3);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  color: var(--kleur-tekst-gedempt);
  background: var(--kleur-vlak);
}

.filter-zoek input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--kleur-tekst);
  background: transparent;
}

.filter-zoek:focus-within {
  border-color: var(--kleur-focus);
}

.filter-keuze select {
  min-height: var(--klikdoel);
  padding: 0 var(--ruimte-3);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  background: var(--kleur-vlak);
}

.filter-vinkje {
  display: inline-flex;
  gap: var(--ruimte-2);
  align-items: center;
  min-height: var(--klikdoel);
  padding: 0 var(--ruimte-2);
}

.filterbalk-rechts {
  display: flex;
  gap: var(--ruimte-2);
  margin-left: auto;
}

/* ── Paginering ─────────────────────────────────────────────────────────── */

/* Links hoeveel het er zijn, in het midden de pagina's, rechts hoeveel per pagina. */
.paginering {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2) var(--ruimte-4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ruimte-3);
  color: var(--kleur-tekst-gedempt);
}

.paginering-telling {
  font-variant-numeric: tabular-nums;
  color: var(--kleur-tekst-gedempt);
}

p.paginering-telling {
  margin: var(--ruimte-3) 0 0;
}

/* Wat onder de paginering staat (een knop), plakt er niet tegenaan. */
.paginering + *,
p.paginering-telling + * {
  margin-top: var(--ruimte-4);
}

.paginering-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-1);
  align-items: center;
}

.paginering-nummer {
  display: inline-grid;
  place-items: center;
  min-width: var(--klikdoel);
  min-height: var(--klikdoel);
  padding: 0 var(--ruimte-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--kleur-tekst-zacht);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: none;
}

button.paginering-nummer {
  cursor: pointer;
}

button.paginering-nummer:hover {
  border-color: var(--kleur-rand);
  color: var(--kleur-tekst);
  background: var(--kleur-vlak);
}

.paginering-nummer[aria-current="page"] {
  border-color: var(--kleur-accent);
  color: var(--kleur-accent);
  background: var(--kleur-accent-zacht);
}

.paginering-gat {
  min-width: var(--ruimte-6);
  text-align: center;
}

.paginering-aantal select {
  min-height: var(--klikdoel);
  padding: 0 var(--ruimte-3);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  color: var(--kleur-tekst-zacht);
  background: var(--kleur-vlak);
}

/* ── Tijdlijn ───────────────────────────────────────────────────────────── */

.tijdlijn {
  padding: var(--ruimte-4) var(--ruimte-5);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-groot);
  background: var(--kleur-vlak);
}

.tijdlijn-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-1);
  margin-bottom: var(--ruimte-3);
}

.tijdlijn-filter {
  min-height: 36px;
  padding: 0 var(--ruimte-3);
  border: 1px solid var(--kleur-rand);
  border-radius: 99px;
  color: var(--kleur-tekst-zacht);
  background: var(--kleur-vlak);
  cursor: pointer;
}

.tijdlijn-filter.actief {
  border-color: var(--kleur-accent);
  color: var(--kleur-accent);
  background: var(--kleur-accent-zacht);
}

.tijdlijn-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tijdlijn-item {
  padding: var(--ruimte-3) 0 var(--ruimte-3) var(--ruimte-4);
  border-left: 2px solid var(--kleur-rand);
}

.tijdlijn-mutatie {
  border-left-color: var(--kleur-info);
}

.tijdlijn-wie {
  color: var(--kleur-tekst-gedempt);
  font-size: var(--tekst-klein);
}

.tijdlijn-meer {
  margin-top: var(--ruimte-3);
  text-align: center;
}

/* ── Zoekresultaten ─────────────────────────────────────────────────────── */

.zoek-lijst {
  margin: 0;
  padding: var(--ruimte-1) 0;
  list-style: none;
}

.zoek-treffer {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0 var(--ruimte-3);
  padding: var(--ruimte-2) var(--ruimte-4);
  color: var(--kleur-tekst);
  text-decoration: none;
}

.zoek-treffer:hover,
.zoek-treffer:focus {
  background: var(--kleur-accent-zacht);
}

.zoek-soort {
  grid-row: span 2;
  color: var(--kleur-tekst-gedempt);
  font-size: var(--tekst-klein);
}

.zoek-titel {
  font-weight: 600;
}

.zoek-onder {
  color: var(--kleur-tekst-gedempt);
  font-size: var(--tekst-klein);
}

.zoek-leeg {
  margin: 0;
  padding: var(--ruimte-4);
  color: var(--kleur-tekst-gedempt);
}