body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

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

th, td {
  padding: 5px;
  font-size: 0.9em;
  vertical-align: top;
}

td pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Tooltip styling */
.tooltip {
  position: relative;
  cursor: pointer;
  color: #007bff;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  top: 100%;
  background: #333;
  color: #fff;
  padding: 6px;
  border-radius: 4px;
  white-space: pre-wrap;       /* allow line breaks and wrap text */
  word-wrap: break-word;       /* break long words if needed */
  overflow-wrap: break-word;   /* better cross-browser support */
  z-index: 100;
  width: max-content;
  max-width: 400px;            /* constrain tooltip width */
  margin-top: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  display: none;               /* initially hidden */
}

/* Show tooltip on hover */
.tooltip:hover::after {
  display: block;
}

#header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}


#table-container {
  max-height: 800px;          /* make it taller — adjust as needed */
  height: 800px;              /* fixed height ensures sticky headers work well */
  /*overflow: auto;             /* enables both vertical and horizontal scroll */
  overflow-x: scroll;   /* always show horizontal scroll */
  overflow-y: auto;
}

#matrix {
  width: 100%;
  min-width: 1200px;          /* optional: ensure horizontal scroll if table is wide */
}

#matrix thead th {
  position: sticky;
  top: 0;              /* stick to the top of the table container */
  background: #f1f1f1; /* background so text is readable */
  z-index: 10;         /* make sure headers are above table body */
}


#matrix td.run-name {
  padding-left: 0.5em; /* optional slight padding */
  font-weight: bold;
  cursor: pointer;
}

.detail-row td {
  padding: 0; /* remove extra indentation from nested table */
}

.detail-row table.nested {
  width: 100%;
  border-collapse: collapse;
}