/* Base Table Styling */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--background);
}

/* Sticky Table Header */
table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--background);
}

table thead tr {
  color: var(--color);
  text-align: left;
}

table th {
  padding: 1rem;
  text-align: center;
  font-weight: 700;
}

/* Modifier States for Header */
table.success thead {
  --color: var(--success-color);
  --color-rgb: 157, 223, 158;
}

table.error thead {
  --color: var(--error-color);
  --color-rgb: 242, 155, 158;
}

table.warning thead {
  --color: var(--warning-color);
  --color-rgb: 248, 218, 133;
}

table.white thead {
  --color: var(--white-color);
  --color-rgb: 255, 255, 255;
}

table.black thead {
  --color: var(--black-color);
  --color-rgb: 51, 51, 51;
}

table.question thead {
  --color: var(--question-color);
  --color-rgb: 162, 0, 255;
}

table.odd thead {
  --color: var(--odd-color);
  --color-rgb: 43, 0, 255;
}

/* Table Body Styling */
table td {
  padding: 1rem;
  text-align: center;
  font-weight: 500;
}

/* Row Hover Effect */
table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

/* Alternating Row Colors */
table tbody tr:nth-of-type(even) {
  /* background-color: rgba(var(--color-rgb, 157, 223, 158), 0.05); */
}

/* Last Row Border for the Table Body */
table tbody tr:last-of-type {
  border-bottom: none;
}

/* Footer Row */
table tfoot tr {
  color: var(--bold);
  font-weight: bold;
}

table tfoot td {
  padding: 1rem;
  text-align: center;
}

/* Rounded Borders for Table */
table th:first-child,
table td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

table th:last-child,
table td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}