/**
 * DigiknackPassword — show/hide password, matched to DigiknackSelect.
 * Cream value, accent eye 4px after text (flush right inside DigiknackFormCard).
 *
 *   <div class="dk-password-row">
 *     <input class="contact-input dk-password-input" type="password" data-dk-password>
 *     <button type="button" class="dk-password-toggle" data-dk-password-toggle …>
 *       <i data-lucide="eye" class="dk-password-toggle__icon" aria-hidden="true"></i>
 *     </button>
 *   </div>
 *
 * Legacy admin login aliases: .admin-login-password-*
 */

:root {
  --dk-password-ink: var(--admin-nav-idle, #e3dbcc);
  --dk-password-muted: rgba(227, 219, 204, 0.5);
  --dk-password-accent: var(--cal-accent, #f2133c);
  --dk-password-icon-gap: 4px;
}

.dk-password-row,
.admin-login-password-row {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--dk-password-icon-gap, 4px);
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  vertical-align: middle;
}

.dk-password-input,
.admin-login-password-input,
.dk-password-row > .contact-input,
.admin-login-password-row > .contact-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--dk-password-ink);
  caret-color: var(--dk-password-ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
}

.dk-password-input::placeholder,
.admin-login-password-input::placeholder,
.dk-password-row > .contact-input::placeholder,
.admin-login-password-row > .contact-input::placeholder {
  color: var(--dk-password-muted);
}

.dk-password-input:focus,
.dk-password-input:focus-visible,
.admin-login-password-input:focus,
.admin-login-password-input:focus-visible,
.dk-password-row > .contact-input:focus,
.dk-password-row > .contact-input:focus-visible,
.admin-login-password-row > .contact-input:focus,
.admin-login-password-row > .contact-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.dk-password-toggle,
.admin-login-password-toggle {
  position: static;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--dk-password-accent);
  cursor: pointer;
  line-height: 0;
  transform: none;
}

.dk-password-toggle:hover,
.admin-login-password-toggle:hover {
  color: var(--dk-password-accent);
  background: transparent;
  opacity: 0.9;
}

.dk-password-toggle:focus,
.dk-password-toggle:focus-visible,
.admin-login-password-toggle:focus,
.admin-login-password-toggle:focus-visible {
  outline: none;
}

.dk-password-toggle__icon,
.admin-login-password-toggle__icon {
  width: 14px;
  height: 14px;
  display: block;
  color: inherit;
  stroke: currentColor;
}

.dk-password-toggle__icon svg,
.admin-login-password-toggle__icon svg,
.dk-password-toggle__icon i,
.admin-login-password-toggle__icon i {
  width: 14px;
  height: 14px;
  display: block;
  stroke: currentColor;
}

/*
 * DigiknackFormCard row — same shell as DigiknackSelect:
 * full-width hit target, value left, accent icon flush right.
 */
.dk-form-card .dk-form-card__field > .dk-password-row,
.dk-form-card .contact-field > .dk-password-row,
.contact-card .contact-field > .dk-password-row,
.dk-form-card .dk-form-card__field > .admin-login-password-row,
.dk-form-card .contact-field > .admin-login-password-row,
.contact-card .contact-field > .admin-login-password-row {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: var(--dk-form-card-pad-y, 8px) var(--dk-form-card-pad-x, 16px);
  gap: var(--dk-password-icon-gap, 4px);
  justify-content: space-between;
}

.dk-form-card .dk-password-row > .contact-input,
.dk-form-card .admin-login-password-row > .contact-input,
.contact-card .dk-password-row > .contact-input,
.contact-card .admin-login-password-row > .contact-input {
  padding: 0;
  flex: 1 1 auto;
}

/* DigiknackCrmDetails / DigiknackField — icon 4px after value (not far right) */
.dk-crm-details dd > .dk-password-row,
.crm-lead-detail dd > .dk-password-row,
.dk-field > .dk-password-row {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 4px 0;
  gap: var(--dk-password-icon-gap, 4px);
  justify-content: flex-start;
}

.dk-field > .dk-password-row {
  width: 100%;
}