/******************************************************************************/
/* Tables                                                                     */
/******************************************************************************/

/* Spacer above the table (between Create button and header) */
.table-top-spacer {
  height: 12px;           /* tweak this for more/less vertical gap */
}

/* Scroll container for the saved tables */
.table-container {
  margin-top: 0;
  padding: 0;

  /* scrollable area height – adjust 260px if needed */
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  overflow-x: auto;

  border: none;
  border-radius: 4px;
  background: #fff;
}

/* Base table styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;              /* important so sticky math is clean */
  font-size: 12px;
}

/* Cells */
th,
td {
  border-bottom: 1px solid var(--brand-light);
  padding: 8px;
  text-align: left;
  vertical-align: middle;
}

/* Header styling */
th {
  background: var(--brand);
  color: #fff;
  border-bottom: 2px solid var(--brand);
  font-size: 14px;
  font-weight: 600;
}

/* Sticky header for both Excel and Word tables */
#excelSavedTable thead th,
#wordSavedTable thead th {
  position: sticky;
  top: 0;                       /* pinned at top of scroll box */
  z-index: 10;
  background: var(--brand);     /* repeat to avoid transparency */
  color: #fff;
  border-bottom: 2px solid var(--brand);
}

/******************************************************************************/
/* Expandable summary + details rows                                          */
/******************************************************************************/

/* summary = clickable row */
.summary {
  cursor: pointer;
}

/* default summary cells are white */
.summary > td {
  background: #fff;
  transition: background 0.2s ease;
}

/* hover highlight */
.summary:hover > td {
  background: var(--brand-verylight);
}

/* expanded highlight */
.summary.active > td,
.summary[aria-expanded="true"] > td {
  background: var(--brand-verylight);
}

/* details row */
.details {
  display: none;
}

.details > td {
  background: var(--brand-veryverylight);
  border-top: 1px solid var(--brand-light);
  font-size: 12px;
  color: #444;
}

/* CSS-only fallback if JS forgets to toggle (requires :has support) */
@supports (selector(:has(*))) {
  .summary:has(+ .details[aria-hidden="false"]) > td {
    background: var(--brand-verylight);
  }
}