/* Styles for the main body of the webpage --------------------------------------------- */
body {
  font-family: Arial, sans-serif;         /* Use a clean, simple font */
  background-color: #f0f0f0;              /* Light gray background */
  padding: 0px;                           /* No space around the body */
}

/* Alternating row colors for table rows — odd rows get light green --------------------*/
table tbody tr:nth-child(odd) {
  background-color: #F2F9DD;              /* Light green shade */
  border-collapse: collapse;              /* Merge table borders */
}

/* Even rows get white background ------------------------------------------------ */
table tbody tr:nth-child(even) {
  background-color: #ffffff;
  border-collapse: collapse;
}


/* General table style -------------------------------------------------------------- */
    table-layout: fixed;
    width: 800px;
	border: 1px solid black;
	border-collapse: collapse;              /* Borders are merged */
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Adds borders to table, header, and cells ------------------------------------------- */
table, th, td {
  border: 1px solid #ccc;                 /* Light gray borders */
  border-collapse: collapse;
}

/* Padding inside table cells and alignment -------------------------------------------- */
th, td {
	padding: 8px;
	text-align: left;
}

/* Container box around the table — gives spacing, shadow, and rounded edges -------------------- */
.container {
  background: #fff;                          /* White background */
  padding: 20px;                             /* Space inside the box */
  border-radius: 8px;                        /* Rounded corners */
  max-width: 800px;                          /* Maximum width */
  margin: 0 auto;                            /* Centered horizontally */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);   /* Soft drop shadow */
}
}

/* Makes names stand out slightly more ------------------------------------------------------------ */
.name-highlight {
  font-weight: bold;
  font-size: 1.05em;
  color: #222;                            /* Dark gray text */
}

/* ⚠️ Duplicate: this line is floating alone and may not do anything
table-layout: fixed;  ------------------------------------------------*/

/* Styling for the main results table --------------------------------------------------------- */
#resultsTable {
  table-layout: fixed;                    /* All columns have fixed width */
  width: 800px;
  border-collapse: collapse;
  font-size: 14px;
}

/* Pagination section below the table ----------------------------------------------------------  */
.pagination-container {
  margin-top: 80px;
  text-align: center;                    /* This centers inline children */
}

/* Styles for page number buttons and links */
.pagination-container a,
.pagination-container button {
  display: inline-block;                  /* Allows centering */
  margin: 0 4px;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  background-color: #f2f2f2;              /* Light gray background */
  color: #333;
  cursor: pointer;
  border-radius: 4px;
  text-decoration: none;
}

/* Highlights the active page number ---------------------------------------------------- */
.pagination-container a.active,
.pagination-container button.active {
  font-weight: bold;
  background-color: #d0d0ff;              /* Light blue highlight */
}

/* These set fixed widths for each column in the results table ---------------------------- */
#resultsTable th:nth-child(1),
#resultsTable td:nth-child(1) {
  width: 15%;
  border-collapse: collapse;
}
#resultsTable th:nth-child(2),
#resultsTable td:nth-child(2) {
  width: 15%;
  border-collapse: collapse;
}
#resultsTable th:nth-child(3),
#resultsTable td:nth-child(3) {
  width: 15%;
  text-align: left;
  border-collapse: collapse;
}
#resultsTable th:nth-child(4),
#resultsTable td:nth-child(4) {
  width: 35%;
  border-collapse: collapse;
}
#resultsTable th:nth-child(5),
#resultsTable td:nth-child(5) {
  width: 20%;
  border-collapse: collapse;
}

/* Alternating row colors for table rows — odd rows get light green --------------------------------*/
/* These two rules apply a different background to odd/even rows for readability -------------------*/
#resultsTable tbody tr:nth-child(odd) {
  background-color: #ffffff;                   /* White for odd rows */
}
#resultsTable tbody tr:nth-child(even) {
  background-color: #F8FED6;                   /* Pale yellow for even rows */
}

#pagination button {
  margin: 0 4px;
  padding: 6px 10px;
  border: none;
  background-color: #eee;
  color: #CC0033;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1rem;
}

#pagination button:hover {
  background-color: #ccc;
}

#pagination button.active {
  background-color: #CC0033;
  color: white;
  font-weight: bold;
  cursor: default;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f2f2f2;
  text-align: center;
  z-index: 9999;
}

.bottom-nav ul {
  display: inline-block;
  padding: 0;
  margin: 0;
  list-style: none;
}

.bottom-nav ul li {
  display: inline;
  margin: 0 15px;
}

.bottom-nav ul li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

#pagination {
  text-align: center;
  margin: 20px auto;
  display: block;
  width: 100%;
}

#pagination button {
  display: inline-block;
  margin: 0 5px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  cursor: pointer;
  font-weight: bold;
}

#pagination button.active {
  background-color: #333;
  color: white;
}

#pagination {
  text-align: center;
  margin: 20px auto;
  display: block;
  width: 100%;
}

#pagination button {
  display: inline-block;
  margin: 0 5px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  cursor: pointer;
  font-weight: bold;
}

#pagination button.active {
  background-color: #333;
  color: white;
}