/* Add vertical dividers to table cells */
#detections-by-day-and-hour-table td {
  border-right: 1px solid #dee2e6; /* Change this color if needed to match your horizontal dividers */
}

/* Remove the right border from the last cell in each row */
#detections-by-day-and-hour-table tr td:last-child {
  border-right: none;
}

/* Center the content of table cells */
#detections-by-day-and-hour-table td {
  text-align: center;
  vertical-align: middle;
}

#detections-by-day-and-hour-table th {
  text-align: center;
  vertical-align: middle;
}

#recent-detections-table tbody tr:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

#detections-by-hour-table tbody tr:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

#detections-by-common-name-table tbody tr:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

.table-fixed-header thead {
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

/* Fix the position of the Common Name column header */
.table-responsive .table-fixed-header thead th.common-name-col {
  position: sticky;
  left: 0;
  background-color: white;
  z-index: 1;
}

/* Fix the position of the Common Name column cells */
.table-responsive .table-fixed-header tbody td:first-child {
  position: sticky;
  left: 0;
  background-color: white;
  z-index: 1;
}

/* Optional: Add a right border to the Common Name column */
.table-responsive .table-fixed-header th.common-name-col,
.table-responsive .table-fixed-header td:first-child {
  border-right: 1px solid #dee2e6; /* Adjust the color based on your table border color */
}

/* Set a fixed width for the Common Name column */
#detections-by-day-and-hour-table th.common-name-col,
#detections-by-day-and-hour-table td:first-child {
  width: 150px; /* Adjust this value based on your desired column width */
  max-width: 150px; /* Adjust this value based on your desired column width */
  overflow-wrap: break-word;
  white-space: normal;
  word-wrap: break-word;
}

/* Optional: Add padding to the Common Name column on mobile devices */
@media (max-width: 575.98px) {
  #detections-by-day-and-hour-table th.common-name-col,
  #detections-by-day-and-hour-table td:first-child {
    padding-left: 5px;
    padding-right: 5px;
  }
}

@media (max-width: 991.98px) {
  .table-responsive {
    overflow-x: scroll;
  }
}

.sticky-header th {
  background-color: #f1f1f1;
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Fix for header row not sticking inside .table-responsive container */
.table-responsive {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Add light-colored column dividers between the days of the week columns */
#report-table td:not(:first-child):not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.1); /* Change 0.1 to adjust the opacity */
}

/* Remove the right border from the last day of the week column */
#report-table td:last-child {
    border-right: none;
}

/* Style the clickable cells */
#report-table td a {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 4px; /* Add some padding for better clickability */
}

/* Change the color of the link when hovered */
#report-table td a:hover {
    color: #007bff; /* Change this to your desired hover color */
    cursor: pointer;
    text-decoration: underline;
}