/* DataTables base styles */
.dataTables_wrapper {
  @apply text-gray-700 dark:text-gray-300;
}

/* Table header styles */
table.dataTable thead th,
table.dataTable.display thead th,
table.dataTable.row-border thead th {
  background-color: rgb(249 250 251) !important;
  color: rgb(107 114 128) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
  padding: 0.75rem !important;
  border-bottom: 1px solid rgb(229 231 235) !important;
}

.dark table.dataTable thead th,
.dark table.dataTable.display thead th,
.dark table.dataTable.row-border thead th {
  background-color: rgb(31 41 55) !important;
  color: rgb(156 163 175) !important;
  border-color: rgb(75 85 99) !important;
}

/* Table body styles */
table.dataTable tbody tr:nth-child(odd),
table.dataTable.display tbody tr:nth-child(odd),
table.dataTable.row-border tbody tr:nth-child(odd) {
  background-color: white !important;
}

table.dataTable tbody tr:nth-child(even),
table.dataTable.display tbody tr:nth-child(even),
table.dataTable.row-border tbody tr:nth-child(even) {
  background-color: rgb(249 250 251) !important;
}

.dark table.dataTable tbody tr:nth-child(odd),
.dark table.dataTable.display tbody tr:nth-child(odd),
.dark table.dataTable.row-border tbody tr:nth-child(odd) {
  background-color: rgb(17 24 39) !important;
}

.dark table.dataTable tbody tr:nth-child(even),
.dark table.dataTable.display tbody tr:nth-child(even),
.dark table.dataTable.row-border tbody tr:nth-child(even) {
  background-color: rgb(31 41 55) !important;
}

table.dataTable tbody tr:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.row-border tbody tr:hover {
  background-color: rgb(243 244 246) !important;
}

.dark table.dataTable tbody tr:hover,
.dark table.dataTable.display tbody tr:hover,
.dark table.dataTable.row-border tbody tr:hover {
  background-color: rgb(55 65 81) !important;
}

table.dataTable tbody td,
table.dataTable.display tbody td,
table.dataTable.row-border tbody td {
  padding: 0.75rem !important;
  border-bottom: 1px solid rgb(229 231 235) !important;
}

.dark table.dataTable tbody td,
.dark table.dataTable.display tbody td,
.dark table.dataTable.row-border tbody td {
  border-color: rgb(75 85 99) !important;
  color: rgb(209 213 219) !important;
}

/* Control styles */
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
  @apply text-gray-700 dark:text-gray-300 my-2;
}

.dataTables_length select,
.dataTables_filter input {
  @apply bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded px-2 py-1;
}

/* Pagination styles */
.dataTables_paginate .paginate_button {
  @apply px-3 py-1 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700;
}

.dataTables_paginate .paginate_button.current {
  @apply bg-blue-500 text-white border-blue-500 dark:bg-blue-600 dark:border-blue-600;
}

.dataTables_paginate .paginate_button.disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Override pagination button styles */
.dataTables_wrapper .pagination a {
  background-color: white !important; /* White background */
  color: #1d4ed8 !important; /* Blue text */
  border-color: #e5e7eb !important; /* Light gray border */
}

.dataTables_wrapper .pagination a:hover {
  background-color: #e0f2fe !important; /* Light blue hover */
  color: #1d4ed8 !important; /* Blue text */
}

.dataTables_wrapper .pagination a[aria-current="page"] {
  background-color: #93c5fd !important; /* Light blue for active page */
  color: white !important; /* White text */
}

.dataTables_wrapper .pagination a:disabled {
  background-color: #f3f4f6 !important; /* Light gray for disabled */
  color: #d1d5db !important; /* Gray text for disabled */
}

/* Style the select dropdown */
.dataTables_wrapper select {
  background-color: white !important; /* White background */
  color: #1d4ed8 !important; /* Blue text */
  border: 1px solid #e5e7eb !important; /* Light gray border */
  border-radius: 4px !important; /* Rounded corners */
  padding: 6px 12px !important; /* Padding */
}

.dataTables_wrapper select:hover {
  border-color: #1d4ed8 !important; /* Blue border on hover */
  box-shadow: 0 0 5px rgba(29, 78, 216, 0.5) !important; /* Blue shadow */
}

td.text-center,
th.text-center {
  text-align: center !important;
}

/* Force smaller search input */
.dataTables_wrapper .dataTables_filter input {
  width: 100px !important; /* Smaller width */
  padding: 0.125rem 0.25rem !important; /* Smaller padding */
  font-size: 0.75rem !important; /* Tailwind text-xs */
  line-height: 1rem !important;
  height: 1.5rem !important;
  border-radius: 0.25rem !important; /* Rounded corners */
}

/* Make the search field smaller */
.dt-search input[type="search"] {
  width: 120px !important; /* Smaller width */
  height: 1.5rem !important; /* Smaller height */
  padding: 0.25rem 0.5rem !important; /* Smaller padding */
  font-size: 0.75rem !important; /* Tailwind text-xs equivalent */
  line-height: 1rem !important; /* Consistent line-height */
  border-radius: 0.25rem !important; /* Rounded corners */
  border: 1px solid #e5e7eb !important; /* Light gray border */
}

/* Make pagination buttons smaller */
.dt-paging a {
  @apply relative inline-flex justify-center items-center space-x-2 border px-2 py-1 text-xs !important;
}

.dt-paging a[aria-current="page"] {
  @apply font-semibold bg-blue-100 text-blue-800 hover:text-blue-900 !important;
}

.dt-paging a[aria-disabled="true"] {
  @apply text-gray-300 cursor-not-allowed !important;
}

.dt-paging a.first {
  @apply rounded-l-lg !important;
}

.dt-paging a.last {
  @apply rounded-r-lg !important;
}

.dt-paging a:hover:not([aria-disabled="true"]) {
  background-color: #e0f2fe !important; /* Light blue background */
  color: #1d4ed8 !important; /* Blue text */
}

.dark .dt-paging a {
  @apply bg-gray-800 border-gray-600 text-gray-300 !important;
}

.dark .dt-paging a:hover:not([aria-disabled="true"]) {
  @apply bg-gray-700 border-gray-600 text-white hover:shadow-sm !important;
}

.dark .dt-paging a[aria-current="page"] {
  @apply bg-blue-900 border-blue-600 text-white !important;
}

.dark .dt-paging a[aria-disabled="true"] {
  @apply bg-gray-800 border-gray-600 text-gray-500 cursor-not-allowed !important;
}

/* Dark mode pagination */
.dark .dt-paging nav[aria-label="pagination"] a {
  background-color: rgb(31 41 55) !important; /* bg-gray-800 */
  border-color: rgb(75 85 99) !important; /* border-gray-600 */
  color: rgb(209 213 219) !important; /* text-gray-300 */
}

.dark .dt-paging nav[aria-label="pagination"] a[aria-current="page"] {
  background-color: rgb(30 58 138) !important; /* bg-blue-900 */
  border-color: rgb(37 99 235) !important; /* border-blue-600 */
  color: white !important;
}

.dark .dt-paging nav[aria-label="pagination"] a:hover:not([aria-disabled="true"]) {
  background-color: rgb(55 65 81) !important; /* bg-gray-700 */
  color: white !important;
}

.dark .dt-paging nav[aria-label="pagination"] a[aria-disabled="true"] {
  background-color: rgb(31 41 55) !important; /* bg-gray-800 */
  border-color: rgb(75 85 99) !important; /* border-gray-600 */
  color: rgb(107 114 128) !important; /* text-gray-500 */
  cursor: not-allowed !important;
}

/* Dark mode wrapper styles */
.dark .dataTables_wrapper {
  color: rgb(209 213 219) !important;
}

.dataTables_wrapper thead tr {
  background-color: rgb(249 250 251) !important;
}

.dark .dataTables_wrapper thead tr {
  background-color: rgb(31 41 55) !important;
}

.dataTables_wrapper thead th {
  border: 1px solid rgb(209 213 219) !important;
  padding: 0.25rem 0.5rem !important;
}

.dark .dataTables_wrapper thead th {
  border-color: rgb(75 85 99) !important;
  color: rgb(209 213 219) !important;
}

.dark .dataTables_wrapper .dataTables_length,
.dark .dataTables_wrapper .dataTables_filter,
.dark .dataTables_wrapper .dataTables_info,
.dark .dataTables_wrapper .dataTables_processing {
  color: rgb(209 213 219) !important;
}

.dark .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_length select {
  background-color: rgb(31 41 55) !important;
  border-color: rgb(75 85 99) !important;
  color: rgb(209 213 219) !important;
}

/* Dark mode overrides */
.dark .dataTables_wrapper tbody tr,
.dark .dataTables_wrapper tbody tr.even,
.dark .dataTables_wrapper tbody tr.odd {
  background-color: rgb(17 24 39) !important;
}

.dark .dataTables_wrapper tbody tr:hover,
.dark .dataTables_wrapper tbody tr.even:hover,
.dark .dataTables_wrapper tbody tr.odd:hover {
  background-color: rgb(55 65 81) !important;
}

.dt-paging a {
  @apply px-2 py-1 text-xs -mr-px !important;
}

/* Pagination hover and active states */
.dt-paging .pagination a:hover {
  background-color: #e0f2fe !important; /* Light blue background */
  color: #1d4ed8 !important; /* Blue text */
}

.dt-paging .pagination a[aria-current="page"] {
  background-color: #93c5fd !important; /* Active page light blue */
  color: white !important; /* White text */
}

.dt-paging .pagination a:disabled {
  background-color: #f3f4f6 !important; /* Light gray for disabled */
  color: #d1d5db !important; /* Gray text for disabled */
}

.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0.25rem 0.5rem; /* Smaller padding */
  font-size: 0.75rem; /* Text size like "order" buttons */
  border: 1px solid #ccc;
  border-radius: 0.25rem; /* Rounded corners */
  color: #4b5563; /* Tailwind's gray-700 */
  background-color: #f3f4f6; /* Tailwind's gray-200 */
  transition: background-color 0.2s ease;
}

.dataTables_wrapper .dt-buttons .dt-button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: #e5e7eb; /* Tailwind's gray-300 */
  color: #111827; /* Tailwind's gray-900 */
}

.table-btn {
  display: inline-block; /* Ensures the button doesn't stretch */
  padding: 0.125rem 0.5rem; /* Matches py-0.5 px-2 */
  font-size: 0.75rem; /* Matches text-xs */
  font-weight: 500; /* Matches font-medium */

  border-radius: 0.25rem; /* Matches rounded */
  transition: all 0.3s ease; /* Matches transition */
  text-align: center; /* Ensures text is centered */
  white-space: nowrap; /* Prevents wrapping */
  line-height: 1; /* Ensures consistent height */
}

.table-btn:hover {
  color: #fff; /* Matches hover:text-white */
}

/* Dark mode styles for DataTables */
.dark .dataTables_wrapper {
  @apply text-gray-300;
}

.dark .dataTables_wrapper .dataTables_length,
.dark .dataTables_wrapper .dataTables_filter,
.dark .dataTables_wrapper .dataTables_info,
.dark .dataTables_wrapper .dataTables_processing,
.dark .dataTables_wrapper .dataTables_paginate {
  @apply text-gray-300;
}

/* Dark mode table styles */
.dark .dataTables_wrapper table.dataTable tbody tr {
  @apply bg-gray-800 text-gray-300;
}

.dark .dataTables_wrapper table.dataTable tbody tr:hover {
  @apply bg-gray-700;
}

.dark .dataTables_wrapper table.dataTable.stripe tbody tr.odd {
  @apply bg-gray-900;
}

.dark .dataTables_wrapper table.dataTable.hover tbody tr:hover,
.dark .dataTables_wrapper table.dataTable.hover tbody tr.odd:hover,
.dark .dataTables_wrapper table.dataTable.hover tbody tr.even:hover {
  @apply bg-gray-700;
}

/* Dark mode search input */
.dark .dataTables_wrapper .dataTables_filter input {
  @apply bg-gray-800 border-gray-700 text-gray-300;
}

/* Dark mode select */
.dark .dataTables_wrapper .dataTables_length select {
  @apply bg-gray-800 border-gray-700 text-gray-300;
}

/* Dark mode pagination */
.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  @apply border-gray-600 bg-gray-800 text-gray-300 hover:bg-gray-700 !important;
}

.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  @apply bg-blue-900 border-blue-500 text-white hover:bg-blue-800 !important;
}

.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  @apply text-gray-500 hover:bg-gray-800 cursor-not-allowed !important;
}

.dataTables_wrapper {
  @apply relative;
}

/* Table styles */
.dataTables_wrapper table.dataTable {
  @apply w-full;
}

/* Search and length inputs */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  @apply rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm;
}

.dark .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_length select {
  @apply bg-gray-800 border-gray-700 text-gray-300;
}

/* Pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  @apply relative inline-flex items-center px-4 py-2 text-sm font-medium border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  @apply z-10 bg-blue-50 border-blue-500 text-blue-600 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  @apply text-gray-300 hover:bg-white cursor-not-allowed !important;
}

/* Table header and cells */
.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead td {
  @apply border-b border-gray-200 bg-gray-50;
}

.dark .dataTables_wrapper table.dataTable thead th,
.dark .dataTables_wrapper table.dataTable thead td {
  @apply border-gray-700 bg-gray-800 text-gray-300;
}

.dataTables_wrapper table.dataTable tbody tr {
  @apply bg-white;
}

.dark .dataTables_wrapper table.dataTable tbody tr {
  @apply bg-gray-800 text-gray-300;
}

.dataTables_wrapper table.dataTable tbody tr:hover {
  @apply bg-gray-50;
}

.dark .dataTables_wrapper table.dataTable tbody tr:hover {
  @apply bg-gray-700;
}

/* Info text */
.dataTables_wrapper .dataTables_info {
  @apply text-sm text-gray-700;
}

.dark .dataTables_wrapper .dataTables_info {
  @apply text-gray-300;
}

/* Length menu */
.dataTables_wrapper .dataTables_length {
  @apply text-sm text-gray-700;
}

.dark .dataTables_wrapper .dataTables_length {
  @apply text-gray-300;
}

/* Search box */
.dataTables_wrapper .dataTables_filter {
  @apply text-sm text-gray-700;
}

.dark .dataTables_wrapper .dataTables_filter {
  @apply text-gray-300;
}

/* Processing display */
.dataTables_wrapper .dataTables_processing {
  @apply bg-white bg-opacity-80 text-gray-700;
}

.dark .dataTables_wrapper .dataTables_processing {
  @apply bg-gray-800 bg-opacity-80 text-gray-300;
}