table.sortable th button {
  font-weight: bold;
  background: transparent;
  border: none;
  display: inline;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  text-align: left;
  outline: none;
  cursor: pointer;
}

table:not(.sortable) th button {
  font-weight: bold;
  background: transparent;
  border: none;
  display: inline;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  text-align: left;
  outline: none;
  cursor: default !important; 
}

table.sortable th button span {
  padding: 5px;
}

table.sortable th[aria-sort="descending"] span::after {
  content: "▼";
  top: 0;
}

table.sortable th[aria-sort="ascending"] span::after {
  content: "▲";
  top: 0;
}

/* Focus and hover styling */
table.sortable th button:focus,
table.sortable th button:hover {
  outline: 2px solid currentcolor;
}

table.sortable th:not([aria-sort]) button:focus span::after,
table.sortable th:not([aria-sort]) button:hover span::after {
  content: "▼";
  top: 0;
}