/* DataTables custom styling to match Material theme */

/* Table wrapper - ensure it can grow */
.dataTables_wrapper {
  width: 100%;
  overflow: visible;
}

/* Table outer border */
table.dataTable {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-collapse: collapse;
  width: 100% !important;
}

/* Search box styling */
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  min-width: 250px;
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--md-primary-fg-color);
}

/* Remove default DataTables styles that conflict */
.dataTables_wrapper .dataTables_filter label {
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  color: var(--md-default-fg-color);
}

/* Disable sorting styling on table headers */
table.dataTable thead th {
  border-bottom: 1px solid var(--md-default-fg-color--lightest) !important;
  cursor: pointer;
  background-image: none !important;
  padding-right: 0.6rem !important;
}

table.dataTable thead tr {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

table.dataTable thead th:first-child,
table.dataTable tbody td:first-child {
  padding-left: 0.8rem;
}

/* Hide sorting icons */
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::before,
table.dataTable thead th.sorting_desc::after {
  display: none !important;
}

table.dataTable tbody tr {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* Hover effect */
table.dataTable tbody tr:hover {
  background-color: var(--md-default-fg-color--lightest);
}

/* Table content font size */
table.dataTable {
  font-size: 0.75rem !important;
}

table.dataTable thead th {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

table.dataTable tbody td {
  font-size: 0.75rem !important;
}

/* Pagination font size */
.dataTables_wrapper .dataTables_paginate {
  font-size: 0.7rem !important;
}

/* Responsive table adjustments */
/* Medium tablet and below (767px matches industry standard) */
@media screen and (max-width: 767px) {
  /* Make table wrapper scrollable horizontally on mobile */
  .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure table maintains proper width in scroll container */
  /* Using 320px (iPhone 5 viewport) as absolute minimum */
  table.dataTable {
    min-width: 320px;
    width: 100% !important;
  }

  /* Reduce search box width on mobile */
  .dataTables_wrapper .dataTables_filter input {
    min-width: 150px;
    width: 100%;
    max-width: 200px;
  }

  /* Reduce padding in table cells */
  table.dataTable thead th,
  table.dataTable tbody td {
    padding: 0.5rem 0.4rem !important;
  }

  table.dataTable thead th:first-child,
  table.dataTable tbody td:first-child {
    padding-left: 0.6rem !important;
  }

  /* Adjust font sizes for mobile */
  table.dataTable,
  table.dataTable thead th,
  table.dataTable tbody td {
    font-size: 0.7rem !important;
  }

  /* Make info and pagination text smaller */
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    font-size: 0.65rem !important;
  }

  /* Stack pagination on mobile if needed */
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.25rem 0.5rem !important;
    margin-left: 0.1rem !important;
  }
}

/* Very small screens (phones - 479px matches industry standard) */
@media screen and (max-width: 479px) {
  /* Further reduce padding */
  table.dataTable thead th,
  table.dataTable tbody td {
    padding: 0.4rem 0.3rem !important;
  }

  table.dataTable thead th:first-child,
  table.dataTable tbody td:first-child {
    padding-left: 0.5rem !important;
  }

  /* Even smaller fonts */
  table.dataTable,
  table.dataTable thead th,
  table.dataTable tbody td {
    font-size: 0.65rem !important;
  }

  /* Compact search box */
  .dataTables_wrapper .dataTables_filter input {
    min-width: 120px;
    padding: 0.25rem 0.4rem;
  }

  .dataTables_wrapper .dataTables_filter label {
    font-size: 0.7rem !important;
  }
}