/* Responsive Table Styles */
.post-content table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  border: 2px solid var(--border-color);
}

.post-content thead {
  background-color: var(--accent);
  color: var(--bg-dark);
}

.table-container {
  width: 100%;
  overflow-x: auto;
  margin: 1.5rem 0;
  /* Styling the scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-darker);
}

/* Webkit scrollbar styles */
.table-container::-webkit-scrollbar {
  height: 8px;
}

.table-container::-webkit-scrollbar-track {
  background: var(--bg-darker);
}

.table-container::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 4px;
}

.post-content th {
  /* background-color: var(--bg-darker); */
  /* color: var(--accent); */
  font-weight: bold;
  text-align: left;
  padding: 1rem;
  /* border: 1px solid var(--border-color); */
  white-space: nowrap;
}

.post-content td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  background-color: var(--bg-dark);
}

/* Zebra striping for better readability */
.post-content tr:nth-child(even) td {
  background-color: color-mix(in srgb, var(--bg-dark) 97%, var(--accent) 3%);
}

/* Hover effect */
.post-content tr:hover td {
  background-color: color-mix(in srgb, var(--bg-dark) 95%, var(--accent) 5%);
}