.data-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pretty-data-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 1rem;
}

.pretty-data-table th,
.pretty-data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #ddd;
  text-align: left;
  white-space: nowrap;
}

.pretty-data-table th {
  font-weight: 600;
  background: #f5f5f5;
}

/* Row hover - desktop/mouse devices only */
@media (hover: hover) and (pointer: fine) {
  .pretty-data-table tbody tr:hover {
    background: #f4f7f9;
  }
}

/* Column highlight added by JavaScript */
.pretty-data-table .column-highlight {
  background: #f3f6f8;
}

/* Stronger highlight where hovered row + column intersect */
@media (hover: hover) and (pointer: fine) {
  .pretty-data-table tbody tr:hover td.column-highlight {
    background: #e3e9ed;
  }
}

/* Keep the first column visible when scrolling horizontally */
.pretty-data-table th:first-child,
.pretty-data-table td:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}

.pretty-data-table th:first-child {
  background: #f5f5f5;
  z-index: 2;
}

/* Maintain row hover styling on the sticky first column */
@media (hover: hover) and (pointer: fine) {
  .pretty-data-table tbody tr:hover td:first-child {
    background: #f4f7f9;
  }

  .pretty-data-table tbody tr:hover td:first-child.column-highlight {
    background: #e3e9ed;
  }
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .pretty-data-table {
    font-size: 0.875rem;
  }

  .pretty-data-table th,
  .pretty-data-table td {
    padding: 0.625rem 0.75rem;
  }
}