/* Table */
.table-wrapper {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  background: #ffffff;
  overflow-y: auto;
  margin-bottom: 4px;
}

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; table-layout: fixed; }

thead { position: sticky; top: 0; background: #f9fafb; z-index: 1; }

th, td { padding: 10px 11px; text-align: left; border-bottom: 1px solid #e5e7eb; vertical-align: middle; }

th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7280; }

tr:last-child td { border-bottom: none; }

.body-cell { font-weight: 500; width: 50%; }

.body-editable {
  border-radius: 8px;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; min-height: 40px; cursor: text;
}

/* Matched body (mind currently in original body) */
.body-editable.body-match { background: #dcfce7; box-shadow: inset 0 0 0 1px #bbf7d0; }

.body-text { display: inline-block; min-width: 40px; outline: none; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.body-text.helper-body { color: #000000; font-weight: 500; }

.body-text[contenteditable="true"]:empty::before { content: "Type a name…"; color: #9ca3af; font-weight: 400; font-size: 0.8rem; }

.row-btn { border: none; background: transparent; cursor: pointer; color: #9ca3af; font-size: 0.82rem; padding: 0 4px; border-radius: 999px; line-height: 1; flex-shrink: 0; }

.row-btn:hover { background: rgba(148,163,184,0.15); color: #ef4444; }

.body-edit-icon { color: #6b7280; }
.body-edit-icon:hover { background: rgba(129,140,248,0.2); color: #4f46e5; }

#castTable tbody td.mind-col { padding: 10px 11px; }

#castTable thead th.helper-col-header,
#castTable tbody td.helper-col { width: 70px; max-width: 70px; padding: 6px 8px; }

.helper-cell {
  cursor: default; user-select: none; position: relative; color: #111827; font-weight: 500;
  background: transparent;
  border-radius: 6px; box-shadow: none;
  touch-action: none; min-height: 34px;
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 0 4px;
  font-size: inherit; /* match table text */
}
.helper-cell.has-helper { cursor: grab; background: #f9fafb; box-shadow: inset 0 0 0 1px #e5e7eb; }
.helper-cell.has-helper.drag-source { background: #e0e7ff; box-shadow: inset 0 0 0 1px #a5b4fc; }
.helper-cell.has-helper.drag-over { outline: 2px dashed #a5b4fc; outline-offset: -2px; background: #eef2ff; }
.helper-cell.has-helper.invalid-drop { outline: 2px solid #f97373; outline-offset: -2px; background: #fee2e2; box-shadow: inset 0 0 0 1px #fecaca; }
.helper-cell::after { content: ""; }
.helper-cell.drag-source { background: #e0e7ff; box-shadow: inset 0 0 0 1px #a5b4fc; }
.helper-cell.drag-over { outline: 2px dashed #a5b4fc; outline-offset: -2px; background: #eef2ff; }
.helper-cell.invalid-drop { outline: 2px solid #f97373; outline-offset: -2px; background: #fee2e2; box-shadow: inset 0 0 0 1px #fecaca; }

.helper-disabled { cursor: default; color: #9ca3af; background: #f9fafb; box-shadow: none; }

/* Drag handle for helper cells (shows a small icon on the right when a helper is present) */
.helper-cell.has-helper::after {
  content: "⠿"; /* simple drag handle glyph */
  opacity: 0.7;
  font-size: 0.8rem;
  color: #6b7280;
  margin-left: 6px;
  padding-left: 6px;
}

.mind-cell {
  cursor: grab; user-select: none; position: relative; color: #111827; font-weight: 500;
  background: linear-gradient(90deg, #f9fafb, #eff6ff);
  border-radius: 8px; box-shadow: inset 0 0 0 1px #dbeafe;
  touch-action: none; min-height: 40px;
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%; padding: 4px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.mind-cell::after { content: "⠿"; opacity: 0.7; font-size: 0.8rem; color: #6b7280; margin-left: auto; padding-left: 6px; }
.mind-cell.drag-source { background: #dbeafe; box-shadow: inset 0 0 0 1px #60a5fa, 0 0 0 1px #bfdbfe; }
.mind-cell.drag-over { outline: 2px dashed #60a5fa; outline-offset: -2px; background: #eff6ff; }
.mind-cell.invalid-swap { outline: 2px solid #f97373; outline-offset: -2px; background: #fee2e2; box-shadow: inset 0 0 0 1px #fecaca; }

.mind-disabled { cursor: default; color: #9ca3af; background: #f9fafb; box-shadow: none; }
.mind-disabled::after { content: "–"; opacity: 0.6; margin-left: auto; padding-left: 6px; }