/**
 * DigiknackFormCard — bordered slideout / overlay form card.
 *
 * Canonical markup:
 *
 *   <div class="dk-form-card">  <!-- optional legacy: also .contact-card -->
 *     <div class="dk-form-card__field dk-form-card__field--fetch">…</div>
 *     <label class="dk-form-card__field">…</label>
 *   </div>
 *   <div class="contact-actions">…</div>
 *
 * Pad / hairlines / select flush apply ONLY to .dk-form-card.
 * Bare .contact-card keeps border/radius shell only (not a FormCard).
 *
 * Tokens: 8px row gap, cream hairlines, cream ink via .contact-input,
 * DigiknackSelect / DigiknackDate chevron flush right inside rows.
 */

/* Shell tokens — shared so dual-class cards inherit */
.dk-form-card,
.contact-card {
  --dk-form-card-gap: 8px;
  --dk-form-card-pad-x: 16px;
  --dk-form-card-pad-y: 8px;
  --dk-form-card-radius: 12px;
  --dk-form-card-border: rgba(227, 219, 204, 0.35);
  --dk-form-card-ink: var(--admin-nav-idle, var(--secondary-color, #e3dbcc));
  --dk-form-card-muted: rgba(227, 219, 204, 0.5);
  --dk-form-card-accent: var(--cal-accent, #f2133c);

  border: 1px solid var(--dk-form-card-border);
  border-radius: var(--dk-form-card-radius);
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
}

/* Form stack layout — FormCard only (not bare .contact-card) */
.dk-form-card {
  display: flex;
  flex-direction: column;
  gap: var(--dk-form-card-gap);
}

.dk-form-card__field,
.dk-form-card > .contact-field {
  display: block;
  position: relative;
  min-width: 0;
  margin: 0;
}

/* Hairline between rows — FormCard only */
.dk-form-card > .dk-form-card__field + .dk-form-card__field::before,
.dk-form-card > .contact-field + .contact-field::before,
.dk-form-card > .dk-form-card__field + .contact-field::before,
.dk-form-card > .contact-field + .dk-form-card__field::before {
  content: '';
  position: absolute;
  top: calc(var(--dk-form-card-gap, 8px) / -2);
  left: var(--dk-form-card-pad-x, 16px);
  right: var(--dk-form-card-pad-x, 16px);
  height: 1px;
  background: var(--dk-form-card-border);
  pointer-events: none;
}

/* Inputs inside FormCard */
.dk-form-card .contact-input {
  padding: var(--dk-form-card-pad-y, 8px) var(--dk-form-card-pad-x, 16px);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--dk-form-card-ink);
  caret-color: var(--dk-form-card-ink);
}

.dk-form-card .contact-input::placeholder {
  color: var(--dk-form-card-muted);
  font-weight: 400;
}

/* Password row owns padding — don't double-pad the input */
.dk-form-card .dk-password-row > .contact-input,
.dk-form-card .admin-login-password-row > .contact-input {
  padding: 0;
}

.dk-form-card textarea.contact-input.contact-textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.45;
}

/* URL / action row — input left, Fetch locked right */
.dk-form-card > .dk-form-card__field--fetch,
.dk-form-card > .contact-field.dk-form-card__field--fetch,
.dk-form-card > .contact-field.contact-field--url-fetch {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.dk-form-card > .dk-form-card__field--fetch > .dk-form-card__fetch-input,
.dk-form-card > .dk-form-card__field--fetch > label,
.dk-form-card > .contact-field--url-fetch > label,
.dk-form-card > .dk-form-card__field--fetch > .crm-add-lead-url__field {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: block;
}

.dk-form-card > .dk-form-card__field--fetch > .dk-form-card__fetch-input .contact-input,
.dk-form-card > .dk-form-card__field--fetch > label .contact-input,
.dk-form-card > .contact-field--url-fetch .contact-input {
  width: 100%;
  min-width: 0;
}

.dk-form-card > .dk-form-card__field--fetch > .dk-form-card__fetch-btn,
.dk-form-card > .dk-form-card__field--fetch > .dk-btn,
.dk-form-card > .contact-field--url-fetch > .dk-btn,
.dk-form-card > .dk-form-card__field--fetch > .crm-add-lead-url__fetch {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
  color: var(--dk-form-card-accent);
}

.dk-form-card__fetch-btn .dk-btn__icon,
.contact-field--url-fetch .dk-btn__icon {
  color: var(--dk-form-card-accent);
}

.dk-form-card__fetch-btn:disabled,
.contact-field--url-fetch .dk-btn:disabled {
  opacity: 0.55;
  pointer-events: none;
}

/*
 * DigiknackSelect / DigiknackDate inside a FormCard row:
 * full-width hit target, value left, trailing icon flush right.
 */
.dk-form-card .dk-form-card__field > .dk-select,
.dk-form-card .contact-field > .dk-select,
.dk-form-card .crm-country-field .dk-select,
.dk-form-card .dk-select--block {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: var(--dk-form-card-pad-y, 8px) var(--dk-form-card-pad-x, 16px);
}

.dk-form-card .dk-form-card__field > .dk-select .dk-select__trigger,
.dk-form-card .contact-field > .dk-select .dk-select__trigger,
.dk-form-card .crm-country-field .dk-select__trigger,
.dk-form-card .dk-select--block .dk-select__trigger {
  width: 100%;
  display: flex;
}

.dk-form-card .dk-form-card__field > .dk-select .dk-select__face,
.dk-form-card .contact-field > .dk-select .dk-select__face,
.dk-form-card .crm-country-field .dk-select__face,
.dk-form-card .dk-select--block .dk-select__face {
  width: 100%;
  max-width: 100%;
  justify-content: space-between;
}

.dk-form-card .dk-form-card__field > .dk-date,
.dk-form-card .contact-field > .dk-date {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: calc(
    (var(--dk-form-card-pad-y, 8px) * 2) + (0.9375rem * 1.45)
  );
  padding: var(--dk-form-card-pad-y, 8px) var(--dk-form-card-pad-x, 16px);
  box-sizing: border-box;
}

.dk-form-card .dk-form-card__field > .dk-date .dk-date__trigger,
.dk-form-card .contact-field > .dk-date .dk-date__trigger {
  width: 100%;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  line-height: 1.45;
}

/* DigiknackTime / DigiknackDateParts — pad on the shell; nested selects stay flush */
.dk-form-card .dk-form-card__field > .dk-time,
.dk-form-card .contact-field > .dk-time,
.dk-form-card .dk-form-card__field > .dk-date-parts,
.dk-form-card .contact-field > .dk-date-parts {
  width: 100%;
  box-sizing: border-box;
  padding: var(--dk-form-card-pad-y, 8px) var(--dk-form-card-pad-x, 16px);
}

.dk-form-card .dk-time .dk-select,
.dk-form-card .dk-time .dk-select--block,
.dk-form-card .dk-date-parts .dk-select,
.dk-form-card .dk-date-parts .dk-select--block {
  padding: 0;
}

/*
 * Native time rows — same FormCard padding/ink as text fields.
 * Admin uses color-scheme: dark, so the WebKit clock glyph renders pure white
 * unless we recolor it (match DigiknackDate cream treatment).
 */
.dk-form-card input.contact-input[type='time'] {
  color: var(--dk-form-card-ink);
  caret-color: var(--dk-form-card-ink);
  color-scheme: dark;
}

.dk-form-card input.contact-input[type='time']::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.9;
  filter: invert(0.88) sepia(0.25) saturate(0.55);
}

.dk-form-card input.contact-input[type='time']::-webkit-datetime-edit,
.dk-form-card input.contact-input[type='time']::-webkit-datetime-edit-fields-wrapper,
.dk-form-card input.contact-input[type='time']::-webkit-datetime-edit-hour-field,
.dk-form-card input.contact-input[type='time']::-webkit-datetime-edit-minute-field,
.dk-form-card input.contact-input[type='time']::-webkit-datetime-edit-ampm-field,
.dk-form-card input.contact-input[type='time']::-webkit-datetime-edit-text {
  color: var(--dk-form-card-ink);
}

/* Nested field groups that should participate in the card flex */
.dk-form-card__group {
  display: contents;
}

.dk-form-card__group[hidden] {
  display: none;
}

/*
 * Save / actions sit outside the card — never draw a hairline under the last field.
 */
.dk-form-card + .contact-actions::before {
  content: none;
}

/* Checkbox / chip row inside FormCard */
.dk-form-card__chips,
.dk-form-card .campaigns-platforms-field {
  padding: var(--dk-form-card-pad-y, 8px) var(--dk-form-card-pad-x, 16px);
}

.dk-form-card__chips-options,
.dk-form-card .campaigns-platforms-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}