/* ==========================================================================
 * CRM History Table
 * ========================================================================== */

#edit-list {
  width: 100%;
  margin: 1.5rem 0;
  border: 1px solid #d3d4d9;
  border-radius: 6px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  color: #232429;
  font-size: 0.95rem;
  line-height: 1.45;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
 * Table header
 * -------------------------------------------------------------------------- */

#edit-list thead th {
  padding: 0.75rem 1rem;
  border-bottom: 2px solid #d3d4d9;
  background: #f5f5f7;
  color: #55565b;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: left;
  vertical-align: middle;
}

#edit-list thead th:first-child {
  border-top-left-radius: 6px;
}

#edit-list thead th:last-child {
  border-top-right-radius: 6px;
}

/* --------------------------------------------------------------------------
 * Table rows
 * -------------------------------------------------------------------------- */

#edit-list tbody tr {
  background: #fff;
  transition: background-color 120ms ease;
}

#edit-list tbody tr:hover {
  background: #f8f8fa;
}

#edit-list tbody tr:not(:last-child) td {
  border-bottom: 1px solid #e3e3e7;
}

#edit-list tbody td {
  padding: 1rem;
  vertical-align: top;
}

/* --------------------------------------------------------------------------
 * Column widths
 * -------------------------------------------------------------------------- */

#edit-list th:nth-child(1),
#edit-list td:nth-child(1) {
  width: 30%;
}

#edit-list th:nth-child(2),
#edit-list td:nth-child(2),
#edit-list th:nth-child(3),
#edit-list td:nth-child(3) {
  width: 35%;
}

/* --------------------------------------------------------------------------
 * Event / change title
 * -------------------------------------------------------------------------- */

#edit-list tbody > tr > td:first-child {
  color: #232429;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Info details
 * -------------------------------------------------------------------------- */

#edit-list details {
  margin-top: 0.75rem;
}

#edit-list details summary {
  display: inline-block;
  cursor: pointer;
  color: #55565b;
  font-size: 0.875rem;
  font-weight: 400;
  background: transparent;
  padding: 0;
  border-bottom: 1px dotted var(--gin-color-primary);
}

#edit-list details summary:hover {
  color: #e5007d;
}

#edit-list details > div {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid #e5007d;
  background: #f8f8fa;
  color: #55565b;
  font-size: 0.875rem;
}

/* Info fields */

#edit-list details > div > div {
  display: flex;
  gap: 0.75rem;
  margin: 0.25rem 0;
}

#edit-list details label {
  min-width: 110px;
  color: #6b6c72;
  font-weight: 600;
}

#edit-list details span {
  color: #232429;
}

/* --------------------------------------------------------------------------
 * History items
 * -------------------------------------------------------------------------- */

#edit-list .history-item {
  margin: 0 0 0.5rem;
  padding-left: 0;
}

#edit-list .history-item:last-child {
  margin-bottom: 0;
}

/*
 * Nested history items are used for grouped values such as
 * email addresses, phone numbers and addresses.
 */
#edit-list .history-item .history-item {
  margin-top: 0.25rem;
}

/* Labels */

#edit-list .history-item > label,
#edit-list .history-item > div > label {
  display: inline-block;
  margin-right: 0.5rem;
  color: #55565b;
  font-size: 0.875rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
 * Changed values
 * -------------------------------------------------------------------------- */

#edit-list .history-diff-value {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

/* Old value */

#edit-list .history-diff-value--old {
  background: #fff1f1;
  border-color: #f0caca;
  color: #8a3030;
}

/* New value */

#edit-list .history-diff-value--new {
  background: #edf8f1;
  border-color: #c8e6d1;
  color: #27643c;
}

/* Changed value */

#edit-list .history-diff-value--changed {
  background: #fff8e6;
  border-color: #ead9a8;
  color: #765b16;
}

/* Empty values */

#edit-list .history-diff-value:empty {
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
 * Responsive
 * -------------------------------------------------------------------------- */

@media screen and (max-width: 800px) {
  #edit-list {
    font-size: 0.9rem;
  }

  #edit-list thead th,
  #edit-list tbody td {
    padding: 0.75rem;
  }

  #edit-list th:nth-child(1),
  #edit-list td:nth-child(1),
  #edit-list th:nth-child(2),
  #edit-list td:nth-child(2),
  #edit-list th:nth-child(3),
  #edit-list td:nth-child(3) {
    width: auto;
  }
}