<style>
.sortable {
  cursor: pointer;
  user-select: none;
}
.sortable:hover {
  color: #0d6efd;
  background-color: #f8f9fa;
}
.sort-icon {
  font-size: 0.8rem;
  margin-left: 4px;
}
.sortable{cursor:pointer;}
.sortable:hover{color:#0d6efd;}

.table td { vertical-align: middle; }


/* Quick compact table */
.table-responsive.table-wrap { overflow-x:auto; }

/* reduce padding and font size for many columns */
#courseTable.table-sm thead th,
#courseTable.table-sm tbody td {
  padding: .35rem .45rem;
  font-size: .78rem;
  vertical-align: middle;
}

/* keep numeric columns from wrapping */
#courseTable td,
#courseTable th {
  white-space: nowrap;
}

/* allow long course name to truncate (remove if you want full text) */
#courseTable td.text-start {
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




/* Fixed table layout for predictable columns */
#courseTable {
  table-layout: fixed;
  width: 100%;
}

/* define column widths (adjust percentages as needed) */
#courseTable thead th:nth-child(1), /* ID */ 
#courseTable tbody td:nth-child(1) { width: 4%; }
#courseTable thead th:nth-child(2), /* Program */ 
#courseTable tbody td:nth-child(2) { width: 6%; }
#courseTable thead th:nth-child(3), /* Exam */ 
#courseTable tbody td:nth-child(3) { width: 8%; }
#courseTable thead th:nth-child(4), /* Semester */ 
#courseTable tbody td:nth-child(4) { width: 5%; }
#courseTable thead th:nth-child(5), /* Course Code */ 
#courseTable tbody td:nth-child(5) { width: 6%; }
#courseTable thead th:nth-child(6), /* Course Name */ 
#courseTable tbody td:nth-child(6) { width: 20%; }
#courseTable thead th:nth-child(7), /* Course Mode */ 
#courseTable tbody td:nth-child(7) { width: 6%; }
/* Remaining columns share the rest */
#courseTable thead th, #courseTable tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: .4rem .5rem;
  font-size: .85rem;
}

/* On small screens hide some columns to make table readable */
@media (max-width: 992px) {
  /* hide internal/exam/extra detail columns */
  #courseTable th:nth-child(11), /* credit */
  #courseTable th:nth-child(12), #courseTable th:nth-child(13), /* int marks */
  #courseTable th:nth-child(14), #courseTable th:nth-child(15), /* assignment/cia */
  #courseTable th:nth-child(16), #courseTable th:nth-child(17), /* ese/max */
  #courseTable th:nth-child(18), #courseTable th:nth-child(19), /* min/type */
  #courseTable th:nth-child(20), #courseTable th:nth-child(21), #courseTable th:nth-child(22) ,
  #courseTable th:nth-child(23) ,
  #courseTable td:nth-child(11), #courseTable td:nth-child(12), #courseTable td:nth-child(13),
  #courseTable td:nth-child(14), #courseTable td:nth-child(15),
  #courseTable td:nth-child(16), #courseTable td:nth-child(17),
  #courseTable td:nth-child(18), #courseTable td:nth-child(19),
  #courseTable td:nth-child(20), #courseTable td:nth-child(21), #courseTable td:nth-child(22),
  #courseTable td:nth-child(23) {
    display: none;
  }

  /* allow course name to wrap a bit */
  #courseTable td.text-start { white-space: normal; }
}

</style>