/******************************************************************************/
/* 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;
}

body.keyboard-open .table-top-spacer {
  display: none;
}

body.keyboard-open .table-container {
  margin-top: 0;
  max-height: calc(100vh - 32px);
}

/* 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;
}

#excelSavedTable input[type="checkbox"],
#wordSavedTable input[type="checkbox"],
#powerpointSavedTable input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid #9ca3af;
  border-radius: 3px;
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}

#excelSavedTable input[type="checkbox"]::before,
#wordSavedTable input[type="checkbox"]::before,
#powerpointSavedTable input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: transform 0.12s ease-in-out;
  background: #111827;
  clip-path: polygon(14% 44%, 0 59%, 42% 100%, 100% 15%, 84% 0, 39% 62%);
}

#excelSavedTable input[type="checkbox"]:checked::before,
#wordSavedTable input[type="checkbox"]:checked::before,
#powerpointSavedTable input[type="checkbox"]:checked::before {
  transform: scale(1);
}

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

/* Sticky header for Excel, Word, and PowerPoint tables */
#excelSavedTable thead th,
#wordSavedTable thead th,
#powerpointSavedTable 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);
}

.summary.content-shown > td {
  background: #dcfce7;
}

.summary.content-shown:hover > td,
.summary.content-shown.active > td,
.summary.content-shown[aria-expanded="true"] > td {
  background: #bbf7d0;
}

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

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

.rename-action {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.25rem;
  border: 0;
  box-shadow: none;
  background: transparent;
  white-space: nowrap;
}

.rename-action-icon {
  color: #9ca3af;
  font-size: 12px;
  border: 0;
  box-shadow: none;
  background: transparent;
  margin-right: 4px;
}

.rename-action-text {
  white-space: nowrap;
}

/* 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);
  }
}