/* Scrollbalk boven brede tabellen (Sijara 17-08) — zie static/pp/topscroll.js.
   Apart bestand omdat zowel de admin (admin.css) als de app (pp.css) hem laadt. */

.pp-topscroll {
  overflow-x: scroll;   /* scroll i.p.v. auto: de balk moet altijd zichtbaar zijn, ook op
                           systemen die scrollbalken pas bij het scrollen tonen */
  overflow-y: hidden;
  height: 14px;
  margin-bottom: 4px;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #0093A9 #E9ECF2;
}

.pp-topscroll-vulling {
  height: 1px;          /* geen inhoud, alleen breedte: dat maakt de balk scrollbaar */
}

/* WebKit/Blink: de balk expliciet tekenen, anders is hij op macOS onzichtbaar tot je scrollt. */
.pp-topscroll::-webkit-scrollbar {
  height: 11px;
}

.pp-topscroll::-webkit-scrollbar-track {
  background: #E9ECF2;
  border-radius: 6px;
}

.pp-topscroll::-webkit-scrollbar-thumb {
  background: #0093A9;
  border-radius: 6px;
  border: 2px solid #E9ECF2;
}

.pp-topscroll::-webkit-scrollbar-thumb:hover {
  background: #007487;
}

@media (prefers-color-scheme: dark) {
  .pp-topscroll {
    scrollbar-color: #0093A9 #2b2f36;
  }
  .pp-topscroll::-webkit-scrollbar-track {
    background: #2b2f36;
  }
  .pp-topscroll::-webkit-scrollbar-thumb {
    border-color: #2b2f36;
  }
}