.table-content {
  overflow-x: auto;
  width: 100%;
}

/* ============================= */
/* TABLE BASE */
/* ============================= */

table {
  width: 100%;
  border-collapse: separate; /* important */
  border-spacing: 0; /* important */
  font-size: var(--p-small--font-size);
  color: var(--colors--text-primary);
  line-height: var(--p-small--line-height);
  letter-spacing: var(--p-small--letter-spacing);
  text-align: left;
  table-layout: fixed; /* keep natural sizing so header/body align */
}

/* ============================= */
/* HEADER */
/* ============================= */

thead th {
  font-weight: 500 !important;
  padding: 12px;
  color: var(--colors--text-tertiary);
  white-space: normal; /* wrap */
  word-break: break-word;
  vertical-align: top;
}

/* ============================= */
/* BODY */
/* ============================= */

tbody td {
  padding: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* row separators (inside body) */
tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--colors--border-secondary);
}

/* ============================= */
/* BODY OUTER BORDER (rounded) */
/* ============================= */

/* left + right borders for all body rows */
tbody td:first-child {
  border-left: 1px solid var(--colors--border-secondary);
}
tbody td:last-child {
  border-right: 1px solid var(--colors--border-secondary);
}

/* top border on first body row */
tbody tr:first-child td {
  border-top: 1px solid var(--colors--border-secondary);
}

/* bottom border on last body row */
tbody tr:last-child td {
  border-bottom: 1px solid var(--colors--border-secondary);
}

/* rounded corners on the body only */
tbody tr:first-child td:first-child {
  border-top-left-radius: 8px;
}
tbody tr:first-child td:last-child {
  border-top-right-radius: 8px;
}
tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

/* ============================= */
/* COLUMN SIZING */
/* ============================= */

/* first column */
thead th:first-child,
tbody td:first-child {
  width: 3.5rem;
}

/* all other columns same width */
thead th:not(:first-child),
tbody td:not(:first-child) {
  width: 138px;
}

/* ============================= */
/* MOBILE */
/* ============================= */

@media screen and (max-width: 767px) {
  thead th:first-child,
  tbody td:first-child {
    width: 6rem;
    min-width: 6rem;
    max-width: 6rem;
  }

  /* Other columns: allow fill, but cap at 140px */
  thead th:not(:first-child),
  tbody td:not(:first-child) {
    width: 7rem;
    min-width: 7rem;
    max-width: 7rem;
  }
}

/*.table-content {
  overflow-x: auto; 
  display: block; 
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--p-small--font-size);
  color: var(--colors--text-primary);
  line-height: var(--p-small--line-height);
  letter-spacing: var(--p-small--letter-spacing);
  text-align: left;
  table-layout: auto; 
}

thead {
  display: table;
  width: 100%;
  table-layout: auto;
}

thead tr {
  background-color: transparent;
  font-size: var(--p-small--font-size);
  color: var(--colors--text-tertiary);
  padding: 0px;
  letter-spacing: var(--p-small--letter-spacing);
  line-height: var(--p-small--line-height);
}

thead th {
  font-weight: 500 !important;
  min-width: 12rem; 
}

thead th:not(:first-child),
tbody td:not(:first-child) {
  width: 6rem;
  max-width: 6rem;
  min-width: 6rem;
}


thead th:first-child,
tbody td:first-child {
  max-width: 4rem;
  min-width: 4rem;
  width: 4rem;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-content tbody tr:last-child {
  font-weight: 600;
}

tbody {
  display: table;
  width: 100%;
  table-layout: auto;
  position: relative;
}

tbody::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--colors--border-secondary);
  border-radius: 8px;
  z-index: -1;
  pointer-events: none;
}

th,
td {
  padding: 12px;
  min-width: 12rem; 
  white-space: nowrap; 
}


@media screen and (max-width: 767px) {
  thead th:first-child,
  tbody td:first-child {
    max-width: 6rem;
    min-width: 6rem;
  }
}

tbody tr {
  border-bottom: 1px solid var(--colors--border-secondary);
}

tbody tr:last-of-type {
  border-bottom: none;
}
*/