/* --- DT search/filter: keep it inside the card --- */
.dataTables_wrapper {
  width: 100%;
  overflow-x: auto;           /* safety net if table is wide */
}

/* the whole "Search: [input]" container */
.dataTables_wrapper .dataTables_filter {
  float: none !important;     /* override DT default float */
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;            /* critical: prevents spill on narrow widths */
  margin: 0 0 12px 0;
}

/* the label wraps both "Search:" and the input */
.dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  white-space: nowrap;        /* keeps "Search:" together */
}

/* the input itself */
.dataTables_wrapper .dataTables_filter input {
  width: 320px;               /* adjust to taste */
  max-width: 100%;
  box-sizing: border-box;
}

/* small screens: let it go full width */
@media (max-width: 768px) {
  .dataTables_wrapper .dataTables_filter label {
    width: 100%;
    justify-content: flex-end;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
  }
}

/* DataTable Styling */
table.dataTable thead th {
  background-color: #003849 !important; /* Deep Navy Header */
  color: #D9D9D9 !important; /* White Text */
}

table.dataTable tbody tr.selected>* {
  box-shadow: inset 0 0 0 9999px rgba(211, 244, 158, 0.9) !important; /* Lime Green */
  color: black !important;
}

/* hover color for selected rows */
table.dataTable tbody tr.selected:hover {
  background-color: inset 0 0 0 9999px rgba(211, 244, 158, 0.9) !important; /* Same as selected */
  color: black !important;
}

table.dataTable tr:nth-child(odd) {
  background-color: #FFFFFF !important; /* Light Green Tint for Odd Rows */
}

table.dataTable tr:nth-child(even) {
  background-color: #F2F2F2 !important; /* Lightened Blue for Even Rows */
}

table.dataTable tbody td {
  color: #333333 !important; /* Dark Gray Text */
}

table.dataTable {
  border: 1px solid #B0BEC5 !important; /* Neutral Gray Border */
}

/* ✅ Remove the default blue glow and set a grey highlight */
table.dataTable.display > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px #d3d3d3 !important; /* solid grey fill */
  color: #000 !important;
}

/* Optional: Even/Odd row variants (if using striped tables) */
table.dataTable.display > tbody > tr.odd.selected > * {
  box-shadow: inset 0 0 0 9999px #d3d3d3 !important;
}

table.dataTable.display > tbody > tr.even.selected > * {
  box-shadow: inset 0 0 0 9999px #d3d3d3 !important;
}

/* =======================
   Table Styling (DataTable)
======================= */
.cpc-dt-wrap table.dataTable thead th {
  background-color: var(--primary-color) !important;
}
table.dataTable tbody tr.selected > * {
  box-shadow: inset 0 0 0 9999px var(--accent-color) !important;
  color: var(--text-dark) !important;
}
table.dataTable tbody tr:hover {
  background-color: var(--accent-color) !important;
  color: var(--primary-color) !important;
}
table.dataTable tr:nth-child(odd) {
  background-color: #FFFFFF !important;
}
table.dataTable tr:nth-child(even) {
  background-color: #F2F2F2 !important;
}
table.dataTable tbody td {
  color: #333333 !important;
}
table.dataTable {
  border: 1px solid #B0BEC5 !important;
}

/* =======================
   DataTable Selected Row Styling
======================= */

/* Selected row fill */
table.dataTable tbody tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(211, 244, 158, 0.9) !important;
  background-color: rgba(211, 244, 158, 0.9) !important;
  color: black !important;
}

/* Hover effect on selected row */
table.dataTable tbody tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(211, 244, 158, 0.9) !important;
  background-color: rgba(211, 244, 158, 0.9) !important;
  color: black !important;
}

/* Hover effect on unselected row */
table.dataTable tbody tr:not(.selected):hover > * {
  background-color: #D3F49E !important;
  color: #002C5E !important;
}

/* Table Hover Effect */
table.dataTable tbody tr:hover {
  background-color: #D3F49E !important; /* Bright Green Hover */
  color: #002C5E !important; /* Deep Navy Text */
}