/* Table Styles for better column handling */
table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #e2e8f0;
}

/* Column specific widths */
th:nth-child(1), td:nth-child(1) { width: 100px; } /* Profile ID */
th:nth-child(2), td:nth-child(2) { width: 120px; } /* Last Name */
th:nth-child(3), td:nth-child(3) { width: 120px; } /* First Name */
th:nth-child(4), td:nth-child(4) { width: 120px; } /* Middle Name */
th:nth-child(5), td:nth-child(5) { width: 150px; } /* Department */
th:nth-child(6), td:nth-child(6) { width: 100px; } /* Net Pay */
th:nth-child(7), td:nth-child(7) { width: 100px; } /* Status */
th:nth-child(8), td:nth-child(8) { width: 150px; } /* Nature of Adjustment */
th:nth-child(9), td:nth-child(9) { width: 150px; } /* Date Processed */
th:nth-child(10), td:nth-child(10) { width: 120px; } /* Billing Status */
th:nth-child(11), td:nth-child(11) { width: 120px; } /* Invoice Number */
th:nth-child(12), td:nth-child(12) { width: 100px; } /* Amount */
th:nth-child(13), td:nth-child(13) { width: 120px; } /* Billing Amount */
th:nth-child(14), td:nth-child(14) { width: 150px; } /* Date of Billing */
th:nth-child(15), td:nth-child(15) { width: 100px; } /* Action */

/* Add hover effect to show full content */
td:hover {
  overflow: visible;
  white-space: normal;
  word-break: break-word;
  background-color: #fff;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Make the table container scrollable horizontally */
.table-container {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 8px; /* Space for scrollbar */
}

/* Ensure minimum table width */
#payroll-table, #billed-table {
  min-width: 1800px; /* Sum of all column widths plus some padding */
}

/* Style the scrollbar */
.table-container::-webkit-scrollbar {
  height: 8px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}