frontend/src/css/components/table.css

/* Table Responsive Styles */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.table th,
.table td {
  padding: var(--spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--color-secondary-200);
}

.table th {
  background: var(--color-accent-50);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-700);
}

.table tr:hover {
  background: var(--color-accent-50);
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  .table-container {
    margin: 0 -var(--spacing-4);
    padding: 0 var(--spacing-4);
  }
  
  .table th,
  .table td {
    padding: var(--spacing-3) var(--spacing-2);
    font-size: var(--font-size-sm);
  }
}