/* Codes Directory Table Styles */

/* Sortable tables */
table.sortable thead {
  background-color: #eee;
  color: #666666;
  font-weight: bold;
  cursor: default;
}

th.hni {
  width: 135px;
}

th.ibn {
  width: 135px;
}

/* HNI table specific styling (2 columns) */
table.sortable th.hni + th.entity {
  width: calc(100% - 135px);
}

/* Search input styling */
#myInput,
[id*="SearchInput"] {
  background-image: url('/wp-content/themes/IMSIAdmin/assets/images/icons/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
  border-radius: 6px;
  box-sizing: border-box;
}

/* Table styling enhancements */
.sortable {
  border-collapse: collapse;
  width: 100%;
  margin-top: 1em;
}

.sortable th {
  padding: 12px;
  text-align: left;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.sortable th:hover {
  background: #e9ecef;
}

.sortable td {
  padding: 12px;
  border: 1px solid #dee2e6;
  border-bottom: 1px solid #eee;
}

.sortable tr:hover {
  background-color: #f8f9fa;
}

/* Sort indicators */
.sort-indicator {
  margin-left: 8px;
  font-size: 14px;
  color: #0073aa;
  font-weight: bold;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.sort-indicator:hover {
  opacity: 1;
}

/* Responsive design */
@media (max-width: 768px) {
  .sortable {
    font-size: 14px;
  }
  
  .sortable th,
  .sortable td {
    padding: 8px;
  }
  
  th.hni,
  th.ibn {
    width: auto;
  }
}