*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #root {
  height: 100%;
  width: 100%;
}

input[type="number"]::-webkit-inner-spin-button {
  opacity: 0.4;
}

.nav-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
}

.nav-tabs::-webkit-scrollbar {
  display: none;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Sleepvlak op de rechterrand van een tabelkop — zie hooks/useKolomBreedtes.js.
   Blijft binnen de cel (geen negatieve offset), anders duwt de laatste kolom
   een horizontale scrollbar tevoorschijn. */
.kolom-grip {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}

/* Het streepje erft de kleur van de kop, dus per categorie de accentkleur. */
.kolom-grip::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 2px;
  width: 1px;
  height: 50%;
  background: currentColor;
  opacity: 0.3;
}

.kolom-grip:hover::after,
.kolom-grip:active::after {
  top: 0;
  height: 100%;
  width: 2px;
  opacity: 1;
}