.wideTableContainer {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
}

.topScrollWrapper {
  overflow: hidden; /* Hide any overflow from the wrapper */
}

.topScrollBar {
  overflow-x: auto;
  overflow-y: hidden;
  height: 20px; /* Slightly larger to accommodate default scrollbar */
  width: 100%; /* Take full width of the wrapper */
}

.topScrollContent {
  height: 1px;
  background: transparent;
}

.bottomScrollContainer {
  overflow-x: auto;
  overflow-y: visible;
}

.tableContent {
  width: 100%; /* Take full width first */
  min-width: max-content; /* Then ensure it can grow if needed */
}

/* Handle long content in table cells */
.tableContent table {
  width: 100% !important; /* Take full width of parent container */
  max-width: 100vw; /* Don't exceed viewport width */
  table-layout: auto; /* Let columns distribute naturally */
}

.tableContent table thead,
.tableContent table tbody {
  width: 100%;
}

.tableContent table tr {
  width: 100%;
}

.tableContent td,
.tableContent th {
  max-width: 500px; /* Reasonable max width per cell */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Use default system scrollbars */
