.table-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  white-space: nowrap;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  /* border: 1px solid #efefef; */
  border-radius: 8px;
  table-layout: auto;
}

th,
td {
  padding: 12px 16px;
  border-bottom: 1px solid #efefef;
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  color: #333;
}

/* Header styling */
thead th {
  /* background-color: #f5f5f5; */
  font-weight: 600;
  color: #444;
  border-bottom: 2px solid #ccc;
}

/* Rounded top corners */
thead th:first-child {
  border-top-left-radius: 8px;
}

thead th:last-child {
  border-top-right-radius: 8px;
}

/* Hover row effect */
tbody tr:hover {
  background-color: #f9f9f9;
  transition: background-color 0.3s ease;
}

tbody tr:first-child {
  border-top-left-radius: 8px;
}

/* Zebra striping for better readability */
tbody tr:nth-child(even) {
  /* background-color: #fcfcfc; */
}

.agents-table th {
  text-align: center;
  /* <-- Center header text */
  vertical-align: middle;
  /* Optional: vertically center if headers are taller */
}

.agents-table td {
  text-align: center;
  /* <-- Center body cells too if you want */
}

.agents-table th:first-child,
.agents-table td:first-child {
  border-right: 1px solid #888;
  width: 300px;
  /* <-- Set specific width for first column (Agent Name) */
}