/**
 * DigiknackCrmDetails — two-column label/value rows (CRM lead Details tab look).
 * Labels left (muted), values on a shared vertical axis (cream ink).
 * Legacy alias: .crm-lead-detail / .crm-lead-detail__row / .crm-lead-detail__url
 */
.dk-crm-details,
.crm-lead-detail {
  --dk-crm-details-label: var(--cal-muted, rgba(227, 219, 204, 0.55));
  --dk-crm-details-ink: var(--admin-nav-idle, #e3dbcc);
  --dk-crm-details-label-col: 7rem;
  --dk-crm-details-row-gap: 10px;
  --dk-crm-details-col-gap: 16px;

  display: grid;
  grid-template-columns: minmax(0, var(--dk-crm-details-label-col)) minmax(0, 1fr);
  gap: var(--dk-crm-details-row-gap) var(--dk-crm-details-col-gap);
  margin: 8px 0 0;
  font-size: 0.9375rem;
  align-content: start;
  min-width: 0;
}

.dk-crm-details--tab,
.crm-lead-detail--tab {
  margin-bottom: 16px;
}

.dk-crm-details__row,
.crm-lead-detail__row {
  display: contents;
}

.dk-crm-details > dt,
.dk-crm-details__row > dt,
.crm-lead-detail > dt,
.crm-lead-detail__row > dt {
  margin: 0;
  color: var(--dk-crm-details-label);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.45;
  align-self: center;
  padding-top: 0;
  white-space: nowrap;
}

.dk-crm-details > dd,
.dk-crm-details__row > dd,
.crm-lead-detail > dd,
.crm-lead-detail__row > dd {
  margin: 0;
  min-width: 0;
  align-self: center;
  overflow-wrap: break-word;
  word-break: normal;
  color: var(--dk-crm-details-ink);
  font-weight: 400;
  line-height: 1.45;
}

/* Plain text / empty dash */
.dk-crm-details__empty,
.dk-crm-details dd:empty::before {
  color: var(--dk-crm-details-label);
}

/* Links (Web, etc.) — accent */
.dk-crm-details__url,
.crm-lead-detail__url {
  color: var(--cal-accent, #f2133c);
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dk-crm-details__url:hover,
.crm-lead-detail__url:hover {
  text-decoration: underline;
}

/*
 * Editable value controls in a details row — look like CRM display values:
 * transparent, borderless, cream ink, shared vertical padding.
 */
.dk-crm-details dd > .contact-input,
.dk-crm-details dd > .dk-select,
.dk-crm-details dd > .dk-date,
.crm-lead-detail dd > .contact-input,
.crm-lead-detail dd > .dk-select,
.crm-lead-detail dd > .dk-date {
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 4px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--dk-crm-details-ink);
}

.dk-crm-details dd > .contact-input::placeholder,
.crm-lead-detail dd > .contact-input::placeholder {
  color: rgba(227, 219, 204, 0.5);
}

.dk-crm-details dd > .contact-input:focus,
.dk-crm-details dd > .contact-input:focus-visible,
.crm-lead-detail dd > .contact-input:focus,
.crm-lead-detail dd > .contact-input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* DigiknackSelect — value left, chevron 4px after value (block face shrink-wraps) */
.dk-crm-details dd > .dk-select,
.crm-lead-detail dd > .dk-select {
  display: flex;
  width: 100%;
  max-width: 100%;
  padding: 4px 0;
}

.dk-crm-details dd > .dk-select .dk-select__trigger,
.dk-crm-details dd > .dk-select .dk-select__face,
.crm-lead-detail dd > .dk-select .dk-select__trigger,
.crm-lead-detail dd > .dk-select .dk-select__face {
  width: max-content;
  max-width: 100%;
  justify-content: flex-start;
  gap: 4px;
}

.dk-crm-details dd > .dk-select .dk-select__value,
.crm-lead-detail dd > .dk-select .dk-select__value {
  text-align: left;
  flex: 0 1 auto;
}

.dk-crm-details__row .dk-select--block,
.crm-lead-detail__row .dk-select--block {
  width: 100%;
  max-width: 100%;
}

/* DigiknackDate — same left flush as text / select, vertically centered */
.dk-crm-details dd > .dk-date,
.crm-lead-detail dd > .dk-date {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-height: calc(0.9375rem * 1.45);
  padding: 4px 0;
}

.dk-crm-details dd > .dk-date .dk-date__trigger,
.crm-lead-detail dd > .dk-date .dk-date__trigger {
  width: max-content;
  max-width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
}

.dk-crm-details dd > .dk-date .dk-date__value,
.crm-lead-detail dd > .dk-date .dk-date__value {
  text-align: left;
}

/* Native select fallback (before DigiknackSelect mounts) */
.dk-crm-details dd > select.contact-input,
.crm-lead-detail dd > select.contact-input {
  width: 100%;
  padding: 4px 0;
  margin: 0;
  min-height: 0;
  line-height: 1.45;
  font-size: inherit;
  appearance: none;
  background: transparent;
}