/* Replaces old #text (was applied to multiple elements — duplicate ID) */
.table-head-blue,
#text {
  background-color: #002e57;
  color: white;
}

/* ---------- Archives tables: consistent size + mobile-ready ---------- */

/* Cell layout — long text wraps, images stay inline, everything is vertically centered */
.card-body table td,
.card-body table th,
.accordion-body table td,
.accordion-body table th {
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Every table-responsive wrapper on this page scrolls with momentum on iOS */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* Ensure wide multi-column tables inside accordions don't crush on phones —
   the parent .table-responsive keeps them horizontally scrollable at min-width */
.accordion-body .table-responsive > table,
.card-body .table-responsive > table {
  min-width: 480px;
}

/* PDF icons and other inline table images stay a consistent size */
.card-body table img.img-thumbnail,
.accordion-body table img.img-thumbnail {
  max-height: 32px;
  width: auto;
  padding: 2px;
}

/* Buttons/links inside table cells: compact, no extra vertical padding */
.card-body table .btn-link,
.accordion-body table .btn-link {
  padding: 0;
  vertical-align: baseline;
  color: #002e57;
  font-weight: 600;
  text-decoration: none;
}
.card-body table .btn-link:hover,
.accordion-body table .btn-link:hover { text-decoration: underline; }


/* ---------- DataTable at the bottom of the page (#example) ---------- */

/* Hide raw table until DataTables initializes (prevents flash of unstyled content) */
#example {
  visibility: hidden;
  table-layout: fixed;
  width: 100% !important;
}

#example thead th:nth-child(1),
#example tbody td:nth-child(1) { width: 12%; }
#example thead th:nth-child(2),
#example tbody td:nth-child(2) { width: 20%; }
#example thead th:nth-child(3),
#example tbody td:nth-child(3) { width: 58%; }
#example thead th:nth-child(4),
#example tbody td:nth-child(4) { width: 10%; text-align: center; }

/* Reserve space so pagination controls don't jump when a page has fewer rows */
div.dt-container,
.dataTables_wrapper {
  min-height: 720px;
}


/* ---------- Small screens: compact typography for readability ---------- */

@media (max-width: 767.98px) {
  /* Center product images on mobile (not the small in-cell PDF/file icons) */
  .card-body img.img-fluid,
  .accordion-body img.img-fluid,
  .card-body img:not(.img-thumbnail):not(.d-inline):not(.d-inline-block),
  .accordion-body img:not(.img-thumbnail):not(.d-inline):not(.d-inline-block) {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 640px) {
  .card-body table,
  .accordion-body table {
    font-size: 0.82rem;
  }
  .card-body table td,
  .card-body table th,
  .accordion-body table td,
  .accordion-body table th {
    padding: 0.35rem 0.4rem;
  }
  .card-body table img.img-thumbnail,
  .accordion-body table img.img-thumbnail {
    max-height: 26px;
  }
  /* On phones the DataTable column widths compress differently */
  #example thead th:nth-child(1),
  #example tbody td:nth-child(1) { width: 14%; }
  #example thead th:nth-child(2),
  #example tbody td:nth-child(2) { width: 22%; }
  #example thead th:nth-child(3),
  #example tbody td:nth-child(3) { width: 52%; }
  #example thead th:nth-child(4),
  #example tbody td:nth-child(4) { width: 12%; }
}