css.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Global Styles */
* {
  font-family: "Inter", monospace !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Basic page styling (optional) */
html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #323232;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#leaderboard-heading {
  text-align: center !important;
  font-size: 3em !important;
  font-weight: bold !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

table.custom-board {
  margin-top: 5px !important;
}

/* Table: basic styling */
table.custom-board {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 0.9em;
}

/* Table cells */
table.custom-board th,
table.custom-board td {
  border: 1px solid #ddd;
  padding: 6px;
  text-align: center;
  white-space: nowrap;
}

/* Make header cells bold */
table.custom-board th {
  font-weight: 700 !important;
  background-color: #f4f4f4;
}

/* Sortable columns: pointer + arrow styling */
.sortable {
  cursor: pointer;
}

.sort-arrow {
  font-size: 0.8em;
  margin-left: 4px;
  color: #aaa; /* gray by default */
}

/* Zebra striping for table rows */
table.custom-board tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
table.custom-board tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

/* Pinned (sticky) columns for TH and TD */
.sticky-col {
  position: sticky;
  background-color: #f4f4f4;
  z-index: 2;
}
.pinned-col {
  left: 0;
}

/* Example offset if you had a second pinned column:
.pinned-col:nth-of-type(2) {
  left: 9em;
}
*/