/* De balk boven de lijst: Filter, het sorteerveld en het filterpaneel.

   Staat los van paginering.css omdat het een ander onderwerp is: dát bestand
   gaat over de rij cijfers, dit over de bedieningen eromheen. Ze staan wel op
   dezelfde pagina's, dus dit is opsplitsen voor de leesbaarheid, niet om
   minder te laden. Maat en ronding komen uit basis.css — Filter, de cijfers en
   het sorteerveld horen één ding te zijn. */

/* ---- Filter en Sorteren, in dezelfde maat en kleur ------------------- */
/* Alle drie de bedieningen boven de lijst zijn nu hetzelfde ding: dezelfde
   hoogte, dezelfde ronding, dezelfde rand en dezelfde letterkleur. De bron
   gaf de Filter-knop een gevuld groenblauw vlak (#669999) en liet het
   sorteerveld op de standaard van de browser staan — drie kleuren naast
   elkaar in één balk. */
#pagination_top #toonFilter,
#pagination_top .pagination_top_sortering select,
#pagination_top #filter_top select,
#pagination_top #filter_top button,
#pagination_top .pagination_top_sortering button {
  box-sizing: border-box;
  height: var(--gk-knop-hoog, 29px) !important;
  min-height: 0 !important;
  line-height: 1 !important;
  padding: 0 10px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff !important;
  border: 1px solid var(--gk-accent, #4e7ca5) !important;
  border-radius: var(--gk-knop-rond, 8px) !important;
  color: var(--gk-accent, #4e7ca5) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* Het knopje dat de sorteerrichting omdraait is vierkant, net als vorige en
   volgende — maar het staat er niet meer (zie hieronder). De opmaak blijft
   staan voor als het ooit terugkomt. */
#pagination_top .pagination_top_sortering button {
  width: var(--gk-knop-hoog, 29px) !important;
  padding: 0 !important;
}

/* Het pijltje achter Sorteren staat er weer, sinds 03-09-2026.
   Het was verborgen omdat het niets deed: het zat in een eigen formulier dat de
   volgorde omdraait via een POST, en die POST bestond bij ons niet. Een knop die
   niets doet is erger dan geen knop, dus ging hij uit.
   Inmiddels werkt hij wel — `order` blijkt bij hun kant ook gewoon als parameter
   achter het adres te werken, zie tools/sorteerknop.py. Dan hoort hij er weer te
   staan, want op de echte site staat hij er ook. */

/* Alles op één regel, en op dezelfde hoogte. De bron zet `#pagination_top` als
   raster neer en laat de drie blokken bovenin hun cel beginnen; de cel van de
   cijfers is 44 px hoog en die van Filter en Sorteren 64, dus stonden de
   randjes een paar pixels uit elkaar. */
#pagination_top {
  align-items: center !important;
}

#pagination_top .pagination_filter,
#pagination_top .pagination_top_sortering,
#pagination_top .pagination_pages {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* De drie kolommen zijn even breed, dus het midden van de middelste is ook het
   midden van de tekstkolom. Links tegen de linkerrand van de kaartjes, rechts
   tegen de rechterrand: het sorteerveld stond aan de linkerkant van zijn eigen
   kolom en hing daardoor 90 px van de rand. */
#pagination_top .pagination_filter { justify-content: flex-start; }
#pagination_top .pagination_top_sortering { justify-content: flex-end; }

/* Het filterpaneel dat onder Filter openklapt: zelfde maat, zelfde ronding,
   zelfde kleur als de rest van de balk. */
#pagination_top #filter_top {
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#pagination_top #filter_top .filter_box,
#pagination_top #filter_top label.select {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

#pagination_top #toonFilter i,
#pagination_top .pagination_top_sortering button i {
  color: inherit !important;
  font-size: 11px !important;
}

/* De bron zet `padding: 4px 0 0 7px` op dat icoon, bedoeld voor hun eigen knop
   die breder is en geen rand heeft. In ons vierkante knopje duwt die padding het
   pijltje naar rechtsonder in plaats van in het midden. Robbert wees erop,
   03-09-2026, en gaf de selector erbij.
   `#right_container` staat erbij om dezelfde specificiteit te halen als hun
   regel; zonder dat wint die van ons, ook met !important erachter. */
#right_container #pagination_top .pagination_top_sortering button i,
#pagination_top .pagination_top_sortering button i {
  padding: 0 !important;
}

#pagination_top #toonFilter:hover,
#pagination_top .pagination_top_sortering select:hover,
#pagination_top #filter_top select:hover,
#pagination_top #filter_top button:hover,
#pagination_top .pagination_top_sortering button:hover {
  background: var(--gk-accent-vlak, #f0f6fb) !important;
  color: var(--gk-accent, #4e7ca5) !important;
}

/* De pijl van het sorteerveld hoort bij het veld; de bron zet daar een eigen
   achtergrondplaatje neer dat niet meebeweegt met de nieuwe hoogte. */
/* De sorteer-dropdown moet breed genoeg zijn voor het langste woord,
   "Aanbevolen". Zonder min-width kapte hij dat af (Robbert, 03-09-2026). Alleen
   de sorteer-select; de filter-selects hebben hun eigen breedte. */
#pagination_top .pagination_top_sortering #sortering {
  width: auto !important;
  min-width: 148px !important;
}

#pagination_top .pagination_top_sortering select,
#pagination_top #filter_top select {
  padding-right: 28px !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234e7ca5' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  background-size: 10px 7px !important;
  -webkit-appearance: none;
  appearance: none;
}