html,
body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
form,
fieldset,
caption,
table,
tr,
td,
th,
address,
blockquote,
img,
button {
  margin: 0;
  padding: 0;
}

details.detailsMenu summary::-webkit-details-marker,
details.detailsMenu summary::marker {
  display: none;
  content: '';
}
summary:focus {
  outline: 0;
}

img,
fieldset,
button {
  border: none;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

body,
button,
input,
table,
textarea,
select {
  font: normal 1em/1.5 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Ubuntu, 'Open Sans', sans-serif;
}

h2,
h3,
h4,
h5,
h6 {
  line-height: 1.25;
  color: var(--text-color-dark);
}

p,
label {
  color: var(--text-color-base);
}

hr {
  border: none;
  margin: 0;
  border-top: 1px solid var(--text-color-light);
}

body {
  --base-scale: calc(100vw / 75);
  --h2-font-size: max(1.2em, min(4em, calc(var(--base-scale) * 4)));
  --padding-size: max(1rem, min(2rem, calc(var(--base-scale) * 2)));
  --margin-size: max(0.5rem, min(2rem, calc(var(--base-scale) * 2)));
  --border-radius: clamp(0.5rem, 2vh, 0.8rem);
  --drop-shadow: 4px 4px 25px rgba(0, 0, 0, 0.2);
  --primary-color: #0e92c7;
  --secondary-color: #0dbaea;
  --text-color-light: #bdbdbd;
  --text-color-base: #444444;
  --text-color-dark: #242424;
  --background-color: #f7f7f7;
  --foreground-color: #ffffff;
  --alert-fail-color: #b94e4e;
  --alert-warn-color: #d68539;
  --alert-neutral-color: #39a4d6;
  --alert-success-color: #70b94e;
  --alert-info-color: #575757;
  --splash-image: linear-gradient(
    45deg,
    var(--primary-color),
    60%,
    var(--secondary-color)
  );
}

header,
symbol,
.splash,
aside,
nav,
button,
.screen,
.sr-only {
  display: none;
}

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

.tableHeading {
  text-transform: uppercase;
  font-size: 18pt;
}

thead th,
tbody td,
thead td {
  border: 1px solid;
}
th,
td {
  font-size: 9pt;
}
td {
  padding: 0 4px;
}
th[scope="row"] {
  text-align: left;
}
th {
  padding: 4px;
}

tfoot th,
tfoot td {
  border: none;
}

table { page-break-after:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
td    { page-break-inside:avoid; page-break-after:auto }
thead { display: table-header-group; }
tfoot { display: table-footer-group; }

img {
  height: 50px;
}

@page {
  size: A4 landscape;
}

.vertical span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
}

table {
  width: 100%;
  padding: 0;
  text-align: left;
  border-collapse: collapse;
  position: relative;
  /* border-collapse: separate;
  border-spacing: 0 1vw;
  margin-bottom: -1vw; */
}
table caption {
  padding: 1rem;
  caption-side: bottom;
}
/* table thead th::before {
  content: '';
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  height: 1vw;
  width: 100%;
  position: absolute;
  top: -1vw;
  left: 0;
} */
table thead th {
  /* position: sticky;
  z-index: 1;
  top: calc(4rem + 2vw); */
  border-bottom: 1px solid #989898;
  background-color: #efefef;
  transition: all 0.2s ease;
  font-weight: 600;
  white-space: nowrap;
}
/* table td:first-of-type, */
table th:first-of-type {
  border-top-left-radius: 0.625rem;
  /* border-bottom-left-radius: 0.625rem; */
}
table th:last-of-type {
  border-top-right-radius: 0.625rem;
  /* border-bottom-right-radius: 0.625rem; */
}
table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 0.625rem;
}
table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 0.625rem;
}

table tbody tr:nth-child(even) td {
  background-color: #f7f7f7;
}
table tbody tr:nth-child(odd) td {
  background-color: white;
}
table tbody tr.isClickable td {
  cursor: pointer;
}

table thead th,
table tbody td {
  text-align: center;
  padding: 1rem 0.5rem;
}
table tbody td img {
  display: inline-block;
  overflow: hidden;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  vertical-align: middle;
  margin-right: 0.5rem;
  object-fit: cover;
  object-position: center;
}
table thead th.alternate,
table tbody td.alternate {
  text-align: left;
}
table tbody details {
  position: initial;
}
table tbody details summary:hover {
  cursor: pointer;
}
table tbody details ul {
  text-align: left;
  list-style-type: none;
  position: absolute;
  padding: 1em;
  font-size: 0.8em;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 0.625em;
  box-shadow: var(--drop-shadow);
  z-index: 1;
}
table tbody details ul li:not(:last-of-type) {
  margin-bottom: 0.5em;
}
table tbody details ul li a,
table tbody details ul li button {
  display: block;
  color: var(--primary-color);
  padding: 0.25rem;
  margin: 0;
  background-color: transparent;
}

  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }

  .data-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #111827;
    font-weight: 700;
  }

  .data-table td {
    text-align: left;
    padding: 1rem;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
  }

  /* 1. Force exact colors (stops the browser from stripping light gray borders) */
* {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* 2. Prevent page breaks from cutting off your bottom borders */
tr, td, th {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* 3. The Wrapper Hack for border-radius */
table {
  border-collapse: collapse !important;
  width: 100%;
  border: none !important; /* Remove border from the table itself */
}

/* Apply the radius and outer border to the wrapper div */
.table__wrapper { /* Assuming you are using this class from your earlier code */
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important; 
  display: block !important;
}

/* 4. Guarantee row borders print clearly */
td, th {
  border-bottom: 1px solid #e5e7eb !important;
}

/* Remove the very bottom border of the last row so it doesn't double-up with the wrapper's border */
tr:last-child td {
  border-bottom: none !important;
}