#tissues-tracking-table {
  border: 1px solid var(--color-neutral-border);
  border-radius: 5px;
  margin: 20px;
}

#tissues-tracking-table thead {
  background-color: var(--color-neutral-surface);
}

#tissues-tracking-table th {
  position: relative;
}

.editable-disclaimer {
  background-color: var(--color-info-subtle);
  border: 1px solid var(--color-info-muted);
  border-radius: 5px;
  color: var(--color-info);
  margin: 20px;
}

.editable-disclaimer p {
  color: var(--color-info-emphasis);
}

.editable-input-container {
  background-color: var(--color-neutral-subtle);
  border: 1px dashed var(--color-neutral-muted);
  color: var(--color-neutral);
  transition: background-color 0.5s ease;
}

.editable-input-container::after {
  color: var(--color-neutral-muted);
  content: "\f303";
  font-family: "Font Awesome 6 Pro", sans-serif;
  font-size: 13px;
  font-weight: 200;
  position: absolute;
  right: 10px;
}

.editable-input-container.error {
  background-color: var(--color-danger-subtle) !important;
  border: 1px dashed var(--color-danger) !important;
}

.editable-input-container.error:hover {
  background-color: var(--color-danger-subtle) !important;
}

.editable-input-container.error::after {
  color: var(--color-danger);
  content: "\f06a";
}

.editable-input-container:hover {
  background-color: var(--color-info-subtle) !important;
  border: 1px solid var(--color-info-muted);
  border-radius: 5px;
  transition: background-color 0.5s ease;
}

.editable-input-container.value-present {
  background-color: var(--color-surface);
  color: var(--color-neutral-strong);
}

.editable-title .fa-pencil {
  color: var(--color-neutral-strong);
  font-size: 13px;
  font-weight: 200;
}

.editable-title {
  position: relative;
}

.editable-tip {
  color: var(--color-neutral);
}

.editable-title h2 {
  color: var(--color-neutral-emphasis);
  font-weight: bold;
}

.editable-title p {
  color: var(--color-neutral);
  font-size: medium;
}

.record-count {
  background-color: var(--color-neutral-surface);
  border-radius: 15px;
  font-size: 13px;
  font-weight: bold;
  right: 10px;
  top: 20px;
}

/* The header floats over the top rows, so scrolling a cell to the top of the
   scroller would put its editor underneath it. Height comes from
   sticky_table_header_controller, which measures the header it is pinning. */
[data-controller~="sticky-table-header"] [data-controller~="inline-edit"] {
  scroll-margin-top: var(--sticky-header-height, 0);
}

/* Sperm Source cell: long labels (partner name + ID + date) overflow without
   this — truncate inside the column. */
[data-column-key="sperm_source_gid"] [data-inline-edit-target="display"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}