.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) */
}

/* ----------------------------
   Resizable table styles
---------------------------- */

.resizable-table {
  table-layout: fixed; /* enforce column widths for resizable behavior */
  width: 100%;
}

.resizable-table th,
.resizable-table td {
  overflow: hidden;        /* hide overflowing text */
  text-overflow: ellipsis; /* show "..." for overflow */
  white-space: nowrap;     /* prevent text wrap */
  max-width: 100%;         /* ensure width is respected */
  position: relative;
  box-sizing: border-box; 
}

/* Drag handle styling */
.resizable-table th .drag-handle {
  width: 2px;
  height: 50%;
  position: absolute;
  top: 25%;
  right: 0;
  cursor: col-resize;
  background-color: #e2e2e2;
  transition: background-color 0.2s ease;
  z-index: 1;
}

/* Show handle on hover */
.resizable-table th:hover .drag-handle {
  width: 3px;
  background-color: rgba(15, 15, 15, 0.3);
}

/* Ensure headers indicate draggable */
.resizable-table th {
  position: relative;
  user-select: none;
}